Editor font size, scrollable paths, boxed close buttons, PDF zoom fix

- Code editor: aA font size controls (8-32), dynamic Monaco fontSize
- File paths: horizontally scrollable + select-all for easy copying
- Close buttons: boxed gray rounded style across all viewers
- PDF viewer: proper zoom with centered dark background on zoom out
- Monaco: enabled selection highlight, occurrences highlight, drag & drop
- Added .env.example
- Focus glow: upgraded from outline to box-shadow halo effect

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

Author: davindicode

.env.example

@@ -0,0 +1,3 @@
+OTG_PORT=7777
+DEFAULT_SHELL=/bin/bash
+DEFAULT_CWD=/home/user

README.md

@@ -39,10 +39,7 @@ cp .env.example .env  # or create manually:
 # DEFAULT_SHELL=/bin/bash
 # DEFAULT_CWD=/home/user
 
-# Development
-pnpm dev
-
-# Production with tunnel (one command)
+# Production with tunnel URL
 ./start.sh
 ```
 

app/app.css

@@ -140,14 +140,15 @@ body {
 .prose img { max-width: 100%; border-radius: 4px; }
 .prose hr { border: none; border-top: 1px solid #333; margin: 1.5em 0; }
 
-/* Terminal focus indicator — light border when area is actively focused */
+/* Terminal focus indicator — glowing hue around active area */
 .terminal-focus-area {
-  outline: 1px solid transparent;
-  transition: outline-color 0.2s;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 transparent;
+  transition: box-shadow 0.3s ease;
 }
 
 .terminal-focus-area:focus-within {
-  outline-color: #569cd6;
+  box-shadow: inset 0 0 0 1px rgba(86, 156, 214, 0.5), 0 0 12px rgba(86, 156, 214, 0.25), 0 0 4px rgba(86, 156, 214, 0.15);
 }
 
 /* Global button press feedback — visual response on tap/click */

app/components/files/CodeEditor.tsx

@@ -192,6 +192,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
   const [value, setValue] = useState(content);
   const [dirty, setDirty] = useState(false);
   const [mode, setMode] = useState<"edit" | "preview">(canPreview ? "preview" : "edit");
+  const [editorFontSize, setEditorFontSize] = useState(14);
 
   const handleChange = (v: string | undefined) => {
     if (v !== undefined) {
@@ -208,9 +209,9 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
   return (
     <div className="flex flex-col h-full">
       {/* Toolbar */}
-      <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 truncate">{path}</span>
-        <div className="flex items-center gap-2 shrink-0">
+      <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 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{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">
               <button
@@ -235,27 +236,43 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
               </button>
             </div>
           )}
+          {/* Font size */}
+          <div className="flex items-center border border-gray-700 rounded overflow-hidden">
+            <button
+              onClick={() => setEditorFontSize((s) => Math.max(8, s - 1))}
+              className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors leading-none"
+            >
+              <span className="text-[9px] font-bold">a</span>
+            </button>
+            <span className="text-[10px] text-gray-500 w-5 text-center tabular-nums">{editorFontSize}</span>
+            <button
+              onClick={() => setEditorFontSize((s) => Math.min(32, s + 1))}
+              className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors leading-none"
+            >
+              <span className="text-[14px] font-bold">A</span>
+            </button>
+          </div>
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
             download
-            className="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded text-xs transition-colors"
+            className="px-2 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded text-xs transition-colors"
           >
             Download
           </a>
-          {dirty && <span className="text-xs text-yellow-500">Unsaved</span>}
+          {dirty && <span className="text-xs text-yellow-500">*</span>}
           <button
             onClick={handleSave}
             disabled={!dirty}
-            className="px-3 py-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-700 disabled:text-gray-500 text-white rounded text-xs font-medium transition-colors"
+            className="px-2 py-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-700 disabled:text-gray-500 text-white rounded text-xs font-medium transition-colors"
           >
             Save
           </button>
           <button
             onClick={onClose}
-            className="p-1 text-gray-400 hover:text-white transition-colors"
+            className="p-1 bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white rounded transition-colors"
             title="Close"
           >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
           </button>
         </div>
       </div>
@@ -286,11 +303,14 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
               theme="vs-dark"
               options={{
                 minimap: { enabled: false },
-                fontSize: 14,
+                fontSize: editorFontSize,
                 wordWrap: "on",
                 lineNumbers: "on",
                 scrollBeyondLastLine: false,
                 automaticLayout: true,
+                selectionHighlight: true,
+                occurrencesHighlight: "singleFile",
+                dragAndDrop: true,
               }}
             />
           </Suspense>

app/components/files/FileViewer.tsx

@@ -40,7 +40,7 @@ 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 truncate">{path}</span>
+        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{path}</span>
         <div className="flex items-center gap-2">
           <div className="flex items-center gap-1 border border-gray-700 rounded overflow-hidden">
             <button onClick={zoomOut} className="px-2 py-0.5 text-xs text-gray-400 hover:text-white hover:bg-gray-700">-</button>
@@ -56,35 +56,33 @@ function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
           </a>
           <button
             onClick={onClose}
-            className="p-1 text-gray-400 hover:text-white transition-colors"
+            className="p-1 bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white rounded transition-colors"
             title="Close"
           >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
           </button>
         </div>
       </div>
       <div
-        className="flex-1 min-h-0 overflow-auto relative"
+        className="flex-1 min-h-0 overflow-auto bg-[#0d0d1a] flex items-center justify-center"
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
-        {/* Spacer div sized to the scaled iframe dimensions so scrolling works */}
-        <div style={{ width: `${100 * zoom}%`, height: `${100 * zoom}%`, pointerEvents: "none" }} />
-        {/* Iframe scaled from top-left, positioned absolutely */}
-        <iframe
-          src={`/api/files/download?path=${encodeURIComponent(path)}&inline=1`}
-          title={path}
+        <div
           style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: `${100 / zoom}%`,
-            height: `${100 / zoom}%`,
-            border: "none",
-            transform: `scale(${zoom})`,
-            transformOrigin: "top left",
+            width: zoom <= 1 ? `${zoom * 100}%` : `${zoom * 100}%`,
+            height: zoom <= 1 ? `${zoom * 100}%` : `${zoom * 100}%`,
+            minWidth: zoom > 1 ? `${zoom * 100}%` : undefined,
+            minHeight: zoom > 1 ? `${zoom * 100}%` : undefined,
+            flexShrink: 0,
           }}
-        />
+        >
+          <iframe
+            src={`/api/files/download?path=${encodeURIComponent(path)}&inline=1`}
+            title={path}
+            className="w-full h-full border-0"
+          />
+        </div>
       </div>
     </div>
   );
@@ -109,7 +107,7 @@ 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 truncate">{path}</span>
+        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{path}</span>
         <div className="flex items-center gap-2">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
@@ -120,10 +118,10 @@ export default function FileViewer({ path, content, onSave, onClose }: FileViewe
           </a>
           <button
             onClick={onClose}
-            className="p-1 text-gray-400 hover:text-white transition-colors"
+            className="p-1 bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white rounded transition-colors"
             title="Close"
           >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
           </button>
         </div>
       </div>

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 truncate">{path}</span>
+        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{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">
@@ -51,10 +51,10 @@ export default function ImageViewer({ path, onClose }: ImageViewerProps) {
           </a>
           <button
             onClick={onClose}
-            className="p-1 text-gray-400 hover:text-white transition-colors"
+            className="p-1 bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white rounded transition-colors"
             title="Close"
           >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
           </button>
         </div>
       </div>