@haowjy/remote-workspace 0.1.3 → 0.1.4

package/README.md

@@ -6,10 +6,12 @@ Mobile-friendly read/upload web workspace for this repository.
 
 - Browse repository folders/files
 - Upload images into `.clipboard/` at repo root (single image per upload)
-- Delete images from `.clipboard/` and `.playwright-mcp/` from the UI
+- Delete images from `.clipboard/` from the UI
+- Open any folder in the Files tab to view all images in that folder as a grid
 - Preview text files and images
 - Render Markdown with Mermaid diagrams
 - Hide and block access to configured path segments (always hides `.git`)
+- Allow specific gitignored/hidden image folders (for example `.playwright-mcp`) via config
 - Dedicated collapsible `.clipboard` panel for upload + quick image viewing
 
 This app is intentionally **no text editing** to keep remote access simple and lower risk.
@@ -63,6 +65,7 @@ cd /path/to/your/repo && pnpm dev
 pnpm dev -- config /path/to/config
 pnpm dev -- port 18111
 pnpm dev -- always-hidden .git,.env,.secrets
+pnpm dev -- image-dirs .clipboard,.playwright-mcp
 pnpm dev -- install
 pnpm dev -- no-serve
 pnpm dev -- password your-password
@@ -78,6 +81,7 @@ pnpm dev -- password your-password --funnel
 - `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)
+- `REMOTE_WS_IMAGE_DIRS` (optional comma-separated repo-relative folders to expose for image browsing; default `.clipboard`)
 - `REPO_ROOT` (injected by launcher script)
 
 Password config file format (default: repo root `.remote-workspace.conf`):
@@ -106,6 +110,7 @@ Config file selection precedence:
 - `.clipboard` panel uses dedicated clipboard endpoints (`/api/clipboard/upload`, `/api/clipboard/list`, `/api/clipboard/file`)
 - 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)
+- `REMOTE_WS_IMAGE_DIRS` / `--image-dirs` lets you allow specific hidden/gitignored folders in Files view (for example `.playwright-mcp`)
 - 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)
 - Upload requires `name` query parameter (filename is user-controlled)
@@ -113,16 +118,16 @@ Config file selection precedence:
 - Multipart field names accepted: `file` (current UI) and `files` (legacy cached UI compatibility)
 - Legacy alias: `/api/upload` is still accepted for older cached clients
 
-## Screenshots
+## Folder Image Gallery
 
-- `GET /api/screenshots/list` lists images in `REPO_ROOT/.playwright-mcp`
-- `GET /api/screenshots/file?name=<filename>` streams one screenshot image
-- `DELETE /api/screenshots/file?name=<filename>` deletes one screenshot image
+- Selecting a directory in Files renders a gallery of image files directly inside that folder.
+- Gallery images stream through `GET /api/file?path=<repo-relative-path>`.
+- This works for normal folders and for configured `REMOTE_WS_IMAGE_DIRS` folders.
 
 ## Caching
 
-- The browser now caches image bytes (`/api/clipboard/file`, `/api/screenshots/file`, image responses from `/api/file`) with short-lived cache headers and validators.
-- The client keeps a small local metadata cache (tree + clipboard/screenshot lists) and hydrates immediately on reload, then refreshes in the background.
+- The browser now caches image bytes (`/api/clipboard/file`, image responses from `/api/file`) with short-lived cache headers and validators.
+- The client keeps a small local metadata cache (tree + clipboard lists) and hydrates immediately on reload, then refreshes in the background.
 - Refresh buttons bypass local metadata cache and force a new server fetch.
 
 ## Tailscale

package/dist/launcher.js

@@ -15,6 +15,7 @@ Options:
   --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)
+  --image-dirs <csv> Visible image folders (repo-relative, 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
@@ -29,6 +30,7 @@ Examples:
   pnpm dev -- --config ~/.config/remote-workspace/config
   pnpm dev -- --port 18111
   pnpm dev -- --always-hidden .git,.env,.secrets
+  pnpm dev -- --image-dirs .clipboard,.playwright-mcp
   pnpm dev -- --password
   pnpm dev -- --password mypass --serve
   pnpm dev -- --password mypass --funnel
@@ -66,6 +68,43 @@ function parseAlwaysHiddenCsv(rawValue, sourceLabel) {
     }
     return Array.from(normalizedSegments).join(",");
 }
+function normalizeRepoRelativePath(rawValue, sourceLabel) {
+    const trimmed = rawValue.trim();
+    if (!trimmed) {
+        return "";
+    }
+    if (trimmed.includes("\u0000")) {
+        fail(`Invalid ${sourceLabel} path "${rawValue}": path must not contain null bytes.`);
+    }
+    const normalized = path.posix.normalize(trimmed.replaceAll("\\", "/")).replace(/^\.\//, "");
+    if (!normalized || normalized === ".") {
+        return "";
+    }
+    if (normalized === ".." || normalized.startsWith("../")) {
+        fail(`Invalid ${sourceLabel} path "${rawValue}": path must stay inside repository.`);
+    }
+    if (path.posix.isAbsolute(normalized)) {
+        fail(`Invalid ${sourceLabel} path "${rawValue}": path must be repo-relative.`);
+    }
+    if (normalized.split("/").includes(".git")) {
+        fail(`Invalid ${sourceLabel} path "${rawValue}": .git cannot be exposed.`);
+    }
+    return normalized;
+}
+function parseImageDirsCsv(rawValue, sourceLabel) {
+    const normalizedPaths = new Set();
+    for (const rawPath of rawValue.split(",")) {
+        const normalizedPath = normalizeRepoRelativePath(rawPath, sourceLabel);
+        if (!normalizedPath) {
+            continue;
+        }
+        normalizedPaths.add(normalizedPath);
+    }
+    if (normalizedPaths.size === 0) {
+        fail(`Invalid ${sourceLabel} value: provide at least one repo-relative path.`);
+    }
+    return Array.from(normalizedPaths).join(",");
+}
 function parseConfigPassword(configFilePath) {
     if (!existsSync(configFilePath)) {
         return "";
@@ -120,6 +159,7 @@ function parseArgs(argv) {
     let configFileFromArg = null;
     let configFile = "";
     let alwaysHidden = null;
+    let imageDirs = null;
     for (let i = 0; i < argv.length; i += 1) {
         const arg = argv[i];
         switch (arg) {
@@ -159,6 +199,15 @@ function parseArgs(argv) {
                 i += 1;
                 break;
             }
+            case "--image-dirs": {
+                const next = argv[i + 1];
+                if (!next || next.startsWith("--")) {
+                    fail("Missing value for --image-dirs.");
+                }
+                imageDirs = parseImageDirsCsv(next, "--image-dirs");
+                i += 1;
+                break;
+            }
             case "--install":
                 forceInstall = true;
                 break;
@@ -259,6 +308,7 @@ function parseArgs(argv) {
         workspacePassword,
         configFile,
         alwaysHidden,
+        imageDirs,
     };
 }
 function hasCommand(commandName) {
@@ -330,6 +380,15 @@ function main() {
     else {
         console.log("Always hidden segments: .git");
     }
+    if (args.imageDirs !== null) {
+        console.log(`Visible image folders: ${args.imageDirs}`);
+    }
+    else if (process.env.REMOTE_WS_IMAGE_DIRS) {
+        console.log(`Visible image folders: ${process.env.REMOTE_WS_IMAGE_DIRS}`);
+    }
+    else {
+        console.log("Visible image folders: .clipboard");
+    }
     console.log("");
     const childEnv = {
         ...process.env,
@@ -340,6 +399,9 @@ function main() {
     if (args.alwaysHidden !== null) {
         childEnv.REMOTE_WS_ALWAYS_HIDDEN = args.alwaysHidden;
     }
+    if (args.imageDirs !== null) {
+        childEnv.REMOTE_WS_IMAGE_DIRS = args.imageDirs;
+    }
     const child = runBuiltServer
         ? spawn("node", [builtServerPath], {
             stdio: "inherit",

package/dist/server.js

@@ -9,6 +9,7 @@ import { pipeline } from "node:stream/promises";
 import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
 import { lookup as mimeLookup } from "mime-types";
+const CLIPBOARD_DIRECTORY_NAME = ".clipboard";
 function parseIntegerFromEnv(envName, fallbackValue, options) {
     const rawValue = process.env[envName];
     const parsedValue = Number.parseInt(rawValue ?? String(fallbackValue), 10);
@@ -28,6 +29,29 @@ function assertValidHiddenSegment(segment, sourceName) {
         throw new Error(`Invalid ${sourceName} segment "${segment}": segments must not contain path separators or null bytes`);
     }
 }
+function normalizeRepoRelativeDirectoryPath(rawPath, sourceName) {
+    const trimmed = rawPath.trim();
+    if (!trimmed) {
+        return "";
+    }
+    if (trimmed.includes("\u0000")) {
+        throw new Error(`Invalid ${sourceName} path "${rawPath}": path must not contain null bytes`);
+    }
+    const normalized = path.posix.normalize(trimmed.replaceAll("\\", "/")).replace(/^\.\//, "");
+    if (!normalized || normalized === ".") {
+        return "";
+    }
+    if (normalized === ".." || normalized.startsWith("../")) {
+        throw new Error(`Invalid ${sourceName} path "${rawPath}": path must stay inside repository`);
+    }
+    if (path.posix.isAbsolute(normalized)) {
+        throw new Error(`Invalid ${sourceName} path "${rawPath}": path must be repo-relative`);
+    }
+    if (normalized.split("/").includes(".git")) {
+        throw new Error(`Invalid ${sourceName} path "${rawPath}": .git cannot be exposed`);
+    }
+    return normalized;
+}
 function parseAlwaysHiddenSegments(rawValue) {
     const segments = new Set([".git"]);
     if (rawValue === undefined) {
@@ -43,6 +67,21 @@ function parseAlwaysHiddenSegments(rawValue) {
     }
     return segments;
 }
+function parseImageDirectoryPaths(rawValue) {
+    const parsed = new Set();
+    const candidates = rawValue === undefined ? [CLIPBOARD_DIRECTORY_NAME] : rawValue.split(",");
+    for (const candidate of candidates) {
+        const normalizedPath = normalizeRepoRelativeDirectoryPath(candidate, "REMOTE_WS_IMAGE_DIRS");
+        if (!normalizedPath) {
+            continue;
+        }
+        parsed.add(normalizedPath);
+    }
+    if (parsed.size === 0) {
+        throw new Error("Invalid REMOTE_WS_IMAGE_DIRS: provide at least one repo-relative path");
+    }
+    return Array.from(parsed);
+}
 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 });
@@ -55,10 +94,8 @@ const MAX_UPLOAD_BYTES = parseIntegerFromEnv("REMOTE_WS_MAX_UPLOAD_BYTES", 26_21
 const MAX_TREE_ENTRIES = parseIntegerFromEnv("REMOTE_WS_MAX_TREE_ENTRIES", 5000, {
     min: 1,
 });
-const CLIPBOARD_DIRECTORY_NAME = ".clipboard";
 const CLIPBOARD_DIRECTORY_PATH = path.resolve(REPO_ROOT, CLIPBOARD_DIRECTORY_NAME);
-const SCREENSHOTS_DIRECTORY_NAME = ".playwright-mcp";
-const SCREENSHOTS_DIRECTORY_PATH = path.resolve(REPO_ROOT, SCREENSHOTS_DIRECTORY_NAME);
+const IMAGE_DIRECTORY_PATHS = parseImageDirectoryPaths(process.env.REMOTE_WS_IMAGE_DIRS);
 const ALLOWED_IMAGE_EXTENSIONS = new Set([
     ".png",
     ".jpg",
@@ -240,6 +277,16 @@ function toRepoRelativePath(absPath) {
     }
     return relative.split(path.sep).join("/");
 }
+function pathStartsWithDirectory(repoRelativePath, repoRelativeDirectoryPath) {
+    return (repoRelativePath === repoRelativeDirectoryPath ||
+        repoRelativePath.startsWith(`${repoRelativeDirectoryPath}/`));
+}
+function isConfiguredImageDirectoryPath(repoRelativePath) {
+    if (!repoRelativePath) {
+        return false;
+    }
+    return IMAGE_DIRECTORY_PATHS.some((directoryPath) => pathStartsWithDirectory(repoRelativePath, directoryPath));
+}
 function isHiddenRepoRelativePath(repoRelativePath) {
     if (!repoRelativePath) {
         return false;
@@ -249,7 +296,8 @@ function isHiddenRepoRelativePath(repoRelativePath) {
         .some((segment) => ALWAYS_HIDDEN_SEGMENTS.has(segment));
 }
 function isBlockedHiddenRepoRelativePath(repoRelativePath) {
-    return isHiddenRepoRelativePath(repoRelativePath);
+    return (isHiddenRepoRelativePath(repoRelativePath) &&
+        !isConfiguredImageDirectoryPath(repoRelativePath));
 }
 function parseGitIgnoredStdout(stdout) {
     if (!stdout) {
@@ -280,9 +328,11 @@ async function assertPathAccessible(absPath, options) {
         throw new Error("Hidden paths are not accessible");
     }
     if (!options?.allowGitIgnored && repoRelativePath) {
-        const ignoredPathSet = await getGitIgnoredPathSet([repoRelativePath]);
-        if (ignoredPathSet.has(repoRelativePath)) {
-            throw new Error("Gitignored paths are not accessible");
+        if (!isConfiguredImageDirectoryPath(repoRelativePath)) {
+            const ignoredPathSet = await getGitIgnoredPathSet([repoRelativePath]);
+            if (ignoredPathSet.has(repoRelativePath)) {
+                throw new Error("Gitignored paths are not accessible");
+            }
         }
     }
 }
@@ -537,15 +587,69 @@ function sortTree(node) {
         sortTree(child);
     }
 }
+async function collectConfiguredImageDirectoryFiles(maxFiles) {
+    const collectedPaths = [];
+    for (const repoRelativeDirectoryPath of IMAGE_DIRECTORY_PATHS) {
+        if (collectedPaths.length >= maxFiles) {
+            break;
+        }
+        const absoluteDirectoryPath = resolveRepoPath(repoRelativeDirectoryPath);
+        let stats;
+        try {
+            stats = await fs.stat(absoluteDirectoryPath);
+        }
+        catch {
+            continue;
+        }
+        if (!stats.isDirectory()) {
+            continue;
+        }
+        const stack = [absoluteDirectoryPath];
+        while (stack.length > 0 && collectedPaths.length < maxFiles) {
+            const currentDirectoryPath = stack.pop();
+            if (!currentDirectoryPath) {
+                break;
+            }
+            let dirEntries;
+            try {
+                dirEntries = await fs.readdir(currentDirectoryPath, {
+                    withFileTypes: true,
+                });
+            }
+            catch {
+                continue;
+            }
+            for (const dirEntry of dirEntries) {
+                if (dirEntry.isSymbolicLink()) {
+                    continue;
+                }
+                const childPath = path.join(currentDirectoryPath, dirEntry.name);
+                if (dirEntry.isDirectory()) {
+                    stack.push(childPath);
+                    continue;
+                }
+                if (!dirEntry.isFile()) {
+                    continue;
+                }
+                collectedPaths.push(toRepoRelativePath(childPath));
+                if (collectedPaths.length >= maxFiles) {
+                    break;
+                }
+            }
+        }
+    }
+    return collectedPaths;
+}
 app.get("/api/tree", async (_req, res) => {
     try {
         const { stdout } = await execFileAsync("git", ["-C", REPO_ROOT, "ls-files", "--cached", "--others", "--exclude-standard"], { maxBuffer: 10 * 1024 * 1024 });
-        const allPaths = String(stdout)
+        const gitPaths = String(stdout)
             .split(/\r?\n/)
             .map((line) => line.trim())
             .filter(Boolean);
-        // Filter hidden paths
-        const visiblePaths = allPaths.filter((p) => !isHiddenRepoRelativePath(p));
+        const extraVisiblePaths = await collectConfiguredImageDirectoryFiles(MAX_TREE_ENTRIES * 4);
+        const allPaths = Array.from(new Set([...gitPaths, ...extraVisiblePaths]));
+        const visiblePaths = allPaths.filter((p) => !isBlockedHiddenRepoRelativePath(p));
         const truncated = visiblePaths.length > MAX_TREE_ENTRIES;
         const paths = truncated ? visiblePaths.slice(0, MAX_TREE_ENTRIES) : visiblePaths;
         const root = buildTreeFromPaths(paths);
@@ -596,7 +700,8 @@ app.get("/api/list", async (req, res) => {
         }
         const ignoredPathSet = await getGitIgnoredPathSet(candidates.map((candidate) => candidate.childRepoRelativePath));
         for (const candidate of candidates) {
-            if (ignoredPathSet.has(candidate.childRepoRelativePath)) {
+            if (ignoredPathSet.has(candidate.childRepoRelativePath) &&
+                !isConfiguredImageDirectoryPath(candidate.childRepoRelativePath)) {
                 skippedIgnored += 1;
                 continue;
             }
@@ -738,105 +843,6 @@ app.delete("/api/clipboard/file", async (req, res) => {
         res.status(400).json({ error: message });
     }
 });
-app.get("/api/screenshots/list", async (_req, res) => {
-    try {
-        const dirEntries = await fs.readdir(SCREENSHOTS_DIRECTORY_PATH, {
-            withFileTypes: true,
-        }).catch(() => []);
-        const entries = [];
-        for (const dirEntry of dirEntries) {
-            if (!dirEntry.isFile())
-                continue;
-            const extension = path.extname(dirEntry.name).toLowerCase();
-            if (!ALLOWED_IMAGE_EXTENSIONS.has(extension))
-                continue;
-            const absPath = path.join(SCREENSHOTS_DIRECTORY_PATH, dirEntry.name);
-            let stats;
-            try {
-                stats = await fs.stat(absPath);
-            }
-            catch {
-                continue;
-            }
-            entries.push({
-                name: dirEntry.name,
-                path: `${SCREENSHOTS_DIRECTORY_NAME}/${dirEntry.name}`,
-                type: "file",
-                size: stats.size,
-                modifiedAt: stats.mtime.toISOString(),
-            });
-        }
-        entries.sort((left, right) => right.modifiedAt.localeCompare(left.modifiedAt));
-        setMetadataCacheHeaders(res);
-        res.json({
-            directory: SCREENSHOTS_DIRECTORY_NAME,
-            entries,
-        });
-    }
-    catch (error) {
-        const message = error instanceof Error ? error.message : "Unable to list screenshots";
-        res.status(400).json({ error: message });
-    }
-});
-app.get("/api/screenshots/file", async (req, res) => {
-    try {
-        const requestedName = getSingleQueryValue(req.query.name);
-        if (!requestedName) {
-            res.status(400).json({ error: "Missing ?name=..." });
-            return;
-        }
-        const { path: absPath } = resolveNamedImagePath(SCREENSHOTS_DIRECTORY_PATH, requestedName);
-        const stats = await fs.stat(absPath);
-        if (!stats.isFile()) {
-            res.status(400).json({ error: "Not a file" });
-            return;
-        }
-        const realPath = await fs.realpath(absPath);
-        const relativeToDirectory = path.relative(SCREENSHOTS_DIRECTORY_PATH, realPath);
-        if (relativeToDirectory.startsWith("..") ||
-            path.isAbsolute(relativeToDirectory)) {
-            res.status(400).json({ error: "Path escapes target directory" });
-            return;
-        }
-        if (setImageCacheHeaders(req, res, stats)) {
-            return;
-        }
-        const mimeType = mimeLookup(absPath) || "application/octet-stream";
-        res.setHeader("Content-Type", mimeType);
-        res.setHeader("Content-Length", String(stats.size));
-        await pipeline(createReadStream(absPath), res);
-    }
-    catch (error) {
-        const message = error instanceof Error ? error.message : "Unable to stream screenshot";
-        if (!res.headersSent) {
-            res.status(400).json({ error: message });
-            return;
-        }
-        res.destroy();
-    }
-});
-app.delete("/api/screenshots/file", async (req, res) => {
-    try {
-        const requestedName = getSingleQueryValue(req.query.name);
-        if (!requestedName) {
-            res.status(400).json({ error: "Missing ?name=..." });
-            return;
-        }
-        const { path: absPath } = resolveNamedImagePath(SCREENSHOTS_DIRECTORY_PATH, requestedName);
-        await fs.unlink(absPath);
-        res.setHeader("Cache-Control", "no-store");
-        res.status(204).end();
-    }
-    catch (error) {
-        const nodeError = error;
-        if (nodeError.code === "ENOENT") {
-            res.status(404).json({ error: "File not found" });
-            return;
-        }
-        const message = error instanceof Error ? error.message : "Unable to delete screenshot";
-        res.status(400).json({ error: message });
-    }
-});
 app.get("/api/text", async (req, res) => {
     try {
         const requestedPath = getSingleQueryValue(req.query.path);
@@ -930,6 +936,7 @@ app.use((error, _req, res, _next) => {
 app.listen(PORT, HOST, () => {
     console.log(`[remote-workspace] root: ${REPO_ROOT}`);
     console.log(`[remote-workspace] http://${HOST}:${PORT}`);
+    console.log(`[remote-workspace] image directories: ${IMAGE_DIRECTORY_PATHS.join(", ")}`);
     if (BASIC_AUTH_PASSWORD.length > 0) {
         console.log("[remote-workspace] basic auth: enabled");
     }

package/package.json

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

package/static/app.js

@@ -53,7 +53,6 @@ const CACHE_KEYS = {
   topLevel: `${CACHE_PREFIX}top-level`,
   searchIndex: `${CACHE_PREFIX}search-index`,
   clipboardEntries: `${CACHE_PREFIX}clipboard-entries`,
-  screenshotsEntries: `${CACHE_PREFIX}screenshots-entries`,
 };
 
 // ---------------------------------------------------------------------------
@@ -73,16 +72,13 @@ const state = {
   selectedPath: "",
   fileRequestId: 0,
   fileAbortController: null,
+  selectedPathType: "",
   clipboardRequestId: 0,
   clipboardAbortController: null,
   clipboardApiMode: "modern",
   pendingUploadFile: null,
   searchDebounceTimer: null,
   filesMobileMode: "explorer",
-  // Screenshots
-  screenshotEntries: [],
-  screenshotsRequestId: 0,
-  screenshotsAbortController: null,
 };
 
 // ---------------------------------------------------------------------------
@@ -106,9 +102,6 @@ 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");
 const viewerRefreshBtn = $("viewer-refresh-btn");
 const lightbox = $("lightbox");
 const lightboxPanel = $("lightbox-panel");
@@ -121,7 +114,6 @@ const hljsThemeLink = $("hljs-theme");
 // Tab badges
 const tabBadgeClipboard = $("tab-badge-clipboard");
 const tabBadgeFiles = $("tab-badge-files");
-const tabBadgeScreenshots = $("tab-badge-screenshots");
 
 // ---------------------------------------------------------------------------
 // Markdown + highlight.js integration
@@ -193,13 +185,6 @@ function setClipboardStatus(message, isError = false) {
     : "shrink-0 px-4 py-1 text-[11px] text-ink-500 font-mono min-h-[1.4em]";
 }
 
-function setScreenshotsStatus(message, isError = false) {
-  screenshotsStatusEl.textContent = message;
-  screenshotsStatusEl.className = isError
-    ? "shrink-0 px-4 py-1 text-[11px] text-red-400 font-mono min-h-[1.4em]"
-    : "shrink-0 px-4 py-1 text-[11px] text-ink-500 font-mono min-h-[1.4em]";
-}
-
 function refreshIcons() {
   try { lucide.createIcons(); } catch { /* icons not ready yet */ }
 }
@@ -348,12 +333,14 @@ function syncFilesLayout() {
 // ---------------------------------------------------------------------------
 const tabButtons = document.querySelectorAll(".tab-btn");
 const tabPanels = document.querySelectorAll(".tab-panel");
+const VALID_TABS = new Set(["files", "clipboard"]);
 
 function switchTab(tabName) {
-  state.activeTab = 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));
+  const nextTab = VALID_TABS.has(tabName) ? tabName : "files";
+  state.activeTab = nextTab;
+  localStorage.setItem("workspace-tab", nextTab);
+  tabPanels.forEach((p) => p.classList.toggle("hidden", p.id !== `panel-${nextTab}`));
+  tabButtons.forEach((b) => b.classList.toggle("active", b.dataset.tab === nextTab));
   syncFilesLayout();
   refreshIcons();
 }
@@ -556,12 +543,12 @@ function renderTreeNode(entry, depth, container) {
   const iconName = getFileIconName(entry.name, entry.type);
 
   const row = document.createElement("div");
-  row.className = "tree-item";
+  row.className = "tree-item flex items-center gap-1";
   row.style.setProperty("--depth", depth);
 
   const btn = document.createElement("button");
   btn.type = "button";
-  btn.className = `w-full flex items-center gap-1.5 px-2 py-[3px] text-sm rounded-md transition-colors group ${
+  btn.className = `flex-1 min-w-0 flex items-center gap-1.5 px-2 py-[3px] text-sm rounded-md transition-colors group ${
     isActive ? "bg-brand/10 text-brand font-medium" : "text-ink-300 hover:bg-ink-800"
   }`;
 
@@ -589,6 +576,22 @@ function renderTreeNode(entry, depth, container) {
   };
 
   row.appendChild(btn);
+  if (isDir) {
+    const openFolderBtn = document.createElement("button");
+    openFolderBtn.type = "button";
+    openFolderBtn.className = `shrink-0 p-1 rounded-md transition-colors ${
+      isActive
+        ? "text-brand hover:bg-brand/10"
+        : "text-ink-500 hover:text-ink-300 hover:bg-ink-800"
+    }`;
+    openFolderBtn.title = "Open folder images";
+    openFolderBtn.innerHTML = '<i data-lucide="eye" class="w-3.5 h-3.5"></i>';
+    openFolderBtn.onclick = (event) => {
+      event.stopPropagation();
+      openDirectory(entry.path).catch(handleActionError);
+    };
+    row.appendChild(openFolderBtn);
+  }
   container.appendChild(row);
 
   if (isDir && isExpanded) {
@@ -615,6 +618,19 @@ function toggleDirectory(dirPath) {
   }
 }
 
+function ensureDirectoryExpanded(dirPath) {
+  if (!state.expandedPaths.has(dirPath)) {
+    state.expandedPaths.add(dirPath);
+    if (!state.dirChildren.has(dirPath)) {
+      loadDirChildren(dirPath);
+    } else {
+      renderTree();
+    }
+    return;
+  }
+  renderTree();
+}
+
 function expandParentsOf(filePath) {
   const segments = filePath.split("/");
   let running = "";
@@ -681,11 +697,7 @@ function handleSearch(query) {
       searchResultsEl.innerHTML = "";
       expandParentsOf(result.path);
       if (result.type === "directory") {
-        if (!isDesktopLayout()) {
-          state.filesMobileMode = "explorer";
-          syncFilesLayout();
-        }
-        toggleDirectory(result.path);
+        openDirectory(result.path, { toggleExpand: false }).catch(handleActionError);
       } else {
         openFile(result.path).catch(handleActionError);
       }
@@ -714,6 +726,128 @@ searchInput.addEventListener("focus", () => {
 // ---------------------------------------------------------------------------
 // File preview
 // ---------------------------------------------------------------------------
+function fileImageUrl(entry) {
+  return appendVersionQuery(`/api/file?path=${encodeURIComponent(entry.path)}`, entry);
+}
+
+function renderDirectoryImageGallery(directoryPath, entries) {
+  if (entries.length === 0) {
+    viewer.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-ink-600">
+      <i data-lucide="image-off" class="w-10 h-10 mb-2 opacity-40"></i>
+      <p class="text-sm">No images directly in <span class="font-mono">${escapeHtml(directoryPath)}/</span></p>
+    </div>`;
+    refreshIcons();
+    return;
+  }
+
+  viewer.innerHTML = "";
+  const grid = document.createElement("div");
+  grid.className = "grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3 content-start";
+
+  for (const entry of entries) {
+    const imageUrl = fileImageUrl(entry);
+    const card = document.createElement("div");
+    card.className = "relative group border border-ink-800 rounded-lg bg-ink-900 p-1.5 flex flex-col gap-1 hover:border-ink-600 transition-colors";
+
+    const imageButton = document.createElement("button");
+    imageButton.type = "button";
+    imageButton.className = "block w-full";
+    imageButton.innerHTML = `<img alt="${escapeHtml(entry.name)}" src="${imageUrl}" loading="lazy" class="w-full h-32 object-cover rounded border border-ink-800 bg-ink-950" />`;
+    imageButton.onclick = () => openLightbox(imageUrl);
+
+    const footer = document.createElement("div");
+    footer.className = "flex items-center gap-1 min-w-0";
+    footer.innerHTML = `<span class="text-[11px] font-mono text-ink-500 truncate flex-1">${escapeHtml(entry.name)}</span>`;
+    if (entry.size) {
+      footer.innerHTML += `<span class="text-[10px] font-mono text-ink-600 shrink-0">${formatBytes(entry.size)}</span>`;
+    }
+
+    const copyBtn = document.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "shrink-0 p-0.5 text-ink-500 hover:text-brand rounded transition-colors ml-1";
+    copyBtn.title = "Copy path";
+    copyBtn.innerHTML = `<i data-lucide="copy" class="w-3 h-3"></i>`;
+    copyBtn.onclick = async (e) => {
+      e.stopPropagation();
+      try {
+        await navigator.clipboard.writeText(entry.path);
+        copyBtn.innerHTML = `<i data-lucide="check" class="w-3 h-3 text-green-400"></i>`;
+        refreshIcons();
+        setTimeout(() => {
+          copyBtn.innerHTML = `<i data-lucide="copy" class="w-3 h-3"></i>`;
+          refreshIcons();
+        }, 1500);
+      } catch {
+        setStatus("Copy failed — clipboard access denied.", true);
+      }
+    };
+    footer.appendChild(copyBtn);
+
+    const openBtn = document.createElement("button");
+    openBtn.type = "button";
+    openBtn.className = "shrink-0 p-0.5 text-ink-500 hover:text-brand rounded transition-colors";
+    openBtn.title = "Open in file viewer";
+    openBtn.innerHTML = `<i data-lucide="maximize-2" class="w-3 h-3"></i>`;
+    openBtn.onclick = (e) => {
+      e.stopPropagation();
+      openFile(entry.path).catch(handleActionError);
+    };
+    footer.appendChild(openBtn);
+
+    card.appendChild(imageButton);
+    card.appendChild(footer);
+    grid.appendChild(card);
+  }
+
+  viewer.appendChild(grid);
+  refreshIcons();
+}
+
+async function openDirectory(dirPath, options = {}) {
+  const requestId = ++state.fileRequestId;
+  if (state.fileAbortController) state.fileAbortController.abort();
+  const controller = new AbortController();
+  state.fileAbortController = controller;
+  const toggleExpand = options.toggleExpand !== false;
+
+  state.selectedPath = dirPath;
+  state.selectedPathType = "directory";
+  viewerRefreshBtn.classList.remove("hidden");
+  localStorage.removeItem("workspace-file");
+  expandParentsOf(dirPath);
+  if (toggleExpand) {
+    toggleDirectory(dirPath);
+  } else {
+    ensureDirectoryExpanded(dirPath);
+  }
+  renderTree();
+  if (!isDesktopLayout()) {
+    state.filesMobileMode = "viewer";
+    syncFilesLayout();
+  }
+
+  viewerTitle.textContent = `${dirPath}/`;
+  setStatus(`Listing images in ${dirPath}/...`);
+
+  const response = await fetch(`/api/list?path=${encodeURIComponent(dirPath)}`, {
+    signal: controller.signal,
+  });
+  const data = await readJsonResponse(response);
+  if (requestId !== state.fileRequestId) return;
+
+  if (!response.ok) {
+    viewer.innerHTML = `<p class="text-red-400 text-sm">${escapeHtml(data.error || "Failed to open folder.")}</p>`;
+    setStatus("Folder open failed", true);
+    return;
+  }
+
+  const imageEntries = (data.entries || []).filter(
+    (entry) => entry.type === "file" && isImagePath(entry.path || entry.name),
+  );
+  renderDirectoryImageGallery(dirPath, imageEntries);
+  setStatus(`${imageEntries.length} image(s) in ${dirPath}/`);
+}
+
 async function openFile(filePath) {
   const requestId = ++state.fileRequestId;
   if (state.fileAbortController) state.fileAbortController.abort();
@@ -721,6 +855,7 @@ async function openFile(filePath) {
   state.fileAbortController = controller;
 
   state.selectedPath = filePath;
+  state.selectedPathType = "file";
   localStorage.setItem("workspace-file", filePath);
   viewerRefreshBtn.classList.remove("hidden");
   expandParentsOf(filePath);
@@ -978,138 +1113,6 @@ async function loadClipboardImages(options = {}) {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Screenshots
-// ---------------------------------------------------------------------------
-function screenshotImageUrl(entry) {
-  return appendVersionQuery(`/api/screenshots/file?name=${encodeURIComponent(entry.name)}`, entry);
-}
-
-function renderScreenshots(entries) {
-  screenshotsGrid.innerHTML = "";
-  if (entries.length === 0) {
-    screenshotsGrid.innerHTML = '<p class="text-sm text-ink-500 col-span-full py-8 text-center">No screenshots in .playwright-mcp/ yet.</p>';
-    return;
-  }
-
-  for (const entry of entries) {
-    const container = document.createElement("div");
-    container.className = "relative group border border-ink-800 rounded-lg bg-ink-900 p-1.5 flex flex-col gap-1 hover:border-ink-600 transition-colors";
-
-    const imgBtn = document.createElement("button");
-    imgBtn.type = "button";
-    imgBtn.className = "block w-full";
-    const imageUrl = screenshotImageUrl(entry);
-    imgBtn.innerHTML = `<img alt="${escapeHtml(entry.name)}" src="${imageUrl}" loading="lazy" class="w-full h-32 object-cover rounded border border-ink-800 bg-ink-950" />`;
-    imgBtn.onclick = () => openLightbox(imageUrl);
-
-    const footer = document.createElement("div");
-    footer.className = "flex items-center gap-1 min-w-0";
-
-    // Parse timestamp from filename (page-YYYY-MM-DDTHH-MM-SS-mmmZ.png)
-    const tsMatch = entry.name.match(/(\d{4}-\d{2}-\d{2})T(\d{2})-(\d{2})-(\d{2})/);
-    const timeLabel = tsMatch ? `${tsMatch[1]} ${tsMatch[2]}:${tsMatch[3]}:${tsMatch[4]}` : entry.name;
-
-    footer.innerHTML = `<span class="text-[11px] font-mono text-ink-500 truncate flex-1">${escapeHtml(timeLabel)}</span>`;
-
-    if (entry.size) {
-      footer.innerHTML += `<span class="text-[10px] font-mono text-ink-600 shrink-0">${formatBytes(entry.size)}</span>`;
-    }
-
-    const copyBtn = document.createElement("button");
-    copyBtn.type = "button";
-    copyBtn.className = "shrink-0 p-0.5 text-ink-500 hover:text-brand rounded transition-colors ml-1";
-    copyBtn.title = "Copy path";
-    copyBtn.innerHTML = `<i data-lucide="copy" class="w-3 h-3"></i>`;
-    copyBtn.onclick = async (e) => {
-      e.stopPropagation();
-      try {
-        await navigator.clipboard.writeText(`.playwright-mcp/${entry.name}`);
-        copyBtn.innerHTML = `<i data-lucide="check" class="w-3 h-3 text-green-400"></i>`;
-        refreshIcons();
-        setTimeout(() => {
-          copyBtn.innerHTML = `<i data-lucide="copy" class="w-3 h-3"></i>`;
-          refreshIcons();
-        }, 1500);
-      } catch {
-        setScreenshotsStatus("Copy failed — clipboard access denied.", true);
-      }
-    };
-    footer.appendChild(copyBtn);
-
-    const deleteBtn = document.createElement("button");
-    deleteBtn.type = "button";
-    deleteBtn.className = "shrink-0 p-0.5 text-ink-500 hover:text-red-400 rounded transition-colors";
-    deleteBtn.title = "Delete image";
-    deleteBtn.innerHTML = `<i data-lucide="trash-2" class="w-3 h-3"></i>`;
-    deleteBtn.onclick = async (e) => {
-      e.stopPropagation();
-      const confirmed = window.confirm(`Delete .playwright-mcp/${entry.name}?`);
-      if (!confirmed) return;
-      try {
-        await deleteScreenshotImage(entry.name);
-      } catch (error) {
-        setScreenshotsStatus(toErrorMessage(error), true);
-      }
-    };
-    footer.appendChild(deleteBtn);
-
-    container.appendChild(imgBtn);
-    container.appendChild(footer);
-    screenshotsGrid.appendChild(container);
-  }
-  refreshIcons();
-}
-
-async function loadScreenshots(options = {}) {
-  const preferCache = options.preferCache !== false;
-  const requestId = ++state.screenshotsRequestId;
-  if (state.screenshotsAbortController) state.screenshotsAbortController.abort();
-  const controller = new AbortController();
-  state.screenshotsAbortController = controller;
-  const cachedEntries = preferCache ? readCachedValue(CACHE_KEYS.screenshotsEntries) : null;
-
-  try {
-    setScreenshotsStatus("Loading...");
-    if (cachedEntries && Array.isArray(cachedEntries.entries)) {
-      state.screenshotEntries = cachedEntries.entries;
-      tabBadgeScreenshots.textContent = cachedEntries.entries.length ? `${cachedEntries.entries.length}` : "";
-      renderScreenshots(cachedEntries.entries);
-      setScreenshotsStatus(`${cachedEntries.entries.length} cached screenshot(s) (refreshing...)`);
-    }
-
-    const res = await fetch("/api/screenshots/list", { signal: controller.signal });
-    let data;
-    try { data = await readJsonResponse(res); } catch (error) {
-      if (isRouteMissingResponse(res, error)) {
-        // Server doesn't have screenshots endpoint yet — show empty
-        if (requestId !== state.screenshotsRequestId) return;
-        tabBadgeScreenshots.textContent = "";
-        renderScreenshots([]);
-        setScreenshotsStatus("Screenshots API not available");
-        return;
-      }
-      throw error;
-    }
-    if (!res.ok) throw new Error(data.error || "Unable to load screenshots");
-    if (requestId !== state.screenshotsRequestId) return;
-
-    const entries = data.entries || [];
-    state.screenshotEntries = entries;
-    writeCachedValue(CACHE_KEYS.screenshotsEntries, { entries });
-    tabBadgeScreenshots.textContent = entries.length ? `${entries.length}` : "";
-    renderScreenshots(entries);
-    setScreenshotsStatus(`${entries.length} screenshot(s)`);
-  } catch (error) {
-    if (isAbortError(error)) return;
-    if (cachedEntries && Array.isArray(cachedEntries.entries)) {
-      setScreenshotsStatus(`Using cached screenshots: ${toErrorMessage(error)}`, true);
-      return;
-    }
-    setScreenshotsStatus(toErrorMessage(error), true);
-  }
-}
-
 async function deleteClipboardImage(name) {
   setClipboardStatus(`Deleting ${name}...`);
   const response = await fetch(`/api/clipboard/file?name=${encodeURIComponent(name)}`, {
@@ -1124,20 +1127,6 @@ async function deleteClipboardImage(name) {
   setClipboardStatus(`Deleted ${name}.`);
 }
 
-async function deleteScreenshotImage(name) {
-  setScreenshotsStatus(`Deleting ${name}...`);
-  const response = await fetch(`/api/screenshots/file?name=${encodeURIComponent(name)}`, {
-    method: "DELETE",
-  });
-  const data = await readJsonResponse(response);
-  if (!response.ok) {
-    throw new Error(data.error || "Delete failed");
-  }
-  clearCachedValue(CACHE_KEYS.screenshotsEntries);
-  await loadScreenshots({ preferCache: false });
-  setScreenshotsStatus(`Deleted ${name}.`);
-}
-
 // ---------------------------------------------------------------------------
 // Upload logic
 // ---------------------------------------------------------------------------
@@ -1271,12 +1260,13 @@ treeRefreshBtn.onclick = () => {
   loadTopLevel({ preferCache: false }).catch(handleActionError);
   loadSearchIndex({ preferCache: false });
 };
-screenshotsRefreshBtn.onclick = () => {
-  clearCachedValue(CACHE_KEYS.screenshotsEntries);
-  loadScreenshots({ preferCache: false }).catch(handleActionError);
-};
 viewerRefreshBtn.onclick = () => {
-  if (state.selectedPath) openFile(state.selectedPath).catch(handleActionError);
+  if (!state.selectedPath) return;
+  if (state.selectedPathType === "directory") {
+    openDirectory(state.selectedPath, { toggleExpand: false }).catch(handleActionError);
+    return;
+  }
+  openFile(state.selectedPath).catch(handleActionError);
 };
 if (mobileExplorerBackBtn) {
   mobileExplorerBackBtn.onclick = () => {
@@ -1290,7 +1280,7 @@ syncFilesLayout();
 // ---------------------------------------------------------------------------
 // Init
 // ---------------------------------------------------------------------------
-Promise.all([loadClipboardImages(), loadTopLevel(), loadScreenshots()]).then(() => {
+Promise.all([loadClipboardImages(), loadTopLevel()]).then(() => {
   // Restore last opened file after tree is loaded
   const lastFile = localStorage.getItem("workspace-file");
   if (lastFile) openFile(lastFile).catch(handleActionError);

package/static/index.html

@@ -142,19 +142,6 @@
         </div>
       </section>
 
-      <!-- Tab: Screenshots -->
-      <section id="panel-screenshots" 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-2.5 flex items-center gap-2">
-          <span class="text-xs text-ink-500 font-mono">.playwright-mcp/</span>
-          <div class="flex-1"></div>
-          <button id="screenshots-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">
-            <i data-lucide="refresh-cw" class="w-4 h-4"></i>
-          </button>
-        </div>
-        <div id="screenshots-status" class="shrink-0 px-4 py-1 text-[11px] text-ink-500 font-mono min-h-[1.4em]"></div>
-        <div id="screenshots-grid" class="flex-1 overflow-y-auto overscroll-contain p-3 grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3 content-start"></div>
-      </section>
-
       <!-- Lightbox overlay -->
       <div id="lightbox" class="hidden absolute inset-0 z-50 bg-ink-950/90">
         <!-- Modal panel -->
@@ -186,11 +173,6 @@
         <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>
-        <span id="tab-badge-screenshots" class="text-[9px] font-mono text-ink-600"></span>
-      </button>
     </nav>
 
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>