@seqyuan/annodex 0.1.12 → 0.1.13

package/components/FileExplorer.tsx

@@ -1,758 +0,0 @@
-"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>
-  );
-}