Context-aware terminal actions, cd picker, file loading UX, typecheck fix

- Terminal InputBox: context-aware tabs swap based on mode (editor/tmux/terminal)
  - nano/vim: show editor commands when inside, file opener when outside
  - tmux: show commands when inside, session picker when outside
  - Editor mode hides irrelevant tabs (cmds, tmux, other editor)
  - Nav keys reduced in editor mode (no y/n/q that interfere)
- Sticky modifier tab: Ctrl+, Ctrl+Shift+, Alt+, Alt+Shift+ toggle
- cd directory picker in cmds: browsable folder buttons, .. and ~ shortcuts
- Tab buttons teal-tinted to distinguish from popup action buttons
- Track inTmux/inEditor per terminal session in store
- File explorer: spinner during directory and file loading
- File open errors: meaningful message with size info and Back button
- File path: mr-2 margin, shrink-0 on all button containers, title attr
- Terminal scrollbar: always visible with styled thumb
- Fix typecheck: cast req to any for originalUrl in proxy pathRewrite

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

Author: davindicode

app/app.css

@@ -28,7 +28,24 @@ body {
 }
 
 .xterm-viewport {
-  overflow-y: auto !important;
+  overflow-y: scroll !important;
+}
+
+.xterm-viewport::-webkit-scrollbar {
+  width: 8px;
+}
+
+.xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
 }
 
 /* Safe area for iOS bottom bar */

app/components/files/CodeEditor.tsx

@@ -223,7 +223,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
     <div className="flex flex-col h-full">
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-3 py-1.5 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none" title={path}>{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
         <div className="flex items-center gap-1.5 shrink-0">
           {canPreview && (
             <div className="flex items-center bg-[#0d0d1a] rounded overflow-hidden border border-gray-700">

app/components/files/FileViewer.tsx

@@ -27,7 +27,7 @@ function MediaViewer({ path, type, onClose }: { path: string; type: "video" | "a
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none">{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
         <div className="flex items-center gap-2 shrink-0">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
@@ -75,8 +75,8 @@ function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none">{path}</span>
-        <div className="flex items-center gap-2">
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
+        <div className="flex items-center gap-2 shrink-0">
           {numPages > 0 && (
             <span className="text-[10px] text-gray-500">{numPages} pg</span>
           )}
@@ -158,8 +158,8 @@ export default function FileViewer({ path, content, onSave, onClose }: FileViewe
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none">{path}</span>
-        <div className="flex items-center gap-2">
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
+        <div className="flex items-center gap-2 shrink-0">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
             className="p-1 bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white rounded transition-colors"

app/components/files/FilesPage.tsx

@@ -106,23 +106,36 @@ 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 fullPath = (name: string) => (cwd === "/" ? `/${name}` : `${cwd}/${name}`);
 
   const handleOpen = async (entry: FileEntry) => {
     if (entry.isDirectory) {
       await loadDirectory(fullPath(entry.name));
       patch({ selectedFile: null, fileContent: null });
+      setFileError(null);
     } else {
       const filePath = fullPath(entry.name);
-      patch({ selectedFile: filePath });
+      patch({ selectedFile: filePath, fileContent: null });
+      setFileLoading(true);
+      setFileError(null);
       try {
         const res = await fetch(`/api/files/read?path=${encodeURIComponent(filePath)}`);
         const data = await res.json();
-        patch({ fileContent: data.content !== undefined ? data.content : null });
-      } catch {
+        if (data.error) {
+          const sizeInfo = data.size ? ` (${formatSize(data.size)})` : "";
+          setFileError(`${data.error}${sizeInfo}`);
+          patch({ fileContent: null });
+        } else {
+          patch({ fileContent: data.content !== undefined ? data.content : null });
+        }
+      } catch (err: any) {
+        setFileError(err.message || "Failed to load file");
         patch({ fileContent: null });
       }
+      setFileLoading(false);
     }
   };
 
@@ -150,7 +163,7 @@ function FileSessionView({ session }: { session: FileSession }) {
     }
   };
 
-  const handleCloseFile = () => patch({ selectedFile: null, fileContent: null });
+  const handleCloseFile = () => { patch({ selectedFile: null, fileContent: null }); setFileError(null); };
 
   const toggleHidden = (val: boolean) => {
     patch({ showHidden: val });
@@ -209,6 +222,35 @@ function FileSessionView({ session }: { session: FileSession }) {
   const handleInfo = (entry: FileEntry) => setDialog({ type: "info", entry });
 
   if (selectedFile) {
+    if (fileLoading) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full bg-[#0d0d1a] text-gray-500 gap-3">
+          <svg className="w-8 h-8 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" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          <span className="text-sm">Opening file...</span>
+          <span className="text-xs text-gray-600 overflow-hidden text-ellipsis max-w-xs">{selectedFile}</span>
+        </div>
+      );
+    }
+    if (fileError) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full bg-[#0d0d1a] text-gray-400 gap-3">
+          <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+          </svg>
+          <span className="text-sm text-red-400">{fileError}</span>
+          <span className="text-xs text-gray-600 overflow-hidden text-ellipsis max-w-xs">{selectedFile}</span>
+          <button
+            onClick={handleCloseFile}
+            className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm transition-colors"
+          >
+            Back
+          </button>
+        </div>
+      );
+    }
     return (
       <FileViewer
         path={selectedFile}
@@ -251,7 +293,13 @@ function FileSessionView({ session }: { session: FileSession }) {
       </div>
 
       {loading ? (
-        <div className="flex items-center justify-center flex-1 text-gray-500 text-sm">Loading...</div>
+        <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" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          <span className="text-sm">Loading...</span>
+        </div>
       ) : (
         <FileList entries={entries} onOpen={handleOpen} onDelete={handleDelete} onInfo={handleInfo} onRename={handleRename} />
       )}

app/components/files/ImageViewer.tsx

@@ -34,7 +34,7 @@ export default function ImageViewer({ path, onClose }: ImageViewerProps) {
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none mr-2" title={path}>{path}</span>
         <div className="flex items-center gap-2 shrink-0">
           {/* Zoom controls */}
           <div className="flex items-center gap-1 border border-gray-700 rounded overflow-hidden">