agmon 0.2.0 → 0.2.2

package/src/components/layout/BottomPanel.jsx

@@ -53,12 +53,12 @@ export default function BottomPanel({
       return new Date().toLocaleTimeString();
     };
 
-    traces.forEach((t) => {
+    traces.forEach((t, tIdx) => {
       const account = t.account || "Agent";
       const model = t.model || "gemini-3.8-flash";
       const clientType = t.clientType || (t.provider?.includes("app") ? "app" : "cli");
       const provider = t.provider || "gemini";
-      const connId = t.connectionId || t.traceId || "agent";
+      const traceUniqueId = t.traceId || t.connectionId || `trace-${tIdx}`;
 
       // 1. Incorporate actual real-time event logs if present
       if (Array.isArray(t.logs) && t.logs.length > 0) {
@@ -66,7 +66,7 @@ export default function BottomPanel({
           const rawType = (logItem.type || "").toUpperCase();
           const level = rawType.includes("ERR") ? "ERROR" : rawType.includes("TOOL") ? "TOOL" : "STREAM";
           list.push({
-            id: `${connId}-${logItem.timestamp || lIdx}-${lIdx}`,
+            id: `${traceUniqueId}-${logItem.timestamp || lIdx}-${lIdx}`,
             time: formatLogTime(logItem.timestamp),
             level,
             provider,
@@ -81,7 +81,7 @@ export default function BottomPanel({
         // Fallback to trace state snapshot with stable IDs
         if (t.activeTool) {
           list.push({
-            id: `${connId}-tool-${t.activeTool}`,
+            id: `${traceUniqueId}-tool-${t.activeTool}`,
             time: formatLogTime(t.timestamp),
             level: "TOOL",
             provider,
@@ -95,7 +95,7 @@ export default function BottomPanel({
 
         if (t.state === "streaming" || t.state === "busy") {
           list.push({
-            id: `${connId}-stream`,
+            id: `${traceUniqueId}-stream`,
             time: formatLogTime(t.timestamp),
             level: "STREAM",
             provider,
@@ -108,7 +108,7 @@ export default function BottomPanel({
 
         if (t.state === "error") {
           list.push({
-            id: `${connId}-err`,
+            id: `${traceUniqueId}-err`,
             time: formatLogTime(t.timestamp),
             level: "ERROR",
             provider,

package/src/components/layout/CommandPalette.jsx

@@ -22,6 +22,7 @@ import {
   Type,
   Files,
   FolderTree,
+  Maximize2,
 } from "lucide-react";
 import { openChatInNewWindow } from "../../lib/windowManager.js";
 
@@ -34,6 +35,7 @@ export default function CommandPalette({
   onToggleLeftSidebar,
   onToggleBottomPanel,
   onToggleRightSidebar,
+  onToggleZenFullscreen,
   onOpenChatSidebar,
   onOpenFilesExplorer,
   onToggleSound,
@@ -96,6 +98,16 @@ export default function CommandPalette({
         onClose();
       },
     },
+    {
+      id: "toggle-zen-fullscreen",
+      title: "View: Toggle Virtual Office Chill Mode (Full Screen)",
+      shortcut: "Shift+F",
+      icon: Maximize2,
+      action: () => {
+        onToggleZenFullscreen?.();
+        onClose();
+      },
+    },
     {
       id: "toggle-right",
       title: "View: Toggle Secondary Side Bar (Live Chat & Inspector)",

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,11 @@ import {
   Bot,
   ShoppingBag,
   Blocks,
+  Monitor,
+  TerminalSquare,
 } from "lucide-react";
 import FileExplorer from "./FileExplorer";
+import { TOTAL_CATALOG_COUNT } from "@/lib/catalog/index.js";
 
 export default function LeftSidebar({
   workstations = [],
@@ -72,6 +75,9 @@ export default function LeftSidebar({
   const groupedAgents = useMemo(() => {
     const groups = {
       extensions: [],
+      desktop: [],
+      codexDesktop: [],
+      codexCli: [],
       geminiApp: [],
       geminiCli: [],
       claude: [],
@@ -85,11 +91,23 @@ export default function LeftSidebar({
       const conn = (w.connectionId || "").toLowerCase();
       const model = (w.model || "").toLowerCase();
 
+      const isCodex = cli === "codex" || p.includes("codex") || conn.includes("codex");
       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) {
+      if (isCodex) {
+        if (isExtension) {
+          groups.extensions.push(w);
+        } else if (isDesktop || ct === "app" || conn.includes("app")) {
+          groups.codexDesktop.push(w);
+        } else {
+          groups.codexCli.push(w);
+        }
+      } else 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 +136,10 @@ 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 isCodex = agent.cli === "codex" || (agent.connectionId || "").toLowerCase().includes("codex");
 
     const previewText = agent.lastText
       ? `${agent.lastTextRole === "assistant" ? "AI: " : agent.lastTextRole === "user" ? "You: " : ""}${agent.lastText}`
@@ -125,7 +147,7 @@ export default function LeftSidebar({
 
     return (
       <div
-        key={agent.connectionId || `agent-${idx}`}
+        key={agent.traceId || agent.connectionId || `agent-${idx}`}
         onClick={() => {
           onSelectAgent?.(agent.connectionId);
           onOpenAgentTab?.(agent);
@@ -156,11 +178,27 @@ export default function LeftSidebar({
                 {sessionTitle}
               </span>
 
-              {/* Client Tag: EXT vs APP vs CLI */}
-              {isExt ? (
+              {/* Client Tag: CODEX vs EXT vs DESKTOP vs APP vs CLI */}
+              {isCodex ? (
+                <span
+                  className={`shrink-0 text-[9px] font-bold px-1 rounded uppercase tracking-wider border ${
+                    isExt
+                      ? "bg-sky-950/80 text-sky-300 border-sky-500/40"
+                      : isDesktop || isApp
+                      ? "bg-teal-950/80 text-teal-300 border-teal-500/40"
+                      : "bg-teal-950/80 text-teal-300 border-teal-500/40"
+                  }`}
+                >
+                  {isExt ? "EXT" : isDesktop || isApp ? "DESK" : "CLI"}
+                </span>
+              ) : 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 +359,39 @@ 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>
+                  )}
+
+                  {/* Codex Desktop App */}
+                  {groupedAgents.codexDesktop?.length > 0 && (
+                    <div className="mb-2">
+                      <div className="px-3 py-1 text-[9px] font-bold uppercase tracking-wider text-teal-400/90 flex items-center gap-1">
+                        <Monitor className="w-2.5 h-2.5" />
+                        <span>Codex Desktop App ({groupedAgents.codexDesktop.length})</span>
+                      </div>
+                      {groupedAgents.codexDesktop.map(renderAgentRow)}
+                    </div>
+                  )}
+
+                  {/* Codex CLI */}
+                  {groupedAgents.codexCli?.length > 0 && (
+                    <div className="mb-2">
+                      <div className="px-3 py-1 text-[9px] font-bold uppercase tracking-wider text-teal-400/90 flex items-center gap-1">
+                        <TerminalSquare className="w-2.5 h-2.5" />
+                        <span>Codex CLI ({groupedAgents.codexCli.length})</span>
+                      </div>
+                      {groupedAgents.codexCli.map(renderAgentRow)}
+                    </div>
+                  )}
+
                   {/* Gemini App Agents */}
                   {groupedAgents.geminiApp.length > 0 && (
                     <div className="mb-2">
@@ -423,6 +494,17 @@ export default function LeftSidebar({
                 <Folder className="w-3.5 h-3.5 text-amber-400 shrink-0" />
                 <span className="truncate font-mono text-[10px]">~/.claude/projects</span>
               </div>
+              <div
+                onClick={() => {
+                  setExplorerPath("~/.codex/sessions");
+                  setActiveSidebarTab("files");
+                }}
+                className="flex items-center gap-2 text-slate-400 hover:text-teal-300 cursor-pointer p-1 rounded hover:bg-[#252526] transition-colors"
+                title="Click to browse Codex Sessions files"
+              >
+                <Folder className="w-3.5 h-3.5 text-teal-400 shrink-0" />
+                <span className="truncate font-mono text-[10px]">~/.codex/sessions</span>
+              </div>
             </div>
           )}
         </div>
@@ -470,13 +552,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/StatusBar.jsx

@@ -69,7 +69,7 @@ export default function StatusBar({
             <span>({selectedAgent.model || "gemini-3.8-flash"})</span>
           </div>
         ) : (
-          <span>Ready · Real-time monitoring Antigravity CLI, App & Claude</span>
+          <span>Ready · Real-time monitoring Antigravity, Claude & Codex (CLI & Desktop)</span>
         )}
       </div>
 

package/src/components/layout/TitleBar.jsx

@@ -15,6 +15,8 @@ import {
   Coffee,
   Palette,
   Sparkles,
+  ListFilter,
+  Clock,
 } from "lucide-react";
 import LayoutToggles from "./LayoutToggles";
 
@@ -34,6 +36,12 @@ const PRESETS = [
 
 export default function TitleBar({
   stats = {},
+  traces = [],
+  totalCount = 0,
+  top = 20,
+  onTopChange,
+  timeframe = "24h",
+  onTimeframeChange,
   mode = "live",
   mockPreset = "cases",
   onModeChange,
@@ -53,6 +61,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">
@@ -101,7 +111,11 @@ export default function TitleBar({
           className="hidden xl:flex items-center gap-1.5 bg-[#252526] hover:bg-[#2d2d2e] border border-[#333333] hover:border-[#007acc] px-2 py-0.5 rounded text-[11px] cursor-pointer transition-colors"
         >
           <span className="text-slate-400">Desks:</span>
-          <span className="font-bold text-slate-200">{stats?.agents ?? 0}</span>
+          <span className="font-bold text-slate-200">
+            {totalCount > 0 && traces.length > 0 && traces.length < totalCount
+              ? `${traces.length}/${totalCount}`
+              : (stats?.agents ?? traces.length ?? 0)}
+          </span>
           <span className="text-slate-600">|</span>
           <span className="text-slate-400">Active:</span>
           <span className="font-bold text-cyan-400">{stats?.busy ?? 0}</span>
@@ -110,6 +124,64 @@ export default function TitleBar({
           <span className="font-bold text-emerald-400">{stats?.tokensLabel ?? "0k"}</span>
         </div>
 
+        {/* Filter Controls: Top N & Timeframe */}
+        <div
+          data-testid="telemetry-filter-controls"
+          title="Filter active conversations by quantity and time range"
+          className="flex items-center rounded bg-[#252526] border border-[#333333] px-1.5 py-0.5 text-[11px] text-slate-300 gap-1.5 shadow-sm"
+        >
+          <div className="flex items-center gap-1 text-slate-400">
+            <ListFilter className="w-3 h-3 text-cyan-400 shrink-0" />
+            <span className="hidden 2xl:inline text-[10px] uppercase font-bold tracking-wider text-slate-400">Filter</span>
+          </div>
+
+          {/* Top N Dropdown */}
+          <select
+            data-testid="filter-top-select"
+            aria-label="Filter Top Conversations"
+            value={top}
+            onChange={(e) => onTopChange?.(e.target.value === "all" ? "all" : Number(e.target.value))}
+            className="bg-transparent text-[11px] text-slate-200 outline-none cursor-pointer hover:text-white font-medium pr-0.5"
+          >
+            <option value={10} className="bg-[#1e1e1e] text-slate-200">Top 10</option>
+            <option value={20} className="bg-[#1e1e1e] text-slate-200">Top 20</option>
+            <option value={30} className="bg-[#1e1e1e] text-slate-200">Top 30</option>
+            <option value={50} className="bg-[#1e1e1e] text-slate-200">Top 50</option>
+            <option value="all" className="bg-[#1e1e1e] text-slate-200">All Desks</option>
+          </select>
+
+          <span className="text-slate-600">|</span>
+
+          {/* Timeframe Dropdown */}
+          <div className="flex items-center gap-1">
+            <Clock className="w-3 h-3 text-amber-400 shrink-0" />
+            <select
+              data-testid="filter-timeframe-select"
+              aria-label="Filter Time Range"
+              value={timeframe}
+              onChange={(e) => onTimeframeChange?.(e.target.value)}
+              className="bg-transparent text-[11px] text-slate-200 outline-none cursor-pointer hover:text-white font-medium"
+            >
+              <option value="1h" className="bg-[#1e1e1e] text-slate-200">1h</option>
+              <option value="6h" className="bg-[#1e1e1e] text-slate-200">6h</option>
+              <option value="24h" className="bg-[#1e1e1e] text-slate-200">24h</option>
+              <option value="3d" className="bg-[#1e1e1e] text-slate-200">3d</option>
+              <option value="7d" className="bg-[#1e1e1e] text-slate-200">7d</option>
+              <option value="all" className="bg-[#1e1e1e] text-slate-200">All time</option>
+            </select>
+          </div>
+
+          {/* Filtered badge */}
+          {totalCount > 0 && traces.length > 0 && traces.length < totalCount && (
+            <span
+              title={`Showing ${traces.length} of ${totalCount} recorded conversations`}
+              className="hidden lg:inline-flex items-center px-1.5 py-0.2 rounded text-[10px] font-mono bg-cyan-950/60 text-cyan-300 border border-cyan-800/50"
+            >
+              {traces.length}/{totalCount}
+            </span>
+          )}
+        </div>
+
         {/* Quick Reports Button */}
         <button
           onClick={onOpenReports}
@@ -239,7 +311,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 +319,8 @@ export default function TitleBar({
           onToggleLeftSidebar={onToggleLeftSidebar}
           onToggleBottomPanel={onToggleBottomPanel}
           onToggleRightSidebar={onToggleRightSidebar}
+          isZenFullscreen={isZenFullscreen}
+          onToggleZenFullscreen={onToggleZenFullscreen}
         />
       </div>
     </header>