agmon 0.0.0-stage → 0.1.0

package/src/components/factory/scene/tool-icons.js

@@ -0,0 +1,233 @@
+import { Container, Graphics, Text } from "pixi.js";
+
+// One glyph per tool type. Each is drawn inside a ±10 box so a badge can swap
+// icons without relayout. Only the tool *type* is shown — never arguments.
+
+const S = { cap: "round", join: "round" };
+
+export const TOOL_TYPES = {
+  bash: {
+    label: "Bash",
+    color: 0x34d399,
+    draw(g, c) {
+      g.moveTo(-8, -6).lineTo(-2, 0).lineTo(-8, 6).stroke({ width: 2.4, color: c, ...S });
+      g.moveTo(1, 7).lineTo(8, 7).stroke({ width: 2.4, color: c, ...S });
+    },
+  },
+  read: {
+    label: "Read",
+    color: 0x60a5fa,
+    draw(g, c) {
+      g.moveTo(-6, -9).lineTo(3, -9).lineTo(7, -5).lineTo(7, 9).lineTo(-6, 9).closePath()
+        .stroke({ width: 2, color: c, ...S });
+      g.moveTo(-3, -1).lineTo(4, -1).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(-3, 3).lineTo(4, 3).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(-3, 6.5).lineTo(1, 6.5).stroke({ width: 1.8, color: c, ...S });
+    },
+  },
+  edit: {
+    label: "Edit",
+    color: 0xfbbf24,
+    draw(g, c) {
+      g.moveTo(-7, 8).lineTo(-6, 3).lineTo(4, -7).lineTo(8, -3).lineTo(-2, 7).closePath()
+        .stroke({ width: 2, color: c, ...S });
+      g.moveTo(1, -4).lineTo(5, 0).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(-8, 9.5).lineTo(-1, 9.5).stroke({ width: 1.8, color: c, ...S });
+    },
+  },
+  search: {
+    label: "Search",
+    color: 0xf472b6,
+    draw(g, c) {
+      g.circle(-2, -2, 6).stroke({ width: 2.2, color: c, ...S });
+      g.moveTo(2.5, 2.5).lineTo(8, 8).stroke({ width: 2.6, color: c, ...S });
+    },
+  },
+  web: {
+    label: "Web",
+    color: 0x22d3ee,
+    draw(g, c) {
+      g.circle(0, 0, 8.5).stroke({ width: 2, color: c, ...S });
+      g.ellipse(0, 0, 3.6, 8.5).stroke({ width: 1.6, color: c, ...S });
+      g.moveTo(-8.5, 0).lineTo(8.5, 0).stroke({ width: 1.6, color: c, ...S });
+    },
+  },
+  mcp: {
+    label: "MCP",
+    color: 0xa78bfa,
+    draw(g, c) {
+      g.moveTo(-4, -9).lineTo(-4, -3).stroke({ width: 2.4, color: c, ...S });
+      g.moveTo(4, -9).lineTo(4, -3).stroke({ width: 2.4, color: c, ...S });
+      g.roundRect(-8, -3, 16, 9, 3).stroke({ width: 2, color: c, ...S });
+      g.moveTo(0, 6).lineTo(0, 10).stroke({ width: 2.4, color: c, ...S });
+    },
+  },
+  agent: {
+    label: "Subagent",
+    color: 0xfb923c,
+    draw(g, c) {
+      g.moveTo(0, -4).lineTo(-6, 6).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(0, -4).lineTo(6, 6).stroke({ width: 1.8, color: c, ...S });
+      g.circle(0, -5, 3.6).fill({ color: c });
+      g.circle(-6.5, 7, 3).fill({ color: c });
+      g.circle(6.5, 7, 3).fill({ color: c });
+    },
+  },
+  todo: {
+    label: "Todo",
+    color: 0x94a3b8,
+    draw(g, c) {
+      g.moveTo(-8, -5).lineTo(-6, -3).lineTo(-3, -7).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(1, -5).lineTo(8, -5).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(-8, 5).lineTo(-6, 7).lineTo(-3, 3).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(1, 5).lineTo(8, 5).stroke({ width: 1.8, color: c, ...S });
+    },
+  },
+  gitnexus: {
+    label: "GitNexus",
+    color: 0xc084fc, // purple-400
+    draw(g, c) {
+      // Knowledge graph: central hub connected to 3 orbiting nodes
+      g.moveTo(0, 0).lineTo(-6, -6).stroke({ width: 1.5, color: c, ...S });
+      g.moveTo(0, 0).lineTo(6, -5).stroke({ width: 1.5, color: c, ...S });
+      g.moveTo(0, 0).lineTo(0, 7).stroke({ width: 1.5, color: c, ...S });
+      g.circle(0, 0, 3.2).fill({ color: c });
+      g.circle(-6, -6, 2.2).fill({ color: c });
+      g.circle(6, -5, 2.2).fill({ color: c });
+      g.circle(0, 7, 2.2).fill({ color: c });
+    },
+  },
+  browser: {
+    label: "Browser",
+    color: 0x06b6d4, // cyan-500
+    draw(g, c) {
+      // Browser window with top tab bar
+      g.roundRect(-8, -7, 16, 14, 2.5).stroke({ width: 1.8, color: c, ...S });
+      g.moveTo(-8, -2).lineTo(8, -2).stroke({ width: 1.4, color: c, ...S });
+      g.circle(-5, -4.5, 1).fill({ color: c });
+      g.circle(-2, -4.5, 1).fill({ color: c });
+    },
+  },
+  git: {
+    label: "Git",
+    color: 0xf97316, // orange-500
+    draw(g, c) {
+      // Git branching tree
+      g.moveTo(-4, -7).lineTo(-4, 7).stroke({ width: 2, color: c, ...S });
+      g.moveTo(-4, 2).arc(0, 2, 4, Math.PI, 0).lineTo(4, -3).stroke({ width: 1.8, color: c, ...S });
+      g.circle(-4, -6, 2.4).fill({ color: c });
+      g.circle(-4, 6, 2.4).fill({ color: c });
+      g.circle(4, -3, 2.4).fill({ color: c });
+    },
+  },
+  docker: {
+    label: "Docker",
+    color: 0x38bdf8, // light blue
+    draw(g, c) {
+      // Container blocks stacked
+      g.roundRect(-7, 1, 6, 5, 1).fill({ color: c, alpha: 0.8 }).stroke({ width: 1.2, color: c, ...S });
+      g.roundRect(1, 1, 6, 5, 1).fill({ color: c, alpha: 0.8 }).stroke({ width: 1.2, color: c, ...S });
+      g.roundRect(-3, -6, 6, 5, 1).fill({ color: c, alpha: 0.8 }).stroke({ width: 1.2, color: c, ...S });
+    },
+  },
+};
+
+// Request-status glyphs share the badge machinery with tools: lifecycle states,
+// the four failure reasons, and fallback.
+export const STATUS_TYPES = {
+  pending: {
+    label: "Queued",
+    color: 0xf59e0b,
+    draw(g, c) {
+      for (const x of [-7, 0, 7]) g.circle(x, 1, 2.6).fill({ color: c });
+    },
+  },
+  done: {
+    label: "Done",
+    color: 0x34d399,
+    draw(g, c) {
+      g.moveTo(-7, 0).lineTo(-2, 6).lineTo(8, -7).stroke({ width: 3, color: c, ...S });
+    },
+  },
+  rate_limited: {
+    label: "Rate limit",
+    color: 0xef4444,
+    draw(g, c) {
+      g.moveTo(-6, -9).lineTo(6, -9).lineTo(-6, 9).lineTo(6, 9).closePath()
+        .stroke({ width: 2, color: c, ...S });
+      g.moveTo(-3, 6.5).lineTo(3, 6.5).stroke({ width: 2.2, color: c, ...S });
+    },
+  },
+  upstream_timeout: {
+    label: "Timeout",
+    color: 0xef4444,
+    draw(g, c) {
+      g.circle(0, 0, 8.5).stroke({ width: 2, color: c, ...S });
+      g.moveTo(0, -5).lineTo(0, 0).lineTo(4.5, 3).stroke({ width: 2, color: c, ...S });
+    },
+  },
+  quota_exhausted: {
+    label: "Quota",
+    color: 0xef4444,
+    draw(g, c) {
+      g.roundRect(-8, -5, 14, 10, 2).stroke({ width: 2, color: c, ...S });
+      g.rect(6, -2, 3, 4).fill({ color: c });
+      g.rect(-6, -3, 2.6, 6).fill({ color: c });
+    },
+  },
+  auth_refresh_failed: {
+    label: "Auth",
+    color: 0xef4444,
+    draw(g, c) {
+      g.circle(-4, 0, 4.2).stroke({ width: 2, color: c, ...S });
+      g.moveTo(0, 0).lineTo(8, 0).stroke({ width: 2, color: c, ...S });
+      g.moveTo(5, 0).lineTo(5, 4).stroke({ width: 2, color: c, ...S });
+      g.moveTo(-9, -8).lineTo(9, 8).stroke({ width: 2.2, color: 0xfbbf24, ...S });
+    },
+  },
+  fallback: {
+    label: "Fallback",
+    color: 0xfbbf24,
+    draw(g, c) {
+      g.moveTo(-8, -4).lineTo(7, -4).stroke({ width: 2.2, color: c, ...S });
+      g.moveTo(3, -8).lineTo(8, -4).lineTo(3, 0).stroke({ width: 2.2, color: c, ...S });
+      g.moveTo(8, 5).lineTo(-7, 5).stroke({ width: 2.2, color: c, ...S });
+      g.moveTo(-3, 1).lineTo(-8, 5).lineTo(-3, 9).stroke({ width: 2.2, color: c, ...S });
+    },
+  },
+};
+
+export const TOOL_KEYS = Object.keys(TOOL_TYPES);
+export const STATUS_KEYS = ["pending", "done", "rate_limited", "upstream_timeout", "quota_exhausted", "auth_refresh_failed", "fallback"];
+
+/** A round badge: dark disc, coloured ring, the tool's glyph, optional name. */
+export function createToolBadge(tool, { size = 1, showLabel = true, label: labelOverride } = {}) {
+  const def = TOOL_TYPES[tool] || STATUS_TYPES[tool] || TOOL_TYPES.bash;
+  const root = new Container();
+
+  const halo = new Graphics();
+  halo.circle(0, 0, 21).fill({ color: def.color, alpha: 0.18 });
+
+  const disc = new Graphics();
+  disc.circle(0, 0, 15).fill({ color: 0x0f141c });
+  disc.circle(0, 0, 15).stroke({ width: 2, color: def.color, alpha: 0.95 });
+
+  const glyph = new Graphics();
+  def.draw(glyph, def.color);
+  glyph.scale.set(0.95);
+
+  root.addChild(halo, disc, glyph);
+
+  if (showLabel) {
+    const label = new Text({
+      text: labelOverride ?? def.label,
+      style: { fontFamily: "Inter, system-ui, sans-serif", fontSize: 9, fill: def.color, fontWeight: "800" },
+    });
+    label.anchor.set(0.5, 0);
+    label.y = 18;
+    root.addChild(label);
+  }
+
+  root.scale.set(size);
+  return { root, halo, tool };
+}

package/src/lib/mockTraces.js

@@ -0,0 +1,171 @@
+export const MOCK_PRESETS = {
+  idle: { agents: 2, errorRatio: 0 },
+  busy: { agents: 8, errorRatio: 0 },
+  storm: { agents: 30, errorRatio: 0.15 },
+  errors: { agents: 10, errorRatio: 0.6 },
+  cases: { agents: 16, errorRatio: 0, cases: true },
+};
+
+const CLIENTS = [
+  { account: "Claude Code · main", icon: "terminal" },
+  { account: "Claude Code · review", icon: "rate_review" },
+  { account: "Antigravity · agent", icon: "smart_toy" },
+  { account: "Antigravity · dev", icon: "construction" },
+  { account: "Cursor · workspace", icon: "edit_note" },
+  { account: "OpenCode · build", icon: "science" },
+  { account: "Aider", icon: "smart_toy" },
+  { account: "Continue · dev", icon: "play_arrow" },
+];
+
+const PROVIDER_MODELS = [
+  { provider: "claude", model: "claude-3-7-sonnet" },
+  { provider: "gemini", model: "gemini-2.5-pro" },
+  { provider: "openai", model: "gpt-4o" },
+  { provider: "minimax", model: "minimax-m2" },
+  { provider: "deepseek", model: "deepseek-v3" },
+];
+
+const ERROR_REASONS = [
+  "rate_limited",
+  "upstream_timeout",
+  "quota_exhausted",
+  "auth_refresh_failed",
+];
+
+export const MOCK_TOOL_TYPES = ["bash", "read", "edit", "search", "web", "mcp", "agent", "gitnexus", "browser", "git", "docker"];
+
+const CASE_DECK = [
+  { name: "sleeping", state: "done", ageMs: 38000 },
+  { name: "happy", state: "done", ageMs: 9000, cost: 1.42 },
+  { name: "pending", state: "pending", ageMs: 2500, tools: ["todo"] },
+  { name: "gitnexus", state: "streaming", ageMs: 14000, tools: ["gitnexus", "read"] },
+  { name: "docker", state: "streaming", ageMs: 15000, tools: ["docker", "bash"] },
+  { name: "browser", state: "streaming", ageMs: 16000, tools: ["browser", "web"] },
+  { name: "git+agent", state: "streaming", ageMs: 12000, tools: ["git", "agent"], concurrent: 4 },
+  { name: "rate_limited", state: "error", ageMs: 6000, error: "rate_limited" },
+  { name: "upstream_timeout", state: "error", ageMs: 30000, error: "upstream_timeout" },
+  { name: "quota_exhausted", state: "error", ageMs: 8000, error: "quota_exhausted" },
+  { name: "auth_refresh_failed", state: "error", ageMs: 5000, error: "auth_refresh_failed" },
+  { name: "fallback-1", state: "streaming", ageMs: 13000, tools: ["bash"], fallbackShift: 3 },
+  { name: "fallback-2", state: "streaming", ageMs: 14000, tools: ["browser", "mcp"], fallbackShift: 2 },
+  { name: "slow", state: "streaming", ageMs: 36000, tools: ["docker"] },
+  { name: "queue+cached", state: "streaming", ageMs: 10000, tools: ["read", "search"], concurrent: 5, cachedBoost: true },
+  { name: "expensive", state: "done", ageMs: 20000, cost: 7.35 },
+];
+
+function createRandom(seed) {
+  let s = seed >>> 0 || 1;
+  return () => {
+    s ^= s << 13;
+    s ^= s >>> 17;
+    s ^= s << 5;
+    s >>>= 0;
+    return s / 4294967296;
+  };
+}
+
+function pick(rand, list) {
+  return list[Math.floor(rand() * list.length) % list.length];
+}
+
+function accountTarget(index) {
+  return PROVIDER_MODELS[index % PROVIDER_MODELS.length];
+}
+
+function randomTokens(rand) {
+  return {
+    input: Math.round(400 + rand() * 14000),
+    output: Math.round(80 + rand() * 2900),
+    cached: Math.round(rand() * 6000),
+  };
+}
+
+export function generateMockTraces({ count = 8, errorRatio = 0, seed = 42, now = Date.now(), cases = false } = {}) {
+  const rand = createRandom(seed);
+  const traces = [];
+
+  for (let i = 0; i < count; i += 1) {
+    const client = CLIENTS[i % CLIENTS.length];
+    const cycle = Math.floor(i / CLIENTS.length) + 1;
+    const account = cycle > 1 ? `${client.account} ${cycle}` : client.account;
+    const connectionId = `mock-conn-${i}`;
+    const target = accountTarget(i);
+    const deck = cases ? CASE_DECK[i % CASE_DECK.length] : null;
+    const randAge = Math.floor(rand() * 40000);
+    const randErr = rand() < errorRatio;
+    const ageMs = deck ? deck.ageMs : randAge;
+    const startedAt = now - ageMs;
+    const isError = deck ? deck.state === "error" : randErr;
+
+    const ageRatio = ageMs / 40000;
+    let state;
+    if (deck) state = deck.state;
+    else if (isError) state = "error";
+    else if (ageRatio < 0.25) state = "pending";
+    else if (ageRatio < 0.6) state = "streaming";
+    else state = "done";
+
+    const tokens = randomTokens(rand);
+    const toolRand = createRandom(seed * 7919 + i * 104729 + 13);
+    const toolCount = state === "done" ? 0 : 1 + Math.floor(toolRand() * 3);
+    const toolPick = [];
+    for (let k = 0; k < toolCount; k += 1) {
+      toolPick.push(MOCK_TOOL_TYPES[Math.floor(toolRand() * MOCK_TOOL_TYPES.length)]);
+    }
+    const toolNames = deck?.tools ?? (state === "error" ? [] : toolPick);
+    const toolCalls = [];
+    for (const tool of toolNames) {
+      if (!toolCalls.some((c) => c.tool === tool)) {
+        toolCalls.push({ tool, state: toolCalls.length === 0 ? "running" : "queued" });
+      }
+    }
+
+    const wantsFallback = deck ? !!deck.fallbackShift : toolRand() < 0.28;
+    const fallbackProvider = PROVIDER_MODELS[(i + (deck?.fallbackShift ?? 3)) % PROVIDER_MODELS.length].provider;
+    const fallback =
+      wantsFallback && (state === "pending" || state === "streaming") && fallbackProvider !== target.provider
+        ? { from: fallbackProvider }
+        : null;
+
+    const concurrent = deck?.concurrent ?? (state === "done" || state === "error" ? 1 : 1 + Math.floor(toolRand() * 3));
+    if (deck?.cachedBoost) tokens.cached = 14000;
+
+    traces.push({
+      traceId: `mock-${i}-${Math.floor(rand() * 1e6).toString(36)}`,
+      cli: "mock",
+      connectionId,
+      account,
+      model: target.model,
+      provider: target.provider,
+      state,
+      startedAt,
+      elapsedMs: ageMs,
+      tokens,
+      cost: deck?.cost ?? Math.round((tokens.input * 0.000015 + tokens.output * 0.00006) * 100) / 100,
+      status: isError ? "error" : "200",
+      error: isError ? deck?.error ?? pick(rand, ERROR_REASONS) : null,
+      clientIcon: client.icon,
+      toolCalls,
+      tools: toolNames,
+      activeTool: toolNames[0] || null,
+      currentCommand: toolNames[0] ? `${toolNames[0]} task running...` : null,
+      fallback,
+      concurrent,
+    });
+  }
+
+  return traces;
+}
+
+export function mockProviderDescriptors(traces) {
+  const seen = new Map();
+  for (const trace of traces) {
+    if (trace.provider && !seen.has(trace.provider)) {
+      seen.set(trace.provider, {
+        provider: trace.provider,
+        name: trace.provider.charAt(0).toUpperCase() + trace.provider.slice(1),
+      });
+    }
+  }
+  return [...seen.values()];
+}

package/src/lib/traceContract.js

@@ -0,0 +1,46 @@
+/**
+ * Standard Trace Contract for Agent Factory.
+ * All watchers normalize their session logs into this uniform schema.
+ */
+
+export function normalizeTrace(raw) {
+  const tokens = raw.tokens || {};
+  return {
+    traceId: String(raw.traceId || `trace-${Math.random().toString(36).slice(2, 9)}`),
+    cli: raw.cli || "agent", // "antigravity" | "claude" | "cursor" | etc.
+    connectionId: String(raw.connectionId || "Agent Desk"),
+    account: String(raw.account || "Default Workspace"),
+    model: String(raw.model || "Unknown Model"),
+    provider: String(raw.provider || "anthropic").toLowerCase(),
+    state: ["streaming", "pending", "done", "error"].includes(raw.state) ? raw.state : "streaming",
+    startedAt: typeof raw.startedAt === "number" ? raw.startedAt : Date.now(),
+    elapsedMs: typeof raw.elapsedMs === "number" ? raw.elapsedMs : 0,
+    tokens: {
+      input: Number(tokens.input || 0),
+      output: Number(tokens.output || 0),
+      cached: Number(tokens.cached || 0),
+    },
+    cost: Number(raw.cost || 0),
+    status: String(raw.status || "200"),
+    tools: Array.isArray(raw.tools) ? raw.tools : [],
+    activeTool: raw.activeTool || null,
+    currentCommand: raw.currentCommand || null,
+    error: raw.error ? String(raw.error) : null,
+  };
+}
+
+export function extractProviders(traces) {
+  const seen = new Set();
+  const list = [];
+  for (const t of traces) {
+    const p = (t.provider || "other").toLowerCase();
+    if (!seen.has(p)) {
+      seen.add(p);
+      list.push({
+        provider: p,
+        name: p.charAt(0).toUpperCase() + p.slice(1),
+      });
+    }
+  }
+  return list;
+}

package/src/lib/useFactoryTraces.js

@@ -0,0 +1,142 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { generateMockTraces, mockProviderDescriptors, MOCK_PRESETS } from "./mockTraces";
+
+export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
+  const [traces, setTraces] = useState([]);
+  const [providers, setProviders] = useState([]);
+  const [connected, setConnected] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState(null);
+
+  const eventSourceRef = useRef(null);
+  const watchdogTimerRef = useRef(null);
+
+  // Reconnection trigger
+  const [connectionEpoch, setConnectionEpoch] = useState(0);
+
+  const refresh = useCallback(() => {
+    setIsRefreshing(true);
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    setConnectionEpoch((prev) => prev + 1);
+    setTimeout(() => setIsRefreshing(false), 500);
+  }, []);
+
+  // 1. Mock Mode
+  useEffect(() => {
+    if (mode !== "mock") return undefined;
+
+    const cfg = MOCK_PRESETS[preset] || MOCK_PRESETS.cases;
+    const updateMock = () => {
+      const next = generateMockTraces({ count: cfg.agents, cases: !!cfg.cases, errorRatio: cfg.errorRatio });
+      setTraces(next);
+      setProviders(mockProviderDescriptors(next));
+      setConnected(true);
+      setLastUpdated(Date.now());
+    };
+
+    updateMock();
+    const interval = setInterval(updateMock, 3000);
+    return () => clearInterval(interval);
+  }, [mode, preset, connectionEpoch]);
+
+  // 2. Live Mode (SSE + Wake-up Watchdog)
+  useEffect(() => {
+    if (mode !== "live") return undefined;
+
+    let cancelled = false;
+
+    const resetWatchdog = () => {
+      if (watchdogTimerRef.current) clearTimeout(watchdogTimerRef.current);
+      // If no packet arrives for 7s, force reconnect
+      watchdogTimerRef.current = setTimeout(() => {
+        if (!cancelled) {
+          console.warn("[SSE] Watchdog timeout, reconnecting...");
+          setConnectionEpoch((prev) => prev + 1);
+        }
+      }, 7000);
+    };
+
+    try {
+      const es = new EventSource("/api/traces/stream?source=live");
+      eventSourceRef.current = es;
+
+      es.onopen = () => {
+        if (!cancelled) {
+          setConnected(true);
+          resetWatchdog();
+        }
+      };
+
+      es.onmessage = (event) => {
+        if (cancelled || !event?.data) return;
+        try {
+          const payload = JSON.parse(event.data);
+          if (Array.isArray(payload.traces)) {
+            setTraces(payload.traces);
+          }
+          if (Array.isArray(payload.providers)) {
+            setProviders(payload.providers);
+          }
+          setLastUpdated(Date.now());
+          resetWatchdog();
+        } catch {
+          // ignore ping
+        }
+      };
+
+      es.onerror = () => {
+        if (!cancelled) {
+          setConnected(false);
+        }
+      };
+    } catch {
+      setConnected(false);
+    }
+
+    return () => {
+      cancelled = true;
+      if (watchdogTimerRef.current) clearTimeout(watchdogTimerRef.current);
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+    };
+  }, [mode, connectionEpoch]);
+
+  // 3. Auto-reconnect when laptop wakes up or tab gains focus
+  useEffect(() => {
+    if (mode !== "live") return undefined;
+
+    const handleWakeup = () => {
+      if (document.visibilityState === "visible") {
+        console.log("[AgentFactory] Tab active / wake up, refreshing telemetry...");
+        refresh();
+      }
+    };
+
+    window.addEventListener("visibilitychange", handleWakeup);
+    window.addEventListener("online", handleWakeup);
+    window.addEventListener("focus", handleWakeup);
+
+    return () => {
+      window.removeEventListener("visibilitychange", handleWakeup);
+      window.removeEventListener("online", handleWakeup);
+      window.removeEventListener("focus", handleWakeup);
+    };
+  }, [mode, refresh]);
+
+  return {
+    traces,
+    providers,
+    connected,
+    live: mode === "live",
+    isRefreshing,
+    refresh,
+    lastUpdated,
+  };
+}