@celestia-island/hikari 0.55.141 → 0.55.142

package/package.json

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

package/src/components/HkConnectionStatus.tsx

@@ -126,8 +126,9 @@ export const HkConnectionStatus = defineComponent({
               compact={props.compact}
             >
               {/* Host-appended popover actions (e.g. a manual page
-                  refresh) ride the same actions row as the built-in
-                  retry button. */}
+                  refresh) ride the status row's right edge — the only
+                  recovery button in the popover since the built-in
+                  labelled retry retired (2026-10-11). */}
               {{ actions: () => slots.actions?.() }}
             </HkStatusBar>
             {bs && (

package/src/components/HkStatusBar.test.tsx

@@ -422,7 +422,7 @@ describe("HkStatusBar", () => {
     }
   });
 
-  it("shows a working reconnect button in the popover while disconnected (hint text retired)", async () => {
+  it("retires the built-in reconnect button; the hint text carries the retry", async () => {
     const onRetry = vi.fn();
     const container = mountBar({
       version: "1.2.3",
@@ -436,20 +436,62 @@ describe("HkStatusBar", () => {
       .dispatchEvent(new MouseEvent("mouseenter"));
     await nextTick();
     const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
-    // The popover body teleports to <body>: the old italic "click to
-    // retry" hint pointed at an element whose clicks never reached the
-    // tag handler. The actions row carries a REAL button instead, and
-    // the misleading hint is gone whenever a retry is wired.
-    const row = panel.querySelector<HTMLElement>("[data-status-actions]")!;
-    expect(row, "actions row renders").toBeTruthy();
-    const button = row.querySelector<HTMLButtonElement>("button")!;
-    expect(button.textContent).toContain("Reconnect now");
-    // 2026-10-02 user direction: small buttons with a leading glyph.
-    expect(button.className).toContain("hk-btn-xs");
-    expect(button.querySelector(".hk-btn-icon svg"), "leading glyph renders").toBeTruthy();
-    expect(panel.textContent).not.toContain("Click to retry");
-    button.click();
-    expect(onRetry, "popover button click retries").toHaveBeenCalledTimes(1);
+    // 2026-10-11 user direction: the popover must not stack a built-in
+    // "Reconnect now" beside the host's own refresh — the light itself
+    // retries on click/tap, so the popover keeps ONE recovery action
+    // (the host's, via the slot).
+    expect(panel.querySelector("[data-status-actions]")).toBeNull();
+    expect(panel.textContent).not.toContain("Reconnect now");
+    // The fallback hint is back for hosts without a slot action — but it
+    // is a REAL control now: the original hint was retired because its
+    // clicks went nowhere, so the text carries the retry itself.
+    const hint = panel.querySelector<HTMLElement>("[role='button']")!;
+    expect(hint.textContent).toContain("Click to retry");
+    hint.click();
+    expect(onRetry, "hint click retries").toHaveBeenCalledTimes(1);
+    // Keyboard parity: the hint is a role=button control, so Enter (and
+    // Space) carry the same retry.
+    hint.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(onRetry, "Enter on the hint retries").toHaveBeenCalledTimes(2);
+    hint.dispatchEvent(new KeyboardEvent("keydown", { key: " ", bubbles: true }));
+    expect(onRetry, "Space on the hint retries").toHaveBeenCalledTimes(2 + 1);
+    hint.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    expect(onRetry, "other keys are inert").toHaveBeenCalledTimes(3);
+  });
+
+  it("hosts the actions cluster on the status row's right side, not a bottom hairline row", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkStatusBar, {
+          version: "1.2.3",
+          connectionStatus: "disconnected",
+          connectionInfo: INFO,
+          onRetry: () => {},
+        }, {
+          actions: () => h("button", { class: "host-refresh" }, "Refresh page"),
+        }),
+    });
+    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")!;
+    const clusters = panel.querySelectorAll("[data-status-actions]");
+    expect(clusters.length, "exactly one actions cluster").toBe(1);
+    // The cluster lives INSIDE the row that carries the status text —
+    // status left, actions right, no extra vertical row.
+    const statusRow = clusters[0]!.closest("div")!;
+    expect(statusRow.textContent).toContain("Disconnected");
+    // The old bottom row announced itself with a hairline top border;
+    // nothing in the panel may carry it anymore.
+    const bordered = [...panel.querySelectorAll<HTMLElement>("*[style*='border']")]
+      .filter((el) => el.style.borderTop.includes("solid"));
+    expect(bordered, "no hairline actions row remains").toEqual([]);
   });
 
   it("keeps the fallback hint when no onRetry is wired", async () => {
@@ -517,27 +559,38 @@ describe("HkStatusBar", () => {
     expect(panel!.querySelector("[data-status-actions]")).toBeNull();
   });
 
-  it("keeps the actions row available while connection info is still fetching", async () => {
-    const onRetry = vi.fn();
-    const container = mountBar({
-      version: "1.2.3",
-      connectionStatus: "disconnected",
-      connectionInfo: null,
-      onRetry,
+  it("keeps host actions available while connection info is still fetching", async () => {
+    const onRefresh = vi.fn();
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkStatusBar, {
+          version: "1.2.3",
+          connectionStatus: "disconnected",
+          connectionInfo: null,
+        }, {
+          actions: () => h("button", { class: "host-refresh", onClick: onRefresh }, "Refresh page"),
+        }),
     });
+    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")!;
-    // The row must live OUTSIDE the info/fetching ternary: an outage that
-    // drops connectionInfo to null is exactly when the retry button is
-    // most needed.
-    const button = panel.querySelector<HTMLButtonElement>("[data-status-actions] button");
-    expect(button, "retry button renders without info").toBeTruthy();
-    button!.click();
-    expect(onRetry).toHaveBeenCalledTimes(1);
+    // 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");
+    const button = cluster!.querySelector<HTMLButtonElement>("button")!;
+    button.click();
+    expect(onRefresh).toHaveBeenCalledTimes(1);
   });
 
   it("no actions row when the slot renders nothing (wrapper forwards an empty slot)", async () => {

package/src/components/HkStatusBar.tsx

@@ -5,7 +5,6 @@ import { useI18n } from "../i18n/context";
 import { HIKARI_FONT_MONO } from "../theme/fontContext";
 
 import HPopover from "./HkPopover";
-import HkButton from "./HkButton";
 import type { HkConnectionInfo } from "./HkConnectionInfo";
 import { HkCountdownDigit } from "./HkCountdownDigit";
 import { HkPlaceholderMarquee } from "./HkPlaceholderMarquee";
@@ -382,22 +381,24 @@ export const HkStatusBar = defineComponent({
         : t("hikari::statusBar.disconnected", "Disconnected");
 
       const connecting = mode === "reconnecting" || mode === "connecting";
-      // Actions row: the popover body teleports to <body>, so a click on
-      // the "click to reconnect" hint text inside it never reached the
-      // tag's own click handler — the popover now carries REAL buttons.
-      // The built-in one retriggers the reconnect for any non-green
-      // light; hosts append their own (e.g. a full manual refresh)
-      // through the `actions` slot.
-      const showRetryButton = mode !== "connected" && typeof props.onRetry === "function";
-      // Gate the row on RENDERED content, not on the slot function's
+      // Recovery actions (2026-10-11 user direction): the old bottom
+      // hairline row stacked a built-in "Reconnect now" button beside the
+      // host's own refresh icon — on an outage the popover read as TWO
+      // buttons doing one job. The built-in labelled button is RETIRED:
+      // the traffic light itself already retries on click/tap, and hosts
+      // append their single recovery action (e.g. a manual page refresh)
+      // through the `actions` slot. The cluster now rides the FIRST
+      // popover row's right side — status text left, actions right — so
+      // no extra row of vertical space is spent on it.
+      // Gate the cluster on RENDERED content, not on the slot function's
       // existence: HkConnectionStatus forwards `actions` unconditionally,
-      // so a function-existence gate would paint an empty hairline row in
-      // the connected state for every host that passed no #actions.
+      // so a function-existence gate would paint an empty cluster in the
+      // connected state for every host that passed no #actions.
       const actionVnodes = slots.actions?.();
       const hasHostActions = Array.isArray(actionVnodes)
         ? actionVnodes.length > 0
         : Boolean(actionVnodes);
-      const hasActionsRow = showRetryButton || hasHostActions;
+      const hasActionsRow = hasHostActions;
 
       const pv = hkMergeVersionDisplay(props.version, props.panelBuildHash);
       const ev = props.engineVersion;
@@ -494,6 +495,21 @@ export const HkStatusBar = defineComponent({
                         {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" }}>
@@ -509,8 +525,21 @@ export const HkStatusBar = defineComponent({
                       )}
                     </div>
                   )}
-                  {mode === "disconnected" && !showRetryButton && (
-                    <div style={{ fontStyle: "italic", fontSize: "0.6875rem", marginBottom: "4px", opacity: 0.7 }}>
+                  {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>
                   )}
@@ -565,31 +594,16 @@ export const HkStatusBar = defineComponent({
                   ))}
                 </>
               ) : (
-                <div style={{ opacity: 0.5 }}>{t("hikari::statusBar.fetching", "Fetching connection info...")}</div>
-              )}
-              {hasActionsRow && (
-                <div
-                  data-status-actions
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    marginTop: "8px",
-                    paddingTop: "8px",
-                    borderTop: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
-                  }}
-                >
-                  {showRetryButton && (
-                    <HkButton
-                      size="xs"
-                      variant="secondary"
-                      icon="RotateCw"
-                      onClick={onRetryButtonClick}
-                    >
-                      {t("hikari::statusBar.retryNow", "Reconnect now")}
-                    </HkButton>
+                <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}
+                    </span>
                   )}
-                  {hasHostActions ? actionVnodes : null}
                 </div>
               )}
             </div>

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "غير معروف",
     "hikari::statusBar.backend.warn": "متدهور",
     "hikari::statusBar.clickReconnect": "انقر لإعادة المحاولة",
-    "hikari::statusBar.retryNow": "أعد الاتصال الآن",
     "hikari::statusBar.connected": "متصل",
     "hikari::statusBar.connecting": "جارٍ الاتصال...",
     "hikari::statusBar.disconnected": "غير متصل",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Unbekannt",
     "hikari::statusBar.backend.warn": "Beeinträchtigt",
     "hikari::statusBar.clickReconnect": "Zum Wiederholen klicken",
-    "hikari::statusBar.retryNow": "Jetzt neu verbinden",
     "hikari::statusBar.connected": "Verbunden",
     "hikari::statusBar.connecting": "Verbinde...",
     "hikari::statusBar.disconnected": "Getrennt",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Unknown",
     "hikari::statusBar.backend.warn": "Degraded",
     "hikari::statusBar.clickReconnect": "Click to retry",
-    "hikari::statusBar.retryNow": "Reconnect now",
     "hikari::statusBar.connected": "Connected",
     "hikari::statusBar.connecting": "Connecting...",
     "hikari::statusBar.disconnected": "Disconnected",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Desconocido",
     "hikari::statusBar.backend.warn": "Degradado",
     "hikari::statusBar.clickReconnect": "Haga clic para reintentar",
-    "hikari::statusBar.retryNow": "Reconectar ahora",
     "hikari::statusBar.connected": "Conectado",
     "hikari::statusBar.connecting": "Conectando...",
     "hikari::statusBar.disconnected": "Desconectado",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Inconnu",
     "hikari::statusBar.backend.warn": "Dégradé",
     "hikari::statusBar.clickReconnect": "Cliquez pour réessayer",
-    "hikari::statusBar.retryNow": "Reconnecter maintenant",
     "hikari::statusBar.connected": "Connecté",
     "hikari::statusBar.connecting": "Connexion...",
     "hikari::statusBar.disconnected": "Déconnecté",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "不明",
     "hikari::statusBar.backend.warn": "低下",
     "hikari::statusBar.clickReconnect": "クリックして再接続",
-    "hikari::statusBar.retryNow": "今すぐ再接続",
     "hikari::statusBar.connected": "接続済み",
     "hikari::statusBar.connecting": "接続中...",
     "hikari::statusBar.disconnected": "切断",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "알 수 없음",
     "hikari::statusBar.backend.warn": "저하",
     "hikari::statusBar.clickReconnect": "클릭하여 재연결",
-    "hikari::statusBar.retryNow": "지금 재연결",
     "hikari::statusBar.connected": "연결됨",
     "hikari::statusBar.connecting": "연결 중...",
     "hikari::statusBar.disconnected": "연결 끊김",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Desconhecido",
     "hikari::statusBar.backend.warn": "Degradado",
     "hikari::statusBar.clickReconnect": "Clique para tentar novamente",
-    "hikari::statusBar.retryNow": "Reconectar agora",
     "hikari::statusBar.connected": "Conectado",
     "hikari::statusBar.connecting": "Conectando...",
     "hikari::statusBar.disconnected": "Desconectado",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Неизвестно",
     "hikari::statusBar.backend.warn": "Деградация",
     "hikari::statusBar.clickReconnect": "Нажмите, чтобы повторить",
-    "hikari::statusBar.retryNow": "Переподключиться сейчас",
     "hikari::statusBar.connected": "Подключено",
     "hikari::statusBar.connecting": "Подключение...",
     "hikari::statusBar.disconnected": "Отключено",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "未知",
     "hikari::statusBar.backend.warn": "降级",
     "hikari::statusBar.clickReconnect": "点击以尝试重连",
-    "hikari::statusBar.retryNow": "立即重连",
     "hikari::statusBar.connected": "已连接",
     "hikari::statusBar.connecting": "连接中...",
     "hikari::statusBar.disconnected": "断开",

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

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "未知",
     "hikari::statusBar.backend.warn": "降級",
     "hikari::statusBar.clickReconnect": "點擊以嘗試重連",
-    "hikari::statusBar.retryNow": "立即重連",
     "hikari::statusBar.connected": "已連線",
     "hikari::statusBar.connecting": "連線中...",
     "hikari::statusBar.disconnected": "斷開",