@invergent/agent-chat-react 1.4.3 → 1.4.5

package/dist/index.js

@@ -4,7 +4,7 @@ import { Collapsible as Collapsible$1, Slot, Dialog as Dialog$1, ScrollArea as S
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, ChevronRightIcon, GitBranchIcon, XIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, Loader2Icon, ListTodoIcon, Code, CheckIcon, CopyIcon, TerminalIcon, Trash2Icon, CircleDotIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircle2Icon, XCircleIcon, CheckCircleIcon, CircleIcon, MessageSquareIcon, ArrowDownIcon, DownloadIcon, Maximize2Icon, PlusIcon, ImageIcon, CornerDownLeftIcon, SquareIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, ChevronRightIcon, GitBranchIcon, XIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, Loader2Icon, ListTodoIcon, Code, CheckIcon, CopyIcon, TerminalIcon, Trash2Icon, CircleDotIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircle2Icon, XCircleIcon, CheckCircleIcon, CircleIcon, MessageSquareIcon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ArrowDownIcon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, Maximize2Icon, FolderIcon, FileIcon, PlusIcon, CornerDownLeftIcon, SquareIcon } from 'lucide-react';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 import { cjk } from '@streamdown/cjk';
 import { code } from '@streamdown/code';
@@ -1606,6 +1606,28 @@ function DialogHeader({ className, ...props }) {
     }
   );
 }
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Close" }) })
+      ]
+    }
+  );
+}
 function DialogTitle({
   className,
   ...props
@@ -5970,6 +5992,796 @@ function ChatThread({
     ] })
   ] });
 }
+var noop = () => {
+};
+var FileTreeContext = createContext({
+  expandedPaths: /* @__PURE__ */ new Set(),
+  togglePath: noop
+});
+function FileTree({
+  expanded: controlledExpanded,
+  defaultExpanded = /* @__PURE__ */ new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}) {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+  const togglePath = useCallback(
+    (path) => {
+      const next = new Set(expandedPaths);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      expandedPaths,
+      onSelect,
+      selectedPath: selectedPath ?? void 0,
+      togglePath
+    }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+  return /* @__PURE__ */ jsx(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("rounded-lg border bg-background text-sm", className),
+      role: "tree",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "p-2", children })
+    }
+  ) });
+}
+function FileTreeIcon({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("shrink-0", className), ...props, children });
+}
+function FileTreeName({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("truncate", className), ...props, children });
+}
+function FileTreeFolder({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}) {
+  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("", className), role: "treeitem", tabIndex: 0, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+          isSelected && "bg-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0",
+              type: "button",
+              "aria-label": isExpanded ? `Collapse ${name}` : `Expand ${name}`,
+              children: /* @__PURE__ */ jsx(
+                ChevronRightIcon,
+                {
+                  className: cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left",
+              onClick: handleSelect,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 text-blue-500" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "size-4 text-blue-500" }) }),
+                /* @__PURE__ */ jsx(FileTreeName, { children: name })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-4 border-l border-muted-foreground/50 pl-2", children }) })
+  ] }) });
+}
+function FileTreeFile({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}) {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+        isSelected && "bg-muted",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx(FileTreeName, { children: name })
+      ] })
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+
+// src/lib/format.ts
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getLanguageHint(path) {
+  const name = path.split("/").pop() ?? path;
+  const dot = name.lastIndexOf(".");
+  if (dot < 0) return "plaintext";
+  const ext = name.slice(dot).toLowerCase();
+  const map = {
+    ".py": "python",
+    ".js": "javascript",
+    ".ts": "typescript",
+    ".tsx": "tsx",
+    ".jsx": "jsx",
+    ".json": "json",
+    ".yaml": "yaml",
+    ".yml": "yaml",
+    ".toml": "toml",
+    ".sql": "sql",
+    ".sh": "bash",
+    ".css": "css",
+    ".html": "html",
+    ".md": "markdown",
+    ".rs": "rust",
+    ".go": "go",
+    ".java": "java",
+    ".rb": "ruby",
+    ".php": "php",
+    ".c": "c",
+    ".cpp": "cpp",
+    ".h": "c",
+    ".hpp": "cpp"
+  };
+  return map[ext] ?? "plaintext";
+}
+var SKELETON_WIDTHS = [70, 85, 55, 90, 60, 78, 45, 82, 65, 72];
+function FileViewer({
+  file,
+  loading,
+  error,
+  onClose
+}) {
+  const visible = loading || file !== null || error !== null;
+  if (!visible) return null;
+  const fileName2 = file?.path.split("/").pop() ?? "File";
+  const lang = file ? getLanguageHint(file.path) : "";
+  const isImage = file?.encoding === "base64";
+  const HeaderIcon = isImage ? ImageIcon : FileTextIcon;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col border-t border-line", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-line px-3 py-2", children: [
+      /* @__PURE__ */ jsx(HeaderIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-medium", children: fileName2 }),
+        /* @__PURE__ */ jsxs("div", { className: "truncate text-[10px] text-muted-foreground", children: [
+          file?.path ?? "Loading...",
+          file && /* @__PURE__ */ jsxs("span", { className: "ml-1.5", children: [
+            formatFileSize(file.size),
+            file.truncated && " (truncated)"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          "aria-label": "Close file",
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(ScrollArea, { className: "min-h-0 flex-1", children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 p-3", children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: "h-3.5 rounded",
+          style: {
+            width: `${SKELETON_WIDTHS[index % SKELETON_WIDTHS.length]}%`
+          }
+        },
+        index
+      )) }),
+      error && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
+        /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: error })
+      ] }),
+      file && isImage && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: `data:${file.mime_type ?? "image/png"};base64,${file.content}`,
+          alt: fileName2,
+          className: "max-h-[60vh] max-w-full rounded object-contain"
+        }
+      ) }),
+      file && !isImage && /* @__PURE__ */ jsx("pre", { className: "wrap-break-word whitespace-pre-wrap p-3 text-[11px] leading-relaxed text-foreground", children: /* @__PURE__ */ jsx("code", { "data-language": lang, children: file.content }) })
+    ] })
+  ] });
+}
+var TEXT_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".py",
+  ".js",
+  ".ts",
+  ".tsx",
+  ".jsx",
+  ".json",
+  ".md",
+  ".yaml",
+  ".yml",
+  ".toml",
+  ".sql",
+  ".sh",
+  ".css",
+  ".html",
+  ".txt",
+  ".csv",
+  ".rst",
+  ".cfg",
+  ".ini",
+  ".env",
+  ".rs",
+  ".go",
+  ".java",
+  ".rb",
+  ".php",
+  ".c",
+  ".cpp",
+  ".h",
+  ".lock",
+  ".gitignore",
+  ".dockerignore",
+  ".editorconfig"
+]);
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".webp",
+  ".svg",
+  ".bmp",
+  ".ico",
+  ".avif",
+  ".tiff",
+  ".tif"
+]);
+var SKELETON_WIDTHS2 = [75, 60, 90, 65, 80, 70, 85, 55];
+var DEFAULT_WIDTH = 500;
+var MIN_WIDTH = 300;
+var MAX_WIDTH = 900;
+function isViewable(name) {
+  const dot = name.lastIndexOf(".");
+  const ext = dot >= 0 ? name.slice(dot).toLowerCase() : "";
+  return TEXT_EXTENSIONS.has(ext) || IMAGE_EXTENSIONS.has(ext);
+}
+function collectExpandedPaths(entries, depth = 0) {
+  const paths = [];
+  for (const entry of entries) {
+    if (entry.kind === "dir" && depth < 1) {
+      paths.push(entry.path);
+      if (entry.children) {
+        paths.push(...collectExpandedPaths(entry.children, depth + 1));
+      }
+    }
+  }
+  return paths;
+}
+function findEntry(entries, path) {
+  for (const entry of entries) {
+    if (entry.path === path) return entry;
+    if (entry.kind === "dir" && entry.children) {
+      const found = findEntry(entry.children, path);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function RenderEntries({
+  entries,
+  onFileSelect,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: entries.map((entry) => {
+    if (entry.kind === "dir") {
+      return /* @__PURE__ */ jsx(FileTreeFolder, { name: entry.name, path: entry.path, children: entry.children && entry.children.length > 0 && /* @__PURE__ */ jsx(
+        RenderEntries,
+        {
+          entries: entry.children,
+          onFileSelect,
+          onDelete
+        }
+      ) }, entry.path);
+    }
+    const viewable = isViewable(entry.name);
+    return /* @__PURE__ */ jsxs(FileTreeFile, { name: entry.name, path: entry.path, children: [
+      /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.name }),
+      entry.size != null && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0 text-xs text-muted-foreground/60", children: formatFileSize(entry.size) }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-1 flex shrink-0 items-center gap-0 opacity-0 transition-opacity group-hover:opacity-100", children: [
+        viewable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+            onClick: (event) => {
+              event.stopPropagation();
+              onFileSelect(entry.path);
+            },
+            title: "View",
+            children: /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rounded p-0.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+            onClick: (event) => {
+              event.stopPropagation();
+              onDelete(entry.path);
+            },
+            title: "Delete",
+            children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-3" })
+          }
+        )
+      ] })
+    ] }, entry.path);
+  }) });
+}
+function WorkspacePanel({
+  adapter,
+  sessionId,
+  selectedPath,
+  onSelectedPathChange
+}) {
+  const fileInputRef = useRef(null);
+  const [entries, setEntries] = useState([]);
+  const [rootName, setRootName] = useState("workspace");
+  const [treeLoading, setTreeLoading] = useState(false);
+  const [treeError, setTreeError] = useState(null);
+  const [file, setFile] = useState(null);
+  const [fileLoading, setFileLoading] = useState(false);
+  const [fileError, setFileError] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [expandedPaths, setExpandedPaths] = useState(/* @__PURE__ */ new Set());
+  const [width, setWidth] = useState(DEFAULT_WIDTH);
+  const sessionIdRef = useRef(sessionId);
+  const isResizing = useRef(false);
+  const startX = useRef(0);
+  const startWidth = useRef(DEFAULT_WIDTH);
+  sessionIdRef.current = sessionId;
+  const fetchTree = useCallback(async () => {
+    if (!sessionId) {
+      setEntries([]);
+      setRootName("workspace");
+      setExpandedPaths(/* @__PURE__ */ new Set());
+      setTreeLoading(false);
+      setTreeError(null);
+      return;
+    }
+    const requestedSessionId = sessionId;
+    setTreeLoading(true);
+    setTreeError(null);
+    try {
+      const tree = await adapter.getWorkspaceTree({
+        sessionId: requestedSessionId
+      });
+      if (sessionIdRef.current !== requestedSessionId) return;
+      setEntries(tree.entries);
+      setRootName(tree.root || "workspace");
+      setExpandedPaths(new Set(collectExpandedPaths(tree.entries)));
+    } catch (error) {
+      if (sessionIdRef.current !== requestedSessionId) return;
+      setEntries([]);
+      setRootName("workspace");
+      setTreeError(error.message);
+    } finally {
+      if (sessionIdRef.current === requestedSessionId) {
+        setTreeLoading(false);
+      }
+    }
+  }, [adapter, sessionId]);
+  const fetchFile = useCallback(
+    async (path) => {
+      if (!sessionId) return;
+      const requestedSessionId = sessionId;
+      setFileLoading(true);
+      setFileError(null);
+      try {
+        const nextFile = await adapter.getWorkspaceFile({
+          sessionId: requestedSessionId,
+          path
+        });
+        if (sessionIdRef.current !== requestedSessionId) return;
+        setFile(nextFile);
+      } catch (error) {
+        if (sessionIdRef.current !== requestedSessionId) return;
+        setFile(null);
+        setFileError(error.message);
+      } finally {
+        if (sessionIdRef.current === requestedSessionId) {
+          setFileLoading(false);
+        }
+      }
+    },
+    [adapter, sessionId]
+  );
+  useEffect(() => {
+    void fetchTree();
+  }, [fetchTree]);
+  useEffect(() => {
+    if (!sessionId) {
+      setFile(null);
+      setFileError(null);
+      onSelectedPathChange(null);
+    }
+  }, [onSelectedPathChange, sessionId]);
+  useEffect(() => {
+    if (!selectedPath) return;
+    const parts = selectedPath.split("/");
+    if (parts.length <= 1) return;
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      let path = "";
+      for (let index = 0; index < parts.length - 1; index += 1) {
+        path = path ? `${path}/${parts[index]}` : parts[index];
+        next.add(path);
+      }
+      return next;
+    });
+  }, [selectedPath]);
+  useEffect(() => {
+    if (!selectedPath || !sessionId || entries.length === 0) return;
+    const entry = findEntry(entries, selectedPath);
+    if (entry?.kind === "file" && file?.path !== selectedPath) {
+      void fetchFile(selectedPath);
+    }
+  }, [entries, fetchFile, file?.path, selectedPath, sessionId]);
+  const handleSelect = useCallback(
+    (path) => {
+      onSelectedPathChange(path);
+      const entry = findEntry(entries, path);
+      if (entry?.kind === "file") {
+        void fetchFile(path);
+      }
+    },
+    [entries, fetchFile, onSelectedPathChange]
+  );
+  const handleUpload = useCallback(
+    async (files) => {
+      if (!sessionId || files.length === 0) return;
+      setUploading(true);
+      setNotice(null);
+      try {
+        for (const uploadedFile of Array.from(files)) {
+          await adapter.uploadWorkspaceFile({
+            sessionId,
+            file: uploadedFile
+          });
+        }
+        setNotice(
+          files.length === 1 ? `Uploaded ${files[0]?.name ?? "file"}` : `Uploaded ${files.length} files`
+        );
+        await fetchTree();
+      } catch (error) {
+        setNotice(error.message);
+      } finally {
+        setUploading(false);
+        if (fileInputRef.current) fileInputRef.current.value = "";
+      }
+    },
+    [adapter, fetchTree, sessionId]
+  );
+  const handleDelete = useCallback(
+    async (path) => {
+      if (!sessionId) return;
+      try {
+        await adapter.deleteWorkspaceFile({ sessionId, path });
+        if (selectedPath === path) {
+          onSelectedPathChange(null);
+          setFile(null);
+          setFileError(null);
+        }
+        setNotice(`Deleted ${path.split("/").pop() ?? path}`);
+        await fetchTree();
+      } catch (error) {
+        setNotice(error.message);
+      } finally {
+        setDeleteTarget(null);
+      }
+    },
+    [adapter, fetchTree, onSelectedPathChange, selectedPath, sessionId]
+  );
+  const onResizeStart = useCallback(
+    (event) => {
+      event.preventDefault();
+      isResizing.current = true;
+      startX.current = event.clientX;
+      startWidth.current = width;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [width]
+  );
+  useEffect(() => {
+    const onMouseMove = (event) => {
+      if (!isResizing.current) return;
+      const delta = startX.current - event.clientX;
+      setWidth(
+        Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth.current + delta))
+      );
+    };
+    const onMouseUp = () => {
+      if (!isResizing.current) return;
+      isResizing.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: "relative z-10 flex min-h-0 flex-col overflow-hidden border-l border-muted-foreground/20 bg-card",
+      style: { width, minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-y-0 left-0 z-20 w-1.5 cursor-col-resize transition-colors hover:bg-primary/20 active:bg-primary/30",
+            onMouseDown: onResizeStart
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            className: "hidden",
+            onChange: (event) => {
+              if (event.target.files) void handleUpload(event.target.files);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 items-center gap-2 border-b border-line px-3 py-3", children: [
+          /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 shrink-0 text-amber-500" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: rootName }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-faint", children: "Workspace" })
+          ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                onClick: () => fileInputRef.current?.click(),
+                disabled: !sessionId || uploading,
+                "aria-label": "Upload files",
+                children: uploading ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(UploadIcon, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Upload files" })
+          ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                onClick: () => void fetchTree(),
+                disabled: !sessionId || treeLoading,
+                "aria-label": "Refresh workspace",
+                children: /* @__PURE__ */ jsx(
+                  RefreshCwIcon,
+                  {
+                    className: cn("size-4", treeLoading && "animate-spin")
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Refresh" })
+          ] })
+        ] }),
+        notice && /* @__PURE__ */ jsx("div", { className: "border-b border-line px-3 py-2 text-xs text-muted-foreground", children: notice }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "px-1 py-1", children: [
+          treeLoading && entries.length === 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1 p-2", children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              className: "h-5 rounded",
+              style: {
+                width: `${SKELETON_WIDTHS2[index % SKELETON_WIDTHS2.length]}%`
+              }
+            },
+            index
+          )) }),
+          treeError && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 text-sm text-destructive", children: [
+            /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: treeError })
+          ] }),
+          !treeLoading && !treeError && entries.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-8 text-center text-sm text-faint", children: [
+            /* @__PURE__ */ jsx("p", { children: "No workspace files" }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "mt-3 gap-1.5",
+                onClick: () => fileInputRef.current?.click(),
+                disabled: !sessionId,
+                children: [
+                  /* @__PURE__ */ jsx(UploadIcon, { className: "size-3.5" }),
+                  "Upload files"
+                ]
+              }
+            )
+          ] }),
+          entries.length > 0 && /* @__PURE__ */ jsx(
+            FileTree,
+            {
+              expanded: expandedPaths,
+              onExpandedChange: setExpandedPaths,
+              selectedPath,
+              onSelect: handleSelect,
+              className: "rounded-none border-0",
+              children: /* @__PURE__ */ jsx(
+                RenderEntries,
+                {
+                  entries,
+                  onFileSelect: handleSelect,
+                  onDelete: setDeleteTarget
+                }
+              )
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          FileViewer,
+          {
+            file,
+            loading: fileLoading,
+            error: fileError,
+            onClose: () => {
+              setFile(null);
+              setFileError(null);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            open: deleteTarget !== null,
+            title: "Delete file?",
+            description: `This will permanently delete ${deleteTarget?.split("/").pop() ?? "this file"} from the workspace.`,
+            confirmLabel: "Delete",
+            onConfirm: () => deleteTarget ? handleDelete(deleteTarget) : Promise.resolve(),
+            onCancel: () => setDeleteTarget(null)
+          }
+        )
+      ]
+    }
+  );
+}
+function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel,
+  onConfirm,
+  onCancel
+}) {
+  const [loading, setLoading] = useState(false);
+  const handleConfirm = async () => {
+    setLoading(true);
+    try {
+      await onConfirm();
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen && !loading) onCancel();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: loading, onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsxs(Button, { variant: "destructive", disabled: loading, onClick: handleConfirm, children: [
+            loading && /* @__PURE__ */ jsx(Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
+            confirmLabel
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
 
 // src/runtime/events.ts
 var AGENT_CHAT_LISTENED_EVENTS = [
@@ -6780,6 +7592,7 @@ function AgentChat({
   onMessagesChange,
   disabled
 }) {
+  const [workspacePath, setWorkspacePath] = useState(null);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -6789,29 +7602,47 @@ function AgentChat({
   useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
+  const handleFileSelect = useCallback(
+    (path) => {
+      setWorkspacePath(path);
+      onFileSelect?.(path);
+    },
+    [onFileSelect]
+  );
   return /* @__PURE__ */ jsx(
     AgentChatAdapterProvider,
     {
       value: {
         adapter,
         sessionId,
-        onFileSelect
+        onFileSelect: handleFileSelect
       },
-      children: /* @__PURE__ */ jsx("section", { className: "flex h-full min-h-0 flex-col bg-card text-sm text-foreground", children: /* @__PURE__ */ jsx(
-        ChatThread,
-        {
-          sessionId,
-          messages: runtime.messages,
-          isRunning: runtime.isRunning,
-          onSend: (content) => void runtime.send(content),
-          onStop: () => void runtime.stop(),
-          onRetry: runtime.retry,
-          onFileSelect,
-          disabled,
-          tokenUsage: runtime.tokenUsage,
-          retryIndicator: runtime.retryIndicator
-        }
-      ) })
+      children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("section", { className: "flex h-full min-h-0 bg-card text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(
+          ChatThread,
+          {
+            sessionId,
+            messages: runtime.messages,
+            isRunning: runtime.isRunning,
+            onSend: (content) => void runtime.send(content),
+            onStop: () => void runtime.stop(),
+            onRetry: runtime.retry,
+            onFileSelect: handleFileSelect,
+            disabled,
+            tokenUsage: runtime.tokenUsage,
+            retryIndicator: runtime.retryIndicator
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          WorkspacePanel,
+          {
+            adapter,
+            sessionId,
+            selectedPath: workspacePath,
+            onSelectedPathChange: setWorkspacePath
+          }
+        )
+      ] }) })
     }
   );
 }