stagent 0.1.12 → 0.1.13

package/src/components/notifications/notification-item.tsx

@@ -2,10 +2,11 @@
 
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
-import { Shield, MessageCircle, CheckCircle, XCircle, Eye, EyeOff, Trash2, Wallet } from "lucide-react";
+import { Shield, MessageCircle, CheckCircle, XCircle, Eye, EyeOff, Trash2, Wallet, Brain, ChevronRight, ChevronDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { LightMarkdown } from "@/components/shared/light-markdown";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { PermissionAction } from "./permission-action";
 import { MessageResponse, type Question } from "./message-response";
 import { FailureAction } from "./failure-action";
@@ -41,6 +42,8 @@ const typeIcons: Record<string, React.ReactNode> = {
   task_completed: <CheckCircle className="h-4 w-4 text-chart-2" aria-hidden="true" />,
   task_failed: <XCircle className="h-4 w-4 text-destructive" aria-hidden="true" />,
   budget_alert: <Wallet className="h-4 w-4 text-status-warning" aria-hidden="true" />,
+  context_proposal: <Brain className="h-4 w-4 text-chart-4" aria-hidden="true" />,
+  context_proposal_batch: <Brain className="h-4 w-4 text-chart-4" aria-hidden="true" />,
 };
 
 const typeLabels: Record<string, string> = {
@@ -49,6 +52,8 @@ const typeLabels: Record<string, string> = {
   task_completed: "Task completed",
   task_failed: "Task failed",
   budget_alert: "Budget alert",
+  context_proposal: "Self-learning",
+  context_proposal_batch: "Self-learning batch",
 };
 
 function formatToolInput(
@@ -95,12 +100,31 @@ function formatToolInput(
   );
 }
 
+const navigableTypes = new Set(["task_completed", "task_failed", "permission_required", "agent_message"]);
+
 export function NotificationItem({ notification, onUpdated }: NotificationItemProps) {
+  const router = useRouter();
   const [toggling, setToggling] = useState(false);
   const [dismissing, setDismissing] = useState(false);
+  const [expanded, setExpanded] = useState(false);
   const isUnread = !notification.read;
   const hasResponse = !!notification.response;
   const parsedToolInput = parseNotificationToolInput(notification.toolInput);
+  const isNavigable = !!notification.taskId && navigableTypes.has(notification.type);
+
+  async function handleNavigate() {
+    if (!isNavigable) return;
+    // Mark as read on click-through
+    if (isUnread) {
+      await fetch(`/api/notifications/${notification.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ read: true }),
+      });
+      onUpdated();
+    }
+    router.push(`/tasks/${notification.taskId}`);
+  }
 
   async function toggleRead() {
     setToggling(true);
@@ -134,9 +158,17 @@ export function NotificationItem({ notification, onUpdated }: NotificationItemPr
         isUnread
           ? "surface-card border-l-4 border-l-primary"
           : "surface-card-muted"
-      }`}
+      }${isNavigable ? " cursor-pointer hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" : ""}`}
       role="article"
       aria-label={`${typeLabels[notification.type] ?? "Notification"}: ${notification.title}${isUnread ? " (unread)" : ""}`}
+      tabIndex={isNavigable ? 0 : undefined}
+      onClick={isNavigable ? handleNavigate : undefined}
+      onKeyDown={isNavigable ? (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleNavigate();
+        }
+      } : undefined}
     >
       <div className="flex items-start gap-3">
         <div className="mt-0.5">{typeIcons[notification.type]}</div>
@@ -175,11 +207,43 @@ export function NotificationItem({ notification, onUpdated }: NotificationItemPr
           {notification.body &&
             notification.type !== "permission_required" &&
             notification.type !== "agent_message" && (
-              <LightMarkdown
-                content={notification.body}
-                lineClamp={3}
-                textSize="sm"
-              />
+              <div className="mt-1" onClick={(e) => e.stopPropagation()}>
+                {expanded ? (
+                  <>
+                    <div className="prose prose-sm dark:prose-invert max-w-none max-h-96 overflow-auto rounded-md border bg-muted/30 p-3">
+                      <LightMarkdown content={notification.body} textSize="sm" />
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="mt-1 h-6 text-xs text-muted-foreground"
+                      onClick={(e) => { e.stopPropagation(); setExpanded(false); }}
+                    >
+                      <ChevronDown className="h-3 w-3 mr-1" />
+                      Collapse
+                    </Button>
+                  </>
+                ) : (
+                  <>
+                    <LightMarkdown
+                      content={notification.body}
+                      lineClamp={2}
+                      textSize="sm"
+                    />
+                    {notification.body.length > 200 && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="mt-1 h-6 text-xs text-muted-foreground"
+                        onClick={(e) => { e.stopPropagation(); setExpanded(true); }}
+                      >
+                        <ChevronRight className="h-3 w-3 mr-1" />
+                        Expand
+                      </Button>
+                    )}
+                  </>
+                )}
+              </div>
             )}
 
           {/* Actions based on type */}
@@ -225,7 +289,7 @@ export function NotificationItem({ notification, onUpdated }: NotificationItemPr
             )}
           </p>
         </div>
-        <div className="flex flex-col gap-1 shrink-0">
+        <div className="flex flex-col gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
           <Button
             variant="ghost"
             size="icon"

package/src/components/notifications/pending-approval-host.tsx

@@ -14,6 +14,7 @@ import {
 import { PermissionResponseActions } from "@/components/notifications/permission-response-actions";
 import { ContextProposalReview } from "@/components/profiles/context-proposal-review";
 import { BatchProposalReview } from "@/components/notifications/batch-proposal-review";
+import { LightMarkdown } from "@/components/shared/light-markdown";
 import { Badge } from "@/components/ui/badge";
 import {
   Dialog,
@@ -144,10 +145,12 @@ function PendingApprovalDetail({
         <p className="mt-2 text-sm text-muted-foreground">
           {selected.compactSummary}
         </p>
-        {selected.body && selected.notificationType !== "context_proposal" && (
-          <p className="mt-3 text-sm leading-6 text-muted-foreground">
-            {selected.body}
-          </p>
+        {selected.body &&
+          selected.notificationType !== "context_proposal" &&
+          selected.notificationType !== "context_proposal_batch" && (
+          <div className="mt-3">
+            <LightMarkdown content={selected.body} textSize="sm" />
+          </div>
         )}
         <p className="mt-3 text-xs text-muted-foreground">
           Requested {formatTimestamp(selected.createdAt)}

package/src/components/playbook/playbook-detail-view.tsx

@@ -7,6 +7,7 @@ import remarkGfm from "remark-gfm";
 import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { PROSE_READER_FULL } from "@/lib/constants/prose-styles";
 import { PlaybookToc } from "./playbook-toc";
 import { RelatedDocs } from "./related-docs";
 import type { ParsedDoc, DocSection, AdoptionEntry } from "@/lib/docs/types";
@@ -34,7 +35,8 @@ export function PlaybookDetailView({
 }: PlaybookDetailViewProps) {
   const title =
     (doc.frontmatter.title as string) || doc.slug.replace(/-/g, " ");
-  const tags = (doc.frontmatter.tags as string[]) || [];
+  const rawTags = doc.frontmatter.tags;
+  const tags = Array.isArray(rawTags) ? (rawTags as string[]) : [];
   const route = doc.frontmatter.route as string | undefined;
   const category = doc.frontmatter.category as string | undefined;
   const difficulty = doc.frontmatter.difficulty as string | undefined;
@@ -126,8 +128,8 @@ export function PlaybookDetailView({
 
     // Resolve ../screengrabs/ paths to /readme/ (images live in public/readme/)
     let resolvedSrc = src;
-    if (src.startsWith("../screengrabs/")) {
-      resolvedSrc = `/readme/${src.replace("../screengrabs/", "")}`;
+    if (src.includes("screengrabs/")) {
+      resolvedSrc = `/readme/${src.split("screengrabs/").pop()}`;
     } else if (src.startsWith("./")) {
       resolvedSrc = `/docs/${src.replace("./", "")}`;
     }
@@ -200,7 +202,7 @@ export function PlaybookDetailView({
 
         {/* Prose content */}
         <div className="flex-1 min-w-0">
-          <div className="prose dark:prose-invert max-w-none prose-headings:scroll-mt-20 prose-img:rounded-xl prose-img:border prose-img:border-border/50">
+          <div className={PROSE_READER_FULL}>
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               components={{

package/src/components/profiles/profile-browser.tsx

@@ -107,6 +107,7 @@ export function ProfileBrowser({ initialProfiles }: ProfileBrowserProps) {
             <ProfileCard
               key={profile.id}
               profile={profile}
+              isBuiltin={profile.isBuiltin}
               onClick={() => router.push(`/profiles/${profile.id}`)}
             />
           ))}

package/src/components/profiles/profile-card.tsx

@@ -4,14 +4,16 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { listRuntimeCatalog } from "@/lib/agents/runtime/catalog";
 import { getSupportedRuntimes } from "@/lib/agents/profiles/compatibility";
+import { IconCircle, getProfileIcon, getDomainColors } from "@/lib/constants/card-icons";
 import type { AgentProfile } from "@/lib/agents/profiles/types";
 
 interface ProfileCardProps {
   profile: AgentProfile;
+  isBuiltin?: boolean;
   onClick: () => void;
 }
 
-export function ProfileCard({ profile, onClick }: ProfileCardProps) {
+export function ProfileCard({ profile, isBuiltin = true, onClick }: ProfileCardProps) {
   const runtimeLabelMap = new Map(
     listRuntimeCatalog().map((runtime) => [
       runtime.id,
@@ -32,13 +34,19 @@ export function ProfileCard({ profile, onClick }: ProfileCardProps) {
         }
       }}
     >
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-base font-medium">{profile.name}</CardTitle>
-        <Badge
-          variant={profile.domain === "work" ? "default" : "secondary"}
-        >
-          {profile.domain}
-        </Badge>
+      <CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-2">
+        <IconCircle
+          icon={getProfileIcon(profile.id)}
+          colors={getDomainColors(profile.domain, isBuiltin)}
+        />
+        <div className="flex min-w-0 flex-1 items-center justify-between">
+          <CardTitle className="truncate text-base font-medium">{profile.name}</CardTitle>
+          <Badge
+            variant={profile.domain === "work" ? "default" : "secondary"}
+          >
+            {profile.domain}
+          </Badge>
+        </div>
       </CardHeader>
       <CardContent className="space-y-3">
         <p className="line-clamp-2 text-sm text-muted-foreground">

package/src/components/profiles/profile-detail-view.tsx

@@ -40,6 +40,7 @@ import {
   getSupportedRuntimes,
 } from "@/lib/agents/profiles/compatibility";
 import type { AgentProfile } from "@/lib/agents/profiles/types";
+import { IconCircle, getProfileIcon, getDomainColors } from "@/lib/constants/card-icons";
 
 interface TestResult {
   task: string;
@@ -179,7 +180,11 @@ export function ProfileDetailView({ profileId, isBuiltin, initialProfile }: Prof
     <div className="space-y-6" aria-live="polite">
       {/* Header */}
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
+          <IconCircle
+            icon={getProfileIcon(profile.id)}
+            colors={getDomainColors(profile.domain, isBuiltin)}
+          />
           <h1 className="text-2xl font-bold">{profile.name}</h1>
           <Badge variant={profile.domain === "work" ? "default" : "secondary"}>
             {profile.domain}

package/src/components/shared/app-sidebar.tsx

@@ -8,7 +8,7 @@ import {
   Inbox,
   Activity,
   FolderKanban,
-  GitBranch,
+  Workflow,
   FileText,
   Bot,
   Clock,
@@ -40,7 +40,7 @@ const navItems = [
   { title: "Inbox", href: "/inbox", icon: Inbox, badge: true },
   { title: "Monitor", href: "/monitor", icon: Activity, badge: false },
   { title: "Projects", href: "/projects", icon: FolderKanban, badge: false },
-  { title: "Workflows", href: "/workflows", icon: GitBranch, badge: false },
+  { title: "Workflows", href: "/workflows", icon: Workflow, badge: false },
   { title: "Documents", href: "/documents", icon: FileText, badge: false },
   { title: "Profiles", href: "/profiles", icon: Bot, badge: false },
   { title: "Schedules", href: "/schedules", icon: Clock, badge: false },

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>
         ) : (