stagent 0.1.11 → 0.1.13

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

@@ -2,9 +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";
@@ -40,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> = {
@@ -48,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(
@@ -94,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);
@@ -133,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>
@@ -174,9 +207,43 @@ export function NotificationItem({ notification, onUpdated }: NotificationItemPr
           {notification.body &&
             notification.type !== "permission_required" &&
             notification.type !== "agent_message" && (
-              <p className="text-sm text-muted-foreground line-clamp-3">
-                {notification.body}
-              </p>
+              <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 */}
@@ -222,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

@@ -13,6 +13,8 @@ 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,
@@ -46,6 +48,22 @@ function dedupePendingApprovals(items: PendingApprovalPayload[]) {
   );
 }
 
+function parseBatchToolInput(toolInput: unknown): {
+  proposalIds: string[];
+  profileIds: string[];
+} {
+  try {
+    const parsed =
+      typeof toolInput === "string" ? JSON.parse(toolInput) : toolInput;
+    return {
+      proposalIds: Array.isArray(parsed?.proposalIds) ? parsed.proposalIds : [],
+      profileIds: Array.isArray(parsed?.profileIds) ? parsed.profileIds : [],
+    };
+  } catch {
+    return { proposalIds: [], profileIds: [] };
+  }
+}
+
 function buildContextLabel(payload: PendingApprovalPayload) {
   if (payload.workflowName && payload.taskTitle) {
     return `${payload.workflowName} · ${payload.taskTitle}`;
@@ -127,17 +145,31 @@ function PendingApprovalDetail({
         <p className="mt-2 text-sm text-muted-foreground">
           {selected.compactSummary}
         </p>
-        {selected.body && (
-          <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)}
         </p>
       </div>
 
-      {selected.notificationType === "context_proposal" ? (
+      {selected.notificationType === "context_proposal_batch" ? (
+        (() => {
+          const parsed = parseBatchToolInput(selected.toolInput);
+          return (
+            <BatchProposalReview
+              proposalIds={parsed.proposalIds}
+              profileIds={parsed.profileIds}
+              body={selected.body ?? ""}
+              onResponded={onResponded}
+            />
+          );
+        })()
+      ) : selected.notificationType === "context_proposal" ? (
         <ContextProposalReview
           notificationId={selected.notificationId}
           profileId={selected.toolName ?? ""}
@@ -405,7 +437,22 @@ export function PendingApprovalHost() {
             </div>
           </button>
 
-          {primary.notificationType === "context_proposal" ? (
+          {primary.notificationType === "context_proposal_batch" ? (
+            <div className="mt-3">
+              {(() => {
+                const parsed = parseBatchToolInput(primary.toolInput);
+                return (
+                  <BatchProposalReview
+                    proposalIds={parsed.proposalIds}
+                    profileIds={parsed.profileIds}
+                    body={primary.body ?? ""}
+                    onResponded={() => removeNotification(primary.notificationId)}
+                    compact
+                  />
+                );
+              })()}
+            </div>
+          ) : primary.notificationType === "context_proposal" ? (
             <div className="mt-3">
               <ContextProposalReview
                 notificationId={primary.notificationId}
@@ -474,7 +521,7 @@ export function PendingApprovalHost() {
         ) : (
           <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
             <DialogContent
-              className="max-w-2xl"
+              className="max-w-2xl max-h-[85dvh] flex flex-col"
               onCloseAutoFocus={(event) => {
                 event.preventDefault();
                 triggerRef.current?.focus();
@@ -487,13 +534,15 @@ export function PendingApprovalHost() {
                   the Inbox first.
                 </DialogDescription>
               </DialogHeader>
-              <PendingApprovalDetail
-                selected={selected}
-                overflow={overflowItems}
-                onResponded={() => removeNotification(selected.notificationId)}
-                onOpenInbox={handleOpenInbox}
-                onSelect={setSelectedId}
-              />
+              <div className="overflow-y-auto -mx-6 px-6 pb-1">
+                <PendingApprovalDetail
+                  selected={selected}
+                  overflow={overflowItems}
+                  onResponded={() => removeNotification(selected.notificationId)}
+                  onOpenInbox={handleOpenInbox}
+                  onSelect={setSelectedId}
+                />
+              </div>
             </DialogContent>
           </Dialog>
         ))}

package/src/components/playbook/adoption-heatmap.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import type { DocSection, AdoptionEntry } from "@/lib/docs/types";
+
+interface AdoptionHeatmapProps {
+  sections: DocSection[];
+  adoption: Record<string, AdoptionEntry>;
+}
+
+const depthStyles: Record<AdoptionEntry["depth"], string> = {
+  none: "bg-muted border-border/30 text-muted-foreground",
+  light: "bg-amber-500/10 border-amber-500/30 text-amber-600 dark:text-amber-400",
+  deep: "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400",
+};
+
+const depthLabels: Record<AdoptionEntry["depth"], string> = {
+  none: "Not explored",
+  light: "Lightly used",
+  deep: "Deeply used",
+};
+
+export function AdoptionHeatmap({
+  sections,
+  adoption,
+}: AdoptionHeatmapProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-base font-medium text-muted-foreground uppercase tracking-wider">
+          Feature Adoption
+        </h3>
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-muted-foreground/30" />
+            Not explored
+          </span>
+          <span className="flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-amber-500" />
+            Light
+          </span>
+          <span className="flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-emerald-500" />
+            Deep
+          </span>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+        {sections.map((section) => {
+          const entry = adoption[section.slug] ?? {
+            adopted: false,
+            depth: "none" as const,
+          };
+
+          return (
+            <Link
+              key={section.slug}
+              href={`/playbook/${section.slug}`}
+              className={`rounded-lg border px-4 py-3 text-sm font-medium transition-colors hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${depthStyles[entry.depth]}`}
+              title={depthLabels[entry.depth]}
+            >
+              {section.title}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/playbook/journey-card.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Map, Clock, GraduationCap, Briefcase, Zap, Code } from "lucide-react";
+import type {
+  DocJourney,
+  AdoptionEntry,
+  JourneyCompletion,
+} from "@/lib/docs/types";
+
+const personaIcons: Record<string, typeof Map> = {
+  personal: GraduationCap,
+  work: Briefcase,
+  "power-user": Zap,
+  developer: Code,
+};
+
+const difficultyColors: Record<string, string> = {
+  beginner: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
+  intermediate: "bg-amber-500/10 text-amber-500 border-amber-500/20",
+  advanced: "bg-rose-500/10 text-rose-500 border-rose-500/20",
+};
+
+interface JourneyCardProps {
+  journey: DocJourney;
+  completion?: JourneyCompletion;
+  adoption: Record<string, AdoptionEntry>;
+}
+
+export function JourneyCard({
+  journey,
+  completion,
+  adoption,
+}: JourneyCardProps) {
+  const Icon = personaIcons[journey.persona] || Map;
+  const completed = completion?.completed ?? 0;
+  const total = completion?.total ?? journey.sections.length;
+  const percentage = completion?.percentage ?? 0;
+
+  return (
+    <Link
+      href={`/playbook/${journey.slug}`}
+      className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xl"
+    >
+      <Card className="surface-card glass-shimmer group h-full transition-colors hover:border-border hover:bg-accent/50 rounded-xl">
+        <CardHeader className="pb-2">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+                <Icon className="h-4 w-4 text-primary" />
+              </div>
+              <div>
+                <h3 className="text-base font-medium group-hover:text-primary transition-colors">
+                  {journey.title}
+                </h3>
+                <div className="flex items-center gap-2 mt-0.5">
+                  <Badge
+                    variant="outline"
+                    className={`text-xs ${difficultyColors[journey.difficulty] || ""}`}
+                  >
+                    {journey.difficulty}
+                  </Badge>
+                  <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Clock className="h-3 w-3" />
+                    {journey.stepCount} steps
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-3">
+          {/* Progress bar — segmented by section */}
+          <div className="flex gap-1">
+            {journey.sections.map((sectionSlug) => {
+              const sectionAdoption = adoption[sectionSlug];
+              const isAdopted = sectionAdoption?.adopted === true;
+              const depth = sectionAdoption?.depth ?? "none";
+
+              let barColor = "bg-muted-foreground/20";
+              if (depth === "deep") barColor = "bg-emerald-500";
+              else if (depth === "light") barColor = "bg-amber-500";
+
+              return (
+                <div
+                  key={sectionSlug}
+                  className={`h-2 flex-1 rounded-full ${barColor} transition-colors`}
+                  title={`${sectionSlug}: ${isAdopted ? "explored" : "not explored"}`}
+                />
+              );
+            })}
+          </div>
+
+          {/* Completion label */}
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>
+              {completed} of {total} explored
+            </span>
+            <span className="font-medium">
+              {percentage}%
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}

package/src/components/playbook/playbook-action-button.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+interface PlaybookActionButtonProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+export function PlaybookActionButton({
+  href,
+  children,
+}: PlaybookActionButtonProps) {
+  return (
+    <Link
+      href={href}
+      className="inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 no-underline"
+    >
+      {children}
+      <ArrowRight className="h-3.5 w-3.5" />
+    </Link>
+  );
+}

package/src/components/playbook/playbook-browser.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Search, BookOpen } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EmptyState } from "@/components/shared/empty-state";
+import { PlaybookCard } from "@/components/playbook/playbook-card";
+import { JourneyCard } from "@/components/playbook/journey-card";
+import type {
+  DocSection,
+  DocJourney,
+  AdoptionEntry,
+  JourneyCompletion,
+} from "@/lib/docs/types";
+
+type CategoryFilter = "all" | "features" | "journeys" | "getting-started";
+
+interface PlaybookBrowserProps {
+  sections: DocSection[];
+  journeys: DocJourney[];
+  adoption: Record<string, AdoptionEntry>;
+  journeyCompletions: Record<string, JourneyCompletion>;
+}
+
+export function PlaybookBrowser({
+  sections,
+  journeys,
+  adoption,
+  journeyCompletions,
+}: PlaybookBrowserProps) {
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState<CategoryFilter>("all");
+
+  const filteredSections = useMemo(() => {
+    const q = search.toLowerCase();
+    return sections.filter((s) => {
+      if (!q) return true;
+      return (
+        s.title.toLowerCase().includes(q) ||
+        s.tags.some((t) => t.toLowerCase().includes(q)) ||
+        s.slug.toLowerCase().includes(q)
+      );
+    });
+  }, [sections, search]);
+
+  const filteredJourneys = useMemo(() => {
+    const q = search.toLowerCase();
+    return journeys.filter((j) => {
+      if (!q) return true;
+      return (
+        j.title.toLowerCase().includes(q) ||
+        j.persona.toLowerCase().includes(q) ||
+        j.slug.toLowerCase().includes(q)
+      );
+    });
+  }, [journeys, search]);
+
+  const showSections = category === "all" || category === "features";
+  const showJourneys = category === "all" || category === "journeys";
+  const isEmpty =
+    (showSections ? filteredSections.length : 0) +
+      (showJourneys ? filteredJourneys.length : 0) ===
+    0;
+
+  return (
+    <div className="space-y-4">
+      {/* Search + Filter */}
+      <div className="surface-panel flex flex-col gap-4 rounded-2xl p-4 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search docs..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="surface-control pl-9"
+          />
+        </div>
+        <Tabs
+          value={category}
+          onValueChange={(v) => setCategory(v as CategoryFilter)}
+        >
+          <TabsList className="surface-control">
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="features">Features</TabsTrigger>
+            <TabsTrigger value="journeys">Journeys</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {isEmpty ? (
+        <EmptyState
+          icon={BookOpen}
+          heading="No docs found"
+          description="Try adjusting your search or filter."
+        />
+      ) : (
+        <div className="space-y-6">
+          {/* Journeys */}
+          {showJourneys && filteredJourneys.length > 0 && (
+            <div className="space-y-3">
+              {category === "all" && (
+                <h3 className="text-base font-medium text-muted-foreground uppercase tracking-wider">
+                  Guided Journeys
+                </h3>
+              )}
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                {filteredJourneys.map((journey) => (
+                  <JourneyCard
+                    key={journey.slug}
+                    journey={journey}
+                    completion={journeyCompletions[journey.slug]}
+                    adoption={adoption}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Feature Sections */}
+          {showSections && filteredSections.length > 0 && (
+            <div className="space-y-3">
+              {category === "all" && (
+                <h3 className="text-base font-medium text-muted-foreground uppercase tracking-wider">
+                  Feature Reference
+                </h3>
+              )}
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {filteredSections.map((section) => (
+                  <PlaybookCard
+                    key={section.slug}
+                    section={section}
+                    adoption={adoption[section.slug]}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}