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/schedules/execute/route.ts b/apps/sim/app/api/schedules/execute/route.ts index 7891fcd01b1..33fb374bbd5 100644 --- a/apps/sim/app/api/schedules/execute/route.ts +++ b/apps/sim/app/api/schedules/execute/route.ts @@ -26,6 +26,14 @@ const JOB_CHUNK_SIZE = 100 const MAX_TICK_DURATION_MS = 3 * 60 * 1000 const STALE_SCHEDULE_CLAIM_MS = getMaxExecutionTimeout() +/** + * Upper bound (ms) for the random start delay applied to each scheduled + * execution. Cron schedules all fire on the same boundary (e.g. every `:00`), + * which stampedes the database connection pool at the top of each minute/hour. + * Spreading starts across a [0, 30s) window smooths that burst. + */ +const SCHEDULE_JITTER_MAX_MS = 30_000 + const dueFilter = (queuedAt: Date) => and( isNull(workflowSchedule.archivedAt), @@ -217,6 +225,7 @@ async function processScheduleItem( const jobId = await jobQueue.enqueue('schedule-execution', payload, { jobId: scheduleJobId, concurrencyKey: scheduleJobId, + delayMs: Math.floor(Math.random() * SCHEDULE_JITTER_MAX_MS), metadata: { workflowId: schedule.workflowId ?? undefined, workspaceId: resolvedWorkspaceId ?? undefined, diff --git a/apps/sim/app/api/table/[tableId]/columns/run/route.ts b/apps/sim/app/api/table/[tableId]/columns/run/route.ts index 2b96981d115..8c6225d72d9 100644 --- a/apps/sim/app/api/table/[tableId]/columns/run/route.ts +++ b/apps/sim/app/api/table/[tableId]/columns/run/route.ts @@ -25,7 +25,7 @@ export const POST = withRouteHandler(async (request: NextRequest, { params }: Ro const parsed = await parseRequest(runColumnContract, request, { params }) if (!parsed.success) return parsed.response const { tableId } = parsed.data.params - const { workspaceId, groupIds, runMode, rowIds } = parsed.data.body + const { workspaceId, groupIds, runMode, rowIds, limit } = parsed.data.body const access = await checkAccess(tableId, auth.userId, 'write') if (!access.ok) return accessError(access, requestId, tableId) @@ -35,6 +35,7 @@ export const POST = withRouteHandler(async (request: NextRequest, { params }: Ro groupIds, mode: runMode, rowIds, + limit, requestId, }) diff --git a/apps/sim/app/api/table/[tableId]/dispatches/route.ts b/apps/sim/app/api/table/[tableId]/dispatches/route.ts index 7682ba82994..25b6f871649 100644 --- a/apps/sim/app/api/table/[tableId]/dispatches/route.ts +++ b/apps/sim/app/api/table/[tableId]/dispatches/route.ts @@ -46,6 +46,7 @@ export const GET = withRouteHandler(async (request: NextRequest, { params }: Rou isManualRun: r.isManualRun, cursor: r.cursor, scope: r.scope, + ...(r.limit ? { limit: r.limit } : {}), })) return NextResponse.json({ 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/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx index cb5ea0731e6..c6c069d6389 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx @@ -42,6 +42,10 @@ interface ContextMenuProps { runningInSelectionCount?: number /** Whether the table has any workflow columns; gates the run-workflows item. */ hasWorkflowColumns?: boolean + /** True when the menu was opened on a workflow-output cell, so Run / Re-run + * act on that cell's group only (the cascade handles dependents). Switches + * the labels from row-wide ("all cells") to cell-scoped ("cell"). */ + workflowCellScoped?: boolean disableEdit?: boolean disableInsert?: boolean disableDelete?: boolean @@ -64,17 +68,26 @@ export function ContextMenu({ onStopWorkflows, runningInSelectionCount = 0, hasWorkflowColumns = false, + workflowCellScoped = false, disableEdit = false, disableInsert = false, disableDelete = false, }: ContextMenuProps) { const deleteLabel = selectedRowCount > 1 ? `Delete ${selectedRowCount} rows` : 'Delete row' - const runLabel = - selectedRowCount > 1 + const runLabel = workflowCellScoped + ? selectedRowCount > 1 + ? `Run cell on ${selectedRowCount} rows` + : 'Run cell' + : selectedRowCount > 1 ? `Run empty or failed cells on ${selectedRowCount} rows` : 'Run empty or failed cells' - const refreshLabel = - selectedRowCount > 1 ? `Re-run all cells on ${selectedRowCount} rows` : 'Re-run all cells' + const refreshLabel = workflowCellScoped + ? selectedRowCount > 1 + ? `Re-run cell on ${selectedRowCount} rows` + : 'Re-run cell' + : selectedRowCount > 1 + ? `Re-run all cells on ${selectedRowCount} rows` + : 'Re-run all cells' const stopLabel = runningInSelectionCount === 1 ? 'Stop running workflow' 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..211c3e0a55a 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 @@ -21,14 +21,21 @@ import { PlayOutline, Trash, } from '@/components/emcn/icons' -import type { RunMode } from '@/lib/api/contracts/tables' +import type { RunLimit, 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' const WORKFLOW_META_BG_ALPHA = 12 // 0–255 +/** Fixed row-cap presets for the "Run N empty rows" shortcuts. Shared by the + * group-header options menu and the inline quick-run dropdown so the two + * surfaces stay in sync. */ +const LIMITED_RUN_PRESETS = [10, 1000] as const + interface ColumnOptionsMenuProps { open: boolean onOpenChange: (open: boolean) => void @@ -51,6 +58,9 @@ interface ColumnOptionsMenuProps { * exposes group-level run actions above the column actions. */ onRunColumnAll?: () => void onRunColumnIncomplete?: () => void + /** Runs only the first `max` empty/unrun rows. Surfaces fixed "Run N rows" + * shortcuts so users can sample a large table without firing every row. */ + onRunColumnLimited?: (max: number) => void /** When set, surfaces a "Run N selected rows" item above Run all. */ onRunColumnSelected?: () => void selectedRowCount?: number @@ -79,6 +89,7 @@ export function ColumnOptionsMenu({ onDeleteGroup, onRunColumnAll, onRunColumnIncomplete, + onRunColumnLimited, onRunColumnSelected, selectedRowCount = 0, onViewWorkflow, @@ -127,6 +138,12 @@ export function ColumnOptionsMenu({ onRunColumnIncomplete?.()}> Run empty rows + {onRunColumnLimited && + LIMITED_RUN_PRESETS.map((max) => ( + onRunColumnLimited(max)}> + {`Run ${max.toLocaleString()} empty rows`} + + ))} @@ -166,6 +183,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 @@ -175,7 +199,7 @@ interface WorkflowGroupMetaCellProps { isGroupSelected: boolean onSelectGroup: (startColIndex: number, size: number) => void onOpenConfig: (columnName: string) => void - onRunColumn?: (groupId: string, mode?: RunMode, rowIds?: string[]) => void + onRunColumn?: (groupId: string, mode?: RunMode, rowIds?: string[], limit?: RunLimit) => void onInsertLeft?: (columnName: string) => void onInsertRight?: (columnName: string) => void onDeleteColumn?: (columnName: string) => void @@ -205,6 +229,9 @@ interface WorkflowGroupMetaCellProps { export function WorkflowGroupMetaCell({ workflowId, groupId, + groupType, + enrichmentId, + groupName, size, startColIndex, columnName, @@ -226,9 +253,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 }) @@ -251,6 +283,13 @@ export function WorkflowGroupMetaCell({ } }, [groupId, onRunColumn, selectedRowIds]) + const handleRunLimited = useCallback( + (max: number) => { + if (groupId) onRunColumn?.(groupId, 'incomplete', undefined, { type: 'rows', max }) + }, + [groupId, onRunColumn] + ) + const handleContextMenu = useCallback( (e: React.MouseEvent) => { if (!column) return @@ -369,14 +408,18 @@ export function WorkflowGroupMetaCell({ style={{ background: color }} />
- + {isEnrichment && EnrichmentIcon ? ( + + ) : ( + + )} {name} @@ -406,6 +449,11 @@ export function WorkflowGroupMetaCell({ )} Run all rows Run empty rows + {LIMITED_RUN_PRESETS.map((max) => ( + handleRunLimited(max)}> + {`Run ${max.toLocaleString()} empty rows`} + + ))} )} @@ -423,6 +471,7 @@ export function WorkflowGroupMetaCell({ onDeleteGroup={onDeleteGroup ? () => onDeleteGroup(groupId) : undefined} onRunColumnAll={onRunColumn ? handleRunAll : undefined} onRunColumnIncomplete={onRunColumn ? handleRunIncomplete : undefined} + onRunColumnLimited={onRunColumn ? handleRunLimited : undefined} onRunColumnSelected={onRunColumn && selectedCount > 0 ? handleRunSelected : undefined} selectedRowCount={selectedCount} onViewWorkflow={onViewWorkflow ? () => onViewWorkflow(workflowId) : undefined} 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..d75b63c9ebb 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 @@ -8,10 +8,10 @@ import { useParams } from 'next/navigation' import { usePostHog } from 'posthog-js/react' import { Skeleton, toast, useToast } from '@/components/emcn' import { TableX } from '@/components/emcn/icons' -import type { RunMode } from '@/lib/api/contracts/tables' +import type { RunLimit, 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 @@ -147,7 +151,7 @@ interface TableGridProps { /** Open the delete-columns confirmation modal for `names`. Wrapper renders the modal. */ onRequestDeleteColumns: (names: string[]) => void /** Fire run for a single column (meta-cell Run menu). */ - onRunColumn: (groupId: string, runMode: RunMode, rowIds?: string[]) => void + onRunColumn: (groupId: string, runMode: RunMode, rowIds?: string[], limit?: RunLimit) => void /** Fire every runnable column on a single row (per-row gutter Play). */ onRunRow: (rowId: string) => void /** Fan out a run across every workflow group on `rowIds`. Used by context menu. */ @@ -243,6 +247,8 @@ export function TableGrid({ sidebarReservedPx, onOpenColumnConfig, onOpenWorkflowConfig, + onOpenEnrichments, + onOpenEnrichmentConfig, onOpenExecutionDetails, onOpenRowModal, onRequestDeleteRows, @@ -417,8 +423,13 @@ export function TableGrid({ const deleteWorkflowGroupMutation = useDeleteWorkflowGroup({ workspaceId, tableId }) const updateWorkflowGroupMutation = useUpdateWorkflowGroup({ workspaceId, tableId }) - function handleRunColumn(groupId: string, runMode: RunMode = 'all', rowIds?: string[]) { - onRunColumn(groupId, runMode, rowIds) + function handleRunColumn( + groupId: string, + runMode: RunMode = 'all', + rowIds?: string[], + limit?: RunLimit + ) { + onRunColumn(groupId, runMode, rowIds, limit) } const handleViewWorkflow = useCallback( @@ -508,6 +519,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, @@ -740,12 +756,17 @@ export function TableGrid({ let contextMenuExecutionId: string | null = null let contextMenuIsWorkflowColumn = false let contextMenuHasStartedRun = false + // The workflow group of the right-clicked cell, when it's a workflow-output + // column. Scopes the run/re-run menu items to just that cell's group (the + // cascade re-runs dependents on its own) instead of every group on the row. + let contextMenuGroupId: string | null = null if (contextMenu.row && contextMenu.columnName) { const _col = columnsRef.current.find((c) => c.name === contextMenu.columnName) const _gid = _col?.workflowGroupId if (_col && _gid) { const _exec = contextMenu.row.executions?.[_gid] contextMenuIsWorkflowColumn = true + contextMenuGroupId = _gid // Cells with a server-side execution log: `completed` / `error` / // `running`, plus HITL-paused runs (status `pending` with a `paused-` // jobId — has a real executionId + viewable trace). `queued` / plain @@ -755,11 +776,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 +2584,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) => { @@ -2820,13 +2856,18 @@ export function TableGrid({ // Context-menu wrappers: act on `contextMenuRowIds`, then close the menu. // Mirror the action bar's Play / Refresh split: Play fills empty/failed, - // Refresh re-runs everything (including completed cells). + // Refresh re-runs everything (including completed cells). When the menu was + // opened on a workflow-output cell, scope to just that cell's group — the + // server cascade re-runs dependent groups whose deps it fills. Right-clicking + // a plain cell has no group, so fall back to every group on the row(s). const handleRunWorkflowsOnSelection = () => { - onRunRows(contextMenuRowIds, 'incomplete') + if (contextMenuGroupId) onRunColumn(contextMenuGroupId, 'incomplete', contextMenuRowIds) + else onRunRows(contextMenuRowIds, 'incomplete') closeContextMenu() } const handleRefreshWorkflowsOnSelection = () => { - onRunRows(contextMenuRowIds, 'all') + if (contextMenuGroupId) onRunColumn(contextMenuGroupId, 'all', contextMenuRowIds) + else onRunRows(contextMenuRowIds, 'all') closeContextMenu() } const handleStopWorkflowsOnSelection = () => { @@ -2901,14 +2942,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), @@ -2916,10 +2961,17 @@ export function TableGrid({ ) // Drives Run vs Refresh visibility on the context menu — same classifier - // the action bar uses, so both surfaces stay in sync. + // the action bar uses, so both surfaces stay in sync. Scoped to the clicked + // cell's group when the menu opened on a workflow-output cell so visibility + // tracks that group's state, not the whole row's. const contextMenuStats = useMemo( - () => classifyExecStatusMix(rows, new Set(contextMenuRowIds), tableWorkflowGroupIds), - [contextMenuRowIds, rows, tableWorkflowGroupIds] + () => + classifyExecStatusMix( + rows, + new Set(contextMenuRowIds), + contextMenuGroupId ? [contextMenuGroupId] : tableWorkflowGroupIds + ), + [contextMenuRowIds, rows, tableWorkflowGroupIds, contextMenuGroupId] ) // Run scope is derived from one of two selection sources: @@ -3138,6 +3190,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 +3209,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 +3288,7 @@ export function TableGrid({ disabled={addColumnMutation.isPending} onPickType={handleAddColumnOfType} onPickWorkflow={handleAddWorkflowColumn} + onPickEnrichment={onOpenEnrichments} /> )} @@ -3373,6 +3433,7 @@ export function TableGrid({ } runningInSelectionCount={runningInContextSelection} hasWorkflowColumns={hasWorkflowColumns} + workflowCellScoped={Boolean(contextMenuGroupId)} disableEdit={!userPermissions.canEdit} disableInsert={!userPermissions.canEdit} disableDelete={!userPermissions.canEdit} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils.ts index 50f7aae85af..d66182b70f4 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils.ts +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils.ts @@ -189,6 +189,12 @@ export function resolveCellExec( if (areOutputsFilled(group, row)) return undefined if (!areGroupDepsSatisfied(group, row)) return undefined for (const d of activeDispatches) { + // Capped dispatches run only the first N eligible rows ahead of the + // cursor, and this per-row resolver can't tell which rows fall within the + // budget — rendering every ahead-of-cursor row as Queued would massively + // over-count. The dispatcher's real per-row pending stamps (arriving via + // cell SSE) cover the actual rows instead. + if (d.limit) continue if (!d.scope.groupIds.includes(group.id)) continue if (d.scope.rowIds && !d.scope.rowIds.includes(row.id)) continue if (row.position <= d.cursor) continue 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 `