stagent 0.6.3 → 0.7.0

package/src/components/tables/table-cell-editor.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { TableRelationCombobox } from "./table-relation-combobox";
+import type { ColumnDef } from "@/lib/tables/types";
+
+interface CellEditorProps {
+  column: ColumnDef;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function CellEditor({
+  column,
+  value,
+  onChange,
+  onConfirm,
+  onCancel,
+}: CellEditorProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // Auto-focus on mount
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  }, []);
+
+  const strValue = value == null ? "" : String(value);
+
+  switch (column.dataType) {
+    case "boolean":
+      // Booleans toggle directly, no edit mode needed
+      return null;
+
+    case "select": {
+      const options = column.config?.options ?? [];
+      return (
+        <Select
+          value={strValue}
+          onValueChange={(v) => {
+            onChange(v);
+            onConfirm();
+          }}
+          open
+        >
+          <SelectTrigger className="h-8 border-0 shadow-none focus:ring-2 focus:ring-primary text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((opt) => (
+              <SelectItem key={opt} value={opt}>
+                {opt}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    }
+
+    case "number":
+      return (
+        <Input
+          ref={inputRef}
+          type="number"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))}
+          onBlur={onConfirm}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") onCancel();
+          }}
+          className="h-8 border-0 shadow-none focus-visible:ring-2 focus-visible:ring-primary rounded-none text-sm"
+        />
+      );
+
+    case "date":
+      return (
+        <Input
+          ref={inputRef}
+          type="date"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onConfirm}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") onCancel();
+          }}
+          className="h-8 border-0 shadow-none focus-visible:ring-2 focus-visible:ring-primary rounded-none text-sm"
+        />
+      );
+
+    case "relation": {
+      const targetId = column.config?.targetTableId;
+      const dispCol = column.config?.displayColumn ?? "name";
+      if (!targetId) return null;
+      return (
+        <TableRelationCombobox
+          targetTableId={targetId}
+          displayColumn={dispCol}
+          value={strValue || null}
+          onChange={(v) => {
+            onChange(v);
+            onConfirm();
+          }}
+        />
+      );
+    }
+
+    case "computed":
+      // Computed columns are read-only
+      return null;
+
+    case "url":
+    case "email":
+    case "text":
+    default:
+      return (
+        <Input
+          ref={inputRef}
+          type={column.dataType === "email" ? "email" : column.dataType === "url" ? "url" : "text"}
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onConfirm}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") onCancel();
+          }}
+          className="h-8 border-0 shadow-none focus-visible:ring-2 focus-visible:ring-primary rounded-none text-sm"
+        />
+      );
+  }
+}
+
+// ── Display renderers ────────────────────────────────────────────────
+
+interface CellDisplayProps {
+  column: ColumnDef;
+  value: unknown;
+  onToggleBoolean?: (newValue: boolean) => void;
+}
+
+export function CellDisplay({ column, value, onToggleBoolean }: CellDisplayProps) {
+  if (value == null || value === "") {
+    return <span className="text-muted-foreground/40 text-sm">—</span>;
+  }
+
+  switch (column.dataType) {
+    case "boolean":
+      return (
+        <Checkbox
+          checked={!!value}
+          onCheckedChange={(checked) => onToggleBoolean?.(!!checked)}
+          className="ml-1"
+        />
+      );
+
+    case "select":
+      return (
+        <span className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs font-medium">
+          {String(value)}
+        </span>
+      );
+
+    case "number": {
+      const num = Number(value);
+      return (
+        <span className="tabular-nums text-sm">
+          {isNaN(num) ? String(value) : num.toLocaleString()}
+        </span>
+      );
+    }
+
+    case "date": {
+      const str = String(value);
+      try {
+        return <span className="text-sm">{new Date(str).toLocaleDateString()}</span>;
+      } catch {
+        return <span className="text-sm">{str}</span>;
+      }
+    }
+
+    case "url":
+      return (
+        <a
+          href={String(value)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-primary underline underline-offset-2 hover:text-primary/80"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {String(value).replace(/^https?:\/\//, "").slice(0, 40)}
+        </a>
+      );
+
+    case "email":
+      return (
+        <a
+          href={`mailto:${value}`}
+          className="text-sm text-primary underline underline-offset-2 hover:text-primary/80"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {String(value)}
+        </a>
+      );
+
+    case "computed":
+      return (
+        <span className="text-sm text-muted-foreground italic">
+          {String(value)}
+        </span>
+      );
+
+    default:
+      return <span className="text-sm">{String(value)}</span>;
+  }
+}

package/src/components/tables/table-chart-builder.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { BarChart3, LineChart, PieChart, ScatterChart } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+type ChartType = "bar" | "line" | "pie" | "scatter";
+type Aggregation = "sum" | "avg" | "count" | "min" | "max";
+
+export interface EditChartData {
+  id: string;
+  name: string;
+  config: {
+    type: ChartType;
+    xColumn: string;
+    yColumn?: string;
+    aggregation?: Aggregation;
+  };
+}
+
+interface TableChartBuilderProps {
+  tableId: string;
+  columns: Array<{ name: string; displayName: string; dataType: string }>;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onChartSaved: () => void;
+  editChart?: EditChartData | null;
+}
+
+const CHART_TYPES: Array<{
+  value: ChartType;
+  label: string;
+  icon: typeof BarChart3;
+}> = [
+  { value: "bar", label: "Bar", icon: BarChart3 },
+  { value: "line", label: "Line", icon: LineChart },
+  { value: "pie", label: "Pie", icon: PieChart },
+  { value: "scatter", label: "Scatter", icon: ScatterChart },
+];
+
+const AGGREGATIONS: Array<{ value: Aggregation; label: string }> = [
+  { value: "count", label: "Count" },
+  { value: "sum", label: "Sum" },
+  { value: "avg", label: "Average" },
+  { value: "min", label: "Min" },
+  { value: "max", label: "Max" },
+];
+
+const NUMERIC_TYPES = new Set(["number", "currency", "percent", "integer", "float"]);
+
+export function TableChartBuilder({
+  tableId,
+  columns,
+  open,
+  onOpenChange,
+  onChartSaved,
+  editChart,
+}: TableChartBuilderProps) {
+  const [chartType, setChartType] = useState<ChartType>("bar");
+  const [title, setTitle] = useState("");
+  const [xColumn, setXColumn] = useState("");
+  const [yColumn, setYColumn] = useState("");
+  const [aggregation, setAggregation] = useState<Aggregation>("count");
+  const [saving, setSaving] = useState(false);
+
+  const isEditing = !!editChart;
+  const numericColumns = columns.filter((c) => NUMERIC_TYPES.has(c.dataType));
+
+  // Populate form when editing
+  useEffect(() => {
+    if (editChart) {
+      setChartType(editChart.config.type);
+      setTitle(editChart.name);
+      setXColumn(editChart.config.xColumn);
+      setYColumn(editChart.config.yColumn ?? "");
+      setAggregation(editChart.config.aggregation ?? "count");
+    } else {
+      resetForm();
+    }
+  }, [editChart]);
+
+  function resetForm() {
+    setChartType("bar");
+    setTitle("");
+    setXColumn("");
+    setYColumn("");
+    setAggregation("count");
+  }
+
+  async function handleSave() {
+    if (!title.trim()) {
+      toast.error("Chart title is required");
+      return;
+    }
+    if (!xColumn) {
+      toast.error("X-axis column is required");
+      return;
+    }
+    if (aggregation !== "count" && !yColumn) {
+      toast.error("Y-axis column is required for this aggregation");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const payload = {
+        type: chartType,
+        title: title.trim(),
+        xColumn,
+        yColumn: yColumn || null,
+        aggregation,
+      };
+
+      const url = isEditing
+        ? `/api/tables/${tableId}/charts/${editChart.id}`
+        : `/api/tables/${tableId}/charts`;
+
+      const res = await fetch(url, {
+        method: isEditing ? "PATCH" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (res.ok) {
+        toast.success(isEditing ? `Chart "${title}" updated` : `Chart "${title}" created`);
+      } else {
+        const data = await res.json().catch(() => null);
+        toast.error(data?.error ?? `Failed to ${isEditing ? "update" : "create"} chart`);
+        return;
+      }
+
+      onOpenChange(false);
+      onChartSaved();
+      if (!isEditing) resetForm();
+    } catch {
+      toast.error(`Failed to ${isEditing ? "update" : "create"} chart`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[420px] sm:max-w-[420px]">
+        <SheetHeader>
+          <SheetTitle>{isEditing ? "Edit Chart" : "Create Chart"}</SheetTitle>
+        </SheetHeader>
+
+        <div className="px-6 pb-6 space-y-5 overflow-y-auto">
+          {/* Chart type selector */}
+          <div className="space-y-2">
+            <Label>Chart Type</Label>
+            <div className="grid grid-cols-4 gap-2">
+              {CHART_TYPES.map((ct) => {
+                const Icon = ct.icon;
+                return (
+                  <button
+                    key={ct.value}
+                    type="button"
+                    onClick={() => setChartType(ct.value)}
+                    className={cn(
+                      "flex flex-col items-center gap-1.5 rounded-lg border p-3 text-xs transition-colors",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      chartType === ct.value
+                        ? "border-primary bg-primary/5 text-primary"
+                        : "border-border text-muted-foreground"
+                    )}
+                  >
+                    <Icon className="h-5 w-5" />
+                    {ct.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Title */}
+          <div className="space-y-2">
+            <Label htmlFor="chart-title">Title</Label>
+            <Input
+              id="chart-title"
+              placeholder="e.g. Revenue by Month"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+
+          {/* X-axis column */}
+          <div className="space-y-2">
+            <Label>X-Axis Column</Label>
+            <Select value={xColumn} onValueChange={setXColumn}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select column" />
+              </SelectTrigger>
+              <SelectContent>
+                {columns.map((col) => (
+                  <SelectItem key={col.name} value={col.name}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Aggregation */}
+          <div className="space-y-2">
+            <Label>Aggregation</Label>
+            <Select
+              value={aggregation}
+              onValueChange={(v) => setAggregation(v as Aggregation)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {AGGREGATIONS.map((agg) => (
+                  <SelectItem key={agg.value} value={agg.value}>
+                    {agg.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Y-axis column (only for non-count aggregations) */}
+          {aggregation !== "count" && (
+            <div className="space-y-2">
+              <Label>Y-Axis Column (numeric)</Label>
+              <Select value={yColumn} onValueChange={setYColumn}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select numeric column" />
+                </SelectTrigger>
+                <SelectContent>
+                  {numericColumns.length === 0 ? (
+                    <SelectItem value="_none" disabled>
+                      No numeric columns available
+                    </SelectItem>
+                  ) : (
+                    numericColumns.map((col) => (
+                      <SelectItem key={col.name} value={col.name}>
+                        {col.displayName}
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+              {numericColumns.length === 0 && (
+                <p className="text-xs text-muted-foreground">
+                  Add a numeric column to use sum, average, min, or max aggregations.
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <SheetFooter className="px-6">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving
+              ? isEditing ? "Updating..." : "Creating..."
+              : isEditing ? "Update Chart" : "Create Chart"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/tables/table-chart-view.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+
+interface ChartConfig {
+  type: "bar" | "line" | "pie" | "scatter";
+  xColumn: string;
+  yColumn?: string;
+  aggregation?: "sum" | "avg" | "count" | "min" | "max";
+}
+
+interface TableChartViewProps {
+  config: ChartConfig;
+  title: string;
+  rows: Array<{ data: Record<string, unknown> }>;
+}
+
+const CHART_COLORS = [
+  "oklch(0.65 0.18 250)",
+  "oklch(0.70 0.16 180)",
+  "oklch(0.68 0.17 320)",
+  "oklch(0.72 0.14 80)",
+  "oklch(0.60 0.20 30)",
+  "oklch(0.75 0.12 140)",
+];
+
+export function TableChartView({ config, title, rows }: TableChartViewProps) {
+  const chartData = useMemo(() => {
+    if (config.type === "pie" || config.aggregation === "count") {
+      // Aggregate by xColumn values
+      const counts = new Map<string, number>();
+      for (const row of rows) {
+        const key = String(row.data[config.xColumn] ?? "Unknown");
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+      }
+      return Array.from(counts.entries()).map(([name, value]) => ({ name, value }));
+    }
+
+    if (config.aggregation && config.yColumn) {
+      // Group by xColumn, aggregate yColumn
+      const groups = new Map<string, number[]>();
+      for (const row of rows) {
+        const key = String(row.data[config.xColumn] ?? "Unknown");
+        const val = Number(row.data[config.yColumn]);
+        if (!isNaN(val)) {
+          if (!groups.has(key)) groups.set(key, []);
+          groups.get(key)!.push(val);
+        }
+      }
+
+      return Array.from(groups.entries()).map(([name, values]) => {
+        let value: number;
+        switch (config.aggregation) {
+          case "sum": value = values.reduce((a, b) => a + b, 0); break;
+          case "avg": value = values.reduce((a, b) => a + b, 0) / values.length; break;
+          case "min": value = Math.min(...values); break;
+          case "max": value = Math.max(...values); break;
+          default: value = values.length;
+        }
+        return { name, value: Math.round(value * 100) / 100 };
+      });
+    }
+
+    // Raw x/y mapping
+    return rows.map((row) => ({
+      name: String(row.data[config.xColumn] ?? ""),
+      value: config.yColumn ? Number(row.data[config.yColumn]) || 0 : 1,
+    }));
+  }, [config, rows]);
+
+  if (chartData.length === 0) {
+    return <p className="text-sm text-muted-foreground p-4">No data to chart.</p>;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-medium">{title}</h3>
+      <div className="h-[300px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          {config.type === "bar" ? (
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+              <YAxis tick={{ fontSize: 12 }} />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="value" name={config.yColumn ?? config.aggregation ?? "value"} fill="oklch(0.65 0.18 250)" radius={[4, 4, 0, 0]} />
+            </BarChart>
+          ) : config.type === "line" ? (
+            <LineChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+              <YAxis tick={{ fontSize: 12 }} />
+              <Tooltip />
+              <Legend />
+              <Line type="monotone" dataKey="value" name={config.yColumn ?? config.aggregation ?? "value"} stroke="oklch(0.65 0.18 250)" strokeWidth={2} dot={{ r: 3 }} />
+            </LineChart>
+          ) : config.type === "pie" ? (
+            <PieChart>
+              <Tooltip />
+              <Legend />
+              <Pie
+                data={chartData}
+                cx="50%"
+                cy="50%"
+                outerRadius={100}
+                dataKey="value"
+                nameKey="name"
+                label={({ name, percent }: { name?: string; percent?: number }) => `${name ?? ""} ${((percent ?? 0) * 100).toFixed(0)}%`}
+              >
+                {chartData.map((_, i) => (
+                  <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+                ))}
+              </Pie>
+            </PieChart>
+          ) : (
+            <ScatterChart>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} name={config.xColumn} />
+              <YAxis dataKey="value" tick={{ fontSize: 12 }} name={config.yColumn ?? "value"} />
+              <Tooltip />
+              <Scatter data={chartData} fill="oklch(0.65 0.18 250)" />
+            </ScatterChart>
+          )}
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}