stagent 0.1.11 → 0.1.12

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/notifications/batch-proposal-review.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CheckCircle2, XCircle, Layers3, Brain } from "lucide-react";
+import { LightMarkdown } from "@/components/shared/light-markdown";
+
+interface BatchProposalReviewProps {
+  proposalIds: string[];
+  profileIds: string[];
+  body: string;
+  onResponded?: () => void;
+  compact?: boolean;
+}
+
+export function BatchProposalReview({
+  proposalIds,
+  profileIds,
+  body,
+  onResponded,
+  compact = false,
+}: BatchProposalReviewProps) {
+  const [loading, setLoading] = useState<"approve" | "reject" | null>(null);
+  const [responded, setResponded] = useState(false);
+  const [result, setResult] = useState<{
+    action: string;
+    count: number;
+  } | null>(null);
+
+  async function handleBatchAction(action: "approve" | "reject") {
+    setLoading(action);
+    try {
+      const res = await fetch("/api/context/batch", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ proposalIds, action }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setResult({ action: data.action, count: data.count });
+        setResponded(true);
+        onResponded?.();
+      }
+    } finally {
+      setLoading(null);
+    }
+  }
+
+  if (responded && result) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        {result.action === "approve" ? (
+          <CheckCircle2 className="h-4 w-4 text-status-success" />
+        ) : (
+          <XCircle className="h-4 w-4 text-status-error" />
+        )}
+        <span>
+          {result.count} proposal{result.count !== 1 ? "s" : ""}{" "}
+          {result.action === "approve" ? "approved" : "rejected"}
+        </span>
+      </div>
+    );
+  }
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Badge variant="secondary" className="text-xs">
+            <Layers3 className="h-3.5 w-3.5" />
+            {proposalIds.length} proposals
+          </Badge>
+          {profileIds.map((id) => (
+            <Badge key={id} variant="outline" className="text-xs">
+              <Brain className="h-3.5 w-3.5" />
+              {id}
+            </Badge>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="default"
+            disabled={loading !== null}
+            onClick={() => handleBatchAction("approve")}
+          >
+            {loading === "approve" ? "Approving..." : "Approve All"}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={loading !== null}
+            onClick={() => handleBatchAction("reject")}
+          >
+            {loading === "reject" ? "Rejecting..." : "Reject All"}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Card className="surface-card">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm flex items-center gap-2">
+          <Brain className="h-4 w-4" />
+          Workflow Learning — {proposalIds.length} Proposals
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex flex-wrap gap-1.5">
+          {profileIds.map((id) => (
+            <Badge key={id} variant="outline" className="text-xs">
+              {id}
+            </Badge>
+          ))}
+        </div>
+
+        <div className="rounded-lg border p-3 max-h-64 overflow-y-auto">
+          <LightMarkdown content={body} />
+        </div>
+
+        <div className="flex gap-2">
+          <Button
+            variant="default"
+            disabled={loading !== null}
+            onClick={() => handleBatchAction("approve")}
+          >
+            <CheckCircle2 className="h-4 w-4" />
+            {loading === "approve"
+              ? "Approving..."
+              : `Approve All (${proposalIds.length})`}
+          </Button>
+          <Button
+            variant="outline"
+            disabled={loading !== null}
+            onClick={() => handleBatchAction("reject")}
+          >
+            <XCircle className="h-4 w-4" />
+            {loading === "reject"
+              ? "Rejecting..."
+              : `Reject All (${proposalIds.length})`}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -4,6 +4,7 @@ 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 { Button } from "@/components/ui/button";
+import { LightMarkdown } from "@/components/shared/light-markdown";
 import { useState } from "react";
 import { PermissionAction } from "./permission-action";
 import { MessageResponse, type Question } from "./message-response";
@@ -174,9 +175,11 @@ 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>
+              <LightMarkdown
+                content={notification.body}
+                lineClamp={3}
+                textSize="sm"
+              />
             )}
 
           {/* Actions based on type */}

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

@@ -13,6 +13,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 { Badge } from "@/components/ui/badge";
 import {
   Dialog,
@@ -46,6 +47,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,7 +144,7 @@ function PendingApprovalDetail({
         <p className="mt-2 text-sm text-muted-foreground">
           {selected.compactSummary}
         </p>
-        {selected.body && (
+        {selected.body && selected.notificationType !== "context_proposal" && (
           <p className="mt-3 text-sm leading-6 text-muted-foreground">
             {selected.body}
           </p>
@@ -137,7 +154,19 @@ function PendingApprovalDetail({
         </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 +434,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 +518,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 +531,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>
+  );
+}