@hienlh/ppm 0.2.21 → 0.4.0

package/src/providers/claude-agent-sdk.ts

@@ -300,10 +300,12 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       this.activeQueries.set(sessionId, q);
 
       let lastPartialText = "";
-      /** Number of tool_use blocks pending results (tools executing internally by SDK) */
+      /** Number of tool_use blocks pending results (top-level tools only, not subagent children) */
       let pendingToolCount = 0;
 
       for await (const msg of q) {
+        // Extract parent_tool_use_id from SDK message (present on subagent-scoped messages)
+        const parentId = (msg as any).parent_tool_use_id as string | undefined;
 
         // Yield any queued approval events
         while (approvalEvents.length > 0) {
@@ -326,9 +328,31 @@ export class ClaudeAgentSdkProvider implements AIProvider {
           continue;
         }
 
-        // When tools were pending and a new assistant/stream_event arrives,
+        // Handle `user` messages directly — they contain tool_result blocks (e.g. after Agent finishes).
+        // Extract tool_results from user messages that are top-level (no parentId).
+        if ((msg as any).type === "user" && !parentId) {
+          const userContent = (msg as any).message?.content;
+          if (Array.isArray(userContent)) {
+            for (const block of userContent) {
+              if (block.type === "tool_result") {
+                const output = block.content ?? block.output ?? "";
+                yield {
+                  type: "tool_result" as const,
+                  output: typeof output === "string" ? output : JSON.stringify(output),
+                  isError: !!block.is_error,
+                  toolUseId: block.tool_use_id as string | undefined,
+                };
+                if (pendingToolCount > 0) pendingToolCount--;
+              }
+            }
+          }
+          continue;
+        }
+
+        // When top-level tools were pending and a new TOP-LEVEL message arrives,
         // the SDK has finished executing tools. Fetch tool_results from session history.
-        if (pendingToolCount > 0 && (msg.type === "assistant" || (msg as any).type === "partial" || (msg as any).type === "stream_event")) {
+        // Skip this for child messages (parentId set) — subagent internals don't mean parent tools finished.
+        if (pendingToolCount > 0 && !parentId && (msg.type === "assistant" || (msg as any).type === "partial" || (msg as any).type === "stream_event")) {
           try {
             const sessionMsgs = await getSessionMessages(sdkId);
             // Find the last user message — it contains tool_result blocks
@@ -365,7 +389,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
               const text = event.delta.text ?? "";
               if (text) {
                 lastPartialText += text;
-                yield { type: "text", content: text };
+                yield { type: "text", content: text, ...(parentId && { parentToolUseId: parentId }) };
               }
             }
             continue;
@@ -380,7 +404,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
             if (fullText.length > lastPartialText.length) {
               const delta = fullText.slice(lastPartialText.length);
               lastPartialText = fullText;
-              yield { type: "text", content: delta };
+              yield { type: "text", content: delta, ...(parentId && { parentToolUseId: parentId }) };
             }
           }
           continue;
@@ -393,19 +417,25 @@ export class ClaudeAgentSdkProvider implements AIProvider {
             for (const block of content) {
               if (block.type === "text" && typeof block.text === "string") {
                 if (block.text.length > lastPartialText.length) {
-                  yield { type: "text", content: block.text.slice(lastPartialText.length) };
+                  yield { type: "text", content: block.text.slice(lastPartialText.length), ...(parentId && { parentToolUseId: parentId }) };
                 } else if (lastPartialText.length === 0) {
-                  yield { type: "text", content: block.text };
+                  yield { type: "text", content: block.text, ...(parentId && { parentToolUseId: parentId }) };
                 }
                 assistantContent += block.text;
                 lastPartialText = "";
               } else if (block.type === "tool_use") {
-                pendingToolCount++;
+                // Only track pending count for top-level tools (not subagent children).
+                // Child tools are executed internally by the SDK subagent — their results
+                // stream as child messages and don't need the pendingToolCount flush mechanism.
+                if (!parentId) {
+                  pendingToolCount++;
+                }
                 yield {
                   type: "tool_use",
                   tool: block.name ?? "unknown",
                   input: block.input ?? {},
                   toolUseId: block.id as string | undefined,
+                  ...(parentId && { parentToolUseId: parentId }),
                 };
               }
             }
@@ -549,6 +579,12 @@ export class ClaudeAgentSdkProvider implements AIProvider {
         merged.push(msg);
       }
 
+      // Nest child events under their parent Agent/Task tool_use's children array
+      for (const msg of merged) {
+        if (!msg.events) continue;
+        nestChildEvents(msg.events);
+      }
+
       return merged.filter(
         (msg) => msg.content.trim().length > 0 || (msg.events && msg.events.length > 0),
       );
@@ -559,9 +595,10 @@ export class ClaudeAgentSdkProvider implements AIProvider {
 }
 
 /** Parse SDK SessionMessage into ChatMessage with events for tool_use blocks */
-function parseSessionMessage(msg: { uuid: string; type: string; message: unknown }): ChatMessage {
+function parseSessionMessage(msg: { uuid: string; type: string; message: unknown; parent_tool_use_id?: string | null }): ChatMessage {
   const message = msg.message as Record<string, unknown> | undefined;
   const role = msg.type as "user" | "assistant";
+  const parentId = (msg as any).parent_tool_use_id as string | undefined;
 
   // Parse content blocks for both user and assistant messages
   const events: ChatEvent[] = [];
@@ -572,7 +609,7 @@ function parseSessionMessage(msg: { uuid: string; type: string; message: unknown
       if (block.type === "text" && typeof block.text === "string") {
         textContent += block.text;
         if (role === "assistant") {
-          events.push({ type: "text", content: block.text });
+          events.push({ type: "text", content: block.text, ...(parentId && { parentToolUseId: parentId }) });
         }
       } else if (block.type === "tool_use") {
         events.push({
@@ -580,6 +617,7 @@ function parseSessionMessage(msg: { uuid: string; type: string; message: unknown
           tool: (block.name as string) ?? "unknown",
           input: block.input ?? {},
           toolUseId: block.id as string | undefined,
+          ...(parentId && { parentToolUseId: parentId }),
         });
       } else if (block.type === "tool_result") {
         const output = block.content ?? block.output ?? "";
@@ -588,6 +626,7 @@ function parseSessionMessage(msg: { uuid: string; type: string; message: unknown
           output: typeof output === "string" ? output : JSON.stringify(output),
           isError: !!(block as Record<string, unknown>).is_error,
           toolUseId: block.tool_use_id as string | undefined,
+          ...(parentId && { parentToolUseId: parentId }),
         });
       }
     }
@@ -604,6 +643,40 @@ function parseSessionMessage(msg: { uuid: string; type: string; message: unknown
   };
 }
 
+/**
+ * Move events with parentToolUseId into their parent Agent/Task tool_use's children array.
+ * Mutates the array in-place: child events are removed from the top level and pushed into parent.children.
+ */
+function nestChildEvents(events: ChatEvent[]): void {
+  // Build map of Agent/Task tool_use events by toolUseId
+  const parentMap = new Map<string, ChatEvent & { type: "tool_use" }>();
+  for (const ev of events) {
+    if (ev.type === "tool_use" && (ev.tool === "Agent" || ev.tool === "Task") && ev.toolUseId) {
+      parentMap.set(ev.toolUseId, ev);
+    }
+  }
+  if (parentMap.size === 0) return;
+
+  // Collect indices of child events to remove
+  const childIndices: number[] = [];
+  for (let i = 0; i < events.length; i++) {
+    const ev = events[i]!;
+    const pid = (ev as any).parentToolUseId as string | undefined;
+    if (!pid) continue;
+    const parent = parentMap.get(pid);
+    if (parent) {
+      if (!parent.children) parent.children = [];
+      parent.children.push(ev);
+      childIndices.push(i);
+    }
+  }
+
+  // Remove children from flat array (reverse order to keep indices valid)
+  for (let i = childIndices.length - 1; i >= 0; i--) {
+    events.splice(childIndices[i]!, 1);
+  }
+}
+
 /** Extract plain text from message payload */
 function extractText(message: unknown): string {
   if (!message || typeof message !== "object") return "";

package/src/server/index.ts

@@ -10,7 +10,7 @@ import { staticRoutes } from "./routes/static.ts";
 import { projectScopedRouter } from "./routes/project-scoped.ts";
 import { terminalWebSocket } from "./ws/terminal.ts";
 import { chatWebSocket } from "./ws/chat.ts";
-import { ok } from "../types/api.ts";
+import { ok, err } from "../types/api.ts";
 
 /** Tee console.log/error to ~/.ppm/ppm.log while preserving terminal output */
 async function setupLogFile() {
@@ -96,6 +96,86 @@ if (process.env.NODE_ENV !== "production") {
 app.use("/api/*", authMiddleware);
 app.get("/api/auth/check", (c) => c.json(ok(true)));
 
+// Filesystem file listing (for command palette) — cross-platform
+app.get("/api/fs/list", async (c) => {
+  const dir = c.req.query("dir");
+  if (!dir) return c.json(err("dir is required"), 400);
+
+  try {
+    const path = await import("node:path");
+    const fs = await import("node:fs");
+    const { homedir } = await import("node:os");
+    const resolved = dir.startsWith("~") ? path.resolve(homedir(), dir.slice(2)) : path.resolve(dir);
+
+    const SKIP = new Set([".git", "node_modules", ".DS_Store"]);
+    const MAX_FILES = 200;
+    const MAX_DEPTH = 4;
+    const files: string[] = [];
+
+    function walk(dirPath: string, depth: number) {
+      if (depth > MAX_DEPTH || files.length >= MAX_FILES) return;
+      let entries: import("node:fs").Dirent[];
+      try { entries = fs.readdirSync(dirPath, { withFileTypes: true }); } catch { return; }
+      for (const entry of entries) {
+        if (SKIP.has(entry.name)) continue;
+        const full = path.join(dirPath, entry.name);
+        if (entry.isFile()) {
+          files.push(full);
+          if (files.length >= MAX_FILES) return;
+        } else if (entry.isDirectory()) {
+          walk(full, depth + 1);
+        }
+      }
+    }
+
+    walk(resolved, 0);
+    return c.json(ok(files));
+  } catch (e) {
+    return c.json(err((e as Error).message), 500);
+  }
+});
+
+// Filesystem file read (for opening files outside project) — cross-platform
+app.get("/api/fs/read", async (c) => {
+  const filePath = c.req.query("path");
+  if (!filePath) return c.json(err("path is required"), 400);
+
+  try {
+    const path = await import("node:path");
+    const fs = await import("node:fs");
+    const { homedir } = await import("node:os");
+    const resolved = filePath.startsWith("~") ? path.resolve(homedir(), filePath.slice(2)) : path.resolve(filePath);
+
+    if (!fs.existsSync(resolved)) return c.json(err("File not found"), 404);
+    const stat = fs.statSync(resolved);
+    if (!stat.isFile()) return c.json(err("Not a file"), 400);
+    if (stat.size > 5 * 1024 * 1024) return c.json(err("File too large (>5MB)"), 400);
+
+    const content = fs.readFileSync(resolved, "utf-8");
+    return c.json(ok({ content, path: resolved }));
+  } catch (e) {
+    return c.json(err((e as Error).message), 500);
+  }
+});
+
+// Filesystem file write (for saving files outside project) — cross-platform
+app.put("/api/fs/write", async (c) => {
+  const body = await c.req.json<{ path: string; content: string }>();
+  if (!body.path || body.content == null) return c.json(err("path and content required"), 400);
+
+  try {
+    const pathMod = await import("node:path");
+    const fs = await import("node:fs");
+    const { homedir } = await import("node:os");
+    const resolved = body.path.startsWith("~") ? pathMod.resolve(homedir(), body.path.slice(2)) : pathMod.resolve(body.path);
+
+    fs.writeFileSync(resolved, body.content, "utf-8");
+    return c.json(ok(true));
+  } catch (e) {
+    return c.json(err((e as Error).message), 500);
+  }
+});
+
 // API routes
 app.route("/api/settings", settingsRoutes);
 app.route("/api/push", pushRoutes);

package/src/server/ws/chat.ts

@@ -250,6 +250,16 @@ export const chatWebSocket = {
         (provider as any).ensureProjectPath(sessionId, entry.projectPath);
       }
 
+      // If already streaming, abort current query first and wait for cleanup
+      if (entry?.isStreaming && entry.abort) {
+        console.log(`[chat] session=${sessionId} aborting current query for new message`);
+        entry.abort.abort();
+        // Wait for stream loop to finish cleanup
+        if (entry.streamPromise) {
+          await entry.streamPromise;
+        }
+      }
+
       // Store promise reference on entry to prevent GC from collecting the async operation.
       // Use setTimeout(0) to detach from WS handler's async scope.
       if (entry) {

package/src/types/api.ts

@@ -28,9 +28,9 @@ export type ChatWsClientMessage =
   | { type: "approval_response"; requestId: string; approved: boolean; reason?: string; data?: unknown };
 
 export type ChatWsServerMessage =
-  | { type: "text"; content: string }
-  | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string }
-  | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string }
+  | { type: "text"; content: string; parentToolUseId?: string }
+  | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string; parentToolUseId?: string }
+  | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string; parentToolUseId?: string }
   | { type: "approval_request"; requestId: string; tool: string; input: unknown }
   | { type: "usage"; usage: { totalCostUsd?: number; fiveHour?: number; sevenDay?: number } }
   | { type: "done"; sessionId: string }

package/src/types/chat.ts

@@ -75,9 +75,9 @@ export type ResultSubtype =
   | "error_during_execution";
 
 export type ChatEvent =
-  | { type: "text"; content: string }
-  | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string }
-  | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string }
+  | { type: "text"; content: string; parentToolUseId?: string }
+  | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string; parentToolUseId?: string; children?: ChatEvent[] }
+  | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string; parentToolUseId?: string }
   | { type: "approval_request"; requestId: string; tool: string; input: unknown }
   | { type: "usage"; usage: UsageInfo }
   | { type: "error"; message: string }

package/src/web/app.tsx

@@ -31,6 +31,7 @@ export function App() {
     () => new Set(["__global__"]),
   );
   const theme = useSettingsStore((s) => s.theme);
+  const deviceName = useSettingsStore((s) => s.deviceName);
   const fetchProjects = useProjectStore((s) => s.fetchProjects);
   const fetchServerInfo = useSettingsStore((s) => s.fetchServerInfo);
   const activeProject = useProjectStore((s) => s.activeProject);
@@ -82,7 +83,7 @@ export function App() {
   useUrlSync();
 
   // Global keyboard shortcuts (Shift+Shift → command palette, Alt+[/] → cycle tabs)
-  const { paletteOpen, closePalette } = useGlobalKeybindings();
+  const { paletteOpen, paletteInitialQuery, closePalette } = useGlobalKeybindings();
 
   // Health check — detects server crash/restart
   useHealthCheck();
@@ -158,7 +159,14 @@ export function App() {
 
   return (
     <TooltipProvider>
-      <div className="h-dvh flex flex-col bg-background text-foreground overflow-hidden">
+      <div className="h-dvh flex flex-col bg-background text-foreground overflow-hidden relative">
+        {/* Mobile device name badge — floating top-left */}
+        {deviceName && (
+          <div className="md:hidden fixed top-0 left-0 z-50 px-2 py-0.5 bg-primary/80 text-primary-foreground text-[10px] font-medium rounded-br">
+            {deviceName}
+          </div>
+        )}
+
         {/* Main layout */}
         <div className="flex flex-1 overflow-hidden">
           {/* Desktop project bar (far left, non-collapsible) */}
@@ -200,7 +208,7 @@ export function App() {
         />
 
         {/* Command palette (Shift+Shift) */}
-        <CommandPalette open={paletteOpen} onClose={closePalette} />
+        <CommandPalette open={paletteOpen} onClose={closePalette} initialQuery={paletteInitialQuery} />
 
         {/* Toast notifications */}
         <Toaster

package/src/web/components/chat/chat-history-bar.tsx

@@ -0,0 +1,231 @@
+import { useState, useEffect, useCallback } from "react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search } from "lucide-react";
+import { Activity } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { useTabStore } from "@/stores/tab-store";
+import { AISettingsSection } from "@/components/settings/ai-settings-section";
+import { UsageDetailPanel } from "./usage-badge";
+import type { SessionInfo } from "../../../types/chat";
+import type { UsageInfo } from "../../../types/chat";
+
+type PanelType = "history" | "config" | "usage" | null;
+
+interface ChatHistoryBarProps {
+  projectName: string;
+  usageInfo: UsageInfo;
+  usageLoading?: boolean;
+  refreshUsage?: () => void;
+  lastUpdatedAt?: number | null;
+  sessionId?: string | null;
+  onBugReport?: () => void;
+  isConnected?: boolean;
+  onReconnect?: () => void;
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}
+
+function pctColor(pct: number): string {
+  if (pct >= 90) return "text-red-500";
+  if (pct >= 70) return "text-amber-500";
+  return "text-green-500";
+}
+
+export function ChatHistoryBar({
+  projectName, usageInfo, usageLoading, refreshUsage, lastUpdatedAt,
+  sessionId, onBugReport, isConnected, onReconnect,
+}: ChatHistoryBarProps) {
+  const [activePanel, setActivePanel] = useState<PanelType>(null);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const openTab = useTabStore((s) => s.openTab);
+
+  const togglePanel = (panel: PanelType) => {
+    setActivePanel((prev) => prev === panel ? null : panel);
+  };
+
+  const load = useCallback(async () => {
+    if (!projectName) return;
+    setLoading(true);
+    try {
+      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
+      setSessions(data);
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  }, [projectName]);
+
+  // Load sessions when history panel opens
+  useEffect(() => {
+    if (activePanel === "history" && sessions.length === 0) load();
+  }, [activePanel]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function openSession(session: SessionInfo) {
+    openTab({
+      type: "chat",
+      title: session.title || "Chat",
+      projectId: projectName ?? null,
+      metadata: { projectName, sessionId: session.id },
+      closable: true,
+    });
+  }
+
+  // Filter sessions by search query
+  const filteredSessions = searchQuery.trim()
+    ? sessions.filter((s) => (s.title || "").toLowerCase().includes(searchQuery.toLowerCase()))
+    : sessions;
+
+  // Usage badge display
+  const fiveHourPct = usageInfo.fiveHour != null ? Math.round(usageInfo.fiveHour * 100) : null;
+  const sevenDayPct = usageInfo.sevenDay != null ? Math.round(usageInfo.sevenDay * 100) : null;
+  const worstPct = Math.max(fiveHourPct ?? 0, sevenDayPct ?? 0);
+  const usageColor = fiveHourPct != null || sevenDayPct != null ? pctColor(worstPct) : "text-text-subtle";
+
+  return (
+    <div className="border-b border-border/50">
+      {/* Toolbar row — all buttons on one line */}
+      <div className="flex items-center gap-1 px-2 py-1">
+        {/* History */}
+        <button
+          onClick={() => togglePanel("history")}
+          className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
+            activePanel === "history" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
+          }`}
+        >
+          <History className="size-3" />
+          <span>History</span>
+        </button>
+
+        {/* Config */}
+        <button
+          onClick={() => togglePanel("config")}
+          className={`p-1 rounded transition-colors ${
+            activePanel === "config" ? "text-primary bg-primary/10" : "text-text-subtle hover:text-text-secondary hover:bg-surface-elevated"
+          }`}
+          title="AI Settings"
+        >
+          <Settings2 className="size-3" />
+        </button>
+
+        {/* Usage badge */}
+        <button
+          onClick={() => togglePanel("usage")}
+          className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium tabular-nums transition-colors hover:bg-surface-elevated ${
+            activePanel === "usage" ? "bg-primary/10" : ""
+          } ${usageColor}`}
+          title="Usage limits"
+        >
+          <Activity className="size-3" />
+          <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
+          <span className="text-text-subtle">·</span>
+          <span>Wk:{sevenDayPct != null ? `${sevenDayPct}%` : "--%"}</span>
+        </button>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Bug report */}
+        {sessionId && onBugReport && (
+          <button
+            onClick={onBugReport}
+            className="p-1 rounded hover:bg-surface-elevated text-text-subtle hover:text-text-secondary transition-colors"
+            title="Report bug"
+          >
+            <MessageSquare className="size-3" />
+          </button>
+        )}
+
+        {/* Connection indicator */}
+        {onReconnect && (
+          <button
+            onClick={onReconnect}
+            className="size-4 flex items-center justify-center"
+            title={isConnected ? "Connected" : "Disconnected — click to reconnect"}
+          >
+            <span className={`size-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500 animate-pulse"}`} />
+          </button>
+        )}
+      </div>
+
+      {/* Panels — only one visible at a time */}
+
+      {/* History panel */}
+      {activePanel === "history" && (
+        <div className="border-t border-border/30 bg-surface">
+          {/* Search + refresh */}
+          <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border/30">
+            <Search className="size-3 text-text-subtle shrink-0" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search sessions..."
+              className="flex-1 bg-transparent text-[11px] text-text-primary outline-none placeholder:text-text-subtle"
+            />
+            <button
+              onClick={load}
+              disabled={loading}
+              className="p-0.5 rounded text-text-subtle hover:text-text-secondary transition-colors disabled:opacity-50"
+              title="Refresh"
+            >
+              <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
+            </button>
+          </div>
+
+          <div className="max-h-[200px] overflow-y-auto">
+            {loading && sessions.length === 0 ? (
+              <div className="flex items-center justify-center py-3">
+                <Loader2 className="size-3.5 animate-spin text-text-subtle" />
+              </div>
+            ) : filteredSessions.length === 0 ? (
+              <div className="flex items-center justify-center py-3 text-[11px] text-text-subtle">
+                {searchQuery ? "No matching sessions" : "No sessions yet"}
+              </div>
+            ) : (
+              filteredSessions.map((session) => (
+                <button
+                  key={session.id}
+                  onClick={() => openSession(session)}
+                  className="flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors"
+                >
+                  <MessageSquare className="size-3 shrink-0 text-text-subtle" />
+                  <span className="text-[11px] truncate flex-1">{session.title || "Untitled"}</span>
+                  {session.updatedAt && (
+                    <span className="text-[10px] text-text-subtle shrink-0">{formatDate(session.updatedAt)}</span>
+                  )}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Config panel */}
+      {activePanel === "config" && (
+        <div className="border-t border-border/30 bg-surface px-3 py-2 max-h-[280px] overflow-y-auto">
+          <AISettingsSection compact />
+        </div>
+      )}
+
+      {/* Usage panel */}
+      {activePanel === "usage" && (
+        <UsageDetailPanel
+          usage={usageInfo}
+          visible={true}
+          onClose={() => setActivePanel(null)}
+          onReload={refreshUsage}
+          loading={usageLoading}
+          lastUpdatedAt={lastUpdatedAt}
+        />
+      )}
+    </div>
+  );
+}