stagent 0.9.5 → 0.10.0

package/src/components/tasks/kanban-column.tsx

@@ -9,6 +9,47 @@ import { Inbox, Plus, CheckSquare, Square, ArrowRight, Play, Trash2 } from "luci
 import { TaskCard, type TaskItem } from "./task-card";
 import { WorkflowKanbanCard, type WorkflowKanbanItem } from "@/components/workflows/workflow-kanban-card";
 import type { TaskStatus } from "@/lib/constants/task-status";
+import type { SortOrder } from "./kanban-board";
+
+type KanbanItem =
+  | { kind: "task"; data: TaskItem }
+  | { kind: "workflow"; data: WorkflowKanbanItem };
+
+function itemName(item: KanbanItem): string {
+  return item.kind === "task" ? item.data.title : item.data.name;
+}
+
+function mergedItems(
+  tasks: TaskItem[],
+  workflows: WorkflowKanbanItem[],
+  sortOrder: SortOrder
+): KanbanItem[] {
+  const items: KanbanItem[] = [
+    ...workflows.map((w) => ({ kind: "workflow" as const, data: w })),
+    ...tasks.map((t) => ({ kind: "task" as const, data: t })),
+  ];
+
+  switch (sortOrder) {
+    case "created-desc":
+      return items.sort(
+        (a, b) => new Date(b.data.createdAt).getTime() - new Date(a.data.createdAt).getTime()
+      );
+    case "created-asc":
+      return items.sort(
+        (a, b) => new Date(a.data.createdAt).getTime() - new Date(b.data.createdAt).getTime()
+      );
+    case "title-asc":
+      return items.sort((a, b) => itemName(a).localeCompare(itemName(b)));
+    case "priority":
+      // Workflows lack priority — keep them at top, then sort tasks by priority
+      return items.sort((a, b) => {
+        if (a.kind === "workflow" && b.kind === "workflow") return 0;
+        if (a.kind === "workflow") return -1;
+        if (b.kind === "workflow") return 1;
+        return a.data.priority - b.data.priority;
+      });
+  }
+}
 
 const columnLabels: Record<string, string> = {
   planned: "Planned",
@@ -22,6 +63,7 @@ export function KanbanColumn({
   status,
   tasks,
   workflows = [],
+  sortOrder = "priority",
   exitingIds,
   onTaskClick,
   onAddTask,
@@ -34,6 +76,7 @@ export function KanbanColumn({
   status: TaskStatus;
   tasks: TaskItem[];
   workflows?: WorkflowKanbanItem[];
+  sortOrder?: SortOrder;
   exitingIds?: Set<string>;
   onTaskClick: (task: TaskItem) => void;
   onAddTask?: () => void;
@@ -195,30 +238,26 @@ export function KanbanColumn({
               </div>
             ) : (
               <>
-                {/* Workflow cards first (not draggable) */}
-                {workflows.map((workflow) => (
-                  <WorkflowKanbanCard key={workflow.id} workflow={workflow} />
-                ))}
-                {/* Task cards (draggable) */}
-                {tasks.map((task) => {
-                  const isExiting = exitingIds?.has(task.id);
-                  return (
+                {mergedItems(tasks, workflows, sortOrder).map((item) =>
+                  item.kind === "workflow" ? (
+                    <WorkflowKanbanCard key={item.data.id} workflow={item.data} />
+                  ) : (
                     <div
-                      key={task.id}
-                      className={isExiting ? "animate-card-exit pointer-events-none" : ""}
+                      key={item.data.id}
+                      className={exitingIds?.has(item.data.id) ? "animate-card-exit pointer-events-none" : ""}
                     >
                       <TaskCard
-                        task={task}
+                        task={item.data}
                         onClick={onTaskClick}
                         selectionMode={selectMode}
-                        selected={selectedIds.has(task.id)}
+                        selected={selectedIds.has(item.data.id)}
                         onSelect={handleSelect}
                         onDelete={onDeleteTask}
                         onEdit={onEditTask}
                       />
                     </div>
-                  );
-                })}
+                  )
+                )}
               </>
             )}
           </div>

package/src/components/tasks/task-bento-grid.tsx

@@ -10,8 +10,11 @@ import {
   Timer,
   Cpu,
   Paperclip,
+  CalendarClock,
+  CalendarCheck,
 } from "lucide-react";
 import { taskStatusVariant } from "@/lib/constants/status-colors";
+import { formatCompactDateTime } from "@/lib/utils/format-timestamp";
 import { TaskBentoCell } from "./task-bento-cell";
 import type { TaskItem } from "./task-card";
 import type { DocumentRow } from "@/lib/db/schema";
@@ -127,6 +130,22 @@ export function TaskBentoGrid({ task, docs }: TaskBentoGridProps) {
         />
       )}
 
+      {usage?.startedAt && (
+        <TaskBentoCell
+          icon={CalendarClock}
+          label="Started At"
+          value={formatCompactDateTime(usage.startedAt)}
+        />
+      )}
+
+      {usage?.finishedAt && (
+        <TaskBentoCell
+          icon={CalendarCheck}
+          label="Finished At"
+          value={formatCompactDateTime(usage.finishedAt)}
+        />
+      )}
+
       {usage?.startedAt && usage?.finishedAt && (
         <TaskBentoCell
           icon={Timer}

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

@@ -5,7 +5,8 @@ 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, FileText } from "lucide-react";
+import { AlertCircle, Bot, ArrowUp, ArrowDown, Minus, Trash2, Check, X, Loader2, Square, CheckSquare, Pencil, FileText, Clock } from "lucide-react";
+import { formatCompactDateTime } from "@/lib/utils/format-timestamp";
 import type { TaskStatus } from "@/lib/constants/task-status";
 
 export interface TaskItem {
@@ -122,6 +123,14 @@ export function TaskCard({
   const showDeleteButton = onDelete && !isRunning;
   const isEditable = (task.status === "planned" || task.status === "queued") && !!onEdit;
 
+  // Status-contextual date: planned→createdAt, running→startedAt, completed/failed→finishedAt
+  const relevantDate =
+    task.status === "planned" || task.status === "queued"
+      ? task.createdAt
+      : task.status === "running"
+        ? task.usage?.startedAt ?? task.updatedAt
+        : task.usage?.finishedAt ?? task.updatedAt;
+
   return (
     <Card
       ref={setNodeRef}
@@ -244,7 +253,13 @@ export function TaskCard({
                   <Pencil className="h-3.5 w-3.5" />
                 </button>
               )}
-              <div className="flex-1" />
+              <span
+                className="flex items-center gap-1 text-xs text-muted-foreground tabular-nums truncate min-w-0 flex-1"
+                title={new Date(relevantDate).toLocaleString()}
+              >
+                <Clock className="h-3 w-3 shrink-0" />
+                {formatCompactDateTime(relevantDate)}
+              </span>
               {showDeleteButton && (
                 <button
                   type="button"
@@ -257,7 +272,15 @@ export function TaskCard({
               )}
             </>
           )
-        ) : null}
+        ) : (
+          <span
+            className="flex items-center gap-1 text-xs text-muted-foreground tabular-nums truncate min-w-0 flex-1"
+            title={new Date(relevantDate).toLocaleString()}
+          >
+            <Clock className="h-3 w-3 shrink-0" />
+            {formatCompactDateTime(relevantDate)}
+          </span>
+        )}
       </div>
     </Card>
   );

package/src/components/tasks/task-chip-bar.tsx

@@ -19,6 +19,8 @@ import {
   ArrowUp,
   ArrowDown,
   Minus,
+  CalendarClock,
+  CalendarCheck,
 } from "lucide-react";
 import { taskStatusVariant } from "@/lib/constants/status-colors";
 import { MAX_RESUME_COUNT } from "@/lib/constants/task-status";
@@ -172,6 +174,28 @@ export function TaskChipBar({
         >
           Updated {formatTimestamp(task.updatedAt)}
         </Badge>
+
+        {task.usage?.startedAt && (
+          <Badge
+            variant="outline"
+            className="text-xs font-normal gap-1"
+            title={new Date(task.usage.startedAt).toLocaleString()}
+          >
+            <CalendarClock className="h-3 w-3" />
+            Started {formatTimestamp(task.usage.startedAt)}
+          </Badge>
+        )}
+
+        {task.usage?.finishedAt && (
+          <Badge
+            variant="outline"
+            className="text-xs font-normal gap-1"
+            title={new Date(task.usage.finishedAt).toLocaleString()}
+          >
+            <CalendarCheck className="h-3 w-3" />
+            Finished {formatTimestamp(task.usage.finishedAt)}
+          </Badge>
+        )}
       </div>
 
       {/* Row 3: Relationship Links (only if any FK exists) */}

package/src/components/tasks/task-result-renderer.tsx

@@ -1,6 +1,6 @@
 import { Separator } from "@/components/ui/separator";
 import { LightMarkdown } from "@/components/shared/light-markdown";
-import { ExpandableResult } from "@/components/workflows/workflow-status-view";
+import { ExpandableResult } from "@/components/workflows/shared/step-result";
 
 interface TaskResultRendererProps {
   description: string | null;

package/src/components/workflows/delay-step-body.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Play } from "lucide-react";
+import { toast } from "sonner";
+import { formatDuration } from "@/lib/workflows/delay";
+
+/**
+ * Body content for a delay step row in the workflow status view. Renders
+ * three visual states keyed off the step's status:
+ *
+ *   - Pending (workflow hasn't reached this step yet): "Will wait 3d"
+ *   - Active delay (workflow paused, waiting): absolute resume time +
+ *     remaining duration + Resume Now button
+ *   - Completed (workflow has already passed this step): "Delayed 3d — completed"
+ *
+ * Countdown is static on mount/focus — no per-second ticking, because live
+ * aria-live updates would flood assistive tech users. Users needing a refresh
+ * can reload or refocus the page.
+ *
+ * Extracted from workflow-status-view.tsx during the TDR-031 router refactor
+ * so the non-loop subview can import it without a circular dependency on the
+ * thin router file.
+ */
+export function DelayStepBody({
+  workflowId,
+  delayDuration,
+  stepStatus,
+  resumeAt,
+}: {
+  workflowId: string;
+  delayDuration: string;
+  stepStatus: string;
+  resumeAt: number | null;
+}) {
+  const [resuming, setResuming] = useState(false);
+
+  const handleResumeNow = useCallback(async () => {
+    setResuming(true);
+    try {
+      const res = await fetch(`/api/workflows/${workflowId}/resume`, { method: "POST" });
+      if (res.status === 202) {
+        toast.success("Resume dispatched");
+      } else if (res.status === 409) {
+        toast.info("Workflow already resumed by scheduler");
+      } else {
+        const body = await res.json().catch(() => ({}));
+        toast.error(body.error ?? "Failed to resume workflow");
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to resume workflow");
+    } finally {
+      setResuming(false);
+    }
+  }, [workflowId]);
+
+  if (stepStatus === "completed") {
+    return (
+      <p className="text-xs text-muted-foreground mt-0.5">
+        Delayed {delayDuration} — completed
+      </p>
+    );
+  }
+
+  if (stepStatus === "delayed" && resumeAt) {
+    const resumeDate = new Date(resumeAt);
+    const remainingMs = Math.max(0, resumeAt - Date.now());
+    const remainingLabel =
+      remainingMs < 60_000
+        ? "less than a minute"
+        : formatDuration(Math.round(remainingMs / 60_000) * 60_000);
+    return (
+      <div className="mt-1 space-y-2">
+        <p className="text-xs text-status-warning">
+          Resumes{" "}
+          <time dateTime={resumeDate.toISOString()}>
+            {resumeDate.toLocaleString(undefined, {
+              weekday: "short",
+              month: "short",
+              day: "numeric",
+              hour: "numeric",
+              minute: "2-digit",
+              timeZoneName: "short",
+            })}
+          </time>{" "}
+          <span className="text-muted-foreground">({remainingLabel} remaining)</span>
+        </p>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={handleResumeNow}
+          disabled={resuming}
+          aria-label="Resume workflow now"
+        >
+          <Play className="h-3 w-3 mr-1" />
+          {resuming ? "Resuming..." : "Resume Now"}
+        </Button>
+      </div>
+    );
+  }
+
+  // Pending / upcoming delay — workflow hasn't reached this step yet
+  return (
+    <p className="text-xs text-muted-foreground mt-0.5">
+      Will wait {delayDuration}
+    </p>
+  );
+}

package/src/components/workflows/hooks/use-workflow-status.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { WorkflowStatusResponse } from "@/lib/workflows/types";
+
+/**
+ * Polling hook for `GET /api/workflows/[id]/status`.
+ *
+ * Owns the fetch, the 3-second interval, cancellation on unmount, and
+ * re-subscription when `workflowId` changes. Exposes `setData` so callers can
+ * apply optimistic updates (e.g. flipping a step to "running" immediately when
+ * Execute is clicked) without racing the next poll tick.
+ *
+ * Returns `WorkflowStatusResponse | null` — narrowing on `data.pattern` is the
+ * caller's job per TDR-031. This hook intentionally does not narrow for
+ * consumers; each pattern-specific subview handles its own arm.
+ */
+export function useWorkflowStatus(workflowId: string): {
+  data: WorkflowStatusResponse | null;
+  setData: (updater: (current: WorkflowStatusResponse | null) => WorkflowStatusResponse | null) => void;
+  refetch: () => Promise<void>;
+} {
+  const [data, setDataInternal] = useState<WorkflowStatusResponse | null>(null);
+
+  const refetch = useCallback(async () => {
+    const res = await fetch(`/api/workflows/${workflowId}/status`);
+    if (res.ok) {
+      const json = (await res.json()) as WorkflowStatusResponse;
+      setDataInternal(json);
+    }
+  }, [workflowId]);
+
+  useEffect(() => {
+    // Reset data when the workflowId changes so the old workflow's state
+    // never briefly shows while the new one is fetching.
+    setDataInternal(null);
+    refetch();
+    const interval = setInterval(refetch, 3000);
+    return () => clearInterval(interval);
+  }, [refetch]);
+
+  const setData = useCallback(
+    (updater: (current: WorkflowStatusResponse | null) => WorkflowStatusResponse | null) => {
+      setDataInternal((prev) => updater(prev));
+    },
+    []
+  );
+
+  return { data, setData, refetch };
+}

package/src/components/workflows/loop-status-view.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { ExpandableResult } from "./workflow-status-view";
+import { ExpandableResult } from "./shared/step-result";
 import {
   CheckCircle,
   Circle,

package/src/components/workflows/shared/step-result.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { FileText } from "lucide-react";
+import { PROSE_NOTIFICATION } from "@/lib/constants/prose-styles";
+import type { WorkflowStatusDocument } from "@/lib/workflows/types";
+
+/**
+ * Expandable step result with gradient fade progressive disclosure.
+ * Extracted from the legacy workflow-status-view god component so it can be
+ * reused by pattern-specific subviews and LoopStatusView without a circular
+ * import.
+ */
+export function ExpandableResult({ result }: { result: string }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!result) return null;
+
+  return (
+    <div className="mt-2">
+      <div
+        className={`${PROSE_NOTIFICATION} ${
+          expanded
+            ? "max-h-96 overflow-auto"
+            : result.length > 200
+              ? "max-h-20 overflow-hidden mask-fade-bottom"
+              : ""
+        }`}
+      >
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{result}</ReactMarkdown>
+      </div>
+      {result.length > 200 && (
+        <button
+          type="button"
+          className="mt-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Document list for a single step or parent task — renders a labeled cluster
+ * of links to document detail pages.
+ */
+export function DocumentList({
+  docs,
+  label,
+}: {
+  docs: WorkflowStatusDocument[];
+  label: string;
+}) {
+  if (docs.length === 0) return null;
+
+  return (
+    <div className="mt-3">
+      <p className="text-xs font-medium text-muted-foreground mb-1.5">{label}</p>
+      <div className="space-y-1">
+        {docs.map((doc) => (
+          <Link
+            key={doc.id}
+            href={`/documents/${doc.id}`}
+            className="flex items-center gap-2 text-xs text-brand-blue hover:underline"
+          >
+            <FileText className="h-3 w-3 shrink-0" />
+            {doc.originalName}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/workflows/shared/workflow-header.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Play,
+  Pencil,
+  Copy,
+  RotateCcw,
+  Trash2,
+  FolderKanban,
+} from "lucide-react";
+import { workflowStatusVariant, patternLabels } from "@/lib/constants/status-colors";
+import { IconCircle, getWorkflowIconFromName } from "@/lib/constants/card-icons";
+import type { WorkflowStatusResponse } from "@/lib/workflows/types";
+
+/**
+ * Pattern-agnostic header card for the workflow detail page. Renders the
+ * workflow name, pattern label, project/run badges, status badge, and the
+ * action buttons (Execute, Edit, Clone, Re-run, Delete). Each subview passes
+ * callbacks and the narrowed-arm `data` object.
+ *
+ * This component is deliberately read-only with respect to polling state —
+ * subviews own their own `executing` state so the Execute button can show
+ * the "Starting..." label without a round-trip through the router.
+ */
+export function WorkflowHeader({
+  data,
+  executing,
+  canExecute,
+  onExecute,
+  onRerun,
+  onDelete,
+}: {
+  data: WorkflowStatusResponse;
+  executing: boolean;
+  /** Subviews decide when Execute makes sense (e.g. loop workflows hide it in favour of the loop's own start/pause controls). */
+  canExecute: boolean;
+  onExecute: () => void;
+  onRerun: () => void;
+  onDelete: () => void;
+}) {
+  const router = useRouter();
+  const hasDefinition = !!data.definition;
+
+  return (
+    <CardHeader>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <IconCircle
+            icon={getWorkflowIconFromName(data.name, data.pattern).icon}
+            colors={getWorkflowIconFromName(data.name, data.pattern).colors}
+          />
+          <div>
+            <CardTitle>{data.name}</CardTitle>
+            <p className="text-sm text-muted-foreground mt-1">
+              {patternLabels[data.pattern] ?? data.pattern}
+            </p>
+            <div className="flex items-center gap-2 mt-1">
+              {data.projectId && (
+                <Badge
+                  variant="outline"
+                  className="text-xs cursor-pointer hover:bg-accent gap-1"
+                  onClick={() => router.push(`/projects/${data.projectId}`)}
+                >
+                  <FolderKanban className="h-3 w-3" />
+                  Project
+                </Badge>
+              )}
+              {data.runNumber != null && data.runNumber > 0 && (
+                <Badge variant="outline" className="text-xs font-normal">
+                  Run #{data.runNumber}
+                </Badge>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant={workflowStatusVariant[data.status] ?? "secondary"}>
+            {data.status}
+          </Badge>
+
+          {canExecute && (data.status === "draft" || data.status === "paused") && (
+            <Button size="sm" onClick={onExecute} disabled={executing}>
+              <Play className="h-3 w-3 mr-1" />
+              {executing ? "Starting..." : "Execute"}
+            </Button>
+          )}
+
+          {["draft", "completed", "failed"].includes(data.status) && hasDefinition && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => router.push(`/workflows/${data.id}/edit`)}
+            >
+              <Pencil className="h-3.5 w-3.5 mr-1.5" />
+              Edit
+            </Button>
+          )}
+
+          {hasDefinition && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => router.push(`/workflows/${data.id}/edit?clone=true`)}
+            >
+              <Copy className="h-3.5 w-3.5 mr-1.5" />
+              Clone
+            </Button>
+          )}
+
+          {(data.status === "completed" || data.status === "failed") && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRerun}
+              disabled={executing}
+            >
+              <RotateCcw className="h-3.5 w-3.5 mr-1.5" />
+              Re-run
+            </Button>
+          )}
+
+          {data.status !== "active" && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={onDelete}
+            >
+              <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+              Delete
+            </Button>
+          )}
+        </div>
+      </div>
+    </CardHeader>
+  );
+}

package/src/components/workflows/shared/workflow-loading-skeleton.tsx

@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state shown by the workflow detail router while the first poll
+ * tick is in flight. Extracted from the router so the router itself stays
+ * within its ≤80-line budget per TDR-031.
+ */
+export function WorkflowLoadingSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <Skeleton className="h-6 w-48 mb-2" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+          <Skeleton className="h-6 w-16 rounded-full" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-start gap-3">
+              <Skeleton className="h-4 w-4 rounded-full mt-0.5" />
+              <div className="flex-1">
+                <Skeleton className="h-4 w-32 mb-1" />
+                <Skeleton className="h-3 w-full" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}