@monster-orange/den 0.4.18 → 0.4.20

package/src/ui/server/index.ts

@@ -50,6 +50,7 @@ import { readCatalog } from "../../shared/environment-manager/catalog.js";
 import {
   getActiveWorkspace,
   getActiveWorkspaces,
+  activateWorkspace,
   createWorkspace,
   getFocusedWorkspaceName,
   getWorkspaceByName,
@@ -172,6 +173,7 @@ import {
 } from "../../shared/auth/sudo-vault.js";
 import {
   notConfiguredMessage,
+  opTokenSourceSetting,
   secretsConfigWarnings,
 } from "../../shared/secrets/index.js";
 import { DEN_BANNER_LINES, DEN_SUBTITLE } from "../../shared/banner.js";
@@ -858,6 +860,8 @@ import { heldActions } from "./held-actions.js";
 import type { ApprovalQueue } from "./approvals.js";
 import { processPathRules } from "../cli/onboard-reads.js";
 import { handleAgentRoutes, startAgentUpkeep } from "./agent-routes.js";
+import { handleServerAgentRoutes } from "./server-agent-routes.js";
+import { freshDen } from "../cli/server-agent-ops.js";
 import {
   lastRunsByRepo,
   recordRunEnd,
@@ -1768,6 +1772,8 @@ function approvalDeps(): {
     validate: (m) => validateManifest(m),
     workspaceCreateRefusal,
     createWorkspace: (name) => createWorkspace(name, { services: {} }),
+    activateWorkspace: (name) => activateWorkspace(name),
+    workspaceActive: (name) => isWorkspaceActive(name),
     workspaceExists: (name) =>
       Object.prototype.hasOwnProperty.call(
         readWorkspacesFile().workspaces ?? {},
@@ -1775,12 +1781,8 @@ function approvalDeps(): {
       ),
     defaultWorkspace: () => getFocusedWorkspaceName() ?? "default",
     // The exec route's checks for a local `up` (R13 placement, HITL).
+    // An inactive workspace is fine: the Allow activates it (held-actions.ts).
     serviceTarget: (service, ws) => {
-      if (ws && !isWorkspaceActive(ws))
-        return {
-          ok: false,
-          error: `Workspace "${ws}" is not active — activate it first`,
-        };
       const resolved = resolveService(service, ws);
       if (!resolved)
         return {
@@ -2140,9 +2142,18 @@ async function handleRequest(
       res.end();
       return;
     }
+    // ON-6: a fresh Den's first page is its own agent (no redirect: a
+    // setup link's #ak= fragment stays on this address).
+    if (pathname === "/" && (await freshDen()))
+      return serveFile(res, path.join(PUBLIC_DIR, "server-agent.html"));
     return serveFile(res, path.join(PUBLIC_DIR, "local-dev.html"));
   }
 
+  // The server agent's page (ON-6): this Den's own agent, in a terminal.
+  if (pathname === "/server-agent" || pathname === "/server-agent.html") {
+    return serveFile(res, path.join(PUBLIC_DIR, "server-agent.html"));
+  }
+
   // The Graph page (R22): Local Dev's page in its full-width graph view.
   if (pathname === "/graph" || pathname === "/graph.html") {
     if (!isLocalEnabled()) {
@@ -4284,6 +4295,9 @@ async function handleRequest(
       uptimeMs: Date.now() - SERVER_STARTED_AT,
       stale,
       scanned,
+      // ON-6: no repo in any workspace yet (the server agent page's own
+      // `fresh`): the shell skips What's new on a brand-new Den.
+      fresh: await freshDen(),
     });
   }
 
@@ -4587,6 +4601,8 @@ async function handleRequest(
     return;
   }
 
+  // ── The server agent (ON-6, server-agent-routes.ts) ──────────────────────
+  if (await handleServerAgentRoutes(req, res, pathname)) return;
   // ── Agents on the Workspaces page (AG-4a, agent-routes.ts) ───────────────
   if (await handleAgentRoutes(req, res, pathname)) return;
   // ── The Agents tab's list (AG-4a-term, session-routes.ts) ────────────────
@@ -4845,7 +4861,8 @@ async function handleRequest(
   // ── API: user settings ────────────────────────────────────────────────────
   // GET  /api/settings  → { editor, editors, terminal, terminals, editor_overrides, languages,
   //                         log_window_lines, graph, appearance, shell, distribution,
-  //                         user_web_port, local_dev, cli_tabs, language, ui_languages }
+  //                         user_web_port, local_dev, cli_tabs, language, ui_languages,
+  //                         op_token_source }
   // POST /api/settings  body: { editor?, terminal?, editor_overrides?, graph?, appearance?, shell?,
   //                             language? }
   //   graph: { direction, group, density, panelWidth } (see graph-prefs.ts)
@@ -4914,6 +4931,8 @@ async function handleRequest(
         // what it is when unset (the short hostname).
         machine_name: machineNameSetting(user),
         machine_name_default: machineLabel(null, os.hostname()),
+        // Where the 1Password token comes from (the source, never the token).
+        op_token_source: opTokenSourceSetting(),
       });
     }
     if (req.method === "POST") {

package/src/ui/server/public/agents-page.js

@@ -125,6 +125,8 @@ const esc = (s) =>
 const api = (method, url, body) => window.denShell.api(method, url, body);
 const CLI = "__DEN_CLI__";
 const TITLE = "__DEN_TITLE__";
+/** ON-6: the server agent's scope (no workspace), shared/agents/server-agent.ts. */
+const SERVER_WS = "den-server";
 /** How long Remove's Undo stays offered (AG-14.1b). */
 export const UNDO_MS = 10_000;
 
@@ -339,6 +341,9 @@ function wsHref(ws) {
 
 /** Workspace `ws` as a link to it on Workspaces. */
 function wsLinkHtml(ws) {
+  // ON-6: the server agent belongs to no workspace: its group is "Server".
+  if (ws === SERVER_WS)
+    return `<span class="wslink" data-server>${esc(t("ag.server"))}</span>`;
   return `<a class="wslink" href="${esc(wsHref(ws))}" title="${esc(t("ag.goWs", { ws }))}">${esc(ws)}</a>`;
 }
 
@@ -455,7 +460,10 @@ function paintList() {
     el.innerHTML = notes.join("");
     return;
   }
-  const shown = viewWorkspaces();
+  // ON-6: the server agent's group, "Server", first, whatever the view.
+  const shown = st.data.sessions.some((s) => s.server)
+    ? [SERVER_WS, ...viewWorkspaces()]
+    : viewWorkspaces();
   // ?ws= names a workspace that isn't active: say so, and offer the switch.
   const asked = st.data.requested;
   if (asked && !asked.active)
@@ -515,6 +523,7 @@ function paintList() {
 
 function visibleRows() {
   const shown = new Set(viewWorkspaces());
+  shown.add(SERVER_WS);
   return (st.data?.sessions ?? []).filter((s) => shown.has(s.workspace));
 }
 

package/src/ui/server/public/error-page.js

@@ -171,6 +171,34 @@ function cmdLine(id, cmd, t, extra = "") {
   );
 }
 
+/** Whether this browser runs on Windows (no ssh:// app by default). */
+function onWindows() {
+  const nav = globalThis.navigator;
+  const platform = nav?.userAgentData?.platform || nav?.platform || "";
+  return /^win/i.test(platform) || /Windows/i.test(nav?.userAgent || "");
+}
+
+/** How long a click on Open Terminal waits for an app to take the page's focus. */
+const NOTHING_OPENED_MS = 2000;
+
+/**
+ * SEC-2a-UX.2: after a click on Open Terminal, if this page still has
+ * focus 2 s later, no app took the ssh:// link; say so under the button.
+ */
+function wireNothingOpened(root) {
+  const term = root.querySelector("#den-pair-term");
+  const note = root.querySelector("#den-pair-nothing");
+  if (!term || !note) return;
+  let timer = null;
+  term.addEventListener("click", () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (!document.hidden && document.hasFocus() && note.isConnected)
+        note.hidden = false;
+    }, window.__denNothingOpenedMs || NOTHING_OPENED_MS);
+  });
+}
+
 /** Wire every copy button under `root` (each once). */
 function wireCopy(root, t) {
   root.querySelectorAll("button[data-copy-for]").forEach((b) => {
@@ -445,9 +473,12 @@ function wirePair(root, t, s) {
       `<div class="acts" style="margin-top:0"><button type="button" class="btn" id="den-pair-new">${esc(t("err.retry"))}</button></div>`;
     box.querySelector("#den-pair-new").addEventListener("click", begin);
   };
+  // SEC-2a-UX.2: Windows has no ssh:// app by default, so the link would
+  // do nothing. There the command itself is the step.
+  const windows = onWindows();
   const show = (b) => {
     const term =
-      s.ssh?.name && target
+      s.ssh?.name && target && !windows
         ? `<a class="btn" id="den-pair-term" href="ssh://${esc(login)}">${esc(t("err.signin.openTerminal"))}</a>`
         : "";
     box.innerHTML =
@@ -459,8 +490,14 @@ function wirePair(root, t, s) {
       `<p class="den-pair-wait" id="den-pair-status">${esc(t("err.signin.waiting"))} <span class="mono" id="den-pair-left"></span></p></li>` +
       `</ol>` +
       `<p>${withHost(t, "err.signin.noTerminal", { host })}</p>` +
+      (windows && b.ssh
+        ? `<p class="den-pair-win" id="den-pair-win">${esc(t("err.signin.windowsSteps"))}</p>`
+        : "") +
       cmdLine("den-pair-ssh", b.ssh, t, term) +
       (term
+        ? `<p class="den-pair-nothing" id="den-pair-nothing" role="status" hidden>${esc(t("err.signin.nothingOpened"))}</p>`
+        : "") +
+      (term || (windows && b.ssh && target)
         ? `<p class="den-pair-note" id="den-pair-note">${
             user
               ? withHost(t, "err.signin.sshUserNote", { host, user })
@@ -468,6 +505,7 @@ function wirePair(root, t, s) {
           }</p>`
         : "");
     wireCopy(box, t);
+    wireNothingOpened(box);
   };
   function begin() {
     stop();

package/src/ui/server/public/graph.css

@@ -184,6 +184,27 @@
   vertical-align: middle;
   margin-right: 6px;
 }
+/* Open in Graph for a service outside the View: one line, Show <ws>. */
+.dg-out {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  z-index: 960;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px 12px;
+  width: fit-content;
+  margin: 0 auto;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+}
 .dg-msg {
   padding: 40px;
   color: var(--muted);

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

@@ -262,20 +262,63 @@ export function mountGraph(el, data, pageHooks) {
 
 /** 0.4.18: the panel's Open in Graph (#focus=<repo> or <repo>/<service>), once. */
 let hashFocused = false;
-function focusFromHash() {
-  if (hashFocused || !location.hash.startsWith("#focus=")) return;
-  let id = "";
+/** The id #focus= names, or "" (none, or not decodable). */
+function hashFocusId() {
+  if (!location.hash.startsWith("#focus=")) return "";
   try {
-    id = decodeURIComponent(location.hash.slice(7));
+    return decodeURIComponent(location.hash.slice(7));
   } catch {
-    return;
+    return "";
   }
+}
+function focusFromHash() {
+  if (hashFocused) return;
+  const id = hashFocusId();
+  if (!id) return;
+  host.querySelector(".dg-out")?.remove();
   if (M.byId.has(id)) focusOn({ id });
   else if (M.byRepo.has(id)) focusOn({ repo: id, viaRepo: true });
-  else return;
+  else return outsideNote(id);
   hashFocused = true;
 }
 
+/**
+ * #focus= names a service in a workspace outside the View: one line that
+ * says so, and Show <workspace>, which switches the View the way the top
+ * bar does (the page's hook); the reloaded graph then focuses the card.
+ * The View never switches by itself. `into` is where the line goes: the
+ * graph's viewport, or the empty state's box (graphEmptyNote).
+ */
+function outsideNote(id, into = $(".dg-vp"), h = hooks) {
+  const ws = h.outsideView?.(id);
+  if (!ws) return;
+  const t = (k, v) => window.denShell?.t?.(k, v) ?? k;
+  const note = document.createElement("div");
+  note.className = "dg-out";
+  note.setAttribute("role", "status");
+  note.innerHTML =
+    `<span>${esc(t("graph.outside", { s: id, ws }))}</span>` +
+    `<button type="button" class="den-btn sm" data-show-ws>${esc(t("graph.showWs", { ws }))}</button>`;
+  note.querySelector("[data-show-ws]").addEventListener("click", (e) => {
+    e.currentTarget.disabled = true;
+    void h.showWorkspace?.(ws);
+  });
+  into?.append(note);
+}
+
+/**
+ * 0.4.19: the View's workspace has no services, so no graph is drawn (the
+ * page's "No services in workspace"), and #focus= names a service in
+ * another workspace (Open in Graph right after onboarding): the same line
+ * and Show <workspace> as over a drawn graph, in `el`.
+ */
+export function graphEmptyNote(el, pageHooks) {
+  const id = hashFocusId();
+  if (!el || !id) return;
+  el.querySelector(".dg-out")?.remove();
+  outsideNote(id, el, pageHooks || {});
+}
+
 /** A /api/health update: refresh dots, health lines and the open panel in place. */
 export function graphHealth(results) {
   if (!M || !host?.isConnected) return;

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

@@ -650,15 +650,15 @@ export async function initChangelog() {
   }
 
   const latest = _changelogEntries[0];
+  let info = null;
+  try {
+    info = await fetch("/api/server-info").then((r) => r.json());
+  } catch {
+    /* fall back to the changelog's newest version */
+  }
   const pill = document.getElementById("version-pill");
   if (pill) {
-    let running = null;
-    try {
-      running = (await fetch("/api/server-info").then((r) => r.json())).version;
-    } catch {
-      /* fall back to the changelog's newest version */
-    }
-    const label = versionLabel(running, _changelogEntries);
+    const label = versionLabel(info?.version ?? null, _changelogEntries);
     if (label) pill.querySelector(".v-txt").textContent = label;
   }
 
@@ -667,6 +667,16 @@ export async function initChangelog() {
     lastSeen = localStorage.getItem(LS_CHANGELOG_SEEN);
   } catch {}
 
+  // ON-6: a brand-new Den (no repo yet) opens on its agent and the
+  // approvals: no release notes over them. This version counts as seen.
+  if (info?.fresh === true) {
+    if (latest?.version)
+      try {
+        localStorage.setItem(LS_CHANGELOG_SEEN, latest.version);
+      } catch {}
+    return;
+  }
+
   if (latest?.version && lastSeen !== latest.version) {
     const pip = document.getElementById("v-pip");
     if (pip) pip.style.display = "block";
@@ -902,6 +912,18 @@ async function _switchScope(value, focus, inView) {
   location.reload();
 }
 
+/**
+ * Switch the View to one workspace, as the top bar's Workspace menu does
+ * (the Graph page's Show <workspace>): the CLI default, then the view,
+ * then a reload (the URL's hash stays).
+ */
+export async function switchView(name) {
+  const scope = await fetch("/api/scope")
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null);
+  await _switchScope(name, scope?.focus ?? null, false);
+}
+
 /**
  * Make `name` the CLI default: Local Dev's focus action (POST
  * /api/workspaces `focus`, which writes workspaces.yml and retargets the

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

@@ -86,6 +86,8 @@
     "svp.startHere": "Iniciar agente aquí",
     "svp.openSvc": "Abrir en Servicios",
     "svp.openGraph": "Abrir en Grafo",
+    "graph.outside": "{s} está en {ws}, fuera de esta vista.",
+    "graph.showWs": "Mostrar {ws}",
     "svp.close": "Cerrar",
     "ag.new.folder": "Carpeta (opcional)",
     "ag.new.folderHelp":
@@ -313,6 +315,10 @@
     "err.signin.step2":
       "Esta página inicia sesión sola una vez aprobada. El código caduca en 10 minutos.",
     "err.signin.waiting": "Esperando la aprobación…",
+    "err.signin.windowsSteps":
+      "Abre Windows Terminal o PowerShell, pega esto y pulsa Intro.",
+    "err.signin.nothingOpened":
+      "¿No se abrió nada? Copia el comando de abajo y pégalo en tu app de terminal.",
     "err.signin.noTerminal":
       "¿No tienes una terminal en {host}? Desde este ordenador, ejecuta:",
     "err.signin.openTerminal": "Abrir Terminal",
@@ -396,6 +402,7 @@
     "set.cli.web_port": "Tu puerto web",
     "set.cli.signin": "Inicio de sesión del navegador",
     "set.cli.sudo": "Contraseña de administrador",
+    "set.cli.op_token": "Origen del token de 1Password",
     "set.access.owner": "Propietario",
     "set.access.devices": "Dispositivos vinculados",
     "set.access.waiting": "Dispositivos en espera",
@@ -580,6 +587,8 @@
     "ap.do.repo_add.new":
       'Añadir el repositorio de {path} a un espacio nuevo "{workspace}"',
     "ap.do.service_try": "Iniciar {service}",
+    "ap.do.service_try.activates":
+      "Iniciar {service} (esto activa {workspace})",
     "ap.says": "El agente dice:",
     "ap.review": "Revisar",
     "ap.hide": "Ocultar detalles",
@@ -724,6 +733,35 @@
     "ag.ws": "Espacio de trabajo",
     "ag.pal": "Agentes › {ws} / {name}",
     "ag.palStart": "Iniciar agente…",
+    // ON-6: the server agent (server-agent-page.js, the rail, ⌘K).
+    "n.serverAgent": "Agente de __DEN_TITLE__",
+    "ag.server": "Servidor",
+    "pal.askServer": "Preguntar a __DEN_TITLE__",
+    "sa.sub.fresh":
+      "Vamos a configurar __DEN_TITLE__. Solo lee hasta que permitas un cambio.",
+    "sa.sub":
+      "Para todo lo del servidor: añadir un repo, arreglar un servicio que falla, cambiar un ajuste o explicar qué está en marcha.",
+    "sa.trust": "Claude pregunta si confías en esta carpeta. Elige Sí.",
+    "sa.model": "Modelo",
+    "sa.login":
+      "Si Claude te pide iniciar sesión, hazlo aquí. Después {name} empieza.",
+    "sa.readsOnly":
+      "Solo actúa con las herramientas de __DEN_TITLE__. Cada cambio te lo pregunta antes, en este navegador.",
+    "sa.starting": "Iniciando el agente…",
+    "sa.idle": "{name} no está en marcha.",
+    "sa.start": "Iniciar",
+    "sa.failed": "No se inició: {why}. {cli} agents doctor da más detalles.",
+    "sa.unread":
+      "No se pudo leer el estado del agente. ¿Está en marcha el servidor web?",
+    "sa.none.h": "Aún no hay ningún runtime para el agente",
+    "sa.none":
+      "El agente se ejecuta en una CLI de agente del catálogo de runtimes. Instala una, inicia sesión en ella una vez y vuelve a cargar esta página.",
+    "sa.noTools": "aún no puede usar las herramientas de __DEN_TITLE__",
+    "sa.manual.h": "O configúralo tú",
+    "sa.manual": "Cada paso del agente también es un comando. En un terminal:",
+    "sa.runsOn": "Se ejecuta en",
+    "sa.openAgents": "Abrir en Agentes",
+    "sa.saved": "Guardado. El agente lo usa desde su próximo inicio.",
     "ag.cap":
       "Hasta 4 paneles: se cerró el de {id} para hacer sitio (sigue en marcha)",
     "ag.layout": "Disposición",

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

@@ -83,6 +83,8 @@
     "svp.startHere": "ここでエージェントを開始",
     "svp.openSvc": "サービスで開く",
     "svp.openGraph": "グラフで開く",
+    "graph.outside": "{s} は {ws} にあり、この表示の範囲外です。",
+    "graph.showWs": "{ws} を表示",
     "svp.close": "閉じる",
     "ag.new.folder": "フォルダー（任意）",
     "ag.new.folderHelp":
@@ -302,6 +304,10 @@
     "err.signin.step2":
       "承認されると、このページは自動でサインインします。コードの有効期限は 10 分です。",
     "err.signin.waiting": "承認を待っています…",
+    "err.signin.windowsSteps":
+      "Windows ターミナルか PowerShell を開き、これを貼り付けて Enter キーを押します。",
+    "err.signin.nothingOpened":
+      "何も開きませんでしたか?下のコマンドをコピーして、ターミナルアプリに貼り付けてください。",
     "err.signin.noTerminal":
       "{host} のターミナルがありませんか?このコンピューターで次を実行します:",
     "err.signin.openTerminal": "ターミナルを開く",
@@ -385,6 +391,7 @@
     "set.cli.web_port": "あなたの web ポート",
     "set.cli.signin": "ブラウザのサインイン",
     "set.cli.sudo": "管理者パスワード",
+    "set.cli.op_token": "1Password トークンの取得元",
     "set.access.owner": "オーナー",
     "set.access.devices": "リンク済みデバイス",
     "set.access.waiting": "承認待ちのデバイス",
@@ -566,6 +573,8 @@
     "ap.do.repo_add.new":
       "{path} のリポジトリを新しいワークスペース「{workspace}」に追加",
     "ap.do.service_try": "{service} を起動",
+    "ap.do.service_try.activates":
+      "{service} を起動 ({workspace} を有効にします)",
     "ap.says": "エージェントのコメント:",
     "ap.review": "確認",
     "ap.hide": "詳細を隠す",
@@ -707,6 +716,37 @@
     "ag.ws": "ワークスペース",
     "ag.pal": "エージェント › {ws} / {name}",
     "ag.palStart": "エージェントを開始…",
+    // ON-6: the server agent (server-agent-page.js, the rail, ⌘K).
+    "n.serverAgent": "__DEN_TITLE__ エージェント",
+    "ag.server": "サーバー",
+    "pal.askServer": "__DEN_TITLE__ に聞く",
+    "sa.sub.fresh":
+      "__DEN_TITLE__ をセットアップしましょう。変更を許可するまで、読み取りだけを行います。",
+    "sa.sub":
+      "サーバーのことなら何でも：リポジトリの追加、失敗しているサービスの修正、設定の変更、動いているものの説明。",
+    "sa.trust":
+      "Claude がこのフォルダーを信頼するか尋ねます。「はい」を選んでください。",
+    "sa.model": "モデル",
+    "sa.login":
+      "Claude からログインを求められたら、ここでログインしてください。そのあと {name} が始まります。",
+    "sa.readsOnly":
+      "__DEN_TITLE__ 自身のツールだけで動きます。変更はそのたびに、このブラウザーで先に確認します。",
+    "sa.starting": "エージェントを起動しています…",
+    "sa.idle": "{name} は動いていません。",
+    "sa.start": "開始",
+    "sa.failed":
+      "起動しませんでした：{why}。詳しくは {cli} agents doctor で確認できます。",
+    "sa.unread":
+      "エージェントの状態を読めませんでした。Web サーバーは動いていますか？",
+    "sa.none.h": "エージェントを動かせるランタイムがまだありません",
+    "sa.none":
+      "エージェントはランタイムカタログのエージェント CLI で動きます。1 つインストールして一度ログインし、このページを再読み込みしてください。",
+    "sa.noTools": "まだ __DEN_TITLE__ のツールを使えません",
+    "sa.manual.h": "自分でセットアップする",
+    "sa.manual": "エージェントの各手順はコマンドでもできます。ターミナルで：",
+    "sa.runsOn": "実行するランタイム",
+    "sa.openAgents": "エージェントで開く",
+    "sa.saved": "保存しました。次回の起動から使われます。",
     "ag.cap":
       "ペインは最大 4 つです。{id} のペインを閉じました（実行は続きます）",
     "ag.layout": "レイアウト",

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

@@ -1544,6 +1544,7 @@
           copyToClipboard,
           computePrimaryByRepo,
           setServiceRunner,
+          switchView,
           sudoRun,
           takePendingAction,
           problemCards,
@@ -1552,7 +1553,12 @@
         } from "/header.js";
         import { checkLine } from "/topbar.js";
         import { agentsSectionHtml, mountAgents } from "/agents-section.js";
-        import { mountGraph, graphHealth, graphMaximized } from "/graph.js";
+        import {
+          mountGraph,
+          graphEmptyNote,
+          graphHealth,
+          graphMaximized,
+        } from "/graph.js";
         import {
           mergeWorkspaceViews,
           ownerOfRepos,
@@ -4653,6 +4659,19 @@
         });
 
         const GRAPH_HOOKS = {
+          /**
+           * Open in Graph for a service this graph doesn't draw: the
+           * workspace it is in, outside the View (#focus=, graph.js), or
+           * null when it is in no other workspace.
+           */
+          outsideView: (id) => {
+            const shown = GRAPH_ALL
+              ? GRAPH_ALL.names
+              : [document.getElementById("content")?.dataset.ws || activeWs];
+            return wsOfAddress(id).find((w) => !shown.includes(w)) ?? null;
+          },
+          /** Its Show <workspace>: the top bar's switch (header.js). */
+          showWorkspace: (ws) => switchView(ws),
           maximize: {
             isOn: () => graphMax(),
             toggle: () => setGraphMax(!graphMax()),
@@ -4701,6 +4720,8 @@
           if (!services || services.length === 0) {
             wrap.innerHTML =
               '<div class="graph-empty">No services in workspace</div>';
+            // Open in Graph for a service in another workspace: say where.
+            graphEmptyNote(wrap, GRAPH_HOOKS);
             return;
           }
           mountGraph(

package/src/ui/server/public/persona-ui.css

@@ -345,6 +345,12 @@ dialog.pe-dlg::backdrop {
   color: var(--faint);
   font-weight: 400;
 }
+/* On the chosen row's tint, faint text falls under 4.5:1 (light): the
+   role and a plain tag read in muted there. */
+.pr[aria-checked="true"] .pn .role,
+.pr[aria-checked="true"] .tagx:not(.warn, .src-local, .src-distribution, .src-hub) {
+  color: var(--muted);
+}
 .pr .pd {
   grid-column: 2 / 4;
   font-size: 12.5px;