stagent 0.6.3 → 0.8.0

package/src/components/shared/document-picker-sheet.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import {
   Sheet,
   SheetContent,
@@ -8,13 +8,21 @@ import {
   SheetTitle,
   SheetDescription,
 } from "@/components/ui/sheet";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Badge } from "@/components/ui/badge";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { FileText, Search, Loader2 } from "lucide-react";
+import { FileText, Search, Loader2, ChevronRight, X } from "lucide-react";
 import { getFileIcon, formatSize, getStatusDotColor } from "@/components/documents/utils";
+import { cn } from "@/lib/utils";
 
 export interface PickerDocument {
   id: string;
@@ -33,6 +41,15 @@ export interface PickerDocument {
   createdAt: number;
 }
 
+/** Lightweight metadata for a selected document (survives project switches) */
+export interface PickerSelectedDoc {
+  id: string;
+  originalName: string;
+  mimeType: string;
+  size: number;
+  projectName?: string | null;
+}
+
 interface DocumentPickerSheetProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -40,14 +57,18 @@ interface DocumentPickerSheetProps {
   projectId: string | null;
   /** Currently selected document IDs (to pre-check) */
   selectedIds: Set<string>;
-  /** Called when user confirms selection */
-  onConfirm: (selectedIds: string[]) => void;
+  /** Called when user confirms selection. Second arg provides metadata for display (avoids re-fetch). */
+  onConfirm: (selectedIds: string[], selectedMeta: PickerSelectedDoc[]) => void;
   /** Optional: scope to a step ID label */
   stepLabel?: string;
   /** Grouping mode: "workflow" groups by source workflow, "project" by project name, "source" by direction */
   groupBy?: "workflow" | "project" | "source";
   /** Override the sheet title */
   title?: string;
+  /** Enable cross-project browsing with a project dropdown. Default: false */
+  allowCrossProject?: boolean;
+  /** Metadata for pre-selected docs (enables tray display across project switches) */
+  selectedDocumentMeta?: Array<{ id: string; originalName: string; mimeType: string; size?: number; projectName?: string | null }>;
 }
 
 export function DocumentPickerSheet({
@@ -59,25 +80,78 @@ export function DocumentPickerSheet({
   stepLabel,
   groupBy = "source",
   title,
+  allowCrossProject = false,
+  selectedDocumentMeta,
 }: DocumentPickerSheetProps) {
   const [documents, setDocuments] = useState<PickerDocument[]>([]);
   const [loading, setLoading] = useState(false);
   const [search, setSearch] = useState("");
   const [localSelected, setLocalSelected] = useState<Set<string>>(new Set());
 
-  // Sync initial selection when sheet opens
+  // Cross-project state
+  const [activeProjectId, setActiveProjectId] = useState<string | null>(projectId);
+  const [projects, setProjects] = useState<Array<{ id: string; name: string }>>([]);
+  const [projectsLoading, setProjectsLoading] = useState(false);
+  const [selectedDocMeta, setSelectedDocMeta] = useState<Map<string, PickerSelectedDoc>>(new Map());
+  const [trayExpanded, setTrayExpanded] = useState(true);
+  const initializedRef = useRef(false);
+
+  // Initialize state when sheet opens
   useEffect(() => {
     if (open) {
+      setActiveProjectId(projectId);
       setLocalSelected(new Set(selectedIds));
-      fetchDocuments();
+      setSearch("");
+      setTrayExpanded(true);
+
+      // Seed selectedDocMeta from the prop
+      if (selectedDocumentMeta && selectedDocumentMeta.length > 0) {
+        const metaMap = new Map<string, PickerSelectedDoc>();
+        for (const doc of selectedDocumentMeta) {
+          if (selectedIds.has(doc.id)) {
+            metaMap.set(doc.id, {
+              id: doc.id,
+              originalName: doc.originalName,
+              mimeType: doc.mimeType,
+              size: doc.size ?? 0,
+              projectName: doc.projectName,
+            });
+          }
+        }
+        setSelectedDocMeta(metaMap);
+      } else {
+        setSelectedDocMeta(new Map());
+      }
+
+      // Fetch projects list for the dropdown
+      if (allowCrossProject) {
+        fetchProjects();
+      }
+      initializedRef.current = true;
+    } else {
+      initializedRef.current = false;
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Fetch documents when activeProjectId changes (and sheet is open)
+  useEffect(() => {
+    if (open && initializedRef.current) {
+      fetchDocuments(activeProjectId);
+    }
+  }, [activeProjectId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Initial document fetch when sheet opens
+  useEffect(() => {
+    if (open) {
+      fetchDocuments(projectId);
     }
   }, [open, projectId]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  async function fetchDocuments() {
+  async function fetchDocuments(forProjectId: string | null) {
     setLoading(true);
     try {
       const params = new URLSearchParams({ status: "ready" });
-      if (projectId) params.set("projectId", projectId);
+      if (forProjectId) params.set("projectId", forProjectId);
       const res = await fetch(`/api/documents?${params}`);
       if (res.ok) {
         const data = await res.json();
@@ -90,6 +164,21 @@ export function DocumentPickerSheet({
     }
   }
 
+  async function fetchProjects() {
+    setProjectsLoading(true);
+    try {
+      const res = await fetch("/api/projects");
+      if (res.ok) {
+        const data = await res.json();
+        setProjects(data.map((p: { id: string; name: string }) => ({ id: p.id, name: p.name })));
+      }
+    } catch {
+      // Silently fail — no project dropdown options
+    } finally {
+      setProjectsLoading(false);
+    }
+  }
+
   const filtered = useMemo(() => {
     if (!search.trim()) return documents;
     const q = search.toLowerCase();
@@ -136,32 +225,71 @@ export function DocumentPickerSheet({
     return groups;
   }, [filtered, groupBy]);
 
+  // Compute cross-project tray items
+  const currentDocIds = useMemo(() => new Set(documents.map((d) => d.id)), [documents]);
+  const crossProjectSelected = useMemo(
+    () => [...selectedDocMeta.values()].filter((d) => localSelected.has(d.id) && !currentDocIds.has(d.id)),
+    [selectedDocMeta, localSelected, currentDocIds]
+  );
+  const showTray = allowCrossProject && crossProjectSelected.length > 0;
+
   function toggleDocument(id: string) {
     setLocalSelected((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
         next.delete(id);
+        setSelectedDocMeta((m) => {
+          const n = new Map(m);
+          n.delete(id);
+          return n;
+        });
       } else {
         next.add(id);
+        const doc = documents.find((d) => d.id === id);
+        if (doc) {
+          setSelectedDocMeta((m) =>
+            new Map(m).set(id, {
+              id: doc.id,
+              originalName: doc.originalName,
+              mimeType: doc.mimeType,
+              size: doc.size,
+              projectName: doc.projectName,
+            })
+          );
+        }
       }
       return next;
     });
   }
 
   function handleConfirm() {
-    onConfirm([...localSelected]);
+    const ids = [...localSelected];
+    // Build metadata array from cached meta + current documents
+    const meta: PickerSelectedDoc[] = ids.map((id) => {
+      const cached = selectedDocMeta.get(id);
+      if (cached) return cached;
+      const doc = documents.find((d) => d.id === id);
+      if (doc) return { id: doc.id, originalName: doc.originalName, mimeType: doc.mimeType, size: doc.size, projectName: doc.projectName };
+      return { id, originalName: "Unknown", mimeType: "application/octet-stream", size: 0 };
+    });
+    onConfirm(ids, meta);
     onOpenChange(false);
   }
 
+  function handleProjectChange(value: string) {
+    setActiveProjectId(value === "__all__" ? null : value);
+  }
+
   const sheetTitle = title
     ? title
     : stepLabel
       ? `Select Documents for "${stepLabel}"`
       : "Select Input Documents";
 
+  const effectiveProjectId = allowCrossProject ? activeProjectId : projectId;
   const emptyMessage = search
     ? "No documents match your search."
-    : projectId
+    : effectiveProjectId
       ? "No documents available in this project."
       : "No documents available. Upload files in the Documents view.";
 
@@ -179,6 +307,28 @@ export function DocumentPickerSheet({
         </SheetHeader>
 
         <div className="px-6 pb-6 flex flex-col gap-4 flex-1 min-h-0">
+          {/* Project selector (cross-project mode only) */}
+          {allowCrossProject && (
+            <Select
+              value={activeProjectId ?? "__all__"}
+              onValueChange={handleProjectChange}
+              disabled={projectsLoading}
+            >
+              <SelectTrigger className="h-9">
+                <SelectValue placeholder="All Projects" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">All Projects</SelectItem>
+                {projects.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    {p.name}
+                    {p.id === projectId ? " (current)" : ""}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+
           {/* Search */}
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -187,9 +337,62 @@ export function DocumentPickerSheet({
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               className="pl-9"
-            />
+/>
           </div>
 
+          {/* Cross-project selected tray */}
+          {showTray && (
+            <div className="border rounded-lg p-2 space-y-1">
+              <button
+                type="button"
+                onClick={() => setTrayExpanded((v) => !v)}
+                className="w-full text-xs text-muted-foreground flex items-center gap-1 hover:text-foreground transition-colors"
+              >
+                <ChevronRight
+                  className={cn(
+                    "h-3 w-3 transition-transform",
+                    trayExpanded && "rotate-90"
+                  )}
+                />
+                {crossProjectSelected.length} selected from other projects
+              </button>
+              {trayExpanded && (
+                <div className="max-h-[120px] overflow-y-auto space-y-1">
+                  {crossProjectSelected.map((doc) => {
+                    const Icon = getFileIcon(doc.mimeType);
+                    return (
+                      <div
+                        key={doc.id}
+                        className="flex items-center gap-2 text-xs py-1.5 px-1"
+                      >
+                        <Icon className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                        <span className="truncate flex-1">
+                          {doc.originalName}
+                        </span>
+                        {doc.projectName && (
+                          <Badge
+                            variant="outline"
+                            className="text-[10px] px-1.5 flex-shrink-0"
+                          >
+                            {doc.projectName}
+                          </Badge>
+                        )}
+                        <button
+                          type="button"
+                          onClick={() => toggleDocument(doc.id)}
+                          className="flex-shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+                          aria-label={`Remove ${doc.originalName}`}
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+
           {/* Document list */}
           <ScrollArea className="flex-1 min-h-0 -mx-2">
             {loading ? (

package/src/components/tables/table-browser.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { LayoutGrid, LayoutList, Plus, Trash2, Search, LayoutTemplate } from "lucide-react";
+import { toast } from "sonner";
+import { TableListTable } from "./table-list-table";
+import { TableGrid } from "./table-grid";
+import { TableCreateSheet } from "./table-create-sheet";
+import { FilterBar } from "@/components/shared/filter-bar";
+import { EmptyState } from "@/components/shared/empty-state";
+import { Table2 } from "lucide-react";
+import type { TableWithRelations } from "./types";
+
+interface TableBrowserProps {
+  initialTables: TableWithRelations[];
+  projects: { id: string; name: string }[];
+}
+
+export function TableBrowser({ initialTables, projects }: TableBrowserProps) {
+  const [tables, setTables] = useState(initialTables);
+  const [view, setView] = useState<"table" | "grid">("table");
+  const [search, setSearch] = useState("");
+  const [sourceFilter, setSourceFilter] = useState<string>("all");
+  const [projectFilter, setProjectFilter] = useState<string>("all");
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [createOpen, setCreateOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const router = useRouter();
+
+  const refresh = useCallback(async () => {
+    try {
+      const res = await fetch("/api/tables");
+      if (res.ok) {
+        const data = await res.json();
+        setTables(data);
+      }
+    } catch {
+      // Silent refresh failure
+    }
+  }, []);
+
+  const filtered = tables.filter((t) => {
+    if (
+      search &&
+      !t.name.toLowerCase().includes(search.toLowerCase()) &&
+      !(t.description ?? "").toLowerCase().includes(search.toLowerCase())
+    ) {
+      return false;
+    }
+    if (sourceFilter !== "all" && t.source !== sourceFilter) return false;
+    if (projectFilter !== "all" && t.projectId !== projectFilter) return false;
+    return true;
+  });
+
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleSelectAll() {
+    if (selected.size === filtered.length) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(filtered.map((t) => t.id)));
+    }
+  }
+
+  async function handleBulkDelete() {
+    if (selected.size === 0) return;
+    setDeleting(true);
+    try {
+      const promises = Array.from(selected).map((id) =>
+        fetch(`/api/tables/${id}`, { method: "DELETE" })
+      );
+      await Promise.all(promises);
+      toast.success(`Deleted ${selected.size} table(s)`);
+      setSelected(new Set());
+      await refresh();
+    } catch {
+      toast.error("Failed to delete tables");
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  const activeFilters = [
+    sourceFilter !== "all",
+    projectFilter !== "all",
+  ].filter(Boolean).length;
+
+  const navigate = (id: string) => router.push(`/tables/${id}`);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search tables..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex items-center gap-1 border rounded-lg p-0.5">
+          <Button
+            variant={view === "table" ? "secondary" : "ghost"}
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => setView("table")}
+          >
+            <LayoutList className="h-4 w-4" />
+          </Button>
+          <Button
+            variant={view === "grid" ? "secondary" : "ghost"}
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => setView("grid")}
+          >
+            <LayoutGrid className="h-4 w-4" />
+          </Button>
+        </div>
+        {selected.size > 0 && (
+          <Button
+            variant="destructive"
+            size="sm"
+            disabled={deleting}
+            onClick={handleBulkDelete}
+          >
+            <Trash2 className="h-4 w-4 mr-1" />
+            Delete ({selected.size})
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => router.push("/tables/templates")}
+        >
+          <LayoutTemplate className="h-4 w-4 mr-1" />
+          Templates
+        </Button>
+        <Button size="sm" onClick={() => setCreateOpen(true)}>
+          <Plus className="h-4 w-4 mr-1" />
+          New Table
+        </Button>
+      </div>
+
+      <FilterBar
+        activeCount={activeFilters}
+        onClear={() => {
+          setSourceFilter("all");
+          setProjectFilter("all");
+        }}
+      >
+        <Select value={sourceFilter} onValueChange={setSourceFilter}>
+          <SelectTrigger className="w-[140px]">
+            <SelectValue placeholder="Source" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Sources</SelectItem>
+            <SelectItem value="manual">Manual</SelectItem>
+            <SelectItem value="imported">Imported</SelectItem>
+            <SelectItem value="agent">Agent</SelectItem>
+            <SelectItem value="template">Template</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={projectFilter} onValueChange={setProjectFilter}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Project" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Projects</SelectItem>
+            {projects.map((p) => (
+              <SelectItem key={p.id} value={p.id}>
+                {p.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </FilterBar>
+
+      {filtered.length === 0 ? (
+        <EmptyState
+          icon={Table2}
+          heading="No tables yet"
+          description="Create a table to start organizing your structured data, or browse templates for inspiration."
+          action={
+            <Button onClick={() => setCreateOpen(true)}>
+              <Plus className="h-4 w-4 mr-1" />
+              Create Table
+            </Button>
+          }
+        />
+      ) : view === "table" ? (
+        <TableListTable
+          tables={filtered}
+          selected={selected}
+          onToggleSelect={toggleSelect}
+          onToggleSelectAll={toggleSelectAll}
+          onSelect={navigate}
+          onOpen={navigate}
+        />
+      ) : (
+        <TableGrid
+          tables={filtered}
+          onSelect={navigate}
+          onOpen={navigate}
+        />
+      )}
+
+      <TableCreateSheet
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        projects={projects}
+        onCreated={refresh}
+      />
+    </div>
+  );
+}