stagent 0.1.11 → 0.1.13

package/src/components/shared/light-markdown.tsx

@@ -0,0 +1,134 @@
+import { type ReactNode } from "react";
+
+interface LightMarkdownProps {
+  content: string;
+  className?: string;
+  maxHeight?: string;
+  lineClamp?: number;
+  textSize?: "xs" | "sm";
+  stripBracketTags?: boolean;
+}
+
+/**
+ * Lightweight markdown renderer for short agent output.
+ * Handles: headers, bullet lists, paragraphs, **bold**, `code`.
+ * For full markdown (tables, code fences, GFM), use ReactMarkdown instead.
+ */
+export function LightMarkdown({
+  content,
+  className = "",
+  maxHeight,
+  lineClamp,
+  textSize = "xs",
+  stripBracketTags = false,
+}: LightMarkdownProps) {
+  const sizeClass = textSize === "sm" ? "text-sm" : "text-xs";
+
+  const blocks = content.split(/\n{2,}/);
+
+  const rendered = blocks.map((block, i) => {
+    let text = block.trim();
+    if (!text) return null;
+
+    if (stripBracketTags) {
+      text = text.replace(/\s*\[.*?\]\s*/g, " ").trim();
+    }
+
+    // Header: ### Title
+    const headerMatch = text.match(/^(#{1,4})\s+(.+)/);
+    if (headerMatch) {
+      return (
+        <p key={i} className="font-semibold text-foreground">
+          {formatInline(headerMatch[2])}
+        </p>
+      );
+    }
+
+    // Bullet list: lines starting with - or *
+    const lines = text.split("\n");
+    const isList = lines.every(
+      (l) => /^\s*[-*]\s+/.test(l) || l.trim() === ""
+    );
+    if (isList && lines.some((l) => /^\s*[-*]\s+/.test(l))) {
+      return (
+        <ul key={i} className="list-disc pl-4 space-y-0.5 text-muted-foreground">
+          {lines
+            .filter((l) => /^\s*[-*]\s+/.test(l))
+            .map((l, j) => (
+              <li key={j}>{formatInline(l.replace(/^\s*[-*]\s+/, ""))}</li>
+            ))}
+        </ul>
+      );
+    }
+
+    // Paragraph
+    return (
+      <p key={i} className="leading-relaxed text-muted-foreground">
+        {formatInline(text)}
+      </p>
+    );
+  });
+
+  // Overflow / clamp styles
+  let containerClass = `${sizeClass} space-y-2 ${className}`;
+  const style: React.CSSProperties = {};
+
+  if (lineClamp) {
+    // Approximate: each "line" ~1.25rem at text-xs, ~1.5rem at text-sm
+    const lineHeight = textSize === "sm" ? 1.5 : 1.25;
+    style.maxHeight = `${lineClamp * lineHeight}rem`;
+    style.overflow = "hidden";
+  } else if (maxHeight) {
+    containerClass += ` ${maxHeight} overflow-auto`;
+  }
+
+  return (
+    <div className={containerClass} style={style}>
+      {rendered}
+    </div>
+  );
+}
+
+/** Format inline **bold** and `code` spans */
+function formatInline(text: string): ReactNode {
+  // Split on **bold** and `code` patterns
+  const parts: ReactNode[] = [];
+  const regex = /(\*\*(.+?)\*\*|`([^`]+)`)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    // Text before the match
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    if (match[2]) {
+      // **bold**
+      parts.push(
+        <strong key={match.index} className="font-semibold text-foreground">
+          {match[2]}
+        </strong>
+      );
+    } else if (match[3]) {
+      // `code`
+      parts.push(
+        <code
+          key={match.index}
+          className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]"
+        >
+          {match[3]}
+        </code>
+      );
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Remaining text
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  return parts.length === 1 ? parts[0] : parts;
+}

package/src/components/tasks/__tests__/kanban-board-accessibility.test.tsx

@@ -49,7 +49,7 @@ describe("kanban board accessibility", () => {
       />
     );
 
-    const announcement = screen.getByText("Showing 1 task on the kanban board.");
+    const announcement = screen.getByText("Showing 1 item on the kanban board.");
     const board = screen.getByRole("region", { name: "Kanban board" });
 
     expect(announcement).toHaveAttribute("aria-live", "polite");

package/src/components/tasks/ai-assist-panel.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Sparkles, Check, X, GitBranch } from "lucide-react";
+import { Sparkles, Check, X, GitBranch, Info } from "lucide-react";
 
 interface TaskSuggestion {
   title: string;
@@ -154,9 +154,14 @@ export function AIAssistPanel({
     );
   }
 
+  const showWorkflowCTA =
+    onCreateWorkflow &&
+    result.breakdown.length >= 2 &&
+    result.recommendedPattern !== "single";
+
   return (
-    <div className="pt-2 space-y-3">
-      {/* Header row — full width */}
+    <div className="p-4 space-y-4">
+      {/* Header row */}
       <div className="flex items-center gap-2 flex-wrap">
         <Sparkles className="h-4 w-4 text-primary" />
         <span className="text-sm font-medium">AI Suggestions</span>
@@ -171,86 +176,111 @@ export function AIAssistPanel({
         )}
       </div>
 
-      {/* Two-column grid for cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        {/* Improved description */}
-        <Card>
-          <CardContent className="p-3">
-            <div className="flex items-center justify-between mb-1">
-              <span className="text-xs font-medium text-muted-foreground">
-                Improved Description
-              </span>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-6 text-xs"
-                onClick={() => {
-                  onApplyDescription(result.improvedDescription);
-                  setDescriptionApplied(true);
-                }}
-                disabled={descriptionApplied}
-              >
-                {descriptionApplied ? (
-                  <><Check className="h-3 w-3 mr-1" /> Applied</>
-                ) : (
-                  "Apply"
-                )}
-              </Button>
+      {/* Improved description — full width */}
+      <Card>
+        <CardContent className="p-3">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-xs font-medium text-muted-foreground">
+              Improved Description
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 text-xs"
+              onClick={() => {
+                onApplyDescription(result.improvedDescription);
+                setDescriptionApplied(true);
+              }}
+              disabled={descriptionApplied}
+            >
+              {descriptionApplied ? (
+                <><Check className="h-3 w-3 mr-1" /> Applied</>
+              ) : (
+                "Apply"
+              )}
+            </Button>
+          </div>
+          <p className="text-sm">{result.improvedDescription}</p>
+        </CardContent>
+      </Card>
+
+      {/* Reasoning + Workflow CTA combined callout */}
+      {(result.reasoning || showWorkflowCTA) && (
+        <div className="rounded-md border bg-muted/50 p-3 space-y-2.5">
+          {result.reasoning && (
+            <div className="flex gap-2">
+              <Info className="h-3.5 w-3.5 mt-0.5 shrink-0 text-muted-foreground" />
+              <p className="text-xs text-muted-foreground">
+                {result.reasoning}
+                {result.complexity === "complex" && result.recommendedPattern !== "single"
+                  ? " Complex tasks benefit from workflow execution — each step builds on the previous result."
+                  : ""}
+              </p>
+            </div>
+          )}
+          {showWorkflowCTA && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="w-full justify-start h-auto py-2 border-primary/50 bg-background"
+              onClick={() => onCreateWorkflow(result)}
+            >
+              <div className="text-left flex-1">
+                <div className="flex items-center gap-1.5">
+                  <GitBranch className="h-3 w-3" />
+                  <span className="text-xs font-medium">Create as Workflow</span>
+                  <Badge variant="default" className="text-[10px] h-4 px-1">
+                    Recommended
+                  </Badge>
+                </div>
+                <div className="text-[11px] text-muted-foreground font-normal mt-0.5">
+                  Runs as {patternLabels[result.recommendedPattern]?.toLowerCase() ?? result.recommendedPattern} — each step receives prior output
+                </div>
+              </div>
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Breakdown as flat numbered list */}
+      {result.breakdown.length > 0 && (
+        <>
+          {/* "or" divider — only show when workflow CTA is present */}
+          {showWorkflowCTA && (
+            <div className="flex items-center gap-3">
+              <div className="flex-1 border-t" />
+              <span className="text-xs text-muted-foreground">or create as individual tasks</span>
+              <div className="flex-1 border-t" />
             </div>
-            <p className="text-sm">{result.improvedDescription}</p>
-          </CardContent>
-        </Card>
+          )}
 
-        {/* Task breakdown */}
-        {result.breakdown.length > 0 && (
-          <Card>
-            <CardContent className="p-3">
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-xs font-medium text-muted-foreground">
-                  Suggested Breakdown ({result.breakdown.length} sub-tasks)
+          <div className="space-y-2.5">
+            {result.breakdown.map((sub, i) => (
+              <div key={i} className="flex gap-2.5">
+                <span className="text-xs font-medium text-muted-foreground mt-0.5 shrink-0 w-4 text-right">
+                  {i + 1}.
                 </span>
-                <div className="flex gap-1">
-                  {onCreateWorkflow &&
-                    result.breakdown.length >= 2 &&
-                    result.recommendedPattern !== "single" && (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-6 text-xs"
-                      onClick={() => onCreateWorkflow(result)}
-                    >
-                      <GitBranch className="h-3 w-3 mr-1" />
-                      Workflow
-                    </Button>
-                  )}
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="h-6 text-xs"
-                    onClick={() => onCreateSubtasks(result.breakdown)}
-                  >
-                    Create All
-                  </Button>
+                <div className="min-w-0">
+                  <span className="text-sm font-medium">{sub.title}</span>
+                  <p className="text-xs text-muted-foreground">{sub.description}</p>
                 </div>
               </div>
-              <div className="max-h-60 overflow-y-auto space-y-1.5">
-                {result.breakdown.map((sub, i) => (
-                  <div key={i} className="text-sm">
-                    <span className="font-medium">{sub.title}</span>
-                    <p className="text-xs text-muted-foreground">{sub.description}</p>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
+            ))}
+          </div>
 
-      {/* Reasoning + Dismiss — full width */}
-      <p className="text-xs text-muted-foreground">{result.reasoning}</p>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={() => onCreateSubtasks(result.breakdown)}
+          >
+            Create {result.breakdown.length} Independent Tasks
+          </Button>
+        </>
+      )}
 
       <Button
         type="button"
@@ -260,7 +290,7 @@ export function AIAssistPanel({
           setResult(null);
           onResultChange?.(false);
         }}
-        className="w-full"
+        className="w-full text-muted-foreground"
       >
         <X className="h-3 w-3 mr-1" /> Dismiss
       </Button>

package/src/components/tasks/content-preview.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Copy, Download, Maximize2, Minimize2 } from "lucide-react";
 import { toast } from "sonner";
+import { PROSE_READER } from "@/lib/constants/prose-styles";
 
 interface ContentPreviewProps {
   content: string;
@@ -75,7 +76,7 @@ export function ContentPreview({ content, contentType }: ContentPreviewProps) {
             {content}
           </pre>
         ) : contentType === "markdown" ? (
-          <div className={`prose prose-sm dark:prose-invert max-w-none overflow-auto ${heightClass}`}>
+          <div className={`${PROSE_READER} overflow-auto ${heightClass}`}>
             <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
           </div>
         ) : (

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

@@ -31,6 +31,7 @@ import { EmptyBoard } from "./empty-board";
 import { ConfirmDialog } from "@/components/shared/confirm-dialog";
 import { COLUMN_ORDER, isValidDragTransition, type TaskStatus } from "@/lib/constants/task-status";
 import { usePersistedState } from "@/hooks/use-persisted-state";
+import type { WorkflowKanbanItem } from "@/components/workflows/workflow-kanban-card";
 
 type SortOrder = "priority" | "created-desc" | "created-asc" | "title-asc";
 
@@ -54,12 +55,34 @@ export function compareTasks(a: TaskItem, b: TaskItem, order: SortOrder): number
   }
 }
 
+/** Map workflow status to kanban column */
+function workflowStatusToColumn(status: string): TaskStatus {
+  switch (status) {
+    case "draft":
+    case "paused":
+      return "planned";
+    case "active":
+      return "running";
+    case "completed":
+      return "completed";
+    case "failed":
+      return "failed";
+    default:
+      return "planned";
+  }
+}
+
+export type KanbanItem =
+  | (TaskItem & { type?: "task" })
+  | WorkflowKanbanItem;
+
 interface KanbanBoardProps {
   initialTasks: TaskItem[];
+  initialWorkflows?: WorkflowKanbanItem[];
   projects: { id: string; name: string }[];
 }
 
-export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
+export function KanbanBoard({ initialTasks, initialWorkflows = [], projects }: KanbanBoardProps) {
   const dndId = useId();
   const router = useRouter();
   const [tasks, setTasks] = useState<TaskItem[]>(() => {
@@ -74,13 +97,16 @@ export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
       return initialTasks;
     }
   });
+  const [workflowItems] = useState<WorkflowKanbanItem[]>(initialWorkflows);
   const [exitingIds, setExitingIds] = useState<Set<string>>(new Set());
   const [activeTask, setActiveTask] = useState<TaskItem | null>(null);
   const [projectFilter, setProjectFilter] = usePersistedState("stagent-project-filter", "all");
   const [statusFilter, setStatusFilter] = useState("all");
   const [sortOrder, setSortOrder] = usePersistedState<SortOrder>("stagent-sort-order", "priority");
+
+  const totalItems = tasks.length + workflowItems.length;
   const [announcement, setAnnouncement] = useState(
-    `Showing ${initialTasks.length} task${initialTasks.length === 1 ? "" : "s"} on the kanban board.`
+    `Showing ${totalItems} item${totalItems === 1 ? "" : "s"} on the kanban board.`
   );
   const hasAnnouncedFilters = useRef(false);
 
@@ -144,21 +170,34 @@ export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
     return true;
   });
 
+  // Filter workflows by project and status (mapped to column)
+  const filteredWorkflows = workflowItems.filter((w) => {
+    if (projectFilter !== "all") {
+      // Workflows don't have projectId on the kanban item directly,
+      // but we pass projectName — filter by checking if name matches
+      // For now, skip project filter for workflows (they show in all)
+      // TODO: add projectId to WorkflowKanbanItem if needed
+    }
+    if (statusFilter !== "all" && workflowStatusToColumn(w.status) !== statusFilter) return false;
+    return true;
+  });
+
   useEffect(() => {
     if (!hasAnnouncedFilters.current) {
       hasAnnouncedFilters.current = true;
       return;
     }
 
+    const total = filteredTasks.length + filteredWorkflows.length;
     const projectName =
       projectFilter === "all"
         ? "all projects"
         : projects.find((project) => project.id === projectFilter)?.name ?? "the selected project";
     const statusName = statusFilter === "all" ? "all statuses" : statusFilter;
     setAnnouncement(
-      `Showing ${filteredTasks.length} task${filteredTasks.length === 1 ? "" : "s"} for ${projectName} with ${statusName}.`
+      `Showing ${total} item${total === 1 ? "" : "s"} for ${projectName} with ${statusName}.`
     );
-  }, [filteredTasks.length, projectFilter, projects, statusFilter]);
+  }, [filteredTasks.length, filteredWorkflows.length, projectFilter, projects, statusFilter]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
@@ -304,6 +343,7 @@ export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
 
   const sortedTasks = [...filteredTasks].sort((a, b) => compareTasks(a, b, sortOrder));
 
+  // Group tasks by column
   const groupedTasks = COLUMN_ORDER.reduce(
     (acc, status) => {
       acc[status] = sortedTasks.filter((t) => t.status === status);
@@ -312,6 +352,17 @@ export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
     {} as Record<TaskStatus, TaskItem[]>
   );
 
+  // Group workflows by mapped column
+  const groupedWorkflows = COLUMN_ORDER.reduce(
+    (acc, status) => {
+      acc[status] = filteredWorkflows.filter(
+        (w) => workflowStatusToColumn(w.status) === status
+      );
+      return acc;
+    },
+    {} as Record<TaskStatus, WorkflowKanbanItem[]>
+  );
+
   const filterBar = (
     <div className="flex items-center gap-2">
       {projects.length > 0 && (
@@ -365,7 +416,7 @@ export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
     </Link>
   );
 
-  if (tasks.length === 0) {
+  if (tasks.length === 0 && workflowItems.length === 0) {
     return (
       <div>
         <div className="flex items-center justify-between mb-6 gap-4 flex-wrap">
@@ -428,6 +479,7 @@ export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
                 key={status}
                 status={status}
                 tasks={groupedTasks[status]}
+                workflows={groupedWorkflows[status]}
                 exitingIds={exitingIds}
                 onTaskClick={handleTaskClick}
                 onAddTask={status === "planned" ? () => router.push("/tasks/new") : undefined}

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

@@ -7,6 +7,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Inbox, Plus, CheckSquare, Square, ArrowRight, Play, Trash2 } from "lucide-react";
 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";
 
 const columnLabels: Record<string, string> = {
@@ -20,6 +21,7 @@ const columnLabels: Record<string, string> = {
 export function KanbanColumn({
   status,
   tasks,
+  workflows = [],
   exitingIds,
   onTaskClick,
   onAddTask,
@@ -30,6 +32,7 @@ export function KanbanColumn({
 }: {
   status: TaskStatus;
   tasks: TaskItem[];
+  workflows?: WorkflowKanbanItem[];
   exitingIds?: Set<string>;
   onTaskClick: (task: TaskItem) => void;
   onAddTask?: () => void;
@@ -40,6 +43,7 @@ export function KanbanColumn({
 }) {
   const { setNodeRef, isOver } = useDroppable({ id: status });
   const label = columnLabels[status] ?? status;
+  const totalCount = tasks.length + workflows.length;
 
   const [selectMode, setSelectMode] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
@@ -120,12 +124,12 @@ export function KanbanColumn({
     ) : null;
 
   return (
-    <div className="group/col flex flex-col min-w-64 max-w-80 flex-1 shrink-0" role="group" aria-label={`${label} column, ${tasks.length} tasks`}>
+    <div className="group/col flex flex-col min-w-64 max-w-80 flex-1 shrink-0" role="group" aria-label={`${label} column, ${totalCount} items`}>
       {/* Column header */}
       <div className="flex items-center gap-2 mb-3 px-1">
         <h3 className="text-sm font-medium">{label}</h3>
         <Badge variant="secondary" className="text-xs">
-          {tasks.length}
+          {totalCount}
         </Badge>
         <div className="flex-1" />
         {canSelect && tasks.length > 0 && (
@@ -182,31 +186,38 @@ export function KanbanColumn({
       >
         <SortableContext items={tasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>
           <div className="space-y-2">
-            {tasks.length === 0 ? (
+            {totalCount === 0 ? (
               <div className="flex flex-col items-center justify-center h-full min-h-[120px] text-muted-foreground border-2 border-dashed border-border/50 rounded-lg bg-background/35">
                 <Inbox className="h-5 w-5 mb-1 opacity-40" />
-                <span className="text-xs">No tasks</span>
+                <span className="text-xs">No items</span>
               </div>
             ) : (
-              tasks.map((task) => {
-                const isExiting = exitingIds?.has(task.id);
-                return (
-                  <div
-                    key={task.id}
-                    className={isExiting ? "animate-card-exit pointer-events-none" : ""}
-                  >
-                    <TaskCard
-                      task={task}
-                      onClick={onTaskClick}
-                      selectionMode={selectMode}
-                      selected={selectedIds.has(task.id)}
-                      onSelect={handleSelect}
-                      onDelete={onDeleteTask}
-                      onEdit={onEditTask}
-                    />
-                  </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 (
+                    <div
+                      key={task.id}
+                      className={isExiting ? "animate-card-exit pointer-events-none" : ""}
+                    >
+                      <TaskCard
+                        task={task}
+                        onClick={onTaskClick}
+                        selectionMode={selectMode}
+                        selected={selectedIds.has(task.id)}
+                        onSelect={handleSelect}
+                        onDelete={onDeleteTask}
+                        onEdit={onEditTask}
+                      />
+                    </div>
+                  );
+                })}
+              </>
             )}
           </div>
         </SortableContext>