@hienlh/ppm 0.8.87 → 0.8.89

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

@@ -10,11 +10,11 @@ import { useNotificationStore } from "@/stores/notification-store";
 import { openBugReportPopup } from "@/lib/report-bug";
 import { getAISettings } from "@/lib/api-settings";
 import { MessageList } from "./message-list";
-import { MessageInput, type ChatAttachment } from "./message-input";
+import { MessageInput, type ChatAttachment, type MessagePriority } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
 import { ChatHistoryBar } from "./chat-history-bar";
-import { ChatWelcome } from "./chat-welcome";
+
 import type { DragEvent } from "react";
 import type { FileNode } from "../../../types/project";
 import type { Session, SessionInfo } from "../../../types/chat";
@@ -90,7 +90,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     pendingApproval,
     contextWindowPct,
     sessionTitle,
-    streamingAccountLabel,
+    migratedSessionId,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -99,6 +99,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     isConnected,
   } = useChat(sessionId, providerId, projectName);
 
+  // When CLI provider assigns a different session ID, update our state
+  useEffect(() => {
+    if (migratedSessionId && migratedSessionId !== sessionId) {
+      setSessionId(migratedSessionId);
+    }
+  }, [migratedSessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Auto-clear notification badge when this tab is active and document is visible.
   // Handles the case where notification arrived while browser tab was hidden.
   useEffect(() => {
@@ -142,11 +149,11 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     useTabStore.getState().openTab({
       type: "chat",
       title: "AI Chat",
-      metadata: { projectName },
+      metadata: { projectName, providerId },
       projectId: projectName || null,
       closable: true,
     });
-  }, [projectName]);
+  }, [projectName, providerId]);
 
   const handleSelectSession = useCallback((session: SessionInfo) => {
     setSessionId(session.id);
@@ -198,7 +205,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   );
 
   const handleSend = useCallback(
-    async (content: string, attachments: ChatAttachment[] = []) => {
+    async (content: string, attachments: ChatAttachment[] = [], priority?: MessagePriority) => {
       const fullContent = buildMessageWithAttachments(content, attachments);
       if (!fullContent.trim()) return;
 
@@ -220,7 +227,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           return;
         }
       }
-      sendMessage(fullContent, { permissionMode });
+      sendMessage(fullContent, { permissionMode, priority });
     },
     [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode],
   );
@@ -323,22 +330,18 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         </div>
       )}
 
-      {/* Messages or Welcome screen */}
-      {!sessionId ? (
-        <ChatWelcome projectName={projectName} onSelectSession={handleSelectSession} />
-      ) : (
-        <MessageList
-          messages={messages}
-          messagesLoading={messagesLoading}
-          pendingApproval={pendingApproval}
-          onApprovalResponse={respondToApproval}
-          isStreaming={isStreaming}
-          phase={phase}
-          connectingElapsed={connectingElapsed}
-          projectName={projectName}
-          onFork={!isStreaming ? handleFork : undefined}
-        />
-      )}
+      {/* Messages */}
+      <MessageList
+        messages={messages}
+        messagesLoading={messagesLoading}
+        pendingApproval={pendingApproval}
+        onApprovalResponse={respondToApproval}
+        isStreaming={isStreaming}
+        phase={phase}
+        connectingElapsed={connectingElapsed}
+        projectName={projectName}
+        onFork={!isStreaming ? handleFork : undefined}
+      />
 
       {/* Bottom toolbar */}
       <div className="border-t border-border bg-background shrink-0">
@@ -351,10 +354,10 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           refreshUsage={refreshUsage}
           lastFetchedAt={lastFetchedAt}
           sessionId={sessionId}
+          providerId={providerId}
           onSelectSession={handleSelectSession}
           onBugReport={sessionId ? () => openBugReportPopup(version, { sessionId, projectName }) : undefined}
           isConnected={isConnected}
-          streamingAccountLabel={streamingAccountLabel}
           onReconnect={() => {
             if (!isConnected) reconnect();
             refetchMessages();
@@ -393,6 +396,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           externalFiles={externalFiles}
           permissionMode={permissionMode}
           onModeChange={setPermissionMode}
+          providerId={providerId}
+          onProviderChange={!sessionId ? setProviderId : undefined}
         />
       </div>
 

package/src/web/components/chat/message-input.tsx

@@ -1,11 +1,12 @@
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
-import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff } from "lucide-react";
+import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock } from "lucide-react";
 import { useVoiceInput } from "@/hooks/use-voice-input";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
 import { isSupportedFile, isImageFile } from "@/lib/file-support";
 import { AttachmentChips } from "./attachment-chips";
 import { ModeSelector, getModeLabel, getModeIcon } from "./mode-selector";
+import { ProviderSelector } from "./provider-selector";
 import type { SlashItem } from "./slash-command-picker";
 import type { FileNode } from "../../../types/project";
 import { flattenFileTree } from "./file-picker";
@@ -21,8 +22,10 @@ export interface ChatAttachment {
   status: "uploading" | "ready" | "error";
 }
 
+export type MessagePriority = 'now' | 'next' | 'later';
+
 interface MessageInputProps {
-  onSend: (content: string, attachments: ChatAttachment[]) => void;
+  onSend: (content: string, attachments: ChatAttachment[], priority?: MessagePriority) => void;
   isStreaming?: boolean;
   onCancel?: () => void;
   disabled?: boolean;
@@ -45,6 +48,10 @@ interface MessageInputProps {
   permissionMode?: string;
   /** Permission mode change handler */
   onModeChange?: (mode: string) => void;
+  /** Current provider ID */
+  providerId?: string;
+  /** Provider change handler — undefined when session is active (locked) */
+  onProviderChange?: (providerId: string) => void;
 }
 
 export const MessageInput = memo(function MessageInput({
@@ -64,11 +71,14 @@ export const MessageInput = memo(function MessageInput({
   autoFocus,
   permissionMode,
   onModeChange,
+  providerId,
+  onProviderChange,
 }: MessageInputProps) {
   const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const [modeSelectorOpen, setModeSelectorOpen] = useState(false);
   const [pendingSend, setPendingSend] = useState(false);
+  const [priority, setPriority] = useState<MessagePriority>('next');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -323,7 +333,7 @@ export const MessageInput = memo(function MessageInput({
     onSlashStateChange?.(false, "");
     onFileStateChange?.(false, "");
     if (voice.isListening) voice.stop();
-    onSend(trimmed, readyAttachments);
+    onSend(trimmed, readyAttachments, isStreaming ? priority : undefined);
     setValue("");
     // Revoke preview URLs
     for (const att of attachments) {
@@ -331,9 +341,10 @@ export const MessageInput = memo(function MessageInput({
     }
     setAttachments([]);
     setPendingSend(false);
+    setPriority('next');
     if (textareaRef.current) textareaRef.current.style.height = "auto";
     if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
-  }, [value, attachments, onSend, onSlashStateChange, onFileStateChange]);
+  }, [value, attachments, onSend, onSlashStateChange, onFileStateChange, isStreaming, priority]);
 
   const handleSend = useCallback(() => {
     if (disabled) return;
@@ -489,7 +500,7 @@ export const MessageInput = memo(function MessageInput({
       >
         {/* Attachment chips (inside container, aligned with input) */}
         <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
-        {/* Mobile: mode chip row */}
+        {/* Mobile: mode chip + provider selector row */}
         <div className="flex items-center gap-1 px-2 pt-2 md:hidden relative">
           <ModeChip
             mode={permissionMode ?? "bypassPermissions"}
@@ -501,6 +512,14 @@ export const MessageInput = memo(function MessageInput({
             open={modeSelectorOpen}
             onOpenChange={setModeSelectorOpen}
           />
+          {onProviderChange && projectName && (
+            <ProviderSelector
+              value={providerId ?? "claude"}
+              onChange={onProviderChange}
+              projectName={projectName}
+            />
+          )}
+          {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
         </div>
         {/* Mobile: single row — attach + mic + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
@@ -615,6 +634,15 @@ export const MessageInput = memo(function MessageInput({
                   onOpenChange={setModeSelectorOpen}
                 />
               </div>
+              {/* Provider selector — only when no active session */}
+              {onProviderChange && projectName && (
+                <ProviderSelector
+                  value={providerId ?? "claude"}
+                  onChange={onProviderChange}
+                  projectName={projectName}
+                />
+              )}
+              {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
             </div>
             <div className="flex items-center gap-1">
               {showCancel ? (
@@ -661,3 +689,34 @@ function ModeChip({ mode, onClick }: { mode: string; onClick: () => void }) {
     </button>
   );
 }
+
+const PRIORITY_OPTIONS: { value: MessagePriority; label: string; Icon: typeof Zap }[] = [
+  { value: 'now', label: 'Interrupt', Icon: Zap },
+  { value: 'next', label: 'Queue', Icon: ListOrdered },
+  { value: 'later', label: 'Later', Icon: Clock },
+];
+
+/** Compact priority toggle — visible only during streaming */
+function PriorityToggle({ value, onChange }: { value: MessagePriority; onChange: (v: MessagePriority) => void }) {
+  const cycle = useCallback(() => {
+    const order: MessagePriority[] = ['next', 'later', 'now'];
+    const idx = order.indexOf(value);
+    onChange(order[(idx + 1) % order.length]!);
+  }, [value, onChange]);
+
+  const current = PRIORITY_OPTIONS.find((o) => o.value === value) ?? PRIORITY_OPTIONS[1]!;
+  const Icon = current.Icon;
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => { e.stopPropagation(); cycle(); }}
+      className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-text-subtle hover:text-text-primary hover:bg-surface-elevated transition-colors border border-transparent hover:border-border"
+      aria-label={`Message priority: ${current.label}`}
+      title={`Priority: ${current.label} (click to cycle)`}
+    >
+      <Icon className="size-3" />
+      <span>{current.label}</span>
+    </button>
+  );
+}

package/src/web/components/chat/provider-selector.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
+import { Check } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+
+interface ProviderInfo {
+  id: string;
+  name: string;
+}
+
+interface ProviderSelectorProps {
+  value: string;
+  onChange: (providerId: string) => void;
+  projectName: string;
+}
+
+const PROVIDER_ICONS: Record<string, string> = {
+  claude: "C",
+  cursor: "▶",
+  codex: "◆",
+  gemini: "G",
+};
+
+/**
+ * Provider selector chip + popup — matches ModeSelector style.
+ * Hidden when only 1 provider available.
+ */
+export function ProviderSelector({ value, onChange, projectName }: ProviderSelectorProps) {
+  const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const focusedRef = useRef(0);
+
+  useEffect(() => {
+    if (!projectName) return;
+    api.get<ProviderInfo[]>(`${projectUrl(projectName)}/chat/providers`)
+      .then(setProviders)
+      .catch(() => {});
+  }, [projectName]);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  // Focus current on open
+  useEffect(() => {
+    if (open) {
+      focusedRef.current = Math.max(0, providers.findIndex((p) => p.id === value));
+    }
+  }, [open, value, providers]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Escape") { setOpen(false); return; }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const dir = e.key === "ArrowDown" ? 1 : -1;
+      focusedRef.current = (focusedRef.current + dir + providers.length) % providers.length;
+      const el = panelRef.current?.querySelector(`[data-idx="${focusedRef.current}"]`) as HTMLElement;
+      el?.focus();
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const p = providers[focusedRef.current];
+      if (p) { onChange(p.id); setOpen(false); }
+    }
+  }, [onChange, providers]);
+
+  // Hide when only 1 provider
+  if (providers.length <= 1) return null;
+
+  const current = providers.find((p) => p.id === value);
+  const icon = PROVIDER_ICONS[value] || "?";
+
+  return (
+    <div className="relative">
+      {/* Chip — same style as ModeChip */}
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); }}
+        className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-text-subtle hover:text-text-primary hover:bg-surface-elevated transition-colors border border-transparent hover:border-border"
+        aria-label={`AI Provider: ${current?.name ?? value}`}
+      >
+        <span className="inline-flex h-3.5 w-3.5 items-center justify-center rounded text-[9px] font-bold bg-surface-elevated shrink-0">
+          {icon}
+        </span>
+        <span className="max-w-[80px] truncate capitalize">{current?.name ?? value}</span>
+      </button>
+
+      {/* Popup panel — same style as ModeSelector */}
+      {open && (
+        <div
+          ref={panelRef}
+          role="listbox"
+          aria-label="AI Providers"
+          onKeyDown={handleKeyDown}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+          className="absolute bottom-full left-0 mb-1 z-50 w-56 rounded-lg border border-border bg-surface shadow-lg"
+        >
+          <div className="px-3 py-2 border-b border-border">
+            <span className="text-xs font-medium text-text-secondary">Provider</span>
+          </div>
+          <div className="py-1">
+            {providers.map((p, idx) => {
+              const pIcon = PROVIDER_ICONS[p.id] || "?";
+              const isActive = p.id === value;
+              return (
+                <button
+                  key={p.id}
+                  data-idx={idx}
+                  role="option"
+                  aria-selected={isActive}
+                  tabIndex={0}
+                  onClick={() => { onChange(p.id); setOpen(false); }}
+                  className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-elevated focus:bg-surface-elevated focus:outline-none ${isActive ? "bg-surface-elevated" : ""}`}
+                >
+                  <span className="inline-flex h-5 w-5 items-center justify-center rounded text-[11px] font-bold bg-surface-elevated text-text-subtle shrink-0">
+                    {pIcon}
+                  </span>
+                  <span className="flex-1 text-sm font-medium text-text-primary capitalize">{p.name}</span>
+                  {isActive && <Check className="size-4 shrink-0 text-primary" />}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Small provider badge for session lists */
+export function ProviderBadge({ providerId }: { providerId: string }) {
+  const icon = PROVIDER_ICONS[providerId] || "?";
+  return (
+    <span
+      className="inline-flex h-4 w-4 items-center justify-center rounded text-[10px] font-bold bg-surface-elevated text-text-subtle shrink-0"
+      title={providerId}
+    >
+      {icon}
+    </span>
+  );
+}

package/src/web/components/chat/session-picker.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { api, projectUrl } from "@/lib/api-client";
 import { Plus, Trash2, MessageSquare, ChevronDown, Pin, PinOff } from "lucide-react";
+import { ProviderBadge } from "./provider-selector";
 import type { SessionInfo } from "../../../types/chat";
 
 interface SessionPickerProps {
@@ -95,7 +96,8 @@ export function SessionPicker({
         }`}
       >
         <div className="flex flex-col min-w-0 flex-1">
-          <span className="truncate text-xs font-medium">
+          <span className="flex items-center gap-1.5 truncate text-xs font-medium">
+            <ProviderBadge providerId={session.providerId} />
             {session.title}
           </span>
           <span className="text-xs text-text-subtle">

package/src/web/components/chat/usage-badge.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Activity, RefreshCw, Eye, Download, Upload, Plus, X, Settings } from "lucide-react";
+import { Activity, RefreshCw, Eye, Download, Upload, Plus, X, Settings, Trash2 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import type { UsageInfo, LimitBucket } from "../../../types/chat";
 import {
@@ -7,6 +7,7 @@ import {
   getActiveAccount,
   getAllAccountUsages,
   patchAccount,
+  deleteAccount,
   type AccountInfo,
   type AccountUsageEntry,
   type OAuthProfileData,
@@ -152,11 +153,12 @@ function formatLastUpdated(ts: number | null | undefined): string | null {
   return `${days}d ago`;
 }
 
-function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, onViewProfile, flash }: {
+function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onDelete, onExport, onViewProfile, flash }: {
   entry: AccountUsageEntry;
   isActive: boolean;
   accountInfo?: AccountInfo;
   onToggle?: (id: string, status: string) => void;
+  onDelete?: (id: string, display: string) => void;
   onExport?: (id: string) => void;
   onViewProfile?: (profile: OAuthProfileData) => void;
   flash?: boolean;
@@ -164,19 +166,24 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
   const { usage } = entry;
   const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
   const status = accountInfo?.status ?? entry.accountStatus;
+  // Expired: has expiresAt in the past AND no refresh token to auto-renew
+  const isExpired = !!(accountInfo && !accountInfo.hasRefreshToken && accountInfo.expiresAt && accountInfo.expiresAt < Math.floor(Date.now() / 1000));
 
   return (
-    <div className={`rounded-md border p-2 space-y-1.5 transition-colors duration-500 min-w-[200px] shrink-0 snap-start ${flash ? "bg-primary/10 border-primary/40" : ""} ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
+    <div className={`rounded-md border p-2 space-y-1.5 transition-colors duration-500 min-w-[200px] shrink-0 snap-start ${isExpired ? "opacity-50" : ""} ${flash ? "bg-primary/10 border-primary/40" : ""} ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
       <div className="flex items-center gap-1.5">
         <span className="text-xs font-medium truncate flex-1 min-w-0">
           {entry.accountLabel ?? entry.accountId.slice(0, 8)}
         </span>
-        {!entry.isOAuth && (
+        {isExpired && (
+          <span className="text-[9px] text-red-500 shrink-0 font-medium">Expired</span>
+        )}
+        {!entry.isOAuth && !isExpired && (
           <span className="text-[9px] text-text-subtle shrink-0">API key</span>
         )}
         {/* Account controls */}
         <div className="flex items-center gap-0.5 shrink-0">
-          {onViewProfile && accountInfo?.profileData && (
+          {!isExpired && onViewProfile && accountInfo?.profileData && (
             <button
               className="p-1 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
               onClick={() => onViewProfile(accountInfo.profileData!)}
@@ -185,7 +192,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               <Eye className="size-3" />
             </button>
           )}
-          {onExport && entry.isOAuth && (
+          {!isExpired && onExport && entry.isOAuth && (
             <button
               className="p-1 rounded cursor-pointer text-text-subtle hover:text-blue-500 hover:bg-surface-elevated transition-colors"
               onClick={() => onExport(entry.accountId)}
@@ -194,7 +201,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               <Download className="size-3" />
             </button>
           )}
-          {onToggle && (
+          {!isExpired && onToggle && (
             <Switch
               checked={status !== "disabled"}
               onCheckedChange={() => onToggle(entry.accountId, status)}
@@ -202,6 +209,15 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               className="scale-[0.6] cursor-pointer"
             />
           )}
+          {onDelete && (
+            <button
+              className="p-1 rounded cursor-pointer text-text-subtle hover:text-red-500 hover:bg-surface-elevated transition-colors"
+              onClick={() => onDelete(entry.accountId, entry.accountLabel ?? entry.accountId.slice(0, 8))}
+              title="Remove account"
+            >
+              <Trash2 className="size-3" />
+            </button>
+          )}
         </div>
       </div>
       {hasBuckets ? (
@@ -247,6 +263,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   const [showExportDialog, setShowExportDialog] = useState(false);
   const [showImportDialog, setShowImportDialog] = useState(false);
   const [showRotationSettings, setShowRotationSettings] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; display: string } | null>(null);
   const [exportPreselect, setExportPreselect] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
   const msgTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -325,13 +342,26 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
     onReload?.();
   }
 
+  async function confirmDeleteAccount() {
+    if (!deleteTarget) return;
+    try {
+      await deleteAccount(deleteTarget.id);
+      showMessage(`Account "${deleteTarget.display}" removed.`);
+      loadAll();
+      onReload?.();
+    } catch (e) {
+      showMessage(`Failed to remove: ${(e as Error).message}`);
+    }
+    setDeleteTarget(null);
+  }
+
   function openExportAll() {
     setExportPreselect(null);
     setShowExportDialog(true);
   }
 
   return (
-    <div className="border-b border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
+    <div className="relative border-b border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-text-primary">Usage & Accounts</span>
@@ -384,6 +414,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
                 isActive={entry.accountId === (activeAccountId ?? usage.activeAccountId)}
                 accountInfo={accountMap.get(entry.accountId)}
                 onToggle={handleToggle}
+                onDelete={(id, display) => setDeleteTarget({ id, display })}
                 onExport={(id) => { setExportPreselect(id); setShowExportDialog(true); }}
                 onViewProfile={setProfileView}
                 flash={flashIds.has(entry.accountId)}
@@ -460,6 +491,25 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
         </button>
       </div>
 
+      {/* Delete confirmation overlay */}
+      {deleteTarget && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-md">
+          <div className="bg-surface border border-border rounded-lg shadow-lg p-4 mx-4 max-w-[280px] w-full space-y-3">
+            <p className="text-xs text-text-primary text-center">
+              Remove <strong className="text-foreground">{deleteTarget.display}</strong>?
+            </p>
+            <div className="flex gap-2">
+              <button onClick={() => setDeleteTarget(null)} className="flex-1 px-3 py-1.5 rounded-md text-xs border border-border text-text-secondary hover:bg-surface-hover cursor-pointer transition-colors">
+                Cancel
+              </button>
+              <button onClick={confirmDeleteAccount} className="flex-1 px-3 py-1.5 rounded-md text-xs bg-red-500 text-white hover:bg-red-600 cursor-pointer transition-colors">
+                Remove
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Account dialogs */}
       <AddAccountDialog open={showAddDialog} onOpenChange={setShowAddDialog} onSuccess={handleSuccess} />
       <ExportAccountsDialog open={showExportDialog} onOpenChange={(v) => { setShowExportDialog(v); if (!v) setExportPreselect(null); }} accounts={accounts} preselectId={exportPreselect} onMessage={showMessage} />