@haowjy/remote-workspace 0.1.1 → 0.1.3

package/README.md

@@ -9,7 +9,7 @@ Mobile-friendly read/upload web workspace for this repository.
 - Delete images from `.clipboard/` and `.playwright-mcp/` from the UI
 - Preview text files and images
 - Render Markdown with Mermaid diagrams
-- Hide and block access to dotfiles/dot-directories (for example `.env`, `.git`)
+- Hide and block access to configured path segments (always hides `.git`)
 - Dedicated collapsible `.clipboard` panel for upload + quick image viewing
 
 This app is intentionally **no text editing** to keep remote access simple and lower risk.
@@ -62,6 +62,7 @@ cd /path/to/your/repo && pnpm dev
 ```bash
 pnpm dev -- config /path/to/config
 pnpm dev -- port 18111
+pnpm dev -- always-hidden .git,.env,.secrets
 pnpm dev -- install
 pnpm dev -- no-serve
 pnpm dev -- password your-password
@@ -76,6 +77,7 @@ pnpm dev -- password your-password --funnel
 - `REMOTE_WS_MAX_UPLOAD_BYTES` (default `26214400`)
 - `REMOTE_WS_PASSWORD` (optional, enables HTTP Basic Auth when set)
 - `REMOTE_WS_CONFIG_FILE` (optional config file path override)
+- `REMOTE_WS_ALWAYS_HIDDEN` (optional comma-separated extra hidden path segments)
 - `REPO_ROOT` (injected by launcher script)
 
 Password config file format (default: repo root `.remote-workspace.conf`):
@@ -102,7 +104,7 @@ Config file selection precedence:
 - `POST /api/clipboard/upload` always writes to `REPO_ROOT/.clipboard`
 - `DELETE /api/clipboard/file?name=<filename>` deletes one image in `REPO_ROOT/.clipboard`
 - `.clipboard` panel uses dedicated clipboard endpoints (`/api/clipboard/upload`, `/api/clipboard/list`, `/api/clipboard/file`)
-- Main repository browser still blocks all hidden paths and gitignored paths
+- Main repository browser blocks always-hidden path segments (`.git` + optional configured segments)
 - Gitignored paths are hidden/blocked (for example `node_modules/`, build artifacts, local secrets)
 - Accepted upload types are images only (`png`, `jpg`, `jpeg`, `gif`, `webp`, `svg`, `bmp`, `heic`, `heif`, `avif`)
 - Clipboard panel supports both file picker and `Paste From Clipboard` button (when browser clipboard image API is available)

package/dist/launcher.js

@@ -14,6 +14,7 @@ Options:
   --repo-root <path> Repository root to expose (default: REPO_ROOT or cwd)
   --config <path>    Config file path (default uses precedence search)
   --port <port>      Listen port (default: REMOTE_WS_PORT or 18080)
+  --always-hidden <csv> Extra always-hidden path segments (comma-separated)
   --install          Force dependency install before start
   --skip-install     Skip install check even if node_modules is missing
   --no-serve         Skip tailscale serve setup
@@ -27,6 +28,7 @@ Examples:
   pnpm dev -- --repo-root /path/to/repo
   pnpm dev -- --config ~/.config/remote-workspace/config
   pnpm dev -- --port 18111
+  pnpm dev -- --always-hidden .git,.env,.secrets
   pnpm dev -- --password
   pnpm dev -- --password mypass --serve
   pnpm dev -- --password mypass --funnel
@@ -47,6 +49,23 @@ function parsePort(rawPort) {
     }
     return value;
 }
+function parseAlwaysHiddenCsv(rawValue, sourceLabel) {
+    const segments = rawValue
+        .split(",")
+        .map((value) => value.trim())
+        .filter(Boolean);
+    if (segments.length === 0) {
+        fail(`Invalid ${sourceLabel} value: provide at least one segment.`);
+    }
+    const normalizedSegments = new Set();
+    for (const segment of segments) {
+        if (segment.includes("/") || segment.includes("\\") || segment.includes("\u0000")) {
+            fail(`Invalid ${sourceLabel} segment "${segment}": segments must not contain path separators or null bytes.`);
+        }
+        normalizedSegments.add(segment);
+    }
+    return Array.from(normalizedSegments).join(",");
+}
 function parseConfigPassword(configFilePath) {
     if (!existsSync(configFilePath)) {
         return "";
@@ -100,6 +119,7 @@ function parseArgs(argv) {
     let workspacePassword = "";
     let configFileFromArg = null;
     let configFile = "";
+    let alwaysHidden = null;
     for (let i = 0; i < argv.length; i += 1) {
         const arg = argv[i];
         switch (arg) {
@@ -130,6 +150,15 @@ function parseArgs(argv) {
                 i += 1;
                 break;
             }
+            case "--always-hidden": {
+                const next = argv[i + 1];
+                if (!next || next.startsWith("--")) {
+                    fail("Missing value for --always-hidden.");
+                }
+                alwaysHidden = parseAlwaysHiddenCsv(next, "--always-hidden");
+                i += 1;
+                break;
+            }
             case "--install":
                 forceInstall = true;
                 break;
@@ -229,6 +258,7 @@ function parseArgs(argv) {
         passwordEnabled,
         workspacePassword,
         configFile,
+        alwaysHidden,
     };
 }
 function hasCommand(commandName) {
@@ -291,25 +321,33 @@ function main() {
     if (args.passwordEnabled) {
         console.log("Auth: Basic Auth enabled");
     }
+    if (args.alwaysHidden !== null) {
+        console.log(`Always hidden segments: .git + ${args.alwaysHidden}`);
+    }
+    else if (process.env.REMOTE_WS_ALWAYS_HIDDEN) {
+        console.log(`Always hidden segments: .git + ${process.env.REMOTE_WS_ALWAYS_HIDDEN}`);
+    }
+    else {
+        console.log("Always hidden segments: .git");
+    }
     console.log("");
+    const childEnv = {
+        ...process.env,
+        REPO_ROOT: args.repoRoot,
+        REMOTE_WS_PORT: String(args.port),
+        REMOTE_WS_PASSWORD: args.workspacePassword,
+    };
+    if (args.alwaysHidden !== null) {
+        childEnv.REMOTE_WS_ALWAYS_HIDDEN = args.alwaysHidden;
+    }
     const child = runBuiltServer
         ? spawn("node", [builtServerPath], {
             stdio: "inherit",
-            env: {
-                ...process.env,
-                REPO_ROOT: args.repoRoot,
-                REMOTE_WS_PORT: String(args.port),
-                REMOTE_WS_PASSWORD: args.workspacePassword,
-            },
+            env: childEnv,
         })
         : spawn("pnpm", ["--dir", appDir, "dev:server"], {
             stdio: "inherit",
-            env: {
-                ...process.env,
-                REPO_ROOT: args.repoRoot,
-                REMOTE_WS_PORT: String(args.port),
-                REMOTE_WS_PASSWORD: args.workspacePassword,
-            },
+            env: childEnv,
         });
     child.on("exit", (code, signal) => {
         if (signal) {

package/dist/server.js

@@ -23,6 +23,26 @@ function parseIntegerFromEnv(envName, fallbackValue, options) {
     }
     return parsedValue;
 }
+function assertValidHiddenSegment(segment, sourceName) {
+    if (segment.includes("/") || segment.includes("\\") || segment.includes("\u0000")) {
+        throw new Error(`Invalid ${sourceName} segment "${segment}": segments must not contain path separators or null bytes`);
+    }
+}
+function parseAlwaysHiddenSegments(rawValue) {
+    const segments = new Set([".git"]);
+    if (rawValue === undefined) {
+        return segments;
+    }
+    for (const rawSegment of rawValue.split(",")) {
+        const segment = rawSegment.trim();
+        if (!segment) {
+            continue;
+        }
+        assertValidHiddenSegment(segment, "REMOTE_WS_ALWAYS_HIDDEN");
+        segments.add(segment);
+    }
+    return segments;
+}
 const REPO_ROOT = path.resolve(process.env.REPO_ROOT ?? process.cwd());
 const HOST = "127.0.0.1";
 const PORT = parseIntegerFromEnv("REMOTE_WS_PORT", 18080, { min: 1, max: 65535 });
@@ -54,6 +74,7 @@ const ALLOWED_IMAGE_EXTENSIONS = new Set([
 const IMAGE_CACHE_CONTROL = "private, max-age=60, stale-while-revalidate=300";
 const METADATA_CACHE_CONTROL = "private, max-age=10, stale-while-revalidate=30";
 const BASIC_AUTH_PASSWORD = process.env.REMOTE_WS_PASSWORD ?? "";
+const ALWAYS_HIDDEN_SEGMENTS = parseAlwaysHiddenSegments(process.env.REMOTE_WS_ALWAYS_HIDDEN);
 const AUTH_WINDOW_MS = 10 * 60 * 1000;
 const AUTH_MAX_ATTEMPTS = 20;
 const AUTH_BLOCK_MS = 15 * 60 * 1000;
@@ -223,7 +244,9 @@ function isHiddenRepoRelativePath(repoRelativePath) {
     if (!repoRelativePath) {
         return false;
     }
-    return repoRelativePath.split("/").some((segment) => segment.startsWith("."));
+    return repoRelativePath
+        .split("/")
+        .some((segment) => ALWAYS_HIDDEN_SEGMENTS.has(segment));
 }
 function isBlockedHiddenRepoRelativePath(repoRelativePath) {
     return isHiddenRepoRelativePath(repoRelativePath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haowjy/remote-workspace",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Mobile-friendly web workspace for SSH + tmux workflows.",
   "license": "MIT",
   "repository": {

package/static/app.js

@@ -1,8 +1,22 @@
 // ---------------------------------------------------------------------------
-// Theme — initialize before Tailwind processes classes
+// Theme — sync with early head initialization
 // ---------------------------------------------------------------------------
-const savedTheme = localStorage.getItem("workspace-theme") || "dark";
+function resolveSavedTheme() {
+  if (window.__workspaceTheme === "dark" || window.__workspaceTheme === "light") {
+    return window.__workspaceTheme;
+  }
+  try {
+    const savedTheme = localStorage.getItem("workspace-theme");
+    if (savedTheme === "dark" || savedTheme === "light") return savedTheme;
+  } catch {
+    // Ignore storage access errors.
+  }
+  return "light";
+}
+
+const savedTheme = resolveSavedTheme();
 document.documentElement.dataset.theme = savedTheme;
+window.__workspaceTheme = savedTheme;
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -46,7 +60,7 @@ const CACHE_KEYS = {
 // State
 // ---------------------------------------------------------------------------
 const state = {
-  activeTab: "clipboard",
+  activeTab: "files",
   // Tree: top-level entries loaded eagerly, children loaded on expand
   topLevelEntries: [],
   dirChildren: new Map(),
@@ -64,6 +78,7 @@ const state = {
   clipboardApiMode: "modern",
   pendingUploadFile: null,
   searchDebounceTimer: null,
+  filesMobileMode: "explorer",
   // Screenshots
   screenshotEntries: [],
   screenshotsRequestId: 0,
@@ -88,6 +103,9 @@ const uploadNameInput = $("upload-name-input");
 const uploadBtn = $("upload-btn");
 const clipboardRefreshBtn = $("clipboard-refresh-btn");
 const treeRefreshBtn = $("tree-refresh-btn");
+const fileTreeContainer = $("file-tree-container");
+const fileViewerContainer = $("file-viewer-container");
+const mobileExplorerBackBtn = $("mobile-explorer-back-btn");
 const screenshotsGrid = $("screenshots-grid");
 const screenshotsStatusEl = $("screenshots-status");
 const screenshotsRefreshBtn = $("screenshots-refresh-btn");
@@ -125,7 +143,7 @@ const md = window.markdownit({
 window.mermaid.initialize({
   startOnLoad: false,
   securityLevel: "strict",
-  theme: (localStorage.getItem("workspace-theme") || "dark") === "dark" ? "dark" : "default",
+  theme: savedTheme === "dark" ? "dark" : "default",
 });
 
 // ---------------------------------------------------------------------------
@@ -198,7 +216,9 @@ function updateThemeIcon(theme) {
 // Set initial icon to match saved theme
 updateThemeIcon(savedTheme);
 // Set initial hljs theme to match
-if (savedTheme === "light") {
+if (savedTheme === "dark") {
+  hljsThemeLink.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css";
+} else {
   hljsThemeLink.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css";
 }
 
@@ -207,6 +227,7 @@ function toggleTheme() {
   const next = current === "dark" ? "light" : "dark";
   document.documentElement.dataset.theme = next;
   localStorage.setItem("workspace-theme", next);
+  window.__workspaceTheme = next;
 
   updateThemeIcon(next);
 
@@ -301,6 +322,27 @@ function appendVersionQuery(url, entry) {
   return `${url}${separator}v=${version}`;
 }
 
+function isDesktopLayout() {
+  return window.matchMedia("(min-width: 1024px)").matches;
+}
+
+function syncFilesLayout() {
+  if (!fileTreeContainer || !fileViewerContainer) return;
+  const desktop = isDesktopLayout();
+  if (desktop) {
+    fileTreeContainer.classList.remove("hidden");
+    fileViewerContainer.classList.remove("hidden");
+    if (mobileExplorerBackBtn) mobileExplorerBackBtn.classList.add("hidden");
+    return;
+  }
+  const viewerMode = state.filesMobileMode === "viewer";
+  fileTreeContainer.classList.toggle("hidden", viewerMode);
+  fileViewerContainer.classList.toggle("hidden", !viewerMode);
+  if (mobileExplorerBackBtn) {
+    mobileExplorerBackBtn.classList.toggle("hidden", !viewerMode);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Tab navigation
 // ---------------------------------------------------------------------------
@@ -312,6 +354,7 @@ function switchTab(tabName) {
   localStorage.setItem("workspace-tab", tabName);
   tabPanels.forEach((p) => p.classList.toggle("hidden", p.id !== `panel-${tabName}`));
   tabButtons.forEach((b) => b.classList.toggle("active", b.dataset.tab === tabName));
+  syncFilesLayout();
   refreshIcons();
 }
 
@@ -319,8 +362,8 @@ tabButtons.forEach((btn) => {
   btn.addEventListener("click", () => switchTab(btn.dataset.tab));
 });
 
-// Initialize tab — restore last active or default to clipboard
-switchTab(localStorage.getItem("workspace-tab") || "clipboard");
+// Initialize tab — restore last active or default to files
+switchTab(localStorage.getItem("workspace-tab") || "files");
 
 // ---------------------------------------------------------------------------
 // Lightbox
@@ -638,6 +681,10 @@ function handleSearch(query) {
       searchResultsEl.innerHTML = "";
       expandParentsOf(result.path);
       if (result.type === "directory") {
+        if (!isDesktopLayout()) {
+          state.filesMobileMode = "explorer";
+          syncFilesLayout();
+        }
         toggleDirectory(result.path);
       } else {
         openFile(result.path).catch(handleActionError);
@@ -678,6 +725,10 @@ async function openFile(filePath) {
   viewerRefreshBtn.classList.remove("hidden");
   expandParentsOf(filePath);
   renderTree();
+  if (!isDesktopLayout()) {
+    state.filesMobileMode = "viewer";
+    syncFilesLayout();
+  }
 
   viewerTitle.textContent = filePath;
   setStatus(`Opening ${filePath}...`);
@@ -1227,6 +1278,14 @@ screenshotsRefreshBtn.onclick = () => {
 viewerRefreshBtn.onclick = () => {
   if (state.selectedPath) openFile(state.selectedPath).catch(handleActionError);
 };
+if (mobileExplorerBackBtn) {
+  mobileExplorerBackBtn.onclick = () => {
+    state.filesMobileMode = "explorer";
+    syncFilesLayout();
+  };
+}
+window.addEventListener("resize", syncFilesLayout);
+syncFilesLayout();
 
 // ---------------------------------------------------------------------------
 // Init

package/static/index.html

@@ -4,6 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Workspace</title>
+    <script>
+      (() => {
+        let theme = "light";
+        try {
+          const savedTheme = localStorage.getItem("workspace-theme");
+          if (savedTheme === "dark" || savedTheme === "light") theme = savedTheme;
+        } catch {
+          // Ignore storage errors and keep light default.
+        }
+        document.documentElement.dataset.theme = theme;
+        window.__workspaceTheme = theme;
+      })();
+    </script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
@@ -29,7 +42,15 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
-    <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
+    <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" />
+    <script>
+      if (window.__workspaceTheme === "dark") {
+        const hljsTheme = document.getElementById("hljs-theme");
+        if (hljsTheme) {
+          hljsTheme.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css";
+        }
+      }
+    </script>
     <link rel="stylesheet" href="/styles.css" />
   </head>
   <body class="bg-ink-950 text-ink-100 font-sans h-[100dvh] flex flex-col overflow-hidden">
@@ -48,7 +69,7 @@
     <div class="flex-1 min-h-0 relative">
 
       <!-- Tab: Clipboard -->
-      <section id="panel-clipboard" class="tab-panel absolute inset-0 flex flex-col">
+      <section id="panel-clipboard" class="tab-panel absolute inset-0 flex flex-col hidden">
         <div class="shrink-0 bg-ink-900/60 border-b border-ink-800 px-4 py-3 flex flex-wrap items-center gap-2">
           <label class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-brand bg-brand-light/10 border border-brand/20 rounded-lg cursor-pointer hover:bg-brand-light/20 transition-colors">
             <i data-lucide="image-plus" class="w-3.5 h-3.5"></i>
@@ -78,7 +99,7 @@
       </section>
 
       <!-- Tab: Files -->
-      <section id="panel-files" class="tab-panel absolute inset-0 flex flex-col hidden">
+      <section id="panel-files" class="tab-panel absolute inset-0 flex flex-col">
         <!-- Search bar -->
         <div class="shrink-0 bg-ink-900/60 border-b border-ink-800 px-4 py-2.5 flex items-center gap-2">
           <div class="relative flex-1">
@@ -91,20 +112,25 @@
             />
             <div id="search-results" class="hidden absolute top-full left-0 right-0 mt-1 bg-ink-800 border border-ink-700 rounded-lg shadow-xl max-h-72 overflow-y-auto z-40"></div>
           </div>
-          <button id="tree-refresh-btn" type="button" class="p-1.5 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors" title="Refresh">
+          <button id="tree-refresh-btn" type="button" class="hidden lg:inline-flex p-1.5 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors" title="Refresh">
             <i data-lucide="refresh-cw" class="w-4 h-4"></i>
           </button>
         </div>
-        <!-- Split: tree + preview -->
+        <!-- Split: tree + preview (desktop) / single panel (mobile) -->
         <div class="flex-1 min-h-0 flex flex-col lg:flex-row">
-          <div id="file-tree" class="shrink-0 lg:shrink lg:w-72 lg:min-w-[220px] lg:max-w-[360px] h-48 lg:h-auto overflow-y-auto overscroll-contain border-b lg:border-b-0 lg:border-r border-ink-800 px-1 py-1"></div>
-          <div class="flex-1 min-h-0 flex flex-col">
+          <div id="file-tree-container" class="flex-1 min-h-0 lg:flex-none lg:w-72 lg:min-w-[220px] lg:max-w-[360px] border-b lg:border-b-0 lg:border-r border-ink-800">
+            <div id="file-tree" class="h-full overflow-y-auto overscroll-contain px-1 py-1"></div>
+          </div>
+          <div id="file-viewer-container" class="hidden flex flex-1 min-h-0 flex-col lg:flex">
             <div class="shrink-0 flex items-center gap-2 px-4 py-2 border-b border-ink-800/60">
-              <i data-lucide="eye" class="w-3.5 h-3.5 text-ink-500"></i>
-              <span id="viewer-title" class="text-xs font-mono text-ink-400 truncate">Select a file</span>
-              <button id="viewer-refresh-btn" type="button" class="ml-auto p-1 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors hidden" title="Refresh file">
+              <button id="mobile-explorer-back-btn" type="button" class="hidden lg:hidden p-1 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors" title="Back to files">
+                <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
+              </button>
+              <i data-lucide="eye" class="hidden lg:block w-3.5 h-3.5 text-ink-500"></i>
+              <button id="viewer-refresh-btn" type="button" class="order-2 lg:order-none lg:ml-auto p-1 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors hidden" title="Refresh file">
                 <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
               </button>
+              <span id="viewer-title" class="order-3 lg:order-none min-w-0 flex-1 text-xs font-mono text-ink-400 truncate">Select a file</span>
             </div>
             <div id="viewer" class="flex-1 overflow-y-auto overscroll-contain p-4">
               <div class="flex flex-col items-center justify-center h-full text-ink-600">
@@ -150,16 +176,16 @@
 
     <!-- Bottom tab bar -->
     <nav class="shrink-0 bg-ink-900 border-t border-ink-800 flex z-30 safe-bottom">
-      <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="clipboard">
-        <i data-lucide="clipboard" class="w-5 h-5"></i>
-        <span class="text-[10px] font-semibold uppercase tracking-wide">Clipboard</span>
-        <span id="tab-badge-clipboard" class="text-[9px] font-mono text-ink-600"></span>
-      </button>
       <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="files">
         <i data-lucide="folder-tree" class="w-5 h-5"></i>
         <span class="text-[10px] font-semibold uppercase tracking-wide">Files</span>
         <span id="tab-badge-files" class="text-[9px] font-mono text-ink-600"></span>
       </button>
+      <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="clipboard">
+        <i data-lucide="clipboard" class="w-5 h-5"></i>
+        <span class="text-[10px] font-semibold uppercase tracking-wide">Clipboard</span>
+        <span id="tab-badge-clipboard" class="text-[9px] font-mono text-ink-600"></span>
+      </button>
       <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="screenshots">
         <i data-lucide="camera" class="w-5 h-5"></i>
         <span class="text-[10px] font-semibold uppercase tracking-wide">Screenshots</span>