@soddong/agentic-application-methodology-workbench 0.1.0

package/dist/server/workbench-server.js

@@ -0,0 +1,1553 @@
+import { createServer } from "node:http";
+import { applyStepDraftToSeed, loadActivityAuthoring, planStepDraftApply, saveAuthoringDraft } from "../authoring-draft-store.js";
+import { loadArtifactStandardDocuments } from "../artifact-standard-document-loader.js";
+import { loadWorkbenchConfig } from "../workbench-config.js";
+import { loadActivityWorkbench, loadArtifactStandard, loadGovernance, loadLifecycleOverview, loadPhaseDetail, loadWorkbenchSummary } from "../seed-view-model-loader.js";
+function jsonPayload(value, status = 200) {
+    return {
+        status,
+        contentType: "application/json; charset=utf-8",
+        body: JSON.stringify(value, null, 2)
+    };
+}
+function textPayload(body, contentType, status = 200) {
+    return {
+        status,
+        contentType,
+        body
+    };
+}
+async function readRequestJson(request) {
+    const chunks = [];
+    for await (const chunk of request) {
+        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+    }
+    const body = Buffer.concat(chunks).toString("utf8").trim();
+    return body.length === 0 ? {} : JSON.parse(body);
+}
+async function routeRequest(request, project) {
+    const requestUrl = new URL(request.url ?? "/", "http://localhost");
+    if (requestUrl.pathname === "/") {
+        return textPayload(renderWorkbenchHtml(project), "text/html; charset=utf-8");
+    }
+    if (requestUrl.pathname === "/assets/app.css") {
+        return textPayload(renderWorkbenchCss(), "text/css; charset=utf-8");
+    }
+    if (requestUrl.pathname === "/assets/app.js") {
+        return textPayload(renderWorkbenchJs(project), "text/javascript; charset=utf-8");
+    }
+    if (requestUrl.pathname === "/api/health") {
+        return jsonPayload({
+            status: "ok",
+            packageName: "@soddong/agentic-application-methodology-workbench",
+            version: "0.1.0",
+            projectRoot: project.projectRoot
+        });
+    }
+    if (requestUrl.pathname === "/api/workbench/config") {
+        return jsonPayload(project);
+    }
+    if (requestUrl.pathname === "/api/workbench/overview") {
+        return jsonPayload(loadWorkbenchSummary(project));
+    }
+    if (requestUrl.pathname === "/api/workbench/lifecycle") {
+        return jsonPayload(loadLifecycleOverview(project));
+    }
+    if (requestUrl.pathname.startsWith("/api/workbench/phases/")) {
+        return jsonPayload(loadPhaseDetail(project, decodeURIComponent(requestUrl.pathname.split("/").at(-1) ?? "")));
+    }
+    if (requestUrl.pathname === "/api/workbench/phases") {
+        return jsonPayload(loadPhaseDetail(project));
+    }
+    if (requestUrl.pathname.startsWith("/api/workbench/activities/")) {
+        const pathParts = requestUrl.pathname.split("/");
+        const activityCode = decodeURIComponent(pathParts.at(-2) ?? "");
+        if (pathParts.at(-1) === "authoring") {
+            return jsonPayload(loadActivityAuthoring(project, activityCode));
+        }
+    }
+    if (requestUrl.pathname.startsWith("/api/workbench/authoring/steps/")) {
+        const stepCode = decodeURIComponent(requestUrl.pathname.split("/").at(-2) ?? "");
+        if (requestUrl.pathname.endsWith("/draft") && request.method === "PUT") {
+            return jsonPayload(saveAuthoringDraft(project, "step", stepCode, await readRequestJson(request)));
+        }
+        if (requestUrl.pathname.endsWith("/apply-plan") && request.method === "GET") {
+            return jsonPayload(planStepDraftApply(project, stepCode));
+        }
+        if (requestUrl.pathname.endsWith("/apply") && request.method === "POST") {
+            return jsonPayload(applyStepDraftToSeed(project, stepCode));
+        }
+    }
+    if (requestUrl.pathname.startsWith("/api/workbench/authoring/tasks/") && request.method === "PUT") {
+        const taskCode = decodeURIComponent(requestUrl.pathname.split("/").at(-2) ?? "");
+        if (requestUrl.pathname.endsWith("/draft")) {
+            return jsonPayload(saveAuthoringDraft(project, "task", taskCode, await readRequestJson(request)));
+        }
+    }
+    if (requestUrl.pathname.startsWith("/api/workbench/activities/")) {
+        return jsonPayload(loadActivityWorkbench(project, decodeURIComponent(requestUrl.pathname.split("/").at(-1) ?? "")));
+    }
+    if (requestUrl.pathname === "/api/workbench/activities") {
+        return jsonPayload(loadActivityWorkbench(project));
+    }
+    if (requestUrl.pathname.startsWith("/api/workbench/artifacts/") && requestUrl.pathname.endsWith("/documents")) {
+        const pathParts = requestUrl.pathname.split("/");
+        return jsonPayload(loadArtifactStandardDocuments(project, decodeURIComponent(pathParts.at(-2) ?? "")));
+    }
+    if (requestUrl.pathname.startsWith("/api/workbench/artifacts/")) {
+        return jsonPayload(loadArtifactStandard(project, decodeURIComponent(requestUrl.pathname.split("/").at(-1) ?? "")));
+    }
+    if (requestUrl.pathname === "/api/workbench/artifacts") {
+        return jsonPayload(loadArtifactStandard(project));
+    }
+    if (requestUrl.pathname === "/api/workbench/governance") {
+        return jsonPayload(loadGovernance(project));
+    }
+    return jsonPayload({ error: "not_found" }, 404);
+}
+function writePayload(response, payload) {
+    response.writeHead(payload.status, {
+        "content-type": payload.contentType,
+        "cache-control": "no-store"
+    });
+    response.end(payload.body);
+}
+export function createWorkbenchServer(options = {}) {
+    const host = options.host ?? "127.0.0.1";
+    const port = options.port ?? 4783;
+    const project = loadWorkbenchConfig(options.projectRoot ?? process.cwd());
+    const server = createServer((request, response) => {
+        try {
+            void routeRequest(request, project)
+                .then((payload) => writePayload(response, payload))
+                .catch((error) => {
+                writePayload(response, jsonPayload({
+                    error: "internal_error",
+                    message: error instanceof Error ? error.message : String(error)
+                }, 500));
+            });
+        }
+        catch (error) {
+            writePayload(response, jsonPayload({
+                error: "internal_error",
+                message: error instanceof Error ? error.message : String(error)
+            }, 500));
+        }
+    });
+    return {
+        server,
+        project,
+        start: async () => {
+            await new Promise((resolve, reject) => {
+                server.once("error", reject);
+                server.listen(port, host, () => {
+                    server.off("error", reject);
+                    resolve();
+                });
+            });
+            return {
+                host,
+                port,
+                url: `http://${host}:${port}`,
+                project
+            };
+        },
+        stop: async () => {
+            if (!server.listening) {
+                return;
+            }
+            await new Promise((resolve, reject) => {
+                server.close((error) => {
+                    if (error) {
+                        reject(error);
+                    }
+                    else {
+                        resolve();
+                    }
+                });
+            });
+        }
+    };
+}
+export async function startWorkbenchServer(options = {}) {
+    const workbenchServer = createWorkbenchServer(options);
+    return await workbenchServer.start();
+}
+function renderWorkbenchHtml(project) {
+    const workbenchTitle = escapeHtml(project.config.title);
+    const tutorialTitle = escapeHtml(project.config.title.replace(/\bWorkbench\b/g, "Tutorial"));
+    const authoringModeControl = project.config.experienceMode === "authoring"
+        ? `<button class="header-mode-badge" id="mode-toggle" type="button" aria-label="Switch to Tutorial" title="Switch to Tutorial" data-mode-target="tutorial">Tutorial</button>`
+        : `<span class="header-mode-badge readonly">Read-only</span>`;
+    return `<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>${workbenchTitle}</title>
+    <link rel="stylesheet" href="/assets/app.css">
+  </head>
+  <body class="landing-active">
+    <button class="sidebar-open-button" id="sidebar-open" type="button" aria-label="Open navigation panel" title="Open navigation panel"></button>
+    <section class="landing-page" id="landing-page" aria-label="Methodology lifecycle model selection">
+      <div class="landing-shell">
+        <header class="landing-header">
+          <div>
+            <p class="landing-eyebrow">${escapeHtml(project.config.methodologyPackageName)}</p>
+            <h1>${workbenchTitle}</h1>
+            <p>방법론 라이프사이클 모델을 선택해 Phase, Stage, Activity, Task, Step 및 산출물 표준을 조회합니다.</p>
+          </div>
+        </header>
+        <div class="lifecycle-list" id="lifecycle-list"></div>
+      </div>
+    </section>
+    <div class="app-shell">
+      <aside class="sidebar" aria-label="Workbench navigation">
+        <div class="sidebar-header">
+          <div class="sidebar-title-block">
+            <div class="sidebar-title-row">
+              <strong id="workbench-title" data-workbench-title="${workbenchTitle}" data-tutorial-title="${tutorialTitle}">${workbenchTitle}</strong>
+              ${authoringModeControl}
+            </div>
+            <span>${escapeHtml(project.config.methodologyPackageName)} / ${escapeHtml(project.config.bundleCode)}</span>
+          </div>
+          <button class="icon-button sidebar-close-button" id="sidebar-close" type="button" aria-label="Close navigation panel" title="Close navigation panel"></button>
+        </div>
+        <div class="sidebar-section">
+          <div class="phase-tab-list" id="phase-tabs" role="tablist" aria-label="Lifecycle phases">
+          </div>
+          <div class="methodology-tree" id="methodology-tree" role="tree"></div>
+        </div>
+      </aside>
+      <main class="workspace">
+        <section class="workbench-grid">
+          <section class="artifact-panel">
+            <div class="artifact-standard" id="artifact-standard"></div>
+          </section>
+        </section>
+      </main>
+    </div>
+    <script src="/assets/app.js" type="module"></script>
+  </body>
+</html>`;
+}
+function renderWorkbenchCss() {
+    return `:root {
+  color-scheme: light;
+  --bg: #eef2f5;
+  --chrome: #e5ebef;
+  --surface: #ffffff;
+  --surface-subtle: #f6f8fa;
+  --surface-raised: #ffffff;
+  --border: #d5dde6;
+  --border-strong: #aeb9c6;
+  --text: #111827;
+  --text-soft: #1f2937;
+  --muted: #667085;
+  --muted-strong: #344054;
+  --accent: #0f766e;
+  --accent-soft: #e6f4f1;
+  --accent-strong: #115e59;
+  --blue: #2563eb;
+  --blue-soft: #eff6ff;
+  --danger: #b42318;
+  --warning: #a15c07;
+  --ok: #166534;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
+  --shadow-md: 0 8px 20px rgba(16, 24, 40, 0.08);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); text-rendering: geometricPrecision; }
+button, input, select, textarea { font: inherit; }
+button { cursor: pointer; }
+button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.18); outline-offset: 2px; }
+body.landing-active .app-shell, body.landing-active .sidebar-open-button { display: none; }
+body:not(.landing-active) .landing-page { display: none; }
+.landing-page { min-height: 100vh; padding: 28px; background: linear-gradient(180deg, #f8fafc 0%, #eef2f5 100%); overflow: auto; }
+.landing-shell { display: grid; gap: 18px; max-width: 1180px; margin: 0 auto; }
+.landing-header { display: grid; gap: 8px; padding: 28px 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
+.landing-eyebrow { margin: 0 0 6px; color: var(--accent-strong); font-size: 13px; font-weight: 850; }
+.landing-header h1 { max-width: 780px; font-size: 30px; line-height: 1.22; }
+.landing-header p { max-width: 820px; color: var(--muted-strong); font-size: 16px; line-height: 1.55; }
+.lifecycle-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
+.lifecycle-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; min-height: 240px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
+.lifecycle-card:hover { border-color: #8ab7b1; box-shadow: var(--shadow-md); transform: translateY(-1px); }
+.lifecycle-card h2 { font-size: 22px; line-height: 1.3; }
+.lifecycle-card p { color: var(--muted-strong); font-size: 15px; line-height: 1.5; }
+.lifecycle-meta { display: flex; flex-wrap: wrap; gap: 7px; }
+.lifecycle-meta span, .phase-pill { display: inline-flex; align-items: center; min-height: 25px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); padding: 3px 8px; font-size: 12px; font-weight: 760; }
+.phase-pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.lifecycle-card-action { display: flex; justify-content: flex-end; }
+.lifecycle-open-button { min-height: 36px; border: 1px solid #8ab7b1; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); padding: 7px 11px; font-size: 14px; font-weight: 850; }
+.lifecycle-open-button:hover { background: #ffffff; border-color: #6aa79f; }
+.app-shell { display: grid; grid-template-columns: 520px minmax(0, 1fr); height: 100vh; min-height: 640px; overflow: hidden; background: var(--bg); }
+body.sidebar-collapsed .app-shell { grid-template-columns: 0 minmax(0, 1fr); }
+.sidebar { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; border-right: 1px solid var(--border); background: var(--chrome); padding: 12px; min-width: 0; overflow: hidden; transition: transform 160ms ease, opacity 160ms ease, padding 160ms ease, border-color 160ms ease; }
+body.sidebar-collapsed .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; padding: 0; border-right-color: transparent; }
+.workspace { display: grid; grid-template-rows: minmax(0, 1fr); padding: 14px; min-width: 0; overflow: hidden; background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%); }
+.sidebar-open-button { position: fixed; top: 50%; left: 10px; z-index: 20; display: none; align-items: center; justify-content: center; width: 30px; height: 54px; transform: translateY(-50%); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--accent-strong); font-size: 0; box-shadow: var(--shadow-md); }
+body.sidebar-collapsed .sidebar-open-button { display: inline-flex; }
+.sidebar-open-button::before, .sidebar-close-button::before { content: ""; display: block; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
+.sidebar-open-button::before { transform: rotate(45deg); margin-left: -2px; }
+.sidebar-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow); }
+.sidebar-title-block { display: grid; gap: 4px; min-width: 0; }
+.sidebar-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
+.sidebar-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 16px; line-height: 1.3; font-weight: 850; }
+.sidebar-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; line-height: 1.35; }
+.sidebar-close-button { width: 34px; min-height: 34px; color: var(--muted-strong); font-size: 0; }
+.sidebar-close-button::before { transform: rotate(-135deg); margin-left: 3px; }
+.header-mode-badge { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; max-width: 120px; border-radius: 999px; border: 1px solid #8ab7b1; background: var(--accent-soft); color: var(--accent-strong); padding: 4px 9px; font-size: 12px; font-weight: 900; line-height: 1.1; white-space: nowrap; box-shadow: var(--shadow); }
+button.header-mode-badge:hover { border-color: #6aa79f; background: #ffffff; }
+body.tutorial-mode .header-mode-badge { border-color: #cbd5e1; background: #f8fafc; color: #475569; }
+.header-mode-badge.readonly { border-color: var(--border); background: var(--surface-subtle); color: var(--muted-strong); box-shadow: none; }
+.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
+.subtitle { margin: 6px 0 0; color: var(--muted); }
+h1, h2, p { margin: 0; }
+h1 { font-size: 24px; line-height: 1.25; }
+h2 { font-size: 20px; line-height: 1.3; }
+.panel-subtitle { color: var(--muted); font-size: 15px; line-height: 1.45; margin-top: 4px; }
+.icon-button, .primary-button, .secondary-button { min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }
+.icon-button:hover, .secondary-button:hover { border-color: var(--border-strong); background: #f9fafb; }
+.icon-button { width: 34px; font-weight: 850; }
+.primary-button { padding: 0 14px; border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 1px 2px rgba(15, 118, 110, 0.24); }
+.primary-button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
+.secondary-button { padding: 0 12px; font-weight: 800; background: var(--surface-subtle); }
+.workbench-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: hidden; }
+.panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
+.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
+.status-pill { border-radius: 999px; background: #d8f3ee; color: var(--accent-strong); padding: 5px 9px; font-size: 14px; font-weight: 700; white-space: nowrap; }
+.status-pill.neutral { background: var(--surface-subtle); color: var(--muted); }
+.sidebar-section { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(255,255,255,0.52); overflow: hidden; }
+.phase-tab-list { display: flex; flex-wrap: wrap; align-items: end; gap: 3px; min-height: 48px; padding: 8px 9px 0; border-bottom: 1px solid #9fb3bf; background: linear-gradient(180deg, #d5e3e8 0%, #c3d4dc 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.82) inset, 0 1px 2px rgba(15,23,42,0.05); }
+.phase-tab { min-height: 40px; max-width: 100%; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: transparent; color: #334155; padding: 8px 10px 9px; font-size: 13px; font-weight: 780; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.phase-tab:hover { background: rgba(255,255,255,0.55); color: #0f2530; }
+.phase-tab.active { margin-bottom: -1px; border-color: #9fb3bf; background: rgba(255,255,255,0.88); color: #0f2530; box-shadow: 0 -1px 0 rgba(255,255,255,0.8) inset; }
+.methodology-tree { display: grid; align-content: start; gap: 3px; min-height: 0; overflow: auto; padding: 9px 8px 10px 8px; }
+.tree-group { position: relative; display: grid; gap: 2px; padding-bottom: 4px; }
+.tree-node { --meta-width: 92px; position: relative; width: 100%; max-width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) var(--meta-width); align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text); text-align: left; min-height: 42px; padding: 8px 9px; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
+.tree-node.no-order { grid-template-columns: 18px minmax(0, 1fr) var(--meta-width); }
+.tree-node:hover { border-color: #c7d2df; background: rgba(255,255,255,0.78); }
+.tree-node.context { border-color: rgba(142, 173, 168, 0.42); background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(238,248,246,0.9) 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.76) inset; }
+.tree-node.active { border-color: #8fb9b4; background: linear-gradient(180deg, #f0faf8 0%, #ddf1ee 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.84) inset, 0 1px 4px rgba(15, 118, 110, 0.08); }
+.tree-node.stage { --meta-width: 220px; color: #111827; font-weight: 720; border-color: rgba(143,187,179,0.32); background: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(240,248,247,0.82) 100%); }
+.tree-node.activity { --meta-width: 144px; margin-left: 14px; width: calc(100% - 14px); color: #243b53; font-weight: 650; border-color: rgba(158,185,223,0.28); background: rgba(255,255,255,0.42); }
+.tree-node.task { --meta-width: 126px; margin-left: 28px; width: calc(100% - 28px); color: #39495a; font-weight: 600; background: rgba(255,255,255,0.34); }
+.tree-node.step { --meta-width: 120px; margin-left: 42px; width: calc(100% - 42px); color: #5b6878; font-weight: 500; }
+.tree-caret { position: relative; display: inline-flex; flex: 0 0 18px; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid #b8c6d3; border-radius: 5px; background: #ffffff; color: #64748b; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 1px 2px rgba(15,23,42,0.06); font-size: 0; line-height: 0; }
+.tree-caret::before, .tree-caret::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; border-radius: 999px; background: currentColor; transform: translateY(-50%); }
+.tree-caret::after { left: 50%; right: auto; top: 5px; bottom: 5px; width: 2px; height: auto; transform: translateX(-50%); }
+.tree-node[aria-expanded="true"] > .tree-caret::after { display: none; }
+.tree-node:hover .tree-caret { border-color: #9ab7c2; color: var(--muted-strong); background: #ffffff; }
+.tree-node.active .tree-caret { border-color: #6aa79f; color: var(--accent-strong); background: #ffffff; }
+.tree-caret-placeholder { position: relative; width: 18px; height: 18px; }
+.tree-caret-placeholder::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 999px; background: #94a3b8; transform: translate(-50%, -50%); }
+.tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.25; font-weight: inherit; }
+.tree-node.stage .tree-label { font-size: 17px; }
+.tree-node.activity .tree-label { font-size: 16px; }
+.tree-meta-group { display: flex; align-items: center; justify-content: flex-end; gap: 5px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
+.tree-count { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10.5px; font-weight: 620; text-align: right; white-space: nowrap; }
+.tree-kind-badge, .tree-mode-chip, .tree-state-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 21px; border-radius: 999px; border: 1px solid var(--border); padding: 2px 7px; font-size: 10.5px; font-weight: 680; line-height: 1; white-space: nowrap; }
+.tree-kind-badge { flex: 0 0 38px; min-width: 38px; }
+.tree-kind-badge.with-order { flex-basis: 58px; min-width: 58px; }
+.tree-mode-chip, .tree-state-chip { flex: 0 0 auto; }
+.tree-kind-badge.stage { border-color: #8fbbb3; background: #dff2ef; color: #175f58; }
+.tree-kind-badge.activity { border-color: #9eb9df; background: #e5effb; color: #28568a; }
+.tree-kind-badge.task { border-color: #9fb4c5; background: #dfe9f1; color: #2f4858; font-weight: 740; }
+.tree-kind-badge.step { border-color: #dde4eb; background: #fbfcfe; color: #778292; font-weight: 560; }
+.tree-mode-chip { background: #ffffff; color: var(--muted-strong); }
+.tree-state-chip.valid { border-color: #bbd7c4; background: #ecfdf3; color: #166534; }
+.tree-state-chip.issue { border-color: #f7c8c2; background: #fef3f2; color: #b42318; }
+.tree-empty { color: var(--muted); font-size: 15px; line-height: 1.4; padding: 8px; }
+.task-list { display: grid; align-content: start; gap: 10px; overflow: auto; min-height: 0; padding-right: 4px; }
+.task-row { border: 1px solid var(--border); border-radius: 8px; background: #fbfcfd; padding: 10px; }
+.task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
+.task-head strong { font-size: 13px; line-height: 1.35; }
+.task-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
+.step-list { display: grid; gap: 6px; }
+.step-chip { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); text-align: left; padding: 8px; }
+.step-chip:hover, .step-chip.active { border-color: var(--accent); background: var(--accent-soft); }
+.step-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.step-mode { color: var(--muted); font-size: 11px; font-weight: 800; }
+.field-label { color: var(--muted); font-size: 14px; font-weight: 850; }
+.inline-step-panel { position: relative; display: grid; gap: 0; margin-left: 42px; width: calc(100% - 42px); max-width: calc(100% - 42px); border: 1px solid #8ab7b1; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
+.inline-step-panel summary { list-style: none; }
+.inline-step-panel summary::-webkit-details-marker { display: none; }
+.inline-step-panel .tree-node.step { margin-left: 0; width: 100%; border: 0; border-radius: 0; }
+.inline-step-body { display: grid; gap: 10px; padding: 12px; border-top: 1px solid var(--border); background: #fbfdfc; }
+.editor-form { display: grid; gap: 12px; min-height: 0; }
+.editor-section { display: grid; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #ffffff; box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset; }
+.editor-section-title { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.3; font-weight: 900; text-transform: uppercase; }
+.editor-section-body { display: grid; gap: 10px; min-width: 0; }
+.editor-section-compact .editor-section-body { grid-template-columns: minmax(0, 1fr) 148px; align-items: end; }
+.editor-form label, .editor-field { display: grid; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 850; min-width: 0; }
+.editor-form[data-mode="LLM"] .script-field, .editor-form[data-mode="MANUAL"] .script-field { display: none; }
+.editor-form input, .editor-form select, .editor-form textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: #ffffff;
+  color: var(--text);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 9px 10px;
+}
+.editor-form input:focus, .editor-form select:focus, .editor-form textarea:focus { outline: 3px solid rgba(15, 118, 110, 0.14); border-color: var(--accent); }
+.editor-form textarea { resize: vertical; min-height: 70px; line-height: 1.48; }
+#editor-instruction { min-height: 120px; }
+.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.validation-list { display: grid; gap: 6px; }
+.validation-item { border-radius: 6px; padding: 8px 9px; font-size: 15px; line-height: 1.35; }
+.validation-item.error { background: #fee2e2; color: #991b1b; }
+.validation-item.warning { background: #fef3c7; color: #92400e; }
+.validation-item.ok { background: #dcfce7; color: #166534; }
+.compact-review { display: grid; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #f7faf9; padding: 10px; min-height: 0; }
+.compact-review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.compact-review-header p { color: var(--muted); font-size: 15px; line-height: 1.4; margin-top: 3px; word-break: break-word; }
+.diff-list { display: grid; align-content: start; gap: 8px; overflow: auto; min-height: 0; padding-right: 4px; }
+.diff-list.compact { max-height: 132px; }
+.diff-empty { color: var(--muted); font-size: 15px; line-height: 1.45; }
+.diff-item { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-subtle); }
+.diff-field { padding: 8px 10px; font-size: 14px; font-weight: 850; border-bottom: 1px solid var(--border); }
+.diff-values { display: grid; gap: 1px; }
+.diff-before, .diff-after { display: grid; gap: 4px; padding: 8px 10px; font-size: 14px; line-height: 1.45; word-break: break-word; }
+.diff-before { background: #fff7ed; color: #7c2d12; }
+.diff-after { background: #ecfdf5; color: #14532d; }
+.diff-label { font-weight: 800; opacity: 0.8; }
+.artifact-panel { min-width: 0; min-height: 0; overflow: hidden; }
+.artifact-standard { display: grid; grid-template-rows: minmax(0, 1fr); align-content: start; gap: 10px; overflow: auto; min-height: 0; height: 100%; }
+.artifact-definition-card { border: 1px solid #cbd5e1; border-radius: 8px; background: #fbfcfd; overflow: hidden; }
+.artifact-definition-card summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; cursor: pointer; list-style: none; }
+.artifact-definition-card summary::-webkit-details-marker { display: none; }
+.artifact-definition-card summary::after { content: ""; display: block; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 140ms ease, border-color 120ms ease; }
+.artifact-definition-card summary:hover::after { border-color: var(--accent-strong); }
+.artifact-definition-card[open] summary::after { transform: rotate(45deg); }
+.artifact-definition-card h3 { margin: 0; font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.artifact-definition-body { display: grid; gap: 8px; padding: 0 14px 14px; border-top: 1px solid var(--border); }
+.artifact-definition-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
+.standard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
+.standard-metrics div { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
+.standard-metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
+.standard-metrics strong { display: block; margin-top: 2px; font-size: 18px; line-height: 1.1; }
+.artifact-tabset { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; height: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-md); }
+.artifact-tab-list { display: flex; flex-wrap: wrap; align-items: end; gap: 3px; padding: 8px 10px 0; background: #e8eef3; border-bottom: 1px solid var(--border); }
+.artifact-tab { min-height: 46px; padding: 11px 14px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: transparent; color: #475569; font-weight: 850; font-size: 15px; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
+.artifact-tab:hover { background: rgba(255,255,255,0.6); color: var(--text-soft); }
+.artifact-tab.active { margin-bottom: -1px; border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: 0 -1px 0 rgba(255,255,255,0.8) inset; }
+.artifact-tab-panels { min-height: 0; overflow: hidden; }
+.artifact-tab-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 18px; overflow: hidden; background: #f8fafc; }
+.artifact-tab-panel[hidden] { display: none; }
+.artifact-view-toolbar { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: max-content; margin-left: auto; padding-bottom: 8px; }
+.viewer-option-button { min-height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #ffffff; color: var(--muted-strong); padding: 5px 9px; font-size: 13px; font-weight: 850; }
+.viewer-option-button:hover { border-color: var(--border-strong); background: #f9fafb; }
+.viewer-option-button.active { border-color: #8ab7b1; background: var(--accent-soft); color: var(--accent-strong); }
+.document-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
+.document-action-row a, .document-action-row span { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--muted-strong); padding: 5px 9px; font-size: 13px; font-weight: 800; text-decoration: none; }
+.document-action-row a:hover { border-color: var(--accent); color: var(--accent-strong); }
+.rendered-document { flex: 1 1 auto; min-height: 0; height: auto; overflow: auto; padding: 40px 34px 48px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
+.rendered-document-body { max-width: 1180px; margin: 0 auto; }
+body.artifact-full-width .rendered-document-body,
+body.sidebar-collapsed .rendered-document-body { max-width: none; margin: 0; }
+body.artifact-full-width .document-action-row,
+body.sidebar-collapsed .document-action-row { max-width: none; margin-left: 0; margin-right: 0; }
+body.artifact-compact-padding .artifact-tab-panel { padding: 10px; }
+body.artifact-compact-padding .rendered-document { padding: 18px 18px 22px; }
+body.artifact-compact-padding .rendered-document h2 { margin-bottom: 14px; padding-bottom: 9px; font-size: 24px; }
+body.artifact-compact-padding .rendered-document h3 { margin: 22px 0 8px; padding: 0 0 6px; font-size: 20px; }
+body.artifact-compact-padding .rendered-document h4 { margin: 16px 0 6px; font-size: 17px; }
+body.artifact-compact-padding .rendered-document p { margin-bottom: 9px; line-height: 1.45; }
+body.artifact-compact-padding .rendered-document ul { margin-bottom: 11px; line-height: 1.45; }
+body.artifact-compact-padding .document-callout { margin: 10px 0 14px; padding: 9px 11px; }
+body.artifact-compact-padding .document-table-wrap { margin: 8px 0 14px; }
+body.artifact-compact-padding .document-table th,
+body.artifact-compact-padding .document-table td { padding: 5px 7px; }
+.rendered-document h2 { margin: 0 0 32px; padding: 0 0 16px; border-bottom: 2px solid #d8e1ea; color: #0f172a; font-size: 28px; line-height: 1.28; font-weight: 900; }
+.rendered-document h3 { margin: 46px 0 16px; padding: 0 0 9px; border-bottom: 1px solid #e2e8f0; color: #111827; font-size: 23px; line-height: 1.32; font-weight: 880; }
+.rendered-document h4 { margin: 30px 0 10px; color: #334155; font-size: 18px; line-height: 1.36; font-weight: 850; }
+.rendered-document h5, .rendered-document h6 { margin: 22px 0 8px; color: var(--muted-strong); font-size: 16px; line-height: 1.35; font-weight: 850; }
+.rendered-document p { margin: 0 0 18px; color: #334155; font-size: 16px; line-height: 1.6; }
+.rendered-document ul { margin: 0 0 22px 20px; padding: 0; color: #334155; font-size: 16px; line-height: 1.6; }
+.rendered-document li { margin: 4px 0; }
+.rendered-document blockquote { margin: 18px 0 24px; padding: 13px 15px; border: 1px solid #cbd5e1; border-radius: var(--radius-md); background: #f8fafc; color: #334155; font-style: italic; }
+.rendered-document blockquote p:last-child { margin-bottom: 0; }
+.document-callout { margin: 20px 0 30px; padding: 15px 17px; border: 1px solid #b7d7d2; border-radius: var(--radius-md); background: #f1faf8; color: #173f3a; box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset; }
+.document-callout-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--accent-strong); font-size: 15px; font-weight: 900; }
+.document-callout-title::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 12px; font-weight: 900; font-style: italic; }
+.document-callout p { margin: 0 0 10px; }
+.document-callout p:last-child { margin-bottom: 0; }
+.rendered-document pre { overflow: auto; margin: 18px 0 26px; padding: 14px; border-radius: var(--radius-md); background: #111827; color: #e2e8f0; font-size: 15px; line-height: 1.45; }
+.rendered-document code { border-radius: 4px; background: #eef2f6; padding: 1px 4px; font-size: 15px; }
+.rendered-document pre code { background: transparent; padding: 0; color: inherit; }
+.document-table-wrap { overflow: auto; margin: 16px 0 28px; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); }
+.document-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 15px; }
+.document-table th, .document-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
+.document-table th { background: #eef3f7; color: var(--muted-strong); font-weight: 850; }
+.document-table tbody tr:nth-child(even) td { background: #fbfcfd; }
+.document-table tbody tr:hover td { background: #f6faf9; }
+.document-table tr:last-child td { border-bottom: 0; }
+.artifact-empty { color: var(--muted); font-size: 13px; line-height: 1.5; }
+@media (max-width: 1180px) {
+  .app-shell { grid-template-columns: 480px minmax(0, 1fr); }
+  .editor-section-compact .editor-section-body { grid-template-columns: 1fr; }
+}`;
+}
+function renderWorkbenchJs(project) {
+    return `const state = {
+  experienceMode: ${JSON.stringify(project.config.experienceMode)},
+  lifecycle: null,
+  phase: null,
+  selectedLifecycleCode: null,
+  selectedPhaseCode: null,
+  activity: null,
+  artifact: null,
+  artifactDocuments: null,
+  authoring: null,
+  selectedStep: null,
+  selectedTask: null,
+  expandedStageCodes: new Set(),
+  expandedActivityCodes: new Set(),
+  expandedTaskCodes: new Set(),
+  expandedStepDetailCodes: new Set(),
+  sidebarCollapsed: false,
+  workbenchMode: "authoring",
+  artifactFullWidth: false,
+  artifactCompactPadding: false
+};
+
+async function loadJson(path) {
+  const response = await fetch(path);
+  const body = await response.json();
+  if (!response.ok) {
+    throw new Error(body.message ?? "Failed to load " + path);
+  }
+  return body;
+}
+
+async function putJson(path, value) {
+  const response = await fetch(path, {
+    method: "PUT",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(value)
+  });
+  const body = await response.json();
+  if (!response.ok) {
+    throw new Error(body.message ?? "Failed to save " + path);
+  }
+  return body;
+}
+
+async function postJson(path, value) {
+  const response = await fetch(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(value ?? {})
+  });
+  const body = await response.json();
+  if (!response.ok) {
+    throw new Error(body.message ?? "Failed to post " + path);
+  }
+  return body;
+}
+
+function text(id, value) {
+  const element = document.getElementById(id);
+  if (element) {
+    element.textContent = String(value ?? "");
+  }
+}
+
+function setValue(id, value) {
+  const element = document.getElementById(id);
+  if (element) {
+    element.value = String(value ?? "");
+  }
+}
+
+function valueOf(id) {
+  const element = document.getElementById(id);
+  return element ? element.value : "";
+}
+
+function renderLifecycleLanding() {
+  const container = document.getElementById("lifecycle-list");
+  if (!container) {
+    return;
+  }
+  container.replaceChildren();
+  if (!state.lifecycle?.lifecycle) {
+    const empty = document.createElement("div");
+    empty.className = "artifact-empty";
+    empty.textContent = "Lifecycle model is not available.";
+    container.append(empty);
+    return;
+  }
+
+  const lifecycle = state.lifecycle.lifecycle;
+  const methodology = state.lifecycle.methodology;
+  const phases = state.lifecycle.phases ?? [];
+  const card = document.createElement("article");
+  card.className = "lifecycle-card";
+
+  const head = document.createElement("div");
+  const title = document.createElement("h2");
+  title.textContent = lifecycle.name;
+  const description = document.createElement("p");
+  description.textContent = lifecycle.description ?? methodology.description ?? "";
+  head.append(title, description);
+
+  const meta = document.createElement("div");
+  meta.className = "lifecycle-meta";
+  [
+    methodology.name,
+    lifecycle.typeCode,
+    state.lifecycle.counts?.phases + " phases",
+    state.lifecycle.counts?.stages + " stages",
+    state.lifecycle.counts?.activities + " activities"
+  ].filter(Boolean).forEach((item) => {
+    const chip = document.createElement("span");
+    chip.textContent = String(item);
+    meta.append(chip);
+  });
+
+  const phaseList = document.createElement("div");
+  phaseList.className = "phase-pill-list";
+  phases.forEach((phase) => {
+    const pill = document.createElement("span");
+    pill.className = "phase-pill";
+    pill.textContent = phase.name;
+    phaseList.append(pill);
+  });
+
+  const action = document.createElement("div");
+  action.className = "lifecycle-card-action";
+  const openButton = document.createElement("button");
+  openButton.type = "button";
+  openButton.className = "lifecycle-open-button";
+  openButton.textContent = "Open lifecycle model";
+  openButton.addEventListener("click", () => {
+    void enterLifecycle(lifecycle.code);
+  });
+  action.append(openButton);
+  card.append(head, meta, phaseList, action);
+  container.append(card);
+}
+
+async function enterLifecycle(lifecycleCode) {
+  state.selectedLifecycleCode = lifecycleCode;
+  document.body.classList.remove("landing-active");
+  const firstPhase = state.lifecycle?.phases?.[0];
+  if (firstPhase) {
+    await selectPhase(firstPhase.code);
+  }
+}
+
+function renderPhaseTabs() {
+  const container = document.getElementById("phase-tabs");
+  if (!container) {
+    return;
+  }
+  container.replaceChildren();
+  (state.lifecycle?.phases ?? []).forEach((phase) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = phase.code === state.selectedPhaseCode ? "phase-tab active" : "phase-tab";
+    button.role = "tab";
+    button.setAttribute("aria-selected", phase.code === state.selectedPhaseCode ? "true" : "false");
+    button.title = phase.name + (phase.description ? " - " + phase.description : "");
+    button.textContent = displayPhaseTabLabel(phase.name);
+    button.addEventListener("click", () => {
+      void selectPhase(phase.code);
+    });
+    container.append(button);
+  });
+}
+
+async function selectPhase(phaseCode) {
+  state.selectedPhaseCode = phaseCode;
+  state.selectedStep = null;
+  state.selectedTask = null;
+  state.authoring = null;
+  state.expandedStageCodes = new Set();
+  state.expandedActivityCodes = new Set();
+  state.expandedTaskCodes = new Set();
+  state.expandedStepDetailCodes = new Set();
+  state.phase = await loadJson("/api/workbench/phases/" + encodeURIComponent(phaseCode));
+  renderPhaseTabs();
+  renderMethodologyTree();
+  const firstActivity = state.phase.stages.flatMap((stage) => stage.activities)[0];
+  if (firstActivity) {
+    await loadActivity(firstActivity.code);
+  } else {
+    state.activity = null;
+    await loadArtifactStandard(undefined);
+  }
+}
+
+function updateWorkbenchTitle() {
+  const title = document.getElementById("workbench-title");
+  if (!title) {
+    return;
+  }
+  title.textContent = state.workbenchMode === "tutorial"
+    ? title.dataset.tutorialTitle ?? title.textContent
+    : title.dataset.workbenchTitle ?? title.textContent;
+  document.title = title.textContent;
+}
+
+function setSidebarCollapsed(collapsed) {
+  state.sidebarCollapsed = collapsed;
+  document.body.classList.toggle("sidebar-collapsed", collapsed);
+  const closeButton = document.getElementById("sidebar-close");
+  const openButton = document.getElementById("sidebar-open");
+  closeButton?.setAttribute("aria-expanded", collapsed ? "false" : "true");
+  openButton?.setAttribute("aria-expanded", collapsed ? "false" : "true");
+  try {
+    window.localStorage.setItem("methodology-workbench-sidebar-collapsed", collapsed ? "true" : "false");
+  } catch {
+    // Ignore storage restrictions; the visible state is already updated.
+  }
+}
+
+function initSidebarControls() {
+  try {
+    state.sidebarCollapsed = window.localStorage.getItem("methodology-workbench-sidebar-collapsed") === "true";
+  } catch {
+    state.sidebarCollapsed = false;
+  }
+  setSidebarCollapsed(state.sidebarCollapsed);
+  document.getElementById("sidebar-close")?.addEventListener("click", () => setSidebarCollapsed(true));
+  document.getElementById("sidebar-open")?.addEventListener("click", () => setSidebarCollapsed(false));
+}
+
+function setWorkbenchMode(mode) {
+  state.workbenchMode = state.experienceMode === "execution"
+    ? "tutorial"
+    : mode === "tutorial" ? "tutorial" : "authoring";
+  document.body.classList.toggle("tutorial-mode", state.workbenchMode === "tutorial");
+  const toggle = document.getElementById("mode-toggle");
+  if (toggle) {
+    const nextMode = state.workbenchMode === "authoring" ? "tutorial" : "authoring";
+    toggle.dataset.modeTarget = nextMode;
+    toggle.textContent = nextMode === "tutorial" ? "Tutorial" : "Authoring";
+    toggle.title = nextMode === "tutorial" ? "Switch to Tutorial" : "Switch to Authoring";
+    toggle.setAttribute("aria-label", toggle.title);
+    toggle.setAttribute("aria-pressed", state.workbenchMode === "tutorial" ? "true" : "false");
+  }
+  updateWorkbenchTitle();
+  if (state.experienceMode !== "execution") {
+    try {
+      window.localStorage.setItem("methodology-workbench-mode", state.workbenchMode);
+    } catch {
+      // Ignore storage restrictions; the visible state is already updated.
+    }
+  }
+  renderMethodologyTree();
+  if (state.artifact) {
+    renderArtifactStandard(state.artifact, state.artifactDocuments);
+  }
+}
+
+function initModeControls() {
+  if (state.experienceMode === "execution") {
+    state.workbenchMode = "tutorial";
+  } else {
+    try {
+      const storedMode = window.localStorage.getItem("methodology-workbench-mode");
+      state.workbenchMode = storedMode === "tutorial"
+        ? "tutorial"
+        : "authoring";
+    } catch {
+      state.workbenchMode = "authoring";
+    }
+  }
+  document.getElementById("mode-toggle")?.addEventListener("click", (event) => {
+    const target = event.currentTarget?.dataset?.modeTarget;
+    setWorkbenchMode(target);
+  });
+  setWorkbenchMode(state.workbenchMode);
+}
+
+function applyArtifactViewOptions() {
+  document.body.classList.toggle("artifact-full-width", state.artifactFullWidth);
+  document.body.classList.toggle("artifact-compact-padding", state.artifactCompactPadding);
+  document.querySelectorAll("[data-artifact-option='full-width']").forEach((button) => {
+    button.classList.toggle("active", state.artifactFullWidth);
+    button.setAttribute("aria-pressed", state.artifactFullWidth ? "true" : "false");
+  });
+  document.querySelectorAll("[data-artifact-option='compact-padding']").forEach((button) => {
+    button.classList.toggle("active", state.artifactCompactPadding);
+    button.setAttribute("aria-pressed", state.artifactCompactPadding ? "true" : "false");
+  });
+}
+
+function setArtifactViewOption(option, enabled) {
+  if (option === "full-width") {
+    state.artifactFullWidth = enabled;
+  }
+  if (option === "compact-padding") {
+    state.artifactCompactPadding = enabled;
+  }
+  try {
+    window.localStorage.setItem("methodology-workbench-artifact-full-width", state.artifactFullWidth ? "true" : "false");
+    window.localStorage.setItem("methodology-workbench-artifact-compact-padding", state.artifactCompactPadding ? "true" : "false");
+  } catch {
+    // Ignore storage restrictions; the visible state is already updated.
+  }
+  applyArtifactViewOptions();
+}
+
+function initArtifactViewOptions() {
+  try {
+    state.artifactFullWidth = window.localStorage.getItem("methodology-workbench-artifact-full-width") === "true";
+    state.artifactCompactPadding = window.localStorage.getItem("methodology-workbench-artifact-compact-padding") === "true";
+  } catch {
+    state.artifactFullWidth = false;
+    state.artifactCompactPadding = false;
+  }
+  applyArtifactViewOptions();
+}
+
+function draftFor(kind, code) {
+  return (state.authoring?.drafts ?? []).find((draft) => draft.targetKind === kind && draft.targetCode === code);
+}
+
+function toggleStage(stageCode) {
+  if (state.expandedStageCodes.has(stageCode)) {
+    state.expandedStageCodes.delete(stageCode);
+  } else {
+    state.expandedStageCodes.add(stageCode);
+  }
+  renderMethodologyTree();
+}
+
+async function toggleActivity(activityCode) {
+  if (state.expandedActivityCodes.has(activityCode)) {
+    state.expandedActivityCodes.delete(activityCode);
+    renderMethodologyTree();
+    return;
+  }
+  state.expandedActivityCodes.add(activityCode);
+  await loadActivity(activityCode, {
+    preserveExpansion: true,
+    preserveSelection: state.activity?.activity.code === activityCode
+  });
+}
+
+function toggleTask(taskCode) {
+  if (state.expandedTaskCodes.has(taskCode)) {
+    state.expandedTaskCodes.delete(taskCode);
+  } else {
+    state.expandedTaskCodes.add(taskCode);
+  }
+  renderMethodologyTree();
+}
+
+function field(labelText, element, className = "") {
+  const label = document.createElement("label");
+  label.className = ["editor-field", className].filter(Boolean).join(" ");
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = labelText;
+  label.append(labelSpan, element);
+  return label;
+}
+
+function editorSection(title, children, className = "") {
+  const section = document.createElement("section");
+  section.className = ["editor-section", className].filter(Boolean).join(" ");
+  const heading = document.createElement("h4");
+  heading.className = "editor-section-title";
+  heading.textContent = title;
+  const body = document.createElement("div");
+  body.className = "editor-section-body";
+  body.append(...children);
+  section.append(heading, body);
+  return section;
+}
+
+function syncEditorMode(form, mode) {
+  form.dataset.mode = mode === "SCRIPT" ? "SCRIPT" : mode === "MANUAL" ? "MANUAL" : "LLM";
+}
+
+function renderInlineStepEditor(step) {
+  const draft = draftFor("step", step.code);
+  const wrapper = document.createElement("div");
+  wrapper.className = "inline-step-body";
+
+  const form = document.createElement("form");
+  form.className = "editor-form";
+  form.id = "step-editor";
+
+  const titleInput = document.createElement("input");
+  titleInput.id = "editor-title";
+  titleInput.name = "title";
+  titleInput.autocomplete = "off";
+  titleInput.value = draft?.title ?? step.title ?? step.name ?? "";
+
+  const modeSelect = document.createElement("select");
+  modeSelect.id = "editor-execution-mode";
+  modeSelect.name = "executionModeCode";
+  ["LLM", "SCRIPT", "MANUAL"].forEach((mode) => {
+    const option = document.createElement("option");
+    option.value = mode;
+    option.textContent = mode;
+    modeSelect.append(option);
+  });
+  modeSelect.value = draft?.executionModeCode ?? step.executionModeCode ?? "LLM";
+  modeSelect.addEventListener("change", () => syncEditorMode(form, modeSelect.value));
+
+  const scriptInput = document.createElement("input");
+  scriptInput.id = "editor-script-path";
+  scriptInput.name = "scriptPath";
+  scriptInput.autocomplete = "off";
+  scriptInput.placeholder = "methodology-authoring/step-assets/...";
+  scriptInput.value = draft?.scriptPath ?? "";
+
+  const instruction = document.createElement("textarea");
+  instruction.id = "editor-instruction";
+  instruction.name = "instruction";
+  instruction.rows = 8;
+  instruction.value = draft?.instruction ?? step.instruction ?? "";
+
+  const notes = document.createElement("textarea");
+  notes.id = "editor-notes";
+  notes.name = "notes";
+  notes.rows = 2;
+  notes.value = draft?.notes ?? "";
+
+  const validation = document.createElement("div");
+  validation.className = "validation-list";
+  validation.id = "editor-validation";
+
+  const review = document.createElement("div");
+  review.className = "compact-review";
+  review.innerHTML = "<div class='compact-review-header'><div><span class='field-label'>Apply Review</span><p id='review-target'>No draft selected</p></div><span class='status-pill neutral' id='review-status'>Idle</span></div><div class='diff-list compact' id='apply-plan'></div>";
+
+  const actions = document.createElement("div");
+  actions.className = "form-actions";
+  const apply = document.createElement("button");
+  apply.className = "secondary-button";
+  apply.id = "apply-draft";
+  apply.type = "button";
+  apply.textContent = "Apply Draft";
+  const save = document.createElement("button");
+  save.className = "primary-button";
+  save.type = "submit";
+  save.textContent = "Save Draft";
+  actions.append(apply, save);
+
+  syncEditorMode(form, modeSelect.value);
+  form.append(
+    editorSection("Step Definition", [
+      field("Title", titleInput),
+      field("Execution Mode", modeSelect)
+    ], "editor-section-compact"),
+    editorSection("Execution Authoring", [
+      field("Script Path", scriptInput, "script-field"),
+      field("Instruction", instruction)
+    ]),
+    editorSection("Notes and Review", [
+      field("Notes", notes),
+      validation,
+      review,
+      actions
+    ])
+  );
+  form.addEventListener("submit", saveStepDraft);
+  apply.addEventListener("click", applySelectedDraft);
+
+  wrapper.append(form);
+  setTimeout(() => {
+    renderValidation(draft?.validation);
+    void refreshApplyPlan();
+  }, 0);
+  return wrapper;
+}
+
+const TREE_KIND_LABELS = {
+  stage: { english: "Stage", korean: "단계" },
+  activity: { english: "Activity", korean: "활동" },
+  task: { english: "Task", korean: "작업" },
+  step: { english: "Step", korean: "절차" }
+};
+
+function treeKindTitle(kind) {
+  const label = TREE_KIND_LABELS[kind];
+  return label ? label.english + " / " + label.korean : kind;
+}
+
+function displayPhaseTabLabel(value) {
+  return String(value ?? "")
+    .replace(/\\s+Phase$/i, "")
+    .replace(/\\s+페이즈$/, "");
+}
+
+function displayTreeLabel(value) {
+  return String(value ?? "")
+    .replace(/\\s+(Stage|Activity|Task|Step)$/i, "")
+    .replace(/\\s+(단계|활동|작업|절차)$/, "");
+}
+
+function formatTreeOrder(value) {
+  const numericValue = Number(value);
+  if (!Number.isFinite(numericValue) || numericValue < 1) {
+    return undefined;
+  }
+  return String(Math.trunc(numericValue)).padStart(2, "0");
+}
+
+function treeKindBadge(kind, order) {
+  const label = TREE_KIND_LABELS[kind];
+  const formattedOrder = kind === "task" || kind === "step" ? formatTreeOrder(order) : undefined;
+  const badge = document.createElement("span");
+  badge.className = formattedOrder ? "tree-kind-badge with-order " + kind : "tree-kind-badge " + kind;
+  badge.title = formattedOrder ? treeKindTitle(kind) + " " + formattedOrder : treeKindTitle(kind);
+  badge.textContent = [label?.korean ?? kind, formattedOrder].filter(Boolean).join(" ");
+  return badge;
+}
+
+function treeCaret() {
+  const caret = document.createElement("span");
+  caret.className = "tree-caret";
+  caret.setAttribute("aria-hidden", "true");
+  return caret;
+}
+
+function treeCaretPlaceholder() {
+  const placeholder = document.createElement("span");
+  placeholder.className = "tree-caret-placeholder";
+  placeholder.setAttribute("aria-hidden", "true");
+  return placeholder;
+}
+
+function treeMetaGroup(kind, countText, order) {
+  const meta = document.createElement("span");
+  meta.className = "tree-meta-group";
+  meta.append(treeKindBadge(kind, order));
+  if (countText) {
+    const count = document.createElement("span");
+    count.className = "tree-count";
+    count.textContent = countText;
+    meta.append(count);
+  }
+  return meta;
+}
+
+function joinTreeCounts(items) {
+  return items.filter(Boolean).join(" · ");
+}
+
+function stepSummaryContent(step, order, expandable = false) {
+  const stepCaret = expandable ? treeCaret() : treeCaretPlaceholder();
+  const stepLabel = document.createElement("span");
+  stepLabel.className = "tree-label";
+  stepLabel.textContent = displayTreeLabel(step.title ?? step.name);
+  const stepMeta = treeMetaGroup("step", undefined, order);
+  const modeChip = document.createElement("span");
+  modeChip.className = "tree-mode-chip";
+  modeChip.textContent = step.executionModeCode ?? "";
+  stepMeta.append(modeChip);
+  const draft = draftFor("step", step.code);
+  if (draft) {
+    const draftChip = document.createElement("span");
+    draftChip.className = draft.validation?.valid ? "tree-state-chip valid" : "tree-state-chip issue";
+    draftChip.textContent = draft.validation?.valid ? "Draft" : "Issue";
+    stepMeta.append(draftChip);
+  }
+  return [stepCaret, stepLabel, stepMeta];
+}
+
+function renderSelectedStepPanel(step, task, order) {
+  const expanded = state.expandedStepDetailCodes.has(step.code);
+  const panel = document.createElement("details");
+  panel.className = "inline-step-panel";
+  panel.open = expanded;
+  panel.addEventListener("toggle", () => {
+    if (panel.open) {
+      state.expandedStepDetailCodes.add(step.code);
+    } else {
+      state.expandedStepDetailCodes.delete(step.code);
+    }
+    summary.setAttribute("aria-expanded", panel.open ? "true" : "false");
+  });
+  const summary = document.createElement("summary");
+  summary.className = "tree-node step active";
+  summary.setAttribute("role", "treeitem");
+  summary.setAttribute("aria-expanded", expanded ? "true" : "false");
+  summary.append(...stepSummaryContent(step, order, true));
+  panel.append(summary);
+  panel.append(renderInlineStepEditor(step, task));
+  return panel;
+}
+
+function renderStepButton(step, task, active = false, order = "") {
+  const stepButton = document.createElement("button");
+  stepButton.type = "button";
+  stepButton.className = active ? "tree-node step active" : "tree-node step";
+  stepButton.setAttribute("role", "treeitem");
+  stepButton.append(...stepSummaryContent(step, order));
+  stepButton.addEventListener("click", () => selectStep(step, task));
+  return stepButton;
+}
+
+function renderMethodologyTree() {
+  const container = document.getElementById("methodology-tree");
+  if (!container) {
+    return;
+  }
+  container.replaceChildren();
+  if (!state.phase) {
+    const empty = document.createElement("div");
+    empty.className = "tree-empty";
+    empty.textContent = "Loading methodology tree.";
+    container.append(empty);
+    return;
+  }
+  state.phase.stages.forEach((stageEntry, stageIndex) => {
+    const group = document.createElement("div");
+    group.className = "tree-group";
+    const stageCode = stageEntry.stage.code;
+    const stageExpanded = state.expandedStageCodes.has(stageCode);
+    const stageButton = document.createElement("button");
+    stageButton.type = "button";
+    stageButton.className = stageCode === state.activity?.stage?.code ? "tree-node stage context no-order" : "tree-node stage no-order";
+    stageButton.setAttribute("role", "treeitem");
+    stageButton.setAttribute("aria-expanded", stageExpanded ? "true" : "false");
+    const stageTitle = document.createElement("span");
+    stageTitle.className = "tree-label";
+    stageTitle.textContent = displayTreeLabel(stageEntry.stage.name);
+    const stageTaskCount = stageEntry.activities.reduce((total, activity) => total + (activity.taskCount ?? 0), 0);
+    const stageStepCount = stageEntry.activities.reduce((total, activity) => total + (activity.stepCount ?? 0), 0);
+    const stageMeta = treeMetaGroup("stage", joinTreeCounts([
+      stageEntry.activities.length + " activities",
+      stageTaskCount + " tasks",
+      stageStepCount + " steps"
+    ]));
+    stageButton.append(treeCaret(), stageTitle, stageMeta);
+    stageButton.addEventListener("click", () => toggleStage(stageCode));
+    group.append(stageButton);
+    if (!stageExpanded) {
+      container.append(group);
+      return;
+    }
+    stageEntry.activities.forEach((activity, activityIndex) => {
+      const activityExpanded = state.expandedActivityCodes.has(activity.code);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = activity.code === state.activity?.activity.code ? "tree-node activity context no-order" : "tree-node activity no-order";
+      button.setAttribute("role", "treeitem");
+      button.setAttribute("aria-expanded", activityExpanded ? "true" : "false");
+      const title = document.createElement("span");
+      title.className = "tree-label";
+      title.textContent = displayTreeLabel(activity.name);
+      const meta = treeMetaGroup("activity", joinTreeCounts([
+        activity.taskCount + " tasks",
+        activity.stepCount + " steps"
+      ]));
+      button.append(treeCaret(), title, meta);
+      button.addEventListener("click", () => toggleActivity(activity.code));
+      group.append(button);
+      if (activityExpanded && state.activity?.activity.code === activity.code) {
+        state.activity.tasks.forEach((taskEntry, taskIndex) => {
+          const taskExpanded = state.expandedTaskCodes.has(taskEntry.task.code);
+          const taskButton = document.createElement("button");
+          taskButton.type = "button";
+          taskButton.className = taskEntry.task.code === state.selectedTask?.code ? "tree-node task context" : "tree-node task";
+          taskButton.setAttribute("role", "treeitem");
+          taskButton.setAttribute("aria-expanded", taskExpanded ? "true" : "false");
+          const taskLabel = document.createElement("span");
+          taskLabel.className = "tree-label";
+          taskLabel.textContent = displayTreeLabel(taskEntry.task.name);
+          const taskMeta = treeMetaGroup("task", taskEntry.steps.length + " steps", taskIndex + 1);
+          taskButton.append(treeCaret(), taskLabel, taskMeta);
+          taskButton.addEventListener("click", () => toggleTask(taskEntry.task.code));
+          group.append(taskButton);
+          if (taskExpanded) {
+            taskEntry.steps.forEach((step, stepIndex) => {
+              if (step.code === state.selectedStep?.code) {
+                group.append(
+                  state.workbenchMode === "authoring"
+                    ? renderSelectedStepPanel(step, taskEntry.task, stepIndex + 1)
+                    : renderStepButton(step, taskEntry.task, true, stepIndex + 1)
+                );
+                return;
+              }
+              group.append(renderStepButton(step, taskEntry.task, false, stepIndex + 1));
+            });
+          }
+        });
+      }
+    });
+    container.append(group);
+  });
+}
+
+function renderValidation(validation) {
+  const container = document.getElementById("editor-validation");
+  if (!container) {
+    return;
+  }
+  container.replaceChildren();
+  const issues = validation?.issues ?? [];
+  if (issues.length === 0) {
+    const item = document.createElement("div");
+    item.className = "validation-item ok";
+    item.textContent = "No validation issues.";
+    container.append(item);
+    return;
+  }
+  issues.forEach((issue) => {
+    const item = document.createElement("div");
+    item.className = "validation-item " + issue.severity;
+    item.textContent = issue.field + ": " + issue.message;
+    container.append(item);
+  });
+}
+
+function renderApplyPlan(plan) {
+  const container = document.getElementById("apply-plan");
+  if (!container) {
+    return;
+  }
+  container.replaceChildren();
+  if (!plan) {
+    const empty = document.createElement("div");
+    empty.className = "diff-empty";
+    empty.textContent = "Select a step and save a draft.";
+    container.append(empty);
+    text("review-status", "Idle");
+    return;
+  }
+  text("review-target", "Draft changes");
+  text("review-status", plan.applicable ? "Ready" : "No Change");
+  if ((plan.changedFields ?? []).length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "diff-empty";
+    empty.textContent = plan.validation?.valid ? "No seed field changes." : "Draft is not valid.";
+    container.append(empty);
+    return;
+  }
+  plan.changedFields.forEach((change) => {
+    const item = document.createElement("div");
+    item.className = "diff-item";
+    const field = document.createElement("div");
+    field.className = "diff-field";
+    field.textContent = change.field;
+    const values = document.createElement("div");
+    values.className = "diff-values";
+    const before = document.createElement("div");
+    before.className = "diff-before";
+    before.innerHTML = "<span class='diff-label'>Before</span><span></span>";
+    before.children[1].textContent = String(change.before ?? "");
+    const after = document.createElement("div");
+    after.className = "diff-after";
+    after.innerHTML = "<span class='diff-label'>After</span><span></span>";
+    after.children[1].textContent = String(change.after ?? "");
+    values.append(before, after);
+    item.append(field, values);
+    container.append(item);
+  });
+}
+
+function renderDocumentActions(items) {
+  const row = document.createElement("div");
+  row.className = "document-action-row";
+  items.filter((item) => item?.relativePath).forEach((item) => {
+    const element = item.sourcePath
+      ? document.createElement("span")
+      : document.createElement("span");
+    element.textContent = item.label;
+    if (item.relativePath) {
+      element.title = item.relativePath;
+    }
+    row.append(element);
+  });
+  return row;
+}
+
+function renderDocumentPanel(documentVm, sourceItems = []) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "rendered-document";
+  const body = document.createElement("div");
+  body.className = "rendered-document-body";
+  body.innerHTML = documentVm?.html ?? "<p class='artifact-empty'>Document is not available.</p>";
+  wrapper.append(body);
+  const actions = renderDocumentActions(sourceItems);
+  if (actions.childElementCount > 0) {
+    wrapper.append(actions);
+  }
+  return wrapper;
+}
+
+function renderArtifactViewToolbar() {
+  const toolbar = document.createElement("div");
+  toolbar.className = "artifact-view-toolbar";
+  [
+    ["full-width", "Full Width"],
+    ["compact-padding", "Dense View"]
+  ].forEach(([option, label]) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "viewer-option-button";
+    button.dataset.artifactOption = option;
+    button.setAttribute("aria-pressed", "false");
+    button.textContent = label;
+    button.addEventListener("click", () => {
+      const next = option === "full-width" ? !state.artifactFullWidth : !state.artifactCompactPadding;
+      setArtifactViewOption(option, next);
+    });
+    toolbar.append(button);
+  });
+  setTimeout(applyArtifactViewOptions, 0);
+  return toolbar;
+}
+
+function renderArtifactStandard(artifactView, documentSet) {
+  const container = document.getElementById("artifact-standard");
+  if (!container) {
+    return;
+  }
+  container.replaceChildren();
+  if (!artifactView?.artifact) {
+    text("artifact-code", "No artifact selected");
+    text("artifact-status", "None");
+    const empty = document.createElement("div");
+    empty.className = "artifact-empty";
+    empty.textContent = "Select an Activity with a primary artifact standard.";
+    container.append(empty);
+    return;
+  }
+  const artifact = artifactView.artifact;
+  const documents = documentSet?.documents ?? {};
+  text("artifact-code", artifact.code);
+  text("artifact-status", artifact.statusCode ?? artifact.typeCode ?? "Seed");
+
+  const tabset = document.createElement("section");
+  tabset.className = "artifact-tabset";
+  const tabList = document.createElement("div");
+  tabList.className = "artifact-tab-list";
+  tabList.role = "tablist";
+  const panels = document.createElement("div");
+  panels.className = "artifact-tab-panels";
+
+  const tabs = [
+    {
+      id: "concept-technique",
+      label: "개념 및 기법서",
+      render: () => renderDocumentPanel(documents.conceptTechnique, [
+        { label: documents.commonConceptFormat?.relativePath, relativePath: documents.commonConceptFormat?.relativePath },
+        { label: documents.commonConceptTemplate?.relativePath, relativePath: documents.commonConceptTemplate?.relativePath },
+        { label: documents.commonConceptSample?.relativePath, relativePath: documents.commonConceptSample?.relativePath }
+      ])
+    },
+    {
+      id: "template",
+      label: "산출물 서식 및 가이드",
+      render: () => renderDocumentPanel(documents.template, [
+        { label: documents.formatMetadata?.relativePath, relativePath: documents.formatMetadata?.relativePath },
+        { label: documents.template?.relativePath, relativePath: documents.template?.relativePath }
+      ])
+    },
+    {
+      id: "sample",
+      label: "산출물 예시",
+      render: () => renderDocumentPanel(documents.sample, [
+        { label: documents.sample?.relativePath, relativePath: documents.sample?.relativePath }
+      ])
+    }
+  ];
+
+  tabs.forEach((tab, index) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = index === 0 ? "artifact-tab active" : "artifact-tab";
+    button.role = "tab";
+    button.setAttribute("aria-selected", index === 0 ? "true" : "false");
+    button.textContent = tab.label;
+    const panel = document.createElement("section");
+    panel.className = "artifact-tab-panel";
+    panel.role = "tabpanel";
+    panel.hidden = index !== 0;
+    panel.append(tab.render());
+    button.addEventListener("click", () => {
+      Array.from(tabList.children).forEach((item) => {
+        const active = item === button;
+        item.classList.toggle("active", active);
+        item.setAttribute("aria-selected", active ? "true" : "false");
+      });
+      Array.from(panels.children).forEach((item) => {
+        item.hidden = item !== panel;
+      });
+    });
+    tabList.append(button);
+    panels.append(panel);
+  });
+
+  tabList.append(renderArtifactViewToolbar());
+  tabset.append(tabList, panels);
+  container.append(tabset);
+}
+
+async function loadArtifactStandard(artifactCode) {
+  if (!artifactCode) {
+    state.artifact = null;
+    state.artifactDocuments = null;
+    renderArtifactStandard(null, null);
+    return;
+  }
+  const [artifact, documents] = await Promise.all([
+    loadJson("/api/workbench/artifacts/" + encodeURIComponent(artifactCode)),
+    loadJson("/api/workbench/artifacts/" + encodeURIComponent(artifactCode) + "/documents")
+  ]);
+  state.artifact = artifact;
+  state.artifactDocuments = documents;
+  renderArtifactStandard(state.artifact, state.artifactDocuments);
+}
+
+async function refreshApplyPlan() {
+  if (!state.selectedStep) {
+    renderApplyPlan(null);
+    return;
+  }
+  const draft = draftFor("step", state.selectedStep.code);
+  if (!draft) {
+    renderApplyPlan(null);
+    return;
+  }
+  const plan = await loadJson("/api/workbench/authoring/steps/" + encodeURIComponent(state.selectedStep.code) + "/apply-plan");
+  renderApplyPlan(plan);
+}
+
+function renderActivity(activity) {
+  state.activity = activity;
+  if (activity.stage?.code) {
+    state.expandedStageCodes.add(activity.stage.code);
+  }
+  state.expandedActivityCodes.add(activity.activity.code);
+  renderMethodologyTree();
+  void loadArtifactStandard(activity.primaryArtifact?.code);
+  const selectedExists = activity.tasks.some((taskEntry) => taskEntry.steps.some((step) => step.code === state.selectedStep?.code));
+  if (!selectedExists) {
+    const firstTask = activity.tasks[0];
+    const firstStep = firstTask?.steps[0];
+    if (firstTask && firstStep) {
+      state.expandedTaskCodes.add(firstTask.task.code);
+      void selectStep(firstStep, firstTask.task);
+    }
+  }
+}
+
+async function selectStep(step, task) {
+  state.selectedStep = step;
+  state.selectedTask = task;
+  state.expandedTaskCodes.add(task.code);
+  renderMethodologyTree();
+  if (state.artifact) {
+    renderArtifactStandard(state.artifact, state.artifactDocuments);
+  }
+  if (state.workbenchMode !== "authoring") {
+    return;
+  }
+  const draft = draftFor("step", step.code);
+  text("editor-status", draft ? (draft.validation.valid ? "Draft Valid" : "Draft Issues") : "Seed");
+  setValue("editor-title", draft?.title ?? step.title ?? step.name);
+  setValue("editor-execution-mode", draft?.executionModeCode ?? step.executionModeCode ?? "LLM");
+  setValue("editor-script-path", draft?.scriptPath ?? "");
+  setValue("editor-instruction", draft?.instruction ?? step.instruction ?? "");
+  setValue("editor-notes", draft?.notes ?? "");
+  renderValidation(draft?.validation);
+  await refreshApplyPlan();
+}
+
+async function loadActivity(activityCode, options = {}) {
+  const activity = await loadJson("/api/workbench/activities/" + encodeURIComponent(activityCode));
+  state.authoring = await loadJson("/api/workbench/activities/" + encodeURIComponent(activityCode) + "/authoring");
+  if (!options.preserveSelection) {
+    state.selectedStep = null;
+    state.selectedTask = null;
+  }
+  if (!options.preserveExpansion) {
+    state.expandedActivityCodes.add(activityCode);
+  }
+  renderActivity(activity);
+}
+
+async function saveStepDraft(event) {
+  event.preventDefault();
+  if (!state.selectedStep || !state.selectedTask || !state.activity) {
+    return;
+  }
+  const payload = {
+    activityCode: state.activity.activity.code,
+    taskCode: state.selectedTask.code,
+    title: valueOf("editor-title"),
+    executionModeCode: valueOf("editor-execution-mode"),
+    scriptPath: valueOf("editor-script-path"),
+    instruction: valueOf("editor-instruction"),
+    notes: valueOf("editor-notes")
+  };
+  const draft = await putJson("/api/workbench/authoring/steps/" + encodeURIComponent(state.selectedStep.code) + "/draft", payload);
+  state.authoring = state.authoring ?? { drafts: [] };
+  state.authoring.drafts = [
+    ...(state.authoring.drafts ?? []).filter((item) => item.targetCode !== draft.targetCode || item.targetKind !== draft.targetKind),
+    draft
+  ];
+  text("editor-status", draft.validation.valid ? "Draft Valid" : "Draft Issues");
+  renderValidation(draft.validation);
+  renderMethodologyTree();
+  await refreshApplyPlan();
+}
+
+async function applySelectedDraft() {
+  if (!state.selectedStep || !state.activity) {
+    return;
+  }
+  const draft = draftFor("step", state.selectedStep.code);
+  if (!draft) {
+    renderValidation({ issues: [{ field: "draft", severity: "error", message: "Save a draft before applying it to seed." }] });
+    return;
+  }
+  if (!draft.validation.valid) {
+    text("editor-status", "Draft Issues");
+    renderValidation(draft.validation);
+    return;
+  }
+  const result = await postJson("/api/workbench/authoring/steps/" + encodeURIComponent(state.selectedStep.code) + "/apply", {});
+  text("editor-status", result.applied ? "Applied" : "Not Applied");
+  renderApplyPlan(result);
+  const activityCode = state.activity.activity.code;
+  const selectedStepCode = state.selectedStep.code;
+  const activity = await loadJson("/api/workbench/activities/" + encodeURIComponent(activityCode));
+  state.authoring = await loadJson("/api/workbench/activities/" + encodeURIComponent(activityCode) + "/authoring");
+  renderActivity(activity);
+  const taskEntry = activity.tasks.find((entry) => entry.steps.some((step) => step.code === selectedStepCode));
+  const step = taskEntry?.steps.find((item) => item.code === selectedStepCode);
+  if (taskEntry && step) {
+    await selectStep(step, taskEntry.task);
+  }
+}
+
+async function init() {
+  initSidebarControls();
+  initModeControls();
+  initArtifactViewOptions();
+  state.lifecycle = await loadJson("/api/workbench/lifecycle");
+  renderLifecycleLanding();
+  renderPhaseTabs();
+}
+
+init().catch((error) => {
+  text("editor-step-code", error instanceof Error ? error.message : String(error));
+});`;
+}
+function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+//# sourceMappingURL=workbench-server.js.map