@seqyuan/annodex 0.1.10 → 0.1.12

package/components/FileExplorer.tsx

@@ -0,0 +1,758 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { getFileIcon, FolderIcon } from "./FileIcons";
+import { encodeFilePathForApi, getRelativeFilePath, joinFilePath } from "@/lib/file-paths";
+
+interface FileEntry {
+  name: string;
+  isDir: boolean;
+  size: number;
+  modified: string;
+}
+
+interface FileNode {
+  name: string;
+  fullPath: string;
+  isDir: boolean;
+  size: number;
+  children?: FileNode[];
+  loaded?: boolean;
+}
+
+type UploadPhase = "uploading" | "success" | "warning" | "error";
+
+interface UploadState {
+  phase: UploadPhase;
+  targetPath: string;
+  fileCount: number;
+  loaded: number;
+  total: number;
+  message: string;
+  details?: string[];
+}
+
+interface UploadResponse {
+  error?: string;
+  uploaded?: Array<{ originalName: string; name: string; path: string; size: number }>;
+  failed?: Array<{ name: string; error: string }>;
+}
+
+interface Props {
+  cwd: string;
+  onOpenFile: (filePath: string, fileName: string) => void;
+  refreshKey?: number;
+  onAtMention?: (relativePath: string) => void;
+  searchQuery?: string;
+  onSearchChange?: (value: string) => void;
+}
+
+async function fetchEntries(dirPath: string): Promise<FileNode[]> {
+  const encoded = encodeFilePathForApi(dirPath);
+  const res = await fetch(`/api/files/${encoded}?type=list`);
+  if (!res.ok) return [];
+  const data = await res.json() as { entries?: FileEntry[] };
+  return (data.entries ?? []).map((e) => ({
+    name: e.name,
+    fullPath: joinFilePath(dirPath, e.name),
+    isDir: e.isDir,
+    size: e.size,
+    children: e.isDir ? [] : undefined,
+    loaded: !e.isDir,
+  }));
+}
+
+function nodeMatchesSearch(node: FileNode, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  if (node.name.toLowerCase().includes(q)) return true;
+  return (node.children ?? []).some((child) => nodeMatchesSearch(child, q));
+}
+
+function hasDraggedFiles(dataTransfer: DataTransfer): boolean {
+  if (Array.from(dataTransfer.types).includes("Files")) return true;
+  return Array.from(dataTransfer.items).some((item) => item.kind === "file");
+}
+
+function getDroppedFiles(dataTransfer: DataTransfer): File[] {
+  return Array.from(dataTransfer.files).filter((file) => !!file.name);
+}
+
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+  return `${value >= 10 || unitIndex === 0 ? Math.round(value) : value.toFixed(1)} ${units[unitIndex]}`;
+}
+
+function getTargetLabel(targetPath: string, cwd: string): string {
+  return targetPath === cwd ? "." : getRelativeFilePath(targetPath, cwd);
+}
+
+function TreeNode({
+  node,
+  depth,
+  cwd,
+  onOpenFile,
+  onAtMention,
+  expandedPaths,
+  onToggleExpanded,
+  onUploadFiles,
+  uploadTargetPath,
+  refreshKey,
+  searchQuery,
+}: {
+  node: FileNode;
+  depth: number;
+  cwd: string;
+  onOpenFile: (filePath: string, fileName: string) => void;
+  onAtMention?: (relativePath: string) => void;
+  expandedPaths: Set<string>;
+  onToggleExpanded: (fullPath: string, open: boolean) => void;
+  onUploadFiles: (files: File[], targetPath: string) => void;
+  uploadTargetPath: string | null;
+  refreshKey?: number;
+  searchQuery?: string;
+}) {
+  const searching = !!searchQuery?.trim();
+  const open = searching ? node.isDir : expandedPaths.has(node.fullPath);
+  const [children, setChildren] = useState<FileNode[]>(node.children ?? []);
+  const [loaded, setLoaded] = useState(node.loaded ?? false);
+  const [loading, setLoading] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const isUploadTarget = node.isDir && (dragOver || uploadTargetPath === node.fullPath);
+  const visibleChildren = searching
+    ? children.filter((child) => nodeMatchesSearch(child, searchQuery ?? ""))
+    : children;
+
+  const loadChildren = useCallback(async (force = false) => {
+    if (loaded && !force) return;
+    setLoading(true);
+    try {
+      const entries = await fetchEntries(node.fullPath);
+      setChildren(entries);
+      setLoaded(true);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [loaded, node.fullPath]);
+
+  // When refreshKey causes a re-render with the same node identity, reload open dirs
+  const prevLoadedRef = useRef(loaded);
+  useEffect(() => {
+    prevLoadedRef.current = loaded;
+  });
+
+  // Re-fetch children when refreshKey changes and the directory is already open/loaded
+  useEffect(() => {
+    if (open && loaded) {
+      loadChildren(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey]);
+
+  const handleClick = useCallback(() => {
+    if (node.isDir) {
+      const next = !open;
+      onToggleExpanded(node.fullPath, next);
+      if (next && !loaded) loadChildren();
+    } else {
+      onOpenFile(node.fullPath, node.name);
+    }
+  }, [node.isDir, node.fullPath, node.name, loaded, open, loadChildren, onOpenFile, onToggleExpanded]);
+
+  const handleDragEnter = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    if (!node.isDir || !hasDraggedFiles(event.dataTransfer)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = "copy";
+    setDragOver(true);
+  }, [node.isDir]);
+
+  const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    if (!node.isDir || !hasDraggedFiles(event.dataTransfer)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = "copy";
+  }, [node.isDir]);
+
+  const handleDragLeave = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    if (!node.isDir) return;
+    const nextTarget = event.relatedTarget;
+    if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) return;
+    setDragOver(false);
+  }, [node.isDir]);
+
+  const handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    if (!node.isDir || !hasDraggedFiles(event.dataTransfer)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setDragOver(false);
+    const files = getDroppedFiles(event.dataTransfer);
+    if (files.length > 0) {
+      onUploadFiles(files, node.fullPath);
+      if (!open) onToggleExpanded(node.fullPath, true);
+      if (!loaded) void loadChildren();
+    }
+  }, [loadChildren, loaded, node.fullPath, node.isDir, onToggleExpanded, onUploadFiles, open]);
+
+  return (
+    <div>
+      <div
+        onClick={handleClick}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        style={{
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          paddingLeft: 8 + depth * 14,
+          paddingRight: 8,
+          height: 24,
+          cursor: "pointer",
+          background: isUploadTarget ? "rgba(37,99,235,0.14)" : hovered ? "var(--bg-hover)" : "transparent",
+          outline: isUploadTarget ? "1px solid rgba(37,99,235,0.42)" : "none",
+          outlineOffset: -1,
+          borderRadius: 4,
+          userSelect: "none",
+          transition: "background 0.12s, outline-color 0.12s",
+        }}
+      >
+        {node.isDir && (
+          <svg
+            width="10" height="10" viewBox="0 0 10 10" fill="none"
+            stroke="var(--text-dim)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
+            style={{ flexShrink: 0, transform: open ? "rotate(90deg)" : "none", transition: "transform 0.1s" }}
+          >
+            <polyline points="3 2 7 5 3 8" />
+          </svg>
+        )}
+        {!node.isDir && <span style={{ width: 10, flexShrink: 0 }} />}
+        <span style={{ flexShrink: 0, display: "flex", alignItems: "center" }}>
+          {node.isDir ? <FolderIcon size={14} open={open} /> : getFileIcon(node.name, 14)}
+        </span>
+        <span
+          style={{
+            fontSize: 12,
+            color: "var(--text)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            flex: 1,
+          }}
+          title={node.fullPath}
+        >
+          {node.name}
+        </span>
+        {loading && (
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--text-dim)" strokeWidth="2" strokeLinecap="round">
+            <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4" />
+          </svg>
+        )}
+        {onAtMention && hovered && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onAtMention(getRelativeFilePath(node.fullPath, cwd));
+            }}
+            title="Insert path into chat"
+            style={{
+              position: "absolute",
+              right: 4,
+              top: "50%",
+              transform: "translateY(-50%)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 4,
+              padding: "0 8px",
+              height: 20,
+              background: "var(--bg-panel)",
+              border: "1px solid var(--border)",
+              borderRadius: 4,
+              color: "var(--accent)",
+              cursor: "pointer",
+              fontSize: 11,
+              fontWeight: 600,
+              whiteSpace: "nowrap",
+            }}
+          >
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" />
+            </svg>
+            mention
+          </button>
+        )}
+      </div>
+      {node.isDir && open && (
+        <div>
+          {visibleChildren.map((child) => (
+            <TreeNode key={child.fullPath} node={child} depth={depth + 1} cwd={cwd} onOpenFile={onOpenFile} onAtMention={onAtMention} expandedPaths={expandedPaths} onToggleExpanded={onToggleExpanded} onUploadFiles={onUploadFiles} uploadTargetPath={uploadTargetPath} refreshKey={refreshKey} searchQuery={searchQuery} />
+          ))}
+          {visibleChildren.length === 0 && loaded && !searching && (
+            <div style={{ paddingLeft: 8 + (depth + 1) * 14, fontSize: 11, color: "var(--text-dim)", height: 22, display: "flex", alignItems: "center" }}>
+              empty
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FileExplorer({ cwd, onOpenFile, refreshKey, onAtMention, searchQuery = "",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onSearchChange,
+}: Props) {
+  const [roots, setRoots] = useState<FileNode[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
+  const [isDraggingFiles, setIsDraggingFiles] = useState(false);
+  const [uploadTargetPath, setUploadTargetPath] = useState<string | null>(null);
+  const [uploadState, setUploadState] = useState<UploadState | null>(null);
+  const prevCwdRef = useRef<string | null>(null);
+  const uploadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const dragDepthRef = useRef(0);
+
+  const loadRootEntries = useCallback((nextCwd: string, showLoading: boolean) => {
+    setLoading(showLoading);
+    setError(null);
+    return fetchEntries(nextCwd)
+      .then((entries) => setRoots(entries))
+      .catch((e) => setError(String(e)))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleToggleExpanded = useCallback((fullPath: string, open: boolean) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (open) next.add(fullPath); else next.delete(fullPath);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    const cwdChanged = prevCwdRef.current !== cwd;
+    prevCwdRef.current = cwd;
+
+    // Reset expanded state only when cwd changes, not on refreshKey bumps
+    if (cwdChanged) setExpandedPaths(new Set());
+
+    loadRootEntries(cwd, cwdChanged);
+  }, [cwd, refreshKey, loadRootEntries]);
+
+  useEffect(() => () => {
+    if (uploadTimerRef.current) clearTimeout(uploadTimerRef.current);
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    loadRootEntries(cwd, roots.length === 0);
+  }, [cwd, roots.length, loadRootEntries]);
+
+  const scheduleUploadNoticeClear = useCallback(() => {
+    if (uploadTimerRef.current) clearTimeout(uploadTimerRef.current);
+    uploadTimerRef.current = setTimeout(() => setUploadState(null), 5000);
+  }, []);
+
+  const uploadFiles = useCallback((files: File[], targetPath: string) => {
+    if (files.length === 0) return;
+
+    dragDepthRef.current = 0;
+    setIsDraggingFiles(false);
+    if (uploadTimerRef.current) clearTimeout(uploadTimerRef.current);
+    const total = files.reduce((sum, file) => sum + file.size, 0);
+    const targetLabel = getTargetLabel(targetPath, cwd);
+    setUploadTargetPath(targetPath);
+    setUploadState({
+      phase: "uploading",
+      targetPath,
+      fileCount: files.length,
+      loaded: 0,
+      total,
+      message: `Uploading ${files.length} file${files.length === 1 ? "" : "s"} to ${targetLabel}`,
+    });
+
+    const formData = new FormData();
+    files.forEach((file) => formData.append("files", file, file.name));
+
+    const xhr = new XMLHttpRequest();
+    const encoded = encodeFilePathForApi(targetPath);
+    xhr.open("POST", `/api/files/${encoded}?type=upload`);
+
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable) return;
+      setUploadState((prev) => prev ? {
+        ...prev,
+        loaded: event.loaded,
+        total: event.total,
+      } : prev);
+    };
+
+    xhr.onload = () => {
+      setUploadTargetPath(null);
+      let data: UploadResponse = {};
+      try {
+        data = JSON.parse(xhr.responseText) as UploadResponse;
+      } catch {
+        data = {};
+      }
+
+      if (xhr.status >= 200 && xhr.status < 300) {
+        const uploaded = data.uploaded ?? [];
+        const failed = data.failed ?? [];
+        const renamed = uploaded.filter((item) => item.name !== item.originalName);
+        const details = [
+          ...renamed.slice(0, 3).map((item) => `${item.originalName} saved as ${item.name}`),
+          ...failed.slice(0, 3).map((item) => `${item.name}: ${item.error}`),
+        ];
+        setUploadState({
+          phase: failed.length > 0 ? "warning" : "success",
+          targetPath,
+          fileCount: files.length,
+          loaded: total,
+          total,
+          message: failed.length > 0
+            ? `Uploaded ${uploaded.length}, ${failed.length} failed`
+            : `Uploaded ${uploaded.length} file${uploaded.length === 1 ? "" : "s"} to ${targetLabel}`,
+          details,
+        });
+        handleRefresh();
+        scheduleUploadNoticeClear();
+      } else {
+        const message = data.error ?? `Upload failed (HTTP ${xhr.status})`;
+        setUploadState({
+          phase: xhr.status === 403 ? "error" : "error",
+          targetPath,
+          fileCount: files.length,
+          loaded: 0,
+          total,
+          message,
+          details: xhr.status === 403 ? ["Check directory write permission or project access."] : undefined,
+        });
+        scheduleUploadNoticeClear();
+      }
+    };
+
+    xhr.onerror = () => {
+      setUploadTargetPath(null);
+      setUploadState({
+        phase: "error",
+        targetPath,
+        fileCount: files.length,
+        loaded: 0,
+        total,
+        message: "Upload failed due to a network error",
+      });
+      scheduleUploadNoticeClear();
+    };
+
+    xhr.onabort = () => {
+      setUploadTargetPath(null);
+      setUploadState({
+        phase: "error",
+        targetPath,
+        fileCount: files.length,
+        loaded: 0,
+        total,
+        message: "Upload canceled",
+      });
+      scheduleUploadNoticeClear();
+    };
+
+    xhr.send(formData);
+  }, [cwd, handleRefresh, scheduleUploadNoticeClear]);
+
+  const handleFrameDragEnter = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    if (!hasDraggedFiles(event.dataTransfer)) return;
+    event.preventDefault();
+    dragDepthRef.current += 1;
+    setIsDraggingFiles(true);
+  }, []);
+
+  const handleFrameDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    if (!hasDraggedFiles(event.dataTransfer)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  }, []);
+
+  const handleFrameDragLeave = useCallback(() => {
+    dragDepthRef.current -= 1;
+    if (dragDepthRef.current <= 0) {
+      dragDepthRef.current = 0;
+      setIsDraggingFiles(false);
+    }
+  }, []);
+
+  const handleFrameDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    if (!hasDraggedFiles(event.dataTransfer)) return;
+    event.preventDefault();
+    dragDepthRef.current = 0;
+    setIsDraggingFiles(false);
+    const files = getDroppedFiles(event.dataTransfer);
+    if (files.length > 0) uploadFiles(files, cwd);
+  }, [cwd, uploadFiles]);
+
+  const visibleRoots = searchQuery.trim()
+    ? roots.filter((node) => nodeMatchesSearch(node, searchQuery))
+    : roots;
+
+  const searchActive = searchQuery.trim().length > 0;
+
+  if (loading) {
+    return (
+      <FileExplorerFrame
+        cwd={cwd}
+        isDraggingFiles={isDraggingFiles}
+        uploadState={uploadState}
+        onDragEnter={handleFrameDragEnter}
+        onDragOver={handleFrameDragOver}
+        onDragLeave={handleFrameDragLeave}
+        onDrop={handleFrameDrop}
+      >
+        <div style={{ padding: "8px 12px", fontSize: 11, color: "var(--text-dim)" }}>
+          Loading files...
+        </div>
+      </FileExplorerFrame>
+    );
+  }
+
+  if (error) {
+    return (
+      <FileExplorerFrame
+        cwd={cwd}
+        isDraggingFiles={isDraggingFiles}
+        uploadState={uploadState}
+        onDragEnter={handleFrameDragEnter}
+        onDragOver={handleFrameDragOver}
+        onDragLeave={handleFrameDragLeave}
+        onDrop={handleFrameDrop}
+      >
+        <div style={{ padding: "8px 12px", fontSize: 11, color: "#f87171" }}>
+          {error}
+        </div>
+      </FileExplorerFrame>
+    );
+  }
+
+  return (
+    <FileExplorerFrame
+      cwd={cwd}
+      isDraggingFiles={isDraggingFiles}
+      uploadState={uploadState}
+      onDragEnter={handleFrameDragEnter}
+      onDragOver={handleFrameDragOver}
+      onDragLeave={handleFrameDragLeave}
+      onDrop={handleFrameDrop}
+    >
+      <div style={{ padding: "2px 4px" }}>
+        {visibleRoots.map((node) => (
+          <TreeNode
+            key={node.fullPath}
+            node={node}
+            depth={0}
+            cwd={cwd}
+            onOpenFile={onOpenFile}
+            onAtMention={onAtMention}
+            expandedPaths={expandedPaths}
+            onToggleExpanded={handleToggleExpanded}
+            onUploadFiles={uploadFiles}
+            uploadTargetPath={uploadTargetPath}
+            refreshKey={refreshKey}
+            searchQuery={searchQuery}
+          />
+        ))}
+        {visibleRoots.length === 0 && (
+          <div style={{ padding: "8px 12px", fontSize: 11, color: "var(--text-dim)" }}>
+            {searchActive ? "No matching files" : "No files found"}
+          </div>
+        )}
+      </div>
+    </FileExplorerFrame>
+  );
+}
+
+function FileExplorerFrame({
+  cwd,
+  isDraggingFiles,
+  uploadState,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  children,
+}: {
+  cwd: string;
+  isDraggingFiles: boolean;
+  uploadState: UploadState | null;
+  onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
+  children: React.ReactNode;
+}) {
+  const progress = uploadState && uploadState.total > 0
+    ? Math.max(0, Math.min(100, Math.round((uploadState.loaded / uploadState.total) * 100)))
+    : uploadState?.phase === "uploading" ? 8 : 100;
+  const statusColor = uploadState?.phase === "success"
+    ? "#22c55e"
+    : uploadState?.phase === "warning"
+      ? "#f59e0b"
+      : uploadState?.phase === "error"
+        ? "#ef4444"
+        : "var(--accent)";
+
+  return (
+    <div
+      onDragEnter={onDragEnter}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+      style={{
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100%",
+        outline: isDraggingFiles ? "1px solid rgba(37,99,235,0.45)" : "none",
+        outlineOffset: -1,
+        background: isDraggingFiles ? "rgba(37,99,235,0.04)" : undefined,
+        transition: "background 0.12s, outline-color 0.12s",
+      }}
+    >
+      <div style={{ flex: 1, minHeight: 0 }}>{children}</div>
+      {isDraggingFiles && (
+        <div
+          style={{
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 6,
+            top: 42,
+            border: "1px dashed rgba(37,99,235,0.62)",
+            borderRadius: 8,
+            background: "rgba(37,99,235,0.07)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 2,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "7px 10px",
+              border: "1px solid var(--border)",
+              borderRadius: 6,
+              background: "var(--bg-panel)",
+              color: "var(--text)",
+              fontSize: 12,
+              boxShadow: "0 8px 24px rgba(0,0,0,0.16)",
+            }}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+            Drop to upload into {getTargetLabel(cwd, cwd)}
+          </div>
+        </div>
+      )}
+      {uploadState && (
+        <div
+          style={{
+            margin: "6px",
+            padding: "7px 8px",
+            border: "1px solid var(--border)",
+            borderRadius: 6,
+            background: "var(--bg-panel)",
+            boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0 }}>
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 999,
+                background: statusColor,
+                flexShrink: 0,
+              }}
+            />
+            <span
+              title={uploadState.message}
+              style={{
+                flex: 1,
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: "var(--text)",
+                fontSize: 11,
+                fontWeight: 600,
+              }}
+            >
+              {uploadState.message}
+            </span>
+            <span style={{ color: "var(--text-dim)", fontSize: 10, flexShrink: 0 }}>
+              {uploadState.phase === "uploading" ? `${progress}%` : formatBytes(uploadState.total)}
+            </span>
+          </div>
+          <div
+            style={{
+              marginTop: 6,
+              height: 3,
+              borderRadius: 999,
+              background: "var(--bg)",
+              overflow: "hidden",
+            }}
+          >
+            <div
+              style={{
+                width: `${progress}%`,
+                height: "100%",
+                borderRadius: 999,
+                background: statusColor,
+                transition: "width 0.15s ease",
+              }}
+            />
+          </div>
+          {uploadState.details && uploadState.details.length > 0 && (
+            <div style={{ marginTop: 5, display: "grid", gap: 2 }}>
+              {uploadState.details.map((detail) => (
+                <div
+                  key={detail}
+                  title={detail}
+                  style={{
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    color: "var(--text-dim)",
+                    fontSize: 10,
+                  }}
+                >
+                  {detail}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}