stagent 0.9.5 → 0.10.0

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>
+  );
+}