@hienlh/ppm 0.8.54 → 0.8.56

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

@@ -17,14 +17,21 @@ import {
   Image as ImageIcon,
   Copy,
   Check,
+  CheckCircle2,
   Loader2,
   RotateCcw,
   TerminalSquare,
   ChevronUp,
   Tag,
+  XCircle,
+  ExternalLink,
 } from "lucide-react";
 import { QuestionCard } from "./question-card";
 import type { Question } from "./question-card";
+import { useTabStore } from "@/stores/tab-store";
+import { api } from "@/lib/api-client";
+import { useProjectStore } from "@/stores/project-store";
+import { useImageOverlay } from "@/stores/image-overlay-store";
 
 interface MessageListProps {
   messages: ChatMessage[];
@@ -75,6 +82,9 @@ export function MessageList({
   const filtered = useMemo(() => messages.filter((msg) => {
     const hasContent = msg.content && msg.content.trim().length > 0;
     const hasEvents = msg.events && msg.events.length > 0;
+    // User bubbles only render text — hide SDK tool-result user messages
+    // that have no text content (their events are merged into assistant)
+    if (msg.role === "user") return hasContent;
     return hasContent || hasEvents;
   }), [messages]);
 
@@ -147,7 +157,7 @@ function MessageBubble({ message, isStreaming, projectName, onFork }: { message:
               <MarkdownContent content={message.content} projectName={projectName} />
             </div>
           )}
-      {!isStreaming && message.accountLabel && (
+      {message.accountLabel && (
         <p className="text-[10px] select-none" style={{ color: "var(--color-text-subtle)" }}>
           via {message.accountLabel}
         </p>
@@ -172,12 +182,14 @@ const TAG_LABELS: Record<string, string> = {
   "currentDate": "Date",
   "fast_mode_info": "Fast Mode",
   "available-deferred-tools": "Tools",
+  "task-notification": "Task Result",
+  "environment_details": "Environment",
 };
 
 /** Extract system-injected XML tags into structured objects + clean text */
 function extractSystemTags(text: string): { cleanText: string; tags: SystemTag[] } {
   const tags: SystemTag[] = [];
-  const tagPattern = /<(system-reminder|available-deferred-tools|antml:[\w-]+|fast_mode_info|claudeMd|gitStatus|currentDate)[^>]*>([\s\S]*?)<\/\1>/g;
+  const tagPattern = /<(system-reminder|available-deferred-tools|antml:[\w-]+|fast_mode_info|claudeMd|gitStatus|currentDate|task-notification|environment_details)[^>]*>([\s\S]*?)<\/\1>/g;
   let match;
   while ((match = tagPattern.exec(text)) !== null) {
     const name = match[1]!;
@@ -226,6 +238,9 @@ function isPdfPath(path: string): boolean {
   return path.toLowerCase().endsWith(".pdf");
 }
 
+/** Detect if tags contain system-injected content (not real user input) */
+const SYSTEM_TAG_NAMES = new Set(["task-notification", "environment_details"]);
+
 /** User message bubble — full width, collapsible, with system tag badges */
 function UserBubble({ content, projectName, onFork }: { content: string; projectName?: string; onFork?: () => void }) {
   const { files, text, tags } = useMemo(() => {
@@ -234,6 +249,8 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
     return { files: parsed.files, text: cleanText, tags };
   }, [content]);
 
+  const isSystemContext = tags.some((t) => SYSTEM_TAG_NAMES.has(t.name));
+
   const [expanded, setExpanded] = useState(false);
   const [isOverflowing, setIsOverflowing] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -241,32 +258,39 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
   useEffect(() => {
     const el = contentRef.current;
     if (!el) return;
-    // Compare natural height vs clamped height (5 lines ≈ 5 * 1.25rem)
     const check = () => setIsOverflowing(el.scrollHeight > el.clientHeight + 2);
     check();
-    // Re-check on resize
     const ro = new ResizeObserver(check);
     ro.observe(el);
     return () => ro.disconnect();
   }, [text]);
 
   return (
-    <div className="group/user relative rounded-lg bg-primary/10 px-3 py-2 text-sm text-text-primary border border-primary/15 shadow-sm">
+    <div className={cn(
+      "group/user relative rounded-lg px-3 py-2 text-sm border shadow-sm",
+      isSystemContext
+        ? "bg-surface/40 border-border/40 text-text-secondary"
+        : "bg-primary/10 border-primary/15 text-text-primary",
+    )}>
       {/* System tags as badges */}
       {tags.length > 0 && <SystemTagBadges tags={tags} />}
 
-      {/* Attached files — compact chips (same style as input area) */}
+      {/* Attached files — image thumbnails + file chips */}
       {files.length > 0 && (
         <div className="flex flex-wrap gap-1.5">
-          {files.map((filePath, i) => (
-            <div
-              key={i}
-              className="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5 text-[11px] text-text-secondary"
-            >
-              {isImagePath(filePath) ? <ImageIcon className="size-3 shrink-0" /> : <FileText className="size-3 shrink-0" />}
-              <span className="truncate max-w-32">{basename(filePath)}</span>
-            </div>
-          ))}
+          {files.map((filePath, i) =>
+            isImagePath(filePath) ? (
+              <AuthImageThumbnail key={i} filePath={filePath} projectName={projectName} />
+            ) : (
+              <div
+                key={i}
+                className="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5 text-[11px] text-text-secondary"
+              >
+                <FileText className="size-3 shrink-0" />
+                <span className="truncate max-w-32">{basename(filePath)}</span>
+              </div>
+            ),
+          )}
         </div>
       )}
 
@@ -280,29 +304,22 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
             expanded && "max-h-[50vh] overflow-y-auto",
           )}
         >
-          {text}
+          {isSystemContext ? <TextWithFilePaths text={text} projectName={projectName} /> : text}
         </div>
       )}
       {(isOverflowing || expanded) && (
         <button
           onClick={() => setExpanded(!expanded)}
-          className="flex items-center gap-1 text-xs text-primary/70 hover:text-primary mt-1 transition-colors"
-        >
-          {expanded ? (
-            <>
-              <ChevronUp className="size-3" />
-              Show less
-            </>
-          ) : (
-            <>
-              <ChevronDown className="size-3" />
-              Show more
-            </>
+          className={cn(
+            "flex items-center gap-1 text-xs mt-1 transition-colors",
+            isSystemContext ? "text-text-subtle hover:text-text-secondary" : "text-primary/70 hover:text-primary",
           )}
+        >
+          {expanded ? <><ChevronUp className="size-3" />Show less</> : <><ChevronDown className="size-3" />Show more</>}
         </button>
       )}
-      {/* Fork/Rewind button — absolute top-right, visible on hover */}
-      {onFork && (
+      {/* Fork/Rewind button — only for real user messages */}
+      {!isSystemContext && onFork && (
         <button
           onClick={onFork}
           title="Retry from this message (fork session)"
@@ -328,6 +345,12 @@ function SystemTagBadges({ tags }: { tags: SystemTag[] }) {
 
 function SystemTagBadge({ tag }: { tag: SystemTag }) {
   const [open, setOpen] = useState(false);
+
+  // Task notification: render formatted instead of raw XML
+  if (tag.name === "task-notification") {
+    return <TaskNotificationBadge content={tag.content} />;
+  }
+
   return (
     <div className="text-xs">
       <button
@@ -347,29 +370,132 @@ function SystemTagBadge({ tag }: { tag: SystemTag }) {
   );
 }
 
-/** Fetches image with auth header, renders as blob URL */
-function AuthImage({ src, alt }: { src: string; alt: string }) {
+/** Extract a sub-tag value from XML-like content */
+function xmlTag(content: string, tag: string): string | undefined {
+  const m = content.match(new RegExp(`<${tag}>([\\s\\S]*?)</${tag}>`));
+  return m?.[1]?.trim() || undefined;
+}
+
+/** Formatted badge for <task-notification> — shows status, summary, output file, result */
+function TaskNotificationBadge({ content }: { content: string }) {
+  const [open, setOpen] = useState(false);
+  const status = xmlTag(content, "status");
+  const summary = xmlTag(content, "summary");
+  const outputFile = xmlTag(content, "output-file");
+  const result = xmlTag(content, "result");
+  const isOk = status === "completed";
+
+  return (
+    <div className="text-xs">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 rounded-full border border-border/60 bg-surface/50 px-2 py-0.5 text-text-subtle hover:text-text-secondary hover:bg-surface transition-colors"
+      >
+        {isOk ? <CheckCircle2 className="size-2.5 text-green-500" /> : <XCircle className="size-2.5 text-yellow-500" />}
+        <span className="truncate max-w-80">{summary ?? "Task notification"}</span>
+        <ChevronRight className={cn("size-2.5 transition-transform shrink-0", open && "rotate-90")} />
+      </button>
+      {open && (
+        <div className="mt-1 rounded border border-border/40 bg-surface/30 px-2 py-1.5 space-y-1.5">
+          {/* Full summary (button truncates it) */}
+          {summary && <p className="text-[11px] text-text-secondary">{summary}</p>}
+          {outputFile && <FilePathChip path={outputFile} />}
+          {result && (
+            <div className="text-[11px] text-text-subtle/80 max-h-60 overflow-y-auto leading-relaxed">
+              <MarkdownContent content={result} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Clickable file path chip — opens file in editor tab */
+function FilePathChip({ path, projectName }: { path: string; projectName?: string }) {
+  const handleClick = useCallback(() => {
+    const openTab = useTabStore.getState().openTab;
+    const pName = projectName ?? useProjectStore.getState().activeProject?.name;
+    const fileName = basename(path);
+    const meta: Record<string, unknown> = { filePath: path };
+    if (pName) meta.projectName = pName;
+    // Try to verify file exists, then open; fallback: open directly
+    api.get(`/api/fs/read?path=${encodeURIComponent(path)}`).then(() => {
+      openTab({ type: "editor", title: fileName, metadata: meta, projectId: null, closable: true });
+    }).catch(() => {
+      openTab({ type: "editor", title: fileName, metadata: meta, projectId: null, closable: true });
+    });
+  }, [path, projectName]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="inline-flex items-center gap-1 rounded border border-border/50 bg-surface/50 px-1.5 py-0.5 font-mono text-[10px] text-text-secondary hover:text-text-primary hover:bg-surface transition-colors cursor-pointer"
+    >
+      <FileText className="size-2.5 shrink-0" />
+      <span className="truncate max-w-60">{basename(path)}</span>
+      <ExternalLink className="size-2 shrink-0 opacity-50" />
+    </button>
+  );
+}
+
+/** Render text with absolute file paths detected and turned into clickable chips */
+function TextWithFilePaths({ text, projectName }: { text: string; projectName?: string }) {
+  const parts = useMemo(() => {
+    // Match absolute file paths (at least 2 segments)
+    const re = /(\/(?:[\w.\-]+\/)+[\w.\-]+)/g;
+    const result: { kind: "text" | "path"; value: string }[] = [];
+    let last = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+      if (m.index > last) result.push({ kind: "text", value: text.slice(last, m.index) });
+      result.push({ kind: "path", value: m[1]! });
+      last = m.index + m[0].length;
+    }
+    if (last < text.length) result.push({ kind: "text", value: text.slice(last) });
+    return result;
+  }, [text]);
+
+  return (
+    <>
+      {parts.map((p, i) =>
+        p.kind === "path"
+          ? <FilePathChip key={i} path={p.value} projectName={projectName} />
+          : <span key={i}>{p.value}</span>,
+      )}
+    </>
+  );
+}
+
+/** Hook: fetch an image via auth header, return blob URL */
+function useAuthBlob(src: string): { blobUrl: string | null; error: boolean } {
   const [blobUrl, setBlobUrl] = useState<string | null>(null);
   const [error, setError] = useState(false);
 
   useEffect(() => {
-    let revoke: string | undefined;
+    let revoked = false;
+    let url: string | undefined;
     const token = getAuthToken();
     fetch(src, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
-      .then((r) => {
-        if (!r.ok) throw new Error("Failed to load");
-        return r.blob();
-      })
+      .then((r) => { if (!r.ok) throw new Error("Failed"); return r.blob(); })
       .then((blob) => {
-        const url = URL.createObjectURL(blob);
-        revoke = url;
+        if (revoked) return;
+        url = URL.createObjectURL(blob);
         setBlobUrl(url);
       })
-      .catch(() => setError(true));
-
-    return () => { if (revoke) URL.revokeObjectURL(revoke); };
+      .catch(() => { if (!revoked) setError(true); });
+    return () => { revoked = true; if (url) URL.revokeObjectURL(url); };
   }, [src]);
 
+  return { blobUrl, error };
+}
+
+/** Fetches image with auth header, renders as blob URL — click opens lightbox */
+function AuthImage({ src, alt }: { src: string; alt: string }) {
+  const { blobUrl, error } = useAuthBlob(src);
+  const openOverlay = useImageOverlay((s) => s.open);
+
   if (error) {
     return (
       <div className="flex items-center gap-1.5 rounded-md border border-border bg-background/50 px-2 py-1 text-xs text-text-secondary">
@@ -384,13 +510,38 @@ function AuthImage({ src, alt }: { src: string; alt: string }) {
   }
 
   return (
-    <a href={blobUrl} target="_blank" rel="noopener noreferrer" className="block">
+    <button type="button" onClick={() => openOverlay(blobUrl, alt)} className="block text-left">
       <img
         src={blobUrl}
         alt={alt}
-        className="rounded-md max-h-48 max-w-full object-contain border border-border"
+        className="rounded-md max-h-48 max-w-full object-contain border border-border cursor-pointer hover:opacity-90 transition-opacity"
       />
-    </a>
+    </button>
+  );
+}
+
+/** Chip for attached images in user bubble — tiny preview replaces icon, click opens lightbox */
+function AuthImageThumbnail({ filePath, projectName }: { filePath: string; projectName?: string }) {
+  const src = uploadPreviewUrl(filePath, projectName);
+  const { blobUrl, error } = useAuthBlob(src);
+  const openOverlay = useImageOverlay((s) => s.open);
+  const name = basename(filePath);
+
+  return (
+    <button
+      type="button"
+      onClick={() => blobUrl && openOverlay(blobUrl, name)}
+      className="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5 text-[11px] text-text-secondary hover:bg-surface transition-colors cursor-pointer"
+    >
+      {blobUrl ? (
+        <img src={blobUrl} alt={name} className="size-4 rounded-sm object-cover shrink-0" />
+      ) : error ? (
+        <ImageIcon className="size-3 shrink-0" />
+      ) : (
+        <div className="size-4 rounded-sm bg-surface animate-pulse shrink-0" />
+      )}
+      <span className="truncate max-w-32">{name}</span>
+    </button>
   );
 }
 

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Activity, RefreshCw, Eye, ShieldCheck, Loader2, X } from "lucide-react";
+import { Activity, RefreshCw, Eye, Download, Upload, Plus, X } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import type { UsageInfo, LimitBucket } from "../../../types/chat";
 import {
@@ -7,11 +7,11 @@ import {
   getActiveAccount,
   getAllAccountUsages,
   patchAccount,
-  verifyAccount,
   type AccountInfo,
   type AccountUsageEntry,
   type OAuthProfileData,
 } from "../../lib/api-settings";
+import { AddAccountDialog, ExportAccountsDialog, ImportAccountsDialog } from "./account-dialogs";
 
 interface UsageBadgeProps {
   usage: UsageInfo;
@@ -97,7 +97,7 @@ function BucketRow({ label, bucket }: { label: string; bucket?: LimitBucket }) {
       <div className="flex items-center justify-between">
         <span className="text-xs font-medium text-text-primary">{label}</span>
         {reset && (
-          <span className="text-[10px] text-text-subtle">↻ {reset}</span>
+          <span className="text-[10px] text-text-subtle" title="Resets in">↻ {reset}</span>
         )}
       </div>
       <div className="flex items-center gap-2">
@@ -115,6 +115,28 @@ function BucketRow({ label, bucket }: { label: string; bucket?: LimitBucket }) {
   );
 }
 
+function formatExpiry(expiresAt: number): string {
+  const diff = expiresAt - Date.now();
+  if (diff <= 0) return "expired";
+  const mins = Math.ceil(diff / 60_000);
+  const h = Math.floor(mins / 60);
+  const d = Math.floor(h / 24);
+  if (d > 0) return `${d}d ${h % 24}h`;
+  if (h > 0) return `${h}h ${mins % 60}m`;
+  return `${mins}m`;
+}
+
+/** Derive a human-readable token status from account info */
+function tokenStatus(info?: AccountInfo): { label: string; tip: string; color: string } {
+  if (!info) return { label: "unknown", tip: "No account info available", color: "text-text-subtle" };
+  if (!info.expiresAt) return { label: "key", tip: "API key (no expiry)", color: "text-text-subtle" };
+  const expired = info.expiresAt * 1000 < Date.now(); // expiresAt is seconds
+  if (expired && info.hasRefreshToken) return { label: "expired", tip: "Token expired but has refresh token — will auto-renew", color: "text-amber-500" };
+  if (expired) return { label: "expired", tip: "Token expired, no refresh token", color: "text-red-500" };
+  if (info.hasRefreshToken) return { label: "long-lived", tip: "OAuth token with refresh — long-lived", color: "text-green-500" };
+  return { label: "temp", tip: "Temporary token without refresh — will expire", color: "text-amber-500" };
+}
+
 function formatLastUpdated(ts: number | null | undefined): string | null {
   if (!ts) return null;
   const secs = Math.round((Date.now() - ts) / 1000);
@@ -129,13 +151,12 @@ function formatLastUpdated(ts: number | null | undefined): string | null {
   return `${days}d ago`;
 }
 
-function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onVerify, verifyingId, onViewProfile, flash }: {
+function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, onViewProfile, flash }: {
   entry: AccountUsageEntry;
   isActive: boolean;
   accountInfo?: AccountInfo;
   onToggle?: (id: string, status: string) => void;
-  onVerify?: (id: string) => void;
-  verifyingId?: string | null;
+  onExport?: (id: string) => void;
   onViewProfile?: (profile: OAuthProfileData) => void;
   flash?: boolean;
 }) {
@@ -144,7 +165,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onVerify, ve
   const status = accountInfo?.status ?? entry.accountStatus;
 
   return (
-    <div className={`rounded-md border p-2 space-y-1.5 transition-colors duration-500 ${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 ${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)}
@@ -163,14 +184,13 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onVerify, ve
               <Eye className="size-3" />
             </button>
           )}
-          {onVerify && (
+          {onExport && entry.isOAuth && (
             <button
-              className="p-1 rounded cursor-pointer text-text-subtle hover:text-green-600 hover:bg-surface-elevated transition-colors"
-              onClick={() => onVerify(entry.accountId)}
-              disabled={verifyingId === entry.accountId}
-              title="Verify token"
+              className="p-1 rounded cursor-pointer text-text-subtle hover:text-blue-500 hover:bg-surface-elevated transition-colors"
+              onClick={() => onExport(entry.accountId)}
+              title="Export this account"
             >
-              {verifyingId === entry.accountId ? <Loader2 className="size-3 animate-spin" /> : <ShieldCheck className="size-3" />}
+              <Download className="size-3" />
             </button>
           )}
           {onToggle && (
@@ -195,11 +215,21 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onVerify, ve
           {entry.isOAuth ? "No usage data yet" : "Usage tracking not available for API keys"}
         </p>
       )}
-      {usage.lastFetchedAt && (
-        <p className="text-[9px] text-text-subtle">
-          Updated: {formatLastUpdated(new Date(usage.lastFetchedAt).getTime())}
-        </p>
-      )}
+      {/* Footer: updated · expires · type */}
+      {(() => {
+        const ts = tokenStatus(accountInfo);
+        return (
+          <div className="flex items-center gap-1.5 text-[9px] text-text-subtle flex-wrap">
+            {usage.lastFetchedAt && (
+              <span title="Last usage data update">↻ {formatLastUpdated(new Date(usage.lastFetchedAt).getTime())}</span>
+            )}
+            {accountInfo?.expiresAt && accountInfo.expiresAt * 1000 > Date.now() && (
+              <span title="Token expires in">⏱ {formatExpiry(accountInfo.expiresAt * 1000)}</span>
+            )}
+            <span className={ts.color} title={ts.tip}>© {ts.label}</span>
+          </div>
+        );
+      })()}
     </div>
   );
 }
@@ -211,10 +241,26 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   const [initialLoading, setInitialLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [flashIds, setFlashIds] = useState<Set<string>>(new Set());
-  const [verifyingId, setVerifyingId] = useState<string | null>(null);
   const [profileView, setProfileView] = useState<OAuthProfileData | null>(null);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showExportDialog, setShowExportDialog] = useState(false);
+  const [showImportDialog, setShowImportDialog] = useState(false);
+  const [exportPreselect, setExportPreselect] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const msgTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
   const prevUsagesRef = useRef<AccountUsageEntry[]>([]);
 
+  function showMessage(msg: string) {
+    if (msgTimer.current) clearTimeout(msgTimer.current);
+    setMessage(msg);
+    msgTimer.current = setTimeout(() => setMessage(null), 4000);
+  }
+
+  function handleSuccess(msg?: string) {
+    loadAll();
+    if (msg) showMessage(msg);
+  }
+
   async function loadAll() {
     const isRefresh = allUsages.length > 0;
     if (isRefresh) setRefreshing(true); else setInitialLoading(true);
@@ -277,10 +323,9 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
     onReload?.();
   }
 
-  async function handleVerify(id: string) {
-    setVerifyingId(id);
-    try { await verifyAccount(id); loadAll(); } catch { /* silent */ }
-    setVerifyingId(null);
+  function openExportAll() {
+    setExportPreselect(null);
+    setShowExportDialog(true);
   }
 
   return (
@@ -312,8 +357,14 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
         </div>
       </div>
 
+      {message && (
+        <div className="text-[11px] p-1.5 rounded bg-green-500/10 text-green-600 text-center animate-in fade-in duration-200">
+          {message}
+        </div>
+      )}
+
       {(hasMultipleAccounts || initialLoading) ? (
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-1.5">
+        <div className="flex gap-1.5 overflow-x-auto pb-1 -mx-3 px-3 snap-x snap-mandatory scrollbar-thin">
           {initialLoading ? (
             <p className="text-[10px] text-text-subtle">Loading...</p>
           ) : (
@@ -324,8 +375,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
                 isActive={entry.accountId === (activeAccountId ?? usage.activeAccountId)}
                 accountInfo={accountMap.get(entry.accountId)}
                 onToggle={handleToggle}
-                onVerify={handleVerify}
-                verifyingId={verifyingId}
+                onExport={(id) => { setExportPreselect(id); setShowExportDialog(true); }}
                 onViewProfile={setProfileView}
                 flash={flashIds.has(entry.accountId)}
               />
@@ -387,6 +437,24 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
           </div>
         </div>
       )}
+
+      {/* Action buttons */}
+      <div className="border-t border-border pt-2 flex gap-1.5">
+        <button onClick={() => setShowAddDialog(true)} className="flex-1 flex items-center justify-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-text-secondary hover:bg-surface-hover transition-colors cursor-pointer">
+          <Plus className="size-3" /> Add
+        </button>
+        <button onClick={openExportAll} className="flex-1 flex items-center justify-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-text-secondary hover:bg-surface-hover transition-colors cursor-pointer">
+          <Download className="size-3" /> Export
+        </button>
+        <button onClick={() => setShowImportDialog(true)} className="flex-1 flex items-center justify-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-text-secondary hover:bg-surface-hover transition-colors cursor-pointer">
+          <Upload className="size-3" /> Import
+        </button>
+      </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} />
+      <ImportAccountsDialog open={showImportDialog} onOpenChange={setShowImportDialog} onSuccess={handleSuccess} />
     </div>
   );
 }

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

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import {
   Moon, Sun, Monitor, Bell, BellOff, Check, ChevronRight, ArrowLeft,
-  Bot, BellRing, Users, Keyboard, Globe,
+  Bot, BellRing, Keyboard, Globe,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -12,7 +12,6 @@ import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
 import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
 import { TelegramSettingsSection } from "./telegram-settings-section";
-import { AccountsSettingsSection } from "./accounts-settings-section";
 import { ProxySettingsSection } from "./proxy-settings-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
@@ -26,12 +25,11 @@ const pushSupported = "PushManager" in window && "serviceWorker" in navigator;
 const isIosNonPwa = /iPhone|iPad/.test(navigator.userAgent) &&
   !window.matchMedia("(display-mode: standalone)").matches;
 
-type SettingsCategory = "ai" | "notifications" | "accounts" | "proxy" | "shortcuts";
+type SettingsCategory = "ai" | "notifications" | "proxy" | "shortcuts";
 
 const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; icon: React.ElementType }[] = [
   { value: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
   { value: "notifications", label: "Notifications", subtitle: "Push & Telegram alerts", icon: BellRing },
-  { value: "accounts", label: "Accounts", subtitle: "Claude accounts & rotation", icon: Users },
   { value: "proxy", label: "API Proxy", subtitle: "Expose accounts as Anthropic API", icon: Globe },
   { value: "shortcuts", label: "Keyboard Shortcuts", subtitle: "Customize key bindings", icon: Keyboard },
 ];
@@ -84,7 +82,6 @@ export function SettingsTab() {
           <div className="p-3">
             {activeCategory === "ai" && <AISettingsSection compact />}
             {activeCategory === "notifications" && <NotificationsContent isSubscribed={isSubscribed} loading={loading} permission={permission} pushError={pushError} subscribe={subscribe} unsubscribe={unsubscribe} />}
-            {activeCategory === "accounts" && <AccountsSettingsSection />}
             {activeCategory === "proxy" && <ProxySettingsSection />}
             {activeCategory === "shortcuts" && <KeyboardShortcutsSection />}
           </div>