stagent 0.3.5 → 0.4.0

package/src/app/api/settings/runtime/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSetting, setSetting } from "@/lib/settings/helpers";
+import { SETTINGS_KEYS } from "@/lib/constants/settings";
+
+export async function GET() {
+  const sdkTimeoutSeconds = await getSetting(SETTINGS_KEYS.SDK_TIMEOUT_SECONDS);
+  const maxTurns = await getSetting(SETTINGS_KEYS.MAX_TURNS);
+  return NextResponse.json({
+    sdkTimeoutSeconds: sdkTimeoutSeconds ?? "60",
+    maxTurns: maxTurns ?? "10",
+  });
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+
+  if (body.sdkTimeoutSeconds !== undefined) {
+    const seconds = parseInt(body.sdkTimeoutSeconds, 10);
+    if (isNaN(seconds) || seconds < 10 || seconds > 300) {
+      return NextResponse.json(
+        { error: "sdkTimeoutSeconds must be between 10 and 300" },
+        { status: 400 }
+      );
+    }
+    await setSetting(SETTINGS_KEYS.SDK_TIMEOUT_SECONDS, String(seconds));
+  }
+
+  if (body.maxTurns !== undefined) {
+    const turns = parseInt(body.maxTurns, 10);
+    if (isNaN(turns) || turns < 1 || turns > 50) {
+      return NextResponse.json(
+        { error: "maxTurns must be between 1 and 50" },
+        { status: 400 }
+      );
+    }
+    await setSetting(SETTINGS_KEYS.MAX_TURNS, String(turns));
+  }
+
+  const sdkTimeoutSeconds = await getSetting(SETTINGS_KEYS.SDK_TIMEOUT_SECONDS);
+  const maxTurns = await getSetting(SETTINGS_KEYS.MAX_TURNS);
+
+  return NextResponse.json({
+    sdkTimeoutSeconds: sdkTimeoutSeconds ?? "60",
+    maxTurns: maxTurns ?? "10",
+  });
+}

package/src/app/book/page.tsx

@@ -0,0 +1,14 @@
+import { PageShell } from "@/components/shared/page-shell";
+import { BookReader } from "@/components/book/book-reader";
+import { getBook } from "@/lib/book/content";
+
+export const dynamic = "force-dynamic";
+
+export default function BookPage() {
+  const book = getBook();
+  return (
+    <PageShell fullBleed>
+      <BookReader chapters={book.chapters} />
+    </PageShell>
+  );
+}

package/src/app/chat/page.tsx

@@ -4,7 +4,12 @@ import { ChatShell } from "@/components/chat/chat-shell";
 
 export const dynamic = "force-dynamic";
 
-export default async function ChatPage() {
+export default async function ChatPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ c?: string }>;
+}) {
+  const params = await searchParams;
   const [conversations, promptCategories] = await Promise.all([
     listConversations({ status: "active" }),
     getPromptCategories(),
@@ -14,6 +19,7 @@ export default async function ChatPage() {
     <ChatShell
       initialConversations={conversations}
       promptCategories={promptCategories}
+      initialActiveId={params.c ?? null}
     />
   );
 }

package/src/app/globals.css

@@ -474,6 +474,25 @@
   100% { transform: translateX(100%); }
 }
 
+/* Fade-in for animated text replacement */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(2px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out;
+}
+
+/* Pulse-slide for indeterminate progress bars */
+@keyframes pulse-slide {
+  0% { transform: translateX(-100%); opacity: 0.4; }
+  50% { transform: translateX(100%); opacity: 1; }
+  100% { transform: translateX(300%); opacity: 0.4; }
+}
+.animate-pulse-slide {
+  animation: pulse-slide 2s ease-in-out infinite;
+}
+
 /* Card exit (ghost card deletion) */
 @keyframes card-exit {
   0% {
@@ -545,6 +564,362 @@ body {
   outline-offset: 2px;
 }
 
+/* ─── Book Reader Container (theme backgrounds) ─── */
+.book-reader-container {
+  background: var(--background);
+  color: var(--foreground);
+}
+[data-book-theme="sepia"].book-reader-container {
+  background: oklch(0.95 0.03 75);
+  color: oklch(0.25 0.04 60);
+}
+[data-book-theme="dark"].book-reader-container {
+  background: oklch(0.14 0.02 250);
+  color: oklch(0.88 0.01 250);
+}
+
+/* Theme preview buttons in settings */
+.book-theme-preview-sepia:not([class*="border-primary"]) {
+  background: oklch(0.95 0.03 75);
+}
+.book-theme-preview-dark:not([class*="border-primary"]) {
+  background: oklch(0.18 0.02 250);
+  color: oklch(0.88 0.01 250);
+}
+
+/* ─── Book Reader Prose ─── */
+.book-prose {
+  & p { margin-bottom: 1.25em; }
+  & blockquote {
+    border-left: 3px solid var(--border);
+    padding-left: 1em;
+    margin: 1.5em 0;
+    color: var(--muted-foreground);
+    font-style: italic;
+  }
+  & h2 {
+    font-size: 1.5em;
+    font-weight: 700;
+    margin-top: 2.5em;
+    margin-bottom: 0.75em;
+    letter-spacing: -0.01em;
+  }
+  & h3 {
+    font-size: 1.25em;
+    font-weight: 600;
+    margin-top: 2em;
+    margin-bottom: 0.75em;
+  }
+  & h4 {
+    font-size: 1.1em;
+    font-weight: 600;
+    margin-top: 1.75em;
+    margin-bottom: 0.5em;
+  }
+  & ul, & ol {
+    margin: 1em 0;
+    padding-left: 1.5em;
+  }
+  & ul { list-style-type: disc; }
+  & ol { list-style-type: decimal; }
+  & li { margin-bottom: 0.4em; }
+  & li > ul, & li > ol {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+  }
+  & strong { font-weight: 650; }
+  & em { font-style: italic; }
+  & code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: 0.15em 0.35em;
+    border-radius: 4px;
+    background: var(--muted);
+  }
+  & a {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: opacity 0.15s;
+    &:hover { opacity: 0.8; }
+  }
+  & hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 2em 0;
+  }
+  /* Tables */
+  & table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5em 0;
+    font-size: 0.9em;
+  }
+  & thead th {
+    text-align: left;
+    font-weight: 600;
+    padding: 0.5em 0.75em;
+    border-bottom: 2px solid var(--border);
+  }
+  & tbody td {
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid var(--border);
+    vertical-align: top;
+  }
+  & tbody tr:last-child td { border-bottom: none; }
+  /* Images within markdown */
+  & img {
+    max-width: 100%;
+    border-radius: 8px;
+    margin: 1.5em auto;
+    display: block;
+  }
+}
+
+/* ─── Book Code Blocks (syntax-highlighted) ─── */
+.book-code-header {
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-bottom: none;
+}
+.book-code-pre {
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  font-family: var(--font-mono);
+}
+
+/* sugar-high token colors — light theme */
+.book-code-pre code {
+  --sh-class: oklch(0.55 0.22 260);        /* indigo - classes */
+  --sh-identifier: var(--foreground);       /* default text */
+  --sh-sign: oklch(0.45 0.03 250);         /* punctuation */
+  --sh-property: oklch(0.50 0.17 260);     /* properties */
+  --sh-entity: oklch(0.52 0.17 165);       /* entities — emerald */
+  --sh-jsxliterals: oklch(0.55 0.19 45);   /* JSX text — warm */
+  --sh-string: oklch(0.52 0.17 165);       /* strings — emerald */
+  --sh-keyword: oklch(0.55 0.22 300);      /* keywords — magenta */
+  --sh-comment: oklch(0.55 0.02 250);      /* comments — muted */
+}
+
+/* sugar-high token colors — sepia reader theme */
+[data-book-theme="sepia"] .book-code-header {
+  background: oklch(0.93 0.03 75);
+  border-color: oklch(0.85 0.04 75);
+}
+[data-book-theme="sepia"] .book-code-pre {
+  background: oklch(0.96 0.02 75);
+  border-color: oklch(0.85 0.04 75);
+}
+
+/* sugar-high token colors — dark reader theme */
+[data-book-theme="dark"] .book-code-header {
+  background: oklch(0.20 0.02 250);
+  border-color: oklch(0.28 0.02 250);
+}
+[data-book-theme="dark"] .book-code-pre {
+  background: oklch(0.14 0.02 250);
+  border-color: oklch(0.28 0.02 250);
+}
+[data-book-theme="dark"] .book-code-pre code {
+  --sh-class: oklch(0.72 0.18 260);
+  --sh-identifier: oklch(0.88 0.01 250);
+  --sh-sign: oklch(0.60 0.02 250);
+  --sh-property: oklch(0.70 0.16 260);
+  --sh-entity: oklch(0.68 0.17 165);
+  --sh-jsxliterals: oklch(0.70 0.16 45);
+  --sh-string: oklch(0.68 0.17 165);
+  --sh-keyword: oklch(0.72 0.18 300);
+  --sh-comment: oklch(0.48 0.02 250);
+}
+
+/* system dark mode overrides for code blocks */
+.dark .book-code-header {
+  background: oklch(0.20 0.02 250);
+  border-color: oklch(0.28 0.02 250);
+}
+.dark .book-code-pre {
+  background: oklch(0.14 0.02 250);
+  border-color: oklch(0.28 0.02 250);
+}
+.dark .book-code-pre code {
+  --sh-class: oklch(0.72 0.18 260);
+  --sh-identifier: oklch(0.88 0.01 250);
+  --sh-sign: oklch(0.60 0.02 250);
+  --sh-property: oklch(0.70 0.16 260);
+  --sh-entity: oklch(0.68 0.17 165);
+  --sh-jsxliterals: oklch(0.70 0.16 45);
+  --sh-string: oklch(0.68 0.17 165);
+  --sh-keyword: oklch(0.72 0.18 300);
+  --sh-comment: oklch(0.48 0.02 250);
+}
+
+/* ─── Book Image Blocks ─── */
+.book-image {
+  border: 1px solid var(--border);
+}
+.book-image-breakout {
+  width: 170%;
+  max-width: min(170%, calc(100vw - 16rem));
+  margin-left: -35%;
+}
+.book-image-breakout figcaption {
+  width: 58.82%;
+  margin-left: 20.59%;
+}
+.book-image-skeleton {
+  background: var(--muted);
+  border: 1px solid var(--border);
+}
+[data-book-theme="sepia"] .book-image {
+  border-color: oklch(0.85 0.04 75);
+}
+[data-book-theme="sepia"] .book-image-skeleton {
+  background: oklch(0.93 0.03 75);
+  border-color: oklch(0.85 0.04 75);
+}
+[data-book-theme="dark"] .book-image {
+  border-color: oklch(0.28 0.02 250);
+}
+
+/* ─── Book Callout Blocks ─── */
+.book-callout-tip {
+  border-left-color: oklch(0.52 0.17 165);
+  background: oklch(0.52 0.17 165 / 0.05);
+}
+.book-callout-tip .book-callout-icon { color: oklch(0.52 0.17 165); }
+.book-callout-tip .book-callout-title { color: oklch(0.42 0.12 165); }
+
+.book-callout-warning {
+  border-left-color: oklch(0.65 0.18 75);
+  background: oklch(0.65 0.18 75 / 0.05);
+}
+.book-callout-warning .book-callout-icon { color: oklch(0.65 0.18 75); }
+.book-callout-warning .book-callout-title { color: oklch(0.55 0.14 75); }
+
+.book-callout-info {
+  border-left-color: oklch(0.55 0.20 260);
+  background: oklch(0.55 0.20 260 / 0.05);
+}
+.book-callout-info .book-callout-icon { color: oklch(0.55 0.20 260); }
+.book-callout-info .book-callout-title { color: oklch(0.45 0.16 260); }
+
+.book-callout-lesson {
+  border-left-color: oklch(0.55 0.20 300);
+  background: oklch(0.55 0.20 300 / 0.05);
+}
+.book-callout-lesson .book-callout-icon { color: oklch(0.55 0.20 300); }
+.book-callout-lesson .book-callout-title { color: oklch(0.45 0.16 300); }
+
+
+/* callout body inline code */
+.book-callout-body code {
+  background: oklch(0 0 0 / 0.05);
+}
+
+/* sepia callout overrides */
+[data-book-theme="sepia"] .book-callout-tip { background: oklch(0.52 0.17 165 / 0.08); }
+[data-book-theme="sepia"] .book-callout-warning { background: oklch(0.65 0.18 75 / 0.08); }
+[data-book-theme="sepia"] .book-callout-info { background: oklch(0.55 0.20 260 / 0.08); }
+[data-book-theme="sepia"] .book-callout-lesson { background: oklch(0.55 0.20 300 / 0.08); }
+[data-book-theme="sepia"] .book-callout-body code { background: oklch(0 0 0 / 0.06); }
+
+/* dark callout overrides */
+[data-book-theme="dark"] .book-callout-tip {
+  background: oklch(0.52 0.17 165 / 0.10);
+}
+[data-book-theme="dark"] .book-callout-tip .book-callout-icon { color: oklch(0.68 0.17 165); }
+[data-book-theme="dark"] .book-callout-tip .book-callout-title { color: oklch(0.72 0.14 165); }
+
+[data-book-theme="dark"] .book-callout-warning {
+  background: oklch(0.65 0.18 75 / 0.10);
+}
+[data-book-theme="dark"] .book-callout-warning .book-callout-icon { color: oklch(0.75 0.18 75); }
+[data-book-theme="dark"] .book-callout-warning .book-callout-title { color: oklch(0.80 0.14 75); }
+
+[data-book-theme="dark"] .book-callout-info {
+  background: oklch(0.55 0.20 260 / 0.10);
+}
+[data-book-theme="dark"] .book-callout-info .book-callout-icon { color: oklch(0.70 0.18 260); }
+[data-book-theme="dark"] .book-callout-info .book-callout-title { color: oklch(0.75 0.14 260); }
+
+[data-book-theme="dark"] .book-callout-lesson {
+  background: oklch(0.55 0.20 300 / 0.10);
+}
+[data-book-theme="dark"] .book-callout-lesson .book-callout-icon { color: oklch(0.70 0.18 300); }
+[data-book-theme="dark"] .book-callout-lesson .book-callout-title { color: oklch(0.75 0.14 300); }
+
+
+[data-book-theme="dark"] .book-callout-body code { background: oklch(1 0 0 / 0.10); }
+
+/* system dark mode callout overrides */
+.dark .book-callout-tip .book-callout-icon { color: oklch(0.68 0.17 165); }
+.dark .book-callout-tip .book-callout-title { color: oklch(0.72 0.14 165); }
+.dark .book-callout-warning .book-callout-icon { color: oklch(0.75 0.18 75); }
+.dark .book-callout-warning .book-callout-title { color: oklch(0.80 0.14 75); }
+.dark .book-callout-info .book-callout-icon { color: oklch(0.70 0.18 260); }
+.dark .book-callout-info .book-callout-title { color: oklch(0.75 0.14 260); }
+.dark .book-callout-lesson .book-callout-icon { color: oklch(0.70 0.18 300); }
+.dark .book-callout-lesson .book-callout-title { color: oklch(0.75 0.14 300); }
+.dark .book-callout-body code { background: oklch(1 0 0 / 0.10); }
+
+/* ─── Book Interactive Blocks ─── */
+.book-interactive-link {
+  border-color: var(--border);
+}
+.book-interactive-link:hover {
+  border-color: var(--primary);
+  background: oklch(0.50 0.20 260 / 0.05);
+}
+.book-interactive-collapsible {
+  border-color: var(--border);
+}
+.book-interactive-quiz {
+  border-color: var(--border);
+}
+
+/* quiz answer states */
+.book-quiz-correct {
+  border-color: oklch(0.52 0.17 165 / 0.5);
+  background: oklch(0.52 0.17 165 / 0.05);
+  color: oklch(0.42 0.12 165);
+}
+.book-quiz-wrong {
+  border-color: oklch(0.55 0.22 25 / 0.5);
+  background: oklch(0.55 0.22 25 / 0.05);
+  color: oklch(0.45 0.18 25);
+}
+.book-quiz-explanation-correct {
+  border-left-color: oklch(0.52 0.17 165 / 0.3);
+  background: oklch(0.52 0.17 165 / 0.05);
+}
+.book-quiz-explanation-wrong {
+  border-left-color: oklch(0.65 0.18 75 / 0.3);
+  background: oklch(0.65 0.18 75 / 0.05);
+}
+
+/* dark reader quiz overrides */
+[data-book-theme="dark"] .book-quiz-correct {
+  color: oklch(0.72 0.14 165);
+}
+[data-book-theme="dark"] .book-quiz-wrong {
+  color: oklch(0.72 0.16 25);
+}
+[data-book-theme="dark"] .book-interactive-link:hover {
+  background: oklch(0.65 0.20 260 / 0.10);
+}
+
+/* dark reader interactive borders */
+[data-book-theme="dark"] .book-interactive-link,
+[data-book-theme="dark"] .book-interactive-collapsible,
+[data-book-theme="dark"] .book-interactive-quiz {
+  border-color: oklch(0.28 0.02 250);
+}
+
+/* sepia interactive backgrounds */
+[data-book-theme="sepia"] .book-interactive-link:hover {
+  background: oklch(0.50 0.20 260 / 0.06);
+}
+
 /* Reduced motion — disable all animations and transitions */
 @media (prefers-reduced-motion: reduce) {
   *,

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

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 import { db } from "@/lib/db";
-import { projects, tasks } from "@/lib/db/schema";
-import { eq, count } from "drizzle-orm";
+import { projects, tasks, workflows } from "@/lib/db/schema";
+import { eq, count, getTableColumns } from "drizzle-orm";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { COLUMN_ORDER } from "@/lib/constants/task-status";
@@ -28,26 +28,41 @@ export default async function ProjectDetailPage({
   if (!project) notFound();
 
   const projectTasks = await db
-    .select()
+    .select({
+      ...getTableColumns(tasks),
+      workflowName: workflows.name,
+      workflowStatus: workflows.status,
+    })
     .from(tasks)
+    .leftJoin(workflows, eq(tasks.workflowId, workflows.id))
     .where(eq(tasks.projectId, id))
     .orderBy(tasks.priority, tasks.createdAt);
 
-  // Status breakdown
+  // Status breakdown (standalone tasks only for headline metrics)
   const statusCounts: Record<string, number> = {};
+  const standaloneForCounts = projectTasks.filter((t) => !t.workflowId);
   for (const status of COLUMN_ORDER) {
-    statusCounts[status] = projectTasks.filter((t) => t.status === status).length;
+    statusCounts[status] = standaloneForCounts.filter((t) => t.status === status).length;
   }
 
   const completionTrend = await getProjectCompletionTrend(id, 14);
-  const totalTasks = projectTasks.length;
+  const totalTasks = standaloneForCounts.length;
+
+  const standaloneTasks = projectTasks.filter((t) => !t.workflowId);
+  const workflowTasks = projectTasks.filter((t) => t.workflowId);
 
   const serializedTasks = projectTasks.map((t) => ({
     ...t,
     createdAt: t.createdAt.toISOString(),
     updatedAt: t.updatedAt.toISOString(),
+    workflowName: t.workflowName ?? null,
+    workflowStatus: t.workflowStatus ?? null,
   }));
 
+  const standaloneCount = standaloneTasks.length;
+  const workflowCount = workflowTasks.length;
+  const workflowGroupCount = new Set(workflowTasks.map((t) => t.workflowId)).size;
+
   const statusVariant: Record<string, "default" | "secondary" | "outline"> = {
     active: "default",
     paused: "secondary",
@@ -129,6 +144,16 @@ export default async function ProjectDetailPage({
         </div>
       )}
 
+      {/* Task count summary */}
+      {(standaloneCount > 0 || workflowCount > 0) && (
+        <p className="text-xs text-muted-foreground mb-4">
+          {standaloneCount} standalone task{standaloneCount !== 1 ? "s" : ""}
+          {workflowCount > 0 && (
+            <> &middot; {workflowCount} workflow task{workflowCount !== 1 ? "s" : ""} across {workflowGroupCount} workflow{workflowGroupCount !== 1 ? "s" : ""}</>
+          )}
+        </p>
+      )}
+
       <ProjectDetailClient tasks={serializedTasks} projectId={id} />
     </PageShell>
   );

package/src/app/settings/page.tsx

@@ -4,6 +4,7 @@ import { PermissionsSections } from "@/components/settings/permissions-sections"
 import { DataManagementSection } from "@/components/settings/data-management-section";
 import { BudgetGuardrailsSection } from "@/components/settings/budget-guardrails-section";
 import { ChatSettingsSection } from "@/components/settings/chat-settings-section";
+import { RuntimeTimeoutSection } from "@/components/settings/runtime-timeout-section";
 import { PageShell } from "@/components/shared/page-shell";
 
 export const dynamic = "force-dynamic";
@@ -15,6 +16,7 @@ export default function SettingsPage() {
         <AuthConfigSection />
         <OpenAIRuntimeSection />
         <ChatSettingsSection />
+        <RuntimeTimeoutSection />
         <BudgetGuardrailsSection />
         <PermissionsSections />
         <DataManagementSection />

package/src/app/{playbook → user-guide}/[slug]/page.tsx

@@ -3,6 +3,8 @@ import { getDocBySlug, getManifest } from "@/lib/docs/reader";
 import { getAdoptionMap } from "@/lib/docs/adoption";
 import { PageShell } from "@/components/shared/page-shell";
 import { PlaybookDetailView } from "@/components/playbook/playbook-detail-view";
+import { getChapterForDoc } from "@/lib/book/chapter-mapping";
+import { getChapter } from "@/lib/book/content";
 
 export const dynamic = "force-dynamic";
 
@@ -15,8 +17,8 @@ export async function generateMetadata({ params }: PlaybookDetailProps) {
   const doc = getDocBySlug(slug);
   return {
     title: doc
-      ? `${(doc.frontmatter.title as string) || slug} | Playbook | Stagent`
-      : "Not Found | Playbook",
+      ? `${(doc.frontmatter.title as string) || slug} | User Guide | Stagent`
+      : "Not Found | User Guide",
   };
 }
 
@@ -54,6 +56,13 @@ export default async function PlaybookDetailPage({
 
   const adoption = Object.fromEntries(adoptionMap);
 
+  // Find related book chapter for "Read the story" breadcrumb
+  const bookChapterId = getChapterForDoc(slug);
+  const bookChapter = bookChapterId ? getChapter(bookChapterId) : undefined;
+  const bookChapterLink = bookChapter && bookChapterId
+    ? { title: `Ch. ${bookChapter.number}: ${bookChapter.title}`, id: bookChapterId }
+    : undefined;
+
   // Collect all known doc slugs so markdown links resolve correctly
   const allSlugs = [
     ...manifest.sections.map((s) => s.slug),
@@ -69,6 +78,7 @@ export default async function PlaybookDetailPage({
         relatedSections={relatedSections}
         adoption={adoption}
         allSlugs={allSlugs}
+        bookChapterLink={bookChapterLink}
       />
     </PageShell>
   );

package/src/app/{playbook → user-guide}/page.tsx

@@ -9,7 +9,7 @@ import { PageShell } from "@/components/shared/page-shell";
 export const dynamic = "force-dynamic";
 
 export const metadata = {
-  title: "Playbook | Stagent",
+  title: "User Guide | Stagent",
 };
 
 export default async function PlaybookPage() {
@@ -40,7 +40,7 @@ export default async function PlaybookPage() {
     new Date(lastGenerated) > new Date(lastVisit);
 
   return (
-    <PageShell title="Playbook">
+    <PageShell title="User Guide">
       <PlaybookHomepage
         manifest={manifest}
         stage={stage}

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

@@ -1,9 +1,12 @@
 import { notFound } from "next/navigation";
+import Link from "next/link";
 import { db } from "@/lib/db";
-import { workflows } from "@/lib/db/schema";
+import { workflows, projects } from "@/lib/db/schema";
 import { eq } from "drizzle-orm";
 import { PageShell } from "@/components/shared/page-shell";
 import { WorkflowStatusView } from "@/components/workflows/workflow-status-view";
+import { Badge } from "@/components/ui/badge";
+import { FolderKanban } from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
@@ -21,8 +24,31 @@ export default async function WorkflowDetailPage({
 
   if (!workflow) notFound();
 
+  // Fetch project name for back-link
+  let projectName: string | null = null;
+  if (workflow.projectId) {
+    const [project] = await db
+      .select({ name: projects.name })
+      .from(projects)
+      .where(eq(projects.id, workflow.projectId));
+    projectName = project?.name ?? null;
+  }
+
   return (
-    <PageShell backHref="/workflows" backLabel="Back to Workflows">
+    <PageShell
+      backHref="/workflows"
+      backLabel="Back to Workflows"
+      actions={
+        workflow.projectId && projectName ? (
+          <Link href={`/projects/${workflow.projectId}`}>
+            <Badge variant="outline" className="gap-1.5 hover:bg-accent">
+              <FolderKanban className="h-3 w-3" />
+              {projectName}
+            </Badge>
+          </Link>
+        ) : undefined
+      }
+    >
       <WorkflowStatusView workflowId={id} />
     </PageShell>
   );