mobygate 0.7.3 → 0.8.1

package/CHANGELOG.md

@@ -4,6 +4,186 @@ All notable changes to mobygate are documented here. Format loosely follows
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version numbers are
 [Semantic Versioning](https://semver.org/).
 
+## [0.8.1] — 2026-04-27
+
+Diagnostic visibility release. Adds a request/response capture system,
+a session inspector UI, a `mobygate tail` CLI, and fixes the v0.8.0
+connector idempotency bug. Born out of an OpenClaw debugging session
+where it took an hour of forensics to discover OpenClaw was using
+OpenAI shape (no cache_control) instead of `/v1/messages` — a one-line
+config flip — because mobygate had no visibility into what its
+upstream clients were actually sending.
+
+### Added
+
+- **Request/response capture system** (`lib/request-capture.js`).
+  - Off by default. Three ways to enable:
+    1. Env var: `MOBY_CAPTURE=1 mobygate start`
+    2. Touch file: `touch ~/.mobygate/.capture-enabled` (survives
+       restarts, dashboard-toggleable)
+    3. Dashboard inspector toggle button
+  - Writes paired files per request to `~/.mobygate/captures/`:
+    - `{ts}_{path}_{requestId}.json` — raw inbound body
+    - `{ts}_{path}_{requestId}.summary.txt` — human-readable analysis
+      (system blocks, cache_control markers, message timeline, tool
+      definitions, token breakdown)
+  - On response: appends actual usage from the SDK including
+    `cache_read_input_tokens`, `cache_creation_input_tokens`,
+    `input_tokens`, `output_tokens`, plus computed cache hit % and
+    "savings vs uncached" estimate.
+  - Auto-rotation: keeps last `MOBY_CAPTURE_KEEP=100` captures (200
+    files), prunes oldest in the background.
+
+- **Session inspector UI** at `/inspector`. New focused dashboard for
+  browsing captures:
+  - List view: all recent captures sorted newest-first, one-line stats
+    (timestamp, path, model, msgs, tokens, cache hit %), live polling
+    every 3s.
+  - Detail view: full request body decoded — system blocks (with
+    cache_control highlighted in green), messages timeline (color-coded
+    by role, tool_use/tool_result expanded with previews), tool
+    definitions, response usage stats.
+  - Capture toggle in header — flips the touch file live without
+    restarting mobygate.
+  - Linked from the main dashboard's endpoints row.
+
+- **`mobygate tail` CLI** — `tail -f` style live view of captures as
+  they land. Shows last 10 historical entries, then watches the
+  captures dir for new files. Color-codes `/v1/messages` (green,
+  native shape) vs `/v1/chat/completions` (yellow, OpenAI shape) so
+  shape mismatches jump off the screen.
+
+- **`extractSdkUsage()` helper** in `lib/anthropic.js` — defensive
+  extraction of cache + token fields from SDK result messages,
+  handles both flat (`message.input_tokens`) and nested
+  (`message.usage.input_tokens`) shapes from the Claude Agent SDK.
+  Used by all 4 mobygate handlers (the OpenAI streaming handler also
+  now tracks usage where it didn't before).
+
+- **Connector migration detection** — `openclawConnector.inspect()`
+  now reports "shadow providers": entries in OpenClaw's config that
+  point at mobygate's base URL but aren't registered under our
+  canonical `moby` / `moby-native` names. Catches pre-v0.8.0
+  hand-rolled `claude-max-proxy`-style configs (which silently bypass
+  the native surface). Returned as `shadowProviders: [{ name, api,
+  baseUrl, recommendation }]` in inspect output.
+
+- **Cache endpoints for the dashboard:**
+  - `GET /dashboard/captures` — list captures with summary stats
+  - `GET /dashboard/captures/:filename` — full body + summary for one
+    capture
+  - `GET /dashboard/captures-state` — current toggle state
+  - `POST /dashboard/captures-toggle` — flip toggle live
+  - All require local-origin (DNS-rebinding protection).
+
+### Fixed
+
+- **Connector idempotency** (v0.8.0 OPEN bug). `mobygate connect <id>`
+  run twice with no real change was producing spurious "(changed)"
+  diffs and rewriting byte-identical files. Root cause: `diffSummary`
+  walks objects structurally (sensitive to key order); the actual
+  serialized JSON output was identical. Fix: `writeConfigSafe` now
+  byte-compares the rendered output against the existing file content
+  before deciding to write. Returns `unchanged: true` if no real
+  change. Both `hermesConnector.apply()` and
+  `openclawConnector.apply()` updated to surface this flag.
+
+- **Tool name display in capture analyzer**. OpenAI-shape tools nest
+  the name under `tool.function.name`; the analyzer was only checking
+  `tool.name` and showing `(unnamed)` for everything. Now handles
+  both shapes via the new `toolName(t)` helper.
+
+### Notes
+
+The capture system was the lever that made the entire OpenClaw
+debugging session productive. Without it we had no visibility into
+which wire format clients were using, whether `cache_control` markers
+were being set, where in the request the breakpoints landed, or how
+the conversation was growing turn-over-turn. With it, the diagnosis
+took 60 seconds: "this is `/v1/chat/completions`, no `system` array,
+no cache markers, 33k tokens per turn."
+
+The migration detection in `openclawConnector.inspect()` is a small
+prevent-the-next-occurrence add. If `inspect()` had reported
+`claude-max-proxy` as a shadow provider with a "flip api to
+anthropic-messages" recommendation, today's hour-long forensics would
+have been a single CLI command.
+
+## [0.8.0] — 2026-04-25
+
+Auto-wire third-party clients to use mobygate. The "find your client's
+config file → paste this JSON → restart" dance is replaced by
+`mobygate connect`.
+
+### Added
+
+- **`mobygate connect` CLI** — auto-detects supported clients on the
+  system, plans the minimal config edit to register mobygate as a
+  provider, and applies it atomically with a backup. Subcommands:
+  - `mobygate connect` — interactive, lists detected clients and asks
+    which to wire (default: all)
+  - `mobygate connect <id>` — wire one specific client
+  - `mobygate connect --all` — every detected client, no prompts
+  - `mobygate connect --dry-run` — show planned diff, don't write
+  - `mobygate connect --yes` — skip the per-client confirm prompt
+  - `mobygate connect --no-default` — register the provider but don't
+    change the client's active default model
+  - `mobygate disconnect <id>` — remove our entries cleanly
+- **Auto-wire prompt at the end of `mobygate init`** — after services
+  start, if any supported client is detected, init asks "wire them
+  up?" before printing Done. Skipped in `--yes` mode (we don't edit
+  third-party configs in non-interactive flows without explicit opt-in).
+- **Hermes connector** (`lib/connectors/hermes.js`) — registers the
+  `moby` provider in `~/.hermes/config.yaml`. Hermes only speaks the
+  OpenAI-compat wire format, so a single provider entry covers it.
+- **OpenClaw connector** (`lib/connectors/openclaw.js`) — registers
+  BOTH `moby` (OpenAI-compat) and `moby-native` (Anthropic-messages)
+  in `~/.openclaw/openclaw.json`. With `setDefault`, points OpenClaw's
+  main + default at `moby-native/claude-opus-4-7` — the wire format
+  that unlocks vision, native tool calls, and reasoning blocks.
+
+### Provider naming
+
+All registered entries use the `moby` prefix to be unmistakably from
+mobygate:
+- **`moby`** — OpenAI-compat surface (POST /v1/chat/completions)
+- **`moby-native`** — Anthropic-messages surface (POST /v1/messages)
+
+### Safety
+
+Every config write goes through `lib/connectors/safety.js`:
+- Timestamped backup at `<file>.mobygate-backup-<ISO>` before any write
+- Atomic write via temp file + rename
+- Read-back verification that the on-disk content matches what we
+  intended to write
+- Idempotent — running `connect` twice doesn't duplicate entries; we
+  detect existing moby entries by key and update vs append
+
+### Caveats
+
+- **YAML comments are not preserved.** Hermes config uses YAML, and
+  `js-yaml` parse-then-emit drops comments and blank lines. The
+  auto-backup catches this — the connector also warns on first
+  detection. Comment-preserving YAML is a v0.8.x candidate.
+- **Custom config locations not yet supported.** Connectors probe
+  `~/.hermes/` and `~/.openclaw/`. If you've installed a client to a
+  non-standard path, you'd still need to wire it manually, or set
+  `HERMES_HOME` / `OPENCLAW_HOME` env vars (which the connectors
+  honor).
+- **No `verify()` step yet.** The connector contract has slots for it,
+  but v0.8.0 doesn't fire a real test request through the wired
+  client. Verification is on the v0.8.x roadmap.
+
+### v0.8.x backlog (deferred)
+
+- More connectors (pi-agent, Goose, Aider, Cursor — anything that
+  takes a custom OpenAI-compat baseURL)
+- `verify()` step that exercises the new provider end-to-end
+- Comment-preserving YAML for Hermes
+- Auxiliary-client routing helpers (pin Hermes vision/compression to
+  Sonnet/Haiku via mobygate to save Opus quota)
+- `mobygate doctor` extended to check connection health per client
+
 ## [0.7.3] — 2026-04-25
 
 Hotfix bundle from a thorough security + bugs + ops audit. Six items.

package/bin/mobygate.js

@@ -39,6 +39,13 @@ import {
 } from '../lib/platform.js';
 import { getAuthStatus, forceRefresh } from '../scripts/auth-helper.js';
 import { banner, compactBanner } from '../lib/ascii.js';
+import {
+  CONNECTORS,
+  detectAll as detectAllConnectors,
+  getConnector,
+  DEFAULT_BASE_URL as MOBY_BASE_URL,
+  DEFAULT_API_KEY as MOBY_API_KEY,
+} from '../lib/connectors/index.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const REPO_ROOT = resolve(dirname(__filename), '..');
@@ -280,6 +287,54 @@ async function cmdInit() {
     info('Start the server manually (see instructions above) then run `mobygate status`.');
   }
 
+  // ---- Auto-wire detected clients (Hermes, OpenClaw, etc.) ----
+  // Skip in non-interactive mode (--yes) — those flows shouldn't surprise
+  // the user by editing third-party config files. They can still run
+  // `mobygate connect --all --yes` explicitly afterward.
+  if (!nonInteractive) {
+    try {
+      const detected = await detectAllConnectors();
+      const present = detected.filter((d) => d.detection !== null);
+      if (present.length > 0) {
+        section('Detected clients');
+        for (const { connector, detection } of present) {
+          print(`  ${c.green('✓')} ${c.bold(connector.displayName)} ${c.dim('at ' + detection.configPath)}`);
+        }
+        print('');
+        const wire = await confirm('Auto-wire these to use mobygate?', true);
+        if (wire) {
+          for (const { connector } of present) {
+            try {
+              const plan = await connector.plan({
+                baseUrl: MOBY_BASE_URL,
+                apiKey: MOBY_API_KEY,
+                setDefault: true,
+              });
+              if (plan.skip) { warn(`${connector.displayName}: ${plan.reason}`); continue; }
+              for (const w of plan.warnings || []) warn(w);
+              const result = await connector.apply(plan);
+              if (result.applied) {
+                ok(`Wired ${connector.displayName} → ${result.configPath}`);
+                if (result.backupPath) print(c.dim(`  backup: ${result.backupPath}`));
+              } else {
+                warn(`${connector.displayName}: ${result.reason}`);
+              }
+            } catch (e) {
+              warn(`${connector.displayName}: ${e.message}`);
+            }
+          }
+          print('');
+          info('Restart the wired clients so they pick up the new provider.');
+        } else {
+          print(c.dim('Skipped — run `mobygate connect` later to wire them on demand.'));
+        }
+      }
+    } catch (e) {
+      // Detection failures should never block init.
+      warn(`Connector detection failed: ${e.message}`);
+    }
+  }
+
   section('Done');
   print(`Dashboard: ${c.cyan(`http://localhost:${port}`)}`);
   print(`Configure: ${c.cyan(CONFIG_PATH)}`);
@@ -425,6 +480,78 @@ function cmdLogs() {
   spawnSync(cmd, args, { stdio: 'inherit' });
 }
 
+// `mobygate tail` — watch captures live, print a one-line summary as
+// each new request lands. Reads the .summary.txt file paired with each
+// new .json file in ~/.mobygate/captures/.
+async function cmdTail() {
+  const { homedir } = await import('os');
+  const { watch, existsSync, readFileSync, mkdirSync, statSync } = await import('fs');
+  const { readdir } = await import('fs/promises');
+  const { join } = await import('path');
+
+  const dir = process.env.MOBYGATE_CAPTURE_DIR
+    || join(process.env.MOBYGATE_HOME || join(homedir(), '.mobygate'), 'captures');
+
+  if (!existsSync(dir)) {
+    print(`Captures directory does not exist yet: ${dir}`);
+    print(`Enable capture (touch ~/.mobygate/.capture-enabled OR set MOBY_CAPTURE=1) and send a request.`);
+    return;
+  }
+
+  // Print recent history first (last 10), then watch.
+  const initial = (await readdir(dir))
+    .filter(n => n.endsWith('.summary.txt'))
+    .map(n => ({ name: n, mtime: statSync(join(dir, n)).mtimeMs }))
+    .sort((a, b) => a.mtime - b.mtime)
+    .slice(-10);
+
+  for (const { name } of initial) {
+    printSummaryLine(join(dir, name));
+  }
+
+  print(''); // blank line separator before live tail
+  print('--- watching for new captures (Ctrl-C to stop) ---');
+
+  const seen = new Set(initial.map(x => x.name));
+  watch(dir, (_event, name) => {
+    if (!name || !name.endsWith('.summary.txt')) return;
+    if (seen.has(name)) return;
+    seen.add(name);
+    // Wait briefly so the file is flushed (fs.watch can fire on the
+    // creation rename before content is fully written).
+    setTimeout(() => printSummaryLine(join(dir, name)), 50);
+  });
+}
+
+function printSummaryLine(summaryPath) {
+  try {
+    const text = readFileSync(summaryPath, 'utf8');
+    const grab = (re) => { const m = text.match(re); return m ? m[1].trim() : '?'; };
+    const ts = grab(/timestamp:\s+(\S+)/).slice(11, 19);
+    const path = grab(/^path:\s+(\S+)/m);
+    const model = grab(/^model:\s+(\S+)/m);
+    const msgs = grab(/^messages:\s+(\d+)/m);
+    const tokens = grab(/grand total:\s+(\d+)/);
+    const hit = grab(/cache hit rate:\s+([\d.]+)%/);
+    const status = grab(/^status:\s+(\S+)/m);
+    const dur = grab(/^duration:\s+(\d+) ms/m);
+
+    const hitDisplay = hit === '?' ? '─' : `${hit}% hit`;
+    const statusDisplay = status === '?' ? '(in flight)' : `${status} ${dur}ms`;
+
+    // Color-code the path: green for /v1/messages (native), yellow for /v1/chat/completions
+    const isNative = path === '/v1/messages';
+    const pathColored = isNative ? `\x1b[32m${path}\x1b[0m` : `\x1b[33m${path}\x1b[0m`;
+    const hitColored = hit === '?' ? hitDisplay
+      : parseFloat(hit) > 50 ? `\x1b[32m${hitDisplay}\x1b[0m`
+      : `\x1b[33m${hitDisplay}\x1b[0m`;
+
+    print(`${ts} ${pathColored.padEnd(35)} ${model.padEnd(22)} msgs=${msgs.padEnd(4)} tok=${tokens.padEnd(6)} ${hitColored.padEnd(20)} ${statusDisplay}`);
+  } catch (e) {
+    print(`(failed to read ${summaryPath}: ${e.message})`);
+  }
+}
+
 async function cmdAuth() {
   section('mobygate auth');
   const status = await getAuthStatus();
@@ -659,22 +786,172 @@ async function cmdUpdate() {
   info(`Tip: if the install-layout changed (new service file, new paths), run \`mobygate init\` to re-install the service definitions.`);
 }
 
+// ---------------------------------------------------------------------------
+// `mobygate connect` — auto-wire third-party clients to use mobygate.
+//
+// Detects supported clients (Hermes, OpenClaw) on the system, plans the
+// minimal config edit to register `moby` (OpenAI-compat) and/or
+// `moby-native` (Anthropic-messages) as a provider, and applies it
+// atomically with a backup. Idempotent — running twice doesn't duplicate
+// entries; running with --dry-run shows the planned diff without writing.
+//
+// Per-client adapters live in lib/connectors/<id>.js and follow a
+// uniform contract (detect/inspect/plan/apply/disconnect). Add a new
+// connector by writing the adapter and registering it in
+// lib/connectors/index.js#CONNECTORS.
+// ---------------------------------------------------------------------------
+
+function parseConnectArgs() {
+  // process.argv is [node, mobygate, connect, ...rest]
+  const rest = process.argv.slice(3);
+  const flags = new Set(rest.filter((a) => a.startsWith('-')));
+  const positional = rest.filter((a) => !a.startsWith('-'));
+  return {
+    targetId: positional[0] || null,
+    dryRun: flags.has('--dry-run'),
+    yes: flags.has('--yes') || flags.has('-y'),
+    all: flags.has('--all'),
+    noDefault: flags.has('--no-default'),
+  };
+}
+
+async function cmdConnect() {
+  const { targetId, dryRun, yes, all, noDefault } = parseConnectArgs();
+  section('mobygate connect');
+  if (dryRun) info('Dry-run mode — no files will be written.');
+
+  const detected = await detectAllConnectors();
+  const present = detected.filter((d) => d.detection !== null);
+
+  if (present.length === 0) {
+    print(c.dim('No supported clients detected. Currently we recognize:'));
+    for (const conn of CONNECTORS) {
+      print(c.dim(`  - ${conn.displayName}`));
+    }
+    print(c.dim('Install one and re-run `mobygate connect`.'));
+    return;
+  }
+
+  // Decide which clients to act on.
+  let targets;
+  if (targetId) {
+    const match = present.find((p) => p.connector.id === targetId.toLowerCase());
+    if (!match) return die(`Client "${targetId}" not detected. Detected: ${present.map((p) => p.connector.id).join(', ')}`);
+    targets = [match];
+  } else if (all || yes) {
+    targets = present;
+  } else {
+    print('');
+    print('Detected clients:');
+    for (const { connector, detection } of present) {
+      print(`  ${c.green('✓')} ${c.bold(connector.displayName)} ${c.dim('at ' + detection.configPath)}`);
+    }
+    print('');
+    const which = await prompt('Wire all? (Y / n / comma-separated ids)', 'Y');
+    const trimmed = which.trim().toLowerCase();
+    if (trimmed === 'n' || trimmed === 'no') return ok('Aborted — nothing changed.');
+    if (!trimmed || trimmed === 'y' || trimmed === 'yes') {
+      targets = present;
+    } else {
+      const ids = trimmed.split(',').map((s) => s.trim()).filter(Boolean);
+      targets = present.filter((p) => ids.includes(p.connector.id));
+      if (targets.length === 0) return die(`No detected clients matched "${which}".`);
+    }
+  }
+
+  // Plan + (maybe) apply per target.
+  for (const { connector } of targets) {
+    print('');
+    section(connector.displayName);
+    let plan;
+    try {
+      plan = await connector.plan({
+        baseUrl: MOBY_BASE_URL,
+        apiKey: MOBY_API_KEY,
+        setDefault: !noDefault,
+      });
+    } catch (e) {
+      warn(`plan failed: ${e.message}`);
+      continue;
+    }
+    if (plan.skip) { warn(plan.reason); continue; }
+
+    print(c.dim(`config: ${plan.configPath}`));
+    print('Changes:');
+    for (const line of plan.summary) {
+      const colored = line.startsWith('+') ? c.green(line) : line.startsWith('-') ? c.red(line) : c.cyan(line);
+      print('  ' + colored);
+    }
+    for (const w of plan.warnings || []) warn(w);
+
+    if (dryRun) { info('Dry-run — skipping write.'); continue; }
+
+    if (!yes) {
+      const ok2 = await confirm('Apply this change?', true);
+      if (!ok2) { warn('Skipped.'); continue; }
+    }
+
+    try {
+      const result = await connector.apply(plan);
+      if (result.applied) {
+        ok(`Wrote ${result.bytesWritten} bytes → ${result.configPath}`);
+        if (result.backupPath) print(c.dim(`  backup: ${result.backupPath}`));
+        info(`Restart ${connector.displayName} so it picks up the new provider.`);
+      } else {
+        warn(`Skipped: ${result.reason}`);
+      }
+    } catch (e) {
+      die(`apply failed: ${e.message}`);
+    }
+  }
+}
+
+async function cmdDisconnect() {
+  const targetId = process.argv[3];
+  if (!targetId) return die('Usage: mobygate disconnect <client-id>\nKnown ids: ' + CONNECTORS.map((c) => c.id).join(', '));
+  const conn = getConnector(targetId.toLowerCase());
+  if (!conn) return die(`No connector for "${targetId}". Known: ${CONNECTORS.map((c) => c.id).join(', ')}`);
+  section(`mobygate disconnect ${conn.displayName}`);
+  let result;
+  try {
+    result = await conn.disconnect();
+  } catch (e) {
+    return die(`disconnect failed: ${e.message}`);
+  }
+  if (result.applied) {
+    ok(`Removed moby entries from ${conn.displayName}`);
+    if (result.backupPath) print(c.dim(`  backup: ${result.backupPath}`));
+    if (result.note) info(result.note);
+    info(`Restart ${conn.displayName} so the change takes effect.`);
+  } else {
+    warn(result.reason);
+  }
+}
+
 function usage() {
   print(`mobygate — OpenAI → Claude Max local gateway
 
 Usage:
-  mobygate init       Interactive setup (add --yes to skip prompts,
-                      --no-browser to not auto-open the dashboard)
-  mobygate update     Upgrade to the latest version + restart service
-  mobygate doctor     Diagnose version mismatches, zombie services, port conflicts
-  mobygate start      Start the proxy service
-  mobygate stop       Stop the proxy service
-  mobygate restart    Stop + start
-  mobygate status     Show service + auth + /health state
-  mobygate logs       Tail the server log
-  mobygate auth       Show auth status + run a refresh probe
-  mobygate uninstall  Remove installed services
-  mobygate version    Print version + install mode + path
+  mobygate init        Interactive setup (add --yes to skip prompts,
+                       --no-browser to not auto-open the dashboard)
+  mobygate update      Upgrade to the latest version + restart service
+  mobygate doctor      Diagnose version mismatches, zombie services, port conflicts
+  mobygate start       Start the proxy service
+  mobygate stop        Stop the proxy service
+  mobygate restart     Stop + start
+  mobygate status      Show service + auth + /health state
+  mobygate logs        Tail the server log
+  mobygate tail        Watch captures live (request/response inspector)
+  mobygate auth        Show auth status + run a refresh probe
+  mobygate connect     Auto-wire detected clients (Hermes, OpenClaw) to
+                       use mobygate. Add: <id> for one client, --all for
+                       every detected, --dry-run to preview, --yes to
+                       skip prompts, --no-default to register without
+                       changing the active model.
+  mobygate disconnect  Remove moby entries from a client config.
+                       Usage: mobygate disconnect <client-id>
+  mobygate uninstall   Remove installed services
+  mobygate version     Print version + install mode + path
 
 Config: ~/.mobygate/config.yaml  (env vars override)
 Repo:   ${REPO_ROOT}
@@ -686,6 +963,8 @@ Repo:   ${REPO_ROOT}
 const cmd = process.argv[2];
 const COMMANDS = {
   init: cmdInit,
+  connect: cmdConnect,
+  disconnect: cmdDisconnect,
   update: cmdUpdate,
   upgrade: cmdUpdate,
   doctor: cmdDoctor,
@@ -694,6 +973,7 @@ const COMMANDS = {
   restart: cmdRestart,
   status: cmdStatus,
   logs: cmdLogs,
+  tail: cmdTail,
   auth: cmdAuth,
   uninstall: cmdUninstall,
   version: cmdVersion,

package/index.html

@@ -361,6 +361,7 @@
         <a href="/auth/status?quick=1" class="py-[3px] px-2.5 border border-[#2A2A1F] text-[#C9D9A8] text-[11px] leading-[14px] hover:border-[#5A5F54]">/auth/status</a>
         <a href="/v1/models" class="py-[3px] px-2.5 border border-[#2A2A1F] text-[#C9D9A8] text-[11px] leading-[14px] hover:border-[#5A5F54]">/v1/models</a>
         <a href="/events" class="py-[3px] px-2.5 border border-[#2A2A1F] text-[#C9D9A8] text-[11px] leading-[14px] hover:border-[#5A5F54]">/events</a>
+        <a href="/inspector" class="py-[3px] px-2.5 border border-[#B7E56D] text-[#B7E56D] text-[11px] leading-[14px] hover:bg-[#1A1F12]">/inspector</a>
       </div>
       <div class="flex items-center gap-3">
         <span class="uppercase text-[#5A5F54] text-[10px] leading-3 tracking-[0.12em]" id="f-stream">stream · connecting</span>