order buttons fixes

Author: davindicode

README.md

@@ -3,34 +3,62 @@
 </p>
 
 <h1 align="center">OTG Code</h1>
-<p align="center"><em>On-The-Go Code</em></p>
+<p align="center"><em>On-The-Go Code — a mobile-first browser IDE for remote development</em></p>
 
-<p align="center">Mobile-terminal-UX first coding IDE fully in the browser, with built-in localhost browser proxy for local testing. Vibe code on your VPS or home machine from anywhere — phone, tablet, or desktop — with zero client-side installation using Cloudflare Quick Tunnels.</p>
+<p align="center">Code on your VPS or home machine from anywhere — phone, tablet, or desktop — with zero client-side installation. Full terminal, file explorer, code editor, and localhost preview in a single browser tab, accessible via Cloudflare Quick Tunnels.</p>
 
 <p align="center">
-  <img src="https://img.shields.io/badge/version-0.1.0-blue" alt="Version">
+  <img src="https://img.shields.io/badge/version-0.0.1-blue" alt="Version">
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="License"></a>
   <img src="https://img.shields.io/badge/node-%3E%3D20-brightgreen" alt="Node >= 20">
   <img src="https://img.shields.io/badge/TypeScript-5.9-blue?logo=typescript&logoColor=white" alt="TypeScript">
   <img src="https://img.shields.io/badge/React_Router-v7-red?logo=reactrouter&logoColor=white" alt="React Router">
   <img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs Welcome">
 </p>
 
+<!-- TODO: Add product showcase videos here -->
+<!-- <p align="center">
+  <a href="https://..."><img src="..." alt="Demo video" width="600" /></a>
+</p> -->
+
 ## Features
 
-- **Terminal** — xterm.js with multi-session renamable tabs, configurable font size, quick action key groups (Ctrl+A-Z, vim, nano, tmux, common commands), multiline text input with send button
-- **File Explorer** — multi-session renamable tabs, breadcrumb + editable path navigation, create/rename/delete files and folders, file info dialog, hidden files toggle, context menu (right-click / long-press)
-- **Code Editor** — Monaco editor with syntax highlighting, configurable font size, word wrap, drag-and-drop text selection
-- **Markdown Preview** — rendered GitHub-flavored markdown with prose styling (headings, code blocks, tables, links, images)
-- **Jupyter Notebook Viewer** — renders cells with type badges, markdown as prose, code as monospace, outputs including text/HTML/base64 images
-- **HTML Preview** — live rendered HTML in a sandboxed iframe
-- **PDF Viewer** — inline PDF rendering with zoom controls and pinch-to-zoom
-- **Image Viewer** — inline image display with zoom controls and pinch-to-zoom
-- **Video Player** — native HTML5 video playback (mp4, webm, ogg, mov, mkv, avi)
-- **Audio Player** — native HTML5 audio playback (mp3, wav, ogg, flac, aac, m4a)
-- **Localhost Browser** — reverse proxy to preview any localhost port through the app, multi-tab with console output panel for debugging
-- **Responsive Layout** — 3-column resizable panels with draggable dividers on desktop, bottom tab bar navigation on mobile
-- **Cloudflare Tunnel** — one command (`./start.sh`) to build, start, and expose your machine to the internet via a temporary public URL
+### Terminal
+- Multi-session tabs (renamable), xterm.js with configurable font size
+- **Quick action tab groups** — color-coded action tabs (blue) and app tabs (green):
+  - **cmds** — common shell commands (ls, top, df, free, nvidia-smi, etc.)
+  - **cd** — visual directory picker with server-side CWD detection (works inside tmux)
+  - **Ctrl+** — sticky modifier combos (Ctrl, Ctrl+Shift, Alt, Alt+Shift) with full A-Z and 0-9
+  - **code** — coding CLI launchers (Claude Code, Codex, OpenCode) with permission presets, plus common CLI key combos (Shift+Tab, Ctrl+C, Ctrl+O)
+  - **git** — quick actions (status, log, diff, add, fetch, pull, push, stash, branch), commit with message input, git config setup (user.name/email)
+  - **nano / vim** — file opener with version detection, in-app command buttons, save/exit shortcuts
+  - **tmux** — session manager (list, attach, create, kill), in-session window/pane controls, auto extended-keys compatibility
+- **Always-visible nav keys** below input — Enter, Bksp, arrows, y/n/q, Esc, Tab, PgUp/PgDn
+- **Context-aware tabs** — editor mode (nano/vim) disables action tabs; tmux mode hides nano/vim (can't track state inside tmux); plain terminal shows everything
+- Auto-reset of tmux/editor state on socket reconnect
+- System info popup with OS, kernel, CPU, memory, GPU details
+- Tool version detection (nano, vim, tmux, claude, codex, opencode)
+
+### File Explorer
+- Multi-session tabs (renamable), breadcrumb + editable path navigation
+- Create, rename, delete files and folders; file info dialog; hidden files toggle
+- Context menu (right-click / long-press), selectable/scrollable file paths
+- Drag-and-drop file upload
+
+### Viewers & Editors
+- **Code Editor** — Monaco with syntax highlighting, configurable font size, word wrap
+- **Markdown Preview** — GitHub-flavored with prose styling
+- **Jupyter Notebook** — cells with type badges, rendered markdown, code, and outputs
+- **HTML Preview** — live rendered in sandboxed iframe
+- **PDF Viewer** — inline rendering with zoom and pinch-to-zoom
+- **Image Viewer** — zoom controls with full pan/scroll at any zoom level, pinch-to-zoom
+- **Video Player** — mp4, webm, ogg, mov, mkv, avi
+- **Audio Player** — mp3, wav, ogg, flac, aac, m4a
+
+### Layout & Access
+- **Responsive** — 3-column resizable panels on desktop/landscape, single-panel with bottom tab bar on mobile/portrait (orientation-aware breakpoint)
+- **Localhost Browser** — reverse proxy to preview any localhost port, multi-tab with console output
+- **Cloudflare Tunnel** — one command (`./start.sh`) to build, start, and expose via public URL
 
 ## Quick Start
 

app/components/files/Breadcrumbs.tsx

@@ -67,7 +67,8 @@ export default function Breadcrumbs({ path, onNavigate, onGoUp, canGoUp }: Bread
       ) : (
         <div
           ref={scrollRef}
-          className="flex-1 flex items-center gap-0.5 text-sm overflow-x-auto whitespace-nowrap px-1 scrollbar-none"
+          onDoubleClick={() => setTextMode(true)}
+          className="flex-1 flex items-center gap-0.5 text-sm overflow-x-auto whitespace-nowrap px-1 scrollbar-none select-text"
         >
           <button
             onClick={() => onNavigate("/")}

app/components/files/CodeEditor.tsx

@@ -1,4 +1,5 @@
 import { lazy, Suspense, useState, useMemo } from "react";
+import CopyPathButton from "./CopyPathButton";
 import { marked } from "marked";
 
 const MonacoEditor = lazy(() => import("@monaco-editor/react"));
@@ -223,7 +224,8 @@ 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-x-auto select-text mr-2 scrollbar-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" title={path}>{path}</span>
+        <CopyPathButton path={path} />
         <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/CopyPathButton.tsx

@@ -0,0 +1,31 @@
+import { useState, useCallback } from "react";
+
+export default function CopyPathButton({ path }: { path: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(path).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [path]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="p-1 text-gray-500 hover:text-white transition-colors shrink-0"
+      title={copied ? "Copied!" : "Copy path"}
+    >
+      {copied ? (
+        <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+      ) : (
+        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+        </svg>
+      )}
+    </button>
+  );
+}

app/components/files/FileViewer.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback } from "react";
+import CopyPathButton from "./CopyPathButton";
 import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
@@ -27,7 +28,8 @@ 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-x-auto select-text mr-2 scrollbar-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" title={path}>{path}</span>
+        <CopyPathButton path={path} />
         <div className="flex items-center gap-2 shrink-0">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
@@ -75,7 +77,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-x-auto select-text mr-2 scrollbar-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" title={path}>{path}</span>
+        <CopyPathButton path={path} />
         <div className="flex items-center gap-2 shrink-0">
           {numPages > 0 && (
             <span className="text-[10px] text-gray-500">{numPages} pg</span>
@@ -158,7 +161,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-x-auto select-text mr-2 scrollbar-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" title={path}>{path}</span>
+        <CopyPathButton path={path} />
         <div className="flex items-center gap-2 shrink-0">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}

app/components/files/ImageViewer.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback } from "react";
+import CopyPathButton from "./CopyPathButton";
 
 interface ImageViewerProps {
   path: string;
@@ -40,7 +41,8 @@ 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 whitespace-nowrap min-w-0 flex-1 overflow-x-auto select-text mr-2 scrollbar-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" title={path}>{path}</span>
+        <CopyPathButton path={path} />
         <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">

app/components/terminal/InputBox.tsx

@@ -484,36 +484,16 @@ export default function InputBox() {
       {/* Tab bar */}
       <div className="border-b border-gray-700/50 overflow-x-auto scrollbar-none" style={{ minWidth: 0 }}>
         <div className="flex items-center gap-1 px-2 py-1 w-max">
-          {isEditorMode ? (
-            <>
-              {/* Editor mode (nano/vim): only editor + sticky, tmux if applicable */}
-              {inEditor === "nano" && tabBtn(NANO_TAB, "nano \u2318", "nano commands", false, "app")}
-              {inEditor === "vim" && tabBtn(VIM_TAB, "vim \u2318", "vim commands", false, "app")}
-              {tabBtn(STICKY_TAB, STICKY_MODES.find((m) => m.id === stickyMode)?.label || "Ctrl+", "Modifier combos")}
-            </>
-          ) : inTmux ? (
-            <>
-              {/* Tmux mode: all action tabs + tmux (no nano/vim — can't track inside tmux) */}
-              {TERMINAL_GROUPS.map((g) => tabBtn(g.label, g.label, g.title))}
-              {tabBtn(CD_TAB, "cd", "Change directory", !activeSessionId)}
-              {tabBtn(STICKY_TAB, STICKY_MODES.find((m) => m.id === stickyMode)?.label || "Ctrl+", "Modifier combos")}
-              {tabBtn(CODE_TAB, "code", "Coding CLI launchers & keys", !activeSessionId)}
-              {tabBtn(GIT_TAB, "git", "Git actions", !activeSessionId)}
-              {tabBtn(TMUX_TAB, "tmux \u2318", "tmux commands", !activeSessionId, "app")}
-            </>
-          ) : (
-            <>
-              {/* Plain terminal: all action tabs + all app tabs */}
-              {TERMINAL_GROUPS.map((g) => tabBtn(g.label, g.label, g.title))}
-              {tabBtn(CD_TAB, "cd", "Change directory", !activeSessionId)}
-              {tabBtn(STICKY_TAB, STICKY_MODES.find((m) => m.id === stickyMode)?.label || "Ctrl+", "Modifier combos")}
-              {tabBtn(CODE_TAB, "code", "Coding CLI launchers & keys", !activeSessionId)}
-              {tabBtn(GIT_TAB, "git", "Git actions", !activeSessionId)}
-              {tabBtn(NANO_TAB, "nano", "Open file in nano", !activeSessionId, "app")}
-              {tabBtn(VIM_TAB, "vim", "Open file in vim", !activeSessionId, "app")}
-              {tabBtn(TMUX_TAB, inTmux ? "tmux \u2318" : "tmux", inTmux ? "tmux commands" : "tmux sessions", !activeSessionId, "app")}
-            </>
-          )}
+          {/* Action tabs (blue) — always in same order, hidden in editor mode */}
+          {!isEditorMode && TERMINAL_GROUPS.map((g) => tabBtn(g.label, g.label, g.title))}
+          {!isEditorMode && tabBtn(CD_TAB, "cd", "Change directory", !activeSessionId)}
+          {tabBtn(STICKY_TAB, STICKY_MODES.find((m) => m.id === stickyMode)?.label || "Ctrl+", "Modifier combos")}
+          {!isEditorMode && tabBtn(CODE_TAB, "code", "Coding CLI launchers & keys", !activeSessionId)}
+          {!isEditorMode && tabBtn(GIT_TAB, "git", "Git actions", !activeSessionId)}
+          {/* App tabs (green) — nano/vim hidden in tmux mode, shown with active indicator in editor mode */}
+          {!inTmux && tabBtn(NANO_TAB, inEditor === "nano" ? "nano \u2318" : "nano", inEditor === "nano" ? "nano commands" : "Open file in nano", !activeSessionId && inEditor !== "nano", "app")}
+          {!inTmux && tabBtn(VIM_TAB, inEditor === "vim" ? "vim \u2318" : "vim", inEditor === "vim" ? "vim commands" : "Open file in vim", !activeSessionId && inEditor !== "vim", "app")}
+          {tabBtn(TMUX_TAB, inTmux ? "tmux \u2318" : "tmux", inTmux ? "tmux commands" : "tmux sessions", !activeSessionId && !inTmux, "app")}
         </div>
       </div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "otgcode",
-  "version": "0.1.0-pre-alpha",
+  "version": "0.0.1",
   "private": true,
   "type": "module",
   "scripts": {