@handled-ai/design-system 0.18.50 → 0.18.52

package/dist/prototype/prototype-insights-view.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { h as InsightsViewConfig } from '../signal-priority-popover-Cl98xw1n.js';
+import { h as InsightsViewConfig } from '../signal-priority-popover-QJngMAj7.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';
 import '../components/quick-action-modal.js';

package/dist/prototype/prototype-shell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { j as PrototypeConfig } from '../signal-priority-popover-Cl98xw1n.js';
+import { j as PrototypeConfig } from '../signal-priority-popover-QJngMAj7.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';
 import '../components/quick-action-modal.js';

package/dist/{signal-priority-popover-Cl98xw1n.d.ts → signal-priority-popover-QJngMAj7.d.ts}

@@ -10,7 +10,7 @@ import { DataRow } from './components/data-table.js';
 import { MetricCardProps } from './components/metric-card.js';
 import { PipelineStage, PipelineStageMetrics, PipelineStageTiming } from './charts/pipeline-overview.js';
 import { TimelineEvent } from './components/timeline-activity.js';
-import { ApprovalState } from './components/signal-feedback-inline.js';
+import { OpportunityDraft, ApprovalState } from './components/signal-feedback-inline.js';
 import { LucideIcon } from 'lucide-react';
 
 interface TimelineSystemEventsConfig {
@@ -93,8 +93,6 @@ interface SignalScoreData {
     confidence: number;
     urgencyLabel?: SignalScoreUrgencyLabel;
     urgencyExplanation?: string;
-    /** Controls whether the priority popover header shows the raw overall score number. @default "number" */
-    priorityScoreDisplay?: SignalPriorityScoreDisplay;
     explanationBuckets?: SignalScoreExplanationBucket[];
     onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void;
     /** @deprecated The compact score UX no longer renders score-level thumbs by default. */
@@ -183,7 +181,7 @@ interface InboxViewConfig {
     }>;
     hideAccountsButton?: boolean;
     accountDetailsLabel?: string;
-    onSignalApprove?: (item: QueueItem) => void | Promise<boolean>;
+    onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => void | Promise<boolean>;
     getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined;
     signalLabels?: {
         approveButton?: string;
@@ -414,11 +412,8 @@ interface PriorityFactor {
     /** Evidence text (e.g. "$3.4M moved in 8h - current treasury balance $0.00"). */
     rationale: string;
 }
-type SignalPriorityScoreDisplay = "label" | "number";
 interface SignalPriorityPopoverProps {
     score: number;
-    /** Controls whether the overall score number is shown in the popover header. @default "number" */
-    scoreDisplay?: SignalPriorityScoreDisplay;
     urgencyLabel?: SignalScoreUrgencyLabel;
     /** Synthesis sentence displayed in the popover head. */
     urgencyExplanation?: string;
@@ -440,6 +435,6 @@ interface SignalPriorityPopoverProps {
     /** Persisted priority-level feedback for the footer. */
     initialPriorityFeedback?: PersistedFeedbackData | null;
 }
-declare function SignalPriorityPopover({ score, urgencyLabel: providedLabel, urgencyExplanation, factors, metaText, feedbackChips, onFeedbackSubmit, className, initialFactorFeedback, onFactorFeedback, initialPriorityFeedback, scoreDisplay, }: SignalPriorityPopoverProps): React.JSX.Element;
+declare function SignalPriorityPopover({ score, urgencyLabel: providedLabel, urgencyExplanation, factors, metaText, feedbackChips, onFeedbackSubmit, className, initialFactorFeedback, onFactorFeedback, initialPriorityFeedback, }: SignalPriorityPopoverProps): React.JSX.Element;
 
-export { type AccountFilterTab as A, type BriefStyleVariant as B, type EntityPanelConfig as E, type InboxDetailSections as I, type PriorityFactor as P, type QueueItem as Q, SignalPriorityPopover as S, type TimelineSystemEventsConfig as T, type WorkQueueViewConfig as W, type AccountsViewConfig as a, type AdminTab as b, type AdminViewConfig as c, type EntityPanelSection as d, type InboxSortOption as e, type InboxViewConfig as f, type InsightsCustomTab as g, type InsightsViewConfig as h, type PrototypeBrandConfig as i, type PrototypeConfig as j, type SignalPriorityPopoverProps as k, type SignalScoreData as l, type SignalScoreExplanationBucket as m, type SignalScoreExplanationSignal as n, type SignalScoreUrgencyLabel as o, type SignalPriorityScoreDisplay as p };
+export { type AccountFilterTab as A, type BriefStyleVariant as B, type EntityPanelConfig as E, type InboxDetailSections as I, type PriorityFactor as P, type QueueItem as Q, SignalPriorityPopover as S, type TimelineSystemEventsConfig as T, type WorkQueueViewConfig as W, type AccountsViewConfig as a, type AdminTab as b, type AdminViewConfig as c, type EntityPanelSection as d, type InboxSortOption as e, type InboxViewConfig as f, type InsightsCustomTab as g, type InsightsViewConfig as h, type PrototypeBrandConfig as i, type PrototypeConfig as j, type SignalPriorityPopoverProps as k, type SignalScoreData as l, type SignalScoreExplanationBucket as m, type SignalScoreExplanationSignal as n, type SignalScoreUrgencyLabel as o };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.18.50",
+  "version": "0.18.52",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/case-panel-why.test.tsx

@@ -149,4 +149,130 @@ describe("CasePanelSignalApprovalActions", () => {
     expect(screen.getByText(/this will approve this action for/i)).toBeInTheDocument()
     expect(screen.getByRole("button", { name: /confirm/i }).className).toContain("h-7")
   })
+
+  it("lets callers collect edited opportunity preview fields before approval", async () => {
+    const onApprove = vi.fn()
+
+    renderApprovalActions({
+      initialApprovalState: "confirming",
+      onApprove,
+      opportunityPreview: {
+        name: "Churn Risk - Northwind Systems",
+        accountName: "Northwind Systems",
+        stage: "Prospecting",
+        closeDate: "Jun 30, 2026",
+        closeDateValue: "2026-06-30",
+        amount: "$75,000",
+        amountValue: 75000,
+        description: "Initial description",
+        churnType: "Churn Risk",
+        churnTypeOptions: ["Churn Risk", { value: "Win Back", label: "Win-back" }],
+      },
+    })
+
+    fireEvent.change(screen.getByLabelText("Close Date"), { target: { value: "2026-07-15" } })
+    expect(screen.getByLabelText("Amount")).toHaveValue("$75,000")
+    fireEvent.change(screen.getByLabelText("Amount"), { target: { value: "90000" } })
+    fireEvent.change(screen.getByLabelText("Churn Type"), { target: { value: "Win Back" } })
+    fireEvent.change(screen.getByLabelText("Description"), { target: { value: "Updated before create" } })
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+
+    expect(onApprove).toHaveBeenCalledWith({
+      closeDate: "2026-07-15",
+      amount: "90000",
+      churnType: "Win Back",
+      description: "Updated before create",
+    })
+  })
+
+  it("keeps legacy display-only opportunity previews confirmable", () => {
+    const onApprove = vi.fn()
+
+    renderApprovalActions({
+      initialApprovalState: "confirming",
+      onApprove,
+      opportunityPreview: {
+        name: "Churn Risk - Northwind Systems",
+        accountName: "Northwind Systems",
+        stage: "Prospecting",
+        closeDate: "Jun 30, 2026",
+        amount: "$75,000",
+      },
+    })
+
+    expect(screen.getByText(/this will approve this action for/i)).toBeInTheDocument()
+    expect(screen.queryByLabelText("Close Date")).not.toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /confirm/i })).not.toBeDisabled()
+
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+    expect(onApprove).toHaveBeenCalledWith(undefined)
+  })
+
+  it("transitions to editable preview fields after async request approval in StrictMode", async () => {
+    function ApprovalPreviewHarness() {
+      const [opportunityPreview, setOpportunityPreview] = React.useState<React.ComponentProps<typeof SignalApproval.Root>["opportunityPreview"]>()
+
+      return (
+        <SignalApproval.Root
+          companyName="Northwind Systems"
+          labels={{ approveButton: "Create in Salesforce", dismissButton: "Not Helpful" }}
+          opportunityPreview={opportunityPreview}
+          onRequestApproval={async () => {
+            setOpportunityPreview({
+              name: "Churn Risk - Northwind Systems",
+              accountName: "Northwind Systems",
+              stage: "Prospecting",
+              closeDate: "Jun 30, 2026",
+              closeDateValue: "2026-06-30",
+              amount: "$75,000",
+              amountValue: 75000,
+              description: "Initial description",
+              churnType: "Churn Risk",
+              churnTypeOptions: ["Churn Risk", "Win Back"],
+            })
+          }}
+        >
+          <CasePanelSignalApprovalActions />
+        </SignalApproval.Root>
+      )
+    }
+
+    render(
+      <React.StrictMode>
+        <ApprovalPreviewHarness />
+      </React.StrictMode>,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /create in salesforce/i }))
+
+    expect(await screen.findByLabelText("Close Date")).toHaveValue("2026-06-30")
+    expect(screen.getByLabelText("Amount")).toHaveValue("$75,000")
+    expect(screen.getByLabelText("Churn Type")).toHaveValue("Churn Risk")
+    expect(screen.getByLabelText("Description")).toHaveValue("Initial description")
+    expect(screen.getByRole("button", { name: /confirm/i })).not.toBeDisabled()
+  })
+
+  it("blocks confirmation until the close date is valid", () => {
+    const onApprove = vi.fn()
+
+    renderApprovalActions({
+      initialApprovalState: "confirming",
+      onApprove,
+      opportunityPreview: {
+        name: "Churn Risk - Northwind Systems",
+        accountName: "Northwind Systems",
+        stage: "Prospecting",
+        closeDate: "Jun 30, 2026",
+        closeDateValue: "2026-06-30",
+        amount: "$75,000",
+      },
+    })
+
+    fireEvent.change(screen.getByLabelText("Close Date"), { target: { value: "" } })
+    expect(screen.getByRole("button", { name: /confirm/i })).toBeDisabled()
+    expect(screen.getByText("Enter a valid close date.")).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+    expect(onApprove).not.toHaveBeenCalled()
+  })
 })

package/src/components/__tests__/data-table-filter.test.tsx

@@ -264,6 +264,136 @@ describe("DataTableFilter", () => {
     expect(openItem!.querySelector("span.rounded-full")).toBeNull();
   });
 
+
+  it("renders a text category as a submenu with a text input", () => {
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+      valuePlaceholder: "Enter callsign",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const subTrigger = document.querySelector('[data-slot="dropdown-menu-sub-trigger"]');
+    expect(subTrigger).not.toBeNull();
+    expect(subTrigger!.textContent).toContain("Callsign");
+    expect(screen.getByLabelText("Callsign")).toBeDefined();
+    expect(screen.getByPlaceholderText("Enter callsign")).toBeDefined();
+    expect(screen.getByRole("button", { name: "Apply" })).toBeDefined();
+    expect(screen.queryByText("No matches")).toBeNull();
+  });
+
+  it("applies a trimmed text filter value", () => {
+    const onTextFilterChange = vi.fn();
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+      valuePlaceholder: "Enter callsign",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        textFilters={{}}
+        onTextFilterChange={onTextFilterChange}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText("Callsign"), {
+      target: { value: "  M42  " },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(onTextFilterChange).toHaveBeenCalledWith("callsign", "M42");
+  });
+
+  it("clears an active text filter value", () => {
+    const onTextFilterChange = vi.fn();
+    const textCategory: DataTableFilterCategory = {
+      id: "organizationId",
+      label: "Organization ID",
+      icon: ListFilter,
+      type: "text",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        textFilters={{ organizationId: "ORG-123" }}
+        onTextFilterChange={onTextFilterChange}
+      />
+    );
+
+    expect(screen.getByLabelText("Organization ID")).toHaveProperty("value", "ORG-123");
+    fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+
+    expect(onTextFilterChange).toHaveBeenCalledWith("organizationId", "");
+  });
+
+  it("includes active text filters in the filter count", () => {
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+    };
+    const optionCategory: DataTableFilterCategory = {
+      id: "status",
+      label: "Status",
+      icon: ListFilter,
+      options: ["Open", "Closed"],
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory, optionCategory]}
+        selectedFilters={{ status: ["Open"] }}
+        onToggleFilter={() => {}}
+        textFilters={{ callsign: "  M42  " }}
+      />
+    );
+
+    const badge = screen.getByText("2");
+    expect(badge.tagName).toBe("SPAN");
+    expect(badge.className).toContain("bg-muted");
+  });
+
+  it("does not count blank text filter values as active", () => {
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        textFilters={{ callsign: "   " }}
+      />
+    );
+
+    const triggerButton = document.querySelector('[data-slot="dropdown-menu-trigger"]');
+    expect(triggerButton).not.toBeNull();
+    expect(triggerButton!.querySelector("span.bg-muted")).toBeNull();
+  });
+
   it("does not expose the condition builder entry point without condition fields", () => {
     render(<DataTableFilter {...defaultProps} />);
 

package/src/components/__tests__/signal-priority-popover.test.tsx

@@ -119,8 +119,8 @@ describe("SignalPriorityPopover", () => {
 
     // Check head section
     expect(content.textContent).toContain("Why this is high priority")
-    expect(screen.getByTestId("priority-overall-score").textContent).toContain("79")
-    expect(screen.getByTestId("priority-overall-score").textContent).toContain("/100")
+    expect(content.textContent).toContain("79")
+    expect(content.textContent).toContain("/100")
     expect(content.textContent).toContain("High range")
     expect(content.textContent).toContain("60-79")
   })
@@ -188,36 +188,13 @@ describe("SignalPriorityPopover", () => {
     expect(row.textContent).not.toContain("Raises0/100")
   })
 
-  it("renders Contributing factors section label and calibrated priority copy", () => {
+  it("renders Contributing factors section label", () => {
     render(<SignalPriorityPopover {...defaultProps} />)
     fireEvent.click(screen.getByTestId("priority-popover-trigger"))
 
     const content = screen.getByTestId("priority-popover-content")
     expect(content.textContent).toContain("Contributing factors")
-    expect(content.textContent).toContain("Priority = weighted signals + calibration")
-    expect(content.textContent).not.toContain("Score = weighted sum")
-  })
-
-
-  it("renders the overall score number by default while preserving factor row scores", () => {
-    render(<SignalPriorityPopover {...defaultProps} />)
-    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
-
-    expect(screen.getByTestId("priority-overall-score").textContent).toBe("79/100")
-    expect(screen.getByTestId("factor-row-test_severity").textContent).toContain("85/100")
-    expect(screen.getByTestId("factor-row-account_depth").textContent).toContain("30/100")
-  })
-
-  it("hides only the overall header score in label display mode", () => {
-    render(<SignalPriorityPopover {...defaultProps} scoreDisplay="label" />)
-    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
-
-    const header = screen.getByTestId("priority-popover-header")
-    expect(screen.queryByTestId("priority-overall-score")).toBeNull()
-    expect(header.textContent).toContain("Why this is high priority")
-    expect(header.textContent).not.toContain("79/100")
-    expect(screen.getByTestId("factor-row-test_severity").textContent).toContain("85/100")
-    expect(screen.getByTestId("factor-row-account_depth").textContent).toContain("30/100")
+    expect(content.textContent).toContain("Score = weighted sum")
   })
 
   it("renders score track bars with correct width percentage", () => {

package/src/components/data-table-filter.tsx

@@ -28,13 +28,10 @@ export interface FilterOption {
   value: string
 }
 
-export interface DataTableFilterCategory {
+interface DataTableFilterCategoryBase {
   id: string
   label: string
   icon: React.ComponentType<{ className?: string }>
-  options: (string | FilterOption)[]
-  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
-  type?: "multi" | "single" | "boolean"
   /**
    * Submenu search behavior. Defaults to the DataTableFilter
    * optionSearchThreshold prop. Use true to always show search or false to
@@ -43,6 +40,25 @@ export interface DataTableFilterCategory {
   searchable?: boolean | { threshold?: number }
 }
 
+export interface DataTableOptionFilterCategory extends DataTableFilterCategoryBase {
+  options: (string | FilterOption)[]
+  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
+  type?: "multi" | "single" | "boolean"
+}
+
+export interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {
+  /** Free-text filter behavior. Renders a top-level submenu with a text input. */
+  type: "text"
+  /** Placeholder shown in the text filter input. */
+  valuePlaceholder?: string
+  /** Not used for text filters; optional for backwards-compatible category shapes. */
+  options?: (string | FilterOption)[]
+}
+
+export type DataTableFilterCategory =
+  | DataTableOptionFilterCategory
+  | DataTableTextFilterCategory
+
 function getOptionValue(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.value
 }
@@ -50,6 +66,111 @@ function getOptionLabel(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.label
 }
 
+function isTextFilterCategory(
+  category: DataTableFilterCategory
+): category is DataTableTextFilterCategory {
+  return category.type === "text"
+}
+
+function TextFilterSubmenu({
+  category,
+  value,
+  onValueChange,
+}: {
+  category: DataTableTextFilterCategory
+  value: string
+  onValueChange?: (categoryId: string, value: string) => void
+}) {
+  const [draftValue, setDraftValue] = React.useState(value)
+
+  React.useEffect(() => {
+    setDraftValue(value)
+  }, [value])
+
+  const active = value.trim().length > 0
+  const applyValue = React.useCallback(() => {
+    onValueChange?.(category.id, draftValue.trim())
+  }, [category.id, draftValue, onValueChange])
+
+  return (
+    <DropdownMenuSub
+      onOpenChange={(open) => {
+        if (!open) {
+          setDraftValue(value)
+        }
+      }}
+    >
+      <DropdownMenuSubTrigger
+        className={cn(
+          "cursor-pointer py-1.5 text-xs",
+          active && "text-brand-purple"
+        )}
+      >
+        <category.icon
+          className={cn(
+            "mr-2 h-3.5 w-3.5 text-muted-foreground",
+            active && "text-brand-purple"
+          )}
+        />
+        {category.label}
+        {active ? <Check className="ml-auto h-4 w-4" /> : null}
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className="w-64 p-2">
+        <div className="space-y-2">
+          <input
+            aria-label={category.label}
+            className="h-8 w-full rounded-md bg-muted/50 px-2 py-1 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted"
+            placeholder={
+              category.valuePlaceholder ??
+              `Enter ${category.label.toLowerCase()}...`
+            }
+            value={draftValue}
+            onChange={(event) => setDraftValue(event.target.value)}
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => {
+              event.stopPropagation()
+              if (event.key === "Enter") {
+                event.preventDefault()
+                applyValue()
+              }
+            }}
+          />
+          <div className="flex items-center justify-end gap-2">
+            {active ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs"
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setDraftValue("")
+                  onValueChange?.(category.id, "")
+                }}
+              >
+                Clear
+              </Button>
+            ) : null}
+            <Button
+              type="button"
+              size="sm"
+              className="h-7 px-2 text-xs"
+              onClick={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                applyValue()
+              }}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  )
+}
+
 export interface DataTableFilterProps {
   categories: DataTableFilterCategory[]
   selectedFilters: Record<string, string[]>
@@ -71,6 +192,10 @@ export interface DataTableFilterProps {
   onConditionFiltersChange?: (conditions: ConditionFilterValue[]) => void
   /** Dropdown entry label for the condition-builder panel. Default: "Add filter". */
   conditionBuilderLabel?: string
+  /** Active free-text filters keyed by category id. */
+  textFilters?: Record<string, string>
+  /** Callback when a free-text filter value is applied or cleared. */
+  onTextFilterChange?: (categoryId: string, value: string) => void
 }
 
 export function DataTableFilter({
@@ -86,6 +211,8 @@ export function DataTableFilter({
   conditionFilters = [],
   onConditionFiltersChange,
   conditionBuilderLabel = "Add filter",
+  textFilters = {},
+  onTextFilterChange,
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
@@ -103,6 +230,10 @@ export function DataTableFilter({
         return true
       }
 
+      if (isTextFilterCategory(category)) {
+        return false
+      }
+
       return category.options.some((option) =>
         getOptionLabel(option).toLowerCase().includes(normalized)
       )
@@ -123,8 +254,16 @@ export function DataTableFilter({
       0
     )
 
-    return userCount + conditionFilters.length
-  }, [selectedFilters, conditionFilters.length])
+    const textCount = categories.reduce((count, category) => {
+      if (!isTextFilterCategory(category)) {
+        return count
+      }
+
+      return textFilters[category.id]?.trim() ? count + 1 : count
+    }, 0)
+
+    return userCount + conditionFilters.length + textCount
+  }, [categories, selectedFilters, conditionFilters.length, textFilters])
 
   /** Collect all preset chips to render */
   const presetChips = React.useMemo(() => {
@@ -135,9 +274,9 @@ export function DataTableFilter({
     for (const [categoryId, values] of Object.entries(presetFilters)) {
       const category = categories.find((c) => c.id === categoryId)
       for (const value of values) {
-        const option = category?.options.find(
-          (opt) => getOptionValue(opt) === value
-        )
+        const option = category && !isTextFilterCategory(category)
+          ? category.options.find((opt) => getOptionValue(opt) === value)
+          : undefined
         const label = option ? getOptionLabel(option) : value
         const active = selectedFilters[categoryId]?.includes(value) ?? false
         chips.push({ categoryId, value, label, active })
@@ -208,6 +347,18 @@ export function DataTableFilter({
               )
             }
 
+            /* ── Free-text submenu ───────────────────────────────── */
+            if (isTextFilterCategory(category)) {
+              return (
+                <TextFilterSubmenu
+                  key={category.id}
+                  category={category}
+                  value={textFilters[category.id] ?? ""}
+                  onValueChange={onTextFilterChange}
+                />
+              )
+            }
+
             /* ── Sub-menu (single / multi) ──────────────────────── */
             const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
             const filteredOptions = subQuery