stagent 0.1.12 → 0.1.13

package/src/app/documents/[id]/page.tsx

@@ -33,14 +33,16 @@ export default async function DocumentDetailPage({
   };
 
   return (
-    <div className="gradient-forest-dawn min-h-screen p-6">
-      <Link href="/documents">
-        <Button variant="ghost" size="sm" className="mb-4">
-          <ArrowLeft className="h-4 w-4 mr-1" />
-          Back to Documents
-        </Button>
-      </Link>
-      <DocumentDetailView documentId={id} initialDocument={initialDoc} />
+    <div className="gradient-twilight min-h-screen p-6">
+      <div className="surface-page-shell rounded-xl p-6 max-w-5xl mx-auto">
+        <Link href="/documents">
+          <Button variant="ghost" size="sm" className="mb-4">
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            Back to Documents
+          </Button>
+        </Link>
+        <DocumentDetailView documentId={id} initialDocument={initialDoc} />
+      </div>
     </div>
   );
 }

package/src/app/globals.css

@@ -654,6 +654,17 @@
   border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
 }
 
+/* Document reader surface — white bg for readability */
+.prose-reader-surface {
+  background: oklch(1 0 0);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+}
+
+.dark .prose-reader-surface {
+  background: oklch(0.18 0.015 265);
+}
+
 /* --- Progress slide animation (AI Assist) --- */
 @keyframes progress-slide {
   0% { transform: translateX(-100%); }

package/src/app/page.tsx

@@ -1,6 +1,7 @@
 import { db } from "@/lib/db";
-import { tasks, projects, agentLogs, notifications } from "@/lib/db/schema";
+import { tasks, projects, agentLogs, notifications, workflows } from "@/lib/db/schema";
 import { eq, count, gte, and, desc, sql, inArray } from "drizzle-orm";
+import { parseWorkflowState } from "@/lib/workflows/engine";
 import { Greeting } from "@/components/dashboard/greeting";
 import { StatsCards } from "@/components/dashboard/stats-cards";
 import { PriorityQueue } from "@/components/dashboard/priority-queue";
@@ -16,6 +17,7 @@ import {
   getActiveProjectActivityByDay,
   getAgentActivityByHour,
   getNotificationsByDay,
+  getWorkflowActivityByDay,
 } from "@/lib/queries/chart-data";
 
 export const dynamic = "force-dynamic";
@@ -33,6 +35,8 @@ export default async function HomePage() {
     [awaitingResult],
     [activeProjectsResult],
     priorityTasks,
+    activeWorkflows,
+    [activeWorkflowCountResult],
     recentLogs,
     allProjects,
     recentActiveProjects,
@@ -41,6 +45,7 @@ export default async function HomePage() {
     projectCreationsByDay,
     agentActivityByHour,
     notificationsByDay,
+    workflowsByDay,
   ] = await Promise.all([
     db.select({ count: count() }).from(tasks).where(eq(tasks.status, "running")),
     db.select({ count: count() }).from(tasks).where(eq(tasks.status, "failed")),
@@ -62,7 +67,11 @@ export default async function HomePage() {
     // Priority queue: failed + running tasks, sorted by priority
     db.select().from(tasks).where(
       inArray(tasks.status, ["failed", "running", "queued"])
-    ).orderBy(tasks.priority, desc(tasks.updatedAt)).limit(5),
+    ).orderBy(tasks.priority, desc(tasks.updatedAt)).limit(8),
+    // All workflows for priority queue (match kanban board behavior)
+    db.select().from(workflows).orderBy(desc(workflows.updatedAt)).limit(8),
+    // Count active workflows for stats
+    db.select({ count: count() }).from(workflows).where(eq(workflows.status, "active")),
     // Recent agent logs
     db.select().from(agentLogs).orderBy(desc(agentLogs.timestamp)).limit(6),
     // All projects for quick actions
@@ -81,11 +90,13 @@ export default async function HomePage() {
     getActiveProjectActivityByDay(7),
     getAgentActivityByHour(),
     getNotificationsByDay(7),
+    getWorkflowActivityByDay(7),
   ]);
 
   // Build project name lookup for priority tasks
   const projectMap = new Map(allProjects.map((p) => [p.id, p.name]));
 
+  // Serialize priority tasks (no more workflow linkage via parent task)
   const serializedPriorityTasks: PriorityTask[] = priorityTasks.map((t) => ({
     id: t.id,
     title: t.title,
@@ -94,6 +105,49 @@ export default async function HomePage() {
     projectName: t.projectId ? projectMap.get(t.projectId) ?? undefined : undefined,
   }));
 
+  // Build workflow priority items directly
+  const workflowPriorityItems: PriorityTask[] = activeWorkflows.map((w) => {
+    let workflowProgress: PriorityTask["workflowProgress"];
+
+    try {
+      const { definition: def, state } = parseWorkflowState(w.definition);
+      if (state && def.steps) {
+        const completed = state.stepStates.filter((s) => s.status === "completed").length;
+        const running = state.stepStates.find((s) => s.status === "running");
+        const runningStep = running
+          ? def.steps.find((step) => step.id === running.stepId)
+          : undefined;
+        workflowProgress = {
+          current: completed,
+          total: def.steps.length,
+          currentStepName: runningStep?.name,
+          workflowId: w.id,
+          workflowStatus: w.status,
+        };
+      }
+    } catch { /* skip parse errors */ }
+
+    return {
+      id: w.id,
+      title: w.name,
+      status: w.status,
+      priority: 1, // Workflows always high priority in the attention queue
+      projectName: w.projectId ? projectMap.get(w.projectId) ?? undefined : undefined,
+      workflowProgress,
+      isWorkflow: true,
+    };
+  });
+
+  // Urgency ranking: actionable items surface first
+  const urgencyRank: Record<string, number> = {
+    failed: 0, running: 1, active: 1, queued: 2, paused: 3, draft: 4, completed: 5,
+  };
+
+  // Merge, sort by urgency, and limit to 8 items
+  const allPriorityItems = [...workflowPriorityItems, ...serializedPriorityTasks]
+    .sort((a, b) => (urgencyRank[a.status] ?? 6) - (urgencyRank[b.status] ?? 6))
+    .slice(0, 8);
+
   // Get task titles for log entries
   const logTaskIds = [...new Set(recentLogs.filter((l) => l.taskId).map((l) => l.taskId!))];
   const logTasks = logTaskIds.length > 0
@@ -132,6 +186,7 @@ export default async function HomePage() {
           runningCount={runningResult.count}
           awaitingCount={awaitingResult.count}
           failedCount={failedResult.count}
+          activeWorkflows={activeWorkflowCountResult.count}
         />
         <StatsCards
           runningCount={runningResult.count}
@@ -139,16 +194,18 @@ export default async function HomePage() {
           completedAllTime={completedAllTimeResult.count}
           awaitingReview={awaitingResult.count}
           activeProjects={activeProjectsResult.count}
+          activeWorkflows={activeWorkflowCountResult.count}
           sparklines={{
             completions: completionsByDay,
             creations: taskCreationsByDay,
             projects: projectCreationsByDay,
             notifications: notificationsByDay,
+            workflows: workflowsByDay,
           }}
         />
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-5 mb-6">
           <div className="lg:col-span-3">
-            <PriorityQueue tasks={serializedPriorityTasks} />
+            <PriorityQueue tasks={allPriorityItems} />
           </div>
           <div className="lg:col-span-2">
             <ActivityFeed entries={serializedLogs} hourlyActivity={agentActivityByHour} />

package/src/app/tasks/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { db } from "@/lib/db";
-import { tasks } from "@/lib/db/schema";
+import { tasks, projects, workflows, schedules } from "@/lib/db/schema";
 import { eq } from "drizzle-orm";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
@@ -23,12 +23,32 @@ export default async function TaskDetailPage({
 
   if (!task) notFound();
 
+  // Join relationship names server-side for initial render
+  let projectName: string | undefined;
+  let workflowName: string | undefined;
+  let scheduleName: string | undefined;
+
+  if (task.projectId) {
+    const [p] = await db.select({ name: projects.name }).from(projects).where(eq(projects.id, task.projectId));
+    projectName = p?.name;
+  }
+  if (task.workflowId) {
+    const [w] = await db.select({ name: workflows.name }).from(workflows).where(eq(workflows.id, task.workflowId));
+    workflowName = w?.name;
+  }
+  if (task.scheduleId) {
+    const [s] = await db.select({ name: schedules.name }).from(schedules).where(eq(schedules.id, task.scheduleId));
+    scheduleName = s?.name;
+  }
+
   // Serialize Date timestamps to ISO strings for client component
   const initialTask = {
     ...task,
     createdAt: task.createdAt instanceof Date ? task.createdAt.toISOString() : String(task.createdAt),
     updatedAt: task.updatedAt instanceof Date ? task.updatedAt.toISOString() : String(task.updatedAt),
-    projectName: undefined,
+    projectName,
+    workflowName,
+    scheduleName,
   };
 
   return (

package/src/components/costs/cost-dashboard.tsx

@@ -139,7 +139,7 @@ function formatActivityLabel(value: UsageAuditEntry["activityType"]) {
     case "context_summarization":
       return "Context summarization";
     default:
-      return value
+      return (value as string)
         .split("_")
         .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
         .join(" ");

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>
+  );
+}