stagent 0.1.11 → 0.1.13

package/src/components/dashboard/activity-feed.tsx

@@ -73,9 +73,13 @@ export function ActivityFeed({ entries, hourlyActivity }: ActivityFeedProps) {
                       <span className="text-muted-foreground"> — {entry.taskTitle}</span>
                     )}
                   </p>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-xs text-muted-foreground" suppressHydrationWarning>
                     {new Date(entry.timestamp).toLocaleTimeString()}
-                    {entry.payload && ` · ${entry.payload.slice(0, 60)}${entry.payload.length > 60 ? "..." : ""}`}
+                    {entry.payload && (() => {
+                      const chars = Array.from(entry.payload);
+                      const truncated = chars.length > 60 ? chars.slice(0, 60).join("") + "..." : entry.payload;
+                      return ` · ${truncated}`;
+                    })()}
                   </p>
                 </div>
               </div>

package/src/components/dashboard/greeting.tsx

@@ -2,6 +2,7 @@ interface GreetingProps {
   runningCount: number;
   awaitingCount: number;
   failedCount: number;
+  activeWorkflows: number;
 }
 
 function getGreeting(): string {
@@ -11,9 +12,10 @@ function getGreeting(): string {
   return "Good evening";
 }
 
-export function Greeting({ runningCount, awaitingCount, failedCount }: GreetingProps) {
+export function Greeting({ runningCount, awaitingCount, failedCount, activeWorkflows }: GreetingProps) {
   const parts: string[] = [];
   if (runningCount > 0) parts.push(`${runningCount} task${runningCount !== 1 ? "s" : ""} running`);
+  if (activeWorkflows > 0) parts.push(`${activeWorkflows} workflow${activeWorkflows !== 1 ? "s" : ""} active`);
   if (awaitingCount > 0) parts.push(`${awaitingCount} awaiting your review`);
   if (failedCount > 0) parts.push(`${failedCount} failed task${failedCount !== 1 ? "s" : ""} to address`);
 

package/src/components/dashboard/priority-queue.tsx

@@ -4,8 +4,8 @@ import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { AlertTriangle, Clock, Shield, ArrowRight } from "lucide-react";
-import { taskStatusVariant } from "@/lib/constants/status-colors";
+import { AlertTriangle, Clock, Shield, ArrowRight, Workflow as WorkflowIcon, FilePen, Pause, CheckCircle2 } from "lucide-react";
+import { taskStatusVariant, workflowStatusVariant } from "@/lib/constants/status-colors";
 
 export interface PriorityTask {
   id: string;
@@ -13,6 +13,14 @@ export interface PriorityTask {
   status: string;
   priority: number;
   projectName?: string;
+  isWorkflow?: boolean;
+  workflowProgress?: {
+    current: number;
+    total: number;
+    currentStepName?: string;
+    workflowId: string;
+    workflowStatus: string;
+  };
 }
 
 interface PriorityQueueProps {
@@ -24,6 +32,14 @@ const statusIcon: Record<string, typeof AlertTriangle> = {
   running: Clock,
 };
 
+const workflowStatusIcon: Record<string, typeof AlertTriangle> = {
+  draft: FilePen,
+  active: WorkflowIcon,
+  paused: Pause,
+  completed: CheckCircle2,
+  failed: AlertTriangle,
+};
+
 const priorityColors = ["text-priority-critical", "text-priority-high", "text-status-warning", "text-muted-foreground"];
 
 export function PriorityQueue({ tasks }: PriorityQueueProps) {
@@ -40,28 +56,61 @@ export function PriorityQueue({ tasks }: PriorityQueueProps) {
             className="text-sm text-muted-foreground py-4 text-center"
             aria-live="polite"
           >
-            No tasks need attention right now.
+            No tasks or workflows need attention right now.
           </p>
         ) : (
           <div className="space-y-1" aria-live="polite">
             {tasks.map((task) => {
-              const Icon = statusIcon[task.status] ?? Shield;
+              // Workflow items use workflow-specific status icons; tasks use task status icons
+              const Icon = task.isWorkflow
+                ? workflowStatusIcon[task.status] ?? WorkflowIcon
+                : statusIcon[task.status] ?? Shield;
+              const linkHref = task.isWorkflow
+                ? `/workflows/${task.workflowProgress?.workflowId ?? task.id}`
+                : `/tasks/${task.id}`;
+
               return (
-                <div
+                <Link
                   key={task.id}
-                  className="flex items-center gap-3 py-2.5 border-b border-border/50 last:border-b-0"
+                  href={linkHref}
+                  className="flex items-center gap-3 py-2.5 border-b border-border/50 last:border-b-0 hover:bg-accent/30 rounded-md px-1 -mx-1 transition-colors"
                 >
-                  <Icon className={`h-4 w-4 flex-shrink-0 ${priorityColors[task.priority] ?? priorityColors[3]}`} />
+                  <Icon className={`h-4 w-4 flex-shrink-0 ${
+                    task.isWorkflow ? "text-primary" : priorityColors[task.priority] ?? priorityColors[3]
+                  }`} />
                   <div className="flex-1 min-w-0">
                     <p className="text-sm font-medium truncate">{task.title}</p>
                     {task.projectName && (
                       <p className="text-xs text-muted-foreground">{task.projectName}</p>
                     )}
+                    {task.workflowProgress && (
+                      <div className="flex items-center gap-1.5 mt-1">
+                        <span className="text-xs text-muted-foreground">
+                          {task.workflowProgress.current}/{task.workflowProgress.total}
+                        </span>
+                        {task.workflowProgress.currentStepName && (
+                          <span className="text-[11px] text-muted-foreground truncate">
+                            {task.workflowProgress.currentStepName}
+                          </span>
+                        )}
+                        {/* Mini progress bar */}
+                        <div className="h-1 flex-1 max-w-16 rounded-full bg-muted overflow-hidden">
+                          <div
+                            className="h-full rounded-full bg-primary transition-all"
+                            style={{ width: `${(task.workflowProgress.current / task.workflowProgress.total) * 100}%` }}
+                          />
+                        </div>
+                      </div>
+                    )}
                   </div>
-                  <Badge variant={taskStatusVariant[task.status] ?? "secondary"} className="text-xs">
+                  <Badge variant={
+                    task.isWorkflow
+                      ? workflowStatusVariant[task.status] ?? "secondary"
+                      : taskStatusVariant[task.status] ?? "secondary"
+                  } className="text-xs">
                     {task.status}
                   </Badge>
-                </div>
+                </Link>
               );
             })}
           </div>

package/src/components/dashboard/stats-cards.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Activity, CheckCircle, MessageSquare, FolderKanban } from "lucide-react";
+import { Activity, CheckCircle, MessageSquare, FolderKanban, Workflow } from "lucide-react";
 import { Sparkline } from "@/components/charts/sparkline";
 
 interface StatsCardsProps {
@@ -11,11 +11,13 @@ interface StatsCardsProps {
   completedAllTime: number;
   awaitingReview: number;
   activeProjects: number;
+  activeWorkflows: number;
   sparklines?: {
     completions: number[];
     creations: number[];
     projects: number[];
     notifications: number[];
+    workflows: number[];
   };
 }
 
@@ -25,6 +27,7 @@ export function StatsCards({
   completedAllTime,
   awaitingReview,
   activeProjects,
+  activeWorkflows,
   sparklines,
 }: StatsCardsProps) {
   const stats = [
@@ -72,10 +75,21 @@ export function StatsCards({
       destination: "Projects",
       sparklineData: sparklines?.projects,
     },
+    {
+      title: "Workflows Active",
+      value: activeWorkflows,
+      subtitle: "In progress",
+      icon: Workflow,
+      color: "text-primary",
+      chartColor: "var(--chart-5)",
+      href: "/workflows",
+      destination: "Workflows",
+      sparklineData: sparklines?.workflows,
+    },
   ];
 
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
       {stats.map((s) => (
         <Link key={s.title} href={s.href}>
           <Card className="surface-card glass-shimmer cursor-pointer transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl">

package/src/components/documents/document-chip-bar.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Download,
+  Trash2,
+  Unlink,
+  ArrowUpRight,
+  ArrowDownLeft,
+  Link2,
+  FolderKanban,
+} from "lucide-react";
+import {
+  getFileIcon,
+  formatSize,
+  getStatusColor,
+  getStatusDotColor,
+  formatRelativeTime,
+} from "./utils";
+import type { DocumentWithRelations } from "./types";
+
+interface DocumentChipBarProps {
+  doc: DocumentWithRelations;
+  onDelete: () => void;
+  onUnlinkTask: () => void;
+  onLinkProject: (projectId: string) => void;
+  projects: { id: string; name: string }[];
+  deleting: boolean;
+  linking: boolean;
+}
+
+export function DocumentChipBar({
+  doc,
+  onDelete,
+  onUnlinkTask,
+  onLinkProject,
+  projects,
+  deleting,
+  linking,
+}: DocumentChipBarProps) {
+  const router = useRouter();
+  const Icon = getFileIcon(doc.mimeType);
+  const DirectionIcon = doc.direction === "output" ? ArrowUpRight : ArrowDownLeft;
+
+  return (
+    <div className="surface-control rounded-lg p-4 space-y-3">
+      {/* Row 1: Name + Actions */}
+      <div className="flex items-center gap-3 min-w-0">
+        <Icon className="h-5 w-5 text-muted-foreground shrink-0" />
+        <h1 className="text-lg font-semibold truncate flex-1 min-w-0">
+          {doc.originalName}
+        </h1>
+        <div className="flex items-center gap-2 shrink-0">
+          <Button variant="outline" size="sm" asChild>
+            <a
+              href={`/api/documents/${doc.id}/file`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Download className="h-3.5 w-3.5 mr-1" />
+              Download
+            </a>
+          </Button>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={onDelete}
+            disabled={deleting}
+          >
+            <Trash2 className="h-3.5 w-3.5 mr-1" />
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {/* Row 2: Metadata chips */}
+      <div className="flex flex-wrap items-center gap-2">
+        {/* MIME type */}
+        <Badge variant="outline" className="text-xs font-normal">
+          {doc.mimeType}
+        </Badge>
+
+        {/* File size */}
+        <Badge variant="outline" className="text-xs font-normal">
+          {formatSize(doc.size)}
+        </Badge>
+
+        {/* Status */}
+        <Badge variant="outline" className={`text-xs ${getStatusColor(doc.status)}`}>
+          <span className={`w-1.5 h-1.5 rounded-full mr-1.5 ${getStatusDotColor(doc.status)}`} />
+          {doc.status}
+        </Badge>
+
+        {/* Direction */}
+        <Badge variant="outline" className="text-xs font-normal">
+          <DirectionIcon className="h-3 w-3 mr-1" />
+          {doc.direction}
+        </Badge>
+
+        {/* Version (output only) */}
+        {doc.direction === "output" && (
+          <Badge variant="outline" className="text-xs font-normal">
+            v{doc.version}
+          </Badge>
+        )}
+
+        {/* Created date */}
+        <Badge
+          variant="outline"
+          className="text-xs font-normal"
+          title={new Date(doc.createdAt).toLocaleString()}
+        >
+          {formatRelativeTime(
+            typeof doc.createdAt === "number"
+              ? doc.createdAt
+              : new Date(doc.createdAt).getTime()
+          )}
+        </Badge>
+      </div>
+
+      {/* Row 3: Links — task, workflow, project */}
+      <div className="flex flex-wrap items-center gap-2">
+        {/* Task link */}
+        {doc.taskTitle ? (
+          <Badge
+            variant="secondary"
+            className="text-xs cursor-pointer hover:bg-accent gap-1"
+            onClick={() => doc.taskId && router.push(`/tasks/${doc.taskId}`)}
+          >
+            <Link2 className="h-3 w-3" />
+            {doc.taskTitle}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onUnlinkTask();
+              }}
+              className="ml-1 hover:text-destructive"
+              aria-label="Unlink from task"
+            >
+              <Unlink className="h-3 w-3" />
+            </button>
+          </Badge>
+        ) : (
+          <Badge variant="outline" className="text-xs font-normal text-muted-foreground">
+            <Link2 className="h-3 w-3 mr-1" />
+            No task
+          </Badge>
+        )}
+
+        {/* Project selector */}
+        <div className="flex items-center gap-1.5">
+          <FolderKanban className="h-3.5 w-3.5 text-muted-foreground" />
+          <Select
+            value={doc.projectId ?? "none"}
+            onValueChange={onLinkProject}
+            disabled={linking}
+          >
+            <SelectTrigger className="h-7 w-[220px] text-xs border-dashed">
+              <SelectValue placeholder="Project" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none">No project</SelectItem>
+              {projects.map((p) => (
+                <SelectItem key={p.id} value={p.id}>
+                  {p.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/documents/document-content-renderer.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Loader2, Download, FileQuestion } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ErrorState } from "@/components/shared/error-state";
+import { EmptyState } from "@/components/shared/empty-state";
+import { ImageZoomView } from "./image-zoom-view";
+import { SmartExtractedText } from "./smart-extracted-text";
+import {
+  isMarkdown,
+  isCode,
+  isPlainText,
+  isPdf,
+  isImage,
+  getLanguageLabel,
+} from "./utils";
+import { PROSE_READER } from "@/lib/constants/prose-styles";
+import type { DocumentWithRelations } from "./types";
+
+interface DocumentContentRendererProps {
+  doc: DocumentWithRelations;
+}
+
+function DocumentContentRendererInner({ doc }: DocumentContentRendererProps) {
+  const fileUrl = `/api/documents/${doc.id}/file?inline=1`;
+
+  // Tier 0: Processing status
+  if (doc.status === "processing") {
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 py-20">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Processing document...</p>
+      </div>
+    );
+  }
+
+  // Tier 0: Error status
+  if (doc.status === "error") {
+    return (
+      <ErrorState
+        heading="Processing failed"
+        description={doc.processingError ?? "An unknown error occurred while processing this document."}
+      />
+    );
+  }
+
+  // Tier 1: Markdown — full render, no truncation
+  if (isMarkdown(doc.mimeType) && doc.extractedText) {
+    return (
+      <div className={PROSE_READER}>
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {doc.extractedText}
+        </ReactMarkdown>
+      </div>
+    );
+  }
+
+  // Tier 1: Code — monospace with language label
+  if (isCode(doc.mimeType) && doc.extractedText) {
+    return (
+      <div className="relative">
+        <Badge
+          variant="secondary"
+          className="absolute top-3 right-3 text-xs"
+        >
+          {getLanguageLabel(doc.mimeType)}
+        </Badge>
+        <pre className="font-mono text-sm bg-muted p-4 rounded-lg overflow-x-auto whitespace-pre-wrap break-words">
+          {doc.extractedText}
+        </pre>
+      </div>
+    );
+  }
+
+  // Tier 1: Plain text — flowing prose paragraphs
+  if (isPlainText(doc.mimeType) && doc.extractedText) {
+    const paragraphs = doc.extractedText.split(/\n{2,}/).filter(Boolean);
+    return (
+      <div className={`${PROSE_READER} space-y-4`}>
+        {paragraphs.map((p, i) => (
+          <p key={i} className="whitespace-pre-wrap">
+            {p}
+          </p>
+        ))}
+      </div>
+    );
+  }
+
+  // Tier 2: PDF — full-height iframe
+  if (isPdf(doc.mimeType)) {
+    return (
+      <div className="rounded-lg overflow-hidden border border-border">
+        <iframe
+          src={fileUrl}
+          className="w-full min-h-[60vh] md:min-h-[80vh]"
+          title={doc.originalName}
+          onError={() => {
+            // iframe onerror doesn't fire reliably — the fallback link below covers this
+          }}
+        />
+        <div className="p-3 bg-muted/30 text-center">
+          <a
+            href={`/api/documents/${doc.id}/file`}
+            download
+            className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+          >
+            PDF not loading? Download instead
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // Tier 2: Image — full size with zoom
+  if (isImage(doc.mimeType)) {
+    return <ImageZoomView src={fileUrl} alt={doc.originalName} />;
+  }
+
+  // Tier 3: Other with extracted text — smart formatting
+  if (doc.extractedText) {
+    return <SmartExtractedText text={doc.extractedText} />;
+  }
+
+  // Tier 4: Fallback — no content available
+  return (
+    <EmptyState
+      icon={FileQuestion}
+      heading="No preview available"
+      description="This file type can't be previewed. Download it to view the contents."
+      action={
+        <Button variant="outline" size="sm" asChild>
+          <a href={`/api/documents/${doc.id}/file`} download>
+            <Download className="h-3.5 w-3.5 mr-1" />
+            Download File
+          </a>
+        </Button>
+      }
+    />
+  );
+}
+
+export const DocumentContentRenderer = memo(DocumentContentRendererInner);