@monster-orange/den 0.4.16 → 0.4.18

package/src/ui/server/public/i18n/ja.js

@@ -50,6 +50,43 @@
     "b.down": "{n} 件停止",
     "act.pin": "ピン留め",
     "act.unpin": "ピン留めを外す",
+    "act.visit": "開く",
+    "act.visitX": "{s} を開く(新しいタブ)",
+    // 0.4.18: the service panel (svc-panel.js) and Start's Folder.
+    "svp.label": "{s}: クイックパネル",
+    "svp.more": "{s} のクイックパネル",
+    "svp.notRunning": "停止中",
+    "svp.up": "稼働 {d}",
+    "svp.upNow": "稼働中",
+    "svp.down": "停止: {c}",
+    "svp.downNone": "停止",
+    "svp.starting": "起動中…",
+    "svp.stopped": "停止",
+    "svp.noUrl": "URL なし",
+    "svp.start": "開始",
+    "svp.stop": "停止",
+    "svp.restart": "再起動",
+    "svp.logs": "ログ",
+    "svp.stopping": "{s} を停止中",
+    "svp.tests": "前回のテスト",
+    "svp.testsOk": "✓ {t}",
+    "svp.testsBad": "✗ 失敗 {t}",
+    "svp.testsRun": "実行中…",
+    "svp.testsNone": "—",
+    "svp.runTests": "テストを実行",
+    "svp.testsDone": "テスト成功: {s}",
+    "svp.testsFailed": "テスト失敗: {s}",
+    "svp.agents": "エージェント",
+    "svp.noAgents": "このリポジトリにエージェントはいません。",
+    "svp.open": "開く",
+    "svp.openAg": "{s} を開く",
+    "svp.startHere": "ここでエージェントを開始",
+    "svp.openSvc": "サービスで開く",
+    "svp.openGraph": "グラフで開く",
+    "svp.close": "閉じる",
+    "ag.new.folder": "フォルダー（任意）",
+    "ag.new.folderHelp":
+      "ワークスペースのフォルダー内。空欄ならワークスペースのフォルダー。",
     "act.pinX": "{s} をピン留め",
     "act.unpinX": "{s} のピン留めを外す",
     "toast.pinned": "{s} をピン留めしました",
@@ -101,6 +138,8 @@
     "kind.app": "アプリ",
     "kind.action": "操作",
     "kind.setting": "設定",
+    "kind.workspace": "ワークスペース",
+    "pal.goWs": "ワークスペース {ws} へ移動",
     "pal.repos": "{n} 個のリポジトリ",
     "pal.restart": "{s} を再起動",
     "pal.results": "結果",
@@ -500,6 +539,10 @@
       "作業中です。このターンの後に変更しますか、それとも今すぐ停止しますか?",
     "ag.pc.after": "このターンの後",
     "ag.pc.now": "今すぐ停止",
+    "ag.pc.fresh":
+      "{id} は {p} になりました。まだ再開するものがないため、新しく開始しました(会話 ID、フォルダー、範囲は同じ)",
+    "ag.freshLine":
+      "まだ再開するものがないため、新しく開始しました(会話 ID、フォルダー、範囲は同じ)",
     "ag.pc.done": "{id} は {p} になりました",
     "ag.pc.pending": "このターンが終わると {id} は {p} になります",
     "ag.more": "{id} のその他の操作",
@@ -653,6 +696,9 @@
     "ag.ended": "このセッションは終了しました。記録は再開か削除まで残ります。",
     "ag.switched": "{p} に切り替えました",
     "ag.exitedLine": "[セッションが終了しました{code}]",
+    "ag.refusedUnknown": "サーバーがターミナルを拒否しました",
+    "ag.refusedStatus": "サーバーがターミナルを拒否しました({status})",
+    "ag.goWs": "ワークスペースで {ws} を開く",
     "ag.lost": "[切断: {why}]",
     "ag.reconnect": "再接続",
     "ag.noBackend":

package/src/ui/server/public/index.html

@@ -290,6 +290,7 @@
       }
       .module-picker-dropdown {
         display: none;
+        padding: 0;
         position: absolute;
         top: calc(100% + 4px);
         left: 0;
@@ -1568,6 +1569,11 @@
         e.stopPropagation();
         const open = pickerDropdown.classList.toggle("open");
         pickerBtn.classList.toggle("open", open);
+        // 0.4.17: in the top layer, so the output pane can't cover it.
+        if (open)
+          window.denShell?.topLayer?.show(pickerDropdown, pickerBtn, {
+            gap: 4,
+          });
       });
       document.addEventListener("click", () => {
         pickerDropdown.classList.remove("open");

package/src/ui/server/public/local-dev.html

@@ -1168,6 +1168,11 @@
       }
       .tablewrap {
         overflow-x: auto;
+        /* 0.4.17: in a short window (under ~620 px tall) the column's other
+           parts squeezed it to nothing; it keeps room for rows and scrolls. */
+        min-height: 200px;
+        flex-shrink: 0;
+        overflow-y: auto;
         border: 1px solid var(--border);
         border-radius: var(--radius);
         background: var(--surface);
@@ -1285,6 +1290,9 @@
       .tbl-health.ok {
         color: var(--ok);
       }
+      .tbl-up:not(:empty) {
+        margin-left: 8px;
+      }
       .tbl-muted {
         color: var(--muted);
         font-size: 12.5px;
@@ -1330,6 +1338,46 @@
       .tbl-acts .tbl-more-sp {
         display: inline-block;
       }
+      /* Visit ↗ (0.4.17): before Start, so Start/Stop/Restart/Logs and ⋯
+         still line up across rows whether a service has a URL or not. */
+      .tbl-acts .tbl-visit {
+        flex: none;
+        padding-left: 6px;
+        padding-right: 6px;
+        text-decoration: none;
+      }
+      /* The table never scrolls sideways: in a window under 1600px wide
+         (the workspace list beside it) Visit is its ↗; its name and title
+         still say Visit. */
+      @media (max-width: 1599px) {
+        .tbl-visit .tbl-visit-w {
+          display: none;
+        }
+      }
+      table.svc a.repo-name {
+        text-decoration: underline;
+        text-decoration-color: var(--border-strong);
+        text-underline-offset: 2px;
+      }
+      table.svc a.repo-name:hover {
+        text-decoration-color: currentColor;
+      }
+      /* The favourite star (0.4.17): the shell's pins, as on Services. */
+      .tbl-star {
+        background: none;
+        border: 1px solid transparent;
+        border-radius: var(--radius-button);
+        color: var(--faint);
+        cursor: pointer;
+        font-size: 13px;
+        line-height: 1.2;
+        padding: 0 2px;
+      }
+      .tbl-star:hover,
+      .tbl-star[aria-pressed="true"] {
+        color: var(--accent-text);
+        background: var(--sunken);
+      }
       .tbl-btn:disabled {
         opacity: 0.45;
         cursor: not-allowed;
@@ -1769,7 +1817,11 @@
               .querySelectorAll(".ws-menu-dropdown.open")
               .forEach((d) => d.classList.remove("open"));
             const menu = document.getElementById(menuBtn.dataset.menuId);
-            menu?.classList.toggle("open");
+            if (menu?.classList.toggle("open"))
+              window.denShell?.topLayer?.show(menu, menuBtn, {
+                align: "right",
+                gap: 2,
+              });
             return;
           }
           // ↗ open in editor
@@ -1822,7 +1874,12 @@
           if (updateUrl) {
             const params = new URLSearchParams(location.search);
             params.set("ws", name);
-            history.replaceState(null, "", "?" + params.toString());
+            // The hash stays (#focus=<id>: Open in Graph's card).
+            history.replaceState(
+              null,
+              "",
+              "?" + params.toString() + location.hash,
+            );
           }
           document
             .querySelectorAll(".ws-item")
@@ -1858,8 +1915,16 @@
               if (d.id !== btn.dataset.menuId) d.style.display = "none";
             });
             const menu = document.getElementById(btn.dataset.menuId);
-            if (menu)
-              menu.style.display = menu.style.display === "none" ? "" : "none";
+            if (menu) {
+              const show = menu.style.display === "none";
+              menu.style.display = show ? "" : "none";
+              // 0.4.17: in the top layer, so no row or card clips it.
+              if (show)
+                window.denShell?.topLayer?.show(menu, btn, {
+                  align: "right",
+                  gap: 3,
+                });
+            }
             e.stopPropagation();
             return;
           }
@@ -2102,7 +2167,7 @@
                 <th scope="col">Health</th>
                 <th scope="col">Branch</th>
                 <th scope="col">Mode</th>
-                <th scope="col">Last run</th>
+                <th scope="col">Last test run</th>
                 <th scope="col"><span class="tbl-sr">Actions</span></th>
               </tr></thead>
             </table>
@@ -2272,22 +2337,60 @@
           return [{ key: "", title: null, rows }];
         }
 
-        /** The last run (the runs dock's) of a repo's tab: "✓ 12:03", "running…", "—". */
+        // 0.4.17: each repo's last test run, from the server's run history
+        // (every browser's runs, kept across restarts), and when its
+        // service started (the daemons list), shown apart from it.
+        let _lastRuns = {};
+        let _upSince = new Map();
+        async function loadLastRuns() {
+          const [last, daemons] = await Promise.all([
+            fetch("/api/runs/last")
+              .then((r) => (r.ok ? r.json() : null))
+              .catch(() => null),
+            fetch("/api/service/daemons")
+              .then((r) => (r.ok ? r.json() : []))
+              .catch(() => []),
+          ]);
+          _lastRuns = last?.repos ?? {};
+          _upSince = new Map();
+          for (const d of Array.isArray(daemons) ? daemons : []) {
+            const at = Date.parse(d.startedAt);
+            if (!d.repoName || !Number.isFinite(at)) continue;
+            const cur = _upSince.get(d.repoName);
+            if (cur === undefined || at < cur) _upSince.set(d.repoName, at);
+          }
+          paintLastRuns();
+        }
+
+        /** A repo's last test run: "✓ 12:03", "✗ failed 12:03", "running…", "—". */
         function lastRunText(repo) {
-          const list = runs()?.list?.() ?? [];
-          const mine = list.filter(
-            (r) => r.id === repo || r.id.split("/")[0] === repo,
-          );
-          const r = mine.sort((a, b) => (b.ranAt ?? 0) - (a.ranAt ?? 0))[0];
-          if (!r || (!r.ranAt && !r.running)) return { text: "—", cls: "" };
-          if (r.running) return { text: "running…", cls: "" };
+          const r = _lastRuns[repo];
+          if (!r) return { text: "—", cls: "", title: "" };
+          const title = [r.pillar, r.env].filter(Boolean).join(" · ");
+          if (r.running) return { text: "running…", cls: "", title };
           const t = new Intl.DateTimeFormat(undefined, {
             hour: "2-digit",
             minute: "2-digit",
-          }).format(new Date(r.endedAt ?? r.ranAt));
-          return r.error
-            ? { text: `✗ failed ${t}`, cls: "bad" }
-            : { text: `✓ ${t}`, cls: "ok" };
+          }).format(new Date(r.endedAt ?? r.startedAt));
+          return r.exitCode === 0
+            ? { text: `✓ ${t}`, cls: "ok", title }
+            : { text: `✗ failed ${t}`, cls: "bad", title };
+        }
+
+        /** How long a repo's service has run: "up 2h", or "" when it doesn't. */
+        function upText(repo) {
+          const at = _upSince.get(repo);
+          if (at === undefined) return "";
+          const s = Math.max(0, Math.round((Date.now() - at) / 1000));
+          const d =
+            s < 60
+              ? `${s}s`
+              : s < 3600
+                ? `${Math.floor(s / 60)}m`
+                : s < 86400
+                  ? `${Math.floor(s / 3600)}h`
+                  : `${Math.floor(s / 86400)}d`;
+          return `up ${d}`;
         }
 
         /** A health cell: the dot and the rollup, or the failing check. */
@@ -2335,6 +2438,47 @@
           );
         }
 
+        /** A service's URL to visit (its edge URL if routed, else its local one), or null. */
+        function visitUrl(svc) {
+          const u = svc?.open;
+          return typeof u === "string" && /^https?:\/\//.test(u) ? u : null;
+        }
+        /** The shell's words (its language), else English. */
+        function shT(key, vars, en) {
+          const v = window.denShell?.t?.(key, vars);
+          return v && v !== key ? v : en;
+        }
+        /** Visit ↗ (0.4.17): opens the service in a new tab; nothing without a URL. */
+        function visitBtn(svc, name) {
+          const url = visitUrl(svc);
+          if (!url) return "";
+          const label = shT(
+            "act.visitX",
+            { s: name },
+            `Visit ${name} (opens a new tab)`,
+          );
+          return `<a class="den-btn sm tbl-btn tbl-visit" href="${escHtml(url)}" target="_blank" rel="noopener" aria-label="${escHtml(label)}" title="${escHtml(url)}" data-k="visit:${escHtml(name)}"><span class="tbl-visit-w">${escHtml(shT("act.visit", {}, "Visit"))} </span>↗</a>`;
+        }
+        /** A row's name: a link to visit when the service has a URL. */
+        function nameLink(svc, text) {
+          const url = visitUrl(svc);
+          return url
+            ? `<a class="repo-name" href="${escHtml(url)}" target="_blank" rel="noopener" title="${escHtml(shT("act.visitX", { s: url }, `Visit ${url} (opens a new tab)`))}">${escHtml(text)}</a>`
+            : `<span class="repo-name">${escHtml(text)}</span>`;
+        }
+        /** The favourite star (0.4.17): the shell's pins, the same store as Services. */
+        function starBtn(id) {
+          const sh = window.denShell;
+          if (!sh?.isPinned) return "";
+          const on = sh.isPinned(id);
+          const label = shT(
+            on ? "act.unpinX" : "act.pinX",
+            { s: id },
+            `${on ? "Unpin" : "Pin"} ${id}`,
+          );
+          return `<button type="button" class="tbl-star" data-pin-toggle="${escHtml(id)}" aria-pressed="${on ? "true" : "false"}" aria-label="${escHtml(label)}" title="${escHtml(label)}" data-k="star:${escHtml(id)}">${on ? "★" : "☆"}</button>`;
+        }
+
         /** Action buttons; each one's name says what and on which repo or service. */
         function actBtns(id, o) {
           const b = (act, label, name, extra = "") =>
@@ -2407,12 +2551,12 @@
             ? `<span class="tbl-mode"><span class="badge ${escHtml(mode)}">${escHtml(mode)}</span><button type="button" class="tbl-switch" data-action="tbl-mode" data-repo="${escHtml(repo)}" data-mode="${switchTo}" aria-label="${escHtml(repo)}: use ${mode === "managed" ? "local" : "managed"}" data-k="mode:${escHtml(repo)}">use ${mode === "managed" ? "local" : "managed"}</button></span>`
             : "";
           const head = `<tr class="repo${r.problem ? " prob" : ""}" data-repo="${escHtml(repo)}">
-              <th scope="row">${exp}<span class="repo-name">${escHtml(repo)}</span>${badges}</th>
-              <td>${repoHealth(r)}</td>
+              <th scope="row">${exp}${nameLink(primary, repo)} ${starBtn(repo)}${badges}</th>
+              <td>${repoHealth(r)}<span class="tbl-muted tbl-up" data-up="${escHtml(repo)}">${escHtml(upText(repo))}</span></td>
               <td class="tbl-mono tbl-muted">${escHtml(primary?.branch ?? "")}</td>
               <td>${modeCell}</td>
-              <td class="tbl-muted${run.cls ? " " + run.cls : ""}" data-last="${escHtml(repo)}">${escHtml(run.text)}</td>
-              <td><div class="tbl-acts">${actBtns(repo, { up: !!startOf(repo).length, restart: !!startOf(repo).length })}${repoMenu(r)}</div></td>
+              <td class="tbl-muted${run.cls ? " " + run.cls : ""}" data-last="${escHtml(repo)}" title="${escHtml(run.title)}">${escHtml(run.text)}</td>
+              <td><div class="tbl-acts">${visitBtn(primary, repo)}${actBtns(repo, { up: !!startOf(repo).length, restart: !!startOf(repo).length })}${repoMenu(r)}</div></td>
             </tr>`;
           const fixes = r.fixes
             .map(
@@ -2434,10 +2578,10 @@
                     s,
                     i,
                   ) => `<tr class="sub" id="${subIds[i]}" data-repo="${escHtml(repo)}" data-id="${escHtml(s.id)}"${shown(s) ? "" : " hidden"}>
-              <th scope="row"><span class="repo-name">${escHtml(s.name)}</span>${s.entry ? ' <span class="badge">entry</span>' : ""}</th>
+              <th scope="row">${nameLink(s, s.name)} ${starBtn(s.id)}${s.entry ? ' <span class="badge">entry</span>' : ""}</th>
               <td>${!_lastHealthAt ? CHECKING() : healthCell(status(s), s.health.ok === false ? checkLineOf(s) : healthLine(s))}</td>
               <td></td><td></td><td></td>
-              <td><div class="tbl-acts">${actBtns(s.id, { up: s.commands.includes("up"), restart: s.commands.includes("up") || s.commands.includes("restart") })}<span class="tbl-more-sp" aria-hidden="true"></span></div></td>
+              <td><div class="tbl-acts">${visitBtn(s, s.id)}${actBtns(s.id, { up: s.commands.includes("up"), restart: s.commands.includes("up") || s.commands.includes("restart") })}<span class="tbl-more-sp" aria-hidden="true"></span></div></td>
             </tr>`,
                 )
                 .join("")
@@ -2516,13 +2660,17 @@
           if (keep)
             table.querySelector(`[data-k="${CSS.escape(keep)}"]`)?.focus();
         }
-        /** Only the Last run cells (the dock changed). */
+        /** Only the Last test run and "up" cells (the history changed). */
         function paintLastRuns() {
           document.querySelectorAll("#repo-table [data-last]").forEach((td) => {
             const run = lastRunText(td.dataset.last);
             td.textContent = run.text;
+            td.title = run.title;
             td.className = "tbl-muted" + (run.cls ? " " + run.cls : "");
           });
+          document.querySelectorAll("#repo-table [data-up]").forEach((el) => {
+            el.textContent = upText(el.dataset.up);
+          });
         }
 
         /**
@@ -2581,6 +2729,14 @@
             setTableGroup(g.dataset.group);
             return;
           }
+          const star = e.target.closest("#repo-table [data-pin-toggle]");
+          if (star) {
+            const sh = window.denShell;
+            const id = star.dataset.pinToggle;
+            if (sh?.isPinned(id)) sh.unpin(id);
+            else sh?.pin(id);
+            return;
+          }
           const b = e.target.closest("[data-action^='tbl-']");
           if (!b || b.disabled) return;
           const a = b.dataset.action;
@@ -2641,8 +2797,20 @@
           const v = localStorage.getItem(LS_GROUP);
           if (["none", "app", "org"].includes(v)) _tblGroup = v;
         } catch {}
-        // The Last run column follows the dock.
-        window.denShell?.runs?.onChange?.(paintLastRuns);
+        // The Last test run column: the server's history, read now, when a
+        // run here changes, and every 30 s for runs from elsewhere.
+        void loadLastRuns();
+        // The dock changes on every line of a run: read at most every 2 s.
+        let _lastRunsSoon = null;
+        window.denShell?.runs?.onChange?.(() => {
+          _lastRunsSoon ??= setTimeout(() => {
+            _lastRunsSoon = null;
+            void loadLastRuns();
+          }, 2_000);
+        });
+        setInterval(() => {
+          if (!document.hidden) void loadLastRuns();
+        }, 30_000);
 
         // ── Tab management (one persistent tab per service address) ───────────────
         //
@@ -4110,7 +4278,11 @@
               const params = new URLSearchParams(location.search);
               params.delete("ws");
               const qs = params.toString();
-              history.replaceState(null, "", qs ? "?" + qs : location.pathname);
+              history.replaceState(
+                null,
+                "",
+                (qs ? "?" + qs : location.pathname) + location.hash,
+              );
             }
             await loadWorkspaces();
           }

package/src/ui/server/public/log-source.js

@@ -0,0 +1,26 @@
+/**
+ * Where a service's live log comes from (0.4.18): one rule for the Logs
+ * page and the service panel's Logs, so they never disagree.
+ *
+ *   - Den's own server log (the "__DEN_CLI__/server" pseudo-service):
+ *     /api/server-log, the server's log ring;
+ *   - a local service: /api/service/taillog, the workspace page's source
+ *     chain (the manifest's command, the conventional container, the
+ *     daemon's startup log). /api/service/logs answers 404 for a service
+ *     with no `logs:` block;
+ *   - any other env: /api/service/logs, for cloud sources and the reauth
+ *     flow.
+ */
+
+/** The server's own log, shown like a service's. */
+export function isServerLog(repo, service) {
+  return repo === "__DEN_CLI__" && service === "server";
+}
+
+/** The SSE URL of `repo/service`'s live log in `env`. */
+export function logStreamUrl(repo, service, env) {
+  if (isServerLog(repo, service)) return "/api/server-log";
+  if (env === "local")
+    return `/api/service/taillog?${new URLSearchParams({ repo, service })}`;
+  return `/api/service/logs?${new URLSearchParams({ repo, service, env })}`;
+}

package/src/ui/server/public/logs.html

@@ -476,6 +476,7 @@
         envReady,
         initWorkspacePill,
       } from "/header.js";
+      import { isServerLog, logStreamUrl } from "/log-source.js";
 
       // ── Safe highlight rendering ──────────────────────────────────────────────
       // Log lines are UNTRUSTED (any service can log attacker-influenced text,
@@ -550,11 +551,9 @@
       const logStreams = new Map();
 
       // "__DEN_CLI__/server" is a pseudo-service that taps the server's own log ring
-      // via /api/server-log instead of /api/service/logs. Everything else in the
-      // page treats it like a normal log stream.
-      function isServerLog(repo, service) {
-        return repo === "__DEN_CLI__" && service === "server";
-      }
+      // via /api/server-log instead of /api/service/logs (isServerLog,
+      // log-source.js). Everything else in the page treats it like a normal
+      // log stream.
       function formatServerLogEntry(entry) {
         // "14:07:41  [lifecycle]  ▶ run synthetic/local · modules=all [abcxyz]"
         // An agent's action reads "[agent]" and ends "· by agent <client> …".
@@ -1075,21 +1074,9 @@
         // ─────────────────────────────────────────────────────────────────────
 
         const serverLog = isServerLog(repo, service);
-        // Local streams go through taillog — the same endpoint the workspace
-        // page's tabs use. It has the full source-resolution chain (manifest
-        // cmd → conventional opctl container → daemon startup log), whereas
-        // /api/service/logs 404s for services with no logs block (shop-web,
-        // control-plane). Non-local envs keep /api/service/logs for
-        // cloudwatch sources + the AWS reauth flow.
-        const es = serverLog
-          ? new EventSource("/api/server-log")
-          : env === "local"
-            ? new EventSource(
-                `/api/service/taillog?${new URLSearchParams({ repo, service })}`,
-              )
-            : new EventSource(
-                `/api/service/logs?${new URLSearchParams({ repo, service, env })}`,
-              );
+        // Where the stream comes from (taillog for local, logs elsewhere):
+        // log-source.js, which the service panel's Logs uses too.
+        const es = new EventSource(logStreamUrl(repo, service, env));
 
         es.onmessage = (e) => {
           const msg = JSON.parse(e.data);

package/src/ui/server/public/panel.js

@@ -79,7 +79,7 @@ export const ACTIONS = [
   },
   {
     id: "open",
-    label: "Open ↗",
+    label: "Visit ↗",
     for: ["service"],
     tier: "common",
     when: (s) => !!(s.open || s.target?.url),

package/src/ui/server/public/release.html

@@ -134,6 +134,10 @@
         font-size: 11px;
         color: var(--muted);
       }
+      .view-note {
+        color: var(--muted);
+        font-size: 12px;
+      }
       #status-text {
         font-size: 11px;
         color: var(--muted);
@@ -678,6 +682,7 @@
         ⟳ Refresh
       </button>
       <span id="status-text">idle</span>
+      <span id="view-note"></span>
       <div class="h-spacer" style="flex: 1"></div>
       <button class="btn" id="waves-btn" title="Edit wave assignment">
         Waves…
@@ -735,6 +740,7 @@
         refreshHealth,
         initWorkspacePill,
       } from "/header.js";
+      import { viewNoteHtml, viewRepos, viewScope } from "/view-scope.js";
 
       // The header's dots report LOCAL service health here: #den-shell pins
       // data-health-env="local" (shell.js). The env picker is the shell's
@@ -819,6 +825,15 @@
           .replace(/>/g, "&gt;")
           .replace(/"/g, "&quot;");
 
+      // 0.4.17: the repos follow the top bar's View (Org and Workspace),
+      // as on Environments: no picker of this page's own (view-scope.js).
+      let viewIn = null;
+      const viewReady = viewScope().then(async (v) => {
+        const note = document.getElementById("view-note");
+        if (note) note.innerHTML = viewNoteHtml(v);
+        viewIn = await viewRepos(v);
+      });
+
       // ── Init ──────────────────────────────────────────────────────────────────
       async function init() {
         try {
@@ -909,7 +924,10 @@
           const data = await fetch(
             `/api/release/status?env=${encodeURIComponent(state.env)}&refresh=${refresh ? 1 : 0}`,
           ).then((r) => r.json());
-          state.rows = data.rows || [];
+          await viewReady;
+          state.rows = (data.rows || []).filter(
+            (r) => !viewIn || viewIn.has(r.repo),
+          );
           setStatus(
             data.error
               ? `error: ${data.error}`

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

@@ -211,6 +211,20 @@
         font-weight: 600;
         color: var(--text);
       }
+      /* 0.4.18: the name opens the service panel (svc-panel.js). */
+      .svc-name-btn {
+        background: none;
+        border: 0;
+        padding: 0;
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
+        text-align: left;
+      }
+      .svc-name-btn:hover,
+      .svc-name-btn[aria-expanded="true"] {
+        text-decoration: underline;
+      }
       .service-repo .owners {
         color: var(--accent-text);
       }
@@ -335,6 +349,7 @@
           envReady,
           sudoRun,
         } from "/header.js";
+        import { logStreamUrl } from "/log-source.js";
         import { ownersLabel } from "/workspace-picker.js";
 
         let es = null;
@@ -656,7 +671,7 @@
             <div class="service-card-header">
               <span class="dot" id="dot-${s.repo}-${s.service}"></span>
               <div class="service-card-title">
-                <div class="service-name">${addr}</div>
+                <div class="service-name"><button type="button" class="svc-name-btn" data-svpanel-open="${esc(isSub ? addr : s.repo)}" aria-haspopup="dialog" aria-expanded="false" title="${esc(window.denShell?.t?.("svp.more", { s: isSub ? addr : s.repo }) ?? addr)}">${esc(addr)}</button></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>`
@@ -821,8 +836,8 @@
           );
           appendLine(`\n▶ ${repo}/${service} logs · ${env}\n`, "cmd");
 
-          const params = new URLSearchParams({ repo, service, env });
-          es = new EventSource(`/api/service/logs?${params}`);
+          // The Logs page's source (log-source.js): taillog for local.
+          es = new EventSource(logStreamUrl(repo, service, env));
           handleSSE(es, repo, service, { stream: true });
         }