agmon 0.2.0 → 0.2.2

package/src/lib/mockTraces.js

@@ -13,19 +13,20 @@ export const MOCK_PRESETS = {
 };
 
 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" },
+  { account: "Claude Code · main", icon: "terminal", cli: "claude", clientType: "cli" },
+  { account: "Claude Desktop", icon: "desktop_windows", cli: "claude", clientType: "desktop" },
+  { account: "Codex CLI · tui", icon: "terminal", cli: "codex", clientType: "cli" },
+  { account: "Codex Desktop", icon: "desktop_windows", cli: "codex", clientType: "desktop" },
+  { account: "Antigravity · agent", icon: "smart_toy", cli: "antigravity", clientType: "cli" },
+  { account: "Antigravity App", icon: "smart_toy", cli: "antigravity", clientType: "app" },
+  { account: "Cursor · workspace", icon: "edit_note", cli: "cursor", clientType: "extension" },
+  { account: "OpenCode · build", icon: "science", cli: "opencode", clientType: "cli" },
 ];
 
 const PROVIDER_MODELS = [
   { provider: "claude", model: "claude-3-7-sonnet" },
   { provider: "gemini", model: "gemini-2.5-pro" },
+  { provider: "openai (codex)", model: "gpt-5.6-terra" },
   { provider: "openai", model: "gpt-4o" },
   { provider: "minimax", model: "minimax-m2" },
   { provider: "deepseek", model: "deepseek-v3" },
@@ -516,21 +517,21 @@ export const SHOWCASE_ALL_DECK = [
  * 3. Skins Showcase: 15 agents comparing 5 archetypes in 3 colorways each.
  */
 export const SHOWCASE_SKINS_DECK = [
-  { name: "CyberSuit · Cyan", skin: "skin_0", state: "streaming", ageMs: 12000, tools: ["bash"], props: ["prop_50"] },
-  { name: "CyberSuit · Violet", skin: "skin_1", state: "streaming", ageMs: 14000, tools: ["read"], props: ["prop_100"] },
-  { name: "CyberSuit · Crimson", skin: "skin_2", state: "happy", ageMs: 9000, tools: ["edit"], props: ["prop_200"] },
-  { name: "MechaPilot · Heavy", skin: "skin_50", state: "streaming", ageMs: 16000, tools: ["docker"], props: ["prop_0"] },
-  { name: "MechaPilot · Valkyrie", skin: "skin_51", state: "streaming", ageMs: 18000, tools: ["agent"], props: ["prop_150"] },
-  { name: "MechaPilot · Titan", skin: "skin_52", state: "pending", ageMs: 2500, tools: ["todo"], props: ["prop_300"] },
-  { name: "StealthNinja · Shadow", skin: "skin_100", state: "streaming", ageMs: 13000, tools: ["gitnexus"], props: ["prop_250"] },
-  { name: "StealthNinja · Void", skin: "skin_101", state: "streaming", ageMs: 15000, tools: ["search"], props: ["prop_51"] },
-  { name: "StealthNinja · Phantom", skin: "skin_102", state: "done", ageMs: 38000, props: ["prop_101"] },
-  { name: "MatrixHacker · ZeroDay", skin: "skin_150", state: "streaming", ageMs: 17000, tools: ["web"], props: ["prop_0"] },
-  { name: "MatrixHacker · Glitch", skin: "skin_151", state: "streaming", ageMs: 19000, tools: ["bash"], isLooping: true, props: ["prop_301"] },
-  { name: "MatrixHacker · Cypher", skin: "skin_152", state: "streaming", ageMs: 11000, tools: ["mcp"], props: ["prop_151"] },
-  { name: "CelestialAstro · Solar", skin: "skin_200", state: "happy", ageMs: 8000, tools: ["git"], props: ["prop_201"] },
-  { name: "CelestialAstro · Cosmic", skin: "skin_201", state: "streaming", ageMs: 21000, tools: ["edit"], props: ["prop_251"] },
-  { name: "CelestialAstro · Nebula", skin: "skin_202", state: "error", ageMs: 6000, error: "rate_limited", props: ["prop_52"] },
+  { name: "Neon Enforcer (Visor)", skin: "skin_0", state: "streaming", ageMs: 12000, tools: ["bash"], props: ["prop_50"] },
+  { name: "Crimson Striker (Monocle)", skin: "skin_1", state: "streaming", ageMs: 14000, tools: ["read"], props: ["prop_100"] },
+  { name: "Electric Specter (Horns)", skin: "skin_3", state: "happy", ageMs: 9000, tools: ["edit"], props: ["prop_200"] },
+  { name: "Obsidian Ronin (Kabuto)", skin: "skin_7", state: "pending", ageMs: 2500, tools: ["todo"], props: ["prop_250"] },
+  { name: "Apex Frame (V-Fin)", skin: "skin_10", state: "streaming", ageMs: 16000, tools: ["docker"], props: ["prop_0"] },
+  { name: "Heavy Colossus (Blast)", skin: "skin_11", state: "streaming", ageMs: 18000, tools: ["agent"], props: ["prop_150"] },
+  { name: "Berserk EVA (Horn)", skin: "skin_12", state: "streaming", ageMs: 15000, tools: ["search"], props: ["prop_300"] },
+  { name: "Shadow Shinobi (Headband)", skin: "skin_20", state: "streaming", ageMs: 13000, tools: ["gitnexus"], props: ["prop_250"] },
+  { name: "Kage Oni (Demon Mask)", skin: "skin_22", state: "streaming", ageMs: 15000, tools: ["search"], props: ["prop_51"] },
+  { name: "Cyber Kasa (Conical Hat)", skin: "skin_24", state: "done", ageMs: 38000, props: ["prop_101"] },
+  { name: "Root Netrunner (Hoodie)", skin: "skin_30", state: "streaming", ageMs: 17000, tools: ["web"], props: ["prop_0"] },
+  { name: "Binary Coder (VR Goggles)", skin: "skin_31", state: "streaming", ageMs: 19000, tools: ["bash"], isLooping: true, props: ["prop_301"] },
+  { name: "Cablehead (Dreadlocks)", skin: "skin_37", state: "streaming", ageMs: 11000, tools: ["mcp"], props: ["prop_151"] },
+  { name: "Solar Voyager (Bubble Dome)", skin: "skin_40", state: "happy", ageMs: 8000, tools: ["git"], props: ["prop_201"] },
+  { name: "Nebula Drifter (Saturn Ring)", skin: "skin_43", state: "error", ageMs: 6000, error: "rate_limited", props: ["prop_52"] },
 ];
 
 /**
@@ -750,9 +751,10 @@ export function generateMockTraces({ count = null, errorRatio = 0, seed = 42, no
     }
 
     traces.push({
-      traceId: `mock-${i}-${Math.floor(rand() * 1e6).toString(36)}`,
-      cli: "mock",
-      connectionId,
+      traceId: `mock-${client.cli || "agent"}-${i}-${Math.floor(rand() * 1e6).toString(36)}`,
+      cli: client.cli || "mock",
+      clientType: client.clientType || "cli",
+      connectionId: `${client.account} (${i})`,
       account,
       model: target.model,
       provider: target.provider,

package/src/lib/parsers/codexParser.js

@@ -0,0 +1,373 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import os from "node:os";
+import { normalizeCodexTool, classifyCodexSession } from "../watchers/codexWatcher.js";
+
+function compactText(value, maxLength = 160) {
+  const text = String(value || "").replace(/\s+/g, " ").trim();
+  return text ? text.slice(0, maxLength) : null;
+}
+
+function textFromContent(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content
+    .map((block) => (typeof block?.text === "string" ? block.text : ""))
+    .filter(Boolean)
+    .join("\n");
+}
+
+function isSyntheticInstruction(text) {
+  if (!text) return true;
+  const trimmed = text.trim();
+  return (
+    trimmed.startsWith("# AGENTS.md instructions") ||
+    trimmed.startsWith("<INSTRUCTIONS>") ||
+    trimmed.startsWith("<permissions instructions>") ||
+    trimmed.startsWith("<model_switch>") ||
+    trimmed.startsWith("<multi_agent_mode>") ||
+    trimmed.startsWith("<environment_context>") ||
+    trimmed.startsWith("<skills_instructions>")
+  );
+}
+
+/**
+ * Searches ~/.codex/sessions/ recursively for a rollout file matching the session ID or prefix.
+ */
+async function findCodexRolloutPath(safeId) {
+  const sessionsRoot = path.join(os.homedir(), ".codex", "sessions");
+
+  let years;
+  try {
+    years = await fs.readdir(sessionsRoot, { withFileTypes: true });
+  } catch {
+    return null;
+  }
+
+  // Sort years descending (newest first)
+  const yearDirs = years.filter((d) => d.isDirectory()).map((d) => d.name).sort().reverse();
+
+  for (const year of yearDirs) {
+    const yearPath = path.join(sessionsRoot, year);
+    let months;
+    try {
+      months = await fs.readdir(yearPath, { withFileTypes: true });
+    } catch {
+      continue;
+    }
+    const monthDirs = months.filter((d) => d.isDirectory()).map((d) => d.name).sort().reverse();
+
+    for (const month of monthDirs) {
+      const monthPath = path.join(yearPath, month);
+      let days;
+      try {
+        days = await fs.readdir(monthPath, { withFileTypes: true });
+      } catch {
+        continue;
+      }
+      const dayDirs = days.filter((d) => d.isDirectory()).map((d) => d.name).sort().reverse();
+
+      for (const day of dayDirs) {
+        const dayPath = path.join(monthPath, day);
+        let files;
+        try {
+          files = await fs.readdir(dayPath);
+        } catch {
+          continue;
+        }
+
+        for (const file of files) {
+          if (!file.endsWith(".jsonl")) continue;
+          if (file.includes(safeId)) {
+            return path.join(dayPath, file);
+          }
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Parses an OpenAI Codex session rollout into normalized turns
+ * compatible with AGMon Chat, Time-Machine Replay, and Diff Viewer.
+ *
+ * @param {string} sessionId - Full or short session ID (e.g. "01a1199a-faf1..." or "01a1199a")
+ * @returns {Promise<{ ok: boolean, session: any, turns: any[] }>}
+ */
+export async function parseCodexTranscript(sessionId) {
+  const cleanId = String(sessionId || "").replace(/^codex-/, "").trim();
+  if (!cleanId || !/^[a-zA-Z0-9_-]{4,64}$/.test(cleanId)) {
+    throw new Error("Invalid Codex session ID format");
+  }
+
+  const rolloutPath = await findCodexRolloutPath(cleanId);
+  if (!rolloutPath) {
+    throw new Error(`Codex transcript not found for session "${sessionId}"`);
+  }
+
+  const raw = await fs.readFile(rolloutPath, "utf-8");
+  const lines = raw.split("\n");
+
+  let sessionMeta = null;
+  let model = "gpt-5.6-terra";
+  let cwd = process.cwd();
+  let originator = "codex-cli";
+  let source = "cli";
+  let startedAt = null;
+  let updatedAt = null;
+
+  let totalInput = 0;
+  let totalOutput = 0;
+  let totalCached = 0;
+
+  const turns = [];
+  let currentAssistantTurn = null;
+
+  for (let idx = 0; idx < lines.length; idx++) {
+    const line = lines[idx].trim();
+    if (!line) continue;
+
+    let entry;
+    try {
+      entry = JSON.parse(line);
+    } catch {
+      continue;
+    }
+
+    const timestamp = entry.timestamp || new Date().toISOString();
+    if (!startedAt) startedAt = timestamp;
+    updatedAt = timestamp;
+
+    const payload = entry.payload;
+    if (!payload) continue;
+
+    if (entry.type === "session_meta") {
+      sessionMeta = payload;
+      if (payload.cwd) cwd = payload.cwd;
+      if (payload.originator) originator = payload.originator;
+      if (payload.source) source = payload.source;
+      if (payload.timestamp) startedAt = payload.timestamp;
+      continue;
+    }
+
+    if (entry.type === "turn_context") {
+      if (payload.model) model = payload.model;
+      if (payload.cwd) cwd = payload.cwd;
+      continue;
+    }
+
+    if (entry.type === "response_item") {
+      const type = payload.type;
+
+      // 1. Message: User or Assistant
+      if (type === "message") {
+        const role = payload.role;
+
+        if (role === "user") {
+          const rawText = textFromContent(payload.content);
+          if (isSyntheticInstruction(rawText)) continue;
+
+          // If there was an active assistant turn, finalize it before starting new turn
+          if (currentAssistantTurn) {
+            turns.push(currentAssistantTurn);
+            currentAssistantTurn = null;
+          }
+
+          turns.push({
+            id: `turn-user-${turns.length}`,
+            role: "user",
+            timestamp,
+            content: rawText.trim(),
+          });
+
+          currentAssistantTurn = {
+            id: `turn-asst-${turns.length}`,
+            role: "assistant",
+            timestamp,
+            content: "",
+            thinking: "",
+            toolCalls: [],
+            tokens: { input: 0, output: 0, cached: 0 },
+            status: "completed",
+          };
+          continue;
+        }
+
+        if (role === "assistant") {
+          if (!currentAssistantTurn) {
+            currentAssistantTurn = {
+              id: `turn-asst-${turns.length}`,
+              role: "assistant",
+              timestamp,
+              content: "",
+              thinking: "",
+              toolCalls: [],
+              tokens: { input: 0, output: 0, cached: 0 },
+              status: "completed",
+            };
+          }
+
+          const asstText = textFromContent(payload.content);
+          if (asstText) {
+            currentAssistantTurn.content += (currentAssistantTurn.content ? "\n\n" : "") + asstText.trim();
+          }
+          continue;
+        }
+
+        continue;
+      }
+
+      // 2. Reasoning / Thinking
+      if (type === "reasoning") {
+        if (!currentAssistantTurn) {
+          currentAssistantTurn = {
+            id: `turn-asst-${turns.length}`,
+            role: "assistant",
+            timestamp,
+            content: "",
+            thinking: "",
+            toolCalls: [],
+            tokens: { input: 0, output: 0, cached: 0 },
+            status: "completed",
+          };
+        }
+
+        let thinkingText = "";
+        if (Array.isArray(payload.summary) && payload.summary.length > 0) {
+          thinkingText = payload.summary.join("\n");
+        } else if (payload.content) {
+          thinkingText = typeof payload.content === "string" ? payload.content : JSON.stringify(payload.content);
+        } else if (payload.encrypted_content) {
+          thinkingText = "Thinking process completed.";
+        }
+
+        if (thinkingText) {
+          currentAssistantTurn.thinking += (currentAssistantTurn.thinking ? "\n\n" : "") + thinkingText;
+        }
+        continue;
+      }
+
+      // 3. Function Call / Tool Invocations
+      if (type === "function_call" || type === "local_shell_call" || type === "custom_tool_call") {
+        if (!currentAssistantTurn) {
+          currentAssistantTurn = {
+            id: `turn-asst-${turns.length}`,
+            role: "assistant",
+            timestamp,
+            content: "",
+            thinking: "",
+            toolCalls: [],
+            tokens: { input: 0, output: 0, cached: 0 },
+            status: "completed",
+          };
+        }
+
+        let parsedArgs = {};
+        if (typeof payload.arguments === "string") {
+          try {
+            parsedArgs = JSON.parse(payload.arguments);
+          } catch {
+            parsedArgs = { raw: payload.arguments };
+          }
+        } else if (payload.arguments && typeof payload.arguments === "object") {
+          parsedArgs = payload.arguments;
+        }
+
+        const toolName = payload.name || payload.tool || "tool";
+        const { type: toolType, detail } = normalizeCodexTool(toolName, parsedArgs);
+        const callId = payload.call_id || payload.id || `tool-${currentAssistantTurn.toolCalls.length}`;
+
+        currentAssistantTurn.toolCalls.push({
+          id: callId,
+          name: toolName,
+          type: toolType,
+          summary: detail || toolName,
+          action: toolName,
+          args: parsedArgs,
+          output: "",
+          status: "completed",
+        });
+        continue;
+      }
+
+      // 4. Function Call Output / Tool Result
+      if (type === "function_call_output") {
+        const callId = payload.call_id;
+        const outputVal = typeof payload.output === "string" ? payload.output : JSON.stringify(payload.output || "");
+
+        if (currentAssistantTurn) {
+          const match = currentAssistantTurn.toolCalls.find((t) => t.id === callId);
+          if (match) {
+            match.output = outputVal;
+            if (outputVal.includes("exited with code 1") || outputVal.includes("Error:") || outputVal.includes("failed")) {
+              match.status = "error";
+            }
+          }
+        }
+        continue;
+      }
+    }
+
+    if (entry.type === "event_msg") {
+      if (payload.type === "token_count") {
+        const usage = payload.info?.total_token_usage;
+        if (usage) {
+          if (usage.input_tokens) totalInput = usage.input_tokens;
+          if (usage.output_tokens) totalOutput = usage.output_tokens;
+          if (usage.cached_input_tokens) totalCached = usage.cached_input_tokens;
+          if (currentAssistantTurn) {
+            currentAssistantTurn.tokens = {
+              input: usage.input_tokens || 0,
+              output: usage.output_tokens || 0,
+              cached: usage.cached_input_tokens || 0,
+            };
+          }
+        }
+        continue;
+      }
+
+      if (payload.type === "task_complete") {
+        if (payload.error?.message && currentAssistantTurn) {
+          currentAssistantTurn.status = "error";
+          currentAssistantTurn.error = payload.error.message;
+          if (!currentAssistantTurn.content) {
+            currentAssistantTurn.content = payload.error.message;
+          }
+        }
+      }
+    }
+  }
+
+  // Push final assistant turn if present
+  if (currentAssistantTurn && (currentAssistantTurn.content || currentAssistantTurn.toolCalls.length > 0 || currentAssistantTurn.thinking)) {
+    turns.push(currentAssistantTurn);
+  }
+
+  const { clientType, label } = classifyCodexSession(originator, source);
+  const startMs = startedAt ? new Date(startedAt).getTime() : Date.now();
+  const endMs = updatedAt ? new Date(updatedAt).getTime() : startMs;
+
+  return {
+    ok: true,
+    session: {
+      id: sessionMeta?.session_id || cleanId,
+      cli: "codex",
+      clientType,
+      label,
+      model,
+      startedAt,
+      updatedAt,
+      durationMs: Math.max(0, endMs - startMs),
+      cwd,
+      tokens: {
+        input: totalInput,
+        output: totalOutput,
+        cached: totalCached,
+      },
+      turnsCount: turns.length,
+    },
+    turns,
+  };
+}

package/src/lib/parsers/transcriptParser.js

@@ -1,11 +1,13 @@
 import { parseAntigravityTranscript } from "./antigravityParser.js";
 import { parseClaudeTranscript } from "./claudeParser.js";
+import { parseCodexTranscript } from "./codexParser.js";
 import { redactDeep } from "./secretRedactor.js";
 
 function generateMockTranscript(rawId) {
   const isClaude = rawId.includes("claude");
-  const model = isClaude ? "claude-3-7-sonnet" : "gemini-2.5-pro";
-  const cli = isClaude ? "claude" : "antigravity";
+  const isCodex = rawId.includes("codex");
+  const model = isClaude ? "claude-3-7-sonnet" : isCodex ? "gpt-5.6-terra" : "gemini-2.5-pro";
+  const cli = isClaude ? "claude" : isCodex ? "codex" : "antigravity";
 
   return {
     ok: true,
@@ -117,7 +119,7 @@ export async function getSessionTranscript(rawId, cliHint = "") {
     return generateMockTranscript(rawId);
   }
 
-  // Strip prefixes like "agy-" or "claude-" if present
+  // Strip prefixes like "agy-", "claude-", or "codex-" if present
   let cli = cliHint.toLowerCase();
   if (id.startsWith("agy-")) {
     cli = "antigravity";
@@ -125,6 +127,22 @@ export async function getSessionTranscript(rawId, cliHint = "") {
   } else if (id.startsWith("claude-")) {
     cli = "claude";
     id = id.slice(7);
+  } else if (id.startsWith("codex-")) {
+    cli = "codex";
+    id = id.slice(6);
+  }
+
+  if (cli === "codex") {
+    try {
+      const res = await parseCodexTranscript(id);
+      return {
+        ...res,
+        session: redactDeep(res.session),
+        turns: redactDeep(res.turns),
+      };
+    } catch (err) {
+      throw err;
+    }
   }
 
   // If ID was formatted as short hash in traceId, try to resolve full directory in brain
@@ -158,5 +176,19 @@ export async function getSessionTranscript(rawId, cliHint = "") {
     }
   }
 
+  // Fallback to codex if no cli specified
+  if (!cli) {
+    try {
+      const res = await parseCodexTranscript(id);
+      return {
+        ...res,
+        session: redactDeep(res.session),
+        turns: redactDeep(res.turns),
+      };
+    } catch {
+      // ignore
+    }
+  }
+
   throw new Error(`Unable to locate transcript for session ID "${rawId}"`);
 }

package/src/lib/supporterStore.js

@@ -153,7 +153,7 @@ export function unlockWithCode(code) {
     saveAndNotify(nextState);
     return {
       success: true,
-      message: "Congratulations! You have unlocked all 1,000 items and VIP Supporter status.",
+      message: "Congratulations! You have unlocked all items and VIP Supporter status.",
       state: nextState,
     };
   }

package/src/lib/traceContract.js

@@ -23,7 +23,7 @@ export function normalizeTrace(raw) {
   return {
     traceId: String(raw.traceId || `trace-${Math.random().toString(36).slice(2, 9)}`),
     cli: raw.cli || "agent", // "antigravity" | "claude" | "cursor" | etc.
-    clientType, // "app" | "cli" | "ide" | "extension"
+    clientType, // "app" | "cli" | "ide" | "extension" | "desktop"
     source: raw.source || clientType,
     connectionId: String(raw.connectionId || "Agent Desk"),
     account: String(raw.account || "Default Workspace"),

package/src/lib/useFactoryTraces.js

@@ -5,7 +5,57 @@ import { generateMockTraces, mockProviderDescriptors, MOCK_PRESETS } from "./moc
 import { playTick, playComplete, playAlarm, playNeedInput } from "./soundFx";
 import { notifyAgentDone, notifyAgentAlert } from "./notifications";
 
-export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
+export const TIMEFRAME_HOURS_MAP = {
+  "1h": 1,
+  "6h": 6,
+  "24h": 24,
+  "3d": 72,
+  "7d": 168,
+  "all": 0,
+};
+
+export function useFactoryTraces({
+  mode = "live",
+  preset = "cases",
+  initialTop = 20,
+  initialTimeframe = "24h",
+} = {}) {
+  const [top, setTop] = useState(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem("agmon_filter_settings");
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          if (parsed.top !== undefined) return parsed.top;
+        }
+      } catch {}
+    }
+    return initialTop;
+  });
+
+  const [timeframe, setTimeframe] = useState(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem("agmon_filter_settings");
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          if (parsed.timeframe) return parsed.timeframe;
+        }
+      } catch {}
+    }
+    return initialTimeframe;
+  });
+
+  const [totalCount, setTotalCount] = useState(0);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem("agmon_filter_settings", JSON.stringify({ top, timeframe }));
+      } catch {}
+    }
+  }, [top, timeframe]);
+
   const [traces, setTraces] = useState([]);
   const [providers, setProviders] = useState([]);
   const [connected, setConnected] = useState(false);
@@ -88,8 +138,11 @@ export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
 
     const cfg = MOCK_PRESETS[preset] || MOCK_PRESETS.cases;
     const updateMock = () => {
-      const next = generateMockTraces({ count: cfg.agents, cases: !!cfg.cases, errorRatio: cfg.errorRatio, preset });
+      const allMock = generateMockTraces({ count: cfg.agents, cases: !!cfg.cases, errorRatio: cfg.errorRatio, preset });
+      const limit = top === "all" ? 0 : Number(top);
+      const next = (limit > 0 && limit < allMock.length) ? allMock.slice(0, limit) : allMock;
       setTraces(next);
+      setTotalCount(allMock.length);
       triggerSoundEffects(next);
       setProviders(mockProviderDescriptors(next));
       setConnected(true);
@@ -99,7 +152,7 @@ export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
     updateMock();
     const interval = setInterval(updateMock, 3000);
     return () => clearInterval(interval);
-  }, [mode, preset, connectionEpoch]);
+  }, [mode, preset, top, timeframe, connectionEpoch, triggerSoundEffects]);
 
   // 2. Live Mode (SSE + Wake-up Watchdog)
   useEffect(() => {
@@ -119,7 +172,9 @@ export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
     };
 
     try {
-      const es = new EventSource("/api/traces/stream?source=live");
+      const hours = TIMEFRAME_HOURS_MAP[timeframe] ?? 24;
+      const limit = top === "all" ? 0 : Number(top);
+      const es = new EventSource(`/api/traces/stream?source=live&hours=${hours}&limit=${limit}`);
       eventSourceRef.current = es;
 
       es.onopen = () => {
@@ -137,6 +192,11 @@ export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
             setTraces(payload.traces);
             triggerSoundEffects(payload.traces);
           }
+          if (typeof payload.totalCount === "number") {
+            setTotalCount(payload.totalCount);
+          } else if (Array.isArray(payload.traces)) {
+            setTotalCount(payload.traces.length);
+          }
           if (Array.isArray(payload.providers)) {
             setProviders(payload.providers);
           }
@@ -164,7 +224,7 @@ export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
         eventSourceRef.current = null;
       }
     };
-  }, [mode, connectionEpoch]);
+  }, [mode, timeframe, top, connectionEpoch, triggerSoundEffects]);
 
   // 3. Auto-reconnect when laptop wakes up or tab gains focus (debounced & safe)
   useEffect(() => {
@@ -201,6 +261,11 @@ export function useFactoryTraces({ mode = "live", preset = "cases" } = {}) {
 
   return {
     traces,
+    totalCount,
+    top,
+    setTop,
+    timeframe,
+    setTimeframe,
     providers,
     connected,
     live: mode === "live",