stagent 0.1.11 → 0.1.13

package/src/components/tasks/task-detail-view.tsx

@@ -2,39 +2,17 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Play, Square, RotateCcw, ArrowRight, FastForward, Trash2, Pencil } from "lucide-react";
 import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/shared/confirm-dialog";
-import { ContentPreview } from "./content-preview";
 import { TaskAttachments } from "./task-attachments";
-import { formatTimestamp } from "@/lib/utils/format-timestamp";
-import { MAX_RESUME_COUNT } from "@/lib/constants/task-status";
-import { taskStatusVariant } from "@/lib/constants/status-colors";
-import type { TaskItem } from "./task-card";
+import { TaskChipBar } from "./task-chip-bar";
+import { TaskBentoGrid } from "./task-bento-grid";
+import { TaskResultRenderer } from "./task-result-renderer";
 import { TaskEditDialog } from "./task-edit-dialog";
+import type { TaskItem } from "./task-card";
 import type { DocumentRow } from "@/lib/db/schema";
 
-function detectContentType(content: string): "text" | "markdown" | "code" | "json" | "unknown" {
-  if (content.startsWith("{") || content.startsWith("[")) {
-    try { JSON.parse(content); return "json"; } catch { /* not json */ }
-  }
-  if (content.includes("```") || content.includes("# ") || content.includes("**")) return "markdown";
-  if (content.includes("function ") || content.includes("const ") || content.includes("import ")) return "code";
-  return "text";
-}
-
-const priorityLabels: Record<number, string> = {
-  0: "P0 - Critical",
-  1: "P1 - High",
-  2: "P2 - Medium",
-  3: "P3 - Low",
-};
-
 interface TaskDetailViewProps {
   taskId: string;
   initialTask?: TaskItem;
@@ -76,8 +54,6 @@ export function TaskDetailView({ taskId, initialTask }: TaskDetailViewProps) {
   }, [taskId, fetchDocs]);
 
   useEffect(() => {
-    // If server provided initial data, only fetch supplementary data (docs)
-    // and skip the redundant task refresh
     if (!initialTask) refresh();
     fetchDocs();
   }, [refresh, fetchDocs, initialTask]);
@@ -201,8 +177,8 @@ export function TaskDetailView({ taskId, initialTask }: TaskDetailViewProps) {
   if (!loaded) {
     return (
       <div className="space-y-4">
-        <Skeleton className="h-8 w-64" />
-        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-20 w-full" />
         <Skeleton className="h-48 w-full" />
       </div>
     );
@@ -216,174 +192,50 @@ export function TaskDetailView({ taskId, initialTask }: TaskDetailViewProps) {
   const outputDocs = docs.filter((doc) => doc.direction === "output");
 
   return (
-    <div className="space-y-6" aria-live="polite">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">{task.title}</h1>
-          <div className="flex items-center gap-2 mt-1">
-            <Badge variant={taskStatusVariant[task.status] ?? "secondary"}>
-              {task.status}
-            </Badge>
-            <span className="text-sm text-muted-foreground">
-              {priorityLabels[task.priority] ?? `P${task.priority}`}
-            </span>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          {(task.status === "planned" || task.status === "queued") && (
-            <Button size="sm" variant="outline" onClick={() => setEditOpen(true)} disabled={loading}>
-              <Pencil className="h-3.5 w-3.5 mr-1" />
-              Edit
-            </Button>
-          )}
-          {task.status === "planned" && (
-            <Button size="sm" onClick={() => handleStatusChange("queued")} disabled={loading}>
-              <ArrowRight className="h-3.5 w-3.5 mr-1" />
-              {loading ? "Queueing..." : "Queue"}
-            </Button>
-          )}
-          {task.status === "queued" && (
-            <Button size="sm" onClick={handleExecute} disabled={loading}>
-              <Play className="h-3.5 w-3.5 mr-1" />
-              {loading ? "Starting..." : "Run"}
-            </Button>
-          )}
-          {task.status === "running" && (
-            <Button
-              size="sm"
-              variant="destructive"
-              onClick={() => setConfirmCancel(true)}
-              disabled={loading}
-            >
-              <Square className="h-3.5 w-3.5 mr-1" />
-              {loading ? "Cancelling..." : "Cancel"}
-            </Button>
-          )}
-          {(task.status === "failed" || task.status === "cancelled") && (
-            <>
-              {task.sessionId && task.resumeCount < MAX_RESUME_COUNT && (
-                <Button size="sm" onClick={handleResume} disabled={loading}>
-                  <FastForward className="h-3.5 w-3.5 mr-1" />
-                  {loading ? "Resuming..." : "Resume"}
-                </Button>
-              )}
-              <Button
-                size="sm"
-                variant={task.sessionId ? "outline" : "default"}
-                onClick={() => handleStatusChange("queued")}
-                disabled={loading}
-              >
-                <RotateCcw className="h-3.5 w-3.5 mr-1" />
-                {loading ? "Retrying..." : "Retry"}
-              </Button>
-            </>
-          )}
-          {task.status !== "running" && (
-            <Button
-              size="sm"
-              variant="ghost"
-              className="text-muted-foreground hover:text-destructive"
-              onClick={() => setConfirmDelete(true)}
-              disabled={loading}
-            >
-              <Trash2 className="h-3.5 w-3.5 mr-1" />
-              Delete
-            </Button>
-          )}
-        </div>
-      </div>
+    <div className="space-y-4" aria-live="polite">
+      {error && <p className="text-sm text-destructive">{error}</p>}
 
-      {error && (
-        <p className="text-sm text-destructive">{error}</p>
-      )}
+      <TaskChipBar
+        task={task}
+        loading={loading}
+        onEdit={() => setEditOpen(true)}
+        onQueue={() => handleStatusChange("queued")}
+        onRun={handleExecute}
+        onCancel={() => setConfirmCancel(true)}
+        onResume={handleResume}
+        onRetry={() => handleStatusChange("queued")}
+        onDelete={() => setConfirmDelete(true)}
+      />
 
-      {/* Description */}
-      {task.description && (
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">Description</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground whitespace-pre-wrap">
-              {task.description}
-            </p>
-          </CardContent>
-        </Card>
-      )}
+      <TaskBentoGrid task={task} docs={docs} />
 
-      {/* Agent Info */}
-      {(task.assignedAgent || task.agentProfile) && (
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">Agent</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-1">
-            {task.assignedAgent && (
-              <p className="text-sm text-muted-foreground">{task.assignedAgent}</p>
-            )}
-            {task.agentProfile && (
-              <p className="text-sm text-muted-foreground">
-                Profile: {task.agentProfile}
-              </p>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Documents */}
       {docs.length > 0 && (
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              Documents ({docs.length})
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-5">
-            {inputDocs.length > 0 && (
-              <TaskAttachments
-                documents={inputDocs}
-                title={`Input Attachments (${inputDocs.length})`}
-                onDeleted={fetchDocs}
-              />
-            )}
-            {outputDocs.length > 0 && (
-              <TaskAttachments
-                documents={outputDocs}
-                title={`Generated Outputs (${outputDocs.length})`}
-                onDeleted={fetchDocs}
-              />
-            )}
-          </CardContent>
-        </Card>
+        <div className="surface-card-muted rounded-lg p-4 space-y-4">
+          {inputDocs.length > 0 && (
+            <TaskAttachments
+              documents={inputDocs}
+              title={`Input Attachments (${inputDocs.length})`}
+              onDeleted={fetchDocs}
+            />
+          )}
+          {outputDocs.length > 0 && (
+            <TaskAttachments
+              documents={outputDocs}
+              title={`Generated Outputs (${outputDocs.length})`}
+              onDeleted={fetchDocs}
+            />
+          )}
+        </div>
       )}
 
-      {/* Result / Error */}
-      {task.result && (
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {task.status === "failed" ? "Error" : "Result"}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            {task.status === "failed" ? (
-              <pre className="text-xs text-muted-foreground bg-muted p-3 rounded-md overflow-auto max-h-60 whitespace-pre-wrap">
-                {task.result}
-              </pre>
-            ) : (
-              <ContentPreview content={task.result} contentType={detectContentType(task.result)} />
-            )}
-          </CardContent>
-        </Card>
+      {(task.description || task.result) && (
+        <TaskResultRenderer
+          description={task.description}
+          result={task.result}
+          status={task.status}
+        />
       )}
 
-      {/* Timestamps */}
-      <div className="text-xs text-muted-foreground">
-        <p>Created: {formatTimestamp(task.createdAt)}</p>
-        <p>Updated: {formatTimestamp(task.updatedAt)}</p>
-      </div>
-
       <ConfirmDialog
         open={confirmCancel}
         onOpenChange={setConfirmCancel}

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

@@ -0,0 +1,33 @@
+import { Separator } from "@/components/ui/separator";
+import { LightMarkdown } from "@/components/shared/light-markdown";
+import { ExpandableResult } from "@/components/workflows/workflow-status-view";
+
+interface TaskResultRendererProps {
+  description: string | null;
+  result: string | null;
+  status: string;
+}
+
+export function TaskResultRenderer({ description, result, status }: TaskResultRendererProps) {
+  if (!description && !result) return null;
+
+  return (
+    <div className="prose-reader-surface">
+      {description && (
+        <LightMarkdown content={description} textSize="sm" />
+      )}
+      {description && result && <Separator className="my-4" />}
+      {result && (
+        status === "failed" ? (
+          <pre className="text-xs text-destructive bg-destructive/5 p-3 rounded-md overflow-auto max-h-60 whitespace-pre-wrap">
+            {result}
+          </pre>
+        ) : (
+          <div className="max-h-[70vh] overflow-y-auto">
+            <ExpandableResult result={result} />
+          </div>
+        )
+      )}
+    </div>
+  );
+}

package/src/components/workflows/blueprint-gallery.tsx

@@ -11,6 +11,7 @@ import { EmptyState } from "@/components/shared/empty-state";
 import { Button } from "@/components/ui/button";
 import { Search, Layers, Plus } from "lucide-react";
 import { patternLabels } from "@/lib/constants/status-colors";
+import { IconCircle, getWorkflowIconFromName } from "@/lib/constants/card-icons";
 import type { WorkflowBlueprint } from "@/lib/workflows/blueprints/types";
 
 const difficultyColors: Record<string, string> = {
@@ -114,19 +115,25 @@ export function BlueprintGallery() {
               }}
             >
               <CardHeader className="pb-1">
-                <div className="flex items-center justify-between">
-                  <CardTitle className="text-sm font-medium">
-                    {bp.name}
-                  </CardTitle>
-                  <div className="flex items-center gap-1.5">
-                    <Badge variant={bp.domain === "work" ? "default" : "secondary"}>
-                      {bp.domain}
-                    </Badge>
-                    {bp.difficulty && (
-                      <Badge variant="outline" className={`text-xs ${difficultyColors[bp.difficulty] ?? ""}`}>
-                        {bp.difficulty}
+                <div className="flex items-center gap-3">
+                  <IconCircle
+                    icon={getWorkflowIconFromName(bp.name, bp.pattern).icon}
+                    colors={getWorkflowIconFromName(bp.name, bp.pattern).colors}
+                  />
+                  <div className="flex min-w-0 flex-1 items-center justify-between">
+                    <CardTitle className="truncate text-sm font-medium">
+                      {bp.name}
+                    </CardTitle>
+                    <div className="flex shrink-0 items-center gap-1.5">
+                      <Badge variant={bp.domain === "work" ? "default" : "secondary"}>
+                        {bp.domain}
                       </Badge>
-                    )}
+                      {bp.difficulty && (
+                        <Badge variant="outline" className={`text-xs ${difficultyColors[bp.difficulty] ?? ""}`}>
+                          {bp.difficulty}
+                        </Badge>
+                      )}
+                    </div>
                   </div>
                 </div>
               </CardHeader>

package/src/components/workflows/blueprint-preview.tsx

@@ -19,6 +19,7 @@ import {
 import { Loader2, Play } from "lucide-react";
 import { toast } from "sonner";
 import { patternLabels } from "@/lib/constants/status-colors";
+import { IconCircle, getWorkflowIconFromName } from "@/lib/constants/card-icons";
 import type { WorkflowBlueprint, BlueprintVariable } from "@/lib/workflows/blueprints/types";
 
 interface BlueprintPreviewProps {
@@ -76,7 +77,13 @@ export function BlueprintPreview({
     <div className="space-y-6 max-w-2xl">
       {/* Header */}
       <div>
-        <h1 className="text-2xl font-bold tracking-tight">{blueprint.name}</h1>
+        <div className="flex items-center gap-3">
+          <IconCircle
+            icon={getWorkflowIconFromName(blueprint.name, blueprint.pattern).icon}
+            colors={getWorkflowIconFromName(blueprint.name, blueprint.pattern).colors}
+          />
+          <h1 className="text-2xl font-bold tracking-tight">{blueprint.name}</h1>
+        </div>
         <p className="text-sm text-muted-foreground mt-1">{blueprint.description}</p>
         <div className="flex flex-wrap gap-1.5 mt-3">
           <Badge variant={blueprint.domain === "work" ? "default" : "secondary"}>

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

@@ -3,6 +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 {
   CheckCircle,
   Circle,
@@ -233,10 +234,7 @@ export function LoopStatusView({
                         <p className="text-xs text-destructive">{iter.error}</p>
                       )}
                       {iter.result && (
-                        <p className="text-xs text-muted-foreground whitespace-pre-wrap line-clamp-6">
-                          {iter.result.slice(0, 1000)}
-                          {iter.result.length > 1000 ? "..." : ""}
-                        </p>
+                        <ExpandableResult result={iter.result} />
                       )}
                       {iter.taskId && (
                         <a

package/src/components/workflows/swarm-dashboard.tsx

@@ -5,6 +5,7 @@ import { Brain, GitBranch, MessageSquareMore, RotateCcw } from "lucide-react";
 import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { ExpandableResult } from "./workflow-status-view";
 import type { SwarmConfig } from "@/lib/workflows/types";
 
 interface StepWithState {
@@ -101,9 +102,7 @@ export function SwarmDashboard({
               <p className="text-xs text-destructive">{step.state.error}</p>
             )}
             {step.state.result && step.state.status === "completed" && (
-              <p className="text-xs text-muted-foreground line-clamp-4">
-                {step.state.result.slice(0, 320)}
-              </p>
+              <ExpandableResult result={step.state.result} />
             )}
             {canRetry && (
               <Button

package/src/components/workflows/workflow-confirmation-view.tsx

@@ -188,11 +188,6 @@ export function WorkflowConfirmationView({
           priority,
           assignedAgent: assignedAgent || undefined,
           executeImmediately,
-          parentTask: {
-            title: steps[0].title,
-            description: steps[0].description,
-            agentProfile: steps[0].profile === "auto" ? undefined : steps[0].profile,
-          },
         }),
       });
 
@@ -205,8 +200,8 @@ export function WorkflowConfirmationView({
       const data = await res.json();
       toast.success(
         executeImmediately
-          ? `Task created with workflow (${data.taskIds.length} steps)`
-          : `Task created with draft workflow (${data.taskIds.length} steps)`,
+          ? `Workflow started (${data.taskIds.length} steps)`
+          : `Workflow created as draft (${data.taskIds.length} steps)`,
         {
           action: {
             label: "View workflow",

package/src/components/workflows/workflow-full-output.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Copy, Download, FileText } from "lucide-react";
+import { toast } from "sonner";
+import { PROSE_READER } from "@/lib/constants/prose-styles";
+
+interface StepOutput {
+  name: string;
+  result: string;
+}
+
+interface WorkflowFullOutputProps {
+  workflowName: string;
+  steps: StepOutput[];
+}
+
+export function WorkflowFullOutput({ workflowName, steps }: WorkflowFullOutputProps) {
+  const completedSteps = steps.filter((s) => s.result);
+
+  if (completedSteps.length === 0) return null;
+
+  const fullMarkdown = completedSteps
+    .map((step) => `## ${step.name}\n\n${step.result}`)
+    .join("\n\n---\n\n");
+
+  function copyAll() {
+    navigator.clipboard.writeText(fullMarkdown);
+    toast.success("Full output copied");
+  }
+
+  function downloadAll() {
+    const blob = new Blob([fullMarkdown], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${workflowName.replace(/\s+/g, "-").toLowerCase()}-output.md`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FileText className="h-4 w-4 text-muted-foreground" />
+            <CardTitle className="text-base">Full Output</CardTitle>
+          </div>
+          <div className="flex gap-1">
+            <Button variant="ghost" size="sm" onClick={copyAll}>
+              <Copy className="h-3 w-3 mr-1" />
+              Copy All
+            </Button>
+            <Button variant="ghost" size="sm" onClick={downloadAll}>
+              <Download className="h-3 w-3 mr-1" />
+              Download .md
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="prose-reader-surface space-y-6">
+          {completedSteps.map((step, i) => (
+            <div key={i}>
+              {i > 0 && <hr className="border-border" />}
+              <h3 className="text-sm font-semibold mb-3">{step.name}</h3>
+              <div className={PROSE_READER}>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{step.result}</ReactMarkdown>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/workflows/workflow-kanban-card.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Workflow, Loader2 } from "lucide-react";
+import { workflowStatusVariant, patternLabels } from "@/lib/constants/status-colors";
+
+export interface WorkflowKanbanItem {
+  type: "workflow";
+  id: string;
+  name: string;
+  status: string;
+  pattern: string;
+  projectName?: string;
+  stepProgress: { current: number; total: number };
+  currentStepName?: string;
+  createdAt: string;
+}
+
+interface WorkflowKanbanCardProps {
+  workflow: WorkflowKanbanItem;
+}
+
+const statusStripBg: Record<string, string> = {
+  draft: "bg-muted/40 border-t-border/30",
+  active: "bg-status-running/8 border-t-status-running/15",
+  completed: "bg-status-completed/10 border-t-status-completed/20",
+  failed: "bg-status-failed/10 border-t-status-failed/20",
+  paused: "bg-status-warning/8 border-t-status-warning/15",
+};
+
+export function WorkflowKanbanCard({ workflow }: WorkflowKanbanCardProps) {
+  const isActive = workflow.status === "active";
+  const isFailed = workflow.status === "failed";
+  const progressPct =
+    workflow.stepProgress.total > 0
+      ? (workflow.stepProgress.current / workflow.stepProgress.total) * 100
+      : 0;
+
+  return (
+    <Link href={`/workflows/${workflow.id}`} className="block">
+      <Card
+        role="button"
+        aria-label={`${workflow.name}, ${patternLabels[workflow.pattern] ?? workflow.pattern}, ${workflow.status}`}
+        className={`surface-card cursor-pointer transition-shadow hover:shadow-md group overflow-hidden py-0 gap-0 ${
+          isFailed
+            ? "border-l-4 border-l-destructive"
+            : isActive
+              ? "border-l-4 border-l-primary"
+              : ""
+        }`}
+      >
+        <div className="p-3">
+          <div className="flex items-start gap-2">
+            <Workflow
+              className={`mt-0.5 h-4 w-4 shrink-0 ${
+                isFailed ? "text-destructive" : "text-primary"
+              }`}
+              aria-hidden="true"
+            />
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium line-clamp-2">{workflow.name}</p>
+              {workflow.projectName && (
+                <p className="text-xs text-muted-foreground mt-0.5 truncate">
+                  {workflow.projectName}
+                </p>
+              )}
+              <div className="flex items-center gap-2 mt-1.5">
+                <Badge variant="outline" className="text-xs gap-1">
+                  {patternLabels[workflow.pattern] ?? workflow.pattern}
+                </Badge>
+                {workflow.stepProgress.total > 0 && (
+                  <span className="text-xs text-muted-foreground">
+                    {workflow.stepProgress.current}/{workflow.stepProgress.total}
+                  </span>
+                )}
+              </div>
+
+              {/* Progress bar */}
+              {workflow.stepProgress.total > 0 && (
+                <div className="mt-2 h-1.5 w-full rounded-full bg-muted overflow-hidden">
+                  <div
+                    className={`h-full rounded-full transition-all ${
+                      isFailed ? "bg-destructive" : "bg-primary"
+                    }`}
+                    style={{ width: `${progressPct}%` }}
+                  />
+                </div>
+              )}
+
+              {/* Current step indicator */}
+              {isActive && workflow.currentStepName && (
+                <div className="flex items-center gap-1 mt-1.5">
+                  <Loader2 className="h-3 w-3 animate-spin text-primary shrink-0" />
+                  <span className="text-xs text-muted-foreground truncate">
+                    {workflow.currentStepName}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Status strip */}
+        <div className={`flex items-center h-7 px-3 border-t transition-colors ${statusStripBg[workflow.status] ?? statusStripBg.draft}`}>
+          <Badge
+            variant={workflowStatusVariant[workflow.status] ?? "secondary"}
+            className="text-[11px] h-5"
+          >
+            {workflow.status}
+          </Badge>
+          <div className="flex-1" />
+          <span className="text-[11px] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
+            View →
+          </span>
+        </div>
+      </Card>
+    </Link>
+  );
+}