npm - @monster-orange/den - Versions diffs - 0.2.8 → 0.4.0 - Mend

@monster-orange/den 0.2.8 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

package/CHANGELOG.md +1731 -0
package/README.md +4 -2
package/bin/den +2 -1
package/docs/distributions.md +730 -6
package/make/den.mk +19 -4
package/make/journeys.mk +2 -1
package/make/local_dev.mk +6 -13
package/make/secrets-1password.mk +18 -0
package/make/test.mk +1 -1
package/package.json +12 -2
package/schemas/den.plugin.v1.json +156 -0
package/schemas/den.theme.v1.json +269 -0
package/scripts/auth-configure.ts +16 -8
package/scripts/heal-config.ts +0 -5
package/scripts/setup-1password.ts +41 -19
package/scripts/setup-secrets.ts +67 -101
package/src/pillars/api/global-setup.ts +1 -1
package/src/pillars/journeys/sandbox.ts +23 -18
package/src/pillars/journeys/tools/browser-session.ts +2 -2
package/src/scripts/setup-default-workspace.ts +2 -2
package/src/shared/agents/default-pack/be-dev.md +20 -0
package/src/shared/agents/default-pack/devops.md +14 -0
package/src/shared/agents/default-pack/fe-dev.md +20 -0
package/src/shared/agents/default-pack/orchestrator.md +16 -0
package/src/shared/agents/default-pack/planner.md +17 -0
package/src/shared/agents/default-pack/reviewer.md +14 -0
package/src/shared/agents/default-pack/ux-designer.md +15 -0
package/src/shared/agents/den-claude.ts +173 -0
package/src/shared/agents/generic.ts +52 -0
package/src/shared/agents/personas.ts +218 -0
package/src/shared/agents/records.ts +118 -0
package/src/shared/agents/runtime.ts +192 -0
package/src/shared/agents/runtimes.ts +47 -0
package/src/shared/auth/headless-login.ts +1 -1
package/src/shared/auth/sudo-vault.ts +93 -31
package/src/shared/auth/token-providers/index.ts +7 -3
package/src/shared/brand.ts +7 -0
package/src/shared/config-error.ts +33 -3
package/src/shared/constants.ts +3 -24
package/src/shared/den-config.ts +257 -5
package/src/shared/edge/config.ts +147 -21
package/src/shared/edge/exec.ts +31 -0
package/src/shared/edge/included.ts +169 -0
package/src/shared/edge/render.ts +69 -14
package/src/shared/edge/runtime.ts +128 -121
package/src/shared/edge/status.ts +68 -8
package/src/shared/edge/tls.ts +328 -0
package/src/shared/edge/types.ts +25 -9
package/src/shared/engine.ts +23 -0
package/src/shared/environment-manager/default-workspace.ts +16 -1
package/src/shared/environment-manager/health.ts +73 -38
package/src/shared/environment-manager/scope.ts +168 -0
package/src/shared/environment-manager/service-runner.ts +789 -43
package/src/shared/environment-manager/up-targets.ts +132 -0
package/src/shared/environment-manager/workspaces.ts +19 -0
package/src/shared/health/rollup.ts +48 -0
package/src/shared/open-url.ts +21 -2
package/src/shared/org-sources.ts +78 -59
package/src/shared/org.ts +53 -5
package/src/shared/plugins/manifest.ts +406 -0
package/src/shared/plugins/store.ts +358 -0
package/src/shared/process/legacy-adopt.ts +285 -0
package/src/shared/process/process-group.ts +202 -0
package/src/shared/process/spawn-streaming.ts +7 -0
package/src/shared/secret-env.ts +70 -0
package/src/shared/secrets/doppler.ts +1 -1
package/src/shared/secrets/index.ts +279 -50
package/src/shared/secrets/none.ts +56 -0
package/src/shared/secrets/strategies.ts +202 -0
package/src/shared/secrets/types.ts +1 -1
package/src/shared/sessions/client.ts +277 -0
package/src/shared/sessions/den-pty.ts +97 -0
package/src/shared/sessions/env.ts +79 -0
package/src/shared/sessions/host.ts +667 -0
package/src/shared/sessions/names.ts +85 -0
package/src/shared/sessions/paths.ts +27 -0
package/src/shared/sessions/protocol.ts +72 -0
package/src/shared/sessions/pty.ts +141 -0
package/src/shared/sessions/ring-buffer.ts +160 -0
package/src/shared/sessions/types.ts +81 -0
package/src/shared/smoke/git-remote.ts +40 -0
package/src/shared/stacks/manifest-commands.ts +1 -1
package/src/shared/stacks/namespace.ts +178 -0
package/src/shared/stacks/owners.ts +303 -0
package/src/shared/stacks/render.ts +8 -3
package/src/shared/stacks/runtime.ts +100 -16
package/src/shared/stacks/status.ts +63 -12
package/src/shared/strategies/registry.ts +89 -0
package/src/shared/theme/contract.ts +538 -0
package/src/shared/types/index.ts +12 -3
package/src/ui/cli/agents-command.ts +812 -0
package/src/ui/cli/create.ts +24 -7
package/src/ui/cli/doctor-command.ts +260 -0
package/src/ui/cli/edge-command.ts +56 -10
package/src/ui/cli/env-probe.ts +266 -0
package/src/ui/cli/flag-parser.ts +18 -5
package/src/ui/cli/health-display.ts +25 -0
package/src/ui/cli/index.ts +580 -60
package/src/ui/cli/notice.ts +20 -0
package/src/ui/cli/plugin-command.ts +849 -0
package/src/ui/cli/sessions-command.ts +718 -0
package/src/ui/cli/stack-command.ts +63 -2
package/src/ui/cli/test-runner.ts +11 -9
package/src/ui/cli/theme-command.ts +136 -0
package/src/ui/cli/web-command.ts +47 -23
package/src/ui/mcp/api.ts +28 -2
package/src/ui/mcp/scope.ts +145 -20
package/src/ui/mcp/server.ts +27 -2
package/src/ui/mcp/tools.ts +94 -12
package/src/ui/server/appearance-prefs.ts +95 -0
package/src/ui/server/audit.ts +35 -0
package/src/ui/server/daemon-reaper.ts +29 -1
package/src/ui/server/engine-stamp.ts +83 -0
package/src/ui/server/github-service.ts +23 -44
package/src/ui/server/graph-page.ts +20 -0
package/src/ui/server/graph-prefs.ts +44 -1
package/src/ui/server/http-errors.ts +293 -0
package/src/ui/server/http-helpers.ts +22 -3
package/src/ui/server/index.ts +539 -51
package/src/ui/server/public/appearance.js +531 -0
package/src/ui/server/public/edge-page.js +248 -0
package/src/ui/server/public/edge.html +251 -0
package/src/ui/server/public/environments.html +65 -83
package/src/ui/server/public/error-page.js +247 -0
package/src/ui/server/public/error.html +260 -0
package/src/ui/server/public/graph-model.js +332 -14
package/src/ui/server/public/graph.css +141 -47
package/src/ui/server/public/graph.js +223 -44
package/src/ui/server/public/header.js +396 -600
package/src/ui/server/public/health-fit.js +248 -0
package/src/ui/server/public/health-rollup.js +128 -0
package/src/ui/server/public/i18n/es.js +287 -0
package/src/ui/server/public/i18n/ja.js +276 -0
package/src/ui/server/public/index.html +139 -438
package/src/ui/server/public/local-dev.html +3468 -4044
package/src/ui/server/public/logs.html +71 -208
package/src/ui/server/public/panel.js +14 -2
package/src/ui/server/public/release.html +175 -389
package/src/ui/server/public/services.html +596 -770
package/src/ui/server/public/settings-page.js +759 -0
package/src/ui/server/public/settings-registry.js +521 -0
package/src/ui/server/public/settings.html +590 -0
package/src/ui/server/public/shell.js +3869 -0
package/src/ui/server/public/topbar.js +1413 -0
package/src/ui/server/public/version-label.js +12 -0
package/src/ui/server/public/workspace-picker.js +74 -34
package/src/ui/server/readonly-routes.ts +37 -3
package/src/ui/server/services-list.ts +94 -17
package/src/ui/server/settings-distribution.ts +74 -0
package/src/ui/server/shell-prefs.ts +192 -0
package/src/ui/server/theme-routes.ts +292 -0
package/src/ui/server/theme-runtime.ts +407 -0
package/src/ui/server/ui-assets.ts +16 -1
package/src/ui/server/ui-language.ts +50 -0
package/src/ui/server/workspace-routes.ts +48 -18
package/themes/den/den-theme.json +72 -0
package/themes/den/favicon.ico +0 -0
package/themes/den/mark.svg +6 -0

package/src/ui/server/public/services.html CHANGED Viewed

@@ -3,6 +3,29 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      // Mode before first paint: yours (the server fills it in below),
+      // else the system's, else the theme's default, else dark.
+      (function () {
+        var m = "@@DEN_MODE@@";
+        if (m !== "dark" && m !== "light") {
+          var q = function (s) {
+            return (
+              window.matchMedia &&
+              matchMedia("(prefers-color-scheme: " + s + ")").matches
+            );
+          };
+          m = q("light")
+            ? "light"
+            : q("dark")
+              ? "dark"
+              : "@@DEN_DEFAULT_MODE@@";
+        }
+        document.documentElement.dataset.mode =
+          m === "light" ? "light" : "dark";
+      })();
+    </script>
+    <link rel="stylesheet" href="/theme.css" id="theme-css" />
     <title>__DEN_TITLE__ · Services</title>
     <style>
       *,
@@ -13,25 +36,12 @@
         padding: 0;
       }
-      :root {
-        --bg: #0d1117;
-        --surface: #161b22;
-        --border: #30363d;
-        --text: #c9d1d9;
-        --muted: #8b949e;
-        --accent: #58a6ff;
-        --green: #3fb950;
-        --red: #f85149;
-        --yellow: #d29922;
-        --mono: "SF Mono", "Cascadia Code", "Fira Code", "Menlo", monospace;
-      }
       html,
       body {
         height: 100%;
         background: var(--bg);
         color: var(--text);
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font-family: var(--sans);
         font-size: 13px;
       }
@@ -42,78 +52,13 @@
       }
       /* ── Header ───────────────────────────────────────────────────────────── */
-      header {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 7px 14px;
-        background: var(--surface);
-        border-bottom: 1px solid var(--border);
-        flex-shrink: 0;
-      }
-      header h1 {
-        font-family: var(--mono);
-        font-size: 14px;
-        font-weight: 600;
-        letter-spacing: -0.02em;
-      }
       .h-spacer {
         flex: 1;
       }
       /* ── Health indicators ────────────────────────────────────────────────── */
-      .health {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 0 4px;
-      }
-      .health-item {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        font-size: 11px;
-        color: var(--muted);
-      }
-      .health-group {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 11px;
-        color: var(--muted);
-      }
-      .health-group-label {
-        color: var(--muted);
-        margin-right: 1px;
-      }
-      .health-group-dots {
-        display: flex;
-        align-items: center;
-        gap: 3px;
-      }
       /* ── Nav ──────────────────────────────────────────────────────────────── */
-      nav {
-        display: flex;
-        gap: 2px;
-      }
-      nav a {
-        color: var(--muted);
-        text-decoration: none;
-        padding: 3px 10px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: 500;
-        transition: color 0.1s;
-      }
-      nav a:hover {
-        color: var(--text);
-        background: var(--border);
-      }
-      nav a.active {
-        color: var(--text);
-        background: var(--surface);
-      }
       /* ── Shared: dot ──────────────────────────────────────────────────────── */
       .dot {
@@ -125,13 +70,13 @@
         display: inline-block;
       }
       .dot.ok {
-        background: var(--green);
+        background: var(--ok);
       }
       .dot.err {
-        background: var(--red);
+        background: var(--bad);
       }
       .dot.running {
-        background: var(--yellow);
+        background: var(--warn);
         animation: pulse 1s ease-in-out infinite;
       }
       @keyframes pulse {
@@ -144,16 +89,6 @@
         }
       }
-      /* ── Controls bar ─────────────────────────────────────────────────────── */
-      .controls {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 6px 14px;
-        background: var(--surface);
-        border-bottom: 1px solid var(--border);
-        flex-shrink: 0;
-      }
       select {
         background: var(--bg);
         border: 1px solid var(--border);
@@ -169,7 +104,7 @@
       }
       /* ── Main ─────────────────────────────────────────────────────────────── */
-      main {
+      .page-main {
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -178,9 +113,12 @@
       }
       /* ── Service cards ────────────────────────────────────────────────────── */
+      /* The cards take the page; output is the shell's runs dock (R16). */
       .services-pane {
         padding: 12px 14px;
-        flex-shrink: 0;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
         display: flex;
         flex-direction: column;
         gap: 14px;
@@ -231,7 +169,7 @@
       }
       .service-card.subservice {
         border-style: dashed;
-        border-color: #3d444d;
+        border-color: var(--border-strong);
         /* Left rule stays solid on both — a 3px dashed vertical rule renders as
          scattered dots. The dashed outer border carries the distinction. */
         border-left: 3px solid var(--muted);
@@ -245,6 +183,25 @@
         gap: 8px;
         margin-bottom: 10px;
       }
+      .service-card-title {
+        flex: 1;
+        min-width: 0;
+      }
+      .pin-btn {
+        background: none;
+        border: 1px solid transparent;
+        border-radius: var(--radius-button);
+        color: var(--faint);
+        cursor: pointer;
+        font-size: 14px;
+        padding: 0 4px;
+        line-height: 1.4;
+      }
+      .pin-btn:hover,
+      .pin-btn[aria-pressed="true"] {
+        color: var(--accent-text);
+        background: var(--sunken);
+      }
       .service-card-header .dot {
         width: 8px;
         height: 8px;
@@ -254,6 +211,9 @@
         font-weight: 600;
         color: var(--text);
       }
+      .service-repo .owners {
+        color: var(--accent-text);
+      }
       .service-repo {
         font-size: 11px;
         color: var(--muted);
@@ -267,8 +227,7 @@
         margin-top: 3px;
         font-size: 11px;
         font-family: var(--mono);
-        color: var(--accent);
-        text-decoration: none;
+        color: var(--accent-text);
         word-break: break-all;
       }
       .site-link:hover,
@@ -292,16 +251,16 @@
         color: var(--muted);
       }
       .badge.dev-managed {
-        border-color: #388bfd44;
-        color: #58a6ff;
+        border-color: color-mix(in srgb, var(--accent) 27%, transparent);
+        color: var(--accent-text);
       }
       .badge.managed {
-        border-color: #a371f744;
-        color: #a371f7;
+        border-color: var(--border-strong);
+        color: var(--text);
       }
       .badge.always-on {
-        border-color: #3fb95044;
-        color: #3fb950;
+        border-color: color-mix(in srgb, var(--ok) 27%, transparent);
+        color: var(--ok);
       }
       .badge.branch {
         border-color: var(--border);
@@ -327,7 +286,7 @@
       }
       .cmd-btn:hover:not(:disabled) {
         border-color: var(--accent);
-        color: var(--accent);
+        color: var(--accent-text);
       }
       .cmd-btn:disabled {
         opacity: 0.45;
@@ -337,8 +296,8 @@
         border-color: var(--muted);
       }
       .cmd-btn.logs-btn:hover:not(:disabled) {
-        border-color: var(--yellow);
-        color: var(--yellow);
+        border-color: var(--warn);
+        color: var(--warn);
       }
       .empty-state {
@@ -347,569 +306,407 @@
         font-size: 12px;
         text-align: center;
       }
-      /* ── Pane bar ─────────────────────────────────────────────────────────── */
-      .pane-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 3px 12px;
-        background: var(--surface);
-        border-bottom: 1px solid var(--border);
-        flex-shrink: 0;
-      }
-      .pane-bar span {
-        font-size: 10px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.07em;
-        color: var(--muted);
-      }
-      .pane-bar button {
-        background: none;
-        border: none;
-        color: var(--muted);
-        font-size: 11px;
-        cursor: pointer;
-        padding: 2px 6px;
-        border-radius: 3px;
-      }
-      .pane-bar button:hover {
-        color: var(--text);
-        background: var(--border);
-      }
-      /* ── Output pane ──────────────────────────────────────────────────────── */
-      .output-pane {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-      }
-      #output {
-        flex: 1;
-        overflow-y: auto;
-        padding: 10px 14px;
-        font-family: var(--mono);
-        font-size: 11.5px;
-        line-height: 1.65;
-        white-space: pre-wrap;
-        word-break: break-all;
-        min-height: 0;
-      }
-      #output .cmd {
-        color: var(--accent);
-      }
-      #output .err {
-        color: var(--red);
-      }
-      #output .done-ok {
-        color: var(--green);
-      }
-      #output .done-fail {
-        color: var(--red);
-      }
     </style>
   </head>
   <body>
-    <header>
-      <img
-        src="/favicon.ico"
-        width="16"
-        height="16"
-        alt=""
-        style="flex-shrink: 0"
-      />
-      <h1>__DEN_CLI__</h1>
-      <button
-        class="v-pill"
-        id="version-pill"
-        onclick="openChangelog()"
-        title="View changelog"
-      >
-        <span class="v-pip" id="v-pip"></span><span class="v-txt">v…</span>
-      </button>
-      <div class="health" id="health" title="Service health"></div>
-      <span
-        id="ws-pill"
-        style="
-          font-size: 11px;
-          font-family: var(--mono);
-          padding: 2px 8px;
-          border-radius: 10px;
-          border: 1px solid #388bfd44;
-          color: #58a6ff;
-          background: #58a6ff10;
-          display: none;
-        "
-      ></span>
-      <div class="h-spacer"></div>
-      <nav>
-        <a href="/">Local Dev</a>
-        <a href="/services" class="active">Services</a>
-        <a href="/environments">Environments</a>
-        <a href="/release">Releases</a>
-        <a href="/logs"
-          >Logs
-          <span
-            id="log-badge"
-            style="
-              background: var(--yellow);
-              color: #0d1117;
-              font-size: 10px;
-              font-weight: 700;
-              padding: 1px 5px;
-              border-radius: 8px;
-              line-height: 1.4;
-              display: none;
-            "
-          ></span
-        ></a>
-        <a href="/tests">Tests</a>
-      </nav>
-    </header>
-    <div class="controls">
-      <select id="env-sel" title="Environment">
-        <option value="local">local</option>
-      </select>
-      <span style="font-size: 11px; color: var(--muted)">workspace:</span>
-      <select
-        id="workspace-sel"
-        title="Active workspace"
-        style="font-family: var(--mono)"
-      >
-        <option value="default">default</option>
-      </select>
-      <span id="status-text" style="font-size: 11px; color: var(--muted)"
-        >idle</span
-      >
-    </div>
-    <main>
-      <div class="services-pane" id="services-pane">
-        <div class="empty-state">Loading services…</div>
-      </div>
-      <div class="pane-bar">
-        <span>Output</span>
-        <button onclick="clearOutput()">Clear</button>
+    <!-- The shell: top bar and rail, the same on every page (shell.js). -->
+    <div id="den-shell" data-page="services"></div>
+    <script src="/shell.js"></script>
+    <!-- The page's one main landmark: everything after the shell. -->
+    <main id="den-content">
+      <!-- One workspace control: the shell's View (what this page lists) and
+         Focus (where commands go), not a select of its own. -->
+      <div class="page-main">
+        <div class="services-pane" id="services-pane">
+          <div class="empty-state">Loading services…</div>
+        </div>
       </div>
-      <div class="output-pane">
-        <pre id="output"></pre>
-      </div>
-    </main>
-    <script type="module">
-      import {
-        initHealth,
-        refreshHealth,
-        initWorkspacePill,
-        applyDenConfig,
-        initLogBadge,
-        initChangelog,
-        computePrimaryByRepo,
-      } from "/header.js";
-      let es = null;
-      // Release any open SSE socket on reload / navigation / bfcache-enter so the
-      // reloaded page isn't starved of a connection by a lingering stream.
-      window.addEventListener("pagehide", () => {
-        try {
-          es?.close();
-        } catch {}
-        es = null;
-      });
+      <script type="module">
+        import {
+          initHealth,
+          refreshHealth,
+          initWorkspacePill,
+          applyDenConfig,
+          initLogBadge,
+          initChangelog,
+          computePrimaryByRepo,
+          envReady,
+        } from "/header.js";
+        import { ownersLabel } from "/workspace-picker.js";
+        let es = null;
+        // The run tab `es` feeds in the shell's runs dock (R16): one per
+        // service, its label the latest command ("restart shop/web").
+        let runId = null;
+        const runs = () => window.denShell.runs;
+        // Release any open SSE socket on reload / navigation / bfcache-enter so the
+        // reloaded page isn't starved of a connection by a lingering stream.
+        window.addEventListener("pagehide", () => {
+          try {
+            es?.close();
+          } catch {}
+          es = null;
+        });
-      // ── Init ──────────────────────────────────────────────────────────────────
-      async function init() {
-        const envs = await fetch("/api/environments")
-          .then((r) => r.json())
-          .catch(() => ["local"]);
-        const envSel = document.getElementById("env-sel");
-        envSel.innerHTML = envs
-          .map((e) => `<option value="${e}">${e}</option>`)
-          .join("");
-        // '__DEN_CLI__-env' matches index.html/logs.html.
-        const savedEnv = localStorage.getItem("__DEN_CLI__-env");
-        if (savedEnv && envs.includes(savedEnv)) envSel.value = savedEnv;
+        // ── Init ──────────────────────────────────────────────────────────────────
+        async function init() {
+          // The shell's env picker (header.js), one for every page.
+          await envReady();
+          await Promise.all([
+            loadServices(),
+            initHealth(),
+            initWorkspacePill(),
+            applyDenConfig(),
+            initChangelog(),
+          ]);
+          initLogBadge();
+        }
-        await Promise.all([
-          loadWorkspaces(),
-          loadServices(),
-          initHealth(),
-          initWorkspacePill("env-sel"),
-          applyDenConfig(),
-          initChangelog(),
-        ]);
-        initLogBadge();
-      }
+        document.getElementById("env-sel").addEventListener("change", () => {
+          const env = document.getElementById("env-sel").value;
+          loadServices();
+          // Restart the header health poll for the new env — without this the dots
+          // kept polling the page-load env forever (index.html/logs.html do this too).
+          refreshHealth(env);
+        });
-      document.getElementById("env-sel").addEventListener("change", () => {
-        const env = document.getElementById("env-sel").value;
-        localStorage.setItem("__DEN_CLI__-env", env);
-        loadServices();
-        // Restart the header health poll for the new env — without this the dots
-        // kept polling the page-load env forever (index.html/logs.html do this too).
-        refreshHealth(env);
-      });
+        // ── Workspace panel ───────────────────────────────────────────────────────
+        window.toggleWsPanel = function () {
+          const panel = document.getElementById("ws-panel");
+          const open = panel.classList.toggle("open");
+          if (open) refreshWsPanel();
+        };
-      document
-        .getElementById("workspace-sel")
-        .addEventListener("change", async () => {
-          const name = document.getElementById("workspace-sel").value;
-          await fetch("/api/workspaces", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ name }),
-          });
-          await loadServices();
-        });
+        async function refreshWsPanel() {
+          const data = await fetch("/api/workspaces")
+            .then((r) => r.json())
+            .catch(() => null);
+          if (!data) return;
-      // ── Load workspaces ───────────────────────────────────────────────────────
-      async function loadWorkspaces() {
-        try {
-          const data = await fetch("/api/workspaces").then((r) => r.json());
-          const sel = document.getElementById("workspace-sel");
-          const names = Object.keys(data.workspaces ?? {});
           const focus = Array.isArray(data.active)
             ? (data.focus ?? data.active[0])
             : data.active;
-          sel.innerHTML = names
-            .map(
-              (n) =>
-                `<option value="${n}" ${n === focus ? "selected" : ""}>${n}</option>`,
-            )
-            .join("");
-        } catch {
-          /* ignore — default workspace shown */
-        }
-      }
-      // ── Workspace panel ───────────────────────────────────────────────────────
-      window.toggleWsPanel = function () {
-        const panel = document.getElementById("ws-panel");
-        const open = panel.classList.toggle("open");
-        if (open) refreshWsPanel();
-      };
-      async function refreshWsPanel() {
-        const data = await fetch("/api/workspaces")
-          .then((r) => r.json())
-          .catch(() => null);
-        if (!data) return;
-        const focus = Array.isArray(data.active)
-          ? (data.focus ?? data.active[0])
-          : data.active;
-        // Update active label
-        document.getElementById("ws-active-label").textContent = Array.isArray(
-          data.active,
-        )
-          ? data.active.join(", ")
-          : (data.active ?? "");
-        // Current services list
-        const services = Object.entries(
-          data.workspaces?.[focus]?.services ?? {},
-        );
-        const listEl = document.getElementById("ws-service-list");
-        if (services.length === 0) {
-          listEl.innerHTML = '<span class="ws-msg">No services yet.</span>';
-        } else {
-          listEl.innerHTML = services
-            .map(([addr, entry]) => {
-              const meta =
-                entry.mode === "dev-managed"
-                  ? `<span style="color:var(--muted);font-size:11px">dev-managed · ${entry.path ?? ""}</span>`
-                  : `<span style="color:var(--muted);font-size:11px">managed · ${entry.branch ?? "main"}</span>`;
-              return `<div class="ws-service-row">
+          // Update active label
+          document.getElementById("ws-active-label").textContent =
+            Array.isArray(data.active)
+              ? data.active.join(", ")
+              : (data.active ?? "");
+          // Current services list
+          const services = Object.entries(
+            data.workspaces?.[focus]?.services ?? {},
+          );
+          const listEl = document.getElementById("ws-service-list");
+          if (services.length === 0) {
+            listEl.innerHTML = '<span class="ws-msg">No services yet.</span>';
+          } else {
+            listEl.innerHTML = services
+              .map(([addr, entry]) => {
+                const meta =
+                  entry.mode === "dev-managed"
+                    ? `<span style="color:var(--muted);font-size:11px">dev-managed · ${entry.path ?? ""}</span>`
+                    : `<span style="color:var(--muted);font-size:11px">managed · ${entry.branch ?? "main"}</span>`;
+                return `<div class="ws-service-row">
             <span>${addr}</span>${meta}
             <button title="Remove" onclick="removeService('${addr}')">×</button>
           </div>`;
-            })
-            .join("");
-        }
-        // Available repos dropdown
-        const repos = await fetch("/api/workspaces/available-repos")
-          .then((r) => r.json())
-          .catch(() => []);
-        const repoSel = document.getElementById("ws-repo-sel");
-        repoSel.innerHTML =
-          '<option value="">Select repo…</option>' +
-          repos
-            .map((r) => {
-              const label = r.hasManifest ? `${r.name} ✓` : r.name;
-              const disabled = r.alreadyAdded ? " disabled" : "";
-              const suffix = r.alreadyAdded ? " (added)" : "";
-              return `<option value="${r.name}" data-path="${r.absPath}"${disabled}>${label}${suffix}</option>`;
-            })
-            .join("");
-      }
+              })
+              .join("");
+          }
-      window.createWorkspace = async function () {
-        const name = document.getElementById("ws-name-input").value.trim();
-        const msg = document.getElementById("ws-create-msg");
-        if (!name) {
-          msg.textContent = "Name required";
-          msg.className = "ws-msg err";
-          return;
+          // Available repos dropdown
+          const repos = await fetch("/api/workspaces/available-repos")
+            .then((r) => r.json())
+            .catch(() => []);
+          const repoSel = document.getElementById("ws-repo-sel");
+          repoSel.innerHTML =
+            '<option value="">Select repo…</option>' +
+            repos
+              .map((r) => {
+                const label = r.hasManifest ? `${r.name} ✓` : r.name;
+                const disabled = r.alreadyAdded ? " disabled" : "";
+                const suffix = r.alreadyAdded ? " (added)" : "";
+                return `<option value="${r.name}" data-path="${r.absPath}"${disabled}>${label}${suffix}</option>`;
+              })
+              .join("");
         }
-        const res = await fetch("/api/workspaces/create", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ name }),
-        });
-        if (res.ok) {
+        window.createWorkspace = async function () {
+          const name = document.getElementById("ws-name-input").value.trim();
+          const msg = document.getElementById("ws-create-msg");
+          if (!name) {
+            msg.textContent = "Name required";
+            msg.className = "ws-msg err";
+            return;
+          }
+          try {
+            await window.denShell.api("POST", "/api/workspaces/create", {
+              name,
+            });
+          } catch (err) {
+            // R26c: the server's message (its JSON error), inline.
+            msg.textContent = err.message;
+            msg.className = "ws-msg err";
+            return;
+          }
           msg.textContent = `✓ Created "${name}"`;
           msg.className = "ws-msg ok";
           document.getElementById("ws-name-input").value = "";
-          await loadWorkspaces();
           await refreshWsPanel();
-        } else {
-          msg.textContent = await res.text();
-          msg.className = "ws-msg err";
-        }
-      };
+        };
-      window.deleteWorkspace = async function () {
-        const name = document.getElementById("workspace-sel").value;
-        const msg = document.getElementById("ws-delete-msg");
-        if (name === "default") {
-          msg.textContent = "Cannot delete default";
-          msg.className = "ws-msg err";
-          return;
-        }
-        if (!confirm(`Delete workspace "${name}"?`)) return;
-        const res = await fetch("/api/workspaces", {
-          method: "DELETE",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ name }),
-        });
-        if (res.ok) {
+        window.deleteWorkspace = async function () {
+          const data = await fetch("/api/workspaces")
+            .then((r) => r.json())
+            .catch(() => ({}));
+          const name = data.focus ?? data.active?.[0] ?? "default";
+          const msg = document.getElementById("ws-delete-msg");
+          if (name === "default") {
+            msg.textContent = "Cannot delete default";
+            msg.className = "ws-msg err";
+            return;
+          }
+          if (!confirm(`Delete workspace "${name}"?`)) return;
+          try {
+            await window.denShell.api("DELETE", "/api/workspaces", { name });
+          } catch (err) {
+            // R26c: the server's message (its JSON error), inline.
+            msg.textContent = err.message;
+            msg.className = "ws-msg err";
+            return;
+          }
           msg.textContent = `✓ Deleted "${name}"`;
           msg.className = "ws-msg ok";
-          await loadWorkspaces();
           await Promise.all([loadServices(), refreshWsPanel()]);
-        } else {
-          msg.textContent = await res.text();
-          msg.className = "ws-msg err";
-        }
-      };
+        };
-      window.addService = async function () {
-        const repoSel = document.getElementById("ws-repo-sel");
-        const mode = document.getElementById("ws-mode-sel").value;
-        const msg = document.getElementById("ws-add-msg");
-        const repoName = repoSel.value;
-        if (!repoName) {
-          msg.textContent = "Select a repo";
-          msg.className = "ws-msg err";
-          return;
-        }
-        const opt = repoSel.options[repoSel.selectedIndex];
-        const linkedPath = opt.dataset.path;
-        const res = await fetch("/api/workspaces/services", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ address: repoName, mode, linkedPath }),
-        });
-        if (res.ok) {
+        window.addService = async function () {
+          const repoSel = document.getElementById("ws-repo-sel");
+          const mode = document.getElementById("ws-mode-sel").value;
+          const msg = document.getElementById("ws-add-msg");
+          const repoName = repoSel.value;
+          if (!repoName) {
+            msg.textContent = "Select a repo";
+            msg.className = "ws-msg err";
+            return;
+          }
+          const opt = repoSel.options[repoSel.selectedIndex];
+          const linkedPath = opt.dataset.path;
+          try {
+            await window.denShell.api("POST", "/api/workspaces/services", {
+              address: repoName,
+              mode,
+              linkedPath,
+            });
+          } catch (err) {
+            // R26c: the server's message (its JSON error), inline.
+            msg.textContent = err.message;
+            msg.className = "ws-msg err";
+            return;
+          }
           msg.textContent = `✓ Added ${repoName}`;
           msg.className = "ws-msg ok";
           await Promise.all([loadServices(), refreshWsPanel()]);
-        } else {
-          msg.textContent = await res.text();
-          msg.className = "ws-msg err";
-        }
-      };
+        };
-      window.removeService = async function (address) {
-        const msg = document.getElementById("ws-add-msg");
-        const res = await fetch("/api/workspaces/services", {
-          method: "DELETE",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ address }),
-        });
-        if (res.ok) {
+        window.removeService = async function (address) {
+          const msg = document.getElementById("ws-add-msg");
+          try {
+            await window.denShell.api("DELETE", "/api/workspaces/services", {
+              address,
+            });
+          } catch (err) {
+            // R26c: the server's message (its JSON error), inline.
+            msg.textContent = err.message;
+            msg.className = "ws-msg err";
+            return;
+          }
           await Promise.all([loadServices(), refreshWsPanel()]);
-        } else {
-          msg.textContent = await res.text();
-          msg.className = "ws-msg err";
-        }
-      };
-      // ── Load services ─────────────────────────────────────────────────────────
-      async function loadServices() {
-        const env = document.getElementById("env-sel").value;
-        const pane = document.getElementById("services-pane");
-        pane.innerHTML = '<div class="empty-state">Loading…</div>';
-        let services;
-        let apps = [];
-        try {
-          const [svcRes, appRes] = await Promise.all([
-            fetch(`/api/services?env=${env}`),
-            fetch("/api/applications").catch(() => null),
-          ]);
-          services = await svcRes.json();
-          if (appRes?.ok) apps = (await appRes.json()).applications ?? [];
-        } catch {
-          pane.innerHTML =
-            '<div class="empty-state">Failed to load services</div>';
-          return;
-        }
+        };
-        if (!services.length) {
-          pane.innerHTML = `<div class="empty-state">No services registered.<br><code>__DEN_CLI__ register &lt;path&gt;</code> to add a repo.</div>`;
-          return;
-        }
+        // ── Load services ─────────────────────────────────────────────────────────
+        async function loadServices() {
+          const env = document.getElementById("env-sel").value;
+          const pane = document.getElementById("services-pane");
+          pane.innerHTML = '<div class="empty-state">Loading…</div>';
+          let services;
+          let apps = [];
+          try {
+            const [svcRes, appRes] = await Promise.all([
+              fetch(`/api/services?env=${env}`),
+              fetch("/api/applications").catch(() => null),
+            ]);
+            services = await svcRes.json();
+            if (appRes?.ok) apps = (await appRes.json()).applications ?? [];
+          } catch {
+            pane.innerHTML =
+              '<div class="empty-state">Failed to load services</div>';
+            return;
+          }
-        // A "system" is a repo's primary service (entrypoint > root-named >
-        // first seen) — the same rollup the health dots, log tabs and logs
-        // toolbar use, so "one thing per system" means the same thing here.
-        // Everything else is a sub-service.
-        const primaryByRepo = computePrimaryByRepo(services);
+          if (!services.length) {
+            pane.innerHTML = `<div class="empty-state">No services registered.<br><code>__DEN_CLI__ register &lt;path&gt;</code> to add a repo.</div>`;
+            return;
+          }
-        // The shared-infra repo's own sub-services (`graph.infra.repo`; the
-        // server marks them `infra`) are the shared infra that repo IS. They
-        // carry no usable actions of their own — their only command was a
-        // lifecycle one, already dropped for sub-services — so the cards were
-        // pure noise beside the system card that already represents them.
-        // Sub-services of OTHER repos are kept: several own real work
-        // (shop/db's migrate, notes-api/db's lint) that exists nowhere else.
-        const visible = services.filter(
-          (s) =>
-            !s.infra ||
-            primaryByRepo.get(s.repo) ===
-              (s.address ?? `${s.repo}/${s.service}`),
-        );
+          // A "system" is a repo's primary service (entrypoint > root-named >
+          // first seen) — the same rollup the health dots, log tabs and logs
+          // toolbar use, so "one thing per system" means the same thing here.
+          // Everything else is a sub-service.
+          const primaryByRepo = computePrimaryByRepo(services);
+          // The shared-infra repo's own sub-services (`graph.infra.repo`; the
+          // server marks them `infra`) are the shared infra that repo IS. They
+          // carry no usable actions of their own — their only command was a
+          // lifecycle one, already dropped for sub-services — so the cards were
+          // pure noise beside the system card that already represents them.
+          // Sub-services of OTHER repos are kept: several own real work
+          // (shop/db's migrate, notes-api/db's lint) that exists nowhere else.
+          const visible = services.filter(
+            (s) =>
+              !s.infra ||
+              primaryByRepo.get(s.repo) ===
+                (s.address ?? `${s.repo}/${s.service}`),
+          );
-        // Top-down dependency order — entry repo (shop-web) first, infra-stack
-        // last — matching the health row, the dep graph and `__DEN_CLI__ status`.
-        // graphRank comes from the server, which owns deriveGraph. Sub-services
-        // sort under their own system rather than floating to the end.
-        visible.sort(
-          (a, b) =>
-            (a.graphRank ?? Number.MAX_SAFE_INTEGER) -
-              (b.graphRank ?? Number.MAX_SAFE_INTEGER) ||
-            a.repo.localeCompare(b.repo) ||
-            (primaryByRepo.get(a.repo) ===
-            (a.address ?? `${a.repo}/${a.service}`)
-              ? -1
-              : 0) -
-              (primaryByRepo.get(b.repo) ===
-              (b.address ?? `${b.repo}/${b.service}`)
+          // Top-down dependency order — entry repo (shop-web) first, infra-stack
+          // last — matching the health row, the dep graph and `__DEN_CLI__ status`.
+          // graphRank comes from the server, which owns deriveGraph. Sub-services
+          // sort under their own system rather than floating to the end.
+          visible.sort(
+            (a, b) =>
+              (a.graphRank ?? Number.MAX_SAFE_INTEGER) -
+                (b.graphRank ?? Number.MAX_SAFE_INTEGER) ||
+              a.repo.localeCompare(b.repo) ||
+              (primaryByRepo.get(a.repo) ===
+              (a.address ?? `${a.repo}/${a.service}`)
                 ? -1
-                : 0) ||
-            a.service.localeCompare(b.service),
-        );
-        // Lifecycle commands on a sub-service are a lie: the resource is owned by
-        // its system or by shared infra-stack infra (files-api/db, for one,
-        // is a handle onto shared localstack — `up` there does nothing useful).
-        // Domain commands are NOT hidden: shop/db's migrate/seed/rollback and
-        // notes-api/db's migrate/lint are real work you can only do here.
-        const LIFECYCLE_CMDS = new Set(["up", "down", "restart"]);
+                : 0) -
+                (primaryByRepo.get(b.repo) ===
+                (b.address ?? `${b.repo}/${b.service}`)
+                  ? -1
+                  : 0) ||
+              a.service.localeCompare(b.service),
+          );
-        const cardHtml = (s) => {
-          const addr = s.address ?? `${s.repo}/${s.service}`;
-          const isSub = primaryByRepo.get(s.repo) !== addr;
-          const usableCmds = isSub
-            ? s.commands.filter((cmd) => !LIFECYCLE_CMDS.has(cmd))
-            : s.commands;
-          const cmdButtons = usableCmds
-            .map(
-              (cmd) =>
-                `<button class="cmd-btn" data-repo="${s.repo}" data-service="${s.service}" data-cmd="${cmd}" data-type="exec">${cmd}</button>`,
-            )
-            .join("");
-          const logsButton = s.logs
-            ? `<button class="cmd-btn logs-btn" data-repo="${s.repo}" data-service="${s.service}" data-type="logs">logs</button>`
-            : "";
-          const hasCaps = usableCmds.length > 0 || s.logs;
-          const emptyNote =
-            s.cloned === false
-              ? "not cloned yet — run Sync in Local Dev"
-              : isSub
-                ? "managed by its system"
-                : "no commands for this env";
-          const modeBadge = s.mode
-            ? `<span class="badge ${s.mode}">${s.mode}</span>`
-            : "";
-          const unclonedBadge =
-            s.cloned === false
-              ? `<span class="badge" style="border-color:var(--yellow);color:var(--yellow)" title="Not cloned yet">⬇ not cloned</span>`
+          // Lifecycle commands on a sub-service are a lie: the resource is owned by
+          // its system or by shared infra-stack infra (files-api/db, for one,
+          // is a handle onto shared localstack — `up` there does nothing useful).
+          // Domain commands are NOT hidden: shop/db's migrate/seed/rollback and
+          // notes-api/db's migrate/lint are real work you can only do here.
+          const LIFECYCLE_CMDS = new Set(["up", "down", "restart"]);
+          // Pin a system (or a sub-service) to the rail (R14).
+          const pinBtn = (id) => {
+            const on = window.denShell?.isPinned(id);
+            if (!window.denShell) return "";
+            return `<button class="pin-btn" data-pin-toggle="${esc(id)}" aria-pressed="${on ? "true" : "false"}" title="${on ? "Unpin" : "Pin"} ${esc(id)}" aria-label="${on ? "Unpin" : "Pin"} ${esc(id)}">${on ? "★" : "☆"}</button>`;
+          };
+          const cardHtml = (s) => {
+            const addr = s.address ?? `${s.repo}/${s.service}`;
+            const isSub = primaryByRepo.get(s.repo) !== addr;
+            const usableCmds = isSub
+              ? s.commands.filter((cmd) => !LIFECYCLE_CMDS.has(cmd))
+              : s.commands;
+            const cmdButtons = usableCmds
+              .map(
+                (cmd) =>
+                  `<button class="cmd-btn" data-repo="${s.repo}" data-service="${s.service}" data-cmd="${cmd}" data-type="exec">${cmd}</button>`,
+              )
+              .join("");
+            const logsButton = s.logs
+              ? `<button class="cmd-btn logs-btn" data-repo="${s.repo}" data-service="${s.service}" data-type="logs">logs</button>`
               : "";
-          const branchBadge = s.branch
-            ? `<span class="badge branch">${s.branch}</span>`
-            : "";
-          // Which manifest layers built this card: repo or held, + override.
-          const layersBadge =
-            Array.isArray(s.manifestLayers) && s.manifestLayers.length > 0
-              ? `<span class="badge layers" title="Manifest layers applied">manifest: ${s.manifestLayers.join(" + ")}</span>`
+            const hasCaps = usableCmds.length > 0 || s.logs;
+            const emptyNote =
+              s.cloned === false
+                ? "not cloned yet — run Sync in Workspaces"
+                : isSub
+                  ? "managed by its system"
+                  : "no commands for this env";
+            const modeBadge = s.mode
+              ? `<span class="badge ${s.mode}">${s.mode}</span>`
               : "";
-          return `
-          <div class="service-card${isSub ? " subservice" : ""}">
+            const unclonedBadge =
+              s.cloned === false
+                ? `<span class="badge" style="border-color:var(--warn);color:var(--warn)" title="Not cloned yet">⬇ not cloned</span>`
+                : "";
+            const branchBadge = s.branch
+              ? `<span class="badge branch">${s.branch}</span>`
+              : "";
+            // Which manifest layers built this card: repo or held, + override.
+            const layersBadge =
+              Array.isArray(s.manifestLayers) && s.manifestLayers.length > 0
+                ? `<span class="badge layers" title="Manifest layers applied">manifest: ${s.manifestLayers.join(" + ")}</span>`
+                : "";
+            return `
+          <div class="service-card${isSub ? " subservice" : ""}"${isSub ? "" : ` id="repo-${esc(s.repo)}"`}>
             <div class="service-card-header">
               <span class="dot" id="dot-${s.repo}-${s.service}"></span>
-              <div>
+              <div class="service-card-title">
                 <div class="service-name">${addr}</div>
-                <div class="service-repo">${s.repo}</div>
+                <div class="service-repo">${s.repo}${
+                  ownersLabel(s.inWorkspaces)
+                    ? `<span class="owners" title="Shared: listed once for every workspace in view that defines it">${esc(ownersLabel(s.inWorkspaces))}</span>`
+                    : ""
+                }</div>
                 <a class="site-link" id="site-${s.repo}-${s.service}" target="_blank" rel="noopener" hidden></a>
               </div>
+              ${pinBtn(isSub ? addr : s.repo)}
             </div>
             <div class="service-meta">${modeBadge}${branchBadge}${layersBadge}${unclonedBadge}</div>
             <div class="cmd-row">
               ${hasCaps ? cmdButtons + logsButton : `<span style="color:var(--muted);font-size:11px">${emptyNote}</span>`}
             </div>
           </div>`;
-        };
-        // Section the cards by application, keeping the order above within
-        // each. Repos that are their own application share one section; any
-        // card no application claims goes last.
-        const esc = (t) =>
-          String(t ?? "").replace(
-            /[&<>"]/g,
-            (c) =>
-              ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
+          };
+          // Section the cards by application, keeping the order above within
+          // each. Repos that are their own application share one section; any
+          // card no application claims goes last.
+          const esc = (t) =>
+            String(t ?? "").replace(
+              /[&<>"]/g,
+              (c) =>
+                ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
+            );
+          const appOf = new Map();
+          for (const a of apps) for (const r of a.repos) appOf.set(r, a);
+          const sections = [];
+          for (const a of apps.filter((x) => x.source === "declared")) {
+            const cards = visible.filter((s) => appOf.get(s.repo) === a);
+            if (cards.length) sections.push({ app: a, cards });
+          }
+          const standalone = visible.filter(
+            (s) => appOf.get(s.repo)?.source === "repo",
           );
-        const appOf = new Map();
-        for (const a of apps) for (const r of a.repos) appOf.set(r, a);
-        const sections = [];
-        for (const a of apps.filter((x) => x.source === "declared")) {
-          const cards = visible.filter((s) => appOf.get(s.repo) === a);
-          if (cards.length) sections.push({ app: a, cards });
-        }
-        const standalone = visible.filter(
-          (s) => appOf.get(s.repo)?.source === "repo",
-        );
-        if (standalone.length)
-          sections.push({
-            app: {
-              title: "Single-repo applications",
-              description: "Each repo is its own application.",
-            },
-            cards: standalone,
-          });
-        const rest = visible.filter((s) => !appOf.has(s.repo));
-        if (rest.length)
-          sections.push({
-            app: apps.length
-              ? {
-                  title: "Not in an application",
-                  description: "Registered, but not in this workspace.",
-                }
-              : null,
-            cards: rest,
-          });
-        pane.innerHTML = sections
-          .map(
-            ({ app, cards }) => `
+          if (standalone.length)
+            sections.push({
+              app: {
+                title: "Single-repo applications",
+                description: "Each repo is its own application.",
+              },
+              cards: standalone,
+            });
+          const rest = visible.filter((s) => !appOf.has(s.repo));
+          if (rest.length)
+            sections.push({
+              app: apps.length
+                ? {
+                    title: "Not in an application",
+                    description: "In view, but in no application.",
+                  }
+                : null,
+              cards: rest,
+            });
+          pane.innerHTML = sections
+            .map(
+              ({ app, cards }) => `
         <section class="app-section"${app?.name ? ` data-app="${esc(app.name)}"` : ""}>
           ${
             app
@@ -922,182 +719,211 @@
           }
           <div class="app-cards">${cards.map(cardHtml).join("")}</div>
         </section>`,
-          )
-          .join("");
+            )
+            .join("");
-        // Attach click handlers
-        pane.querySelectorAll(".cmd-btn").forEach((btn) => {
-          btn.addEventListener("click", () => {
-            const { repo, service, cmd, type } = btn.dataset;
-            if (type === "exec") runExec(repo, service, cmd, btn);
-            else runLogs(repo, service, btn);
+          // Pin / unpin (a preference only). The star repaints from the
+          // shell's den:pins event, whoever changed the pin (this button,
+          // the rail's × or Delete, the graph's panel).
+          pane.querySelectorAll("[data-pin-toggle]").forEach((btn) => {
+            btn.addEventListener("click", () => {
+              const id = btn.dataset.pinToggle;
+              const sh = window.denShell;
+              if (!sh) return;
+              if (sh.isPinned(id)) sh.unpin(id);
+              else sh.pin(id);
+            });
+          });
+          // A pinned row in the rail links here (#repo-<name>).
+          if (location.hash.startsWith("#repo-"))
+            document
+              .getElementById(decodeURIComponent(location.hash.slice(1)))
+              ?.scrollIntoView({ block: "center" });
+          // Attach click handlers
+          pane.querySelectorAll(".cmd-btn").forEach((btn) => {
+            btn.addEventListener("click", () => {
+              const { repo, service, cmd, type } = btn.dataset;
+              if (type === "exec") runExec(repo, service, cmd, btn);
+              else runLogs(repo, service, btn);
+            });
           });
-        });
-        // Re-render destroys the dot elements, and the poll may have already
-        // fired before this ran — repaint from the last broadcast so the cards
-        // aren't blank until the next tick.
-        applyHealthToCards(_lastHealth);
-      }
-      // ── Run command ───────────────────────────────────────────────────────────
-      function runExec(repo, service, cmd, btn) {
-        if (es) {
-          es.close();
-          es = null;
+          // Re-render destroys the dot elements, and the poll may have already
+          // fired before this ran — repaint from the last broadcast so the cards
+          // aren't blank until the next tick.
+          applyHealthToCards(_lastHealth);
         }
-        const env = document.getElementById("env-sel").value;
-        disableAllButtons();
-        setDot(repo, service, "running");
-        setStatus(`running ${service}:${cmd}…`);
-        appendLine(`\n▶ ${repo}/${service} · ${cmd} · ${env}\n`, "cmd");
+        // ── Run command ───────────────────────────────────────────────────────────
+        /** The previous stream's tab stops pulsing: a new action replaced it. */
+        function endStream() {
+          if (es) {
+            es.close();
+            es = null;
+            if (runId) runs().set(runId, { running: false });
+          }
+        }
-        const params = new URLSearchParams({ repo, service, cmd, env });
-        es = new EventSource(`/api/service/exec?${params}`);
-        handleSSE(es, repo, service);
-      }
+        function runExec(repo, service, cmd, btn) {
+          endStream();
+          const env = document.getElementById("env-sel").value;
+          disableAllButtons();
+          setDot(repo, service, "running");
+          runId = runs().start(
+            `${repo}/${service}`,
+            `${cmd} ${repo}/${service}`,
+            {
+              doneLine: false,
+            },
+          );
+          appendLine(`\n▶ ${repo}/${service} · ${cmd} · ${env}\n`, "cmd");
-      function runLogs(repo, service, btn) {
-        if (es) {
-          es.close();
-          es = null;
+          const params = new URLSearchParams({ repo, service, cmd, env });
+          es = new EventSource(`/api/service/exec?${params}`);
+          handleSSE(es, repo, service);
         }
-        const env = document.getElementById("env-sel").value;
-        // A log tail is a continuous stream, not a command. It never emits
-        // `done`, so disabling the buttons here left every button on the page
-        // dead — cursor and all — until a manual reload. Tailing also says
-        // nothing about health, so the dot is left to the health poll rather
-        // than being forced to "running". Starting any other action closes this
-        // stream (both runners close `es` first).
-        setStatus(`streaming ${service} logs — start any command to stop`);
-        appendLine(`\n▶ ${repo}/${service} logs · ${env}\n`, "cmd");
+        function runLogs(repo, service, btn) {
+          endStream();
+          const env = document.getElementById("env-sel").value;
+          // A log tail is a continuous stream, not a command. It never emits
+          // `done`, so disabling the buttons here left every button on the page
+          // dead — cursor and all — until a manual reload. Tailing also says
+          // nothing about health, so the dot is left to the health poll rather
+          // than being forced to "running". Starting any other action closes this
+          // stream (both runners close `es` first).
+          // A tail is a stream, not a run: its tab doesn't pulse.
+          runId = runs().start(
+            `${repo}/${service}`,
+            `logs ${repo}/${service}`,
+            {
+              running: false,
+              doneLine: false,
+              // Clicking Logs is for its output: the dock opens (R16a).
+              open: true,
+            },
+          );
+          appendLine(`\n▶ ${repo}/${service} logs · ${env}\n`, "cmd");
-        const params = new URLSearchParams({ repo, service, env });
-        es = new EventSource(`/api/service/logs?${params}`);
-        handleSSE(es, repo, service, { stream: true });
-      }
+          const params = new URLSearchParams({ repo, service, env });
+          es = new EventSource(`/api/service/logs?${params}`);
+          handleSSE(es, repo, service, { stream: true });
+        }
-      function handleSSE(evtSrc, repo, service, opts = {}) {
-        // Streams (log tails) never disabled the buttons and never own the dot,
-        // so they must not re-enable or repaint either.
-        const isStream = opts.stream === true;
-        evtSrc.onmessage = (e) => {
-          const msg = JSON.parse(e.data);
-          if (msg.type === "cmd") {
-            appendLine(msg.text, "cmd");
-          } else if (msg.type === "line") {
-            appendLine(msg.text, "");
-          } else if (msg.type === "error") {
-            appendLine(msg.text, "err");
-          } else if (msg.type === "done") {
-            const ok = msg.exitCode === 0;
-            if (msg.duration > 0) {
-              appendLine(
-                `\n${ok ? "✓ Done" : "✗ Failed"} in ${fmtDuration(msg.duration)}\n`,
-                ok ? "done-ok" : "done-fail",
-              );
+        function handleSSE(evtSrc, repo, service, opts = {}) {
+          // Streams (log tails) never disabled the buttons and never own the dot,
+          // so they must not re-enable or repaint either.
+          const isStream = opts.stream === true;
+          const id = runId;
+          const appendLine = (text, cls) => runs().append(id, text, cls);
+          evtSrc.onmessage = (e) => {
+            const msg = JSON.parse(e.data);
+            if (msg.type === "cmd") {
+              appendLine(msg.text, "cmd");
+            } else if (msg.type === "line") {
+              appendLine(msg.text, "");
+            } else if (msg.type === "error") {
+              appendLine(msg.text, "err");
+            } else if (msg.type === "done") {
+              const ok = msg.exitCode === 0;
+              if (msg.duration > 0) {
+                appendLine(
+                  `\n${ok ? "✓ Done" : "✗ Failed"} in ${fmtDuration(msg.duration)}\n`,
+                  ok ? "done-ok" : "done-fail",
+                );
+              }
+              if (!isStream) {
+                setDot(repo, service, ok ? "ok" : "err");
+                enableAllButtons();
+                runs().finish(id, { ok });
+              } else runs().set(id, { running: false });
+              evtSrc.close();
+              es = null;
             }
+          };
+          evtSrc.onerror = () => {
+            appendLine("Connection closed", "err");
+            // A tail ending is not a health signal — leave the dot to the poll.
             if (!isStream) {
-              setDot(repo, service, ok ? "ok" : "err");
+              setDot(repo, service, "err");
               enableAllButtons();
-            }
-            setStatus("idle");
-            evtSrc.close();
+              runs().finish(id, { ok: false });
+            } else runs().set(id, { running: false });
+            evtSrc?.close();
             es = null;
-          }
-        };
-        evtSrc.onerror = () => {
-          appendLine("Connection closed", "err");
-          // A tail ending is not a health signal — leave the dot to the poll.
-          if (!isStream) {
-            setDot(repo, service, "err");
-            enableAllButtons();
-          }
-          setStatus("idle");
-          evtSrc?.close();
-          es = null;
-        };
-      }
+          };
+        }
-      // ── Output ────────────────────────────────────────────────────────────────
-      function appendLine(text, cls) {
-        const out = document.getElementById("output");
-        const span = document.createElement("span");
-        if (cls) span.className = cls;
-        span.textContent = text + "\n";
-        out.appendChild(span);
-        out.scrollTop = out.scrollHeight;
-      }
-      function clearOutput() {
-        document.getElementById("output").innerHTML = "";
-      }
+        // ── Output: the run's tab in the shell's runs dock ─────────────────────────
+        function appendLine(text, cls) {
+          if (runId) runs().append(runId, text, cls);
+        }
-      // ── Status / dots ─────────────────────────────────────────────────────────
-      function setStatus(text) {
-        document.getElementById("status-text").textContent = text;
-      }
-      function setDot(repo, service, state) {
-        const el = document.getElementById(`dot-${repo}-${service}`);
-        if (el) el.className = `dot ${state}`;
-      }
+        // ── Dots ──────────────────────────────────────────────────────────────────
+        function setDot(repo, service, state) {
+          const el = document.getElementById(`dot-${repo}-${service}`);
+          if (el) el.className = `dot ${state}`;
+        }
-      // ── Card health ───────────────────────────────────────────────────────────
-      // Card dots follow the header's existing poll instead of running their own:
-      // header.js broadcasts every poll and manual refresh as
-      // `__DEN_CLI__:health-update`, the same feed local-dev's graph subscribes to.
-      // Nothing had ever subscribed here, so a card dot was only written by a
-      // command's outcome — meaning it showed a stale exit status, or stayed
-      // muted forever on a page where you'd run nothing. That looked like the
-      // header and the cards disagreeing about health.
-      let _lastHealth = [];
-      function applyHealthToCards(results) {
-        for (const h of results || []) {
-          // ok === null means "no health check declared". Leave it muted rather
-          // than painting it red, which would claim the service is down.
-          const state = h.ok === true ? "ok" : h.ok === false ? "err" : "";
-          const el = document.getElementById(`dot-${h.repo}-${h.service}`);
-          if (el) el.className = `dot${state ? " " + state : ""}`;
-          const link = document.getElementById(`site-${h.repo}-${h.service}`);
-          if (link) {
-            if (h.openUrl) {
-              link.href = h.openUrl;
-              link.textContent = `${h.openUrl.replace(/^https?:\/\//, "").replace(/\/$/, "")} ↗`;
-              link.title = `Open ${h.openUrl} in a new tab`;
-              link.hidden = false;
-            } else {
-              link.hidden = true;
+        // ── Card health ───────────────────────────────────────────────────────────
+        // Card dots follow the header's existing poll instead of running their own:
+        // header.js broadcasts every poll and manual refresh as
+        // `__DEN_CLI__:health-update`, the same feed local-dev's graph subscribes to.
+        // Nothing had ever subscribed here, so a card dot was only written by a
+        // command's outcome — meaning it showed a stale exit status, or stayed
+        // muted forever on a page where you'd run nothing. That looked like the
+        // header and the cards disagreeing about health.
+        let _lastHealth = [];
+        function applyHealthToCards(results) {
+          for (const h of results || []) {
+            // ok === null means "no health check declared". Leave it muted rather
+            // than painting it red, which would claim the service is down.
+            const state = h.ok === true ? "ok" : h.ok === false ? "err" : "";
+            const el = document.getElementById(`dot-${h.repo}-${h.service}`);
+            if (el) el.className = `dot${state ? " " + state : ""}`;
+            const link = document.getElementById(`site-${h.repo}-${h.service}`);
+            if (link) {
+              if (h.openUrl) {
+                link.href = h.openUrl;
+                link.textContent = `${h.openUrl.replace(/^https?:\/\//, "").replace(/\/$/, "")} ↗`;
+                link.title = `Open ${h.openUrl} in a new tab`;
+                link.hidden = false;
+              } else {
+                link.hidden = true;
+              }
             }
           }
         }
-      }
-      document.addEventListener("__DEN_CLI__:health-update", (e) => {
-        _lastHealth = e.detail || [];
-        applyHealthToCards(_lastHealth);
-      });
+        document.addEventListener("__DEN_CLI__:health-update", (e) => {
+          _lastHealth = e.detail || [];
+          applyHealthToCards(_lastHealth);
+        });
-      // ── Button helpers ────────────────────────────────────────────────────────
-      function disableAllButtons() {
-        document
-          .querySelectorAll(".cmd-btn")
-          .forEach((b) => (b.disabled = true));
-      }
-      function enableAllButtons() {
-        document
-          .querySelectorAll(".cmd-btn")
-          .forEach((b) => (b.disabled = false));
-      }
+        // ── Button helpers ────────────────────────────────────────────────────────
+        function disableAllButtons() {
+          document
+            .querySelectorAll(".cmd-btn")
+            .forEach((b) => (b.disabled = true));
+        }
+        function enableAllButtons() {
+          document
+            .querySelectorAll(".cmd-btn")
+            .forEach((b) => (b.disabled = false));
+        }
-      // ── Helpers ───────────────────────────────────────────────────────────────
-      function fmtDuration(ms) {
-        if (ms < 1000) return `${ms}ms`;
-        const s = Math.floor(ms / 1000),
-          m = Math.floor(s / 60);
-        return m > 0 ? `${m}m ${s % 60}s` : `${s}s`;
-      }
+        // ── Helpers ───────────────────────────────────────────────────────────────
+        function fmtDuration(ms) {
+          if (ms < 1000) return `${ms}ms`;
+          const s = Math.floor(ms / 1000),
+            m = Math.floor(s / 60);
+          return m > 0 ? `${m}m ${s % 60}s` : `${s}s`;
+        }
-      init();
-    </script>
+        init();
+      </script>
+    </main>
   </body>
 </html>