agmon 0.2.0 → 0.2.1

package/src/components/layout/EditorTabs.jsx

@@ -21,6 +21,8 @@ export default function EditorTabs({
   activeTabId = "canvas",
   onSelectTab,
   onCloseTab,
+  isZenFullscreen = false,
+  onToggleZenFullscreen = null,
 }) {
   const containerRef = useRef(null);
 
@@ -93,6 +95,21 @@ export default function EditorTabs({
 
       {/* Right Tab Controls */}
       <div className="flex items-center px-2 gap-1 bg-[#252526] border-l border-[#1e1e1e] shrink-0 h-full">
+        {onToggleZenFullscreen && activeTabId === "canvas" && (
+          <button
+            type="button"
+            data-testid="editor-zen-fullscreen-btn"
+            onClick={onToggleZenFullscreen}
+            title={
+              isZenFullscreen
+                ? "Thoát toàn màn hình (ESC)"
+                : "Chế độ Chill toàn màn hình Virtual Office (Shift+F / ESC để thoát)"
+            }
+            className="p-1 mr-0.5 rounded text-slate-400 hover:text-cyan-300 hover:bg-[#333333] transition-colors cursor-pointer"
+          >
+            <Maximize2 className="w-3.5 h-3.5" />
+          </button>
+        )}
         <button
           onClick={() => {
             if (containerRef.current) {

package/src/components/layout/LayoutToggles.jsx

@@ -1,11 +1,11 @@
 "use client";
 
 import React from "react";
-import { PanelLeft, PanelBottom, PanelRight } from "lucide-react";
+import { PanelLeft, PanelBottom, PanelRight, Maximize2, Minimize2 } from "lucide-react";
 
 /**
  * VS Code Standard Layout Control Buttons
- * Renders 3 toggles: Primary Side Bar (Left), Bottom Panel, Secondary Side Bar (Right)
+ * Renders layout toggles: Primary Side Bar (Left), Bottom Panel, Secondary Side Bar (Right), Fullscreen Chill Mode
  */
 export default function LayoutToggles({
   isLeftSidebarVisible,
@@ -14,6 +14,8 @@ export default function LayoutToggles({
   onToggleLeftSidebar,
   onToggleBottomPanel,
   onToggleRightSidebar,
+  isZenFullscreen = false,
+  onToggleZenFullscreen = null,
 }) {
   const getButtonClass = (isActive) =>
     `inline-flex items-center justify-center p-1 rounded transition-colors ${
@@ -56,6 +58,33 @@ export default function LayoutToggles({
       >
         <PanelRight className="w-3.5 h-3.5" />
       </button>
+
+      {onToggleZenFullscreen && (
+        <>
+          <div className="w-[1px] h-3 bg-[#333333] my-auto mx-0.5" />
+          <button
+            type="button"
+            data-testid="toggle-zen-fullscreen"
+            title={
+              isZenFullscreen
+                ? "Thoát chế độ toàn màn hình Chill Mode (ESC)"
+                : "Chế độ Chill toàn màn hình Virtual Office (Shift+F / ESC để thoát)"
+            }
+            onClick={onToggleZenFullscreen}
+            className={`inline-flex items-center justify-center p-1 rounded transition-colors ${
+              isZenFullscreen
+                ? "bg-amber-500/20 border border-amber-500/50 text-amber-300 shadow-sm"
+                : "border border-transparent text-[#858585] hover:text-[#4fc1ff] hover:bg-[#2a2d2e]"
+            }`}
+          >
+            {isZenFullscreen ? (
+              <Minimize2 className="w-3.5 h-3.5 text-amber-400" />
+            ) : (
+              <Maximize2 className="w-3.5 h-3.5" />
+            )}
+          </button>
+        </>
+      )}
     </div>
   );
 }

package/src/components/layout/LeftSidebar.jsx

@@ -20,8 +20,10 @@ import {
   Bot,
   ShoppingBag,
   Blocks,
+  Monitor,
 } from "lucide-react";
 import FileExplorer from "./FileExplorer";
+import { TOTAL_CATALOG_COUNT } from "@/lib/catalog/index.js";
 
 export default function LeftSidebar({
   workstations = [],
@@ -72,6 +74,7 @@ export default function LeftSidebar({
   const groupedAgents = useMemo(() => {
     const groups = {
       extensions: [],
+      desktop: [],
       geminiApp: [],
       geminiCli: [],
       claude: [],
@@ -86,10 +89,13 @@ export default function LeftSidebar({
       const model = (w.model || "").toLowerCase();
 
       const isExtension = ct === "extension" || ct === "ide" || conn.includes("extension");
+      const isDesktop = ct === "desktop" || conn.includes("desktop");
       const isClaude = cli === "claude" || p.includes("claude") || p.includes("anthropic") || model.includes("claude");
 
       if (isExtension) {
         groups.extensions.push(w);
+      } else if (isDesktop) {
+        groups.desktop.push(w);
       } else if (ct === "app" || p.includes("app") || conn.includes("app")) {
         groups.geminiApp.push(w);
       } else if (isClaude) {
@@ -118,6 +124,9 @@ export default function LeftSidebar({
       agent.clientType === "extension" ||
       (agent.provider || "").includes("extension") ||
       (agent.connectionId || "").toLowerCase().includes("extension");
+    const isDesktop =
+      agent.clientType === "desktop" ||
+      (agent.connectionId || "").toLowerCase().includes("desktop");
 
     const previewText = agent.lastText
       ? `${agent.lastTextRole === "assistant" ? "AI: " : agent.lastTextRole === "user" ? "You: " : ""}${agent.lastText}`
@@ -156,11 +165,15 @@ export default function LeftSidebar({
                 {sessionTitle}
               </span>
 
-              {/* Client Tag: EXT vs APP vs CLI */}
+              {/* Client Tag: EXT vs DESKTOP vs APP vs CLI */}
               {isExt ? (
                 <span className="shrink-0 bg-sky-950/80 text-sky-300 border border-sky-500/40 text-[9px] font-bold px-1 rounded uppercase tracking-wider">
                   EXT
                 </span>
+              ) : isDesktop ? (
+                <span className="shrink-0 bg-orange-950/80 text-orange-300 border border-orange-500/40 text-[9px] font-bold px-1 rounded uppercase tracking-wider">
+                  DESK
+                </span>
               ) : isApp ? (
                 <span className="shrink-0 bg-purple-950/80 text-purple-300 border border-purple-500/40 text-[9px] font-bold px-1 rounded uppercase tracking-wider">
                   APP
@@ -321,6 +334,17 @@ export default function LeftSidebar({
                     </div>
                   )}
 
+                  {/* Claude Desktop */}
+                  {groupedAgents.desktop?.length > 0 && (
+                    <div className="mb-2">
+                      <div className="px-3 py-1 text-[9px] font-bold uppercase tracking-wider text-orange-400/90 flex items-center gap-1">
+                        <Monitor className="w-2.5 h-2.5" />
+                        <span>Claude Desktop ({groupedAgents.desktop.length})</span>
+                      </div>
+                      {groupedAgents.desktop.map(renderAgentRow)}
+                    </div>
+                  )}
+
                   {/* Gemini App Agents */}
                   {groupedAgents.geminiApp.length > 0 && (
                     <div className="mb-2">
@@ -470,13 +494,13 @@ export default function LeftSidebar({
             type="button"
             onClick={onOpenStore}
             className="w-full flex items-center justify-between p-2 rounded-lg bg-gradient-to-r from-amber-500/15 to-amber-600/10 hover:from-amber-500/25 hover:to-amber-600/20 border border-amber-500/30 text-amber-300 transition-all cursor-pointer text-xs"
-            title="Open Supporter Store: 1,000 Tech Items & 3D Effects"
+            title={`Open Supporter Store: ${TOTAL_CATALOG_COUNT} Tech Items & 3D Effects`}
           >
             <div className="flex items-center gap-2">
               <ShoppingBag className="w-4 h-4 text-amber-400" />
               <div className="text-left">
                 <div className="font-bold text-white text-[11px] leading-tight">Supporter Store</div>
-                <div className="text-[10px] text-amber-400/80">1,000 Tech Items & 3D Effects</div>
+                <div className="text-[10px] text-amber-400/80">{TOTAL_CATALOG_COUNT} Tech Items & 3D Effects</div>
               </div>
             </div>
             <span className="text-[9px] font-mono px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-500/40">

package/src/components/layout/RightSidebar.jsx

@@ -63,10 +63,10 @@ export default function RightSidebar({
   return (
     <div
       data-testid="secondary-sidebar-container"
-      className="flex flex-col h-full w-full bg-[#1e1e1e] text-[#cccccc] select-none overflow-hidden"
+      className="flex flex-col h-full w-full bg-[var(--bg-editor)] text-[var(--text-main)] select-none overflow-hidden"
     >
       {/* 1. Header with Tab Switches (Live Chat & Inspector) */}
-      <div className="h-[36px] min-h-[36px] bg-[#252526] border-b border-[#1e1e1e] px-2 flex items-center justify-between shrink-0">
+      <div className="h-[36px] min-h-[36px] bg-[var(--bg-card)] border-b border-[var(--border-subtle)] px-2 flex items-center justify-between shrink-0">
         {/* Navigation Tabs */}
         <div className="flex items-center gap-1">
           {/* Tab 1: Live Chat */}
@@ -75,8 +75,8 @@ export default function RightSidebar({
             onClick={() => handleTabClick("chat")}
             className={`flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-semibold transition-colors cursor-pointer ${
               currentTab === "chat"
-                ? "bg-[#1e1e1e] text-cyan-400 border border-[#3e3e42]"
-                : "text-slate-400 hover:text-slate-200 hover:bg-[#2d2d2d]"
+                ? "bg-[var(--bg-editor)] text-[var(--accent-primary)] border border-[var(--border-card)]"
+                : "text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)]"
             }`}
             title="View Agent Live Chat & Conversation Transcript"
           >
@@ -98,8 +98,8 @@ export default function RightSidebar({
             onClick={() => handleTabClick("inspector")}
             className={`flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-semibold transition-colors cursor-pointer ${
               currentTab === "inspector"
-                ? "bg-[#1e1e1e] text-cyan-400 border border-[#3e3e42]"
-                : "text-slate-400 hover:text-slate-200 hover:bg-[#2d2d2d]"
+                ? "bg-[var(--bg-editor)] text-[var(--accent-primary)] border border-[var(--border-card)]"
+                : "text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)]"
             }`}
             title="View Agent specs, telemetry, and token usage"
           >
@@ -115,7 +115,7 @@ export default function RightSidebar({
             <button
               onClick={() => openChatInNewWindow(selectedAgent.connectionId || selectedAgent.traceId)}
               title="Open in Detached Window (VS Code style)"
-              className="p-1 rounded text-slate-400 hover:text-cyan-300 hover:bg-[#333333] transition-colors cursor-pointer"
+              className="p-1 rounded text-[var(--text-muted)] hover:text-[var(--accent-primary)] hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
             >
               <AppWindow className="w-3.5 h-3.5" />
             </button>
@@ -125,7 +125,7 @@ export default function RightSidebar({
           <button
             onClick={onClose}
             title="Close Secondary Sidebar (Cmd+Alt+B)"
-            className="p-1 rounded text-slate-400 hover:text-white hover:bg-[#333333] transition-colors cursor-pointer"
+            className="p-1 rounded text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
           >
             <X className="w-3.5 h-3.5" />
           </button>

package/src/components/layout/TitleBar.jsx

@@ -53,6 +53,8 @@ export default function TitleBar({
   onToggleLeftSidebar,
   onToggleBottomPanel,
   onToggleRightSidebar,
+  isZenFullscreen = false,
+  onToggleZenFullscreen = null,
 }) {
   return (
     <header className="h-[34px] min-h-[34px] bg-[#1e1e1e] border-b border-[#2b2b2b] flex items-center justify-between px-3 text-[#cccccc] text-xs select-none shrink-0 z-40">
@@ -239,7 +241,7 @@ export default function TitleBar({
           {notifEnabled ? <Bell className="w-3 h-3" /> : <BellOff className="w-3 h-3" />}
         </button>
 
-        {/* Layout Toggles (Left, Bottom, Right) */}
+        {/* Layout Toggles (Left, Bottom, Right, Chill Fullscreen) */}
         <LayoutToggles
           isLeftSidebarVisible={layout?.isLeftSidebarVisible}
           isBottomPanelVisible={layout?.isBottomPanelVisible}
@@ -247,6 +249,8 @@ export default function TitleBar({
           onToggleLeftSidebar={onToggleLeftSidebar}
           onToggleBottomPanel={onToggleBottomPanel}
           onToggleRightSidebar={onToggleRightSidebar}
+          isZenFullscreen={isZenFullscreen}
+          onToggleZenFullscreen={onToggleZenFullscreen}
         />
       </div>
     </header>

package/src/components/layout/VSCodeWorkbench.jsx

@@ -59,6 +59,36 @@ export default function VSCodeWorkbench({
   const [isThemeModalOpen, setIsThemeModalOpen] = useState(false);
   const [themeModalTab, setThemeModalTab] = useState("themes");
   const [isSupporter, setIsSupporter] = useState(false);
+  const [isZenFullscreen, setIsZenFullscreen] = useState(false);
+
+  // Toggle Zen Fullscreen Chill Mode (with native browser fullscreen integration)
+  const handleToggleZenFullscreen = useCallback((forcedState) => {
+    setIsZenFullscreen((prev) => {
+      const next = typeof forcedState === "boolean" ? forcedState : !prev;
+      if (next) {
+        setActiveTabId("canvas");
+        if (typeof document !== "undefined" && document.documentElement?.requestFullscreen && !document.fullscreenElement) {
+          document.documentElement.requestFullscreen().catch(() => {});
+        }
+      } else {
+        if (typeof document !== "undefined" && document.fullscreenElement && document.exitFullscreen) {
+          document.exitFullscreen().catch(() => {});
+        }
+      }
+      return next;
+    });
+  }, []);
+
+  // Synchronize state when browser native fullscreen changes (e.g. user hits ESC natively)
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      if (typeof document !== "undefined" && !document.fullscreenElement && isZenFullscreen) {
+        setIsZenFullscreen(false);
+      }
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, [isZenFullscreen]);
 
   // Initialize and synchronize supporter store and ambient audio
   useEffect(() => {
@@ -318,11 +348,28 @@ export default function VSCodeWorkbench({
         setLayout((prev) => ({ ...prev, isRightSidebarVisible: !prev.isRightSidebarVisible }));
         return;
       }
+
+      // Escape -> Exit Zen Fullscreen Chill Mode
+      if (e.key === "Escape" && isZenFullscreen) {
+        e.preventDefault();
+        handleToggleZenFullscreen(false);
+        return;
+      }
+
+      // Shift+F -> Toggle Zen Fullscreen Chill Mode
+      if (e.shiftKey && (e.key === "f" || e.key === "F") && !modKey && !e.altKey) {
+        const tag = document.activeElement?.tagName?.toLowerCase();
+        if (tag !== "input" && tag !== "textarea") {
+          e.preventDefault();
+          handleToggleZenFullscreen();
+          return;
+        }
+      }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [isZenFullscreen, handleToggleZenFullscreen]);
 
   // When separator is dragged, dispatch resize event to keep Pixi.js Canvas crisp
   const handlePanelResize = useCallback(() => {
@@ -380,6 +427,8 @@ export default function VSCodeWorkbench({
         onToggleRightSidebar={() =>
           setLayout((p) => ({ ...p, isRightSidebarVisible: !p.isRightSidebarVisible }))
         }
+        isZenFullscreen={isZenFullscreen}
+        onToggleZenFullscreen={handleToggleZenFullscreen}
       />
 
       {/* 2. Middle Body: ActivityBar + Horizontal Resizable Panels */}
@@ -507,6 +556,8 @@ export default function VSCodeWorkbench({
                   activeTabId={activeTabId}
                   onSelectTab={setActiveTabId}
                   onCloseTab={handleCloseTab}
+                  isZenFullscreen={isZenFullscreen}
+                  onToggleZenFullscreen={handleToggleZenFullscreen}
                 />
 
                 {/* Editor Content */}
@@ -537,6 +588,10 @@ export default function VSCodeWorkbench({
                             traces={effectiveTraces}
                             selectedId={selectedId}
                             onSelect={(id) => handleSelectAgent(id)}
+                            isZenFullscreen={isZenFullscreen}
+                            onToggleZenFullscreen={handleToggleZenFullscreen}
+                            soundEnabled={soundEnabled}
+                            onToggleSound={onToggleSound}
                           />
                         )}
                       </div>
@@ -547,26 +602,34 @@ export default function VSCodeWorkbench({
                       <div
                         className={`absolute inset-0 transition-opacity ${
                           activeTabId === "canvas" ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"
+                        } ${
+                          isZenFullscreen
+                            ? "!fixed !inset-0 !z-40 !w-screen !h-screen !rounded-none !border-none"
+                            : ""
                         }`}
                       >
                         <OfficeCanvas
                           traces={effectiveTraces}
                           selectedId={selectedId}
                           onSelect={(id) => handleSelectAgent(id)}
+                          isZenFullscreen={isZenFullscreen}
+                          onToggleZenFullscreen={handleToggleZenFullscreen}
+                          soundEnabled={soundEnabled}
+                          onToggleSound={onToggleSound}
                         />
                       </div>
 
                       {/* Tab 2: Telemetry Stream */}
                       {activeTabId === "telemetry" && (
-                        <div className="absolute inset-0 p-4 overflow-auto font-mono text-xs bg-[#181818] text-slate-300">
-                          <div className="mb-3 flex items-center justify-between pb-2 border-b border-[#333333]">
-                            <h3 className="font-bold text-sm text-cyan-400">Realtime Telemetry Snapshots</h3>
-                            <span className="text-slate-500">
+                        <div className="absolute inset-0 p-4 overflow-auto font-mono text-xs bg-[var(--bg-editor)] text-[var(--text-main)]">
+                          <div className="mb-3 flex items-center justify-between pb-2 border-b border-[var(--border-subtle)]">
+                            <h3 className="font-bold text-sm text-[var(--accent-primary)]">Realtime Telemetry Snapshots</h3>
+                            <span className="text-[var(--text-muted)]">
                               {effectiveTraces.length} active sessions
                               {effectiveTraces.length > 30 ? " (latest 30)" : ""}
                             </span>
                           </div>
-                          <pre className="bg-[#121212] p-4 rounded border border-[#2b2b2b] text-[11px] text-emerald-400 leading-relaxed overflow-x-auto">
+                          <pre className="bg-[var(--bg-chat-code)] p-4 rounded border border-[var(--border-card)] text-[11px] text-[var(--text-chat-code)] leading-relaxed overflow-x-auto">
                             {telemetryJsonPreview}
                           </pre>
                         </div>
@@ -574,21 +637,21 @@ export default function VSCodeWorkbench({
 
                       {/* Tab 3: Specific Agent View */}
                       {activeTab?.type === "agent" && (
-                        <div className="absolute inset-0 p-4 overflow-auto bg-[#1e1e1e] text-slate-200">
+                        <div className="absolute inset-0 p-4 overflow-auto bg-[var(--bg-editor)] text-[var(--text-main)]">
                           <div className="max-w-3xl mx-auto space-y-4">
-                            <div className="flex items-center justify-between p-4 bg-[#252526] rounded-lg border border-[#333333]">
+                            <div className="flex items-center justify-between p-4 bg-[var(--bg-card)] rounded-lg border border-[var(--border-card)]">
                               <div>
-                                <h2 className="text-base font-bold text-white">
+                                <h2 className="text-base font-bold text-[var(--text-bright)]">
                                   {activeTab.title}
                                 </h2>
-                                <p className="text-xs text-slate-400">
+                                <p className="text-xs text-[var(--text-muted)]">
                                   Connection ID: {activeTab.agentData?.connectionId}
                                 </p>
                               </div>
                               <div className="flex items-center gap-2">
                                 <button
                                   onClick={() => handleStartReplay(activeTab.agentData?.connectionId)}
-                                  className="px-3.5 py-1.5 bg-[#007acc] hover:bg-[#0062a3] text-white rounded text-xs font-semibold cursor-pointer flex items-center gap-1.5 shadow-sm"
+                                  className="px-3.5 py-1.5 bg-[var(--accent-primary)] hover:opacity-90 text-[var(--text-on-accent,#ffffff)] rounded text-xs font-semibold cursor-pointer flex items-center gap-1.5 shadow-sm"
                                   title="Replay Session (Default)"
                                 >
                                   <RotateCcw className="w-3.5 h-3.5" />
@@ -596,17 +659,17 @@ export default function VSCodeWorkbench({
                                 </button>
                                 <button
                                   onClick={() => handleOpenConversation(activeTab.agentData?.connectionId)}
-                                  className="px-3.5 py-1.5 bg-[#252526] hover:bg-[#333333] border border-[#3e3e42] text-slate-200 hover:text-white rounded text-xs font-semibold cursor-pointer flex items-center gap-1.5"
+                                  className="px-3.5 py-1.5 bg-[var(--bg-card-inner)] hover:bg-[var(--bg-hover)] border border-[var(--border-card)] text-[var(--text-main)] hover:text-[var(--text-bright)] rounded text-xs font-semibold cursor-pointer flex items-center gap-1.5"
                                   title="Pin live chat transcript to Right Sidebar"
                                 >
-                                  <MessageSquare className="w-3.5 h-3.5 text-cyan-400" />
+                                  <MessageSquare className="w-3.5 h-3.5 text-[var(--accent-secondary)]" />
                                   <span>Pin to Sidebar</span>
                                 </button>
                                 <button
                                   onClick={() => {
                                     openChatInNewWindow(activeTab.agentData?.connectionId);
                                   }}
-                                  className="px-3.5 py-1.5 bg-[#252526] hover:bg-[#333333] border border-[#3e3e42] text-cyan-400 hover:text-white rounded text-xs font-semibold cursor-pointer flex items-center gap-1.5"
+                                  className="px-3.5 py-1.5 bg-[var(--bg-card-inner)] hover:bg-[var(--bg-hover)] border border-[var(--border-card)] text-[var(--accent-primary)] hover:text-[var(--text-bright)] rounded text-xs font-semibold cursor-pointer flex items-center gap-1.5"
                                   title="Open in Detached Window (VS Code style)"
                                 >
                                   <AppWindow className="w-3.5 h-3.5" />
@@ -760,6 +823,7 @@ export default function VSCodeWorkbench({
         onToggleRightSidebar={() =>
           setLayout((p) => ({ ...p, isRightSidebarVisible: !p.isRightSidebarVisible }))
         }
+        onToggleZenFullscreen={handleToggleZenFullscreen}
         onOpenChatSidebar={() =>
           setLayout((p) => ({ ...p, isRightSidebarVisible: true, activeRightSidebarTab: "chat" }))
         }