stagent 0.1.11 → 0.1.13

package/src/app/api/workflows/from-assist/route.ts

@@ -23,7 +23,7 @@ interface FromAssistBody {
 
 export async function POST(req: NextRequest) {
   const body = (await req.json()) as FromAssistBody;
-  const { name, projectId, definition, priority, assignedAgent, executeImmediately, parentTask } = body;
+  const { name, projectId, definition, priority, assignedAgent, executeImmediately } = body;
 
   if (!name?.trim()) {
     return NextResponse.json({ error: "Name is required" }, { status: 400 });
@@ -46,53 +46,27 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ error: compatibilityError }, { status: 400 });
   }
 
-  // Transaction: create workflow + tasks + optional parent task atomically
+  // Transaction: create workflow + step tasks atomically (no phantom parent task)
   const workflowId = crypto.randomUUID();
   const now = new Date();
   const taskIds: string[] = [];
-  let parentTaskId: string | null = null;
 
   try {
     db.transaction((tx) => {
-      // Create parent task (no workflowId — visible on dashboard)
-      if (parentTask?.title) {
-        parentTaskId = crypto.randomUUID();
-        tx.insert(tasks)
-          .values({
-            id: parentTaskId,
-            title: parentTask.title,
-            description: parentTask.description || null,
-            projectId: projectId || null,
-            workflowId: null,
-            status: executeImmediately ? "running" : "planned",
-            assignedAgent: assignedAgent ?? null,
-            agentProfile: parentTask.agentProfile ?? null,
-            priority: priority ?? 2,
-            createdAt: now,
-            updatedAt: now,
-          })
-          .run();
-      }
-
-      // Store sourceTaskId in definition for parent↔workflow linkage
-      const defToStore = parentTaskId
-        ? { ...definition, sourceTaskId: parentTaskId }
-        : definition;
-
-      // Create workflow
+      // Create workflow — no sourceTaskId needed since there's no parent task
       tx.insert(workflows)
         .values({
           id: workflowId,
           name: name.trim(),
           projectId: projectId || null,
-          definition: JSON.stringify(defToStore),
+          definition: JSON.stringify(definition),
           status: executeImmediately ? "active" : "draft",
           createdAt: now,
           updatedAt: now,
         })
         .run();
 
-      // Create tasks for each step (with workflowId — hidden from dashboard)
+      // Create tasks for each step (with workflowId — hidden from dashboard kanban)
       for (const step of definition.steps) {
         const taskId = crypto.randomUUID();
         taskIds.push(taskId);
@@ -135,7 +109,7 @@ export async function POST(req: NextRequest) {
     {
       workflow: created,
       taskIds,
-      parentTaskId,
+      parentTaskId: null,
       status: executeImmediately ? "started" : "created",
     },
     { status: 201 }

package/src/app/costs/page.tsx

@@ -1,4 +1,3 @@
-import { listRuntimeCatalog } from "@/lib/agents/runtime/catalog";
 import { CostDashboard } from "@/components/costs/cost-dashboard";
 import { getBudgetGuardrailSnapshot } from "@/lib/settings/budget-guardrails";
 import {
@@ -13,8 +12,6 @@ import {
 
 export const dynamic = "force-dynamic";
 
-const runtimeCatalog = listRuntimeCatalog();
-const validRuntimeIds = new Set<string>(runtimeCatalog.map((runtime) => runtime.id));
 const validDateRanges = new Set(["7d", "30d", "90d", "all"]);
 const validStatuses = new Set<UsageLedgerStatus>([
   "completed",
@@ -40,10 +37,6 @@ function resolveDateRange(value: string | undefined) {
   return value && validDateRanges.has(value) ? value : "30d";
 }
 
-function resolveRuntime(value: string | undefined) {
-  return value && validRuntimeIds.has(value) ? value : "all";
-}
-
 function resolveStatus(value: string | undefined) {
   return value && validStatuses.has(value as UsageLedgerStatus) ? value : "all";
 }
@@ -102,25 +95,6 @@ function fillSeries<T extends { day: string }>(
   return keys.map((key) => values.get(key) ?? 0);
 }
 
-function findOverallSpend(
-  statuses: Array<{
-    scopeId: string;
-    window: string;
-    metric: string;
-    currentValue: number;
-  }>,
-  window: "daily" | "monthly"
-) {
-  return (
-    statuses.find(
-      (status) =>
-        status.scopeId === "overall" &&
-        status.window === window &&
-        status.metric === "spend"
-    )?.currentValue ?? 0
-  );
-}
-
 function buildRuntimeBreakdown(
   rows: ProviderModelBreakdownEntry[]
 ): Array<{
@@ -149,9 +123,7 @@ function buildRuntimeBreakdown(
   for (const row of rows) {
     const current = totals.get(row.runtimeId) ?? {
       runtimeId: row.runtimeId,
-      label:
-        runtimeCatalog.find((runtime) => runtime.id === row.runtimeId)?.label ??
-        row.runtimeId,
+      label: row.runtimeId,
       providerId: row.providerId,
       costMicros: 0,
       totalTokens: 0,
@@ -191,22 +163,34 @@ export default async function CostsPage({
 }) {
   const params = await searchParams;
   const dateRange = resolveDateRange(toScalar(params.range));
-  const runtimeId = resolveRuntime(toScalar(params.runtime));
   const status = resolveStatus(toScalar(params.status));
   const activityType = resolveActivityType(toScalar(params.activity));
-
   const rangeStart = getRangeStart(dateRange);
-  const [spendRows30, tokenRows30, monthBreakdown, filteredBreakdown, auditEntries, budgetSnapshot] =
+
+  const budgetSnapshot = await getBudgetGuardrailSnapshot();
+  const configuredRuntimeIds = Object.values(budgetSnapshot.runtimeStates)
+    .filter((runtime) => runtime.configured)
+    .map((runtime) => runtime.runtimeId);
+  const requestedRuntime = toScalar(params.runtime);
+  const runtimeId =
+    requestedRuntime && configuredRuntimeIds.includes(requestedRuntime as never)
+      ? requestedRuntime
+      : "all";
+
+  const [spendRows30, tokenRows30, monthBreakdown, filteredBreakdown, auditEntries] =
     await Promise.all([
       getDailySpendTotals(30),
       getDailyTokenTotals(30),
       getProviderModelBreakdown({ startedAt: startOfCurrentMonth() }),
-      getProviderModelBreakdown(
-        rangeStart ? { startedAt: rangeStart } : undefined
-      ),
+      getProviderModelBreakdown(rangeStart ? { startedAt: rangeStart } : undefined),
       listUsageAuditEntries({
         limit: 100,
-        runtimeIds: runtimeId === "all" ? undefined : [runtimeId],
+        runtimeIds:
+          runtimeId === "all"
+            ? configuredRuntimeIds.length > 0
+              ? configuredRuntimeIds
+              : undefined
+            : [runtimeId],
         statuses: status === "all" ? undefined : [status as UsageLedgerStatus],
         activityTypes:
           activityType === "all"
@@ -214,17 +198,38 @@ export default async function CostsPage({
             : [activityType as UsageActivityType],
         startedAt: rangeStart,
       }),
-      getBudgetGuardrailSnapshot(),
     ]);
 
+  const configuredBreakdown = filteredBreakdown.filter((row) =>
+    configuredRuntimeIds.length > 0
+      ? configuredRuntimeIds.includes(row.runtimeId as never)
+      : true
+  );
+  const configuredMonthBreakdown = monthBreakdown.filter((row) =>
+    configuredRuntimeIds.length > 0
+      ? configuredRuntimeIds.includes(row.runtimeId as never)
+      : true
+  );
+
   const spendSeries30 = fillSeries(30, spendRows30, (row) => row.costMicros);
   const tokenSeries30 = fillSeries(30, tokenRows30, (row) => row.totalTokens);
-  const runtimeBreakdown = buildRuntimeBreakdown(filteredBreakdown);
-  const monthTokens = monthBreakdown.reduce(
+  const runtimeBreakdown = buildRuntimeBreakdown(configuredBreakdown).map((row) => ({
+    ...row,
+    label: budgetSnapshot.runtimeStates[row.runtimeId as keyof typeof budgetSnapshot.runtimeStates]
+      ?.label ?? row.runtimeId,
+  }));
+  const monthTokens = configuredMonthBreakdown.reduce(
     (sum, row) => sum + row.totalTokens,
     0
   );
 
+  const overallDaily = budgetSnapshot.statuses.find(
+    (status) => status.scopeId === "overall" && status.window === "daily"
+  );
+  const overallMonthly = budgetSnapshot.statuses.find(
+    (status) => status.scopeId === "overall" && status.window === "monthly"
+  );
+
   return (
     <div className="gradient-neutral min-h-screen p-6">
       <CostDashboard
@@ -235,9 +240,12 @@ export default async function CostsPage({
           activityType,
         }}
         summary={{
-          todaySpendMicros: findOverallSpend(budgetSnapshot.statuses, "daily"),
-          monthSpendMicros: findOverallSpend(budgetSnapshot.statuses, "monthly"),
-          todayTokens: tokenSeries30[tokenSeries30.length - 1] ?? 0,
+          monthSpendMicros: overallMonthly?.currentValue ?? 0,
+          derivedDailyBudgetMicros: overallDaily?.limitValue ?? 0,
+          remainingMonthlyHeadroomMicros: Math.max(
+            (overallMonthly?.limitValue ?? 0) - (overallMonthly?.currentValue ?? 0),
+            0
+          ),
           monthTokens,
         }}
         trendSeries={{
@@ -247,8 +255,10 @@ export default async function CostsPage({
           tokens30: tokenSeries30,
         }}
         budgetStatuses={budgetSnapshot.statuses}
+        runtimeStates={budgetSnapshot.runtimeStates}
+        pricing={budgetSnapshot.pricing}
         runtimeBreakdown={runtimeBreakdown}
-        modelBreakdown={filteredBreakdown}
+        modelBreakdown={configuredBreakdown}
         auditEntries={auditEntries}
       />
     </div>

package/src/app/dashboard/page.tsx

@@ -2,9 +2,11 @@ import { Suspense } from "react";
 import { db } from "@/lib/db";
 import { tasks, projects, workflows } from "@/lib/db/schema";
 import { desc, isNull } from "drizzle-orm";
+import { parseWorkflowState } from "@/lib/workflows/engine";
 import { KanbanBoard } from "@/components/tasks/kanban-board";
 import { SkeletonBoard } from "@/components/tasks/skeleton-board";
 import type { TaskItem } from "@/components/tasks/task-card";
+import type { WorkflowKanbanItem } from "@/components/workflows/workflow-kanban-card";
 
 export const dynamic = "force-dynamic";
 
@@ -21,38 +23,74 @@ async function BoardContent() {
     .from(projects)
     .orderBy(projects.name);
 
-  // Build project name lookup for task cards
+  // Build project name lookup
   const projectMap = new Map(allProjects.map((p) => [p.id, p.name]));
 
-  // Look up linked workflows for parent tasks (via sourceTaskId in definition JSON)
+  // Fetch all workflows for kanban display
   const allWorkflows = await db
-    .select({ id: workflows.id, definition: workflows.definition, status: workflows.status })
-    .from(workflows);
-
-  const linkedWorkflowMap = new Map<string, { workflowId: string; workflowStatus: string }>();
-  for (const w of allWorkflows) {
-    try {
-      const def = JSON.parse(w.definition);
-      if (def.sourceTaskId) {
-        linkedWorkflowMap.set(def.sourceTaskId, {
-          workflowId: w.id,
-          workflowStatus: w.status,
-        });
-      }
-    } catch { /* skip invalid JSON */ }
-  }
+    .select()
+    .from(workflows)
+    .orderBy(desc(workflows.updatedAt));
 
-  // Serialize Date objects for client component consumption
+  // Serialize tasks (no more linkedWorkflow fields)
   const serializedTasks: TaskItem[] = allTasks.map((t) => ({
     ...t,
     projectName: t.projectId ? projectMap.get(t.projectId) ?? undefined : undefined,
-    linkedWorkflowId: linkedWorkflowMap.get(t.id)?.workflowId,
-    linkedWorkflowStatus: linkedWorkflowMap.get(t.id)?.workflowStatus,
     createdAt: t.createdAt.toISOString(),
     updatedAt: t.updatedAt.toISOString(),
   }));
 
-  return <KanbanBoard initialTasks={serializedTasks} projects={allProjects} />;
+  // Build workflow kanban items with step progress
+  const serializedWorkflows: WorkflowKanbanItem[] = allWorkflows.map((w) => {
+    let stepProgress = { current: 0, total: 0 };
+    let currentStepName: string | undefined;
+
+    try {
+      const { definition, state } = parseWorkflowState(w.definition);
+      if (definition.steps) {
+        stepProgress.total = definition.steps.length;
+        if (state) {
+          stepProgress.current = state.stepStates.filter(
+            (s) => s.status === "completed"
+          ).length;
+          const running = state.stepStates.find((s) => s.status === "running");
+          if (running) {
+            currentStepName = definition.steps.find(
+              (step) => step.id === running.stepId
+            )?.name;
+          }
+        }
+      }
+    } catch {
+      /* skip parse errors */
+    }
+
+    return {
+      type: "workflow" as const,
+      id: w.id,
+      name: w.name,
+      status: w.status,
+      pattern: (() => {
+        try {
+          return JSON.parse(w.definition).pattern ?? "sequence";
+        } catch {
+          return "sequence";
+        }
+      })(),
+      projectName: w.projectId ? projectMap.get(w.projectId) ?? undefined : undefined,
+      stepProgress,
+      currentStepName,
+      createdAt: w.createdAt.toISOString(),
+    };
+  });
+
+  return (
+    <KanbanBoard
+      initialTasks={serializedTasks}
+      initialWorkflows={serializedWorkflows}
+      projects={allProjects}
+    />
+  );
 }
 
 export default function DashboardPage() {

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/playbook/[slug]/page.tsx

@@ -0,0 +1,76 @@
+import { notFound } from "next/navigation";
+import { getDocBySlug, getManifest } from "@/lib/docs/reader";
+import { getAdoptionMap } from "@/lib/docs/adoption";
+import { PlaybookDetailView } from "@/components/playbook/playbook-detail-view";
+
+export const dynamic = "force-dynamic";
+
+interface PlaybookDetailProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: PlaybookDetailProps) {
+  const { slug } = await params;
+  const doc = getDocBySlug(slug);
+  return {
+    title: doc
+      ? `${(doc.frontmatter.title as string) || slug} | Playbook | Stagent`
+      : "Not Found | Playbook",
+  };
+}
+
+export default async function PlaybookDetailPage({
+  params,
+}: PlaybookDetailProps) {
+  const { slug } = await params;
+  const [doc, manifest, adoptionMap] = await Promise.all([
+    getDocBySlug(slug),
+    getManifest(),
+    getAdoptionMap(),
+  ]);
+
+  if (!doc) notFound();
+
+  // Find related sections from manifest
+  const allSections = [...manifest.sections, ...manifest.journeys];
+  const currentSection = allSections.find((s) => s.slug === slug);
+
+  // Find related docs by shared tags
+  const currentTags = new Set(
+    (currentSection && "tags" in currentSection
+      ? (currentSection as { tags: string[] }).tags
+      : (doc.frontmatter.tags as string[]) || []
+    ).map((t) => t.toLowerCase())
+  );
+
+  const relatedSections = manifest.sections
+    .filter(
+      (s) =>
+        s.slug !== slug &&
+        s.tags.some((t) => currentTags.has(t.toLowerCase()))
+    )
+    .slice(0, 4);
+
+  const adoption = Object.fromEntries(adoptionMap);
+
+  // Collect all known doc slugs so markdown links resolve correctly
+  const allSlugs = [
+    ...manifest.sections.map((s) => s.slug),
+    ...manifest.journeys.map((j) => j.slug),
+    "getting-started",
+    "index",
+  ];
+
+  return (
+    <div className="gradient-twilight min-h-[100dvh] p-4 sm:p-6">
+      <div className="surface-page rounded-[28px] border border-border/60 p-6 shadow-[0_18px_48px_oklch(0.12_0.02_260_/_0.08)]">
+        <PlaybookDetailView
+          doc={doc}
+          relatedSections={relatedSections}
+          adoption={adoption}
+          allSlugs={allSlugs}
+        />
+      </div>
+    </div>
+  );
+}

package/src/app/playbook/page.tsx

@@ -0,0 +1,54 @@
+import { getManifest, getDocsLastGenerated } from "@/lib/docs/reader";
+import { getUsageStage } from "@/lib/docs/usage-stage";
+import { getAdoptionMap } from "@/lib/docs/adoption";
+import { getJourneyCompletions } from "@/lib/docs/journey-tracker";
+import { getSetting, setSetting } from "@/lib/settings/helpers";
+import { PlaybookHomepage } from "@/components/playbook/playbook-homepage";
+
+export const dynamic = "force-dynamic";
+
+export const metadata = {
+  title: "Playbook | Stagent",
+};
+
+export default async function PlaybookPage() {
+  const [manifest, stage, adoptionMap, lastGenerated, lastVisit] =
+    await Promise.all([
+      getManifest(),
+      getUsageStage(),
+      getAdoptionMap(),
+      getDocsLastGenerated(),
+      getSetting("lastPlaybookVisit"),
+    ]);
+
+  const journeyCompletions = getJourneyCompletions(
+    manifest.journeys,
+    adoptionMap
+  );
+
+  // Update last visit timestamp
+  await setSetting("lastPlaybookVisit", new Date().toISOString());
+
+  // Serialize maps for client component
+  const adoption = Object.fromEntries(adoptionMap);
+  const completions = Object.fromEntries(journeyCompletions);
+
+  const hasUpdates =
+    lastGenerated != null &&
+    lastVisit != null &&
+    new Date(lastGenerated) > new Date(lastVisit);
+
+  return (
+    <div className="gradient-twilight min-h-[100dvh] p-4 sm:p-6">
+      <div className="surface-page rounded-[28px] border border-border/60 p-6 shadow-[0_18px_48px_oklch(0.12_0.02_260_/_0.08)]">
+        <PlaybookHomepage
+          manifest={manifest}
+          stage={stage}
+          adoption={adoption}
+          journeyCompletions={completions}
+          hasUpdates={hasUpdates}
+        />
+      </div>
+    </div>
+  );
+}