@celestia-island/hikari 0.55.178 → 0.55.179

package/README.md

@@ -9,6 +9,31 @@ npm install @celestia-island/hikari
 pnpm add @celestia-island/hikari
 ```
 
+## Build Requirements
+
+This package is a **source distribution**: the tarball ships the TypeScript,
+TSX and SCSS sources under `src/`, and your build pipeline compiles them like
+first-party code. Nothing is pre-bundled, so consuming projects must provide:
+
+| Requirement | Why |
+| --- | --- |
+| `vue` (peer dependency) | Components are written for Vue 3 and import Vue at runtime. |
+| TypeScript-aware bundler | Component and composable entry points resolve to `.ts`/`.tsx` sources (`main`/`types` → `src/index.ts`). |
+| Vue JSX support | Components are written as `.tsx` render functions, not SFCs — enable `@vitejs/plugin-vue-jsx` (or your bundler's equivalent). |
+| `sass` in your toolchain | Styling is distributed as SCSS; `@celestia-island/hikari/styles` resolves to an `.scss` aggregate your bundler compiles. Install `sass` as a devDependency of the consuming project. |
+
+Minimal Vite configuration:
+
+```ts
+// vite.config.ts
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+export default {
+  plugins: [vue(), vueJsx()],
+}
+```
+
 ## Usage
 
 Import styles once in your app entry point:
@@ -49,6 +74,16 @@ import { HkButton, HkCard, HkInput } from "@celestia-island/hikari";
 - **HkAvatar** — image/fallback avatar
 - And more...
 
+## Development
+
+`packages/vue` is its own pnpm workspace. After `corepack pnpm install`:
+
+```bash
+pnpm test        # Vitest suite (colocated *.test.ts(x), happy-dom)
+pnpm test:watch  # Vitest in watch mode
+pnpm lint        # vue-tsc --noEmit type check
+```
+
 ## License
 
 Licensed under the [Synthetic Source License (SySL), Version 1.0](../../LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.178",
+  "version": "0.55.179",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",
@@ -47,7 +47,9 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit",
     "build:docs": "vite build",
-    "lint": "echo ok",
+    "lint": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepublishOnly": "vue-tsc --noEmit"
   },
   "peerDependencies": {

package/src/animation/registerAnimations.test.ts

@@ -61,6 +61,7 @@ describe("registerAnimations", () => {
     expect(byName.get("hk-status-pill-pulse")?.infinite).toBe(true);
     expect(byName.get("hk-pwd-breathe")?.infinite).toBe(true);
     expect(byName.get("s-nav-item-badge-pulse")?.infinite).toBe(true);
+    expect(byName.get("s-status-bar-reconnecting-breathe")?.infinite).toBe(true);
     expect(byName.get("s-auth-card-in")?.infinite).toBe(false);
     expect(byName.get("hk-rolling-number-up")?.infinite).toBe(false);
     expect(byName.get("hk-modal-breadcrumb-in")?.infinite).toBe(false);

package/src/animation/registerAnimations.ts

@@ -70,6 +70,11 @@ registerCssAnimation("s-auth-card-in");
 // the traffic light's green background blink when a dropped connection
 // comes back.
 registerCssAnimation("s-status-bar-recover-flash");
+// styles/admin-tokens.scss — status-bar in-flight breathe (loops
+// forever): the connecting/reconnecting light's warning tint pulse —
+// a fixed background means a settled state (the gray idle), an
+// in-flight one visibly breathes (2026-10-17 user direction).
+registerCssAnimation("s-status-bar-reconnecting-breathe", { infinite: true });
 // components/HkStatusPill.scss — live-dot pulse (loops forever).
 registerCssAnimation("hk-status-pill-pulse", { infinite: true });
 // components/HkRollingNumber.scss — digit roll-up (plays once, forwards).

package/src/components/HkConnectionStatus.shell.test.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { createApp, h } from "vue";
+import { createApp, h, nextTick, ref } from "vue";
 
-import { HkConnectionStatus } from "./HkConnectionStatus";
+import { HkConnectionStatus, HK_CONNECTION_PROBE } from "./HkConnectionStatus";
 
 /** The shell contract: WITHOUT injections the component never touches
  * the network — the fetch-poll was demoted with the chat kit (the M1
@@ -31,4 +31,70 @@ describe("HkConnectionStatus (shell)", () => {
       globalThis.fetch = holder;
     }
   });
+
+  it("idle pins the light to the resting gray even when the probe reports a fault", () => {
+    // 2026-10-17 user direction: sessionless auth surfaces pin the light
+    // to idle — "not yet logged in" is not a fault — through THIS one
+    // wiring, not a hand-rolled HkStatusBar fork (the fork was what left
+    // the auth popover stuck on its fetching placeholder with no
+    // versions). The probe underneath reports red; the override wins.
+    const probe = {
+      result: ref({
+        connected: false,
+        state: "disconnected" as const,
+        transportTier: "poll",
+        tier: "poll",
+        latencyMs: null,
+        attemptNumber: 1,
+        retryCount: 1,
+        retryTotal: 3,
+        countdown: 0,
+      }),
+      retryNow: vi.fn(),
+    };
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkConnectionStatus, { standalone: true, version: "1.2.3", idle: true, compact: true }),
+    });
+    app.provide(HK_CONNECTION_PROBE, probe);
+    app.mount(container);
+    mounts.push({ app, container });
+    const dot = container.querySelector<HTMLElement>(".s-status-bar-dot")!;
+    expect(dot, "light renders").toBeTruthy();
+    // happy-dom drops inline styles whose value carries var() fallbacks,
+    // so the gray pin rides the compact aria contract: the idle override
+    // turns a faulting probe into "Ready", never "Disconnected".
+    expect(container.querySelector<HTMLElement>(".s-status-bar-tag")!.getAttribute("aria-label"))
+      .toBe("Ready · 1.2.3");
+    // Idle is a settled resting state — clicking the gray light must not
+    // fire a silent probe retry (R3 catch).
+    container.querySelector<HTMLElement>(".s-status-bar-tag")!.click();
+    expect(probe.retryNow).not.toHaveBeenCalled();
+  });
+
+  it("the inert shell shows a definite status with versions but no probe rows", async () => {
+    // No injection: INERT_PROBE's sentinel transportTier is "unknown" —
+    // it must not leak a bare "Protocol unknown" row (which has no
+    // locale key in ANY language) into the popover (R3 catch). The card
+    // keeps the definite status heading + the known versions only.
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () => h(HkConnectionStatus, { standalone: false, version: "1.2.3" }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    await nextTick();
+    container
+      .querySelector<HTMLElement>(".s-status-bar-tag")!
+      .dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    expect(panel.textContent).toContain("Disconnected");
+    expect(panel.textContent).toContain("1.2.3");
+    expect(panel.textContent).not.toContain("Protocol");
+    expect(panel.textContent).not.toContain("unknown");
+  });
 });

package/src/components/HkConnectionStatus.tsx

@@ -65,8 +65,10 @@ const backendStateColor: Record<HkBackendStatus["state"], string> = {
  * HK_CONNECTION_PROBE, that probe (and its retryNow) is used verbatim;
  * without an injection the shell renders an inert unknown state and
  * NEVER touches the network (pinned). Slots:
- * - `left`  — extras after the status tags (e.g. a mock badge)
- * - `right` — extras on the far right (e.g. an engine version tag)
+ * - `left`    — extras after the status tags (e.g. a mock badge)
+ * - `right`   — extras on the far right (e.g. an engine version tag)
+ * - `actions` — forwarded to HkStatusBar's status-row cluster (e.g. the
+ *               hosts' single manual page refresh, 2026-10-11 direction)
  */
 export const HkConnectionStatus = defineComponent({
   name: "HkConnectionStatus",
@@ -77,6 +79,15 @@ export const HkConnectionStatus = defineComponent({
     standalone: { type: Boolean, default: true },
     /** Forwarded to HkStatusBar — collapse to the traffic-light dot. */
     compact: { type: Boolean, default: false },
+    /** Resting override (2026-10-17 user direction): pins the light and
+     *  the status line to the neutral-gray idle state — "the shell is
+     *  alive, no session yet" — regardless of what the injected probe
+     *  reports. Sessionless auth surfaces set it; logged-in surfaces
+     *  never do. Everything else (versions, info rows, actions) keeps
+     *  the ONE wiring — idle hosts no longer hand-roll an HkStatusBar
+     *  copy (that fork is what left the auth popover stuck on its
+     *  fetching placeholder). */
+    idle: { type: Boolean, default: false },
   },
   setup(props, { slots }) {
     // SHELL-ONLY: the network side (WHO polls /api/health and HOW)
@@ -119,7 +130,10 @@ export const HkConnectionStatus = defineComponent({
       };
     });
 
-    const connectionStatus = computed<"connected" | "reconnecting" | "disconnected">(() => {
+    const connectionStatus = computed<"connected" | "reconnecting" | "disconnected" | "idle">(() => {
+      // The idle override wins over the probe: the resting gray light is
+      // a definite statement about the SHELL, not a verdict on the link.
+      if (props.idle) return "idle";
       const s = probe.value.state;
       if (s === "connected") return "connected";
       if (s === "connecting" || s === "reconnecting") return "reconnecting";

package/src/components/HkStatusBar.test.tsx

@@ -173,7 +173,9 @@ describe("HkStatusBar", () => {
     const row = panel!.querySelector('[data-extra-detail="gateway"]');
     expect(row).not.toBeNull();
     expect((row as HTMLElement).style.maxWidth).toBe("400px");
-    const value = panel!.querySelector("span[title]") as HTMLElement;
+    // Scoped to the extra-detail row: the version cells (always in the
+    // popover since the 2026-10-17 wave) are title-bearing spans too.
+    const value = row!.querySelector("span[title]") as HTMLElement;
     expect(value.textContent).toBe("gateway.celestia.world");
     expect(value.title).toBe("gateway.celestia.world");
     expect(value.style.textOverflow).toBe("ellipsis");
@@ -559,7 +561,12 @@ describe("HkStatusBar", () => {
     expect(panel!.querySelector("[data-status-actions]")).toBeNull();
   });
 
-  it("keeps host actions available while connection info is still fetching", async () => {
+  it("without info the popover states a definite status with versions, never a fetching placeholder", async () => {
+    // 2026-10-17 user report: the idle auth pill's popover printed
+    // "Fetching connection info..." forever while its steady gray light
+    // meant a settled state. The info-null branch is RETIRED: the title
+    // row states the definite state and the known versions render up
+    // front; the recovery action stays on that title row.
     const onRefresh = vi.fn();
     const container = document.createElement("div");
     document.body.appendChild(container);
@@ -581,18 +588,108 @@ describe("HkStatusBar", () => {
       .dispatchEvent(new MouseEvent("mouseenter"));
     await nextTick();
     const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
-    // The cluster must live OUTSIDE the info/fetching ternary: an outage
-    // that drops connectionInfo to null is exactly when the recovery
-    // action is most needed. It rides the fetching line's right edge.
     const cluster = panel.querySelector<HTMLElement>("[data-status-actions]");
     expect(cluster, "actions cluster renders without info").toBeTruthy();
-    // Same line as the fetching text: label left, actions right.
-    expect(cluster!.closest("div")!.textContent).toContain("Fetching connection info");
+    // The title row is the DEFINITE state, not a fetching placeholder.
+    expect(cluster!.closest("div")!.textContent).toContain("Disconnected");
+    expect(panel.textContent).not.toContain("Fetching connection info");
+    // Versions are known facts — up front, info or not.
+    expect(panel.querySelectorAll(".s-status-bar-popover-value").length).toBeGreaterThanOrEqual(1);
+    expect(panel.textContent).toContain("1.2.3");
+    // Without probe facts the protocol/network rows stay honest (absent).
+    expect(panel.textContent).not.toContain("Protocol");
     const button = cluster!.querySelector<HTMLButtonElement>("button")!;
     button.click();
     expect(onRefresh).toHaveBeenCalledTimes(1);
   });
 
+  it("renders the version rows in the popover regardless of compact", async () => {
+    // 2026-10-17 user direction: the popover is the details card — the
+    // versions (panel + engine, merged once) show there up front even in
+    // full (non-compact) mode, no longer gated behind `compact`.
+    const container = mountBar({
+      version: "1.2.3 master:49fe7ae",
+      panelBuildHash: "master:49fe7ae",
+      engineVersion: "9.8.7",
+      engineBuildHash: "engine:abcdef0",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+    });
+    await nextTick();
+    tagOf(container).dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    const cells = [...panel.querySelectorAll<HTMLElement>(".s-status-bar-popover-value .s-status-bar-version")]
+      .map((el) => el.querySelector(".s-status-bar-version__static")!.textContent ?? "");
+    // Set-merged once: the build hash the version line already names is
+    // not printed twice in the popover either.
+    expect(cells).toContain("1.2.3 master:49fe7ae");
+    expect(cells).toContain("9.8.7 engine:abcdef0");
+    expect(cells.filter((v) => v.includes("49fe7ae")).length).toBe(1);
+  });
+
+  it("idle renders the resting gray light, the Ready title row, and no reconnecting pulse", async () => {
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "idle",
+      connectionInfo: null,
+    });
+    await nextTick();
+    const tag = tagOf(container);
+    // Steady state: idle must NOT carry the in-flight warning pulse.
+    expect(tag.className).not.toContain("s-status-bar-tag-reconnecting");
+    // happy-dom drops inline styles whose value carries var() fallbacks,
+    // so the gray pin is a source-contract assertion: the idle entry in
+    // the dot color map must name the tertiary (resting gray) token —
+    // the same contract the 2026-10-17 user direction fixed (#815).
+    const source = readFileSync(resolve(__dirname, "./HkStatusBar.tsx"), "utf8");
+    expect(source).toMatch(/idle:\s*"rgb\(var\(--color-text-tertiary/);
+    // The popover states the definite Ready state (the hikari i18n
+    // fallback) with the version row, and offers no protocol/network
+    // facts the idle shell does not have.
+    tag.dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    expect(panel.textContent).toContain("Ready");
+    expect(panel.textContent).toContain("1.2.3");
+    expect(panel.textContent).not.toContain("Protocol");
+    // Idle is a SETTLED state — it must not offer the disconnected-only
+    // "Click to retry" hint (R1 mutation catch: the gate survived, the
+    // pin was missing).
+    expect(panel.textContent).not.toContain("Click to retry");
+  });
+
+  it("pins the in-flight breathe pulse contract in admin-tokens.scss", () => {
+    // 2026-10-17 user direction: a genuinely in-flight (connecting/
+    // reconnecting) light must visibly breathe — a FIXED background
+    // means a settled state, which is the gray idle's job now.
+    // Reduced-motion users keep the steady tint.
+    const scss = readFileSync(resolve(__dirname, "../styles/admin-tokens.scss"), "utf8");
+    const rule = /\.s-status-bar-tag-reconnecting\s*\{[^}]*\}/.exec(scss)?.[0] ?? "";
+    expect(rule, "reconnecting rule carries the breathe animation").toContain("animation:");
+    expect(scss).toContain("@keyframes s-status-bar-reconnecting-breathe");
+    expect(scss).toMatch(
+      /@media[^{]*prefers-reduced-motion[^{]*\{[^@]*?\.s-status-bar-tag-reconnecting\s*\{[^}]*animation:\s*none/s,
+    );
+  });
+
+  it("connecting carries the in-flight pulse class; idle does not", async () => {
+    const connecting = mountBar({
+      version: "1.2.3",
+      connectionStatus: "connecting",
+      connectionInfo: null,
+    });
+    await nextTick();
+    expect(tagOf(connecting).className).toContain("s-status-bar-tag-reconnecting");
+    const idle = mountBar({
+      version: "1.2.3",
+      connectionStatus: "idle",
+      connectionInfo: null,
+    });
+    await nextTick();
+    expect(tagOf(idle).className).not.toContain("s-status-bar-tag-reconnecting");
+  });
+
   it("no actions row when the slot renders nothing (wrapper forwards an empty slot)", async () => {
     const container = document.createElement("div");
     document.body.appendChild(container);

package/src/components/HkStatusBar.tsx

@@ -14,8 +14,13 @@ import { HkPlaceholderMarquee } from "./HkPlaceholderMarquee";
  * (Upstreamed from shittim-chest's plana-legacy layer.)
  *
  * A traffic-light dot plus a two-column-grid version block (panel row,
- * engine row). Hovering/tapping the pill opens an HPopover with the
- * quality icon, latency, retry countdown and protocol/network rows.
+ * engine row). Hovering/tapping the pill opens an HPopover whose title
+ * row is ALWAYS a definite state (Ready/Connected/Connecting/Disconnected)
+ * followed by the version rows — both render with or without probe facts
+ * (2026-10-17 user direction: the popover must never sit on a perpetual
+ * "fetching" placeholder, and the versions show up front). The quality
+ * icon, latency, retry countdown and protocol/network rows join once the
+ * probe supplies them.
  * With `compact` the pill collapses to the BARE DOT only (mobile
  * logged-in footers) — no inline status text next to the light; that
  * label is a standing user directive (asked to be removed repeatedly,
@@ -303,7 +308,10 @@ export const HkStatusBar = defineComponent({
     let touchEchoGuardUntil = 0;
     function onTagClick() {
       if (Date.now() < touchEchoGuardUntil) return;
-      if (props.connectionStatus !== "connected") {
+      // Idle is a SETTLED resting state ("shell alive, no session"), not
+      // a fault — clicking the gray light must not fire a silent retry
+      // (R3 catch: it looked like a dead control doing invisible work).
+      if (props.connectionStatus !== "connected" && props.connectionStatus !== "idle") {
         props.onRetry?.();
       }
     }
@@ -485,140 +493,139 @@ export const HkStatusBar = defineComponent({
                 // 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.
+                // 320px-class phone never spills past the viewport (the
+                // glass chrome eats a few px of the card's inner width
+                // at the very narrow end — cosmetic, bounded, R3-note).
                 minWidth: "min(300px, calc(100vw - 2 * var(--viewport-gutter, 16px)))",
                 padding: "10px 14px",
                 fontSize: "0.75rem", lineHeight: 1.6,
                 color: "rgb(var(--color-text))",
               }}
             >
-              {info ? (
-                <>
-                  <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px", fontWeight: 600, fontSize: "0.8125rem" }}>
-                    {qualityIcon(info.quality || (mode === "connected" ? "good" : "unknown"), tier, info.isLocalhost, 14)}
-                    <span style={{ color: dotColorMap[mode] ?? dotColorMap.disconnected }}>
-                      {statusText}
-                    </span>
-                    {latency !== null && (
-                      <span style={{ marginLeft: "auto", color: latencyColor(latency), fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, fontWeight: 600, fontSize: "0.6875rem" }}>
-                        {latency} ms
-                      </span>
-                    )}
-                    {hasActionsRow && (
-                      <span
-                        data-status-actions
-                        style={{
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: "8px",
-                          // No latency chip to push against: the cluster
-                          // still lands on the row's right edge.
-                          marginLeft: latency !== null ? undefined : "auto",
-                        }}
-                      >
-                        {actionVnodes}
-                      </span>
-                    )}
-                  </div>
-                  {connecting && attempt > 0 && (
-                    <div style={{ display: "flex", alignItems: "center", gap: "4px", color: "rgb(var(--color-warning))", fontSize: "0.6875rem", marginBottom: "4px" }}>
-                      <span>
-                        {t("hikari::statusBar.retrying", "Retrying {retryCount} / {maxRetries}")
-                          .replace("{retryCount}", String(attempt))
-                          .replace("{maxRetries}", String(info.maxRetries > 0 ? info.maxRetries : 3))}
-                      </span>
-                      {countdown > 0 && (
-                        <span style={{ display: "inline-flex", alignItems: "center", gap: "4px", fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, marginLeft: "8px" }}>
-                          <HkCountdownDigit value={countdown} />
-                        </span>
-                      )}
-                    </div>
-                  )}
-                  {mode === "disconnected" && !hasActionsRow && (
-                    // Fallback for hosts without a slot action — and a REAL
-                    // control this time: the original hint was retired
-                    // because its clicks went nowhere (the popover body
-                    // teleports to <body>), so the text now carries the
-                    // retry itself, echo guard included.
-                    <div
-                      role="button"
-                      tabindex={0}
-                      onClick={onRetryButtonClick}
-                      onKeydown={(e: KeyboardEvent) => {
-                        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onRetryButtonClick(); }
-                      }}
-                      style={{ fontStyle: "italic", fontSize: "0.6875rem", marginBottom: "4px", opacity: 0.7, cursor: "pointer" }}
-                    >
-                      {t("hikari::statusBar.clickReconnect", "Click to retry")}
-                    </div>
-                  )}
-                  {props.compact && (
-                    <>
-                      <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
-                          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
-                            class="s-status-bar-popover-value"
-                            style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})` }}
-                          >
-                            <HkVersionValue text={hkMergeVersionDisplay(ev, props.engineBuildHash)} />
-                          </span>
-                        </div>
-                      )}
-                    </>
-                  )}
-                  {tier !== "none" && (
-                    <>
-                  <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-                    <Plug size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
-                    <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.protocol", "Protocol")}</span>
-                    {connecting ? (
-                      <span style={{ color: "rgb(var(--color-warning))" }}>
-                        {t("hikari::statusBar.probing", "Probing...")}
-                      </span>
-                    ) : (
-                      <span>{t(tierLabelKey, tier)}</span>
-                    )}
-                  </div>
-                  <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-                    <Globe size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
-                    <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.network", "Network")}</span>
-                    <span>{regionDisplayName(info.region, locale, t)}{info.asn != null ? ` · AS${info.asn}` : ""}{info.isLocalhost ? " · " + t("hikari::statusBar.local", "Local") : ""}</span>
-                  </div>
-                    </>
-                  )}
-                  {(props.extraDetails ?? []).map((row) => (
-                    <div key={row.key} data-extra-detail={row.key} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "6px", maxWidth: "400px" }}>
-                      <span style={{ opacity: 0.5, flexShrink: 0, display: "inline-flex" }}>{row.icon}</span>
-                      <span style={{ opacity: 0.5, flexShrink: 0, minWidth: "72px", marginRight: "auto" }}>{row.label}</span>
-                      <span title={row.value} style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{row.value}</span>
-                    </div>
-                  ))}
-                </>
-              ) : (
-                <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px" }}>
-                  <span style={{ opacity: 0.5 }}>{t("hikari::statusBar.fetching", "Fetching connection info...")}</span>
-                  {hasActionsRow && (
-                    // An outage that drops connectionInfo to null is exactly
-                    // when the recovery action is most needed — the cluster
-                    // rides the fetching line's right edge.
-                    <span data-status-actions style={{ display: "inline-flex", alignItems: "center", gap: "8px", marginLeft: "auto" }}>
-                      {actionVnodes}
+              {/* The status heading is the popover's title row and it is
+                  ALWAYS a definite state (2026-10-17 user report: the idle
+                  auth pill's popover printed "Fetching connection info..."
+                  forever while its steady gray light meant a settled state —
+                  a genuinely in-flight light pulses the warning tint, it
+                  never rests gray). The old info-null fallback is RETIRED;
+                  the info-dependent rows below simply don't render until
+                  the probe has facts to show. */}
+              <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px", fontWeight: 600, fontSize: "0.8125rem" }}>
+                {qualityIcon(info?.quality || (mode === "connected" ? "good" : "unknown"), tier, info?.isLocalhost ?? false, 14)}
+                <span style={{ color: dotColorMap[mode] ?? dotColorMap.disconnected }}>
+                  {statusText}
+                </span>
+                {latency !== null && (
+                  <span style={{ marginLeft: "auto", color: latencyColor(latency), fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, fontWeight: 600, fontSize: "0.6875rem" }}>
+                    {latency} ms
+                  </span>
+                )}
+                {hasActionsRow && (
+                  <span
+                    data-status-actions
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      // No latency chip to push against: the cluster
+                      // still lands on the row's right edge.
+                      marginLeft: latency !== null ? undefined : "auto",
+                    }}
+                  >
+                    {actionVnodes}
+                  </span>
+                )}
+              </div>
+              {connecting && attempt > 0 && (
+                <div style={{ display: "flex", alignItems: "center", gap: "4px", color: "rgb(var(--color-warning))", fontSize: "0.6875rem", marginBottom: "4px" }}>
+                  <span>
+                    {t("hikari::statusBar.retrying", "Retrying {retryCount} / {maxRetries}")
+                      .replace("{retryCount}", String(attempt))
+                      .replace("{maxRetries}", String(info?.maxRetries && info.maxRetries > 0 ? info.maxRetries : 3))}
+                  </span>
+                  {countdown > 0 && (
+                    <span style={{ display: "inline-flex", alignItems: "center", gap: "4px", fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, marginLeft: "8px" }}>
+                      <HkCountdownDigit value={countdown} />
                     </span>
                   )}
                 </div>
               )}
+              {mode === "disconnected" && !hasActionsRow && (
+                // Fallback for hosts without a slot action — and a REAL
+                // control this time: the original hint was retired
+                // because its clicks went nowhere (the popover body
+                // teleports to <body>), so the text now carries the
+                // retry itself, echo guard included.
+                <div
+                  role="button"
+                  tabindex={0}
+                  onClick={onRetryButtonClick}
+                  onKeydown={(e: KeyboardEvent) => {
+                    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onRetryButtonClick(); }
+                  }}
+                  style={{ fontStyle: "italic", fontSize: "0.6875rem", marginBottom: "4px", opacity: 0.7, cursor: "pointer" }}
+                >
+                  {t("hikari::statusBar.clickReconnect", "Click to retry")}
+                </div>
+              )}
+              {/* Version rows: ALWAYS in the popover (2026-10-17 user
+                  direction — versions are known facts, show them up front
+                  independent of the probe state; the old gate hid them
+                  behind `compact` inside the info branch, which left the
+                  idle auth popover versionless). The inline tag keeps its
+                  own copy; this card is the details surface. */}
+              <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
+                  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
+                    class="s-status-bar-popover-value"
+                    style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})` }}
+                  >
+                    <HkVersionValue text={hkMergeVersionDisplay(ev, props.engineBuildHash)} />
+                  </span>
+                </div>
+              )}
+              {info && tier !== "none" && tier !== "unknown" && (
+                // "unknown" is the inert shell's sentinel tier — no probe
+                // is wired, so there are no transport facts to show and a
+                // bare "Protocol unknown" row would leak (R3 catch).
+                <>
+              <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                <Plug size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
+                <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.protocol", "Protocol")}</span>
+                {connecting ? (
+                  <span style={{ color: "rgb(var(--color-warning))" }}>
+                    {t("hikari::statusBar.probing", "Probing...")}
+                  </span>
+                ) : (
+                  <span>{t(tierLabelKey, tier)}</span>
+                )}
+              </div>
+              <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                <Globe size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
+                <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.network", "Network")}</span>
+                <span>{regionDisplayName(info.region, locale, t)}{info.asn != null ? ` · AS${info.asn}` : ""}{info.isLocalhost ? " · " + t("hikari::statusBar.local", "Local") : ""}</span>
+              </div>
+                </>
+              )}
+              {info && (props.extraDetails ?? []).map((row) => (
+                <div key={row.key} data-extra-detail={row.key} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "6px", maxWidth: "400px" }}>
+                  <span style={{ opacity: 0.5, flexShrink: 0, display: "inline-flex" }}>{row.icon}</span>
+                  <span style={{ opacity: 0.5, flexShrink: 0, minWidth: "72px", marginRight: "auto" }}>{row.label}</span>
+                  <span title={row.value} style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{row.value}</span>
+                </div>
+              ))}
             </div>
           </HPopover>
         </>

package/src/i18n/locales/ar/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "جارٍ الاتصال...",
     "hikari::statusBar.disconnected": "غير متصل",
     "hikari::statusBar.engine": "المحرك",
-    "hikari::statusBar.fetching": "جارٍ جلب معلومات الاتصال...",
     "hikari::statusBar.latency": "زمن الاستجابة",
     "hikari::statusBar.local": "محلي",
     "hikari::statusBar.network": "الشبكة",

package/src/i18n/locales/de/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "Verbinde...",
     "hikari::statusBar.disconnected": "Getrennt",
     "hikari::statusBar.engine": "Engine",
-    "hikari::statusBar.fetching": "Verbindungsinformationen werden geladen...",
     "hikari::statusBar.latency": "Latenz",
     "hikari::statusBar.local": "Lokal",
     "hikari::statusBar.network": "Netzwerk",

package/src/i18n/locales/en/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "Connecting...",
     "hikari::statusBar.disconnected": "Disconnected",
     "hikari::statusBar.engine": "Engine",
-    "hikari::statusBar.fetching": "Fetching connection info...",
     "hikari::statusBar.latency": "Latency",
     "hikari::statusBar.local": "Local",
     "hikari::statusBar.network": "Network",

package/src/i18n/locales/es/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "Conectando...",
     "hikari::statusBar.disconnected": "Desconectado",
     "hikari::statusBar.engine": "Motor",
-    "hikari::statusBar.fetching": "Obteniendo información de conexión...",
     "hikari::statusBar.latency": "Latencia",
     "hikari::statusBar.local": "Local",
     "hikari::statusBar.network": "Red",

package/src/i18n/locales/fr/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "Connexion...",
     "hikari::statusBar.disconnected": "Déconnecté",
     "hikari::statusBar.engine": "Moteur",
-    "hikari::statusBar.fetching": "Récupération des informations de connexion...",
     "hikari::statusBar.latency": "Latence",
     "hikari::statusBar.local": "Local",
     "hikari::statusBar.network": "Réseau",

package/src/i18n/locales/ja/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "接続中...",
     "hikari::statusBar.disconnected": "切断",
     "hikari::statusBar.engine": "エンジン",
-    "hikari::statusBar.fetching": "接続情報を取得中...",
     "hikari::statusBar.latency": "レイテンシ",
     "hikari::statusBar.local": "ローカル",
     "hikari::statusBar.network": "ネットワーク地域",

package/src/i18n/locales/ko/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "연결 중...",
     "hikari::statusBar.disconnected": "연결 끊김",
     "hikari::statusBar.engine": "엔진",
-    "hikari::statusBar.fetching": "연결 정보를 가져오는 중...",
     "hikari::statusBar.latency": "지연 시간",
     "hikari::statusBar.local": "로컬",
     "hikari::statusBar.network": "네트워크 지역",

package/src/i18n/locales/pt/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "Conectando...",
     "hikari::statusBar.disconnected": "Desconectado",
     "hikari::statusBar.engine": "Motor",
-    "hikari::statusBar.fetching": "Buscando informações de conexão...",
     "hikari::statusBar.latency": "Latência",
     "hikari::statusBar.local": "Local",
     "hikari::statusBar.network": "Rede",

package/src/i18n/locales/ru/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "Подключение...",
     "hikari::statusBar.disconnected": "Отключено",
     "hikari::statusBar.engine": "Движок",
-    "hikari::statusBar.fetching": "Получение сведений о подключении...",
     "hikari::statusBar.latency": "Задержка",
     "hikari::statusBar.local": "Локально",
     "hikari::statusBar.network": "Сеть",

package/src/i18n/locales/zh-Hans/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "连接中...",
     "hikari::statusBar.disconnected": "断开",
     "hikari::statusBar.engine": "引擎",
-    "hikari::statusBar.fetching": "获取连接信息中...",
     "hikari::statusBar.latency": "延迟",
     "hikari::statusBar.local": "本地",
     "hikari::statusBar.network": "网络区域",

package/src/i18n/locales/zh-Hant/components.json

@@ -155,7 +155,6 @@
     "hikari::statusBar.connecting": "連線中...",
     "hikari::statusBar.disconnected": "斷開",
     "hikari::statusBar.engine": "引擎",
-    "hikari::statusBar.fetching": "取得連線資訊中...",
     "hikari::statusBar.latency": "延遲",
     "hikari::statusBar.local": "本機",
     "hikari::statusBar.network": "網路區域",

package/src/styles/admin-tokens.scss

@@ -267,9 +267,33 @@
   opacity: 0.5;
 }
 
+/* In-flight (connecting/reconnecting): the warning tint BREATHES —
+   2026-10-17 user direction, a fixed background must mean a SETTLED
+   state (that is the gray idle's job now), so a genuinely in-flight
+   light visibly pulses between a faint and a stronger tint. Pure-CSS
+   compositor motion; reduced-motion users keep the steady resting
+   tint (the class's original value). */
 .s-status-bar-tag-reconnecting {
   background: rgb(var(--color-warning) / 14%);
   transition: background var(--duration-short), width var(--duration-short) var(--ease-standard);
+  animation: s-status-bar-reconnecting-breathe 1.8s var(--ease-standard) infinite;
+}
+
+@keyframes s-status-bar-reconnecting-breathe {
+  0%,
+  100% {
+    background: rgb(var(--color-warning) / 8%);
+  }
+
+  50% {
+    background: rgb(var(--color-warning) / 22%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .s-status-bar-tag-reconnecting {
+    animation: none;
+  }
 }
 
 /* One soft green blink when the light recovers: the pill background