@oevery/rsp 4.0.0 → 4.1.0

package/dist/viewer-build.json

@@ -0,0 +1 @@
+{"identity":"11922cc76a15ff0a77664ed9c47ca4dee3b0315f12662e33de330c6ece574b29"}

package/dist/viewer-service.mjs

@@ -0,0 +1,551 @@
+#!/usr/bin/env node
+import {
+  MAX_CONTENT_BYTES,
+  digest,
+  documentHeadings,
+  isWithin,
+  projectPath,
+  queryArchitecture,
+  readProjectFile,
+  readProjectRuntime,
+  selectArchitecture
+} from "./chunk-JO6NDJM4.mjs";
+import {
+  VIEWER_PROTOCOL,
+  snapshotViewerRuntime,
+  viewerRuntime
+} from "./chunk-U56XMIOO.mjs";
+import {
+  readCurrentDocument
+} from "./chunk-LGDCIQYL.mjs";
+import {
+  clearConfigCache,
+  parseMarkdown,
+  walkMarkdown
+} from "./chunk-P3KO3GZW.mjs";
+
+// src/viewer/service.ts
+import { Buffer as Buffer2 } from "buffer";
+import { timingSafeEqual } from "crypto";
+import { realpath as realpath2, rm, writeFile } from "fs/promises";
+import { createServer } from "http";
+
+// src/viewer/documents.ts
+import { Buffer } from "buffer";
+import { extname, posix, resolve } from "path";
+var escape = (value) => value.replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]);
+var imageTypes = { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".gif": "image/gif", ".webp": "image/webp" };
+function permitted(model, file) {
+  projectPath(file);
+  const parts = file.split("/");
+  if (parts.some((part) => /^(?:secrets?|credentials?|private)(?:[._-]|$)|^id_(?:rsa|dsa|ecdsa|ed25519)(?:[._-]|$)/i.test(part)))
+    return false;
+  const rspDocument = file.startsWith(".rsp/specs/") || model.documents.some((document) => document.startsWith(".rsp/") && isWithin(posix.dirname(document), file));
+  return parts.every((part, index) => !part.startsWith(".") || index === 0 && part === ".rsp" && rspDocument);
+}
+function localTarget(model, source, value, image) {
+  if (!value || value.startsWith("#") || /^[a-z][\w+.-]*:|^(?:\/|\\)/i.test(value))
+    return void 0;
+  try {
+    const decoded = decodeURIComponent(value.split(/[?#]/)[0]);
+    const target = posix.normalize(posix.join(posix.dirname(source), decoded));
+    return permitted(model, target) && (image ? imageTypes[extname(target).toLowerCase()] : /\.md$/i.test(target)) ? target : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function definitionsIn(document) {
+  const definitions = /* @__PURE__ */ new Map();
+  walkMarkdown(document.root, (node) => {
+    if (node.type === "definition" && !definitions.has(node.identifier.toLowerCase()))
+      definitions.set(node.identifier.toLowerCase(), node);
+  });
+  return definitions;
+}
+async function authorizedContent(root, model, file, image = false) {
+  if (!permitted(model, file) || !(image ? imageTypes[extname(file).toLowerCase()] : /\.md$/i.test(file)))
+    throw new Error("Unregistered/unsupported document or image");
+  if (!image && model.documents.includes(file))
+    return readProjectFile(root, file);
+  const pending = [...model.documents];
+  const scheduled = new Set(pending);
+  const visited = /* @__PURE__ */ new Set();
+  let bytes = 0;
+  while (pending.length) {
+    const current = pending.shift();
+    if (visited.has(current) || !permitted(model, current))
+      continue;
+    visited.add(current);
+    let content;
+    try {
+      content = await readProjectFile(root, current);
+    } catch (error) {
+      if (current === file)
+        throw error;
+      continue;
+    }
+    if (!image && current === file)
+      return content;
+    bytes += Buffer.byteLength(content);
+    if (bytes > MAX_CONTENT_BYTES)
+      throw new Error("Document authorization exceeds the Markdown inspection limit");
+    const document = parseMarkdown(content);
+    const definitions = definitionsIn(document);
+    let found = false;
+    walkMarkdown(document.root, (node) => {
+      const isImage = node.type === "image" || node.type === "imageReference";
+      const value = node.type === "link" || node.type === "image" ? node.url : node.type === "linkReference" || node.type === "imageReference" ? definitions.get(node.identifier.toLowerCase())?.url : void 0;
+      const target = value && localTarget(model, current, value, isImage);
+      if (!target)
+        return;
+      if (image && isImage && target === file)
+        found = true;
+      if (!isImage && !scheduled.has(target)) {
+        scheduled.add(target);
+        pending.push(target);
+      }
+    });
+    if (found)
+      return void 0;
+  }
+  throw new Error("Document or image is not reachable from an architecture binding");
+}
+async function readAsset(root, model, file) {
+  await authorizedContent(root, model, file, true);
+  const path = resolve(root, file);
+  const current = await readCurrentDocument(path, root, file, MAX_CONTENT_BYTES, true);
+  return { type: imageTypes[extname(file).toLowerCase()], content: current.data, revision: digest(current.data) };
+}
+async function renderDocument(root, model, file) {
+  const content = await authorizedContent(root, model, file);
+  const document = parseMarkdown(content);
+  const headings = documentHeadings(document);
+  const definitions = definitionsIn(document);
+  let headingIndex = 0;
+  function url(value, image = false) {
+    if (value.startsWith("#"))
+      return image ? void 0 : escape(value);
+    if (/^[a-z][\w+.-]*:/i.test(value))
+      return !image && /^(?:https?:|mailto:)/i.test(value) ? escape(value) : void 0;
+    if (value.startsWith("//") || value.startsWith("/"))
+      return void 0;
+    try {
+      const parsed = new URL(value, "http://document.local/");
+      const target = localTarget(model, file, value, image);
+      if (!target)
+        return void 0;
+      if (image)
+        return escape(target);
+      return `/?${escape(new URLSearchParams({ file: target, ...parsed.hash ? { anchor: decodeURIComponent(parsed.hash.slice(1)) } : {} }).toString())}`;
+    } catch {
+      return void 0;
+    }
+  }
+  function render(node) {
+    const children = () => "children" in node ? node.children.map(render).join("") : "";
+    switch (node.type) {
+      case "root":
+        return children();
+      case "text":
+        return escape(node.value);
+      case "heading":
+        return `<h${node.depth} id="${escape(headings[headingIndex++].anchor)}">${children()}</h${node.depth}>`;
+      case "paragraph":
+        return `<p>${children()}</p>`;
+      case "strong":
+        return `<strong>${children()}</strong>`;
+      case "emphasis":
+        return `<em>${children()}</em>`;
+      case "delete":
+        return `<del>${children()}</del>`;
+      case "inlineCode":
+        return `<code>${escape(node.value)}</code>`;
+      case "code":
+        return `<pre><code>${escape(node.value)}</code></pre>`;
+      case "blockquote":
+        return `<blockquote>${children()}</blockquote>`;
+      case "list":
+        return node.ordered ? `<ol start="${node.start ?? 1}">${children()}</ol>` : `<ul>${children()}</ul>`;
+      case "listItem":
+        return `<li>${node.checked === null || node.checked === void 0 ? "" : node.checked ? "\u2611 " : "\u2610 "}${children()}</li>`;
+      case "table": {
+        const rows = node.children.map((row, index) => `<tr>${row.children.map((cell, column) => {
+          const tag = index === 0 ? "th" : "td";
+          const align = node.align?.[column] ?? "left";
+          return `<${tag}${index === 0 ? ' scope="col"' : ""} style="text-align:${align}">${cell.children.map(render).join("")}</${tag}>`;
+        }).join("")}</tr>`);
+        return `<table><thead>${rows[0] ?? ""}</thead><tbody>${rows.slice(1).join("")}</tbody></table>`;
+      }
+      case "break":
+        return "<br>";
+      case "thematicBreak":
+        return "<hr>";
+      case "link":
+      case "linkReference": {
+        const value = node.type === "link" ? node.url : definitions.get(node.identifier.toLowerCase())?.url;
+        const href = value === void 0 ? void 0 : url(value);
+        return href ? `<a href="${href}" rel="noopener noreferrer"${/^https?:/i.test(href) ? ' target="_blank"' : ""}>${children()}</a>` : `${children()}<span data-rsp-reading-status="unavailableLink"> (unavailable link)</span>`;
+      }
+      case "image": {
+        const path = url(node.url, true);
+        return path ? `<img data-asset="${path}" alt="${escape(node.alt ?? "")}">` : `<span>${escape(node.alt ?? "")}<span data-rsp-reading-status="unsupportedImage"> (external/unsupported image)</span></span>`;
+      }
+      case "imageReference": {
+        const definition = definitions.get(node.identifier.toLowerCase());
+        const path = definition && url(definition.url, true);
+        return path ? `<img data-asset="${path}" alt="${escape(node.alt ?? "")}">` : `<span>${escape(node.alt ?? "")}<span data-rsp-reading-status="unsupportedImage"> (external/unsupported image)</span></span>`;
+      }
+      default:
+        return "";
+    }
+  }
+  return { file, revision: digest(content), headings, html: render(document.root) };
+}
+
+// src/viewer/layout.ts
+import { Builder } from "@likec4/core/builder";
+import { layoutLikeC4Model } from "@likec4/layouts";
+function diagramAliases(architecture) {
+  const aliases = new Map(architecture.nodes.map((node, index) => [node.id, `n${index}`]));
+  const fqn = (id) => {
+    const node = architecture.nodes.find((node2) => node2.id === id);
+    return node.parent ? `${fqn(node.parent)}.${aliases.get(id)}` : aliases.get(id);
+  };
+  return Object.fromEntries(architecture.nodes.map((node) => [node.id, fqn(node.id)]));
+}
+async function layoutArchitecture(architecture, workspace, focus) {
+  const diagramNodes = focus ? architecture.nodes.map(({ parent: _parent, ...node }) => node) : architecture.nodes;
+  const names = diagramAliases({ ...architecture, nodes: diagramNodes });
+  const nodeById = new Map(architecture.nodes.map((node) => [node.id, node]));
+  const needsReference = (edge) => names[edge.source] === names[edge.target] || names[edge.source].startsWith(`${names[edge.target]}.`) || names[edge.target].startsWith(`${names[edge.source]}.`);
+  const containers = new Set(diagramNodes.flatMap((node) => node.parent ? [node.parent] : []));
+  const referencedTargets = /* @__PURE__ */ new Set([...architecture.relations.filter(needsReference).map((edge) => edge.target), ...architecture.relations.flatMap((edge) => [edge.source, edge.target].filter((id) => containers.has(id)))]);
+  const primaryReferences = Object.fromEntries([...referencedTargets].map((id, index) => [`r${index}`, id]));
+  const referenceNames = Object.fromEntries(Object.entries(primaryReferences).map(([alias, id]) => [id, alias]));
+  const selfReferences = Object.fromEntries([...new Set(architecture.relations.filter((edge) => edge.source === edge.target && containers.has(edge.source)).map((edge) => edge.source))].map((id, index) => [`s${index}`, id]));
+  const selfNames = Object.fromEntries(Object.entries(selfReferences).map(([alias, id]) => [id, alias]));
+  const references = { ...primaryReferences, ...selfReferences };
+  const sourceName = (edge) => containers.has(edge.source) ? referenceNames[edge.source] : names[edge.source];
+  const targetName = (edge) => edge.source === edge.target && containers.has(edge.source) ? selfNames[edge.target] : needsReference(edge) || containers.has(edge.target) ? referenceNames[edge.target] : names[edge.target];
+  const views = focus ? [{ id: "", title: `${nodeById.get(focus)?.title ?? focus} relationships`, node: "", include: [focus] }] : [{ id: "", title: "All registered nodes", node: "", include: architecture.nodes.map((node) => node.id) }, ...architecture.views];
+  const viewNames = Object.fromEntries(views.map((view, index) => [view.id, `v${index}`]));
+  viewNames[""] = "v0";
+  const focusView = focus ? `v${views.length - 1}` : void 0;
+  const relationTags = new Map(architecture.relations.map((edge, index) => [edge.id, `e${index}`]));
+  const builder = Builder.specification({ elements: { component: {} }, relationships: { relation: { multiple: true } }, tags: Object.fromEntries([...relationTags.values()].map((tag) => [tag, {}])) }).model((helpers, compose) => {
+    const h = helpers;
+    const pipe = compose;
+    const properties = (node) => ({
+      title: node.title,
+      color: "green",
+      description: { txt: node.description },
+      links: node.bindings.map((binding) => ({ title: binding.file, url: `/?${new URLSearchParams({ workspace, file: binding.file, ...binding.headings ? { headings: JSON.stringify(binding.headings) } : {} })}` }))
+    });
+    const element = (node) => h.component(names[node.id].split(".").at(-1), properties(node)).with(...diagramNodes.filter((child) => child.parent === node.id).map(element));
+    return pipe(...diagramNodes.filter((node) => !node.parent).map(element), ...Object.entries(references).map(([alias, id]) => {
+      const node = nodeById.get(id);
+      return h.component(alias, { ...properties(node), title: `${node.title} (relationship reference)`, description: { txt: `Reference to ${node.id}. ${node.description}` } });
+    }), ...architecture.relations.map((edge) => h.rel(sourceName(edge), targetName(edge), { kind: "relation", title: edge.type, tags: [relationTags.get(edge.id)], description: { txt: edge.description } })));
+  }).views((helpers, compose) => {
+    const h = helpers;
+    const pipe = compose;
+    return pipe(...views.map((view, index) => {
+      const isFocus = !!focus && index === views.length - 1;
+      const projection = selectArchitecture(architecture, isFocus ? { kind: "focus", id: focus } : view.id ? { kind: "view", id: view.id } : { kind: "full" });
+      const include = [...projection.visible].map((id) => names[id]);
+      include.push(...projection.relations.flatMap((edge) => [sourceName(edge), targetName(edge)].filter((name) => name in references)));
+      const rules = [...new Set(include)].map((name) => {
+        const id = references[name] ?? architecture.nodes.find((node2) => names[node2.id] === name).id;
+        const targets = architecture.views.filter((candidate) => candidate.node === id);
+        const node = nodeById.get(id);
+        const title = `${node.title}${references[name] ? " [reference]" : ""}${projection.selected.has(id) ? "" : " [boundary]"}`;
+        return h.$include(name, { with: { title, description: { txt: "" }, size: "sm", padding: "xs", textSize: "sm", ...targets.length === 1 && targets[0].id !== view.id && viewNames[targets[0].id] ? { navigateTo: viewNames[targets[0].id] } : {} } });
+      });
+      rules.push(...architecture.relations.filter((edge) => !projection.relations.includes(edge)).map((edge) => h.$exclude("* -> *", { where: `tag is #${relationTags.get(edge.id)}` })));
+      const options = { title: view.title };
+      const alias = isFocus ? focusView : viewNames[view.id];
+      return include.length && view.node && nodeById.has(view.node) ? h.viewOf(alias, names[view.node], options, h.$rules(...rules, h.$autoLayout("LR", { rank: 70, node: 32 }))) : h.view(alias, options, h.$rules(...rules, h.$autoLayout("LR", { rank: 70, node: 32 })));
+    }));
+  });
+  const data = (await layoutLikeC4Model(builder.toLikeC4Model({ id: workspace }))).$data;
+  const relationIds = Object.fromEntries(Object.values(data.relations).map((edge) => [edge.id, architecture.relations.find((item) => relationTags.get(item.id) === edge.tags?.[0]).id]));
+  return { data, names, viewNames, references, relationIds, focusView };
+}
+
+// src/viewer/workspaces.ts
+import { execFile } from "child_process";
+import { realpath } from "fs/promises";
+import { basename, dirname } from "path";
+import { promisify } from "util";
+var execute = promisify(execFile);
+async function describeWorkspace(workspace) {
+  const summary = { ...workspace, title: basename(workspace.root) };
+  const env = { ...process.env };
+  for (const key of Object.keys(env)) {
+    if (key.startsWith("GIT_"))
+      delete env[key];
+  }
+  const git = async (...args) => (await execute("git", ["-C", workspace.root, ...args], { env, timeout: 2e3, maxBuffer: 64 * 1024 })).stdout.trim();
+  try {
+    const [directory, common, branch] = await Promise.all([
+      git("rev-parse", "--absolute-git-dir").then((path) => realpath(path)),
+      git("rev-parse", "--path-format=absolute", "--git-common-dir").then((path) => realpath(path)),
+      git("symbolic-ref", "--quiet", "--short", "HEAD").catch(() => void 0)
+    ]);
+    summary.git = {
+      repository: digest(common),
+      title: basename(common) === ".git" ? basename(dirname(common)) : basename(common),
+      linked: directory !== common,
+      ...branch ? { branch } : { commit: await git("rev-parse", "--short", "HEAD") }
+    };
+  } catch {
+  }
+  return summary;
+}
+
+// src/viewer/service.ts
+var IDLE_MS = 30 * 60 * 1e3;
+var WORKSPACE_GRACE_MS = 5 * 60 * 1e3;
+var ReadingActivity = class {
+  lastReading;
+  workspaces = /* @__PURE__ */ new Map();
+  constructor(now) {
+    this.lastReading = now;
+  }
+  heartbeat(id, now) {
+    this.lastReading = now;
+    this.workspaces.set(id, now);
+  }
+  expired(now) {
+    return now - this.lastReading >= IDLE_MS;
+  }
+  inactive(id, now) {
+    return now - (this.workspaces.get(id) ?? 0) >= WORKSPACE_GRACE_MS;
+  }
+};
+function authorized(actual, token) {
+  const expected = Buffer2.from(`Bearer ${token}`);
+  const received = Buffer2.from(actual ?? "");
+  return received.length === expected.length && timingSafeEqual(received, expected);
+}
+async function createViewerService(options) {
+  const runtime = await snapshotViewerRuntime(options.root, options.identity);
+  const workspaces = /* @__PURE__ */ new Map();
+  const activity = new ReadingActivity(Date.now());
+  let layoutQueue = Promise.resolve();
+  let server;
+  let closing = false;
+  let timer;
+  async function close() {
+    if (closing)
+      return;
+    closing = true;
+    clearInterval(timer);
+    workspaces.clear();
+    server.closeAllConnections();
+    await new Promise((resolve2) => server.close(() => resolve2()));
+    if (options.recordPath)
+      await rm(options.recordPath, { force: true });
+  }
+  async function validateRuntime(root) {
+    const selected = await readProjectRuntime(root);
+    if (selected.mode === "package" && selected.version && selected.version !== runtime.version)
+      throw new Error(`Workspace selects RSP ${selected.version}; open it using that runtime`);
+  }
+  async function load(workspace) {
+    if (workspace.pending)
+      return workspace.pending;
+    workspace.pending = (async () => {
+      try {
+        await validateRuntime(workspace.root);
+        clearConfigCache();
+        const model = await queryArchitecture({ root: workspace.root });
+        if (!model.configured)
+          throw new Error("Architecture is not configured: .rsp/architecture.json");
+        const graphKey = digest(JSON.stringify({ nodes: model.nodes.map(({ bindings, ...node }) => ({ ...node, bindings: bindings.map(({ anchor: _anchor, ...binding }) => binding) })), relations: model.relations, views: model.views }));
+        if (workspace.graphKey !== graphKey || !workspace.layout) {
+          const queued = layoutQueue.then(async () => {
+            const started = performance.now();
+            const layout = await layoutArchitecture(model, workspace.id);
+            workspace.layoutMs = performance.now() - started;
+            workspace.layout = layout;
+            workspace.graphKey = graphKey;
+          });
+          layoutQueue = queued.catch(() => {
+          });
+          await queued;
+        }
+        workspace.model = model;
+        workspace.error = void 0;
+      } catch (error) {
+        workspace.error = error.message;
+        throw error;
+      } finally {
+        workspace.pending = void 0;
+      }
+    })();
+    return workspace.pending;
+  }
+  server = createServer(async (request, response) => {
+    const origin = `http://127.0.0.1:${server.address().port}`;
+    const send = (status, type, value) => {
+      response.writeHead(status, { "Content-Type": type, "Cache-Control": "no-store", "X-Content-Type-Options": "nosniff", "Referrer-Policy": "no-referrer", "Content-Security-Policy": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: blob:; connect-src 'self'; frame-ancestors 'none'; object-src 'none'; base-uri 'none'" });
+      response.end(request.method === "HEAD" ? void 0 : value);
+    };
+    const json = (value) => send(200, "application/json; charset=utf-8", JSON.stringify(value));
+    try {
+      if (request.headers.host !== origin.slice(7) || request.headers.origin && request.headers.origin !== origin) {
+        send(403, "text/plain", "Local origin only");
+        return;
+      }
+      const url = new URL(request.url, origin);
+      if (url.pathname.startsWith("/control/")) {
+        if (!authorized(request.headers.authorization, options.adminToken)) {
+          send(403, "text/plain", "Unauthorized registration/control");
+          return;
+        }
+        const base = { identity: options.identity, protocol: VIEWER_PROTOCOL };
+        if (url.pathname === "/control/status" && request.method === "GET") {
+          json({ ...base, pid: process.pid, port: server.address().port, workspaces: [...workspaces.values()].map((workspace2) => ({ id: workspace2.id, root: workspace2.root, active: !!workspace2.model, revision: workspace2.model?.source.revision, error: workspace2.error, layoutMs: workspace2.layoutMs })) });
+          return;
+        }
+        if (request.method !== "POST") {
+          send(405, "text/plain", "POST required");
+          return;
+        }
+        if (url.pathname === "/control/stop") {
+          json(base);
+          setImmediate(() => void close());
+          return;
+        }
+        if (url.pathname === "/control/register") {
+          let body = "";
+          for await (const chunk of request) {
+            body += chunk;
+            if (body.length > 16384)
+              throw new Error("Registration request too large");
+          }
+          const root = await realpath2(JSON.parse(body).root);
+          await validateRuntime(root);
+          const id2 = digest(root).slice(0, 24);
+          const workspace2 = workspaces.get(id2) ?? { id: id2, root };
+          workspaces.set(id2, workspace2);
+          activity.heartbeat(id2, Date.now());
+          await load(workspace2);
+          json({ ...base, workspace: id2 });
+          return;
+        }
+        send(404, "text/plain", "Unknown control request");
+        return;
+      }
+      if (!["GET", "HEAD"].includes(request.method ?? "")) {
+        send(405, "text/plain", "Read-only");
+        return;
+      }
+      if (url.pathname === "/") {
+        send(200, "text/html; charset=utf-8", '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>RSP Architecture</title><link rel="stylesheet" href="/app.css"></head><body><div id="root"></div><script type="module" src="/app.js"></script></body></html>');
+        return;
+      }
+      if (["/app.js", "/app.css"].includes(url.pathname)) {
+        send(200, url.pathname.endsWith(".css") ? "text/css" : "text/javascript", runtime.assets.get(url.pathname));
+        return;
+      }
+      if (!authorized(request.headers.authorization, options.readToken)) {
+        send(403, "text/plain", "Unauthorized reading session");
+        return;
+      }
+      if (url.pathname === "/api/workspaces") {
+        json(await Promise.all([...workspaces.values()].map(({ id: id2, root }) => describeWorkspace({ id: id2, root }))));
+        return;
+      }
+      const match = /^\/api\/workspaces\/([a-f0-9]{24})\/(model|heartbeat|document|asset)$/.exec(url.pathname);
+      const workspace = match ? workspaces.get(match[1]) : void 0;
+      if (!match || !workspace) {
+        send(404, "text/plain", "Unknown workspace");
+        return;
+      }
+      const id = workspace.id;
+      if (match[2] === "heartbeat") {
+        activity.heartbeat(id, Date.now());
+        json({ workspace: id });
+        return;
+      }
+      activity.heartbeat(id, Date.now());
+      await load(workspace);
+      if (match[2] === "model") {
+        const model = workspace.model;
+        const graphRevision = workspace.graphKey;
+        const focus = url.searchParams.get("focus");
+        let layout = workspace.layout;
+        if (focus) {
+          if (!model.nodes.some((node) => node.id === focus)) {
+            json({ workspace: id, root: workspace.root, revision: model.source.revision, graphRevision, architecture: model, layout, missingFocus: focus, focus });
+            return;
+          }
+          if (workspace.focus?.id !== focus || workspace.focus.graphKey !== workspace.graphKey) {
+            const pending = layoutQueue.then(() => layoutArchitecture(model, id, focus));
+            layoutQueue = pending.then(() => {
+            }, () => {
+            });
+            workspace.focus = { id: focus, graphKey: workspace.graphKey, pending };
+          }
+          layout = await workspace.focus.pending;
+        }
+        json({ workspace: id, root: workspace.root, revision: model.source.revision, graphRevision, architecture: model, layout, focus: focus ?? "" });
+        return;
+      }
+      const file = url.searchParams.get("file") ?? "";
+      if (match[2] === "document") {
+        json({ workspace: id, ...await renderDocument(workspace.root, workspace.model, file) });
+        return;
+      }
+      const asset = await readAsset(workspace.root, workspace.model, file);
+      response.setHeader("ETag", `"${asset.revision}"`);
+      send(200, asset.type, asset.content);
+    } catch (error) {
+      send(409, "text/plain; charset=utf-8", error.message);
+    }
+  });
+  await new Promise((resolve2, reject) => {
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", resolve2);
+  });
+  async function sweep(now = Date.now()) {
+    if (activity.expired(now)) {
+      await close();
+      return;
+    }
+    for (const workspace of workspaces.values()) {
+      if (activity.inactive(workspace.id, now) && !workspace.pending) {
+        workspace.model = void 0;
+        workspace.layout = void 0;
+        workspace.focus = void 0;
+        workspace.graphKey = void 0;
+      }
+    }
+  }
+  timer = setInterval(() => void sweep(), 1e4);
+  timer.unref();
+  return { server, close, sweep, activity, port: server.address().port };
+}
+async function runServiceMain() {
+  if (!process.env.RSP_VIEWER_BOOT)
+    return;
+  const boot = JSON.parse(process.env.RSP_VIEWER_BOOT);
+  delete process.env.RSP_VIEWER_BOOT;
+  const runtime = await viewerRuntime();
+  if (runtime.identity !== boot.identity || runtime.root !== boot.root)
+    throw new Error("Viewer build changed during startup; retry");
+  const service = await createViewerService(boot);
+  await writeFile(boot.recordPath, JSON.stringify({ protocol: VIEWER_PROTOCOL, identity: boot.identity, port: service.port, pid: process.pid, adminToken: boot.adminToken, readToken: boot.readToken }), { mode: 384 });
+  for (const signal of ["SIGINT", "SIGTERM"]) process.once(signal, () => void service.close());
+}
+void runServiceMain().catch(() => {
+  process.exitCode = 1;
+});
+export {
+  IDLE_MS,
+  ReadingActivity,
+  WORKSPACE_GRACE_MS,
+  createViewerService
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oevery/rsp",
   "type": "module",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "RSP (Reliable Software Practice), a repository-native engineering workflow for humans and AI agents",
   "author": "oevery",
   "license": "MIT",
@@ -40,10 +40,11 @@
     "skills:package-check": "node scripts/skill-package-check.mjs",
     "prepublishOnly": "pnpm run release:check",
     "release": "release-it",
-    "build": "tsup",
+    "build": "tsup && node scripts/build-viewer.mjs",
     "dev": "tsup --watch",
     "docs:build": "vitepress build docs",
     "docs:check": "node scripts/docs-check.mjs",
+    "doctor": "node dist/cli.mjs doctor",
     "docs:deploy": "wrangler deploy",
     "docs:dev": "vitepress dev docs",
     "docs:preview": "vitepress preview docs",
@@ -55,9 +56,12 @@
     "test:diagnostics": "vitest run --config tests/diagnostics/vitest.config.ts",
     "test:pack": "node tests/code/package/package-check.mjs",
     "test:skills": "uv run --frozen --project tests/skills python tests/skills/evaluate.py",
-    "release:check": "pnpm run build && pnpm run typecheck && pnpm run lint && pnpm run test:code && pnpm run test:skills check && pnpm run skills:security-check && pnpm run docs:check"
+    "release:check": "pnpm run build && pnpm run doctor && pnpm run typecheck && pnpm run lint && pnpm run test:code && pnpm run test:skills check && pnpm run skills:security-check && pnpm run docs:check",
+    "test:viewer:browser": "node tests/code/architecture/browser-check.mjs"
   },
   "dependencies": {
+    "@likec4/core": "1.60.0",
+    "@likec4/layouts": "1.60.0",
     "citty": "^0.2.2",
     "hast-util-from-html": "^2.0.3",
     "ink": "~8.0.0",
@@ -72,15 +76,29 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.5.1",
+    "@likec4/diagram": "1.60.0",
+    "@radix-ui/react-dialog": "1.3.1",
+    "@radix-ui/react-select": "2.4.1",
+    "@radix-ui/react-slot": "1.5.0",
+    "@radix-ui/react-tooltip": "1.4.1",
     "@release-it/conventional-changelog": "12.0.2",
+    "@tailwindcss/cli": "4.3.3",
     "@types/hast": "^3.0.5",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.20.1",
     "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "esbuild": "^0.28.2",
     "eslint": "^10.13.0",
     "ink-testing-library": "^4.0.0",
+    "playwright-core": "1.64.1",
+    "react-dom": "~19.3.1",
     "release-it": "21.1.1",
     "smol-toml": "^1.9.1",
+    "tailwind-merge": "3.7.0",
+    "tailwindcss": "4.3.3",
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitepress": "^1.6.4",