@celestia-island/hikari 0.55.136 → 0.55.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.136",
+  "version": "0.55.138",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkSelect.test.tsx

@@ -85,4 +85,96 @@ describe("HSelect mobile sheet", () => {
 
     app.unmount();
   });
+
+  it("consumes Escape while the panel is open so hosting dialogs stay put", async () => {
+    // The trigger commonly renders inside a dialog that closes on
+    // bubbled Escape (HkModal/HkDrawer). One press must close ONLY the
+    // dropdown; with the dropdown already closed the key bubbles on so
+    // the dialog's own Escape semantics are untouched.
+    setViewportWidth(1280);
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const dialogKeydowns: KeyboardEvent[] = [];
+    host.addEventListener("keydown", (ev) => dialogKeydowns.push(ev as KeyboardEvent));
+
+    const app = createApp({
+      render: () =>
+        h("div", { onKeydown: () => {} }, [
+          h(HSelect, {
+            modelValue: "",
+            "onUpdate:modelValue": () => {},
+            options: [
+              { value: "a", label: "Option A" },
+              { value: "b", label: "Option B" },
+            ],
+          }),
+        ]),
+    });
+    app.mount(host);
+    await nextTick();
+
+    const trigger = host.querySelector<HTMLButtonElement>(".hk-select-trigger")!;
+
+    // Panel open: Escape closes it AND is consumed.
+    trigger.click();
+    await nextTick();
+    const escapeOpen = new KeyboardEvent("keydown", {
+      key: "Escape", bubbles: true, cancelable: true,
+    });
+    trigger.dispatchEvent(escapeOpen);
+    await nextTick();
+    expect(escapeOpen.defaultPrevented).toBe(true);
+    expect(dialogKeydowns).toHaveLength(0);
+
+    // Panel closed: the same key bubbles to the hosting dialog.
+    const escapeClosed = new KeyboardEvent("keydown", {
+      key: "Escape", bubbles: true, cancelable: true,
+    });
+    trigger.dispatchEvent(escapeClosed);
+    await nextTick();
+    expect(escapeClosed.defaultPrevented).toBe(false);
+    expect(dialogKeydowns).toHaveLength(1);
+
+    app.unmount();
+    host.remove();
+  });
+
+  it("titles the opened surface from panelTitle without a visible label", async () => {
+    // Consumers whose visible label lives outside the field (a titled
+    // row) still need the mobile sheet header / popout a11y name; an
+    // untitled surface registers an unnamed blocking layer on phones.
+    setViewportWidth(375);
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const app = createApp({
+      render: () =>
+        h(HSelect, {
+          modelValue: "",
+          "onUpdate:modelValue": () => {},
+          panelTitle: "What this screen shows",
+          options: [
+            { value: "a", label: "Option A" },
+            { value: "b", label: "Option B" },
+          ],
+        }),
+    });
+    app.mount(el);
+    await nextTick();
+
+    // No visible field label rendered above the trigger.
+    expect(document.querySelector(".hk-select-label")).toBeNull();
+
+    const trigger = document.querySelector<HTMLButtonElement>(".hk-select-trigger")!;
+    trigger.click();
+    await nextTick();
+
+    const title = document.querySelector<HTMLElement>(".hk-select-sheet-title");
+    expect(title?.textContent?.trim()).toBe("What this screen shows");
+    // The sheet panel is the a11y-named dialog for the surface.
+    const panel = document.querySelector<HTMLElement>(".hk-select-sheet-panel");
+    expect(panel?.getAttribute("aria-label")).toBe("What this screen shows");
+
+    app.unmount();
+    el.remove();
+  });
 });

package/src/components/HkSelect.tsx

@@ -30,6 +30,15 @@ export default defineComponent({
   props: {
     modelValue: { type: String, default: "" },
     label: { type: String, default: undefined },
+    /**
+     * Title for the OPENED surface only (mobile sheet header, desktop
+     * popout's a11y name, popup-manager breadcrumb layer) — without
+     * rendering the visible field `label`. Consumers whose visible label
+     * lives elsewhere (a titled row around the field) pass this so the
+     * surface is not registered untitled; resolution order is
+     * panelTitle, then `label`, then empty (the historic behaviour).
+     */
+    panelTitle: { type: String, default: undefined },
     placeholder: { type: String, default: "" },
     error: { type: String, default: undefined },
     disabled: { type: Boolean, default: false },
@@ -100,6 +109,18 @@ export default defineComponent({
             normalizedOptions.value.length;
         }
       } else if (e.key === "Escape") {
+        // Consume the key ONLY when it actually closed something: the
+        // trigger commonly renders inside a dialog surface (HkModal and
+        // HkDrawer close on bubbled Escape), and one press must mean one
+        // thing — close the dropdown, not the dropdown AND the hosting
+        // dialog. The panel surface itself stops propagation for the
+        // same reason (HkSelectPanel's onSurfaceEscape); with the panel
+        // closed the key bubbles on as before, so the hosting dialog's
+        // own Escape semantics are untouched.
+        if (isOpen.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
         isOpen.value = false;
       }
     }
@@ -182,7 +203,7 @@ export default defineComponent({
           open={isOpen.value}
           onUpdate:open={(v: boolean) => { isOpen.value = v; }}
           anchorRef={triggerRef.value ?? null}
-          title={props.label ?? ""}
+          title={props.panelTitle ?? props.label ?? ""}
           placement="bottom-start"
           offset={4}
           onKeydown={onPopoutKeydown}

package/src/components/HkStatusBar.test.tsx

@@ -1,7 +1,9 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, h, nextTick, ref } from "vue";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 
-import { HkStatusBar } from "./HkStatusBar";
+import { HkStatusBar, hkMergeVersionDisplay, hkParseIdentity } from "./HkStatusBar";
 import type { HkConnectionInfo } from "./HkConnectionInfo";
 
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
@@ -55,6 +57,7 @@ const INFO: HkConnectionInfo = {
 };
 
 afterEach(() => {
+  vi.restoreAllMocks();
   for (const { app, container } of mounts.splice(0)) {
     app.unmount();
     container.remove();
@@ -64,17 +67,32 @@ afterEach(() => {
 
 describe("HkStatusBar", () => {
   it("suppresses a build hash the version line already shows, keeps drift visible", async () => {
-    // Display-layer dedup (2026-10-10): the family version line ends with
-    // `::<hash7>`, so appending the SAME commit — bare hash7 or a
-    // `<branch>::<hash7>` stamp — printed the commit twice (the engine-row
-    // bug). A DIFFERENT commit stays visible: that IS the drift signal.
+    // Display-layer dedup, set-based since 2026-10-11: the version line
+    // and the build stamp are two INDEPENDENT facts, and the merge keys
+    // every token by its commit (separator- and case-agnostic) through a
+    // set — a token whose key is already shown cannot render again, BY
+    // CONSTRUCTION, in either separator generation. A DIFFERENT commit
+    // stays visible: that IS the drift signal. The last case is the
+    // live 2026-10-11 production pair (single-colon health line against
+    // the legacy `::` webui stamp) that printed the panel identity
+    // twice on demo.dev.cw.
     const cases: Array<{ version: string; hash: string; expect: string }> = [
+      { version: "0.1.0 master:d423747", hash: "d423747", expect: "0.1.0 master:d423747" },
+      { version: "0.1.0 master:d423747", hash: "master:d423747", expect: "0.1.0 master:d423747" },
+      { version: "0.1.0 master:d423747", hash: "master::d423747", expect: "0.1.0 master:d423747" },
       { version: "0.1 master::d423747", hash: "d423747", expect: "0.1 master::d423747" },
       { version: "0.1 master::d423747", hash: "master::d423747", expect: "0.1 master::d423747" },
+      { version: "0.1 master::d423747", hash: "master:d423747", expect: "0.1 master::d423747" },
       { version: "0.1 master::d423747", hash: "badd902", expect: "0.1 master::d423747 badd902" },
       { version: "0.1 master::d423747", hash: "feat/x::badd902", expect: "0.1 master::d423747 feat/x::badd902" },
+      { version: "0.1.0 master:d423747", hash: "master:badd902", expect: "0.1.0 master:d423747 master:badd902" },
       { version: "0.1.284", hash: "d423747", expect: "0.1.284 d423747" },
       { version: "0.1.52", hash: "EDW62Q", expect: "0.1.52 EDW62Q" },
+      {
+        version: "0.1.0 feat/model-usage-selfhosted:770f625",
+        hash: "feat/model-usage-selfhosted::770f625",
+        expect: "0.1.0 feat/model-usage-selfhosted:770f625",
+      },
     ];
     for (const { version, hash, expect: expected } of cases) {
       const container = document.createElement("div");
@@ -90,13 +108,51 @@ describe("HkStatusBar", () => {
       });
       app.mount(container);
       await nextTick();
-      const row = container.querySelector<HTMLElement>(".s-status-bar-version")!;
+      // The static layer carries the merged text exactly once; the
+      // marquee overlay copies are the scrolling mechanism, not content.
+      const row = container.querySelector<HTMLElement>(".s-status-bar-version__static")!;
       expect(row.textContent, `${version} + ${hash}`).toBe(expected);
       app.unmount();
       container.remove();
     }
   });
 
+  it("merges version identities duplicate-free by construction (hkMergeVersionDisplay)", () => {
+    // The set guarantee, exercised at the unit level: whatever the
+    // inputs look like — repeated tokens inside one line, mixed
+    // separators, case drift — a key already seen never renders again.
+    expect(hkMergeVersionDisplay("0.1.0 master:abc1234", undefined)).toBe("0.1.0 master:abc1234");
+    expect(hkMergeVersionDisplay("0.1.0", "master:abc1234")).toBe("0.1.0 master:abc1234");
+    // The same commit twice inside ONE line (defensive: a chatty server
+    // concatenating its own stamp).
+    expect(hkMergeVersionDisplay("0.1.0 master:abc1234 master:abc1234", undefined))
+      .toBe("0.1.0 master:abc1234");
+    // Cross-separator + case-folded: same commit, either generation.
+    expect(hkMergeVersionDisplay("0.1.0 a:1b2c3d4", "a::1B2C3D4")).toBe("0.1.0 a:1b2c3d4");
+    // Same commit under a different branch label: the commit IS the
+    // identity — the second label names the same atom and adds nothing.
+    expect(hkMergeVersionDisplay("0.1.0 feat/x:1b2c3d4", "master::1b2c3d4"))
+      .toBe("0.1.0 feat/x:1b2c3d4");
+    // Non-git tokens key by raw text and still cannot duplicate.
+    expect(hkMergeVersionDisplay("0.1.52 EDW62Q", "EDW62Q")).toBe("0.1.52 EDW62Q");
+    expect(hkMergeVersionDisplay("0.1.52", "EDW62Q")).toBe("0.1.52 EDW62Q");
+    // Drift stays visible (the stale-embed signal).
+    expect(hkMergeVersionDisplay("0.1.0 master:1b2c3d4", "badd902"))
+      .toBe("0.1.0 master:1b2c3d4 badd902");
+    // Blank stamps never append a phantom token.
+    expect(hkMergeVersionDisplay("0.1.0", "  ")).toBe("0.1.0");
+    expect(hkMergeVersionDisplay(" 0.1.0 ", "")).toBe("0.1.0");
+  });
+
+  it("parses identity atoms in either separator generation (hkParseIdentity)", () => {
+    expect(hkParseIdentity("feat/x:770f625")).toEqual({ branch: "feat/x", commit: "770f625" });
+    expect(hkParseIdentity("feat/x::770f625")).toEqual({ branch: "feat/x", commit: "770f625" });
+    expect(hkParseIdentity("770F625")).toEqual({ commit: "770f625" });
+    expect(hkParseIdentity("0.1.0")).toBeUndefined();
+    expect(hkParseIdentity("EDW62Q")).toBeUndefined();
+    expect(hkParseIdentity(undefined)).toBeUndefined();
+  });
+
   it("renders extraDetails rows capped at 400px with an ellipsized, title-backed value", async () => {
     const container = mountBar({
       version: "1.2.3",
@@ -170,6 +226,15 @@ describe("HkStatusBar", () => {
     expect(panel, "popover opens on hover").toBeTruthy();
     expect(panel!.textContent).toContain("Protocol");
     expect(panel!.textContent).toContain("HTTP poll");
+    // The card's DEFAULT width is a deliberate 300px (2026-10-11 user
+    // direction: the version/protocol rows read cramped at the old 220px
+    // floor), clamped to the popover viewport budget on narrow phones.
+    // Hooked via data-status-bar-card — firstElementChild would couple
+    // the test to HkPopover's internal panel structure.
+    const card = panel!.querySelector<HTMLElement>("[data-status-bar-card]")!;
+    expect(card.style.minWidth).toBe(
+      "min(300px, calc(100vw - 2 * var(--viewport-gutter, 16px)))",
+    );
   });
 
   it("compact mode collapses the tag to the bare dot with no inline status text", async () => {
@@ -500,4 +565,108 @@ describe("HkStatusBar", () => {
     const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel");
     expect(panel!.querySelector("[data-status-actions]")).toBeNull();
   });
+
+  it("version value cells scroll like a marquee only when the identity overflows", async () => {
+    // 2026-10-11 user direction: long branch identities must not wrap or
+    // stretch the footer — the two version positions become marquee
+    // windows riding the SHARED HkPlaceholderMarquee (the input
+    // placeholder's overflow strategy, consumed as-is). Static layer
+    // while the text fits; ghost + scrolling strip once it overflows.
+    const LONG = "0.1.0 feat/model-usage-selfhosted:770f625";
+    const container = mountBar({
+      version: LONG,
+      engineVersion: "9.8.7",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+    });
+    await nextTick();
+    // Fitting state (jsdom lays out nothing): the static layer shows the
+    // merged text, the marquee stays a hidden single-copy probe, no
+    // overflow flag, and the title keeps the hover copy.
+    const cell = container.querySelector<HTMLElement>(".s-status-bar-version")!;
+    expect(cell.querySelector(".s-status-bar-version__static")!.textContent).toBe(LONG);
+    expect(cell.querySelector(".hk-placeholder-marquee--hidden"), "hidden probe").toBeTruthy();
+    expect(cell.hasAttribute("data-overflowing")).toBe(false);
+    expect(cell.title).toBe(LONG);
+
+    // Overflow: the copy (500px) outgrows the window (200px) — the cell
+    // flips to the marquee: overflow flag on, strip scrolls with the
+    // measured loop geometry, three copies for the seamless wrap.
+    const host = cell.querySelector<HTMLElement>(".hk-placeholder-marquee")!;
+    const copy = cell.querySelector<HTMLElement>(".hk-placeholder-marquee__copy")!;
+    Object.defineProperty(host, "clientWidth", { configurable: true, get: () => 200 });
+    vi.spyOn(copy, "getBoundingClientRect").mockReturnValue({ width: 500 } as DOMRect);
+    (host as HTMLElement & {
+      __vueParentComponent?: { exposed?: { measure?(): void } };
+    }).__vueParentComponent?.exposed?.measure?.();
+    await nextTick();
+    expect(cell.hasAttribute("data-overflowing")).toBe(true);
+    const strip = cell.querySelector<HTMLElement>(".hk-placeholder-marquee__strip")!;
+    expect(strip.className).toContain("hk-placeholder-marquee__strip--scroll");
+    expect(strip.style.getPropertyValue("--hk-marquee-shift")).toBe("-500px");
+    expect(cell.querySelectorAll(".hk-placeholder-marquee__copy").length).toBe(3);
+
+    // Fit again (a shorter identity arrives from the server): the cell
+    // flips back — overflow flag off, probe hidden again.
+    vi.spyOn(copy, "getBoundingClientRect").mockReturnValue({ width: 100 } as DOMRect);
+    (host as HTMLElement & {
+      __vueParentComponent?: { exposed?: { measure?(): void } };
+    }).__vueParentComponent?.exposed?.measure?.();
+    await nextTick();
+    expect(cell.hasAttribute("data-overflowing")).toBe(false);
+    expect(cell.querySelector(".hk-placeholder-marquee--hidden")).toBeTruthy();
+  });
+
+  it("compact popover version rows are bounded marquee cells with merged-once text", async () => {
+    const container = mountBar({
+      version: "0.1.0 feat/model-usage-selfhosted:770f625",
+      panelBuildHash: "feat/model-usage-selfhosted::770f625",
+      engineVersion: "0.1.0 feat/model-usage-selfhosted:770f625",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+      compact: true,
+    });
+    await nextTick();
+    container
+      .querySelector<HTMLElement>(".s-status-bar-tag")!
+      .dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    // Both the panel and the engine row ride the bounded popover value
+    // cell; the panel pair is the live duplicate fixture — the merged
+    // text renders the identity exactly once in each row.
+    const cells = panel.querySelectorAll<HTMLElement>(".s-status-bar-popover-value .s-status-bar-version");
+    expect(cells.length).toBe(2);
+    for (const c of cells) {
+      expect(c.querySelector(".s-status-bar-version__static")!.textContent)
+        .toBe("0.1.0 feat/model-usage-selfhosted:770f625");
+      expect(c.querySelector(".hk-placeholder-marquee"), "marquee overlay wired").toBeTruthy();
+    }
+  });
+
+  it("pins the status-bar marquee window contract in admin-tokens.scss", () => {
+    // Extraction self-check: the selector list form
+    // (`.s-status-bar-version, .s-status-bar-version-sep {`) must NOT be
+    // the match — the rule asserted here is the dedicated block.
+    const scss = readFileSync(resolve(__dirname, "../styles/admin-tokens.scss"), "utf8");
+    const versionRule = /\.s-status-bar-version\s*\{[^}]*\}/.exec(scss)?.[0] ?? "";
+    expect(versionRule, "dedicated .s-status-bar-version rule exists").toContain("max-width: min(40vw, 24rem)");
+    // inline-flex keeps a text baseline for the grid's align-items:
+    // baseline — an overflow:hidden block would sink the row.
+    expect(versionRule).toContain("display: inline-flex");
+    expect(versionRule).toContain("overflow: hidden");
+    // Ghost handover: the static layer keeps layout + a11y, only the
+    // paint moves to the scrolling overlay.
+    expect(scss).toContain(".s-status-bar-version[data-overflowing] .s-status-bar-version__static");
+    expect(scss).toMatch(/\.s-status-bar-version\[data-overflowing\][^{]*\{[^}]*opacity:\s*0/s);
+    // Measurement parity: the overlay must draw in the cell's own
+    // typography, or the overflow flip fires at the wrong width.
+    expect(scss).toContain(".s-status-bar-version .hk-placeholder-marquee");
+    expect(scss).toMatch(/\.s-status-bar-version \.hk-placeholder-marquee\s*\{[^}]*font-size:\s*inherit/s);
+    // Popover bound: a long identity scrolls inside the ~300px card
+    // instead of stretching it.
+    const popoverRule = /\.s-status-bar-popover-value\s*\{[^}]*\}/.exec(scss)?.[0] ?? "";
+    expect(popoverRule, "popover value cell bound exists").toContain("max-width: min(16rem, 60vw)");
+    expect(scss).toMatch(/\.s-status-bar-popover-value \.s-status-bar-version\s*\{[^}]*max-width:\s*100%/s);
+  });
 });

package/src/components/HkStatusBar.tsx

@@ -8,6 +8,7 @@ import HPopover from "./HkPopover";
 import HkButton from "./HkButton";
 import type { HkConnectionInfo } from "./HkConnectionInfo";
 import { HkCountdownDigit } from "./HkCountdownDigit";
+import { HkPlaceholderMarquee } from "./HkPlaceholderMarquee";
 
 /**
  * HkStatusBar — connection + version status pill for app footers.
@@ -27,6 +28,13 @@ import { HkCountdownDigit } from "./HkCountdownDigit";
  * Styling rides the shared `s-status-bar*` classes from
  * `styles/admin-tokens.scss` (the `[data-compact]` rules hide the inline
  * version block); everything else is inline.
+ *
+ * The two version values (panel row, engine row) are merged ONCE from
+ * the raw facts via hkMergeVersionDisplay — the single set-based,
+ * duplicate-free-by-construction rule for the whole family — and each
+ * renders in an HkVersionValue cell: static text that hands its paint
+ * over to the shared HkPlaceholderMarquee scrolling window when a long
+ * branch identity outgrows the cell (2026-10-11 user direction).
  */
 /** Locale-aware region name: the political-name i18n keys first (they
  * carry the deliberate political naming per language, e.g. zh-Hans
@@ -66,37 +74,105 @@ function qualityIcon(quality: string, tier: string, isLocalhost: boolean, size:
 }
 
 /**
- * The commit a family version line ends with (`0.1 master::d423747`),
- * when it carries one. Lowercased for comparison.
+ * One git identity atom: a commit, optionally labeled by its branch.
+ * `feat/x:770f625`, the legacy `feat/x::770f625`, and a bare `770f625`
+ * all carry the SAME commit — the commit IS the identity (2026-10-08
+ * family direction); branch labels are names for it.
  */
-function versionLineCommit(v: string): string | undefined {
-  return v.match(/::([0-9a-f]{7,40})$/i)?.[1]?.toLowerCase();
+export interface HkVersionIdentity {
+  branch?: string;
+  commit: string;
 }
 
-/** The commit a build stamp carries — a bare hash7 or a `<branch>::<hash7>`
- * stamp. Non-git stamps (retired Crockford tokens) carry none and always
- * stay visible; they can never be shown "already". */
-function stampCommit(hash: string): string | undefined {
-  const stamped = hash.match(/^(\S+)::([0-9a-f]{7,40})$/i)?.[2];
-  return stamped?.toLowerCase() ?? (/^[0-9a-f]{7,40}$/i.test(hash) ? hash.toLowerCase() : undefined);
+/** `<branch>:<hash7..40>` / legacy `<branch>::<hash>` / bare `<hash>`.
+ * Both separators count: the family narrowed `::` → `:` on 2026-10-11
+ * and transition-window binaries still speak either shape. Non-git
+ * tokens (retired Crockford chunk stamps like `EDW62Q`) carry no commit
+ * and return undefined — they can never be "already shown". */
+const STAMP_RE = /^(\S+?):+([0-9a-f]{7,40})$/i;
+const BARE_COMMIT_RE = /^[0-9a-f]{7,40}$/i;
+
+export function hkParseIdentity(token: string | undefined): HkVersionIdentity | undefined {
+  if (!token) return undefined;
+  const labeled = token.match(STAMP_RE);
+  if (labeled) return { branch: labeled[1], commit: labeled[2].toLowerCase() };
+  if (BARE_COMMIT_RE.test(token)) return { commit: token.toLowerCase() };
+  return undefined;
 }
 
-function fmtVer(v: string, hash?: string): string {
-  // Display-layer dedup (2026-10-10 family direction): a hash whose commit
-  // the version line already names says nothing new — printing it twice was
-  // the status-bar engine-row bug. Drift (a different commit) stays visible:
-  // that IS the stale-embed signal.
-  if (hash) {
-    const shown = versionLineCommit(v);
-    const stamp = stampCommit(hash);
-    if (shown === undefined || stamp === undefined || shown !== stamp) {
-      return `${v} ${hash}`;
-    }
-    return v;
+/**
+ * Canonical display merge for a `<version line> + <build stamp>` pair —
+ * the ONE rule every identity surface consumes (status bar rows, the
+ * hosts' About dialogs; import this instead of re-deriving it). The two
+ * inputs are independent facts (the served version line and the
+ * client/stamp), so a plain concatenation can print the same commit
+ * twice.
+ *
+ * The merge is SET-BASED and therefore duplicate-free BY CONSTRUCTION:
+ * every whitespace token of the version line, then the stamp, is keyed —
+ * git tokens by their commit (case-folded, separator-agnostic), non-git
+ * tokens by their raw text — and a key already in the set is dropped.
+ * No pair of inputs, in either separator generation, can render one
+ * identity twice. A stamp whose commit the version line already names
+ * adds nothing (the 2026-10-11 seam: single-colon line against legacy
+ * `::` stamp and vice versa); a DIFFERENT commit always stays visible,
+ * because that drift IS the stale-embed signal.
+ */
+export function hkMergeVersionDisplay(version: string, hash?: string): string {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  const keyOf = (token: string): string => {
+    const id = hkParseIdentity(token);
+    return id ? `c:${id.commit}` : `t:${token.toLowerCase()}`;
+  };
+  for (const token of version.trim().split(/\s+/)) {
+    if (!token) continue;
+    const key = keyOf(token);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(token);
+  }
+  const stamp = hash?.trim();
+  if (stamp) {
+    const key = keyOf(stamp);
+    if (!seen.has(key)) out.push(stamp);
   }
-  return v;
+  return out.join(" ");
 }
 
+/**
+ * One version value cell: the static text plus the shared
+ * HkPlaceholderMarquee layered over it (the upstream overflow strategy,
+ * consumed as-is — nothing is re-invented here). While the text fits,
+ * the static layer shows and the marquee stays a hidden measuring
+ * probe; once it overflows the window (long branch names), the static
+ * layer turns into a transparent layout ghost (opacity, so the text
+ * stays in the a11y tree; `title` keeps the hover copy) and the marquee
+ * scrolls the text like a storefront sign. Pure-CSS compositor motion;
+ * reduced-motion users get a parked first copy (the component's own
+ * media handling).
+ */
+const HkVersionValue = defineComponent({
+  name: "HkVersionValue",
+  props: { text: { type: String, required: true } },
+  setup(props) {
+    const overflowing = ref(false);
+    return () => (
+      <span
+        class="s-status-bar-version"
+        data-overflowing={overflowing.value || undefined}
+        title={props.text}
+      >
+        <span class="s-status-bar-version__static">{props.text}</span>
+        <HkPlaceholderMarquee
+          text={props.text}
+          onOverflowChange={(v: boolean) => { overflowing.value = v; }}
+        />
+      </span>
+    );
+  },
+});
+
 export const HkStatusBar = defineComponent({
   name: "HkStatusBar",
   props: {
@@ -323,12 +399,15 @@ export const HkStatusBar = defineComponent({
         : Boolean(actionVnodes);
       const hasActionsRow = showRetryButton || hasHostActions;
 
-      const pv = fmtVer(props.version, props.panelBuildHash);
+      const pv = hkMergeVersionDisplay(props.version, props.panelBuildHash);
       const ev = props.engineVersion;
       // Version block: panel version on the first row, engine version on
       // the second. The value container is a two-column grid (label column
       // + value column), so both rows share one true left edge — no
-      // separator, no mid-token wrapping, at any footer width.
+      // separator, no mid-token wrapping, at any footer width. Each value
+      // cell is an HkVersionValue: merged ONCE above (set semantics — see
+      // hkMergeVersionDisplay), rendered once, marquee-scrolled only when
+      // the identity outgrows the window.
 
       const tagClass = [
         "s-status-bar-tag",
@@ -345,7 +424,7 @@ export const HkStatusBar = defineComponent({
             role="button"
             tabindex={0}
             aria-label={props.compact
-              ? `${statusText} · ${pv}${ev ? ` · ${fmtVer(ev, props.engineBuildHash)}` : ""}`
+              ? `${statusText} · ${pv}${ev ? ` · ${hkMergeVersionDisplay(ev, props.engineBuildHash)}` : ""}`
               : undefined}
             onMouseenter={onTagEnter}
             onMouseleave={onTagLeave}
@@ -365,11 +444,11 @@ export const HkStatusBar = defineComponent({
             }} />
             <span class="s-status-bar-tag-value">
               <span class="s-status-bar-tag-label">{t("hikari::statusBar.panel", "Panel")}</span>
-              <span class="s-status-bar-version">{pv}</span>
+              <HkVersionValue text={pv} />
               {ev && (
                 <>
                   <span class="s-status-bar-tag-label">{t("hikari::statusBar.engine", "Engine")}</span>
-                  <span class="s-status-bar-version">{fmtVer(ev, props.engineBuildHash)}</span>
+                  <HkVersionValue text={hkMergeVersionDisplay(ev, props.engineBuildHash)} />
                 </>
               )}
             </span>
@@ -389,10 +468,16 @@ export const HkStatusBar = defineComponent({
             title={t("hikari::statusBar.panel")}
           >
             <div
+              data-status-bar-card
               onMouseenter={onPopupEnter}
               onMouseleave={onPopupLeave}
               style={{
-                minWidth: "220px", padding: "10px 14px",
+                // 300px default floor (2026-10-11 user direction: the
+                // version/protocol rows read cramped at the old 220px),
+                // clamped to the popover's own viewport budget so a
+                // 320px-class phone never spills past the glass.
+                minWidth: "min(300px, calc(100vw - 2 * var(--viewport-gutter, 16px)))",
+                padding: "10px 14px",
                 fontSize: "0.75rem", lineHeight: 1.6,
                 color: "rgb(var(--color-text))",
               }}
@@ -434,13 +519,23 @@ export const HkStatusBar = defineComponent({
                       <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
                         <Monitor size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
                         <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.panel", "Panel")}</span>
-                        <span style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})` }}>{pv}</span>
+                        <span
+                          class="s-status-bar-popover-value"
+                          style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})` }}
+                        >
+                          <HkVersionValue text={pv} />
+                        </span>
                       </div>
                       {ev && (
                         <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
                           <Cog size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
                           <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.engine", "Engine")}</span>
-                          <span style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})` }}>{fmtVer(ev, props.engineBuildHash)}</span>
+                          <span
+                            class="s-status-bar-popover-value"
+                            style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})` }}
+                          >
+                            <HkVersionValue text={hkMergeVersionDisplay(ev, props.engineBuildHash)} />
+                          </span>
                         </div>
                       )}
                     </>

package/src/index.ts

@@ -853,7 +853,8 @@ export { HkSettingsSub as HkSettingsSub } from "./components/HkSettingsDialog";
 export { HkSettingsHint as HkSettingsHint } from "./components/HkSettingsDialog";
 export { HkCookieConsent as HkCookieConsent } from "./components/HkCookieConsent";
 export { HkAttachmentModal as HkAttachmentModal } from "./components/HkAttachmentModal";
-export { HkStatusBar as HkStatusBar } from "./components/HkStatusBar";
+export { HkStatusBar as HkStatusBar, hkMergeVersionDisplay, hkParseIdentity } from "./components/HkStatusBar";
+export type { HkVersionIdentity } from "./components/HkStatusBar";
 export { HkCountdownDigit as HkCountdownDigit } from "./components/HkCountdownDigit";
 export { HkConnectionStatus as HkConnectionStatus } from "./components/HkConnectionStatus";
 export { HkRichInput as HkRichInput } from "./components/HkRichInput";

package/src/styles/admin-tokens.scss

@@ -182,6 +182,53 @@
 
 .s-status-bar-version {
   white-space: nowrap;
+  /* Version cell = marquee window (2026-10-11 user direction): long
+     branch identities scroll inside the cell (HkPlaceholderMarquee
+     layered by HkStatusBar's HkVersionValue) instead of stretching the
+     footer or wrapping. inline-flex (not block) so the static text
+     layer keeps contributing a text baseline to the parent grid's
+     align-items: baseline — an overflow:hidden block would synthesize
+     its baseline from the bottom edge and visibly sink the row. */
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  max-width: min(40vw, 24rem);
+}
+
+.s-status-bar-version__static {
+  /* The ghost state (marquee owns the window): opacity keeps the text
+     in the layout and the a11y tree; only the paint is handed over. */
+  min-width: 0;
+}
+
+.s-status-bar-version[data-overflowing] .s-status-bar-version__static {
+  opacity: 0;
+}
+
+/* The marquee overlay must measure and draw in the cell's own
+   typography — the placeholder defaults (base size, muted color, 1.5
+   line box) are input-context styling, overridden here. */
+.s-status-bar-version .hk-placeholder-marquee {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+/* Compact-popover value cell: bounded so a long branch identity scrolls
+   inside the ~300px card instead of stretching it; the label keeps its
+   natural width on the left (marginRight:auto on the row). */
+.s-status-bar-popover-value {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  max-width: min(16rem, 60vw);
+}
+
+.s-status-bar-popover-value .s-status-bar-version {
+  max-width: 100%;
 }
 
 /* Compact traffic light (logged-in mobile footers): drop the version