stagent 0.9.6 → 0.11.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,11 +10,15 @@ 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";
+import { getRuntimeCatalogEntry } from "@/lib/agents/runtime/catalog";
 
 const priorityConfig: Record<number, { icon: typeof ArrowUp; label: string }> = {
   0: { icon: ArrowUp, label: "P0 Critical" },
@@ -75,6 +79,7 @@ export function TaskBentoGrid({ task, docs }: TaskBentoGridProps) {
 
   const inputDocs = docs.filter((d) => d.direction === "input");
   const outputDocs = docs.filter((d) => d.direction === "output");
+  const modelId = task.effectiveModelId ?? usage?.modelId ?? null;
   const docSummary =
     inputDocs.length > 0 && outputDocs.length > 0
       ? `${inputDocs.length} in / ${outputDocs.length} out`
@@ -127,6 +132,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}
@@ -135,11 +156,19 @@ export function TaskBentoGrid({ task, docs }: TaskBentoGridProps) {
         />
       )}
 
-      {usage?.modelId && (
+      {task.effectiveRuntimeId && (
+        <TaskBentoCell
+          icon={Cpu}
+          label="Runtime Used"
+          value={getRuntimeCatalogEntry(task.effectiveRuntimeId as never).label}
+        />
+      )}
+
+      {modelId && (
         <TaskBentoCell
           icon={Cpu}
           label="Model"
-          value={<span className="text-sm font-semibold">{truncateModel(usage.modelId)}</span>}
+          value={<span className="text-sm font-semibold">{truncateModel(modelId)}</span>}
         />
       )}
 

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 {
@@ -16,6 +17,9 @@ export interface TaskItem {
   priority: number;
   assignedAgent: string | null;
   agentProfile: string | null;
+  effectiveRuntimeId?: string | null;
+  effectiveModelId?: string | null;
+  runtimeFallbackReason?: string | null;
   projectId: string | null;
   projectName?: string;
   workflowId: string | null;
@@ -122,6 +126,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 +256,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 +275,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,11 +19,14 @@ 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";
 import { formatTimestamp } from "@/lib/utils/format-timestamp";
 import type { TaskItem } from "./task-card";
+import { getRuntimeCatalogEntry } from "@/lib/agents/runtime/catalog";
 
 const priorityConfig: Record<number, { icon: typeof ArrowUp; label: string }> = {
   0: { icon: ArrowUp, label: "P0 Critical" },
@@ -57,6 +60,12 @@ export function TaskChipBar({
 }: TaskChipBarProps) {
   const priority = priorityConfig[task.priority] ?? priorityConfig[2];
   const PriorityIcon = priority.icon;
+  const requestedRuntimeLabel = task.assignedAgent
+    ? getRuntimeCatalogEntry(task.assignedAgent as never).label
+    : null;
+  const effectiveRuntimeLabel = task.effectiveRuntimeId
+    ? getRuntimeCatalogEntry(task.effectiveRuntimeId as never).label
+    : null;
 
   const hasRelationships = task.projectId || task.workflowId || task.scheduleId;
 
@@ -147,7 +156,29 @@ export function TaskChipBar({
         {task.assignedAgent && (
           <Badge variant="secondary" className="text-xs gap-1">
             <Bot className="h-3 w-3" />
-            {task.assignedAgent}
+            {requestedRuntimeLabel ?? task.assignedAgent}
+          </Badge>
+        )}
+
+        {task.effectiveRuntimeId &&
+          task.effectiveRuntimeId !== task.assignedAgent && (
+            <Badge
+              variant="outline"
+              className="text-xs gap-1 border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+              title={task.runtimeFallbackReason ?? undefined}
+            >
+              <Bot className="h-3 w-3" />
+              Ran on {effectiveRuntimeLabel ?? task.effectiveRuntimeId}
+            </Badge>
+          )}
+
+        {task.runtimeFallbackReason && (
+          <Badge
+            variant="outline"
+            className="text-xs border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+            title={task.runtimeFallbackReason}
+          >
+            Fallback applied
           </Badge>
         )}
 
@@ -172,6 +203,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>
+  );
+}