stagent 0.6.2 → 0.7.0

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

@@ -0,0 +1,446 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { Plus, Zap, Pencil } from "lucide-react";
+import { toast } from "sonner";
+
+interface Trigger {
+  id: string;
+  name: string;
+  eventType: "row_added" | "row_updated" | "row_deleted";
+  condition: {
+    column: string;
+    operator: string;
+    value: string;
+  } | null;
+  actionType: "run_workflow" | "create_task";
+  actionConfig: Record<string, string>;
+  status: "active" | "paused";
+  fireCount: number;
+}
+
+interface TableTriggersTabProps {
+  tableId: string;
+}
+
+const EVENT_TYPES = [
+  { value: "row_added", label: "Row Added" },
+  { value: "row_updated", label: "Row Updated" },
+  { value: "row_deleted", label: "Row Deleted" },
+] as const;
+
+const OPERATORS = [
+  { value: "equals", label: "equals" },
+  { value: "not_equals", label: "not equals" },
+  { value: "contains", label: "contains" },
+  { value: "greater_than", label: "greater than" },
+  { value: "less_than", label: "less than" },
+  { value: "is_empty", label: "is empty" },
+  { value: "is_not_empty", label: "is not empty" },
+] as const;
+
+const ACTION_TYPES = [
+  { value: "run_workflow", label: "Run Workflow" },
+  { value: "create_task", label: "Create Task" },
+] as const;
+
+function eventBadgeVariant(eventType: string) {
+  switch (eventType) {
+    case "row_added":
+      return "default" as const;
+    case "row_updated":
+      return "secondary" as const;
+    case "row_deleted":
+      return "destructive" as const;
+    default:
+      return "outline" as const;
+  }
+}
+
+export function TableTriggersTab({ tableId }: TableTriggersTabProps) {
+  const [triggers, setTriggers] = useState<Trigger[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingTrigger, setEditingTrigger] = useState<Trigger | null>(null);
+
+  // Form state
+  const [name, setName] = useState("");
+  const [eventType, setEventType] = useState<Trigger["eventType"]>("row_added");
+  const [conditionColumn, setConditionColumn] = useState("");
+  const [conditionOperator, setConditionOperator] = useState("equals");
+  const [conditionValue, setConditionValue] = useState("");
+  const [hasCondition, setHasCondition] = useState(false);
+  const [actionType, setActionType] = useState<Trigger["actionType"]>("run_workflow");
+  const [actionTargetId, setActionTargetId] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  const fetchTriggers = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/tables/${tableId}/triggers`);
+      if (res.ok) {
+        const raw = await res.json();
+        const list = raw.triggers ?? raw ?? [];
+        // Map API shape (triggerEvent, JSON strings) to component shape (eventType, parsed objects)
+        setTriggers(
+          list.map((t: Record<string, unknown>) => ({
+            ...t,
+            eventType: t.triggerEvent ?? t.eventType,
+            condition: typeof t.condition === "string" ? JSON.parse(t.condition) : t.condition ?? null,
+            actionConfig: typeof t.actionConfig === "string" ? JSON.parse(t.actionConfig) : t.actionConfig ?? {},
+          }))
+        );
+      }
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  }, [tableId]);
+
+  useEffect(() => {
+    fetchTriggers();
+  }, [fetchTriggers]);
+
+  function resetForm() {
+    setName("");
+    setEventType("row_added");
+    setConditionColumn("");
+    setConditionOperator("equals");
+    setConditionValue("");
+    setHasCondition(false);
+    setActionType("run_workflow");
+    setActionTargetId("");
+    setEditingTrigger(null);
+  }
+
+  function openAdd() {
+    resetForm();
+    setSheetOpen(true);
+  }
+
+  function openEdit(trigger: Trigger) {
+    setEditingTrigger(trigger);
+    setName(trigger.name);
+    setEventType(trigger.eventType);
+    if (trigger.condition) {
+      setHasCondition(true);
+      setConditionColumn(trigger.condition.column);
+      setConditionOperator(trigger.condition.operator);
+      setConditionValue(trigger.condition.value);
+    } else {
+      setHasCondition(false);
+      setConditionColumn("");
+      setConditionOperator("equals");
+      setConditionValue("");
+    }
+    setActionType(trigger.actionType);
+    setActionTargetId(trigger.actionConfig?.targetId ?? "");
+    setSheetOpen(true);
+  }
+
+  async function handleToggle(trigger: Trigger) {
+    const newStatus = trigger.status === "active" ? "paused" : "active";
+    try {
+      const res = await fetch(`/api/tables/${tableId}/triggers/${trigger.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: newStatus }),
+      });
+      if (res.ok) {
+        setTriggers((prev) =>
+          prev.map((t) => (t.id === trigger.id ? { ...t, status: newStatus } : t))
+        );
+        toast.success(`Trigger ${newStatus === "active" ? "activated" : "paused"}`);
+      } else {
+        toast.error("Failed to update trigger status");
+      }
+    } catch {
+      toast.error("Failed to update trigger status");
+    }
+  }
+
+  async function handleSubmit() {
+    if (!name.trim()) {
+      toast.error("Trigger name is required");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const payload = {
+        name: name.trim(),
+        triggerEvent: eventType,
+        condition: hasCondition
+          ? { column: conditionColumn, operator: conditionOperator, value: conditionValue }
+          : null,
+        actionType,
+        actionConfig: { targetId: actionTargetId },
+      };
+
+      const isEdit = !!editingTrigger;
+      const url = isEdit
+        ? `/api/tables/${tableId}/triggers/${editingTrigger.id}`
+        : `/api/tables/${tableId}/triggers`;
+      const method = isEdit ? "PATCH" : "POST";
+
+      const res = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        toast.error(err.error || `Failed to ${isEdit ? "update" : "create"} trigger`);
+        return;
+      }
+
+      toast.success(`Trigger "${name}" ${isEdit ? "updated" : "created"}`);
+      setSheetOpen(false);
+      resetForm();
+      fetchTriggers();
+    } catch {
+      toast.error("Failed to save trigger");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
+        Loading triggers...
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium">
+          Triggers ({triggers.length})
+        </h3>
+        <Button variant="outline" size="sm" onClick={openAdd}>
+          <Plus className="h-4 w-4 mr-1" />
+          Add Trigger
+        </Button>
+      </div>
+
+      {triggers.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-8 text-center">
+          <Zap className="mx-auto h-8 w-8 text-muted-foreground/50" />
+          <p className="mt-2 text-sm text-muted-foreground">
+            No triggers configured. Add a trigger to automate actions when rows change.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {triggers.map((trigger) => (
+            <div
+              key={trigger.id}
+              className="flex items-center gap-3 rounded-lg border p-3"
+            >
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium truncate">
+                    {trigger.name}
+                  </span>
+                  <Badge variant={eventBadgeVariant(trigger.eventType)}>
+                    {trigger.eventType.replace(/_/g, " ")}
+                  </Badge>
+                </div>
+                {trigger.condition && (
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    When {trigger.condition.column} {trigger.condition.operator}{" "}
+                    {trigger.condition.value}
+                  </p>
+                )}
+              </div>
+
+              <span className="text-xs text-muted-foreground whitespace-nowrap">
+                {trigger.fireCount} fires
+              </span>
+
+              <Switch
+                checked={trigger.status === "active"}
+                onCheckedChange={() => handleToggle(trigger)}
+                aria-label={`Toggle ${trigger.name}`}
+              />
+
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 shrink-0"
+                onClick={() => openEdit(trigger)}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Trigger config sheet */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent side="right" className="w-[420px] sm:max-w-[420px]">
+          <SheetHeader>
+            <SheetTitle>
+              {editingTrigger ? "Edit Trigger" : "Add Trigger"}
+            </SheetTitle>
+          </SheetHeader>
+
+          <div className="px-6 pb-6 space-y-4 overflow-y-auto">
+            <div className="space-y-2">
+              <Label htmlFor="trigger-name">Name</Label>
+              <Input
+                id="trigger-name"
+                placeholder="e.g. Notify on new row"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Event Type</Label>
+              <Select
+                value={eventType}
+                onValueChange={(v) => setEventType(v as Trigger["eventType"])}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {EVENT_TYPES.map((et) => (
+                    <SelectItem key={et.value} value={et.value}>
+                      {et.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Condition builder */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="trigger-condition">Condition</Label>
+                <Switch
+                  id="trigger-condition"
+                  checked={hasCondition}
+                  onCheckedChange={setHasCondition}
+                />
+              </div>
+              {hasCondition && (
+                <div className="space-y-2 rounded-md border p-3">
+                  <div className="space-y-1">
+                    <Label className="text-xs">Column</Label>
+                    <Input
+                      placeholder="Column name"
+                      value={conditionColumn}
+                      onChange={(e) => setConditionColumn(e.target.value)}
+                      className="h-8"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-xs">Operator</Label>
+                    <Select
+                      value={conditionOperator}
+                      onValueChange={setConditionOperator}
+                    >
+                      <SelectTrigger className="h-8">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {OPERATORS.map((op) => (
+                          <SelectItem key={op.value} value={op.value}>
+                            {op.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-xs">Value</Label>
+                    <Input
+                      placeholder="Comparison value"
+                      value={conditionValue}
+                      onChange={(e) => setConditionValue(e.target.value)}
+                      className="h-8"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Action config */}
+            <div className="space-y-2">
+              <Label>Action Type</Label>
+              <Select
+                value={actionType}
+                onValueChange={(v) => setActionType(v as Trigger["actionType"])}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {ACTION_TYPES.map((at) => (
+                    <SelectItem key={at.value} value={at.value}>
+                      {at.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="trigger-target">
+                {actionType === "run_workflow" ? "Workflow ID" : "Task Template"}
+              </Label>
+              <Input
+                id="trigger-target"
+                placeholder={
+                  actionType === "run_workflow"
+                    ? "Select or enter workflow ID"
+                    : "Select or enter task template"
+                }
+                value={actionTargetId}
+                onChange={(e) => setActionTargetId(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <SheetFooter className="px-6">
+            <Button variant="outline" onClick={() => setSheetOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSubmit} disabled={saving}>
+              {saving
+                ? "Saving..."
+                : editingTrigger
+                  ? "Update Trigger"
+                  : "Add Trigger"}
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

package/src/components/tables/types.ts

@@ -0,0 +1,6 @@
+import type { UserTableRow } from "@/lib/db/schema";
+
+export type TableWithRelations = UserTableRow & {
+  projectName: string | null;
+  columnCount: number;
+};

package/src/components/tables/use-spreadsheet-keys.ts

@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useState } from "react";
+
+export interface CellPosition {
+  rowIndex: number;
+  colIndex: number;
+}
+
+export type SpreadsheetMode = "idle" | "navigating" | "editing";
+
+interface UseSpreadsheetKeysOptions {
+  rowCount: number;
+  colCount: number;
+  onStartEdit: (pos: CellPosition) => void;
+  onConfirmEdit: () => void;
+  onCancelEdit: () => void;
+  onClearCell: (pos: CellPosition) => void;
+  onAddRow: () => void;
+}
+
+interface UseSpreadsheetKeysReturn {
+  activeCell: CellPosition | null;
+  mode: SpreadsheetMode;
+  setActiveCell: (pos: CellPosition | null) => void;
+  setMode: (mode: SpreadsheetMode) => void;
+  handleCellClick: (pos: CellPosition) => void;
+  handleCellDoubleClick: (pos: CellPosition) => void;
+}
+
+export function useSpreadsheetKeys(
+  opts: UseSpreadsheetKeysOptions
+): UseSpreadsheetKeysReturn {
+  const [activeCell, setActiveCell] = useState<CellPosition | null>(null);
+  const [mode, setMode] = useState<SpreadsheetMode>("idle");
+
+  const { rowCount, colCount, onStartEdit, onConfirmEdit, onCancelEdit, onClearCell, onAddRow } = opts;
+
+  const moveTo = useCallback(
+    (pos: CellPosition) => {
+      const clamped: CellPosition = {
+        rowIndex: Math.max(0, Math.min(pos.rowIndex, rowCount - 1)),
+        colIndex: Math.max(0, Math.min(pos.colIndex, colCount - 1)),
+      };
+      setActiveCell(clamped);
+    },
+    [rowCount, colCount]
+  );
+
+  const handleCellClick = useCallback(
+    (pos: CellPosition) => {
+      setActiveCell(pos);
+      if (mode === "editing") {
+        onConfirmEdit();
+      }
+      setMode("navigating");
+    },
+    [mode, onConfirmEdit]
+  );
+
+  const handleCellDoubleClick = useCallback(
+    (pos: CellPosition) => {
+      setActiveCell(pos);
+      setMode("editing");
+      onStartEdit(pos);
+    },
+    [onStartEdit]
+  );
+
+  useEffect(() => {
+    if (!activeCell) return;
+
+    function handleKeyDown(e: KeyboardEvent) {
+      // Don't interfere with inputs outside the spreadsheet
+      const target = e.target as HTMLElement;
+      const isInSheet = target.closest("[data-spreadsheet]");
+      const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+
+      if (mode === "editing") {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          onCancelEdit();
+          setMode("navigating");
+        } else if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          onConfirmEdit();
+          setMode("navigating");
+          // Move down after confirm
+          if (activeCell) {
+            if (activeCell.rowIndex < rowCount - 1) {
+              moveTo({ rowIndex: activeCell.rowIndex + 1, colIndex: activeCell.colIndex });
+            }
+          }
+        } else if (e.key === "Tab") {
+          e.preventDefault();
+          onConfirmEdit();
+          setMode("navigating");
+          // Move right (or wrap to next row)
+          if (activeCell) {
+            if (activeCell.colIndex < colCount - 1) {
+              moveTo({ rowIndex: activeCell.rowIndex, colIndex: activeCell.colIndex + 1 });
+            } else if (activeCell.rowIndex < rowCount - 1) {
+              moveTo({ rowIndex: activeCell.rowIndex + 1, colIndex: 0 });
+            }
+          }
+        }
+        return;
+      }
+
+      // Navigating mode — only handle if we're in the spreadsheet area
+      if (!isInSheet && isInInput) return;
+
+      if (mode === "navigating" && activeCell) {
+        switch (e.key) {
+          case "ArrowUp":
+            e.preventDefault();
+            moveTo({ rowIndex: activeCell.rowIndex - 1, colIndex: activeCell.colIndex });
+            break;
+          case "ArrowDown":
+            e.preventDefault();
+            moveTo({ rowIndex: activeCell.rowIndex + 1, colIndex: activeCell.colIndex });
+            break;
+          case "ArrowLeft":
+            e.preventDefault();
+            moveTo({ rowIndex: activeCell.rowIndex, colIndex: activeCell.colIndex - 1 });
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            moveTo({ rowIndex: activeCell.rowIndex, colIndex: activeCell.colIndex + 1 });
+            break;
+          case "Enter":
+          case "F2":
+            e.preventDefault();
+            setMode("editing");
+            onStartEdit(activeCell);
+            break;
+          case "Delete":
+          case "Backspace":
+            e.preventDefault();
+            onClearCell(activeCell);
+            break;
+          case "Tab":
+            e.preventDefault();
+            if (activeCell.colIndex < colCount - 1) {
+              moveTo({ rowIndex: activeCell.rowIndex, colIndex: activeCell.colIndex + 1 });
+            } else if (activeCell.rowIndex < rowCount - 1) {
+              moveTo({ rowIndex: activeCell.rowIndex + 1, colIndex: 0 });
+            }
+            break;
+          default:
+            // Start editing on printable character
+            if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+              setMode("editing");
+              onStartEdit(activeCell);
+            }
+            break;
+        }
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [activeCell, mode, rowCount, colCount, moveTo, onStartEdit, onConfirmEdit, onCancelEdit, onClearCell, onAddRow]);
+
+  return {
+    activeCell,
+    mode,
+    setActiveCell,
+    setMode,
+    handleCellClick,
+    handleCellDoubleClick,
+  };
+}

package/src/components/tables/utils.ts

@@ -0,0 +1,29 @@
+import type { ColumnDataType } from "@/lib/constants/table-status";
+
+/** Icons for column data types (lucide icon names) */
+export const columnTypeIcons: Record<ColumnDataType, string> = {
+  text: "Type",
+  number: "Hash",
+  date: "Calendar",
+  boolean: "CheckSquare",
+  select: "List",
+  url: "Link",
+  email: "Mail",
+  relation: "GitBranch",
+  computed: "Sparkles",
+};
+
+/** Format row count for display */
+export function formatRowCount(count: number): string {
+  if (count === 0) return "Empty";
+  if (count === 1) return "1 row";
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k rows`;
+  return `${count} rows`;
+}
+
+/** Format column count for display */
+export function formatColumnCount(count: number): string {
+  if (count === 0) return "No columns";
+  if (count === 1) return "1 column";
+  return `${count} columns`;
+}

package/src/components/tasks/task-card.tsx

@@ -5,7 +5,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { AlertCircle, Bot, ArrowUp, ArrowDown, Minus, Trash2, Check, X, Loader2, Square, CheckSquare, Pencil } from "lucide-react";
+import { AlertCircle, Bot, ArrowUp, ArrowDown, Minus, Trash2, Check, X, Loader2, Square, CheckSquare, Pencil, FileText } from "lucide-react";
 import type { TaskStatus } from "@/lib/constants/task-status";
 
 export interface TaskItem {
@@ -28,6 +28,7 @@ export interface TaskItem {
   resumeCount: number;
   createdAt: string;
   updatedAt: string;
+  docCount?: number;
   usage?: {
     inputTokens: number | null;
     outputTokens: number | null;
@@ -165,6 +166,12 @@ export function TaskCard({
                   <span className="truncate">{task.assignedAgent}</span>
                 </Badge>
               )}
+              {task.docCount != null && task.docCount > 0 && (
+                <Badge variant="outline" className="text-xs gap-1 h-5">
+                  <FileText className="h-3 w-3 shrink-0" />
+                  {task.docCount}
+                </Badge>
+              )}
               {isFailed && <AlertCircle className="h-3.5 w-3.5 text-destructive" aria-label="Task failed" />}
               {isRunning && (
                 <span className="flex h-2 w-2" aria-label="Task running">