stagent 0.6.3 → 0.7.0

package/src/components/tables/table-column-header.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Type,
+  Hash,
+  Calendar,
+  CheckSquare,
+  List,
+  Link,
+  Mail,
+  GitBranch,
+  Sparkles,
+  ArrowUp,
+  ArrowDown,
+  ChevronDown,
+  Trash2,
+  Pencil,
+} from "lucide-react";
+import type { ColumnDef } from "@/lib/tables/types";
+import type { ColumnDataType } from "@/lib/constants/table-status";
+import type { LucideIcon } from "lucide-react";
+
+const typeIcons: Record<ColumnDataType, LucideIcon> = {
+  text: Type,
+  number: Hash,
+  date: Calendar,
+  boolean: CheckSquare,
+  select: List,
+  url: Link,
+  email: Mail,
+  relation: GitBranch,
+  computed: Sparkles,
+};
+
+interface ColumnHeaderProps {
+  column: ColumnDef;
+  sortDirection: "asc" | "desc" | null;
+  onSort: (direction: "asc" | "desc") => void;
+  onRename: () => void;
+  onDelete: () => void;
+}
+
+export function SpreadsheetColumnHeader({
+  column,
+  sortDirection,
+  onSort,
+  onRename,
+  onDelete,
+}: ColumnHeaderProps) {
+  const Icon = typeIcons[column.dataType] ?? Type;
+
+  return (
+    <div className="flex items-center gap-1 w-full">
+      <Icon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+      <span className="truncate text-xs font-medium">{column.displayName}</span>
+      {sortDirection === "asc" && <ArrowUp className="h-3 w-3 text-muted-foreground" />}
+      {sortDirection === "desc" && <ArrowDown className="h-3 w-3 text-muted-foreground" />}
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 ml-auto shrink-0 opacity-0 group-hover:opacity-100 focus:opacity-100"
+          >
+            <ChevronDown className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => onSort("asc")}>
+            <ArrowUp className="h-4 w-4 mr-2" />
+            Sort Ascending
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onSort("desc")}>
+            <ArrowDown className="h-4 w-4 mr-2" />
+            Sort Descending
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={onRename}>
+            <Pencil className="h-4 w-4 mr-2" />
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={onDelete}
+            className="text-destructive focus:text-destructive"
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            Delete Column
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

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

@@ -0,0 +1,331 @@
+"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 { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { Plus, X } from "lucide-react";
+import { toast } from "sonner";
+import { COLUMN_DATA_TYPES, columnTypeLabel } from "@/lib/constants/table-status";
+import type { ColumnDataType } from "@/lib/constants/table-status";
+
+interface TableColumnSheetProps {
+  tableId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onColumnAdded: () => void;
+}
+
+interface TableInfo {
+  id: string;
+  name: string;
+  columnSchema: string;
+}
+
+export function TableColumnSheet({
+  tableId,
+  open,
+  onOpenChange,
+  onColumnAdded,
+}: TableColumnSheetProps) {
+  const [displayName, setDisplayName] = useState("");
+  const [dataType, setDataType] = useState<ColumnDataType>("text");
+  const [required, setRequired] = useState(false);
+  const [selectOptions, setSelectOptions] = useState<string[]>([""]);
+  const [saving, setSaving] = useState(false);
+
+  // Computed column state
+  const [formula, setFormula] = useState("");
+  const [formulaType, setFormulaType] = useState<string>("arithmetic");
+
+  // Relation column state
+  const [targetTableId, setTargetTableId] = useState("");
+  const [displayColumn, setDisplayColumn] = useState("");
+  const [availableTables, setAvailableTables] = useState<TableInfo[]>([]);
+  const [targetColumns, setTargetColumns] = useState<string[]>([]);
+
+  // Fetch available tables when relation type is selected
+  useEffect(() => {
+    if (dataType !== "relation" || !open) return;
+    fetch("/api/tables")
+      .then((r) => r.json())
+      .then((tables: TableInfo[]) => setAvailableTables(tables.filter((t) => t.id !== tableId)))
+      .catch(() => {});
+  }, [dataType, open, tableId]);
+
+  // Fetch target table columns when target table changes
+  useEffect(() => {
+    if (!targetTableId) { setTargetColumns([]); return; }
+    fetch(`/api/tables/${targetTableId}`)
+      .then((r) => r.json())
+      .then((t: TableInfo) => {
+        const cols = JSON.parse(t.columnSchema) as Array<{ name: string }>;
+        setTargetColumns(cols.map((c) => c.name));
+        if (cols.length > 0 && !displayColumn) setDisplayColumn(cols[0].name);
+      })
+      .catch(() => {});
+  }, [targetTableId]);
+
+  const name = displayName
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_|_$/g, "");
+
+  function addOption() {
+    setSelectOptions((prev) => [...prev, ""]);
+  }
+
+  function updateOption(index: number, value: string) {
+    setSelectOptions((prev) => prev.map((o, i) => (i === index ? value : o)));
+  }
+
+  function removeOption(index: number) {
+    setSelectOptions((prev) => prev.filter((_, i) => i !== index));
+  }
+
+  async function handleSubmit() {
+    if (!displayName.trim()) {
+      toast.error("Column name is required");
+      return;
+    }
+    if (dataType === "computed" && !formula.trim()) {
+      toast.error("Formula is required for computed columns");
+      return;
+    }
+    if (dataType === "relation" && !targetTableId) {
+      toast.error("Target table is required for relation columns");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      let config: Record<string, unknown> | undefined;
+      if (dataType === "select") {
+        config = { options: selectOptions.filter((o) => o.trim()) };
+      } else if (dataType === "computed") {
+        config = { formula: formula.trim(), formulaType, resultType: "text" };
+      } else if (dataType === "relation") {
+        config = { targetTableId, displayColumn: displayColumn || undefined };
+      }
+
+      const res = await fetch(`/api/tables/${tableId}/columns`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name,
+          displayName: displayName.trim(),
+          dataType,
+          required,
+          config,
+        }),
+      });
+
+      if (!res.ok) {
+        const err = await res.json();
+        toast.error(err.error?.formErrors?.[0] || "Failed to add column");
+        return;
+      }
+
+      toast.success(`Column "${displayName}" added`);
+      onOpenChange(false);
+      onColumnAdded();
+
+      // Reset
+      setDisplayName("");
+      setDataType("text");
+      setRequired(false);
+      setSelectOptions([""]);
+      setFormula("");
+      setFormulaType("arithmetic");
+      setTargetTableId("");
+      setDisplayColumn("");
+    } catch {
+      toast.error("Failed to add column");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[380px] sm:max-w-[380px]">
+        <SheetHeader>
+          <SheetTitle>Add Column</SheetTitle>
+        </SheetHeader>
+
+        <div className="px-6 pb-6 space-y-4 overflow-y-auto">
+          <div className="space-y-2">
+            <Label htmlFor="col-name">Display Name</Label>
+            <Input
+              id="col-name"
+              placeholder="e.g. Email Address"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+            />
+            {name && (
+              <p className="text-xs text-muted-foreground">
+                Field name: <code>{name}</code>
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label>Type</Label>
+            <Select value={dataType} onValueChange={(v) => setDataType(v as ColumnDataType)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {COLUMN_DATA_TYPES.map((dt) => (
+                  <SelectItem key={dt} value={dt}>
+                    {columnTypeLabel[dt]}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="col-required">Required</Label>
+            <Switch
+              id="col-required"
+              checked={required}
+              onCheckedChange={setRequired}
+            />
+          </div>
+
+          {dataType === "select" && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label>Options</Label>
+                <Button variant="ghost" size="sm" onClick={addOption}>
+                  <Plus className="h-3 w-3 mr-1" />
+                  Add
+                </Button>
+              </div>
+              <div className="space-y-1">
+                {selectOptions.map((opt, i) => (
+                  <div key={i} className="flex items-center gap-1">
+                    <Input
+                      placeholder={`Option ${i + 1}`}
+                      value={opt}
+                      onChange={(e) => updateOption(i, e.target.value)}
+                      className="h-8"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      onClick={() => removeOption(i)}
+                      disabled={selectOptions.length <= 1}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {dataType === "computed" && (
+            <div className="space-y-3">
+              <div className="space-y-2">
+                <Label>Formula</Label>
+                <Textarea
+                  placeholder="e.g. {{price}} * {{quantity}}"
+                  value={formula}
+                  onChange={(e) => setFormula(e.target.value)}
+                  rows={3}
+                  className="font-mono text-sm"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Reference columns with {"{{column_name}}"} syntax. Supports +, -, *, /, if(), concat(), sum(), avg(), min(), max().
+                </p>
+              </div>
+              <div className="space-y-2">
+                <Label>Formula Type</Label>
+                <Select value={formulaType} onValueChange={setFormulaType}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="arithmetic">Arithmetic</SelectItem>
+                    <SelectItem value="text_concat">Text Concatenation</SelectItem>
+                    <SelectItem value="date_diff">Date Difference</SelectItem>
+                    <SelectItem value="conditional">Conditional</SelectItem>
+                    <SelectItem value="aggregate">Aggregate</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+
+          {dataType === "relation" && (
+            <div className="space-y-3">
+              <div className="space-y-2">
+                <Label>Target Table</Label>
+                <Select value={targetTableId} onValueChange={setTargetTableId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a table..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableTables.map((t) => (
+                      <SelectItem key={t.id} value={t.id}>
+                        {t.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              {targetColumns.length > 0 && (
+                <div className="space-y-2">
+                  <Label>Display Column</Label>
+                  <Select value={displayColumn} onValueChange={setDisplayColumn}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {targetColumns.map((col) => (
+                        <SelectItem key={col} value={col}>
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-xs text-muted-foreground">
+                    The column from the target table shown in this cell.
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <SheetFooter className="px-6">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={saving}>
+            {saving ? "Adding..." : "Add Column"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,240 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { Plus, X } from "lucide-react";
+import { toast } from "sonner";
+import { COLUMN_DATA_TYPES, columnTypeLabel } from "@/lib/constants/table-status";
+import type { ColumnDataType } from "@/lib/constants/table-status";
+
+interface ColumnDraft {
+  name: string;
+  displayName: string;
+  dataType: ColumnDataType;
+}
+
+interface TableCreateSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projects: { id: string; name: string }[];
+  onCreated: () => void;
+}
+
+export function TableCreateSheet({
+  open,
+  onOpenChange,
+  projects,
+  onCreated,
+}: TableCreateSheetProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [projectId, setProjectId] = useState<string>("none");
+  const [columns, setColumns] = useState<ColumnDraft[]>([
+    { name: "name", displayName: "Name", dataType: "text" },
+  ]);
+  const [saving, setSaving] = useState(false);
+
+  function addColumn() {
+    setColumns((prev) => [
+      ...prev,
+      { name: "", displayName: "", dataType: "text" },
+    ]);
+  }
+
+  function removeColumn(index: number) {
+    setColumns((prev) => prev.filter((_, i) => i !== index));
+  }
+
+  function updateColumn(index: number, field: keyof ColumnDraft, value: string) {
+    setColumns((prev) =>
+      prev.map((col, i) => {
+        if (i !== index) return col;
+        const updated = { ...col, [field]: value };
+        // Auto-generate name from displayName
+        if (field === "displayName") {
+          updated.name = value
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, "_")
+            .replace(/^_|_$/g, "");
+        }
+        return updated;
+      })
+    );
+  }
+
+  async function handleSubmit() {
+    if (!name.trim()) {
+      toast.error("Table name is required");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const res = await fetch("/api/tables", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name.trim(),
+          description: description.trim() || null,
+          projectId: projectId === "none" ? null : projectId,
+          columns: columns
+            .filter((c) => c.name && c.displayName)
+            .map((c, i) => ({
+              name: c.name,
+              displayName: c.displayName,
+              dataType: c.dataType,
+              position: i,
+            })),
+        }),
+      });
+
+      if (!res.ok) {
+        const err = await res.json();
+        toast.error(err.error?.formErrors?.[0] || "Failed to create table");
+        return;
+      }
+
+      toast.success("Table created");
+      onOpenChange(false);
+      onCreated();
+
+      // Reset form
+      setName("");
+      setDescription("");
+      setProjectId("none");
+      setColumns([{ name: "name", displayName: "Name", dataType: "text" }]);
+    } catch {
+      toast.error("Failed to create table");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[480px] sm:max-w-[480px]">
+        <SheetHeader>
+          <SheetTitle>Create Table</SheetTitle>
+        </SheetHeader>
+
+        <div className="px-6 pb-6 space-y-4 overflow-y-auto">
+          <div className="space-y-2">
+            <Label htmlFor="table-name">Name</Label>
+            <Input
+              id="table-name"
+              placeholder="e.g. Customer List"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="table-desc">Description</Label>
+            <Textarea
+              id="table-desc"
+              placeholder="What is this table for?"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={2}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Project</Label>
+            <Select value={projectId} onValueChange={setProjectId}>
+              <SelectTrigger>
+                <SelectValue placeholder="No project" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">No project</SelectItem>
+                {projects.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    {p.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label>Columns</Label>
+              <Button variant="ghost" size="sm" onClick={addColumn}>
+                <Plus className="h-3 w-3 mr-1" />
+                Add
+              </Button>
+            </div>
+
+            <div className="space-y-2">
+              {columns.map((col, i) => (
+                <div key={i} className="flex items-center gap-2">
+                  <Input
+                    placeholder="Column name"
+                    value={col.displayName}
+                    onChange={(e) => updateColumn(i, "displayName", e.target.value)}
+                    className="flex-1"
+                  />
+                  <Select
+                    value={col.dataType}
+                    onValueChange={(v) => updateColumn(i, "dataType", v)}
+                  >
+                    <SelectTrigger className="w-[120px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {COLUMN_DATA_TYPES.filter(
+                        (dt) => dt !== "relation" && dt !== "computed"
+                      ).map((dt) => (
+                        <SelectItem key={dt} value={dt}>
+                          {columnTypeLabel[dt]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 shrink-0"
+                    onClick={() => removeColumn(i)}
+                    disabled={columns.length <= 1}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <SheetFooter className="px-6">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={saving}>
+            {saving ? "Creating..." : "Create Table"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}