Add file upload button and coding CLI slash commands

- File explorer: upload button in toolbar, supports multiple files,
  uploads to current directory with progress spinner
- Code tab: slash commands grouped by CLI (claude, codex, opencode)
  for quick access to /clear, /compact, /model, /exit, etc.

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

Author: davindicode

app/components/files/FilesPage.tsx

@@ -108,6 +108,8 @@ 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);
 
   const fullPath = (name: string) => (cwd === "/" ? `/${name}` : `${cwd}/${name}`);
 
@@ -221,6 +223,26 @@ function FileSessionView({ session }: { session: FileSession }) {
 
   const handleInfo = (entry: FileEntry) => setDialog({ type: "info", entry });
 
+  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}` });
+    }
+    setUploading(false);
+    if (uploadInputRef.current) uploadInputRef.current.value = "";
+  };
+
   if (selectedFile) {
     if (fileLoading) {
       return (
@@ -285,6 +307,25 @@ function FileSessionView({ session }: { session: FileSession }) {
               <path strokeLinecap="round" strokeLinejoin="round" d="M12 11v6M9 14h6" />
             </svg>
           </button>
+          <button onClick={() => uploadInputRef.current?.click()} disabled={uploading} className="p-1.5 text-gray-400 hover:text-white disabled:text-gray-600 transition-colors" title="Upload files">
+            {uploading ? (
+              <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+            ) : (
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5 5 5M12 15V3" />
+              </svg>
+            )}
+          </button>
+          <input
+            ref={uploadInputRef}
+            type="file"
+            multiple
+            className="hidden"
+            onChange={(e) => handleUpload(e.target.files)}
+          />
         </div>
         <label className="flex items-center gap-2 text-sm text-gray-400 cursor-pointer">
           <input type="checkbox" checked={showHidden} onChange={(e) => toggleHidden(e.target.checked)} className="accent-blue-500" />

app/components/terminal/InputBox.tsx

@@ -143,6 +143,49 @@ const GIT_QUICK_CMDS: { label: string; title: string; command: string }[] = [
   { 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 }[];
+}
+
+const SLASH_CMD_GROUPS: SlashCmdGroup[] = [
+  {
+    cli: "claude",
+    cmds: [
+      { 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" },
+      { label: "/help", title: "Show available commands", command: "/help\n" },
+      { label: "/model", title: "Show or switch model", command: "/model\n" },
+      { label: "/exit", title: "Exit Claude Code", command: "/exit\n" },
+      { label: "/config", title: "Open config", command: "/config\n" },
+      { label: "/memory", title: "Edit CLAUDE.md memory", command: "/memory\n" },
+      { label: "/review", title: "Review a PR", command: "/review\n" },
+      { label: "/vim", title: "Toggle vim mode", command: "/vim\n" },
+    ],
+  },
+  {
+    cli: "codex",
+    cmds: [
+      { 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" },
+      { label: "/clear", title: "Clear conversation", command: "/clear\n" },
+      { label: "/approval", title: "Change approval mode", command: "/approval\n" },
+    ],
+  },
+  {
+    cli: "opencode",
+    cmds: [
+      { 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" },
+      { label: "/compact", title: "Compact context", command: "/compact\n" },
+    ],
+  },
+];
+
 const CODE_LAUNCH_CMDS: CodeLaunchCmd[] = [
   // Claude Code
   { cli: "claude", label: "claude", title: "Claude Code — interactive mode", command: "claude\n" },
@@ -762,7 +805,7 @@ export default function InputBox() {
 
       {/* Code tab: coding CLI launchers + common keys */}
       {activeGroup === CODE_TAB && (
-        <div className="border-b border-gray-700/50 bg-[#12122a] px-2 py-1.5">
+        <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 */}
           <div className="flex flex-wrap gap-1 mb-1.5">
             <span className="text-[10px] text-gray-600 w-full">cli keys</span>
@@ -772,6 +815,25 @@ export default function InputBox() {
               </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>
+              <div className="flex flex-wrap gap-1 mt-0.5">
+                {group.cmds.map((cmd) => (
+                  <button
+                    key={`${group.cli}-${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-cyan-400 hover:text-cyan-200 hover:bg-[#2a2a4a] disabled:text-gray-600 rounded border border-cyan-800/60 whitespace-nowrap transition-colors select-none"
+                  >
+                    {cmd.label}
+                  </button>
+                ))}
+              </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>