diff --git a/.claude/commands/add-enrichment.md b/.claude/commands/add-enrichment.md new file mode 100644 index 00000000000..04154e73abb --- /dev/null +++ b/.claude/commands/add-enrichment.md @@ -0,0 +1,142 @@ +--- +description: Add a code-defined table enrichment (registry entry) backed by a provider cascade, ensuring each provider tool has hosted-key support +argument-hint: +--- + +# Adding a Table Enrichment + +Enrichments are code-defined entries in `apps/sim/enrichments/` that run **directly per table row** (no workflow). Each enrichment declares inputs, outputs, and an ordered list of **providers**; the cascade runner tries providers in order and the first non-empty result fills the cell. Each provider calls one existing Sim tool via `executeTool`, which injects the workspace's BYOK key or a **hosted key** and bills usage automatically. + +Because enrichments run on Sim's hosted keys by default, **every provider tool you reference must have hosted-key support** — otherwise it can only run when the workspace brings its own key. This command makes that check a required step. + +## Overview + +| Step | What | Where | +|------|------|-------| +| 1 | Pick the data-source tool(s) for each output | `tools/{service}/` + `tools/registry.ts` | +| 2 | **Verify each tool has `hosting`; if not, run `/add-hosted-key`** | `tools/{service}/{action}.ts` | +| 3 | Write the enrichment definition | `enrichments/{name}/{name}.ts` + `index.ts` | +| 4 | Register it | `enrichments/registry.ts` | +| 5 | Verify | tsc / biome / manual run | + +## Architecture (what you're plugging into) + +- **`enrichments/types.ts`** — `EnrichmentConfig { id, name, description, icon, inputs, outputs, providers }` and `EnrichmentProvider { id, label, toolId, buildParams, mapOutput }`. Providers are **plain data** (no `@/tools` import) so the catalog stays client-safe. +- **`enrichments/providers.ts`** — `toolProvider(...)` (typed passthrough) plus shared input helpers: `str(v)`, `normalizeDomain(v)`, `firstNonEmpty(arr)`, `splitName(fullName)`. +- **`enrichments/run.ts`** — the server-only cascade runner. Calls `executeTool(provider.toolId, { ...params, _context: { workspaceId } })`, accumulates hosted-key cost, returns the first non-empty mapped result. **You do not edit this** — it works for any registry entry. +- **`enrichments/registry.ts`** — `ENRICHMENT_REGISTRY` / `ALL_ENRICHMENTS` / `getEnrichment`. Register new entries here. + +Outputs automatically become table columns; billing, the catalog/sidebar UI, the column meta-header icon, and per-row execution all work with no extra wiring. + +## Step 1: Pick the data-source tool(s) + +For each output the enrichment produces, decide which existing tool provides it. Look up the service's API and the tool in `apps/sim/tools/{service}/` (e.g. `hunter_email_finder`, `pdl_person_enrich`, `pdl_company_enrich`). Confirm: + +- The tool id is registered in `apps/sim/tools/registry.ts`. +- Its `params` accept what you can derive from table columns (read the tool's `params`). +- Its `outputs` / `transformResponse` actually expose the field you need (read the real output shape — don't assume). + +Order providers **cheapest / most-likely-to-hit first**; the cascade stops at the first non-empty result. Apollo / LinkedIn are not hosted-safe (ToS) — don't use them. + +## Step 2: Verify hosted-key support — chain to `/add-hosted-key` if missing + +**This is the required gate.** For every tool a provider calls, open `apps/sim/tools/{service}/{action}.ts` and check for a `hosting` block: + +```typescript +hosting: { + envKeyPrefix: 'SERVICE_API_KEY', + apiKeyParam: 'apiKey', + byokProviderId: 'service', + pricing: { /* ... */ }, + rateLimit: { /* ... */ }, +} +``` + +- **If `hosting` is present** — good. Note the `envKeyPrefix`; the deployment needs `{PREFIX}_COUNT` + `{PREFIX}_1..N` env vars set for the hosted key to actually resolve at runtime (ops concern, not code). If those env vars aren't set in the target environment, the provider will only run with a workspace BYOK key. +- **If `hosting` is absent** — the tool can't use a Sim-provided key, so the enrichment would silently produce blank cells on hosted Sim. **Stop and run `/add-hosted-key `** to add hosted-key support to that tool first, then come back. Do this for every provider tool that lacks it. + +Why it matters: the cascade runner only bills (and only reads `output.cost.total`) when `executeTool` injected a hosted key, which requires the tool's `hosting` config. No `hosting` → no hosted key → the enrichment depends entirely on per-workspace BYOK. + +## Step 3: Write the enrichment definition + +Create `apps/sim/enrichments/{name}/{name}.ts` and a barrel `index.ts`. Mirror the existing entries (`work-email`, `phone-number`, `company-domain`, `company-info`). + +```typescript +import { SomeIcon } from 'lucide-react' +import { filterUndefined } from '@sim/utils/object' +import { normalizeDomain, splitName, str, toolProvider } from '@/enrichments/providers' +import type { EnrichmentConfig } from '@/enrichments/types' + +export const myEnrichment: EnrichmentConfig = { + id: 'my-enrichment', + name: 'My Enrichment', + description: 'One concise sentence describing what it finds.', + icon: SomeIcon, + inputs: [ + // Person enrichments take a single canonical `fullName` (Clay-style); + // split it with splitName() for tools that need first/last. + { id: 'fullName', name: 'Full name', type: 'string', required: true }, + { id: 'companyDomain', name: 'Company domain', type: 'string' }, + ], + outputs: [{ id: 'value', name: 'value', type: 'string' }], + providers: [ + toolProvider({ + id: 'provider-a', + label: 'Provider A', + toolId: 'service_action', // must have `hosting` (Step 2) + buildParams: (inputs) => { + // Return null when there aren't enough inputs → cascade skips this provider. + const name = splitName(inputs.fullName) + const domain = normalizeDomain(inputs.companyDomain) + if (!name || !domain) return null + return { domain, first_name: name.firstName, last_name: name.lastName } + }, + mapOutput: (output) => { + // Return { [outputId]: value } on a hit, or null to fall through. + const value = str(output.value) + return value ? { value } : null + }, + }), + // ...additional fallback providers, in priority order. + ], +} +``` + +```typescript +// apps/sim/enrichments/{name}/index.ts +export { myEnrichment } from './my-enrichment' +``` + +Rules: +- Keep the file **client-safe**: import only `lucide-react`, `@sim/utils/*`, `@/enrichments/providers`, and the types. **Never import `@/tools`** here — the runner does the tool call. +- `buildParams` returns `null` when inputs are insufficient (provider skipped). `mapOutput` returns `null`/empty for a miss (falls through). Use `filterUndefined` when assembling optional tool params; coerce numbers explicitly (don't pass `''` to number outputs). +- Output `id`s are the keys `mapOutput` returns; output `name`s are the default column names (the user can rename them in the config). + +## Step 4: Register it + +In `apps/sim/enrichments/registry.ts`, import and add the entry (catalog order is registration order): + +```typescript +import { myEnrichment } from '@/enrichments/my-enrichment' + +export const ENRICHMENT_REGISTRY: EnrichmentRegistry = { + // ...existing + [myEnrichment.id]: myEnrichment, +} +``` + +## Step 5: Verify + +1. `bunx tsc --noEmit` (from `apps/sim`, `NODE_OPTIONS=--max-old-space-size=8192`) and `bunx biome check` on the changed files. +2. In a table → **+ New column → Enrichments** → pick the new enrichment, map its inputs to columns, name the output column(s), Save. Confirm it appears in the catalog with its icon/description. +3. With hosted keys (or a workspace BYOK key) configured for each provider's service, run a row and confirm the cell fills; the dev-server log shows `Enrichment hit { provider }`. A row whose providers all miss completes blank; a row where every provider errored shows an error cell. + +## Checklist + +- [ ] Each output mapped to a real tool field (verified against the tool's `params`/`outputs`) +- [ ] **Every provider tool has a `hosting` block — ran `/add-hosted-key` for any that didn't** +- [ ] Providers ordered cheapest / most-likely-first; Apollo/LinkedIn not used +- [ ] Enrichment file is client-safe (no `@/tools` import); uses `toolProvider` + shared helpers +- [ ] `buildParams` returns `null` on insufficient inputs; `mapOutput` returns `null` on a miss +- [ ] Registered in `enrichments/registry.ts` +- [ ] tsc + biome clean; created and ran the column end-to-end diff --git a/apps/sim/app/api/table/[tableId]/groups/route.ts b/apps/sim/app/api/table/[tableId]/groups/route.ts index bf74653212a..197a1722b1b 100644 --- a/apps/sim/app/api/table/[tableId]/groups/route.ts +++ b/apps/sim/app/api/table/[tableId]/groups/route.ts @@ -113,6 +113,10 @@ export const PATCH = withRouteHandler(async (request: NextRequest, { params }: R ...(validated.mappingUpdates !== undefined ? { mappingUpdates: validated.mappingUpdates } : {}), + ...(validated.inputMappings !== undefined + ? { inputMappings: validated.inputMappings } + : {}), + ...(validated.type !== undefined ? { type: validated.type } : {}), ...(validated.autoRun !== undefined ? { autoRun: validated.autoRun } : {}), }, requestId diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx new file mode 100644 index 00000000000..2e021797858 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx @@ -0,0 +1,371 @@ +'use client' + +import { useState } from 'react' +import { toError } from '@sim/utils/errors' +import { generateId } from '@sim/utils/id' +import { X } from 'lucide-react' +import { + Badge, + Button, + CollapsibleCard, + Combobox, + FieldDivider, + Input, + Label, + Switch, + toast, +} from '@/components/emcn' +import { ArrowLeft } from '@/components/emcn/icons' +import type { AddWorkflowGroupBodyInput } from '@/lib/api/contracts/tables' +import { cn } from '@/lib/core/utils/cn' +import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib/table' +import { deriveOutputColumnName } from '@/lib/table/column-naming' +import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types' +import { + useAddWorkflowGroup, + useUpdateColumn, + useUpdateWorkflowGroup, +} from '@/hooks/queries/tables' +import { RunSettingsSection } from '../workflow-sidebar/run-settings-section' + +interface EnrichmentConfigProps { + enrichment: EnrichmentDef + allColumns: ColumnDefinition[] + workspaceId: string + tableId: string + onBack: () => void + onClose: () => void + /** When set, the panel edits this existing enrichment group (pre-filled, + * updates instead of creating; changed output names rename their columns). */ + existingGroup?: WorkflowGroup +} + +/** Pre-fill an input's column from a same-named column (case-insensitive). */ +function defaultColumnFor( + input: EnrichmentDef['inputs'][number], + columns: ColumnDefinition[] +): string { + const match = columns.find( + (c) => + c.name.toLowerCase() === input.id.toLowerCase() || + c.name.toLowerCase() === input.name.toLowerCase() + ) + return match?.name ?? '' +} + +/** + * Config panel for a code-defined enrichment. No workflow: the user maps each + * enrichment input to a table column; outputs are fixed by the enrichment. + * Saving creates an `enrichment` workflow group that the table runs per row. + */ +export function EnrichmentConfig({ + enrichment, + allColumns, + workspaceId, + tableId, + onBack, + onClose, + existingGroup, +}: EnrichmentConfigProps) { + const addWorkflowGroup = useAddWorkflowGroup({ workspaceId, tableId }) + const updateWorkflowGroup = useUpdateWorkflowGroup({ workspaceId, tableId }) + const updateColumn = useUpdateColumn({ workspaceId, tableId }) + const isEditing = Boolean(existingGroup) + + /** Output column's persisted name (edit mode), used to detect renames. */ + const originalOutputName = (outputId: string): string | undefined => + existingGroup?.outputs.find((o) => o.outputId === outputId)?.columnName + + const [inputMappings, setInputMappings] = useState>(() => { + if (existingGroup) { + const seed: Record = {} + for (const m of existingGroup.inputMappings ?? []) seed[m.inputName] = m.columnName + return seed + } + const seed: Record = {} + for (const input of enrichment.inputs) { + const col = defaultColumnFor(input, allColumns) + if (col) seed[input.id] = col + } + return seed + }) + // Per-output column names. Editable in both modes — edit mode seeds the + // existing column names and renames changed ones on save. + const [outputNames, setOutputNames] = useState>(() => { + const seed: Record = {} + if (existingGroup) { + for (const o of existingGroup.outputs) { + if (o.outputId) seed[o.outputId] = o.columnName + } + return seed + } + const taken = new Set(allColumns.map((c) => c.name)) + for (const o of enrichment.outputs) { + const colName = deriveOutputColumnName(o.name, taken) + taken.add(colName) + seed[o.id] = colName + } + return seed + }) + const [collapsed, setCollapsed] = useState>({}) + const [autoRun, setAutoRun] = useState(() => existingGroup?.autoRun ?? false) + const [deps, setDeps] = useState(() => existingGroup?.dependencies?.columns ?? []) + const [showValidation, setShowValidation] = useState(false) + + const columnOptions = allColumns.map((c) => ({ label: c.name, value: c.name })) + const missingRequired = enrichment.inputs.some((i) => i.required && !inputMappings[i.id]) + const depsValid = !autoRun || deps.length > 0 + + /** Per-output column-name validation (both modes). Excludes the output's own + * current column so renaming to its existing name isn't flagged. */ + function outputNameError(outputId: string): string | null { + const value = (outputNames[outputId] ?? '').trim() + if (!value) return 'Required' + const lower = value.toLowerCase() + const ownOriginal = originalOutputName(outputId)?.toLowerCase() + if ( + allColumns.some((c) => c.name.toLowerCase() === lower && c.name.toLowerCase() !== ownOriginal) + ) + return 'Column already exists' + const dup = enrichment.outputs.some( + (o) => o.id !== outputId && (outputNames[o.id] ?? '').trim().toLowerCase() === lower + ) + return dup ? 'Duplicate name' : null + } + const outputsInvalid = enrichment.outputs.some((o) => outputNameError(o.id) !== null) + const saveDisabled = + addWorkflowGroup.isPending || + updateWorkflowGroup.isPending || + updateColumn.isPending || + (showValidation && missingRequired) || + !depsValid || + outputsInvalid + + async function handleSave() { + if (missingRequired || (autoRun && deps.length === 0) || outputsInvalid) { + setShowValidation(true) + return + } + const inputMappingsList = Object.entries(inputMappings) + .filter(([, columnName]) => Boolean(columnName)) + .map(([inputName, columnName]) => ({ inputName, columnName })) + + if (existingGroup) { + try { + // Apply the group edit (mappings / deps / auto-run) first so it lands + // even if a later column rename fails. Renames run after and cascade + // into the group's output refs server-side. + await updateWorkflowGroup.mutateAsync({ + groupId: existingGroup.id, + name: enrichment.name, + dependencies: { columns: deps }, + inputMappings: inputMappingsList, + autoRun, + }) + for (const o of enrichment.outputs) { + const original = originalOutputName(o.id) + const next = (outputNames[o.id] ?? '').trim() + if (original && next && next !== original) { + await updateColumn.mutateAsync({ columnName: original, updates: { name: next } }) + } + } + toast.success(`Updated "${enrichment.name}"`) + onClose() + } catch (err) { + toast.error(toError(err).message) + } + return + } + + const groupId = generateId() + const taken = new Set(allColumns.map((c) => c.name)) + const outputColumns: AddWorkflowGroupBodyInput['outputColumns'] = [] + const outputs: WorkflowGroupOutput[] = [] + for (const o of enrichment.outputs) { + const desired = (outputNames[o.id] ?? '').trim() || o.name + const colName = deriveOutputColumnName(desired, taken) + taken.add(colName) + outputColumns.push({ + name: colName, + type: o.type, + required: false, + unique: false, + workflowGroupId: groupId, + }) + outputs.push({ blockId: '', path: '', outputId: o.id, columnName: colName }) + } + + const group: WorkflowGroup = { + id: groupId, + workflowId: '', + enrichmentId: enrichment.id, + name: enrichment.name, + type: 'enrichment', + dependencies: { columns: deps }, + outputs, + inputMappings: inputMappingsList, + autoRun, + } + try { + await addWorkflowGroup.mutateAsync({ group, outputColumns }) + toast.success(`Added "${enrichment.name}"`) + onClose() + } catch (err) { + toast.error(toError(err).message) + } + } + + return ( +
+
+
+ +

+ {enrichment.name} +

+
+ +
+ +
+
+ + {enrichment.inputs.length === 0 ? ( +

+ This enrichment needs no inputs. +

+ ) : ( +
+ {enrichment.inputs.map((input) => ( + + {input.type} + + } + collapsed={collapsed[input.id] ?? false} + onToggleCollapse={() => + setCollapsed((prev) => ({ ...prev, [input.id]: !prev[input.id] })) + } + > + + + setInputMappings((prev) => ({ ...prev, [input.id]: columnName })) + } + error={ + showValidation && input.required && !inputMappings[input.id] + ? 'Required' + : null + } + /> + + ))} +
+ )} +
+ + + +
+ +
+ {enrichment.outputs.map((output) => { + const outErr = showValidation ? outputNameError(output.id) : null + return ( + + {output.type} + + } + collapsed={collapsed[`out:${output.id}`] ?? false} + onToggleCollapse={() => + setCollapsed((prev) => ({ + ...prev, + [`out:${output.id}`]: !prev[`out:${output.id}`], + })) + } + > + + + setOutputNames((prev) => ({ ...prev, [output.id]: e.target.value })) + } + spellCheck={false} + autoComplete='off' + className={cn(outErr && 'border-[var(--text-error)]')} + /> + {outErr &&

{outErr}

} + + ) + })} +
+
+ + + +
+ + setAutoRun(!!v)} + /> +
+ {autoRun && ( + <> + + + + )} +
+ +
+ + +
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx new file mode 100644 index 00000000000..3594d0ca029 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx @@ -0,0 +1,182 @@ +'use client' + +import { useState } from 'react' +import { X } from 'lucide-react' +import { Button, Input } from '@/components/emcn' +import { Search } from '@/components/emcn/icons' +import { cn } from '@/lib/core/utils/cn' +import type { ColumnDefinition, WorkflowGroup } from '@/lib/table' +import { ALL_ENRICHMENTS } from '@/enrichments' +import { getEnrichment } from '@/enrichments/registry' +import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types' +import { EnrichmentConfig } from './enrichment-config' + +interface EnrichmentsSidebarProps { + open: boolean + onClose: () => void + allColumns: ColumnDefinition[] + workspaceId: string + tableId: string + /** When set, the sidebar opens straight into this enrichment group's config + * in edit mode (skips the catalog list). */ + editGroup?: WorkflowGroup +} + +/** + * Right-edge panel for the enrichments flow. Lists the code-defined enrichment + * registry and, once one is picked, swaps in its config panel in the *same* + * sliding panel (input mapping + outputs), which creates an enrichment column. + */ +export function EnrichmentsSidebar({ open, ...rest }: EnrichmentsSidebarProps) { + return ( + + ) +} + +function EnrichmentsSidebarBody({ + onClose, + allColumns, + workspaceId, + tableId, + editGroup, +}: Omit) { + const [selected, setSelected] = useState(null) + const [query, setQuery] = useState('') + + // Edit mode: open the picked enrichment's config directly, pre-filled from the + // existing group. No catalog list / back-to-list step. + const editEnrichment = editGroup ? getEnrichment(editGroup.enrichmentId) : undefined + if (editGroup && editEnrichment) { + return ( + + ) + } + // Editing a group whose enrichment was removed from the registry — surface it + // rather than silently dropping into the "new enrichment" catalog. + if (editGroup && !editEnrichment) { + return ( +
+
+

Enrichment

+ +
+
+

+ This enrichment ("{editGroup.enrichmentId}") is no longer available. Delete the column + and add a current enrichment. +

+
+
+ ) + } + + if (selected) { + return ( + setSelected(null)} + onClose={onClose} + /> + ) + } + + const normalized = query.trim().toLowerCase() + const filtered = normalized + ? ALL_ENRICHMENTS.filter( + (e) => + e.name.toLowerCase().includes(normalized) || + e.description.toLowerCase().includes(normalized) + ) + : ALL_ENRICHMENTS + + return ( +
+
+

Enrichments

+ +
+ +
+
+ + setQuery(e.target.value)} + placeholder='Search' + spellCheck={false} + autoComplete='off' + className='pl-7' + /> +
+
+ +
+ {filtered.length === 0 ? ( +

No enrichments found.

+ ) : ( +
    + {filtered.map((enrichment) => { + const Icon = enrichment.icon + return ( +
  • + +
    • + ) + })} +
+ )} +
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/index.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/index.ts new file mode 100644 index 00000000000..d42dfa8815f --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/index.ts @@ -0,0 +1 @@ +export { EnrichmentsSidebar } from './enrichments-sidebar' diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts index 0fca186c0c6..34b5f41f5fa 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts @@ -1,5 +1,6 @@ export * from './column-config-sidebar' export * from './context-menu' +export * from './enrichments-sidebar' export * from './new-column-dropdown' export * from './row-modal' export * from './run-status-control' diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx index 32956f7c6ca..045e44390f2 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx @@ -1,10 +1,12 @@ 'use client' +import { Sparkles } from 'lucide-react' import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/emcn' import { Plus } from '@/components/emcn/icons' @@ -28,18 +30,20 @@ interface NewColumnDropdownProps { disabled: boolean onPickType: (type: ColumnDefinition['type']) => void onPickWorkflow: () => void + onPickEnrichment: () => void } /** * "+ New column" dropdown — the single entry point for creating a column. - * Lists every column type plus "Workflow"; picking a type opens the right - * sidebar pre-seeded. + * Lists every column type plus "Workflow" and "Enrichments"; picking a type + * opens the right sidebar pre-seeded. */ export function NewColumnDropdown({ trigger, disabled, onPickType, onPickWorkflow, + onPickEnrichment, }: NewColumnDropdownProps) { const menu = ( @@ -61,6 +65,15 @@ export function NewColumnDropdown({ )} + {isWorkflowColumnsEnabledClient && ( + <> + + + Enrichments + + + + )} {VISIBLE_COLUMN_TYPE_OPTIONS.map((option) => { const Icon = option.icon const onSelect = diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-content.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-content.tsx index 3447d535327..60c3cc05336 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-content.tsx @@ -20,6 +20,8 @@ interface CellContentProps { * is empty. `undefined` (or empty) means no waiting state. */ waitingOnLabels?: string[] + /** Column is an enrichment output — a completed-but-empty cell renders "Not found". */ + isEnrichmentOutput?: boolean } /** @@ -37,8 +39,9 @@ export function CellContent({ onSave, onCancel, waitingOnLabels, + isEnrichmentOutput, }: CellContentProps) { - const kind = resolveCellRender({ value, exec, column, waitingOnLabels }) + const kind = resolveCellRender({ value, exec, column, waitingOnLabels, isEnrichmentOutput }) return ( <> diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx index 27ff1f2ae44..557186b7668 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx @@ -20,6 +20,7 @@ export type CellRenderKind = | { kind: 'cancelled' } | { kind: 'error' } | { kind: 'waiting'; labels: string[] } + | { kind: 'not-found' } // Plain typed cells | { kind: 'boolean'; checked: boolean } | { kind: 'json'; text: string } @@ -34,6 +35,9 @@ interface ResolveCellRenderInput { exec: RowExecutionMetadata | undefined column: DisplayColumn waitingOnLabels: string[] | undefined + /** Column is an enrichment-group output — a completed-but-empty cell renders + * "Not found" rather than a blank, since the enrichment ran and matched nothing. */ + isEnrichmentOutput?: boolean } export function resolveCellRender({ @@ -41,8 +45,10 @@ export function resolveCellRender({ exec, column, waitingOnLabels, + isEnrichmentOutput, }: ResolveCellRenderInput): CellRenderKind { const isNull = value === null || value === undefined + const isEmpty = isNull || value === '' if (column.workflowGroupId) { const blockId = column.outputBlockId @@ -57,8 +63,9 @@ export function resolveCellRender({ if (inFlight && blockRunning) return { kind: 'running' } // Value wins over pending-upstream: a finished column stays finished even - // while other blocks in the group are still running. - if (!isNull) return { kind: 'value', text: stringifyValue(value) } + // while other blocks in the group are still running. An empty string is not + // a value — it falls through so a completed enrichment can show "Not found". + if (!isEmpty) return { kind: 'value', text: stringifyValue(value) } if (inFlight && !(groupHasBlockErrors && !blockRunning)) { // A `pending` cell whose jobId starts with `paused-` is mid-pause @@ -79,6 +86,8 @@ export function resolveCellRender({ } if (exec?.status === 'cancelled') return { kind: 'cancelled' } if (exec?.status === 'error') return { kind: 'error' } + // Enrichment ran to completion but matched nothing → "Not found". + if (isEnrichmentOutput && exec?.status === 'completed') return { kind: 'not-found' } return { kind: 'empty' } } @@ -273,6 +282,15 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle ) + case 'not-found': + return ( + + + Not found + + + ) + case 'empty': return null diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx index aed56ac8de4..e228edba84d 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx @@ -332,6 +332,12 @@ export const DataRow = React.memo(function DataRow({ ? (waitingByGroupId?.get(column.workflowGroupId) ?? undefined) : undefined } + isEnrichmentOutput={ + column.workflowGroupId + ? workflowGroups.find((g) => g.id === column.workflowGroupId)?.type === + 'enrichment' + : false + } /> diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx index 06a004843e2..13010ad3179 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx @@ -250,7 +250,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
@@ -287,7 +287,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({ > diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx index 23fa84f2227..3b38dc3bf41 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx @@ -23,6 +23,8 @@ import { } from '@/components/emcn/icons' import type { RunMode } from '@/lib/api/contracts/tables' import { cn } from '@/lib/core/utils/cn' +import type { WorkflowGroupType } from '@/lib/table' +import { getEnrichment } from '@/enrichments/registry' import type { WorkflowMetadata } from '@/stores/workflows/registry/types' import { SELECTION_TINT_BG } from '../constants' import type { DisplayColumn } from '../types' @@ -166,6 +168,13 @@ export function ColumnOptionsMenu({ interface WorkflowGroupMetaCellProps { workflowId: string groupId: string + /** When `'enrichment'`, the cell shows the enrichment's name + icon instead + * of a backing workflow's color chip + name. */ + groupType?: WorkflowGroupType + /** Registry id for enrichment groups (resolves name/icon fallback). */ + enrichmentId?: string + /** Persisted group name (the enrichment name at creation). */ + groupName?: string size: number startColIndex: number columnName: string @@ -205,6 +214,9 @@ interface WorkflowGroupMetaCellProps { export function WorkflowGroupMetaCell({ workflowId, groupId, + groupType, + enrichmentId, + groupName, size, startColIndex, columnName, @@ -226,9 +238,14 @@ export function WorkflowGroupMetaCell({ onDragLeave, readOnly, }: WorkflowGroupMetaCellProps) { + const isEnrichment = groupType === 'enrichment' + const enrichment = isEnrichment ? getEnrichment(enrichmentId) : undefined + const EnrichmentIcon = enrichment?.icon const wf = workflows?.find((w) => w.id === workflowId) const color = wf?.color ?? 'var(--text-muted)' - const name = wf?.name ?? 'Workflow' + const name = isEnrichment + ? (groupName ?? enrichment?.name ?? 'Enrichment') + : (wf?.name ?? 'Workflow') const [optionsMenuOpen, setOptionsMenuOpen] = useState(false) const [optionsMenuPosition, setOptionsMenuPosition] = useState({ x: 0, y: 0 }) @@ -369,14 +386,18 @@ export function WorkflowGroupMetaCell({ style={{ background: color }} />
- + {isEnrichment && EnrichmentIcon ? ( + + ) : ( + + )} {name} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx index 3b8dab0c1b8..fb15adeb2cf 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx @@ -11,7 +11,7 @@ import { TableX } from '@/components/emcn/icons' import type { RunMode } from '@/lib/api/contracts/tables' import { cn } from '@/lib/core/utils/cn' import { captureEvent } from '@/lib/posthog/client' -import type { ColumnDefinition, TableRow as TableRowType } from '@/lib/table' +import type { ColumnDefinition, TableRow as TableRowType, WorkflowGroup } from '@/lib/table' import { TABLE_LIMITS } from '@/lib/table/constants' import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider' import { @@ -139,6 +139,10 @@ interface TableGridProps { */ onOpenColumnConfig: (cfg: ColumnConfig) => void onOpenWorkflowConfig: (cfg: WorkflowConfig) => void + /** Open the enrichments list (Clay-style catalog) slideout. */ + onOpenEnrichments: () => void + /** Open the enrichments slideout in edit mode for an existing enrichment group. */ + onOpenEnrichmentConfig: (group: WorkflowGroup) => void onOpenExecutionDetails: (executionId: string) => void /** Open the row-edit modal for `row`. Wrapper renders the modal. */ onOpenRowModal: (row: TableRowType) => void @@ -243,6 +247,8 @@ export function TableGrid({ sidebarReservedPx, onOpenColumnConfig, onOpenWorkflowConfig, + onOpenEnrichments, + onOpenEnrichmentConfig, onOpenExecutionDetails, onOpenRowModal, onRequestDeleteRows, @@ -508,6 +514,11 @@ export function TableGrid({ return expandToDisplayColumns(ordered, tableWorkflowGroups) }, [columns, columnOrder, tableWorkflowGroups]) + const workflowGroupById = useMemo( + () => new Map(tableWorkflowGroups.map((g) => [g.id, g])), + [tableWorkflowGroups] + ) + const hasWorkflowColumns = columns.some((c) => !!c.workflowGroupId) const { colWidth: checkboxColWidth, numDivWidth } = checkboxColLayout( tableData?.maxRows ?? 0, @@ -755,11 +766,14 @@ export function TableGrid({ _exec?.status === 'pending' && typeof _exec?.jobId === 'string' && _exec.jobId.startsWith('paused-') + // Enrichment cells have no workflow execution trace to open. + const _isEnrichmentGroup = workflowGroupById.get(_gid)?.type === 'enrichment' contextMenuHasStartedRun = - _exec?.status === 'completed' || - _exec?.status === 'error' || - _exec?.status === 'running' || - _isPaused + !_isEnrichmentGroup && + (_exec?.status === 'completed' || + _exec?.status === 'error' || + _exec?.status === 'running' || + _isPaused) contextMenuExecutionId = _exec?.executionId ?? null } } @@ -2560,27 +2574,39 @@ export function TableGrid({ /** Open the workflow-config sidebar to spawn a brand-new workflow group. */ function handleAddWorkflowColumn() { - onOpenWorkflowConfig({ mode: 'create', proposedName: generateColumnName() }) + onOpenWorkflowConfig({ mode: 'create', kind: 'manual', proposedName: generateColumnName() }) } const handleConfigureColumn = useCallback( (columnName: string) => { const column = columnsRef.current.find((c) => c.name === columnName) - if (column?.workflowGroupId) { - // Workflow-output column header → single-output sub-mode. + const group = column?.workflowGroupId + ? workflowGroupById.get(column.workflowGroupId) + : undefined + // Enrichment output columns behave like plain columns (rename / type / + // unique) — route them to the normal column editor, not the workflow + // "Configure output column" panel. + if (column?.workflowGroupId && group?.type !== 'enrichment') { onOpenWorkflowConfig({ mode: 'edit-output', columnName }) } else { onOpenColumnConfig({ mode: 'edit', columnName }) } }, - [onOpenColumnConfig, onOpenWorkflowConfig] + [onOpenColumnConfig, onOpenWorkflowConfig, workflowGroupById] ) const handleConfigureWorkflowGroup = useCallback( (groupId: string) => { + const group = workflowGroupById.get(groupId) + // Enrichment groups have no workflow — route their config to the + // enrichments sidebar (edit mode) instead of the workflow sidebar. + if (group?.type === 'enrichment') { + onOpenEnrichmentConfig(group) + return + } onOpenWorkflowConfig({ mode: 'edit-group', groupId }) }, - [onOpenWorkflowConfig] + [onOpenEnrichmentConfig, onOpenWorkflowConfig, workflowGroupById] ) const handleDeleteWorkflowGroup = useCallback((groupId: string) => { @@ -2901,14 +2927,18 @@ export function TableGrid({ // running/completed/error. const isPaused = status === 'pending' && typeof exec?.jobId === 'string' && exec.jobId.startsWith('paused-') + // Enrichment groups have no workflow execution to open — never offer "View + // execution" for them. + const isEnrichmentGroup = workflowGroupById.get(groupId)?.type === 'enrichment' return { rowId: row.id, groupId, executionId: exec?.executionId ?? null, canViewExecution: - status === 'completed' || status === 'error' || status === 'running' || isPaused, + !isEnrichmentGroup && + (status === 'completed' || status === 'error' || status === 'running' || isPaused), } - }, [normalizedSelection, rows, displayColumns]) + }, [normalizedSelection, rows, displayColumns, workflowGroupById]) const tableWorkflowGroupIds = useMemo( () => tableWorkflowGroups.map((g) => g.id), @@ -3138,6 +3168,9 @@ export function TableGrid({ normalizedSelection.endCol >= g.startColIndex + g.size - 1 } groupId={g.groupId} + groupType={workflowGroupById.get(g.groupId)?.type} + enrichmentId={workflowGroupById.get(g.groupId)?.enrichmentId} + groupName={workflowGroupById.get(g.groupId)?.name} onSelectGroup={handleGroupSelect} onOpenConfig={() => handleConfigureWorkflowGroup(g.groupId)} onRunColumn={userPermissions.canEdit ? handleRunColumn : undefined} @@ -3154,7 +3187,11 @@ export function TableGrid({ onDeleteGroup={ userPermissions.canEdit ? handleDeleteWorkflowGroup : undefined } - onViewWorkflow={handleViewWorkflow} + onViewWorkflow={ + workflowGroupById.get(g.groupId)?.type === 'enrichment' + ? undefined + : handleViewWorkflow + } readOnly={!userPermissions.canEdit} onDragStart={ userPermissions.canEdit ? handleColumnDragStart : undefined @@ -3229,6 +3266,7 @@ export function TableGrid({ disabled={addColumnMutation.isPending} onPickType={handleAddColumnOfType} onPickWorkflow={handleAddWorkflowColumn} + onPickEnrichment={onOpenEnrichments} /> )} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/index.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/index.ts index 6d45862e281..b6ea2bc1a86 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/index.ts +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/index.ts @@ -1 +1,6 @@ -export { type WorkflowConfig, WorkflowSidebar } from './workflow-sidebar' +export { + type WorkflowConfig, + WorkflowSidebar, + WorkflowSidebarBody, + type WorkflowSidebarBodyProps, +} from './workflow-sidebar' diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/input-mapping-section.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/input-mapping-section.tsx new file mode 100644 index 00000000000..c667fc04c08 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/input-mapping-section.tsx @@ -0,0 +1,85 @@ +'use client' + +import { useState } from 'react' +import { Badge, CollapsibleCard, Combobox, Label } from '@/components/emcn' +import type { ColumnDefinition } from '@/lib/table' +import type { InputFormatField } from '@/lib/workflows/types' + +interface InputMappingSectionProps { + /** The workflow Start block's input fields. Each gets one collapsible row. */ + inputFields: InputFormatField[] + /** Columns the user can feed into an input (all table columns). */ + columnOptions: ColumnDefinition[] + /** Current mapping: input field name → table column name. */ + value: Record + onChange: (next: Record) => void +} + +/** + * "Workflow inputs" panel: maps each of the workflow's Start-block input fields + * to the table column whose per-row value feeds it. Each field renders as a + * collapsible card — header shows the field name + type badge, the body holds + * the column picker — mirroring the workflow editor's input-mapping rows. + */ +export function InputMappingSection({ + inputFields, + columnOptions, + value, + onChange, +}: InputMappingSectionProps) { + const namedFields = inputFields.filter((f): f is InputFormatField & { name: string } => + Boolean(f.name?.trim()) + ) + const columns = columnOptions.map((c) => ({ label: c.name, value: c.name })) + const [collapsed, setCollapsed] = useState>({}) + + const toggle = (name: string) => setCollapsed((prev) => ({ ...prev, [name]: !prev[name] })) + + return ( +
+ + {namedFields.length === 0 ? ( +

+ This workflow has no Start block inputs. +

+ ) : ( +
+ {namedFields.map((field) => ( + + {field.type} + + ) : undefined + } + collapsed={collapsed[field.name] ?? false} + onToggleCollapse={() => toggle(field.name)} + > + + onChange({ ...value, [field.name]: columnName })} + /> + + ))} +
+ )} +
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx index b339d3397ef..4785764171a 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx @@ -18,6 +18,7 @@ import { Tooltip, toast, } from '@/components/emcn' +import { ArrowLeft, ChevronDown } from '@/components/emcn/icons' import { findValidationIssue, isValidationError } from '@/lib/api/client/errors' import { requestJson } from '@/lib/api/client/request' import type { @@ -33,6 +34,7 @@ import type { ColumnDefinition, WorkflowGroup, WorkflowGroupDependencies, + WorkflowGroupInputMapping, WorkflowGroupOutput, } from '@/lib/table' import { columnTypeForLeaf, deriveOutputColumnName } from '@/lib/table/column-naming' @@ -54,11 +56,22 @@ import { } from '@/hooks/queries/tables' import { useWorkflowState, workflowKeys } from '@/hooks/queries/workflows' import type { WorkflowMetadata } from '@/stores/workflows/registry/types' +import { InputMappingSection } from './input-mapping-section' import { RunSettingsSection } from './run-settings-section' +/** + * Distinguishes a user-built workflow column (`manual`) from one spawned off a + * shared enrichment template (`enrichment`). Enrichment groups hide the + * launch-workflow and add-inputs affordances and surface a back button to the + * enrichments list. + */ +export type WorkflowSidebarKind = 'manual' | 'enrichment' + /** * Discriminates the three flows the workflow sidebar handles: - * - `create`: brand-new workflow group spawned from the "+ New column" dropdown's "Workflow" item. + * - `create`: brand-new workflow group. From the "+ New column" dropdown's "Workflow" item + * (`kind: 'manual'`) or from an enrichment card (`kind: 'enrichment'`, with the template's + * workflow pre-seeded). * - `edit-group`: opened from the workflow-group meta header. Lets the user edit the whole group * (workflow id, deps, output set, group name). * - `edit-output`: opened from a single workflow-output column header. Focuses on this column's @@ -66,7 +79,15 @@ import { RunSettingsSection } from './run-settings-section' * secondary. */ export type WorkflowConfig = - | { mode: 'create'; proposedName: string } + | { + mode: 'create' + kind: WorkflowSidebarKind + proposedName: string + /** Pre-selected (and locked) workflow id for enrichment-create. */ + workflowId?: string + /** Title shown for enrichment-create (the enrichment card's name). */ + enrichmentName?: string + } | { mode: 'edit-group'; groupId: string } | { mode: 'edit-output'; columnName: string } @@ -83,8 +104,18 @@ interface WorkflowSidebarProps { /** Notify parent of a per-output-column rename so it can rewrite local * `columnOrder` / `columnWidths` keys. */ onColumnRename?: (oldName: string, newName: string) => void + /** When set and the active config is an enrichment, renders a back button + * that returns to the enrichments list. */ + onBack?: () => void } +/** Dashed hairline flanking the "Show additional fields" disclosure — mirrors + * the workflow editor's advanced-mode divider. */ +const DASHED_DIVIDER_STYLE = { + backgroundImage: + 'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)', +} as const + const OUTPUT_VALUE_SEPARATOR = '::' const encodeOutputValue = (blockId: string, path: string) => @@ -197,7 +228,7 @@ export function WorkflowSidebar(props: WorkflowSidebarProps) { function configKey(config: WorkflowConfig): string { switch (config.mode) { case 'create': - return `create:${config.proposedName}` + return `create:${config.kind}:${config.workflowId ?? ''}:${config.proposedName}` case 'edit-group': return `edit-group:${config.groupId}` case 'edit-output': @@ -205,11 +236,17 @@ function configKey(config: WorkflowConfig): string { } } -interface WorkflowSidebarBodyProps extends Omit { +export interface WorkflowSidebarBodyProps extends Omit { config: WorkflowConfig } -function WorkflowSidebarBody({ +/** + * The sidebar's inner content (header + scrollable form + footer) without the + * sliding `