stagent 0.9.6 → 0.11.0

package/src/components/shared/filter-input.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Hash } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { parseFilterInput, type FilterClause } from "@/lib/filters/parse";
+import { FilterHint } from "./filter-hint";
+
+interface FilterInputProps {
+  value: string;
+  onChange: (next: { raw: string; clauses: FilterClause[]; rawQuery: string }) => void;
+  placeholder?: string;
+}
+
+/**
+ * FilterInput — free-text input that recognizes `#key:value` filter syntax.
+ *
+ * Renders parsed clauses as outline badges next to the input. Consumer
+ * receives the raw string (for URL serialization) and the parsed breakdown
+ * (for list filtering). Keeps the existing free-text search behavior — the
+ * `rawQuery` is the text with filter clauses stripped.
+ */
+export function FilterInput({ value, onChange, placeholder }: FilterInputProps) {
+  const [local, setLocal] = useState(value);
+
+  useEffect(() => {
+    setLocal(value);
+  }, [value]);
+
+  const parsed = parseFilterInput(local);
+
+  return (
+    <div className="flex flex-col gap-1 flex-1 min-w-0">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative flex-1 min-w-[16rem]">
+          <Hash className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+          <Input
+            value={local}
+            onChange={(e) => {
+              const next = e.target.value;
+              setLocal(next);
+              const p = parseFilterInput(next);
+              onChange({ raw: next, clauses: p.clauses, rawQuery: p.rawQuery });
+            }}
+            placeholder={placeholder ?? "#status:blocked or search…"}
+            className="pl-7 h-8"
+          />
+        </div>
+        {parsed.clauses.map((c, i) => (
+          <Badge key={`${c.key}-${i}`} variant="outline" className="text-xs font-mono">
+            #{c.key}:{c.value}
+          </Badge>
+        ))}
+      </div>
+      <FilterHint inputValue={local} storageKey="stagent.filter-hint.dismissed" />
+    </div>
+  );
+}

package/src/components/shared/saved-searches-manager.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import { Pencil, Trash2, Check, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { SavedSearch } from "@/hooks/use-saved-searches";
+
+const LABEL_MAX = 120;
+
+interface SavedSearchesManagerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  searches: SavedSearch[];
+  onRename: (id: string, label: string) => void;
+  onRemove: (id: string) => void;
+}
+
+/**
+ * SavedSearchesManager — dialog for renaming or deleting saved searches.
+ *
+ * Distinct from the inline palette delete (which is one-click with a 5s
+ * undo toast). This dialog is a deliberate management context, so delete
+ * requires an explicit "Confirm" click (no undo).
+ */
+export function SavedSearchesManager({
+  open,
+  onOpenChange,
+  searches,
+  onRename,
+  onRemove,
+}: SavedSearchesManagerProps) {
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [draft, setDraft] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+
+  function startRename(s: SavedSearch) {
+    setRenamingId(s.id);
+    setDraft(s.label);
+    setError(null);
+  }
+
+  function cancelRename() {
+    setRenamingId(null);
+    setDraft("");
+    setError(null);
+  }
+
+  function commitRename(s: SavedSearch) {
+    // If renaming was already cancelled (e.g., via Escape) the renamingId
+    // no longer matches — blur fires after cancelRename() has set it to null.
+    if (renamingId !== s.id) return;
+
+    const next = draft.trim();
+    if (next.length === 0) {
+      setError("Label cannot be empty");
+      return;
+    }
+    if (next.length > LABEL_MAX) {
+      setError(`Label too long (max ${LABEL_MAX} chars)`);
+      return;
+    }
+    const dupe = searches.find(
+      (other) =>
+        other.id !== s.id &&
+        other.surface === s.surface &&
+        other.label.toLowerCase() === next.toLowerCase()
+    );
+    if (dupe) {
+      setError("A saved search with that label already exists for this surface");
+      return;
+    }
+    if (next !== s.label) onRename(s.id, next);
+    cancelRename();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Manage saved searches</DialogTitle>
+          <DialogDescription>Rename or delete your saved filter combinations.</DialogDescription>
+        </DialogHeader>
+        <div className="px-6 pb-6 space-y-2 overflow-y-auto max-h-[60vh]">
+          {searches.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No saved searches yet.</p>
+          ) : (
+            searches.map((s) => {
+              const isRenaming = renamingId === s.id;
+              const isPendingDelete = pendingDeleteId === s.id;
+              return (
+                <div
+                  key={s.id}
+                  className="flex items-center gap-2 rounded-md border border-border/60 px-3 py-2"
+                >
+                  <div className="flex-1 min-w-0">
+                    {isRenaming ? (
+                      <div className="space-y-1">
+                        <Input
+                          aria-label="Rename"
+                          autoFocus
+                          value={draft}
+                          onChange={(e) => {
+                            setDraft(e.target.value);
+                            setError(null);
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === "Escape") {
+                              e.preventDefault();
+                              cancelRename();
+                            } else if (e.key === "Enter") {
+                              e.preventDefault();
+                              commitRename(s);
+                            }
+                          }}
+                          onBlur={() => commitRename(s)}
+                          className="h-7"
+                        />
+                        {error && (
+                          <p className="text-xs text-destructive">{error}</p>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <span className="truncate text-sm font-medium">{s.label}</span>
+                        <Badge variant="outline" className="text-[10px] uppercase">
+                          {s.surface}
+                        </Badge>
+                      </div>
+                    )}
+                    <p className="truncate text-xs font-mono text-muted-foreground">
+                      {s.filterInput}
+                    </p>
+                  </div>
+                  {!isRenaming && !isPendingDelete && (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        aria-label={`Rename ${s.label}`}
+                        onClick={() => startRename(s)}
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive"
+                        aria-label={`Delete ${s.label}`}
+                        onClick={() => setPendingDeleteId(s.id)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </>
+                  )}
+                  {isPendingDelete && (
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        className="h-7"
+                        aria-label={`Confirm delete ${s.label}`}
+                        onClick={() => {
+                          onRemove(s.id);
+                          setPendingDeleteId(null);
+                        }}
+                      >
+                        <Check className="h-3.5 w-3.5" /> Confirm delete
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7"
+                        aria-label="Cancel delete"
+                        onClick={() => setPendingDeleteId(null)}
+                      >
+                        <X className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/shared/theme-toggle.tsx

@@ -3,40 +3,21 @@
 import { useEffect, useState } from "react";
 import { Moon, Sun } from "lucide-react";
 import { Button } from "@/components/ui/button";
-
-type ResolvedTheme = "light" | "dark";
-
-function resolveThemePreference(): ResolvedTheme {
-  const stored = localStorage.getItem("stagent-theme");
-  if (stored === "dark" || stored === "light") return stored;
-  // Light-first: default to light when no explicit preference stored
-  return "light";
-}
-
-function applyTheme(theme: ResolvedTheme) {
-  const root = document.documentElement;
-  root.classList.toggle("dark", theme === "dark");
-  root.dataset.theme = theme;
-  root.style.colorScheme = theme;
-  root.style.backgroundColor =
-    theme === "dark" ? "oklch(0.14 0.02 250)" : "oklch(0.985 0.004 250)";
-  localStorage.setItem("stagent-theme", theme);
-  document.cookie = `stagent-theme=${theme};path=/;max-age=31536000;SameSite=Lax`;
-}
+import { applyTheme, readClientTheme } from "@/lib/theme";
 
 export function ThemeToggle() {
   const [dark, setDark] = useState(false);
 
   useEffect(() => {
-    const theme = resolveThemePreference();
+    const theme = readClientTheme();
     applyTheme(theme);
     setDark(theme === "dark");
   }, []);
 
   function toggle() {
-    const next = !dark;
-    applyTheme(next ? "dark" : "light");
-    setDark(next);
+    const next = dark ? "light" : "dark";
+    applyTheme(next);
+    setDark(next === "dark");
   }
 
   return (

package/src/components/shared/workspace-indicator.tsx

@@ -1,13 +1,15 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { GitBranch } from "lucide-react";
+import { Database, Folder, GitBranch, Wrench } from "lucide-react";
 
 interface WorkspaceData {
   folderName: string;
   parentPath: string;
   gitBranch: string | null;
   isWorktree: boolean;
+  dataDir: string | null;
+  dataDirMismatch: boolean;
 }
 
 interface WorkspaceIndicatorProps {
@@ -16,6 +18,8 @@ interface WorkspaceIndicatorProps {
 
 export function WorkspaceIndicator({ variant }: WorkspaceIndicatorProps) {
   const [data, setData] = useState<WorkspaceData | null>(null);
+  const [fixState, setFixState] = useState<"idle" | "loading" | "done" | "error">("idle");
+  const [fixResult, setFixResult] = useState<string | null>(null);
 
   useEffect(() => {
     fetch("/api/workspace/context")
@@ -26,9 +30,28 @@ export function WorkspaceIndicator({ variant }: WorkspaceIndicatorProps) {
 
   if (!data) return null;
 
+  async function handleFix() {
+    setFixState("loading");
+    try {
+      const res = await fetch("/api/workspace/fix-data-dir", { method: "POST" });
+      const json = await res.json();
+      if (res.ok && json.success) {
+        setFixState("done");
+        setFixResult(json.dataDir);
+      } else {
+        setFixState("error");
+        setFixResult(json.error || "Fix failed");
+      }
+    } catch {
+      setFixState("error");
+      setFixResult("Network error");
+    }
+  }
+
   if (variant === "inline") {
     return (
       <span className="text-sm text-muted-foreground">
+        <Folder className="h-3 w-3 inline mr-1" />
         {data.parentPath}/
         <span className="font-medium text-foreground">{data.folderName}</span>
         {data.gitBranch && (
@@ -37,13 +60,20 @@ export function WorkspaceIndicator({ variant }: WorkspaceIndicatorProps) {
             {data.gitBranch}
           </span>
         )}
+        {data.dataDir && (
+          <span className={`ml-2 inline-flex items-center gap-1 text-xs ${data.dataDirMismatch ? "text-destructive" : "text-muted-foreground/70"}`}>
+            <Database className="h-3 w-3" />
+            {data.dataDir}
+          </span>
+        )}
       </span>
     );
   }
 
   return (
     <div className="min-w-0">
-      <p className="text-[12px] text-muted-foreground truncate">
+      <p className="text-[12px] text-muted-foreground truncate flex items-center gap-1">
+        <Folder className="h-3 w-3 shrink-0" />
         {data.parentPath}/<span className="font-semibold text-foreground">{data.folderName}</span>
       </p>
       {data.gitBranch && (
@@ -55,6 +85,35 @@ export function WorkspaceIndicator({ variant }: WorkspaceIndicatorProps) {
           )}
         </p>
       )}
+      {data.dataDir && (
+        <p className={`text-[11px] truncate flex items-center gap-1 mt-0.5 ${data.dataDirMismatch ? "text-destructive" : "text-muted-foreground/70"}`}>
+          <Database className="h-3 w-3 shrink-0" />
+          {data.dataDir}
+          {data.dataDirMismatch && fixState === "idle" && (
+            <>
+              <span className="text-[10px] bg-destructive/10 text-destructive px-1 rounded">shared</span>
+              <button
+                onClick={handleFix}
+                className="text-[10px] bg-destructive/10 text-destructive px-1.5 py-0.5 rounded hover:bg-destructive/20 transition-colors cursor-pointer inline-flex items-center gap-0.5"
+              >
+                <Wrench className="h-2.5 w-2.5" />
+                Fix
+              </button>
+            </>
+          )}
+          {data.dataDirMismatch && fixState === "loading" && (
+            <span className="text-[10px] text-muted-foreground animate-pulse">fixing...</span>
+          )}
+          {data.dataDirMismatch && fixState === "done" && (
+            <span className="text-[10px] text-green-600">
+              → {fixResult} · restart to apply
+            </span>
+          )}
+          {data.dataDirMismatch && fixState === "error" && (
+            <span className="text-[10px] text-destructive">{fixResult}</span>
+          )}
+        </p>
+      )}
     </div>
   );
 }

package/src/components/tables/__tests__/table-enrichment-sheet.test.tsx

@@ -0,0 +1,130 @@
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+
+import { TableEnrichmentSheet } from "@/components/tables/table-enrichment-sheet";
+import type { EnrichmentPlan } from "@/lib/tables/enrichment-planner";
+import type { ColumnDef } from "@/lib/tables/types";
+
+const { pushMock, toastErrorMock, toastSuccessMock } = vi.hoisted(() => ({
+  pushMock: vi.fn(),
+  toastErrorMock: vi.fn(),
+  toastSuccessMock: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: toastErrorMock,
+    success: toastSuccessMock,
+  },
+}));
+
+const columns: ColumnDef[] = [
+  {
+    name: "company",
+    displayName: "Company",
+    dataType: "text",
+    position: 0,
+    required: false,
+    defaultValue: null,
+    config: null,
+  },
+];
+
+const previewPlan: EnrichmentPlan = {
+  promptMode: "auto",
+  strategy: "single-pass-lookup",
+  agentProfile: "general",
+  reasoning: "Keep the row flow lightweight.",
+  steps: [
+    {
+      id: "lookup",
+      name: "Lookup value",
+      purpose: "Determine the final typed value for this row",
+      prompt: "Return only the final value.",
+      agentProfile: "general",
+    },
+  ],
+  targetContract: {
+    columnName: "company",
+    columnLabel: "Company",
+    dataType: "text",
+  },
+  eligibleRowCount: 2,
+  sampleBindings: [{ id: "row-1", company: "Acme" }],
+};
+
+describe("TableEnrichmentSheet", () => {
+  beforeEach(() => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url === "/api/profiles") {
+          return Promise.resolve({
+            ok: true,
+            json: vi.fn().mockResolvedValue([{ id: "general", name: "General" }]),
+          });
+        }
+        if (url === "/api/tables/table-1/enrich/plan") {
+          return Promise.resolve({
+            ok: true,
+            json: vi.fn().mockResolvedValue(previewPlan),
+          });
+        }
+        if (url === "/api/tables/table-1/enrich") {
+          return Promise.resolve({
+            ok: true,
+            json: vi.fn().mockResolvedValue({ workflowId: "workflow-1", rowCount: 2 }),
+          });
+        }
+        return Promise.reject(new Error(`Unhandled fetch: ${url}`));
+      })
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("keeps a fresh preview launchable when using the planner recommendation", async () => {
+    render(
+      <TableEnrichmentSheet
+        open
+        onOpenChange={() => {}}
+        tableId="table-1"
+        columns={columns}
+      />
+    );
+
+    const dialog = await screen.findByRole("dialog", { name: "Enrich Table" });
+    fireEvent.click(within(dialog).getByRole("button", { name: "Preview Plan" }));
+
+    await screen.findByText("Keep the row flow lightweight.");
+
+    expect(
+      screen.queryByText("Inputs changed after the last preview. Refresh the plan before launching.")
+    ).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(within(dialog).getByRole("button", { name: "Launch Enrichment" })).toBeEnabled();
+    });
+
+    fireEvent.click(within(dialog).getByRole("button", { name: "Launch Enrichment" }));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith(
+        "/api/tables/table-1/enrich",
+        expect.objectContaining({ method: "POST" })
+      );
+      expect(pushMock).toHaveBeenCalledWith("/workflows/workflow-1");
+      expect(toastErrorMock).not.toHaveBeenCalled();
+      expect(toastSuccessMock).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/tables/table-create-sheet.tsx

@@ -15,6 +15,7 @@ import {
 import {
   Sheet,
   SheetContent,
+  SheetDescription,
   SheetHeader,
   SheetTitle,
   SheetFooter,
@@ -132,6 +133,9 @@ export function TableCreateSheet({
       <SheetContent side="right" className="w-[480px] sm:max-w-[480px]">
         <SheetHeader>
           <SheetTitle>Create Table</SheetTitle>
+          <SheetDescription>
+            Name the table, optionally assign a project, and define the first set of columns.
+          </SheetDescription>
         </SheetHeader>
 
         <div className="px-6 pb-6 space-y-4 overflow-y-auto">

package/src/components/tables/table-enrichment-runs.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { workflowStatusVariant } from "@/lib/constants/status-colors";
+
+interface EnrichmentRunSummary {
+  workflowId: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+  targetColumn: string;
+  targetColumnLabel: string;
+  rowCount: number;
+  strategy:
+    | "single-pass-lookup"
+    | "single-pass-classify"
+    | "research-and-synthesize";
+  promptMode: "auto" | "custom";
+}
+
+interface TableEnrichmentRunsProps {
+  tableId: string;
+  refreshKey?: number;
+}
+
+export function TableEnrichmentRuns({
+  tableId,
+  refreshKey = 0,
+}: TableEnrichmentRunsProps) {
+  const [runs, setRuns] = useState<EnrichmentRunSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadRuns = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/tables/${tableId}/enrich/runs?limit=5`);
+      if (!res.ok) throw new Error("Failed to load runs");
+      const data = (await res.json()) as EnrichmentRunSummary[];
+      setRuns(data);
+    } catch {
+      setRuns([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [tableId]);
+
+  useEffect(() => {
+    loadRuns();
+  }, [loadRuns, refreshKey]);
+
+  if (!loading && runs.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="surface-card-muted rounded-lg border p-4 space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-medium">Recent Enrichments</h3>
+          <p className="text-xs text-muted-foreground">
+            Recent planner-driven enrichment runs for this table.
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={loadRuns}>
+          Refresh
+        </Button>
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading recent enrichment runs…</p>
+      ) : (
+        <div className="space-y-2">
+          {runs.map((run) => (
+            <div
+              key={run.workflowId}
+              className="surface-control rounded-lg border px-3 py-2 flex items-center justify-between gap-3"
+            >
+              <div className="min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <p className="text-sm font-medium truncate">{run.targetColumnLabel}</p>
+                  <Badge variant={workflowStatusVariant[run.status] ?? "outline"}>
+                    {run.status}
+                  </Badge>
+                  <Badge variant="outline">{run.promptMode}</Badge>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {run.rowCount} rows · {run.strategy} ·{" "}
+                  {new Date(run.updatedAt).toLocaleString()}
+                </p>
+              </div>
+              <Button asChild variant="ghost" size="sm">
+                <Link href={`/workflows/${run.workflowId}`}>View</Link>
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}