@hienlh/ppm 0.9.0-beta.2 → 0.9.0-beta.4

package/src/services/chat.service.ts

@@ -7,7 +7,6 @@ import type {
   ChatMessage,
   SendMessageOpts,
 } from "../providers/provider.interface.ts";
-import { MockProvider } from "../providers/mock-provider.ts";
 
 class ChatService {
   async createSession(
@@ -34,19 +33,18 @@ class ChatService {
     if (providerId) {
       const provider = providerRegistry.get(providerId);
       if (!provider) throw new Error(`Provider "${providerId}" not found`);
-      // Pass dir to providers that support it (SDK provider)
-      if (dir && "listSessionsByDir" in provider) {
-        return (provider as any).listSessionsByDir(dir);
+      if (dir && provider.listSessionsByDir) {
+        return provider.listSessionsByDir(dir);
       }
       return provider.listSessions();
     }
     // Aggregate from all providers
     const all: SessionInfo[] = [];
-    for (const info of providerRegistry.list()) {
+    for (const info of providerRegistry.listAll()) {
       const provider = providerRegistry.get(info.id);
       if (provider) {
-        if (dir && "listSessionsByDir" in provider) {
-          all.push(...await (provider as any).listSessionsByDir(dir));
+        if (dir && provider.listSessionsByDir) {
+          all.push(...await provider.listSessionsByDir(dir));
         } else {
           all.push(...await provider.listSessions());
         }
@@ -83,13 +81,13 @@ class ChatService {
 
   /** Look up a session across all providers (for WS handler) */
   getSession(sessionId: string): Session | null {
-    for (const info of providerRegistry.list()) {
+    for (const info of providerRegistry.listAll()) {
       const provider = providerRegistry.get(info.id);
       if (!provider) continue;
-      const sessions = (provider as any).sessions as Map<string, unknown> | undefined;
-      if (sessions?.has(sessionId)) {
+      // Use internal sessions Map — SDK stores {meta, sdk}, others store Session directly
+      const sessions = (provider as any).sessions ?? (provider as any).activeSessions;
+      if (sessions instanceof Map && sessions.has(sessionId)) {
         const entry = sessions.get(sessionId);
-        // SDK provider stores {meta, sdk}, others store Session directly
         if (entry && typeof entry === "object" && "meta" in entry) {
           return (entry as { meta: Session }).meta;
         }
@@ -102,10 +100,7 @@ class ChatService {
   async getMessages(providerId: string, sessionId: string): Promise<ChatMessage[]> {
     const provider = providerRegistry.get(providerId);
     if (!provider) return [];
-    if ("getMessages" in provider && typeof (provider as any).getMessages === "function") {
-      return await (provider as any).getMessages(sessionId);
-    }
-    return [];
+    return await provider.getMessages?.(sessionId) ?? [];
   }
 }
 

package/src/types/chat.ts

@@ -5,18 +5,35 @@ export interface SendMessageOpts {
 export interface AIProvider {
   id: string;
   name: string;
+
+  // Session lifecycle (required)
   createSession(config: SessionConfig): Promise<Session>;
   resumeSession(sessionId: string): Promise<Session>;
   listSessions(): Promise<SessionInfo[]>;
   deleteSession(sessionId: string): Promise<void>;
+
+  // Streaming (required)
   sendMessage(
     sessionId: string,
     message: string,
     opts?: SendMessageOpts,
   ): AsyncIterable<ChatEvent>;
-  /** Resolve a pending tool/question approval by requestId */
+
+  // Optional capabilities — providers implement what they support
   resolveApproval?(requestId: string, approved: boolean, data?: unknown): void;
   onToolApproval?: (callback: ToolApprovalHandler) => void;
+  abortQuery?(sessionId: string): void;
+  getMessages?(sessionId: string): Promise<ChatMessage[]>;
+  listSessionsByDir?(dir: string): Promise<SessionInfo[]>;
+  ensureProjectPath?(sessionId: string, path: string): void;
+  setForkSource?(sessionId: string, sourceSessionId: string): void;
+  isAvailable?(): Promise<boolean>;
+  listModels?(): Promise<ModelOption[]>;
+}
+
+export interface ModelOption {
+  value: string;
+  label: string;
 }
 
 export interface Session {
@@ -90,7 +107,9 @@ export type ChatEvent =
   | { type: "approval_request"; requestId: string; tool: string; input: unknown }
   | { type: "error"; message: string }
   | { type: "done"; sessionId: string; resultSubtype?: ResultSubtype; numTurns?: number; contextWindowPct?: number }
-  | { type: "account_info"; accountId: string; accountLabel: string };
+  | { type: "session_migrated"; oldSessionId: string; newSessionId: string }
+  | { type: "account_info"; accountId: string; accountLabel: string }
+  | { type: "system"; subtype: string };
 
 export type ToolApprovalHandler = (
   tool: string,

package/src/types/config.ts

@@ -44,18 +44,24 @@ const VALID_PERMISSION_MODES = ["default", "acceptEdits", "plan", "bypassPermiss
 export type PermissionMode = typeof VALID_PERMISSION_MODES[number];
 
 export interface AIProviderConfig {
-  type: "agent-sdk" | "mock";
+  type: "agent-sdk" | "cli" | "mock";
+
+  // Common fields (all providers)
+  permission_mode?: PermissionMode;
+  system_prompt?: string;
+  model?: string;
+
+  // SDK-specific (Claude)
   api_key_env?: string;
   api_key?: string;
   base_url?: string;
-  // Agent SDK-specific settings (ignored by mock provider)
-  model?: string;
   effort?: "low" | "medium" | "high" | "max";
   max_turns?: number;
   max_budget_usd?: number;
   thinking_budget_tokens?: number;
-  permission_mode?: PermissionMode;
-  system_prompt?: string;
+
+  // CLI-specific (Cursor, Codex, Gemini)
+  cli_command?: string;
 }
 
 export const DEFAULT_CONFIG: PpmConfig = {
@@ -80,11 +86,13 @@ export const DEFAULT_CONFIG: PpmConfig = {
   },
 };
 
-const VALID_TYPES = ["agent-sdk", "mock"] as const;
+const VALID_TYPES = ["agent-sdk", "cli", "mock"] as const;
 const VALID_EFFORTS = ["low", "medium", "high"] as const;
 const VALID_MODELS = ["claude-sonnet-4-6", "claude-opus-4-6", "claude-haiku-4-5"] as const;
+/** Allowed CLI commands for CLI providers (prevents command injection) */
+const VALID_CLI_COMMANDS = ["cursor-agent", "codex", "gemini"] as const;
 /** Only these values are allowed for default_provider in config */
-export const VALID_PROVIDERS = ["claude"] as const;
+export const VALID_PROVIDERS = ["claude", "cursor"] as const;
 const VALID_THEMES: ThemeConfig[] = ["light", "dark", "system"];
 
 /** Validate AI provider config fields. Returns array of error messages (empty = valid). */
@@ -93,9 +101,22 @@ export function validateAIProviderConfig(config: Partial<AIProviderConfig>): str
   if (config.type != null && !VALID_TYPES.includes(config.type as any)) {
     errors.push(`type must be one of: ${VALID_TYPES.join(", ")}`);
   }
-  if (config.model != null && !VALID_MODELS.includes(config.model as any)) {
-    errors.push(`model must be one of: ${VALID_MODELS.join(", ")}`);
+
+  // CLI-specific validation
+  if (config.type === "cli") {
+    if (!config.cli_command) {
+      errors.push("cli_command is required for CLI providers");
+    } else if (!VALID_CLI_COMMANDS.includes(config.cli_command as any)) {
+      errors.push(`cli_command must be one of: ${VALID_CLI_COMMANDS.join(", ")}`);
+    }
+    // CLI providers accept any model string — skip VALID_MODELS check
+  } else {
+    // SDK/mock model validation
+    if (config.model != null && !VALID_MODELS.includes(config.model as any)) {
+      errors.push(`model must be one of: ${VALID_MODELS.join(", ")}`);
+    }
   }
+
   if (config.effort && !VALID_EFFORTS.includes(config.effort as any)) {
     errors.push(`effort must be one of: ${VALID_EFFORTS.join(", ")}`);
   }
@@ -149,8 +170,9 @@ export function sanitizeConfig(config: PpmConfig): boolean {
     dirty = true;
   }
 
-  // Fix invalid default_provider — must be in VALID_PROVIDERS
-  if (!VALID_PROVIDERS.includes(config.ai.default_provider as any)) {
+  // Fix invalid default_provider — must be in VALID_PROVIDERS or be a registered provider key
+  if (!VALID_PROVIDERS.includes(config.ai.default_provider as any) &&
+      !config.ai.providers[config.ai.default_provider]) {
     config.ai.default_provider = DEFAULT_CONFIG.ai.default_provider;
     dirty = true;
   }

package/src/utils/ndjson-line-parser.ts

@@ -0,0 +1,36 @@
+import type { Readable } from "node:stream";
+
+/**
+ * Async generator: reads from a stream, buffers partial lines,
+ * yields parsed JSON objects one per complete line.
+ * Handles TCP packet splitting across JSON boundaries.
+ */
+export async function* parseNdjsonLines(stream: Readable): AsyncIterable<unknown> {
+  let buffer = "";
+
+  for await (const chunk of stream) {
+    buffer += chunk.toString();
+    const lines = buffer.split(/\r?\n/);
+    buffer = lines.pop() || ""; // keep trailing partial
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed) continue;
+      try {
+        yield JSON.parse(trimmed);
+      } catch {
+        // Skip non-JSON lines (e.g. deprecation warnings from CLI)
+        console.warn(`[ndjson] skipping non-JSON line: ${trimmed.slice(0, 100)}`);
+      }
+    }
+  }
+
+  // Flush remaining buffer
+  if (buffer.trim()) {
+    try {
+      yield JSON.parse(buffer.trim());
+    } catch {
+      // ignore trailing non-JSON
+    }
+  }
+}

package/src/web/components/browser/browser-tab.tsx

@@ -0,0 +1,269 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  RotateCcw,
+  ExternalLink,
+  Globe,
+} from "lucide-react";
+import { useTabStore } from "@/stores/tab-store";
+
+/** Parse a URL string — returns normalized URL or null if invalid */
+function parseUrl(input: string): string | null {
+  let url = input.trim();
+  if (!url) return null;
+
+  // If just a port number, treat as localhost
+  if (/^\d+$/.test(url)) return `http://localhost:${url}`;
+
+  // If host:port without scheme, add http://
+  if (/^localhost(:\d+)?/.test(url)) url = `http://${url}`;
+  if (/^[\w.-]+:\d+/.test(url) && !url.includes("://")) url = `http://${url}`;
+
+  // If no scheme at all, add https:// for external, http:// for localhost
+  if (!url.includes("://")) {
+    url = url.includes("localhost") ? `http://${url}` : `https://${url}`;
+  }
+
+  try {
+    new URL(url);
+    return url;
+  } catch {
+    return null;
+  }
+}
+
+/** Check if a URL is a localhost address */
+function isLocalhost(url: string): boolean {
+  try {
+    const u = new URL(url);
+    return (
+      u.hostname === "localhost" ||
+      u.hostname === "127.0.0.1" ||
+      u.hostname === "0.0.0.0" ||
+      u.hostname === "::1"
+    );
+  } catch {
+    return false;
+  }
+}
+
+/** Convert URL to iframe src — proxy localhost through backend */
+function toIframeSrc(url: string): string {
+  if (!isLocalhost(url)) return url;
+
+  try {
+    const u = new URL(url);
+    const port = u.port || "80";
+    const path = u.pathname + u.search + u.hash;
+    return `/api/preview/${port}${path}`;
+  } catch {
+    return url;
+  }
+}
+
+/** Extract display URL from iframe src (reverse of toIframeSrc) */
+function fromIframeSrc(src: string): string {
+  const match = src.match(/^\/api\/preview\/(\d+)(\/.*)?$/);
+  if (match) {
+    const port = match[1];
+    const path = match[2] || "/";
+    return `http://localhost:${port}${path}`;
+  }
+  return src;
+}
+
+interface BrowserTabProps {
+  metadata?: Record<string, unknown>;
+  tabId?: string;
+}
+
+export function BrowserTab({ metadata, tabId }: BrowserTabProps) {
+  const initialUrl = (metadata?.url as string) || "http://localhost:3000";
+  const [addressBar, setAddressBar] = useState(initialUrl);
+  const [currentUrl, setCurrentUrl] = useState(initialUrl);
+  const [iframeSrc, setIframeSrc] = useState(toIframeSrc(initialUrl));
+  const [canGoBack, setCanGoBack] = useState(false);
+  const [canGoForward, setCanGoForward] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const updateTab = useTabStore((s) => s.updateTab);
+
+  // Navigation history (iframe same-origin only)
+  const historyRef = useRef<string[]>([initialUrl]);
+  const historyIdxRef = useRef(0);
+
+  const navigate = useCallback(
+    (url: string, addToHistory = true) => {
+      const parsed = parseUrl(url);
+      if (!parsed) {
+        setError("Invalid URL");
+        return;
+      }
+
+      setError(null);
+      setCurrentUrl(parsed);
+      setAddressBar(parsed);
+      setIframeSrc(toIframeSrc(parsed));
+      setLoading(true);
+
+      if (addToHistory) {
+        const h = historyRef.current;
+        const idx = historyIdxRef.current;
+        // Truncate forward history
+        historyRef.current = h.slice(0, idx + 1);
+        historyRef.current.push(parsed);
+        historyIdxRef.current = historyRef.current.length - 1;
+      }
+
+      setCanGoBack(historyIdxRef.current > 0);
+      setCanGoForward(
+        historyIdxRef.current < historyRef.current.length - 1,
+      );
+
+      // Update tab title
+      if (tabId) {
+        try {
+          const u = new URL(parsed);
+          const title = isLocalhost(parsed)
+            ? `localhost:${u.port || "80"}`
+            : u.hostname;
+          updateTab(tabId, { title });
+        } catch {}
+      }
+    },
+    [tabId, updateTab],
+  );
+
+  const goBack = useCallback(() => {
+    if (historyIdxRef.current > 0) {
+      historyIdxRef.current--;
+      navigate(historyRef.current[historyIdxRef.current]!, false);
+    }
+  }, [navigate]);
+
+  const goForward = useCallback(() => {
+    if (historyIdxRef.current < historyRef.current.length - 1) {
+      historyIdxRef.current++;
+      navigate(historyRef.current[historyIdxRef.current]!, false);
+    }
+  }, [navigate]);
+
+  const reload = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    if (iframeRef.current) {
+      // Force reload by re-setting src
+      const src = iframeRef.current.src;
+      iframeRef.current.src = "";
+      requestAnimationFrame(() => {
+        if (iframeRef.current) iframeRef.current.src = src;
+      });
+    }
+  }, []);
+
+  const openExternal = useCallback(() => {
+    window.open(currentUrl, "_blank");
+  }, [currentUrl]);
+
+  const handleAddressKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      navigate(addressBar);
+    }
+  };
+
+  // Navigate when metadata.url changes (e.g. opened from command palette)
+  useEffect(() => {
+    const metaUrl = metadata?.url as string | undefined;
+    if (metaUrl && metaUrl !== currentUrl) {
+      navigate(metaUrl);
+    }
+  }, [metadata?.url]);
+
+  return (
+    <div className="flex flex-col h-full w-full bg-background">
+      {/* Toolbar */}
+      <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border bg-surface shrink-0">
+        {/* Nav buttons */}
+        <button
+          onClick={goBack}
+          disabled={!canGoBack}
+          className="p-1.5 rounded hover:bg-surface-elevated disabled:opacity-30 transition-colors"
+          title="Back"
+        >
+          <ArrowLeft className="size-4" />
+        </button>
+        <button
+          onClick={goForward}
+          disabled={!canGoForward}
+          className="p-1.5 rounded hover:bg-surface-elevated disabled:opacity-30 transition-colors"
+          title="Forward"
+        >
+          <ArrowRight className="size-4" />
+        </button>
+        <button
+          onClick={reload}
+          className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
+          title="Reload"
+        >
+          <RotateCcw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+        </button>
+
+        {/* Address bar */}
+        <div className="flex-1 flex items-center gap-2 mx-1 px-2.5 py-1.5 rounded-md bg-background border border-border focus-within:border-accent/50 transition-colors">
+          <Globe className="size-3.5 text-text-subtle shrink-0" />
+          <input
+            type="text"
+            value={addressBar}
+            onChange={(e) => setAddressBar(e.target.value)}
+            onKeyDown={handleAddressKeyDown}
+            placeholder="Enter URL or port (e.g. 3000, localhost:8080)"
+            className="flex-1 bg-transparent text-xs text-text-primary outline-none placeholder:text-text-subtle min-w-0"
+          />
+        </div>
+
+        {/* Open external */}
+        <button
+          onClick={openExternal}
+          className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
+          title="Open in browser"
+        >
+          <ExternalLink className="size-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 relative min-h-0">
+        {error ? (
+          <div className="flex items-center justify-center h-full text-text-secondary text-sm">
+            <p>{error}</p>
+          </div>
+        ) : (
+          <iframe
+            ref={iframeRef}
+            src={iframeSrc}
+            className="w-full h-full border-0"
+            sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+            onLoad={() => setLoading(false)}
+            onError={() => {
+              setLoading(false);
+              setError(`Failed to load ${currentUrl}`);
+            }}
+          />
+        )}
+
+        {/* Loading overlay */}
+        {loading && !error && (
+          <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+            <div className="flex items-center gap-2 text-sm text-text-secondary">
+              <RotateCcw className="size-4 animate-spin" />
+              <span>Loading...</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,11 +1,12 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff } from "lucide-react";
+import { History, Settings2, Loader2, RefreshCw, Search, Pencil, Check, X, BellOff } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useNotificationStore } from "@/stores/notification-store";
 import { AISettingsSection } from "@/components/settings/ai-settings-section";
 import { UsageDetailPanel } from "./usage-badge";
+import { ProviderBadge } from "./provider-selector";
 import type { SessionInfo } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
 
@@ -19,6 +20,7 @@ interface ChatHistoryBarProps {
   refreshUsage?: () => void;
   lastFetchedAt?: string | null;
   sessionId?: string | null;
+  providerId?: string;
   onSelectSession?: (session: SessionInfo) => void;
   onBugReport?: () => void;
   isConnected?: boolean;
@@ -50,7 +52,7 @@ function pctColor(pct: number): string {
 
 export function ChatHistoryBar({
   projectName, usageInfo, contextWindowPct, usageLoading, refreshUsage, lastFetchedAt,
-  sessionId, onSelectSession, onBugReport, isConnected, onReconnect,
+  sessionId, providerId, onSelectSession, onBugReport, isConnected, onReconnect,
 }: ChatHistoryBarProps) {
   const [activePanel, setActivePanel] = useState<PanelType>(null);
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
@@ -94,7 +96,7 @@ export function ChatHistoryBar({
         type: "chat",
         title: session.title || "Chat",
         projectId: projectName ?? null,
-        metadata: { projectName, sessionId: session.id },
+        metadata: { projectName, sessionId: session.id, providerId: session.providerId },
         closable: true,
       });
     }
@@ -126,7 +128,8 @@ export function ChatHistoryBar({
     ? sessions.filter((s) => (s.title || "").toLowerCase().includes(searchQuery.toLowerCase()))
     : sessions;
 
-  // Usage badge display
+  // Usage badge display — only meaningful for Claude (SDK) provider
+  const isClaudeProvider = !providerId || providerId === "claude";
   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);
@@ -147,6 +150,14 @@ export function ChatHistoryBar({
           <span>History</span>
         </button>
 
+        {/* Active provider indicator */}
+        {sessionId && providerId && providerId !== "mock" && (
+          <span className="flex items-center gap-1 px-1.5 py-0.5 text-[11px] text-text-secondary">
+            <ProviderBadge providerId={providerId} />
+            <span className="capitalize">{providerId}</span>
+          </span>
+        )}
+
         {/* Config */}
         <button
           onClick={() => togglePanel("config")}
@@ -158,28 +169,37 @@ export function ChatHistoryBar({
           <Settings2 className="size-3" />
         </button>
 
-        {/* Usage & Accounts */}
-        <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" />
-          {usageInfo.activeAccountLabel && (
-            <span className="text-text-secondary font-normal truncate max-w-[60px]">[{usageInfo.activeAccountLabel}]</span>
-          )}
-          <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
-          <span className="text-text-subtle">·</span>
-          <span>Wk:{sevenDayPct != null ? `${sevenDayPct}%` : "--%"}</span>
-          {contextWindowPct != null && (
-            <>
-              <span className="text-text-subtle">·</span>
-              <span className={pctColor(contextWindowPct)}>Ctx:{contextWindowPct}%</span>
-            </>
-          )}
-        </button>
+        {/* Usage & Accounts — full display for Claude, minimal for other providers */}
+        {isClaudeProvider ? (
+          <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" />
+            {usageInfo.activeAccountLabel && (
+              <span className="text-text-secondary font-normal truncate max-w-[60px]">[{usageInfo.activeAccountLabel}]</span>
+            )}
+            <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
+            <span className="text-text-subtle">·</span>
+            <span>Wk:{sevenDayPct != null ? `${sevenDayPct}%` : "--%"}</span>
+            {contextWindowPct != null && (
+              <>
+                <span className="text-text-subtle">·</span>
+                <span className={pctColor(contextWindowPct)}>Ctx:{contextWindowPct}%</span>
+              </>
+            )}
+          </button>
+        ) : (
+          contextWindowPct != null && (
+            <span className={`flex items-center gap-1 px-1.5 py-0.5 text-[11px] font-medium tabular-nums ${pctColor(contextWindowPct)}`}>
+              <Activity className="size-3" />
+              <span>Ctx:{contextWindowPct}%</span>
+            </span>
+          )
+        )}
 
         {/* Spacer */}
         <div className="flex-1" />
@@ -247,7 +267,7 @@ export function ChatHistoryBar({
                   key={session.id}
                   className="flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors group"
                 >
-                  <MessageSquare className="size-3 shrink-0 text-text-subtle" />
+                  <ProviderBadge providerId={session.providerId} />
                   {editingId === session.id ? (
                     <form
                       className="flex items-center gap-1 flex-1 min-w-0"
@@ -303,8 +323,8 @@ export function ChatHistoryBar({
         </div>
       )}
 
-      {/* Usage panel */}
-      {activePanel === "usage" && (
+      {/* Usage panel — only for Claude provider */}
+      {activePanel === "usage" && isClaudeProvider && (
         <UsageDetailPanel
           usage={usageInfo}
           visible={true}