agmon 0.0.0-stage → 0.1.1

package/public/sw.js

@@ -0,0 +1,42 @@
+const CACHE_NAME = "agent-factory-v1";
+const STATIC_ASSETS = ["/manifest.json", "/favicon.svg", "/icons/icon.svg"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(STATIC_ASSETS).catch(() => {});
+    })
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) => {
+      return Promise.all(
+        keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const url = event.request.url;
+
+  // NEVER intercept Next.js chunks, HMR, or API SSE streams!
+  if (
+    url.includes("/_next/") ||
+    url.includes("/api/") ||
+    event.request.method !== "GET"
+  ) {
+    return;
+  }
+
+  // Network-first for HTML pages so user always sees the latest UI
+  event.respondWith(
+    fetch(event.request).catch(() => {
+      return caches.match(event.request);
+    })
+  );
+});

package/src/app/api/traces/stream/route.js

@@ -0,0 +1,89 @@
+import { getAllLiveTraces, getProvidersFromTraces } from "@/lib/watchers/watcherManager.js";
+import { generateMockTraces, mockProviderDescriptors, MOCK_PRESETS } from "@/lib/mockTraces.js";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request) {
+  const { searchParams } = new URL(request.url);
+  const source = searchParams.get("source") || "live";
+  const mockPreset = searchParams.get("mockPreset") || searchParams.get("preset");
+
+  const encoder = new TextEncoder();
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      let isAlive = true;
+
+      const send = (data) => {
+        if (!isAlive) return;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\n\n`));
+        } catch {
+          isAlive = false;
+        }
+      };
+
+      const pushUpdate = async () => {
+        if (!isAlive) return;
+
+        if (source === "mock" || mockPreset) {
+          const presetConfig = MOCK_PRESETS[mockPreset] || MOCK_PRESETS.cases;
+          const traces = generateMockTraces({
+            count: presetConfig.agents,
+            errorRatio: presetConfig.errorRatio,
+            cases: !!presetConfig.cases,
+            seed: 42,
+          });
+          const providers = mockProviderDescriptors(traces);
+          send({ traces, providers, timestamp: Date.now(), mode: "mock", preset: mockPreset || "cases" });
+          return;
+        }
+
+        // Live Mode
+        try {
+          const liveTraces = await getAllLiveTraces();
+          const providers = getProvidersFromTraces(liveTraces);
+          send({
+            traces: liveTraces,
+            providers,
+            timestamp: Date.now(),
+            mode: "live",
+            activeAgents: liveTraces.filter((t) => t.state === "streaming" || t.state === "pending").length,
+          });
+        } catch (err) {
+          console.error("[SSE] Failed to fetch live traces:", err);
+        }
+      };
+
+      // Initial push
+      await pushUpdate();
+
+      // Poll interval: 1.5 seconds for fresh log watcher updates
+      const interval = setInterval(async () => {
+        if (!isAlive) {
+          clearInterval(interval);
+          return;
+        }
+        await pushUpdate();
+      }, 1500);
+
+      request.signal.addEventListener("abort", () => {
+        isAlive = false;
+        clearInterval(interval);
+        try {
+          controller.close();
+        } catch {
+          // ignore
+        }
+      });
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream; charset=utf-8",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}

package/src/app/api/version/route.js

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import fs from "node:fs";
+import path from "node:path";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const pkgPath = path.resolve(process.cwd(), "package.json");
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    return NextResponse.json({
+      version: pkg.version || "0.1.0",
+      uptime: Math.round(process.uptime()),
+      timestamp: Date.now(),
+    });
+  } catch {
+    return NextResponse.json({
+      version: "0.1.0",
+      uptime: Math.round(process.uptime()),
+      timestamp: Date.now(),
+    });
+  }
+}

package/src/app/globals.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0b0f17;
+  --foreground: #f1f5f9;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}

package/src/app/layout.js

@@ -0,0 +1,42 @@
+import "./globals.css";
+import PwaRegister from "@/components/PwaRegister";
+
+export const metadata = {
+  title: "AGMon - AI Agent Office & Activity Visualizer",
+  description: "Realtime activity and token flow visualizer for Antigravity, Claude Code & AI CLIs",
+  manifest: "/manifest.json",
+  icons: {
+    icon: "/favicon.svg",
+    apple: "/icons/icon.svg",
+  },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "AGMon",
+  },
+};
+
+export const viewport = {
+  themeColor: "#070b12",
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="apple-touch-icon" href="/icons/icon.svg" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+      </head>
+      <body className="antialiased bg-[#070b12] text-slate-100 select-none">
+        <PwaRegister />
+        {children}
+      </body>
+    </html>
+  );
+}

package/src/app/page.js

@@ -0,0 +1,174 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useMemo, useState } from "react";
+import { useFactoryTraces } from "@/lib/useFactoryTraces";
+import { buildOffice } from "@/components/factory/scene/office-layout";
+import AgentPanel from "@/components/factory/AgentPanel";
+import UpdateNotification from "@/components/UpdateNotification";
+
+// Dynamic import of PixiJS Canvas to avoid WebGL execution during SSR
+const OfficeCanvas = dynamic(() => import("@/components/factory/office-canvas"), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-full w-full items-center justify-center bg-[#080d14] text-slate-500">
+      <div className="flex flex-col items-center gap-2">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
+        <span className="text-xs font-mono">Initializing Agent Factory Scene...</span>
+      </div>
+    </div>
+  ),
+});
+
+const PRESETS = [
+  { id: "cases", label: "Edge Cases" },
+  { id: "storm", label: "Storm (30 Agents)" },
+  { id: "busy", label: "Busy (8 Agents)" },
+  { id: "idle", label: "Idle (2 Agents)" },
+  { id: "errors", label: "Error States" },
+];
+
+export default function FactoryPage() {
+  const [mode, setMode] = useState("live");
+  const [mockPreset, setMockPreset] = useState("cases");
+  const [selectedId, setSelectedId] = useState(null);
+
+  const { traces, connected, live, isRefreshing, refresh } = useFactoryTraces({ mode, preset: mockPreset });
+
+  const office = useMemo(() => buildOffice(traces), [traces]);
+  const selected = useMemo(
+    () => office.workstations.find((w) => w.connectionId === selectedId) || null,
+    [office, selectedId]
+  );
+
+  return (
+    <main className="flex h-screen w-screen flex-col overflow-hidden bg-[#070b12] text-slate-100">
+      <UpdateNotification />
+
+      {/* Top Header / Nav */}
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-slate-800/80 bg-slate-950/70 px-5 backdrop-blur-md">
+        {/* Brand */}
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-600 shadow-lg shadow-emerald-500/20">
+            <span className="text-lg">🤖</span>
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="font-extrabold tracking-wider text-sm bg-gradient-to-r from-emerald-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
+                AGMON
+              </span>
+              <span className="rounded-full bg-slate-800 px-2 py-0.5 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">
+                v0.1.0
+              </span>
+            </div>
+            <p className="text-[11px] text-slate-400">AI Agent Office & Activity Visualizer</p>
+          </div>
+        </div>
+
+        {/* Live Counters */}
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-1 text-xs">
+            <span className="text-slate-400">Desks:</span>
+            <span className="font-bold text-slate-200">{office.stats.agents}</span>
+          </div>
+          <div className="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-1 text-xs">
+            <span className="text-slate-400">Working:</span>
+            <span className="font-bold text-cyan-400">{office.stats.busy}</span>
+          </div>
+          <div className="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-1 text-xs">
+            <span className="text-slate-400">Tokens:</span>
+            <span className="font-bold text-emerald-400">{office.stats.tokensLabel}</span>
+          </div>
+        </div>
+
+        {/* Mode & Preset Controls */}
+        <div className="flex items-center gap-2">
+          {/* Force Refresh Button */}
+          <button
+            onClick={refresh}
+            title="Làm mới kết nối & dữ liệu ngay lập tức"
+            className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-800 bg-slate-900/60 text-slate-400 hover:border-slate-700 hover:text-slate-200 transition-all"
+          >
+            <svg
+              className={`h-4 w-4 ${isRefreshing ? "animate-spin text-emerald-400" : ""}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+          </button>
+
+          {/* Live Button */}
+          <button
+            onClick={() => {
+              setMode("live");
+              setSelectedId(null);
+            }}
+            className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all ${
+              mode === "live"
+                ? "border border-emerald-500 bg-emerald-500/15 text-emerald-300 shadow-sm shadow-emerald-500/20"
+                : "border border-slate-800 bg-slate-900/40 text-slate-400 hover:border-slate-700 hover:text-slate-200"
+            }`}
+          >
+            <span
+              className={`h-2 w-2 rounded-full ${
+                connected && live ? "bg-emerald-400 animate-pulse shadow-sm shadow-emerald-400" : "bg-slate-500"
+              }`}
+            />
+            Live Watchers
+          </button>
+
+          {/* Preset Selector */}
+          <div className="flex items-center rounded-lg border border-slate-800 bg-slate-900/60 p-0.5 text-xs">
+            <button
+              onClick={() => {
+                setMode("mock");
+                setSelectedId(null);
+              }}
+              className={`rounded-md px-2.5 py-1 transition-all ${
+                mode === "mock"
+                  ? "bg-slate-800 font-medium text-slate-200"
+                  : "text-slate-400 hover:text-slate-300"
+              }`}
+            >
+              Demo Mock:
+            </button>
+            <select
+              value={mockPreset}
+              onChange={(e) => {
+                setMode("mock");
+                setMockPreset(e.target.value);
+                setSelectedId(null);
+              }}
+              className="bg-transparent px-2 py-1 text-xs text-slate-300 outline-none cursor-pointer"
+            >
+              {PRESETS.map((p) => (
+                <option key={p.id} value={p.id} className="bg-slate-900 text-slate-200">
+                  {p.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Canvas Area */}
+      <section className="relative flex-1 p-3">
+        <OfficeCanvas
+          traces={traces}
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+        />
+
+        {/* Selected Agent Inspector */}
+        <AgentPanel ws={selected} onClose={() => setSelectedId(null)} />
+      </section>
+    </main>
+  );
+}

package/src/components/PwaRegister.js

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function PwaRegister() {
+  useEffect(() => {
+    if (typeof window === "undefined" || !("serviceWorker" in navigator)) return;
+
+    // In development mode, unregister any active service worker so it never interferes with Turbopack/HMR
+    if (process.env.NODE_ENV !== "production") {
+      navigator.serviceWorker.getRegistrations().then((registrations) => {
+        for (const registration of registrations) {
+          registration.unregister();
+        }
+      });
+      return;
+    }
+
+    // In production, register the service worker for PWA
+    navigator.serviceWorker
+      .register("/sw.js")
+      .then((reg) => {
+        console.log("[PWA] Service Worker registered:", reg.scope);
+      })
+      .catch((err) => {
+        console.warn("[PWA] Service Worker registration failed:", err);
+      });
+  }, []);
+
+  return null;
+}

package/src/components/UpdateNotification.js

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function UpdateNotification() {
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [newVersion, setNewVersion] = useState(null);
+
+  useEffect(() => {
+    // 1. Service Worker update listener (PWA)
+    if (typeof window !== "undefined" && "serviceWorker" in navigator) {
+      navigator.serviceWorker.ready.then((registration) => {
+        registration.addEventListener("updatefound", () => {
+          const newWorker = registration.installing;
+          if (newWorker) {
+            newWorker.addEventListener("statechange", () => {
+              if (newWorker.state === "installed" && navigator.serviceWorker.controller) {
+                setUpdateAvailable(true);
+              }
+            });
+          }
+        });
+      });
+    }
+
+    // 2. Version polling from server API (/api/version)
+    let initialVersion = null;
+    const checkVersion = async () => {
+      try {
+        const res = await fetch("/api/version");
+        if (res.ok) {
+          const data = await res.json();
+          if (!initialVersion) {
+            initialVersion = data.version;
+          } else if (data.version && data.version !== initialVersion) {
+            setNewVersion(data.version);
+            setUpdateAvailable(true);
+          }
+        }
+      } catch {
+        // network error
+      }
+    };
+
+    checkVersion();
+    const interval = setInterval(checkVersion, 60 * 1000); // Check every 60s
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleApplyUpdate = () => {
+    if (typeof window !== "undefined") {
+      window.location.reload();
+    }
+  };
+
+  if (!updateAvailable) return null;
+
+  return (
+    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 rounded-full border border-emerald-500/40 bg-slate-900/95 px-4 py-2 shadow-2xl backdrop-blur-md animate-in slide-in-from-bottom-4 duration-300">
+      <span className="flex h-2 w-2 rounded-full bg-emerald-400 animate-ping" />
+      <span className="text-xs text-slate-200">
+        🚀 Đã có phiên bản mới {newVersion ? `(${newVersion})` : ""}
+      </span>
+      <button
+        onClick={handleApplyUpdate}
+        className="rounded-full bg-emerald-500 hover:bg-emerald-400 px-3 py-1 text-xs font-semibold text-slate-950 transition-colors shadow-sm"
+      >
+        Cập nhật ngay
+      </button>
+      <button
+        onClick={() => setUpdateAvailable(false)}
+        className="text-slate-400 hover:text-slate-200 text-xs ml-1"
+        aria-label="Dismiss"
+      >
+        ✕
+      </button>
+    </div>
+  );
+}

package/src/components/factory/AgentPanel.js

@@ -0,0 +1,92 @@
+"use client";
+
+const MODE_LABELS = {
+  streaming: "Working",
+  pending: "Queued",
+  done: "Done",
+  happy: "Done",
+  sleeping: "Idle",
+  error: "Failed",
+};
+
+function fmtMs(ms) {
+  if (!ms) return "0ms";
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+function InspectorRow({ label, value, color, mono = false }) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1 text-[12px] border-b border-slate-800/40 last:border-b-0">
+      <span className="text-slate-400 font-normal">{label}</span>
+      <span
+        className={`truncate font-medium ${mono ? "font-mono" : ""}`}
+        style={color ? { color } : undefined}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export default function AgentPanel({ ws, onClose }) {
+  if (!ws) return null;
+  const hex = `#${ws.color ? ws.color.toString(16).padStart(6, "0") : "38bdf8"}`;
+
+  return (
+    <div className="absolute right-4 top-4 z-20 w-80 rounded-xl border border-slate-700/80 bg-slate-900/90 p-4 shadow-2xl backdrop-blur-md transition-all animate-in fade-in slide-in-from-right-2">
+      {/* Header */}
+      <div className="mb-3 flex items-start justify-between gap-2 border-b border-slate-800 pb-2">
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5">
+            <span
+              className="inline-block h-2 w-2 rounded-full"
+              style={{ backgroundColor: hex }}
+            />
+            <div className="truncate text-sm font-bold text-slate-100">{ws.account}</div>
+          </div>
+          <div className="text-[11px] font-semibold uppercase tracking-wider mt-0.5" style={{ color: hex }}>
+            {MODE_LABELS[ws.mode] || ws.mode}
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="rounded-md p-1 text-slate-400 hover:bg-slate-800 hover:text-slate-100 transition-colors"
+          aria-label="Close"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Main Details */}
+      <div className="space-y-0.5">
+        <InspectorRow label="Agent / Desk" value={ws.connectionId} />
+        <InspectorRow label="Provider" value={ws.provider?.toUpperCase()} color="#38bdf8" />
+        <InspectorRow label="Model" value={ws.model} />
+        <InspectorRow label="Elapsed" value={fmtMs(ws.elapsedMs)} />
+        <InspectorRow label="Input Tokens" value={ws.tokens?.input?.toLocaleString() || "0"} mono />
+        <InspectorRow label="Output Tokens" value={ws.tokens?.output?.toLocaleString() || "0"} mono />
+        <InspectorRow
+          label="Cached"
+          value={`${ws.tokens?.cached?.toLocaleString() || "0"} (${ws.cachedPct || 0}%)`}
+          color="#34d399"
+          mono
+        />
+        <InspectorRow label="Active Tools" value={ws.tools?.length ? ws.tools.join(", ") : "None"} />
+        {ws.currentCommand && (
+          <div className="mt-2 rounded-md bg-slate-950/80 p-2 border border-slate-800/80">
+            <div className="text-[10px] text-slate-400 uppercase tracking-wider mb-1 font-semibold">Active Command / File</div>
+            <div className="font-mono text-[11px] text-emerald-400 truncate">{ws.currentCommand}</div>
+          </div>
+        )}
+        {ws.fallbackFrom && <InspectorRow label="Fallback From" value={ws.fallbackFrom} color="#fbbf24" />}
+        {ws.errorReason && <InspectorRow label="Error Cause" value={ws.errorReason} color="#ef4444" />}
+      </div>
+
+      <div className="mt-3 pt-2 border-t border-slate-800 text-[10px] text-slate-500 text-center">
+        Live telemetry via Local CLI Log Watcher
+      </div>
+    </div>
+  );
+}

package/src/components/factory/office-canvas.js

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { mountOfficeScene } from "./office-scene";
+
+export default function OfficeCanvas({ traces = [], onStats, onSelect, selectedId = null }) {
+  const hostRef = useRef(null);
+  const sceneRef = useRef(null);
+  const latest = useRef({ onSelect, selectedId, traces });
+
+  useEffect(() => {
+    latest.current = { onSelect, selectedId, traces };
+  });
+
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let disposed = false;
+    let handle = null;
+    const host = hostRef.current;
+    if (!host) return undefined;
+
+    const canvas = document.createElement("canvas");
+    canvas.style.position = "absolute";
+    canvas.style.inset = "0";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    canvas.style.display = "block";
+    host.appendChild(canvas);
+
+    (async () => {
+      try {
+        const mounted = await mountOfficeScene(canvas, latest.current.traces, {
+          selectedId: latest.current.selectedId,
+          onSelect: (id) => latest.current.onSelect?.(id),
+        });
+
+        if (disposed) {
+          mounted.destroy?.();
+          canvas.remove();
+          return;
+        }
+
+        handle = mounted;
+        sceneRef.current = handle;
+
+        // Immediately reconcile in case traces arrived during async init
+        if (latest.current.traces && latest.current.traces.length > 0) {
+          handle.rebuild?.(latest.current.traces);
+        }
+      } catch (err) {
+        console.error("[OfficeCanvas] mount failed:", err);
+        setError(err?.message || "Failed to start the scene");
+      }
+    })();
+
+    return () => {
+      disposed = true;
+      handle?.destroy?.();
+      sceneRef.current = null;
+      host?.replaceChildren();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (sceneRef.current) {
+      sceneRef.current.rebuild?.(traces);
+    }
+  }, [traces]);
+
+  useEffect(() => {
+    if (sceneRef.current) {
+      sceneRef.current.setSelected?.(selectedId);
+    }
+  }, [selectedId]);
+
+  useEffect(() => {
+    if (!onStats) return undefined;
+    const id = setInterval(() => {
+      onStats?.({ mounted: Boolean(sceneRef.current) });
+    }, 2000);
+    return () => clearInterval(id);
+  }, [onStats]);
+
+  return (
+    <div className="relative h-full w-full overflow-hidden rounded-xl border border-slate-800 bg-[#080d14] shadow-2xl">
+      <div ref={hostRef} className="absolute inset-0" />
+      {error && (
+        <div className="absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-rose-400">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}