AgentHub/client/src/main.tsx

/**
 * @file main.tsx
 * @description Vite client entry point. Bootstraps React 18, loads global styles,
 * registers the service worker, prefetches the Workspace chunk on a `/workspace`
 * deep link, and mounts {@link App} into `#root` once the active locale is loaded.
 *
 * ## Fonts
 * Only Latin subsets of Inter and JetBrains Mono are imported so Vite bundles
 * lean WOFF2 files instead of every glyph subset Google Fonts would serve.
 * Maple Mono (the terminal's optional rounded font) ships as one file per weight.
 *
 * ## Service worker reload policy
 * On first visit there is no controlling SW yet — we must not reload when the
 * initial SW activates (the page is already fresh). On subsequent deploys the
 * page is controlled; when a new SW takes over we reload once so hashed bundle
 * URLs update without a manual hard refresh.
 *
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
/* =============================================================================
 * MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
 * =============================================================================
 * **Purpose:** Dashboard module consumed by the React client, MCP tools, or desktop shell depending on deployment mode.
 *
 * ## Design constraints
 * - Local-first: no telemetry leaves the machine unless the user configures webhooks.
 * - Fail-safe hooks path on the server must never block Claude Code; UI mirrors that
 *   philosophy by degrading gracefully (empty states, stale badges, reconnect loops).
 * - Destructive flows stay behind explicit confirmation modals and server-side gates.
 * - Internationalization: user-visible strings belong in i18n JSON, not literals here.
 *
 * ## Remote data & SSH
 * Remote Data Sources let operators aggregate multiple machines. SSH entries describe
 * how to reach a peer dashboard; the global data scope (`dataScope.ts`) narrows every
 * scoped GET via `?sources=`. Health checks and import history surface in Settings.
 *
 * ## Internal dependencies
 * - `./App`
 *
 * ## Testing pointers
 * - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
 * - Server contract changes require `npm run test:server` and OpenAPI sync.
 *
 * ## Related docs
 * - `ARCHITECTURE.md` — hooks → API → SQLite → WebSocket → UI pipeline.
 * - `docs/API.md` — REST reference.
 * - `skills/file-headers/` — mandatory `@author` header policy.
 * ============================================================================= */

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
// Latin-only subset (matches the app's previous Google Fonts request) so Vite
// bundles just the latin WOFF2 per weight instead of every subset.
import "@fontsource/inter/latin-400.css";
import "@fontsource/inter/latin-500.css";
import "@fontsource/inter/latin-600.css";
import "@fontsource/inter/latin-700.css";
import "@fontsource/jetbrains-mono/latin-400.css";
import "@fontsource/jetbrains-mono/latin-500.css";
import "@fontsource/jetbrains-mono/latin-700.css";
// The lane terminal renders live Vietnamese output in this font (TerminalView),
// which the latin subset above doesn't cover — without it, missing glyphs fall
// back to another installed face with a different advance width and get
// visually mangled inside xterm's fixed-width cells.
import "@fontsource/jetbrains-mono/vietnamese-400.css";
import "@fontsource/jetbrains-mono/vietnamese-500.css";
import "@fontsource/jetbrains-mono/vietnamese-700.css";
// The rounded terminal font (Settings → Appearance). Its one file already holds
// the Vietnamese glyphs; a face is only downloaded once something uses it.
import "@fontsource/maple-mono/400.css";
import "@fontsource/maple-mono/500.css";
import "@fontsource/maple-mono/700.css";
import App from "./App";
import { AuthGate } from "./components/AuthGate";
import { i18nReady } from "./i18n";
import "./index.css";

// Deep link into the Workspace: start its (lazy) chunk now, in parallel with the
// locale fetch below, instead of after the first render asks for it.
if (location.pathname.startsWith("/workspace")) void import("./pages/Workspace");

if ("serviceWorker" in navigator) {
  // Detect whether the page is already controlled by an SW *before* we
  // register. On a truly fresh install there is no controller yet, so the
  // first `controllerchange` should NOT reload (the user just opened the page
  // - nothing is stale). On every subsequent rebuild the page is controlled,
  // a new SW takes over, and a one-shot reload picks up the new bundle URLs
  // automatically - no hard refresh needed.
  const wasControlled = !!navigator.serviceWorker.controller;
  let reloaded = false;
  navigator.serviceWorker.addEventListener("controllerchange", () => {
    if (!wasControlled || reloaded) return;
    reloaded = true;
    window.location.reload();
  });
  navigator.serviceWorker
    .register("/sw.js")
    .then((reg) => {
      // Poke the registration so a freshly-built SW activates promptly
      // instead of waiting for the browser's lazy update check.
      reg.update().catch(() => {});
    })
    .catch(() => {});
}

const root = document.getElementById("root");
if (!root) throw new Error("Root element not found");

// The active locale is a lazy chunk: render once it is in, so no raw key ever
// paints. A failed fetch still renders (i18next falls back to the keys).
void i18nReady
  .catch(() => undefined)
  .then(() =>
    createRoot(root).render(
      <StrictMode>
        <AuthGate>
          <App />
        </AuthGate>
      </StrictMode>
    )
  );