Streaming uploads, upload progress UI, vendor-grouped code tab

- Streaming file upload via busboy — pipes to disk without buffering,
  supports large files (GB+) with constant memory usage
- Upload progress overlay locks explorer tab, shows per-file progress
  bars with status (waiting/uploading %/done/error)
- Code tab reorganized by vendor (claude/codex/opencode) — each section
  has launch buttons, vendor-specific keys, and slash commands together
- Common CLI keys updated from docs: Ctrl+L, Ctrl+G, Esc Esc, plus
  vendor-specific keys (Shift+Tab, Alt+T, Alt+P for Claude, etc.)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

app/components/files/FilesPage.tsx

@@ -108,9 +108,19 @@ function FileSessionView({ session }: { session: FileSession }) {
   const { cwd, entries, showHidden, selectedFile, fileContent, loading } = session;
   const [fileLoading, setFileLoading] = useState(false);
   const [fileError, setFileError] = useState<string | null>(null);
-  const [uploading, setUploading] = useState(false);
   const uploadInputRef = useRef<HTMLInputElement>(null);
 
+  // Upload state: queue of files with per-file progress
+  interface UploadFile {
+    name: string;
+    size: number;
+    status: "pending" | "uploading" | "done" | "error";
+    progress: number; // 0-100
+    error?: string;
+  }
+  const [uploadQueue, setUploadQueue] = useState<UploadFile[]>([]);
+  const uploading = uploadQueue.length > 0;
+
   const fullPath = (name: string) => (cwd === "/" ? `/${name}` : `${cwd}/${name}`);
 
   const handleOpen = async (entry: FileEntry) => {
@@ -223,23 +233,60 @@ function FileSessionView({ session }: { session: FileSession }) {
 
   const handleInfo = (entry: FileEntry) => setDialog({ type: "info", entry });
 
+  const uploadFile = (file: File, index: number): Promise<void> => {
+    return new Promise((resolve) => {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("dir", cwd);
+
+      const xhr = new XMLHttpRequest();
+      xhr.upload.onprogress = (e) => {
+        if (e.lengthComputable) {
+          const pct = Math.round((e.loaded / e.total) * 100);
+          setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, progress: pct } : f));
+        }
+      };
+      xhr.onload = () => {
+        try {
+          const data = JSON.parse(xhr.responseText);
+          if (data.error) {
+            setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: data.error } : f));
+          } else {
+            setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "done", progress: 100 } : f));
+          }
+        } catch {
+          setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "done", progress: 100 } : f));
+        }
+        resolve();
+      };
+      xhr.onerror = () => {
+        setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: "Network error" } : f));
+        resolve();
+      };
+
+      setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "uploading" } : f));
+      xhr.open("POST", "/api/files/upload");
+      xhr.send(formData);
+    });
+  };
+
   const handleUpload = async (files: FileList | null) => {
     if (!files || files.length === 0) return;
-    setUploading(true);
-    try {
-      for (const file of Array.from(files)) {
-        const formData = new FormData();
-        formData.append("file", file);
-        formData.append("dir", cwd);
-        const res = await fetch("/api/files/upload", { method: "POST", body: formData });
-        const data = await res.json();
-        if (data.error) patch({ error: `Upload failed: ${data.error}` });
-      }
-      await loadDirectory(cwd);
-    } catch (err: any) {
-      patch({ error: `Upload failed: ${err.message}` });
+    const queue: UploadFile[] = Array.from(files).map((f) => ({
+      name: f.name,
+      size: f.size,
+      status: "pending" as const,
+      progress: 0,
+    }));
+    setUploadQueue(queue);
+
+    const fileArray = Array.from(files);
+    for (let i = 0; i < fileArray.length; i++) {
+      await uploadFile(fileArray[i], i);
     }
-    setUploading(false);
+    await loadDirectory(cwd);
+    // Keep queue visible briefly so user sees completion
+    setTimeout(() => setUploadQueue([]), 1500);
     if (uploadInputRef.current) uploadInputRef.current.value = "";
   };
 
@@ -333,7 +380,36 @@ function FileSessionView({ session }: { session: FileSession }) {
         </label>
       </div>
 
-      {loading ? (
+      {uploading ? (
+        /* Upload progress overlay — locks the explorer */
+        <div className="flex-1 flex flex-col bg-[#0d0d1a] overflow-y-auto">
+          <div className="px-3 py-2 border-b border-gray-700/50">
+            <span className="text-sm text-gray-400">
+              Uploading to <span className="text-gray-300">{cwd}</span>
+            </span>
+          </div>
+          <div className="flex-1 px-3 py-2 space-y-2">
+            {uploadQueue.map((file, i) => (
+              <div key={i} className="flex flex-col gap-1">
+                <div className="flex items-center justify-between text-[11px]">
+                  <span className={`truncate flex-1 mr-2 ${file.status === "error" ? "text-red-400" : file.status === "done" ? "text-green-400" : "text-gray-300"}`}>
+                    {file.name}
+                  </span>
+                  <span className="text-gray-500 shrink-0">
+                    {file.status === "error" ? file.error : file.status === "done" ? "done" : file.status === "uploading" ? `${file.progress}%` : "waiting"}
+                  </span>
+                </div>
+                <div className="w-full h-1 bg-gray-800 rounded overflow-hidden">
+                  <div
+                    className={`h-full transition-all duration-200 rounded ${file.status === "error" ? "bg-red-500" : file.status === "done" ? "bg-green-500" : "bg-blue-500"}`}
+                    style={{ width: `${file.progress}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : loading ? (
         <div className="flex flex-col items-center justify-center flex-1 text-gray-500 gap-2">
           <svg className="w-6 h-6 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />

app/components/terminal/InputBox.tsx

@@ -112,47 +112,41 @@ const TMUX_KEYS: QuickKey[] = [
   { label: ": cmd", key: "\x02:", title: "Command prompt" },
 ];
 
-// Common key combos for coding CLIs (Claude Code, Codex, OpenCode)
-const CODE_CLI_KEYS: QuickKey[] = [
-  { label: "Shift+Tab", key: "\x1b[Z", title: "Change permission mode (Claude Code)" },
-  { label: "Ctrl+C", key: "\x03", title: "Cancel / interrupt" },
-  { label: "Ctrl+O", key: "\x0f", title: "Show logs (Claude Code)" },
-  { label: "Esc", key: "\x1b", title: "Escape / go back" },
+// Common key combos shared across all coding CLIs
+const CODE_COMMON_KEYS: QuickKey[] = [
+  { label: "Ctrl+C", key: "\x03", title: "Cancel / interrupt / quit" },
+  { label: "Ctrl+L", key: "\x0c", title: "Clear screen (Claude/Codex) / View logs (OpenCode)" },
+  { label: "Ctrl+G", key: "\x07", title: "Open external editor (Claude/Codex)" },
+  { label: "Esc", key: "\x1b", title: "Cancel generation / dismiss / go back" },
+  { label: "Esc Esc", key: "\x1b\x1b", title: "Rewind history (Claude) / Edit prev message (Codex)" },
   { label: "y", key: "y", title: "Yes (approve)" },
   { label: "n", key: "n", title: "No (deny)" },
 ];
 
-interface CodeLaunchCmd {
-  label: string;
-  title: string;
-  command: string;
-  cli: string; // which CLI this belongs to, for grouping
-}
-
-// Git quick action commands
-const GIT_QUICK_CMDS: { label: string; title: string; command: string }[] = [
-  { label: "status", title: "git status", command: "git status\n" },
-  { label: "log", title: "git log --oneline -10", command: "git log --oneline -10\n" },
-  { label: "diff", title: "git diff", command: "git diff\n" },
-  { label: "add .", title: "git add . (stage all)", command: "git add .\n" },
-  { label: "fetch", title: "git fetch", command: "git fetch\n" },
-  { label: "pull", title: "git pull", command: "git pull\n" },
-  { label: "push", title: "git push", command: "git push\n" },
-  { label: "stash", title: "git stash", command: "git stash\n" },
-  { label: "stash pop", title: "git stash pop", command: "git stash pop\n" },
-  { label: "branch", title: "git branch (list branches)", command: "git branch\n" },
-];
-
-// Slash commands grouped by CLI
-interface SlashCmdGroup {
-  cli: string;
-  cmds: { label: string; title: string; command: string }[];
+// Per-vendor CLI groups: launch commands, keys, and slash commands
+interface CliVendor {
+  name: string;
+  keys: QuickKey[];
+  launch: { label: string; title: string; command: string }[];
+  slashCmds: { label: string; title: string; command: string }[];
 }
 
-const SLASH_CMD_GROUPS: SlashCmdGroup[] = [
+const CLI_VENDORS: CliVendor[] = [
   {
-    cli: "claude",
-    cmds: [
+    name: "claude",
+    keys: [
+      { label: "Shift+Tab", key: "\x1b[Z", title: "Cycle permission modes" },
+      { label: "Ctrl+O", key: "\x0f", title: "Toggle full transcript view" },
+      { label: "Ctrl+R", key: "\x12", title: "Reverse history search" },
+      { label: "Alt+T", key: "\x1bt", title: "Toggle extended thinking" },
+      { label: "Alt+P", key: "\x1bp", title: "Model picker" },
+    ],
+    launch: [
+      { label: "claude", title: "Interactive mode", command: "claude\n" },
+      { label: "yolo", title: "Skip all permission checks", command: "claude --dangerously-skip-permissions\n" },
+      { label: "plan", title: "Read-only plan mode", command: "claude --allowedTools Read,Glob,Grep,WebSearch,WebFetch\n" },
+    ],
+    slashCmds: [
       { label: "/clear", title: "Clear conversation context", command: "/clear\n" },
       { label: "/compact", title: "Compact conversation to save context", command: "/compact\n" },
       { label: "/cost", title: "Show token usage and cost", command: "/cost\n" },
@@ -166,8 +160,16 @@ const SLASH_CMD_GROUPS: SlashCmdGroup[] = [
     ],
   },
   {
-    cli: "codex",
-    cmds: [
+    name: "codex",
+    keys: [
+      { label: "Ctrl+O", key: "\x0f", title: "Choose environment (cloud)" },
+    ],
+    launch: [
+      { label: "suggest", title: "Proposes changes for approval", command: "codex --approval-mode suggest\n" },
+      { label: "auto-edit", title: "Applies file changes, asks for commands", command: "codex --approval-mode auto-edit\n" },
+      { label: "full-auto", title: "Runs without confirmation", command: "codex --approval-mode full-auto\n" },
+    ],
+    slashCmds: [
       { label: "/help", title: "Show available commands", command: "/help\n" },
       { label: "/model", title: "Show or switch model", command: "/model\n" },
       { label: "/exit", title: "Exit Codex", command: "/exit\n" },
@@ -176,8 +178,19 @@ const SLASH_CMD_GROUPS: SlashCmdGroup[] = [
     ],
   },
   {
-    cli: "opencode",
-    cmds: [
+    name: "opencode",
+    keys: [
+      { label: "Ctrl+O", key: "\x0f", title: "Model selection dialog" },
+      { label: "Ctrl+K", key: "\x0b", title: "Command dialog" },
+      { label: "Ctrl+N", key: "\x0e", title: "New session" },
+      { label: "Ctrl+X", key: "\x18", title: "Cancel generation" },
+      { label: "Ctrl+S", key: "\x13", title: "Send message" },
+      { label: "Ctrl+A", key: "\x01", title: "Switch session" },
+    ],
+    launch: [
+      { label: "opencode", title: "Interactive mode", command: "opencode\n" },
+    ],
+    slashCmds: [
       { label: "/help", title: "Show available commands", command: "/help\n" },
       { label: "/exit", title: "Exit OpenCode", command: "/exit\n" },
       { label: "/clear", title: "Clear conversation", command: "/clear\n" },
@@ -186,17 +199,18 @@ const SLASH_CMD_GROUPS: SlashCmdGroup[] = [
   },
 ];
 
-const CODE_LAUNCH_CMDS: CodeLaunchCmd[] = [
-  // Claude Code
-  { cli: "claude", label: "claude", title: "Claude Code — interactive mode", command: "claude\n" },
-  { cli: "claude", label: "claude yolo", title: "Claude Code — skip all permission checks", command: "claude --dangerously-skip-permissions\n" },
-  { cli: "claude", label: "claude plan", title: "Claude Code — read-only plan mode", command: "claude --allowedTools Read,Glob,Grep,WebSearch,WebFetch\n" },
-  // Codex CLI
-  { cli: "codex", label: "codex suggest", title: "Codex — suggest mode (proposes changes)", command: "codex --approval-mode suggest\n" },
-  { cli: "codex", label: "codex auto", title: "Codex — auto-edit mode", command: "codex --approval-mode auto-edit\n" },
-  { cli: "codex", label: "codex full", title: "Codex — full auto mode", command: "codex --approval-mode full-auto\n" },
-  // OpenCode
-  { cli: "opencode", label: "opencode", title: "OpenCode — interactive mode", command: "opencode\n" },
+// Git quick action commands
+const GIT_QUICK_CMDS: { label: string; title: string; command: string }[] = [
+  { label: "status", title: "git status", command: "git status\n" },
+  { label: "log", title: "git log --oneline -10", command: "git log --oneline -10\n" },
+  { label: "diff", title: "git diff", command: "git diff\n" },
+  { label: "add .", title: "git add . (stage all)", command: "git add .\n" },
+  { label: "fetch", title: "git fetch", command: "git fetch\n" },
+  { label: "pull", title: "git pull", command: "git pull\n" },
+  { label: "push", title: "git push", command: "git push\n" },
+  { label: "stash", title: "git stash", command: "git stash\n" },
+  { label: "stash pop", title: "git stash pop", command: "git stash pop\n" },
+  { label: "branch", title: "git branch (list branches)", command: "git branch\n" },
 ];
 
 // Tab IDs
@@ -803,26 +817,45 @@ export default function InputBox() {
         </div>
       )}
 
-      {/* Code tab: coding CLI launchers + common keys */}
+      {/* Code tab: common keys + per-vendor panels */}
       {activeGroup === CODE_TAB && (
         <div className="border-b border-gray-700/50 bg-[#12122a] px-2 py-1.5 max-h-64 overflow-y-auto">
-          {/* Coding CLI key combos */}
+          {/* Common keys across all CLIs */}
           <div className="flex flex-wrap gap-1 mb-1.5">
-            <span className="text-[10px] text-gray-600 w-full">cli keys</span>
-            {CODE_CLI_KEYS.map((qk) => (
+            <span className="text-[10px] text-gray-600 w-full">common keys</span>
+            {CODE_COMMON_KEYS.map((qk) => (
               <button key={qk.label} {...repeatProps(qk.key)} disabled={!activeSessionId} title={qk.title} className={keyBtn}>
                 {qk.label}
               </button>
             ))}
           </div>
-          {/* Slash commands grouped by CLI */}
-          {SLASH_CMD_GROUPS.map((group) => (
-            <div key={group.cli} className="border-t border-gray-700/50 pt-1.5 mb-1.5">
-              <span className="text-[10px] text-gray-600">{group.cli} /commands</span>
+          {/* Per-vendor sections: launch + keys + slash commands */}
+          {CLI_VENDORS.map((vendor) => (
+            <div key={vendor.name} className="border-t border-gray-700/50 pt-1.5 mb-1.5">
+              <span className="text-[10px] text-gray-500 font-medium">{vendor.name}</span>
               <div className="flex flex-wrap gap-1 mt-0.5">
-                {group.cmds.map((cmd) => (
+                {/* Launch buttons (purple) */}
+                {vendor.launch.map((cmd) => (
                   <button
-                    key={`${group.cli}-${cmd.label}`}
+                    key={`${vendor.name}-${cmd.label}`}
+                    onClick={() => { if (activeSessionId) sendInput(activeSessionId, cmd.command); }}
+                    disabled={!activeSessionId}
+                    title={cmd.title}
+                    className="px-2 py-0.5 text-[11px] bg-[#1a1a2e] text-purple-400 hover:text-purple-200 hover:bg-[#2a2a4a] disabled:text-gray-600 rounded border border-purple-800/60 whitespace-nowrap transition-colors select-none"
+                  >
+                    {cmd.label}
+                  </button>
+                ))}
+                {/* Vendor-specific keys (gray, like common keys) */}
+                {vendor.keys.map((qk) => (
+                  <button key={`${vendor.name}-${qk.label}`} {...repeatProps(qk.key)} disabled={!activeSessionId} title={qk.title} className={keyBtn}>
+                    {qk.label}
+                  </button>
+                ))}
+                {/* Slash commands (cyan) */}
+                {vendor.slashCmds.map((cmd) => (
+                  <button
+                    key={`${vendor.name}-${cmd.label}`}
                     onClick={() => { if (activeSessionId) sendInput(activeSessionId, cmd.command); }}
                     disabled={!activeSessionId}
                     title={cmd.title}
@@ -834,23 +867,6 @@ export default function InputBox() {
               </div>
             </div>
           ))}
-          {/* CLI launch shortcuts */}
-          <div className="border-t border-gray-700/50 pt-1.5">
-            <span className="text-[10px] text-gray-600">launch</span>
-            <div className="flex flex-wrap gap-1 mt-0.5">
-              {CODE_LAUNCH_CMDS.map((cmd) => (
-                <button
-                  key={cmd.label}
-                  onClick={() => { if (activeSessionId) sendInput(activeSessionId, cmd.command); }}
-                  disabled={!activeSessionId}
-                  title={cmd.title}
-                  className="px-2 py-0.5 text-[11px] bg-[#1a1a2e] text-purple-400 hover:text-purple-200 hover:bg-[#2a2a4a] disabled:text-gray-600 rounded border border-purple-800/60 whitespace-nowrap transition-colors select-none"
-                >
-                  {cmd.label}
-                </button>
-              ))}
-            </div>
-          </div>
         </div>
       )}
 

package.json

@@ -17,6 +17,7 @@
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
+    "busboy": "^1.6.0",
     "dotenv": "^17.3.1",
     "express": "^5.2.1",
     "http-proxy-middleware": "^3.0.5",
@@ -35,6 +36,7 @@
   "devDependencies": {
     "@react-router/dev": "7.12.0",
     "@tailwindcss/vite": "^4.1.13",
+    "@types/busboy": "^1.5.4",
     "@types/express": "^5.0.6",
     "@types/mime-types": "^3.0.1",
     "@types/node": "^22",