stagent 0.6.3 → 0.8.0

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

@@ -0,0 +1,144 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { ExternalLink, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { tableSourceVariant } from "@/lib/constants/table-status";
+import { formatRowCount, formatColumnCount } from "./utils";
+import type { TableWithRelations } from "./types";
+import type { ColumnDef } from "@/lib/tables/types";
+
+interface TableDetailSheetProps {
+  table: TableWithRelations;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDeleted: () => void;
+}
+
+export function TableDetailSheet({
+  table,
+  open,
+  onOpenChange,
+  onDeleted,
+}: TableDetailSheetProps) {
+  const router = useRouter();
+
+  let columns: ColumnDef[] = [];
+  try {
+    columns = JSON.parse(table.columnSchema) as ColumnDef[];
+  } catch {
+    // Invalid schema
+  }
+
+  async function handleDelete() {
+    try {
+      const res = await fetch(`/api/tables/${table.id}`, {
+        method: "DELETE",
+      });
+      if (res.ok) {
+        toast.success("Table deleted");
+        onOpenChange(false);
+        onDeleted();
+      } else {
+        toast.error("Failed to delete table");
+      }
+    } catch {
+      toast.error("Failed to delete table");
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[420px] sm:max-w-[420px]">
+        <SheetHeader>
+          <SheetTitle>{table.name}</SheetTitle>
+        </SheetHeader>
+
+        <div className="px-6 pb-6 space-y-4 overflow-y-auto">
+          {table.description && (
+            <p className="text-sm text-muted-foreground">
+              {table.description}
+            </p>
+          )}
+
+          <div className="flex items-center gap-2 text-sm">
+            <Badge variant={tableSourceVariant[table.source]}>
+              {table.source}
+            </Badge>
+            <span className="text-muted-foreground">
+              {formatColumnCount(table.columnCount)}
+            </span>
+            <span className="text-muted-foreground">
+              {formatRowCount(table.rowCount)}
+            </span>
+          </div>
+
+          {table.projectName && (
+            <div className="text-sm">
+              <span className="text-muted-foreground">Project: </span>
+              {table.projectName}
+            </div>
+          )}
+
+          {columns.length > 0 && (
+            <div className="space-y-1">
+              <h4 className="text-sm font-medium">Columns</h4>
+              <div className="rounded-md border divide-y">
+                {columns.map((col) => (
+                  <div
+                    key={col.name}
+                    className="flex items-center justify-between px-3 py-2 text-sm"
+                  >
+                    <span>{col.displayName}</span>
+                    <Badge variant="outline" className="text-xs">
+                      {col.dataType}
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="text-xs text-muted-foreground">
+            Created{" "}
+            {table.createdAt
+              ? new Date(table.createdAt).toLocaleDateString()
+              : "—"}
+            {" · "}
+            Updated{" "}
+            {table.updatedAt
+              ? new Date(table.updatedAt).toLocaleDateString()
+              : "—"}
+          </div>
+        </div>
+
+        <SheetFooter className="px-6">
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={handleDelete}
+          >
+            <Trash2 className="h-4 w-4 mr-1" />
+            Delete
+          </Button>
+          <Button
+            size="sm"
+            onClick={() => router.push(`/tables/${table.id}`)}
+          >
+            <ExternalLink className="h-4 w-4 mr-1" />
+            Open
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/tables/table-detail-tabs.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { TableSpreadsheet } from "./table-spreadsheet";
+import { TableTriggersTab } from "./table-triggers-tab";
+import { TableHistoryTab } from "./table-history-tab";
+import { TableChartBuilder, type EditChartData } from "./table-chart-builder";
+import { TableChartView } from "./table-chart-view";
+import { Button } from "@/components/ui/button";
+import { BarChart3, Pencil, Plus, Trash2 } from "lucide-react";
+import { EmptyState } from "@/components/shared/empty-state";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+import { toast } from "sonner";
+import { tableSourceVariant } from "@/lib/constants/table-status";
+import type { ColumnDef } from "@/lib/tables/types";
+import type { UserTableRowRow } from "@/lib/db/schema";
+
+interface ChartView {
+  id: string;
+  name: string;
+  config: {
+    type: "bar" | "line" | "pie" | "scatter";
+    xColumn: string;
+    yColumn?: string;
+    aggregation?: "sum" | "avg" | "count" | "min" | "max";
+  };
+}
+
+interface TableMeta {
+  source: string;
+  projectName: string | null;
+  rowCount: number;
+  createdAt: string | null;
+  updatedAt: string | null;
+}
+
+interface TableDetailTabsProps {
+  tableId: string;
+  columns: ColumnDef[];
+  initialRows: UserTableRowRow[];
+  tableMeta?: TableMeta;
+}
+
+export function TableDetailTabs({
+  tableId,
+  columns,
+  initialRows,
+  tableMeta,
+}: TableDetailTabsProps) {
+  const [charts, setCharts] = useState<ChartView[]>([]);
+  const [chartBuilderOpen, setChartBuilderOpen] = useState(false);
+  const [editChart, setEditChart] = useState<EditChartData | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<ChartView | null>(null);
+
+  // Parse rows for chart rendering
+  const parsedRows = initialRows.map((r) => ({
+    data: typeof r.data === "string" ? JSON.parse(r.data) as Record<string, unknown> : r.data as Record<string, unknown>,
+  }));
+
+  const fetchCharts = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/tables/${tableId}/charts`);
+      if (res.ok) setCharts(await res.json());
+    } catch { /* silent */ }
+  }, [tableId]);
+
+  useEffect(() => { fetchCharts(); }, [fetchCharts]);
+
+  function handleEdit(chart: ChartView) {
+    setEditChart({
+      id: chart.id,
+      name: chart.name,
+      config: chart.config,
+    });
+    setChartBuilderOpen(true);
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    try {
+      const res = await fetch(`/api/tables/${tableId}/charts/${deleteTarget.id}`, {
+        method: "DELETE",
+      });
+      if (res.ok || res.status === 204) {
+        toast.success(`Chart "${deleteTarget.name}" deleted`);
+        fetchCharts();
+      } else {
+        toast.error("Failed to delete chart");
+      }
+    } catch {
+      toast.error("Failed to delete chart");
+    } finally {
+      setDeleteTarget(null);
+    }
+  }
+
+  function handleBuilderClose(open: boolean) {
+    setChartBuilderOpen(open);
+    if (!open) setEditChart(null);
+  }
+
+  return (
+    <>
+      <Tabs defaultValue="data" className="w-full">
+        <TabsList>
+          <TabsTrigger value="data">Data</TabsTrigger>
+          <TabsTrigger value="charts">Charts</TabsTrigger>
+          <TabsTrigger value="triggers">Triggers</TabsTrigger>
+          <TabsTrigger value="history">History</TabsTrigger>
+          {tableMeta && <TabsTrigger value="details">Details</TabsTrigger>}
+        </TabsList>
+
+        <TabsContent value="data" className="mt-4">
+          <TableSpreadsheet
+            tableId={tableId}
+            columns={columns}
+            initialRows={initialRows}
+          />
+        </TabsContent>
+
+        <TabsContent value="charts" className="mt-4">
+          <div className="space-y-4">
+            <div className="flex justify-end">
+              <Button variant="outline" size="sm" onClick={() => { setEditChart(null); setChartBuilderOpen(true); }}>
+                <Plus className="h-4 w-4 mr-1" />
+                New Chart
+              </Button>
+            </div>
+
+            {charts.length === 0 ? (
+              <EmptyState
+                icon={BarChart3}
+                heading="No charts yet"
+                description="Create a chart to visualize your table data."
+                action={
+                  <Button onClick={() => setChartBuilderOpen(true)}>
+                    <Plus className="h-4 w-4 mr-1" />
+                    Create Chart
+                  </Button>
+                }
+              />
+            ) : (
+              <div className="grid gap-4 md:grid-cols-2">
+                {charts.map((chart) => (
+                  <div key={chart.id} className="border rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <h4 className="text-sm font-medium truncate">{chart.name}</h4>
+                      <div className="flex items-center gap-1 shrink-0">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7"
+                          onClick={() => handleEdit(chart)}
+                          aria-label={`Edit ${chart.name}`}
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                          onClick={() => setDeleteTarget(chart)}
+                          aria-label={`Delete ${chart.name}`}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                    <TableChartView
+                      config={chart.config}
+                      title=""
+                      rows={parsedRows}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <TableChartBuilder
+              tableId={tableId}
+              columns={columns.map((c) => ({
+                name: c.name,
+                displayName: c.displayName,
+                dataType: c.dataType,
+              }))}
+              open={chartBuilderOpen}
+              onOpenChange={handleBuilderClose}
+              onChartSaved={fetchCharts}
+              editChart={editChart}
+            />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="triggers" className="mt-4">
+          <TableTriggersTab tableId={tableId} />
+        </TabsContent>
+
+        <TabsContent value="history" className="mt-4">
+          <TableHistoryTab tableId={tableId} />
+        </TabsContent>
+
+        {tableMeta && (
+          <TabsContent value="details" className="mt-4">
+            <div className="space-y-4 max-w-lg">
+              <div className="grid grid-cols-2 gap-y-3 text-sm">
+                <span className="text-muted-foreground">Source</span>
+                <div>
+                  <Badge variant={tableSourceVariant[tableMeta.source as keyof typeof tableSourceVariant] ?? "outline"}>
+                    {tableMeta.source}
+                  </Badge>
+                </div>
+
+                <span className="text-muted-foreground">Project</span>
+                <span>{tableMeta.projectName ?? "—"}</span>
+
+                <span className="text-muted-foreground">Columns</span>
+                <span>{columns.length}</span>
+
+                <span className="text-muted-foreground">Rows</span>
+                <span>{tableMeta.rowCount}</span>
+
+                <span className="text-muted-foreground">Created</span>
+                <span>
+                  {tableMeta.createdAt
+                    ? new Date(tableMeta.createdAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })
+                    : "—"}
+                </span>
+
+                <span className="text-muted-foreground">Updated</span>
+                <span>
+                  {tableMeta.updatedAt
+                    ? new Date(tableMeta.updatedAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })
+                    : "—"}
+                </span>
+              </div>
+
+              {columns.length > 0 && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium">Column Schema</h4>
+                  <div className="rounded-md border divide-y">
+                    {columns.map((col) => (
+                      <div
+                        key={col.name}
+                        className="flex items-center justify-between px-3 py-2 text-sm"
+                      >
+                        <span>{col.displayName}</span>
+                        <Badge variant="outline" className="text-xs">
+                          {col.dataType}
+                        </Badge>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </TabsContent>
+        )}
+      </Tabs>
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}
+        title={`Delete chart "${deleteTarget?.name}"?`}
+        description="This will permanently remove this chart. The underlying table data is not affected."
+        confirmLabel="Delete Chart"
+        onConfirm={handleDelete}
+        destructive
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,61 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Table2 } from "lucide-react";
+import { tableSourceVariant } from "@/lib/constants/table-status";
+import { formatRowCount, formatColumnCount } from "./utils";
+import type { TableWithRelations } from "./types";
+
+interface TableGridProps {
+  tables: TableWithRelations[];
+  onSelect: (id: string) => void;
+  onOpen: (id: string) => void;
+}
+
+export function TableGrid({ tables, onSelect, onOpen }: TableGridProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {tables.map((t) => (
+        <Card
+          key={t.id}
+          className="cursor-pointer hover:border-primary/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
+          tabIndex={0}
+          onClick={() => onSelect(t.id)}
+          onDoubleClick={() => onOpen(t.id)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onOpen(t.id);
+          }}
+        >
+          <CardHeader className="pb-2">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center gap-2">
+                <Table2 className="h-4 w-4 text-muted-foreground" />
+                <CardTitle className="text-sm font-medium">
+                  {t.name}
+                </CardTitle>
+              </div>
+              <Badge variant={tableSourceVariant[t.source]} className="text-xs">
+                {t.source}
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {t.description && (
+              <p className="text-xs text-muted-foreground mb-2 line-clamp-2">
+                {t.description}
+              </p>
+            )}
+            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+              <span>{formatColumnCount(t.columnCount)}</span>
+              <span>{formatRowCount(t.rowCount)}</span>
+              {t.projectName && (
+                <span className="truncate">{t.projectName}</span>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/src/components/tables/table-history-tab.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+import { History, RotateCcw, User, Bot } from "lucide-react";
+import { EmptyState } from "@/components/shared/empty-state";
+
+interface HistoryEntry {
+  id: string;
+  rowId: string;
+  tableId: string;
+  previousData: string;
+  changedBy: string;
+  changeType: "update" | "delete";
+  createdAt: string;
+}
+
+interface TableHistoryTabProps {
+  tableId: string;
+}
+
+export function TableHistoryTab({ tableId }: TableHistoryTabProps) {
+  const [entries, setEntries] = useState<HistoryEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const fetchHistory = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/tables/${tableId}/history?limit=100`);
+      if (res.ok) {
+        setEntries(await res.json());
+      }
+    } catch { /* silent */ }
+    finally { setLoading(false); }
+  }, [tableId]);
+
+  useEffect(() => { fetchHistory(); }, [fetchHistory]);
+
+  async function handleRollback(entry: HistoryEntry) {
+    try {
+      const res = await fetch(`/api/tables/${tableId}/rows/${entry.rowId}/history`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ historyEntryId: entry.id }),
+      });
+      if (res.ok) {
+        toast.success("Row restored to previous version");
+        fetchHistory();
+      } else {
+        const err = await res.json().catch(() => ({}));
+        toast.error(err.error || "Failed to rollback");
+      }
+    } catch {
+      toast.error("Failed to rollback");
+    }
+  }
+
+  function formatDate(dateStr: string) {
+    try {
+      return new Date(dateStr).toLocaleString();
+    } catch {
+      return dateStr;
+    }
+  }
+
+  function formatData(json: string) {
+    try {
+      return JSON.stringify(JSON.parse(json), null, 2);
+    } catch {
+      return json;
+    }
+  }
+
+  if (loading) {
+    return <p className="text-sm text-muted-foreground p-4">Loading history...</p>;
+  }
+
+  if (entries.length === 0) {
+    return (
+      <EmptyState
+        icon={History}
+        heading="No history yet"
+        description="Row changes will be tracked here as you edit data."
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-2 p-4">
+      <p className="text-xs text-muted-foreground mb-3">
+        {entries.length} change{entries.length !== 1 ? "s" : ""} recorded
+      </p>
+      <div className="space-y-1">
+        {entries.map((entry) => (
+          <div
+            key={entry.id}
+            className="border rounded-lg p-3 space-y-2"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2 text-sm">
+                {entry.changedBy === "agent" ? (
+                  <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                ) : (
+                  <User className="h-3.5 w-3.5 text-muted-foreground" />
+                )}
+                <Badge variant={entry.changeType === "delete" ? "destructive" : "secondary"}>
+                  {entry.changeType}
+                </Badge>
+                <span className="text-muted-foreground text-xs">
+                  Row {entry.rowId.slice(0, 8)}...
+                </span>
+                <span className="text-muted-foreground text-xs">
+                  {formatDate(entry.createdAt)}
+                </span>
+              </div>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setExpandedId(expandedId === entry.id ? null : entry.id)}
+                >
+                  {expandedId === entry.id ? "Hide" : "View"}
+                </Button>
+                {entry.changeType !== "delete" && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleRollback(entry)}
+                  >
+                    <RotateCcw className="h-3 w-3 mr-1" />
+                    Restore
+                  </Button>
+                )}
+              </div>
+            </div>
+            {expandedId === entry.id && (
+              <pre className="text-xs bg-muted p-2 rounded overflow-x-auto max-h-48">
+                {formatData(entry.previousData)}
+              </pre>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}