ralphflow 0.5.2 → 0.5.3

package/dist/{chunk-DOC64TD6.js → chunk-CA4XP6KI.js}

@@ -4,7 +4,7 @@ import { join, dirname } from "path";
 import { fileURLToPath } from "url";
 import { stringify as stringifyYaml } from "yaml";
 var __dirname = dirname(fileURLToPath(import.meta.url));
-var BUILT_IN_TEMPLATES = ["code-implementation", "research"];
+var BUILT_IN_TEMPLATES = ["code-implementation", "research", "tdd-implementation", "systematic-debugging", "design-review", "code-review"];
 function resolveTemplatePath(templateName) {
   const candidates = [
     join(__dirname, "..", "templates", templateName),

package/dist/ralphflow.js

@@ -12,11 +12,11 @@ import {
   resolveFlowDir,
   resolveLoop,
   showStatus
-} from "./chunk-DOC64TD6.js";
+} from "./chunk-CA4XP6KI.js";
 
 // src/cli/index.ts
-import { Command as Command7 } from "commander";
-import chalk8 from "chalk";
+import { Command as Command8 } from "commander";
+import chalk9 from "chalk";
 import { exec } from "child_process";
 
 // src/cli/init.ts
@@ -29,9 +29,9 @@ import { join } from "path";
 import { createInterface } from "readline";
 import chalk from "chalk";
 function ask(rl, question) {
-  return new Promise((resolve2) => {
+  return new Promise((resolve3) => {
     rl.question(chalk.cyan("? ") + question + " ", (answer) => {
-      resolve2(answer.trim());
+      resolve3(answer.trim());
     });
   });
 }
@@ -100,7 +100,7 @@ function listFlows(ralphFlowDir) {
 }
 
 // src/cli/init.ts
-var initCommand = new Command("init").description("Initialize a new RalphFlow flow").option("-t, --template <name>", "Template to use (code-implementation, research)").option("-n, --name <name>", "Custom name for the flow").action(async (opts) => {
+var initCommand = new Command("init").description("Initialize a new RalphFlow flow").option("-t, --template <name>", "Template to use (code-implementation, research, tdd-implementation, systematic-debugging, design-review, code-review)").option("-n, --name <name>", "Custom name for the flow").action(async (opts) => {
   try {
     await initProject(process.cwd(), { template: opts.template, name: opts.name });
   } catch (err) {
@@ -136,7 +136,7 @@ async function spawnClaude(options) {
   if (model) {
     args.unshift("--model", model);
   }
-  return new Promise((resolve2, reject) => {
+  return new Promise((resolve3, reject) => {
     const child = spawn("claude", args, {
       cwd,
       stdio: "inherit",
@@ -146,7 +146,7 @@ async function spawnClaude(options) {
       reject(new Error(`Failed to spawn claude: ${err.message}`));
     });
     child.on("close", (code, signal) => {
-      resolve2({
+      resolve3({
         output: "",
         exitCode: code,
         signal
@@ -524,7 +524,7 @@ var runCommand = new Command2("run").description("Run a loop").argument("<loop>"
   try {
     let dashboardHandle;
     if (opts.ui) {
-      const { startDashboard } = await import("./server-EX5MWYW4.js");
+      const { startDashboard } = await import("./server-64NQCIKJ.js");
       dashboardHandle = await startDashboard({ cwd: process.cwd() });
     }
     await runLoop(loop, {
@@ -550,7 +550,7 @@ var e2eCommand = new Command3("e2e").description("Run all loops end-to-end with
   try {
     let dashboardHandle;
     if (opts.ui) {
-      const { startDashboard } = await import("./server-EX5MWYW4.js");
+      const { startDashboard } = await import("./server-64NQCIKJ.js");
       dashboardHandle = await startDashboard({ cwd: process.cwd() });
     }
     await runE2E({
@@ -587,7 +587,7 @@ var statusCommand = new Command4("status").description("Show pipeline status").o
 // src/cli/dashboard.ts
 import { Command as Command5 } from "commander";
 var dashboardCommand = new Command5("dashboard").alias("ui").description("Start the web dashboard").option("-p, --port <port>", "Port number", "4242").action(async (opts) => {
-  const { startDashboard } = await import("./server-EX5MWYW4.js");
+  const { startDashboard } = await import("./server-64NQCIKJ.js");
   await startDashboard({ cwd: process.cwd(), port: parseInt(opts.port, 10) });
 });
 
@@ -1094,28 +1094,142 @@ var createTemplateCommand = new Command6("create-template").description("Create
   }
 });
 
+// src/cli/summarize.ts
+import { Command as Command7 } from "commander";
+import chalk8 from "chalk";
+import { existsSync as existsSync3 } from "fs";
+import { join as join3, resolve as resolve2 } from "path";
+var SUMMARIZE_PROMPT = `You are summarizing an archived RalphFlow workflow run.
+
+## What to read
+
+This directory is an archived app snapshot. It contains:
+- Loop subdirectories (e.g. \`00-story-loop/\`, \`01-tasks-loop/\`, \`02-delivery-loop/\`) \u2014 each has:
+  - \`stories.md\` or \`tasks.md\` \u2014 the work items with \`## STORY-N:\` or \`## TASK-N:\` headers
+  - \`tracker.md\` \u2014 completion state with \`- [x]\` (done) and \`- [ ]\` (incomplete) checkboxes, \`completed_tasks\`/\`completed_stories\` lists, and agent activity logs
+- \`ralphflow.yaml\` \u2014 pipeline configuration
+
+Read ALL \`.md\` files across all subdirectories. Parse stories, task groups (\`# TASK-GROUP-N:\` headers in tasks.md), and individual tasks. Determine completion from tracker checkboxes: \`[x]\` = completed, \`[ ]\` = incomplete.
+
+## What to write
+
+Write a file called \`summary.md\` in the current directory with this exact structure:
+
+\`\`\`
+# Archive Summary
+
+**N stories \xB7 N task groups \xB7 N/N tasks completed \xB7 N agents**
+
+## Pipeline
+
+\\\`\\\`\\\`
+STORY-1: Title
+\u251C\u2500\u2500 TASK-GROUP-1: Title
+\u2502   \u251C\u2500\u2500 \u2713 TASK-1: Title
+\u2502   \u251C\u2500\u2500 \u2713 TASK-2: Title
+\u2502   \u2514\u2500\u2500 \u25CB TASK-3: Title
+\u2514\u2500\u2500 TASK-GROUP-2: Title
+    \u2514\u2500\u2500 \u2713 TASK-4: Title
+
+STORY-2: Title
+\u2514\u2500\u2500 TASK-GROUP-3: Title
+    \u251C\u2500\u2500 \u2713 TASK-5: Title
+    \u2514\u2500\u2500 \u2713 TASK-6: Title
+\\\`\\\`\\\`
+
+## What was built
+
+**STORY-1: Title** \u2014 1-2 sentence narrative of what was accomplished and why.
+
+**STORY-2: Title** \u2014 1-2 sentence narrative.
+
+## Key decisions
+
+- Decision or trade-off noted in tracker logs or task descriptions
+- Another significant decision
+\`\`\`
+
+Rules:
+- Use \`\u2713\` for completed tasks, \`\u25CB\` for incomplete
+- The ASCII tree uses box-drawing characters (\`\u251C\u2500\u2500 \u2514\u2500\u2500 \u2502\`)
+- Stats line counts: stories (from stories.md headers), task groups, tasks completed vs total, unique agents (from tracker agent columns)
+- Story narratives should capture *what was built and why* \u2014 not just list tasks
+- Key decisions come from tracker logs, task descriptions, or trade-offs visible in the work
+- Keep the whole file under 80 lines \u2014 it should fit on one screen
+- If no tasks.md exists (e.g. a research pipeline), adapt: use whatever entity headers exist (topics, stories, etc.)
+
+After writing summary.md, you are done. Do not modify any other files.`;
+var summarizeCommand = new Command7("summarize").description("Generate a summary of an archived workflow run").argument("<app>", "App name (e.g., code-implementation)").argument("<archive-date>", "Archive timestamp (e.g., 2026-03-14_15-30)").option("-m, --model <model>", "Claude model to use").action(async (app, archiveDate, opts) => {
+  if (app.includes("..") || app.includes("/") || app.includes("\\")) {
+    console.error(chalk8.red("\n  Invalid app name.\n"));
+    process.exit(1);
+  }
+  if (archiveDate.includes("..") || archiveDate.includes("/") || archiveDate.includes("\\")) {
+    console.error(chalk8.red("\n  Invalid archive date.\n"));
+    process.exit(1);
+  }
+  const archiveDir = resolve2(process.cwd(), ".ralph-flow", ".archives", app, archiveDate);
+  if (!existsSync3(archiveDir)) {
+    const appArchivesDir = join3(process.cwd(), ".ralph-flow", ".archives", app);
+    if (!existsSync3(appArchivesDir)) {
+      console.error(chalk8.red(`
+  No archives found for app "${app}".`));
+      console.error(chalk8.dim(`  Archive an app first via the dashboard.
+`));
+    } else {
+      const { readdirSync: readdirSync3 } = await import("fs");
+      const available = readdirSync3(appArchivesDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name).sort().reverse();
+      console.error(chalk8.red(`
+  Archive "${archiveDate}" not found for app "${app}".`));
+      if (available.length > 0) {
+        console.error(chalk8.dim(`  Available archives:`));
+        for (const a of available) {
+          console.error(chalk8.dim(`    ${a}`));
+        }
+      }
+      console.error("");
+    }
+    process.exit(1);
+  }
+  console.log(chalk8.dim(`
+  Summarizing archive: ${app}/${archiveDate}
+`));
+  try {
+    await spawnClaude({
+      prompt: SUMMARIZE_PROMPT,
+      model: opts.model,
+      cwd: archiveDir
+    });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    console.error(chalk8.red(`
+  ${msg}
+`));
+    process.exit(1);
+  }
+});
+
 // src/cli/index.ts
-var program = new Command7().name("ralphflow").description("Multi-agent AI workflow orchestration for Claude Code").version("0.1.0").addCommand(initCommand).addCommand(runCommand).addCommand(e2eCommand).addCommand(statusCommand).addCommand(dashboardCommand).addCommand(createTemplateCommand).action(async () => {
-  const port = 4242;
-  const { startDashboard } = await import("./server-EX5MWYW4.js");
-  await startDashboard({ cwd: process.cwd(), port });
+var program = new Command8().name("ralphflow").description("Multi-agent AI workflow orchestration for Claude Code").version("0.1.0").addCommand(initCommand).addCommand(runCommand).addCommand(e2eCommand).addCommand(statusCommand).addCommand(dashboardCommand).addCommand(createTemplateCommand).addCommand(summarizeCommand).action(async () => {
+  const { startDashboard } = await import("./server-64NQCIKJ.js");
+  const { port } = await startDashboard({ cwd: process.cwd() });
   const url = `http://localhost:${port}`;
   exec(`open "${url}"`, (err) => {
     if (err) {
-      console.log(chalk8.dim(`  Open ${url} in your browser`));
+      console.log(chalk9.dim(`  Open ${url} in your browser`));
     }
   });
 });
 process.on("SIGINT", () => {
   console.log();
-  console.log(chalk8.dim("  Interrupted."));
+  console.log(chalk9.dim("  Interrupted."));
   process.exit(130);
 });
 program.configureOutput({
   writeErr: (str) => {
     const clean = str.replace(/^error: /, "");
     if (clean.trim()) {
-      console.error(chalk8.red(`  ${clean.trim()}`));
+      console.error(chalk9.red(`  ${clean.trim()}`));
     }
   }
 });

package/dist/{server-EX5MWYW4.js → server-64NQCIKJ.js}

@@ -15,12 +15,12 @@ import {
   resolveFlowDir,
   resolveTemplatePathWithCustom,
   validateTemplateName
-} from "./chunk-DOC64TD6.js";
+} from "./chunk-CA4XP6KI.js";
 
 // src/dashboard/server.ts
 import { Hono as Hono2 } from "hono";
 import { cors } from "hono/cors";
-import { serve } from "@hono/node-server";
+import { createAdaptorServer } from "@hono/node-server";
 import { readFileSync as readFileSync3, existsSync as existsSync3 } from "fs";
 import { join as join4, dirname, extname } from "path";
 import { fileURLToPath } from "url";
@@ -45,13 +45,13 @@ function broadcastWs(wss, event) {
     }
   }
 }
-function createApiRoutes(cwd, port = 4242, wss) {
+function createApiRoutes(cwd, portRef, wss) {
   const api = new Hono();
   api.get("/api/context", (c) => {
     return c.json({
       cwd,
       projectName: basename(cwd),
-      port
+      port: portRef.value
     });
   });
   api.get("/api/apps", (c) => {
@@ -175,24 +175,51 @@ function createApiRoutes(cwd, port = 4242, wss) {
       mkdirSync(archiveDir, { recursive: true });
       cpSync(flowDir, archiveDir, { recursive: true });
       let templateDir;
+      let usedFallbackReset = false;
       try {
         templateDir = resolveTemplatePathWithCustom(config.name, cwd);
       } catch {
+        usedFallbackReset = true;
+        console.warn(`[archive] Template "${config.name}" not found \u2014 using fallback reset`);
       }
-      for (const loop of Object.values(config.loops)) {
+      for (const [loopKey, loop] of Object.entries(config.loops)) {
+        const appTracker = join(flowDir, loop.tracker);
         if (templateDir) {
           const templateTracker = join(templateDir, "loops", loop.tracker);
-          const appTracker = join(flowDir, loop.tracker);
           if (existsSync(templateTracker)) {
             writeFileSync(appTracker, readFileSync(templateTracker, "utf-8"));
           }
+        } else if (existsSync(appTracker)) {
+          const title = loop.name || loopKey;
+          writeFileSync(appTracker, `# ${title} \u2014 Tracker
+
+- stage: idle
+`);
         }
-        if (loop.data_files && templateDir) {
+        if (loop.data_files) {
           for (const dataFile of loop.data_files) {
-            const templateData = join(templateDir, "loops", dataFile);
             const appData = join(flowDir, dataFile);
-            if (existsSync(templateData)) {
-              writeFileSync(appData, readFileSync(templateData, "utf-8"));
+            if (templateDir) {
+              const templateData = join(templateDir, "loops", dataFile);
+              if (existsSync(templateData)) {
+                writeFileSync(appData, readFileSync(templateData, "utf-8"));
+              }
+            } else if (existsSync(appData)) {
+              const fileName = basename(dataFile, ".md");
+              const header = fileName.charAt(0).toUpperCase() + fileName.slice(1);
+              writeFileSync(appData, `# ${header}
+`);
+            }
+          }
+        }
+        if (loop.directories) {
+          for (const dir of loop.directories) {
+            const dirPath = join(flowDir, dir);
+            if (existsSync(dirPath)) {
+              for (const entry of readdirSync(dirPath)) {
+                const entryPath = join(dirPath, entry);
+                rmSync(entryPath, { recursive: true, force: true });
+              }
             }
           }
         }
@@ -224,7 +251,11 @@ function createApiRoutes(cwd, port = 4242, wss) {
         }
       }
       const archivePath = `.ralph-flow/.archives/${appName}/${archiveTimestamp}`;
-      return c.json({ ok: true, archivePath, timestamp: archiveTimestamp });
+      const result = { ok: true, archivePath, timestamp: archiveTimestamp };
+      if (usedFallbackReset) {
+        result.warning = `Template "${config.name}" not found \u2014 reset used fallback (minimal empty content)`;
+      }
+      return c.json(result);
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       return c.json({ error: `Archive failed: ${msg}` }, 500);
@@ -913,6 +944,7 @@ function removeNotificationHook(cwd) {
 
 // src/dashboard/server.ts
 var __dirname = dirname(fileURLToPath(import.meta.url));
+var MAX_PORT_ATTEMPTS = 10;
 var CONTENT_TYPES = {
   ".css": "text/css",
   ".js": "text/javascript",
@@ -933,15 +965,33 @@ function resolveUiDir() {
 ${candidates.map((c) => join4(c, "index.html")).join("\n")}`
   );
 }
+function tryListen(server, hostname, port) {
+  return new Promise((resolve2, reject) => {
+    const onError = (err) => {
+      server.removeListener("listening", onListening);
+      reject(err);
+    };
+    const onListening = () => {
+      server.removeListener("error", onError);
+      const addr = server.address();
+      const boundPort = addr && typeof addr === "object" ? addr.port : port;
+      resolve2(boundPort);
+    };
+    server.once("error", onError);
+    server.once("listening", onListening);
+    server.listen(port, hostname);
+  });
+}
 async function startDashboard(options) {
-  const { cwd, port = 4242 } = options;
+  const { cwd, port: requestedPort = 4242 } = options;
   const app = new Hono2();
   const wss = new WebSocketServer3({ noServer: true });
+  const portRef = { value: requestedPort };
   app.use("*", cors({
     origin: (origin) => origin || "*",
     allowMethods: ["GET", "PUT", "POST", "DELETE"]
   }));
-  const apiRoutes = createApiRoutes(cwd, port, wss);
+  const apiRoutes = createApiRoutes(cwd, portRef, wss);
   app.route("/", apiRoutes);
   const uiDir = resolveUiDir();
   app.get("/", (c) => {
@@ -958,11 +1008,25 @@ async function startDashboard(options) {
     const contentType = CONTENT_TYPES[extname(filePath)] || "text/plain";
     return c.text(content, 200, { "Content-Type": contentType });
   });
-  const server = serve({
-    fetch: app.fetch,
-    port,
-    hostname: "127.0.0.1"
-  });
+  let server = createAdaptorServer({ fetch: app.fetch });
+  let actualPort = requestedPort;
+  for (let attempt = 0; attempt < MAX_PORT_ATTEMPTS; attempt++) {
+    const candidatePort = requestedPort + attempt;
+    try {
+      actualPort = await tryListen(server, "127.0.0.1", candidatePort);
+      break;
+    } catch (err) {
+      const nodeErr = err;
+      if (nodeErr.code !== "EADDRINUSE") throw err;
+      if (attempt >= MAX_PORT_ATTEMPTS - 1) {
+        throw new Error(
+          `Could not find an available port (tried ${requestedPort}\u2013${requestedPort + MAX_PORT_ATTEMPTS - 1})`
+        );
+      }
+      server = createAdaptorServer({ fetch: app.fetch });
+    }
+  }
+  portRef.value = actualPort;
   server.on("upgrade", (request, socket, head) => {
     const url = new URL(request.url || "/", `http://${request.headers.host}`);
     if (url.pathname === "/ws") {
@@ -975,14 +1039,17 @@ async function startDashboard(options) {
   });
   const watcherHandle = setupWatcher(cwd, wss);
   try {
-    installNotificationHook(cwd, port);
+    installNotificationHook(cwd, actualPort);
     console.log(chalk.dim(`  Configured Claude hook \u2192 .claude/settings.local.json`));
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);
     console.log(chalk.yellow(`  \u26A0 Could not configure Claude hook: ${msg}`));
   }
   console.log();
-  console.log(chalk.bold(`  Dashboard ${chalk.dim("\u2192")} http://localhost:${port}`));
+  if (actualPort !== requestedPort) {
+    console.log(chalk.yellow(`  Port ${requestedPort} was busy, using ${actualPort} instead`));
+  }
+  console.log(chalk.bold(`  Dashboard ${chalk.dim("\u2192")} http://localhost:${actualPort}`));
   console.log(chalk.dim(`  Watching ${cwd}/.ralph-flow/`));
   console.log();
   let closed = false;
@@ -1014,7 +1081,7 @@ async function startDashboard(options) {
       }
     }
   });
-  return { close };
+  return { close, port: actualPort };
 }
 export {
   startDashboard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ralphflow",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Multi-agent AI workflow orchestration framework for Claude Code. Define pipelines as loops, coordinate parallel agents, and ship structured work.",
   "type": "module",
   "bin": {

package/src/dashboard/ui/app.js

@@ -56,6 +56,9 @@ fetch('/api/context')
   .then(r => r.json())
   .then(ctx => {
     dom.hostDisplay.textContent = ctx.projectName + ' :' + ctx.port;
+    dom.pageTitle.textContent = ctx.projectName;
+    document.title = ctx.projectName + ' \u00b7 RalphFlow Dashboard';
+    state.projectName = ctx.projectName;
   })
   .catch(() => { /* keep location.host as fallback */ });
 
@@ -183,7 +186,7 @@ document.getElementById('templatesNav').addEventListener('click', () => {
   state.showTemplateWizard = false;
   state.wizardStep = 0;
   state.wizardData = null;
-  document.title = 'Templates - RalphFlow Dashboard';
+  document.title = 'Templates \u00b7 ' + (state.projectName || 'RalphFlow Dashboard');
   renderSidebar();
   renderContent();
 });

package/src/dashboard/ui/archives.js

@@ -1,13 +1,14 @@
 // Archive browsing: listing, file tree, file viewer.
 
 import { state, actions } from './state.js';
-import { fetchJson, esc } from './utils.js';
+import { fetchJson, esc, renderMarkdown } from './utils.js';
 
 export function switchAppTab(tab) {
   if (tab === state.activeAppTab) return;
   state.activeAppTab = tab;
   state.expandedArchive = null;
   state.archiveFilesCache = {};
+  state.archiveSummaryCache = {};
   state.viewingArchiveFile = null;
   actions.renderContent();
 }
@@ -52,8 +53,21 @@ function renderArchivesView(container, appName) {
     if (isExpanded) {
       const files = state.archiveFilesCache[archive.timestamp];
       if (files) {
+        // Show summary.md prominently at top if available, otherwise show CLI hint
+        const summaryContent = state.archiveSummaryCache[archive.timestamp];
+        if (summaryContent) {
+          html += `<div class="archive-summary">${renderMarkdown(summaryContent)}</div>`;
+        } else {
+          html += `<div class="archive-summary-hint">
+            <span class="archive-summary-hint-text">No summary yet. Generate one with:</span>
+            <code class="archive-summary-hint-cmd">npx ralphflow summarize ${esc(appName)} ${esc(archive.timestamp)}</code>
+          </div>`;
+        }
+
+        // Filter summary.md from regular file list
+        const displayFiles = files.filter(f => f.path !== 'summary.md');
         html += '<div class="archive-files">';
-        for (const file of files) {
+        for (const file of displayFiles) {
           const isActive = state.viewingArchiveFile === file.path;
           html += `<div class="archive-file-item${isActive ? ' active' : ''}" data-archive-file="${esc(file.path)}" data-archive-ts="${esc(archive.timestamp)}">
             <span class="archive-file-icon">&#128196;</span>
@@ -129,6 +143,17 @@ async function toggleArchiveCard(appName, timestamp) {
     try {
       const files = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/archives/${encodeURIComponent(timestamp)}/files`);
       state.archiveFilesCache[timestamp] = files;
+
+      // Auto-fetch summary.md if present
+      const hasSummary = files.some(f => f.path === 'summary.md');
+      if (hasSummary) {
+        try {
+          const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/archives/${encodeURIComponent(timestamp)}/files/summary.md`);
+          state.archiveSummaryCache[timestamp] = data.content || '';
+        } catch {
+          // summary fetch failed — skip display
+        }
+      }
     } catch {
       state.archiveFilesCache[timestamp] = [];
     }

package/src/dashboard/ui/index.html

@@ -9,7 +9,7 @@
 <body>
 
 <div class="header">
-  <h1>RalphFlow Dashboard</h1>
+  <h1 id="pageTitle">RalphFlow Dashboard</h1>
   <span class="host" id="hostDisplay"></span>
 </div>
 

package/src/dashboard/ui/loop-detail.js

@@ -604,7 +604,7 @@ async function submitDeleteApp(overlay, appName) {
     if (state.selectedApp && state.selectedApp.appName === appName) {
       state.selectedApp = null;
       state.selectedLoop = null;
-      document.title = 'RalphFlow Dashboard';
+      document.title = state.projectName ? state.projectName + ' \u00b7 RalphFlow Dashboard' : 'RalphFlow Dashboard';
     }
     actions.fetchApps();
   } catch (err) {

package/src/dashboard/ui/sidebar.js

@@ -79,7 +79,7 @@ export function selectApp(app) {
   state.viewingTemplateName = null;
   state.viewingTemplateConfig = null;
   state.viewingTemplatePrompts = {};
-  document.title = app.appName + ' - RalphFlow Dashboard';
+  document.title = app.appName + ' \u00b7 ' + (state.projectName || 'RalphFlow Dashboard');
   renderSidebar();
   actions.renderContent();
   actions.fetchAppStatus(app.appName);

package/src/dashboard/ui/state.js

@@ -4,6 +4,7 @@
 export const $ = (sel) => document.querySelector(sel);
 
 export const dom = {
+  pageTitle: $('#pageTitle'),
   hostDisplay: $('#hostDisplay'),
   sidebarApps: $('#sidebarApps'),
   content: $('#content'),
@@ -34,7 +35,9 @@ export const state = {
   archivesData: [],
   expandedArchive: null,
   archiveFilesCache: {},
+  archiveSummaryCache: {},
   viewingArchiveFile: null,
+  projectName: null,
   currentPage: 'app',
   templatesList: [],
   showTemplateBuilder: false,

package/src/dashboard/ui/styles.css

@@ -1195,6 +1195,62 @@ body {
   transform: rotate(90deg);
 }
 
+/* Archive summary display */
+.archive-summary {
+  border-top: 1px solid var(--border);
+  padding: 16px 20px;
+  background: var(--bg);
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+  overflow-x: auto;
+}
+.archive-summary h1,
+.archive-summary h2,
+.archive-summary h3 {
+  color: var(--text);
+  margin: 12px 0 6px;
+  font-size: 14px;
+}
+.archive-summary h1 { font-size: 15px; margin-top: 0; }
+.archive-summary .md-code-block {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 16px;
+  margin: 8px 0;
+  overflow-x: auto;
+  white-space: pre;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.archive-summary .md-code-block code {
+  font-family: var(--mono);
+}
+.archive-summary-hint {
+  border-top: 1px solid var(--border);
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.archive-summary-hint-text {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.archive-summary-hint-cmd {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-dim);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 3px 8px;
+  user-select: all;
+}
+
 /* Archive file browser */
 .archive-files {
   border-top: 1px solid var(--border);