@youtyan/code-viewer 0.1.26 → 0.1.27

package/README.md

@@ -80,30 +80,21 @@ the full non-virtual view.
 
 ## Uploads
 
-File uploads are disabled by default. Enable them only for trusted local
-worktrees:
-
-```sh
-code-viewer --cwd /path/to/repo --allow-upload
-```
+File uploads are available for the local worktree target. Git tree views remain
+read-only.
 
-Or place `.code-viewer.json` at the repository root:
+Place `.code-viewer.json` at the repository root to configure repository scope
+defaults:
 
 ```json
 {
   "version": 1,
-  "upload": {
-    "enabled": true
-  },
   "scope": {
     "omitDirs": ["node_modules", "dist", "build"]
   }
 }
 ```
 
-Uploads are accepted only for the worktree target. Git tree views remain
-read-only.
-
 Repository scope settings control recursive repository browsing and search scope
 for the left tree, Ctrl+K file palette, and Ctrl+G grep palette. The in-app Scope
 Settings popover stores only a browser-local override in localStorage; edit

package/dist/code-viewer.js

@@ -19,6 +19,23 @@ import {
 import { homedir } from "node:os";
 import { basename as basename2, dirname as dirname2, extname, join as join4, relative } from "node:path";
 
+// web-src/directory-name.ts
+function normalizeNewDirectoryName(name) {
+  if (typeof name !== "string")
+    return null;
+  const trimmed = name.trim();
+  if (!trimmed || trimmed.length > 180)
+    return null;
+  if (trimmed.includes("/") || trimmed.includes("\\") || trimmed.includes("\x00") || Array.from(trimmed).some((char) => {
+    const code = char.charCodeAt(0);
+    return code < 32 || code === 127;
+  }))
+    return null;
+  if (trimmed === "." || trimmed === ".." || trimmed.toLowerCase() === ".git")
+    return null;
+  return trimmed;
+}
+
 // web-src/routes.ts
 var SPA_PATHS = ["/todif", "/todiff", "/file", "/help"];
 var APP_ENTRY_PATHS = ["/", "/index.html"];
@@ -1236,8 +1253,8 @@ var SIZE_LARGE = 20000;
 var LINE_INDEX_MIN_START = 1e4;
 var LINE_INDEX_MAX_FILE_BYTES = 256 * 1024 * 1024;
 var BLOB_LINE_CACHE_MAX_BYTES = 128 * 1024 * 1024;
-var MAX_UPLOAD_FILE_BYTES = 10 * 1024 * 1024;
-var MAX_UPLOAD_TOTAL_BYTES = 50 * 1024 * 1024;
+var MAX_UPLOAD_FILE_BYTES = 512 * 1024 * 1024;
+var MAX_UPLOAD_TOTAL_BYTES = 1024 * 1024 * 1024;
 var MAX_UPLOAD_BODY_BYTES = MAX_UPLOAD_TOTAL_BYTES + 1024 * 1024;
 var MAX_UPLOAD_FILES = 50;
 var SAFE_UPLOAD_EXTENSIONS = new Set([
@@ -1255,7 +1272,19 @@ var SAFE_UPLOAD_EXTENSIONS = new Set([
   ".jpeg",
   ".gif",
   ".webp",
+  ".svg",
   ".pdf",
+  ".mp4",
+  ".mov",
+  ".m4v",
+  ".webm",
+  ".mp3",
+  ".wav",
+  ".m4a",
+  ".aac",
+  ".flac",
+  ".ogg",
+  ".zip",
   ".ts",
   ".tsx",
   ".js",
@@ -1268,12 +1297,11 @@ var generation = 1;
 var cwd = repoRoot(process.cwd()) || process.cwd();
 var cliArgs = DEFAULT_ARGS;
 var listenPort = 0;
-var allowUpload = false;
-var uploadAllowedByCli = false;
 var openAfterStart = false;
 var scopeOmitDirNames = DEFAULT_WORKTREE_OMIT_DIR_NAMES;
 var scopeOmitDirCliOverride = null;
 var scopeExcludeNames = DEFAULT_EXCLUDE_NAMES;
+var uploadDisabledByConfig = false;
 var rgAvailableCache = null;
 var enc = new TextEncoder;
 var sseClients = new Set;
@@ -1326,10 +1354,7 @@ Examples:
       listenPort = parsed;
     } else if (arg === "--open") {
       openAfterStart = true;
-    } else if (arg === "--allow-upload") {
-      allowUpload = true;
-      uploadAllowedByCli = true;
-    } else if (arg === "--scope-omit-dir") {
+    } else if (arg === "--allow-upload") {} else if (arg === "--scope-omit-dir") {
       const next = process.argv[++i];
       if (!next) {
         console.error("--scope-omit-dir requires a directory name");
@@ -1345,10 +1370,9 @@ Examples:
   }
   if (rest.length)
     cliArgs = rest;
-  if (!uploadAllowedByCli)
-    allowUpload = loadProjectConfigUploadEnabled();
   const configScopeOmitDirs = loadProjectConfigScopeOmitDirs();
   const configScopeExcludeNames = loadProjectConfigScopeExcludeNames();
+  uploadDisabledByConfig = loadProjectConfigUploadDisabled();
   if (scopeOmitDirCliOverride) {
     scopeOmitDirNames = scopeOmitDirCliOverride;
   } else if (configScopeOmitDirs) {
@@ -1680,9 +1704,9 @@ function loadProjectConfig() {
     return null;
   }
 }
-function loadProjectConfigUploadEnabled() {
+function loadProjectConfigUploadDisabled() {
   const config = loadProjectConfig();
-  return config?.upload?.enabled === true;
+  return config?.upload?.enabled === false;
 }
 function loadProjectConfigScopeOmitDirs() {
   const config = loadProjectConfig();
@@ -1873,7 +1897,7 @@ function handleTree(url) {
     branch: currentBranch(cwd) || undefined,
     entries: recursive ? entries : entries.map((entry) => attachTreeEntryMetadata(target, entry)),
     readme: readReadme(target, path),
-    upload_enabled: allowUpload && (target === "worktree" || target === "")
+    upload_enabled: !uploadDisabledByConfig && (target === "worktree" || target === "")
   });
 }
 function handleSettings() {
@@ -2430,24 +2454,26 @@ function isForbiddenUploadName(name) {
   return lower.startsWith(".") || lower === "package.json" || lower === "package-lock.json" || lower === "bun.lock" || lower === "bun.lockb" || lower === "yarn.lock" || lower === "pnpm-lock.yaml" || lower === "makefile" || lower === "dockerfile" || lower.endsWith(".dockerfile") || /^(tsconfig|jsconfig|bunfig|vercel|netlify|wrangler|next|vite|webpack|rollup|esbuild|astro|svelte|tailwind|postcss|babel|prettier|eslint)\./.test(lower) || lower.endsWith(".config.js") || lower.endsWith(".config.jsx") || lower.endsWith(".config.ts") || lower.endsWith(".config.tsx") || lower.endsWith(".config.mjs") || lower.endsWith(".config.cjs") || lower.includes("credential") || lower.includes("secret") || lower.endsWith(".exe") || lower.endsWith(".dll") || lower.endsWith(".dylib") || lower.endsWith(".so") || lower.endsWith(".sh") || lower.endsWith(".bash") || lower.endsWith(".zsh") || lower.endsWith(".fish") || lower.endsWith(".ps1") || lower.endsWith(".bat") || lower.endsWith(".cmd");
 }
 function safeUploadFileName(name) {
-  if (!name || name.includes("\x00") || name.includes("/") || name.includes("\\"))
+  const trimmed = name.trim();
+  if (!trimmed || trimmed.length > 180 || trimmed.includes("\x00") || trimmed.includes("/") || trimmed.includes("\\") || Array.from(trimmed).some((char) => {
+    const code = char.charCodeAt(0);
+    return code < 32 || code === 127;
+  }))
     return null;
-  if (name === "." || name === "..")
+  if (trimmed === "." || trimmed === "..")
     return null;
-  if (!/^[A-Za-z0-9][A-Za-z0-9._ -]{0,180}$/.test(name))
+  if (isGitInternalPath(trimmed) || isForbiddenUploadName(trimmed))
     return null;
-  if (isGitInternalPath(name) || isForbiddenUploadName(name))
+  if (!SAFE_UPLOAD_EXTENSIONS.has(extname(trimmed).toLowerCase()))
     return null;
-  if (!SAFE_UPLOAD_EXTENSIONS.has(extname(name).toLowerCase()))
-    return null;
-  return name;
+  return trimmed;
 }
 function uploadOpenFlags() {
   return constants.O_WRONLY | constants.O_CREAT | constants.O_EXCL | (constants.O_NOFOLLOW || 0);
 }
 async function handleUploadFiles(req) {
-  if (!allowUpload)
-    return text("upload disabled", 403);
+  if (uploadDisabledByConfig)
+    return text("upload disabled by project config", 403);
   if (req.method !== "POST")
     return text("method not allowed", 405);
   if (!sideEffectRequestAllowed(req))
@@ -2778,6 +2804,61 @@ async function handleTrashPath(req) {
   sendSse("update");
   return json({ ok: true, generation, undo });
 }
+async function handleCreateDirectory(req) {
+  if (req.method !== "POST")
+    return text("method not allowed", 405);
+  if (!sideEffectRequestAllowed(req))
+    return text("forbidden", 403);
+  const contentType = req.headers.get("content-type") || "";
+  if (!/^application\/json(?:;|$)/i.test(contentType))
+    return text("unsupported media type", 415);
+  const lengthHeader = req.headers.get("content-length");
+  const length = Number(lengthHeader || "0");
+  if (lengthHeader && (!Number.isFinite(length) || length < 0))
+    return text("invalid content length", 400);
+  if (length > 2048)
+    return text("payload too large", 413);
+  let body = {};
+  try {
+    const raw = await req.text();
+    if (raw.length > 2048)
+      return text("payload too large", 413);
+    body = JSON.parse(raw);
+  } catch {
+    return text("invalid json", 400);
+  }
+  const dir = typeof body.dir === "string" ? body.dir.trim().replace(/^\/+|\/+$/g, "") : "";
+  const name = normalizeNewDirectoryName(body.name);
+  if (!safeRepoPath(dir))
+    return text("invalid dir", 400);
+  if (dir && isGitInternalPath(dir))
+    return text("forbidden", 403);
+  if (!name)
+    return text("invalid name", 400);
+  const parent = safeOpenWorktreePath(dir);
+  if (!parent)
+    return text("not found", 404);
+  const stats = statSync(parent);
+  if (!stats.isDirectory())
+    return text("not a directory", 400);
+  const targetPath = dir ? `${dir}/${name}` : name;
+  if (!safeRepoPath(targetPath) || isGitInternalPath(targetPath))
+    return text("invalid target", 400);
+  const target = join4(parent, name);
+  if (existsSync3(target))
+    return text("already exists", 409);
+  try {
+    mkdirSync(target, { recursive: false });
+  } catch (error) {
+    if (error.code === "EEXIST")
+      return text("already exists", 409);
+    return text("create failed", 500);
+  }
+  generation++;
+  clearMutableCaches();
+  sendSse("update");
+  return json({ ok: true, path: targetPath, generation });
+}
 async function handleRestoreTrash(req) {
   if (req.method !== "POST")
     return text("method not allowed", 405);
@@ -2864,6 +2945,8 @@ var server = await startServer({
       return handleTrashPath(req);
     if (url.pathname === "/_restore_trash")
       return handleRestoreTrash(req);
+    if (url.pathname === "/_create_directory")
+      return handleCreateDirectory(req);
     if (url.pathname === "/_upload_files")
       return handleUploadFiles(req);
     if (url.pathname === "/_refs")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "Local browser-based code and git diff viewer",
   "type": "module",
   "bin": {

package/web/app.js

@@ -36,6 +36,23 @@
     };
   }
 
+  // web-src/directory-name.ts
+  function normalizeNewDirectoryName(name) {
+    if (typeof name !== "string")
+      return null;
+    const trimmed = name.trim();
+    if (!trimmed || trimmed.length > 180)
+      return null;
+    if (trimmed.includes("/") || trimmed.includes("\\") || trimmed.includes("\x00") || Array.from(trimmed).some((char) => {
+      const code = char.charCodeAt(0);
+      return code < 32 || code === 127;
+    }))
+      return null;
+    if (trimmed === "." || trimmed === ".." || trimmed.toLowerCase() === ".git")
+      return null;
+    return trimmed;
+  }
+
   // web-src/expand-logic.ts
   function initExpandState(prevHunkEndNew, hunkNewStart) {
     return {
@@ -145,6 +162,12 @@
   function filePathClipboardText(path) {
     return path || "";
   }
+  function fileNameClipboardText(path) {
+    if (!path)
+      return "";
+    const parts = path.split("/").filter(Boolean);
+    return parts[parts.length - 1] || "";
+  }
 
   // web-src/focus-scope.ts
   function isEditableKeyTarget(target) {
@@ -6578,8 +6601,8 @@ ${frontmatter.yaml}
       if (!section)
         return;
       e2.preventDefault();
-      section.scrollIntoView({ block: "start", behavior: "smooth" });
       history.replaceState(history.state, "", `#${encodeURIComponent(section.id)}`);
+      scrollMarkdownSectionIntoView(section, "smooth");
     });
     const controller = new AbortController;
     const scrollRoot = document.scrollingElement || document.documentElement;
@@ -6596,8 +6619,9 @@ ${frontmatter.yaml}
         return;
       }
       let active = entries[0];
+      const activeThreshold = markdownAnchorOffset() + 40;
       for (const entry of entries) {
-        if (entry.target.getBoundingClientRect().top <= 96)
+        if (entry.target.getBoundingClientRect().top <= activeThreshold)
           active = entry;
         else
           break;
@@ -6622,9 +6646,43 @@ ${frontmatter.yaml}
     setTimeout(() => {
       if (!root.isConnected)
         return;
+      scrollInitialMarkdownHash(root);
       update();
     }, 0);
   }
+  function scrollInitialMarkdownHash(root) {
+    if (!location.hash)
+      return;
+    const id = decodeHashFragment(location.hash);
+    const section = root.querySelector(`#${CSS.escape(id)}`);
+    if (!section)
+      return;
+    scrollMarkdownSectionIntoView(section, "auto");
+  }
+  function decodeHashFragment(hash) {
+    const value = hash.startsWith("#") ? hash.slice(1) : hash;
+    try {
+      return decodeURIComponent(value);
+    } catch {
+      return value;
+    }
+  }
+  function scrollMarkdownSectionIntoView(section, behavior) {
+    const top = section.getBoundingClientRect().top + window.scrollY - markdownAnchorOffset() - 12;
+    window.scrollTo({ top: Math.max(0, top), behavior });
+  }
+  function markdownAnchorOffset() {
+    const bottoms = Array.from(document.querySelectorAll("#global-header, .gdp-file-detail-sticky")).map((element) => {
+      const style = getComputedStyle(element);
+      if (style.display === "none" || style.visibility === "hidden")
+        return 0;
+      const rect = element.getBoundingClientRect();
+      if (rect.height <= 0)
+        return 0;
+      return rect.bottom > 0 ? rect.bottom : 0;
+    }).filter((bottom) => Number.isFinite(bottom));
+    return Math.max(0, ...bottoms);
+  }
   function keepTocLinkVisible(toc, link2) {
     if (toc.scrollHeight <= toc.clientHeight)
       return;
@@ -6894,6 +6952,8 @@ ${frontmatter.yaml}
     ];
     const FILE_16_PATH = "M2 1.75C2 .784 2.784 0 3.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 8 4.25V1.5Zm5.75.062V4.25c0 .138.112.25.25.25h2.688Z";
     const OPEN_EXTERNAL_16_PATH = "M3.75 2A1.75 1.75 0 0 0 2 3.75v8.5C2 13.216 2.784 14 3.75 14h8.5A1.75 1.75 0 0 0 14 12.25v-3.5a.75.75 0 0 0-1.5 0v3.5a.25.25 0 0 1-.25.25h-8.5a.25.25 0 0 1-.25-.25v-8.5a.25.25 0 0 1 .25-.25h3.5a.75.75 0 0 0 0-1.5h-3.5Zm6.5 0a.75.75 0 0 0 0 1.5h1.19L7.72 7.22a.749.749 0 1 0 1.06 1.06l3.72-3.72v1.19a.75.75 0 0 0 1.5 0v-3A.75.75 0 0 0 13.25 2h-3Z";
+    const PLUS_16_PATH = "M7.75 2a.75.75 0 0 1 .75.75V7.5h4.75a.75.75 0 0 1 0 1.5H8.5v4.75a.75.75 0 0 1-1.5 0V9H2.25a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z";
+    const TRASH_16_PATH = "M6.5 1.75A1.75 1.75 0 0 1 8.25 0h1.5A1.75 1.75 0 0 1 11.5 1.75V2h3.75a.75.75 0 0 1 0 1.5h-.75v10.75A1.75 1.75 0 0 1 12.75 16h-9.5A1.75 1.75 0 0 1 1.5 14.25V3.5H.75a.75.75 0 0 1 0-1.5H4.5v-.25ZM6 2h4v-.25a.25.25 0 0 0-.25-.25h-1.5a.25.25 0 0 0-.25.25V2Zm-3 1.5v10.75c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V3.5Zm3 2.25a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 6 5.75Zm4 0a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 10 5.75Z";
     const GIT_BRANCH_16_PATH = "M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z";
     const TRIANGLE_DOWN_16_PATH = "m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z";
     const SIDEBAR_SHOW_16_PATHS = [
@@ -6931,6 +6991,7 @@ ${frontmatter.yaml}
     let sourceShikiLoadPromise = null;
     let highlightConfigured = false;
     let PROJECT_NAME = "";
+    let creatingDirectory = false;
     let REPO_SIDEBAR_REF = null;
     let REPO_SIDEBAR_LOAD_REF = null;
     let REPO_SIDEBAR_LOAD = null;
@@ -7276,6 +7337,11 @@ ${frontmatter.yaml}
         return;
       PROJECT_NAME = project;
       document.title = `${project} - code viewer`;
+      const projectTitle = document.querySelector("#project-title");
+      if (projectTitle) {
+        projectTitle.textContent = project;
+        projectTitle.title = project;
+      }
     }
     function savedScopeOmitDirs() {
       const raw = localStorage.getItem(scopeOmitDirsStorageKey());
@@ -7850,6 +7916,7 @@ ${frontmatter.yaml}
           li.className = "tree-dir";
           li.tabIndex = -1;
           li.dataset.dirpath = dir.path;
+          li.dataset.type = "tree";
           if (dir.children_omitted_reason)
             li.dataset.childrenOmittedReason = dir.children_omitted_reason;
           if (dir.explicit)
@@ -7937,6 +8004,7 @@ ${frontmatter.yaml}
           li.className = "tree-file";
           li.tabIndex = -1;
           li.dataset.path = f2.path;
+          li.dataset.type = "blob";
           li.classList.toggle("viewed", !onFileClick && STATE.viewedFiles.has(f2.path));
           li.style.setProperty("--lvl-pad", `${12 + depth * 14}px`);
           const spacer = document.createElement("span");
@@ -7995,6 +8063,7 @@ ${frontmatter.yaml}
       li.className = "tree-dir";
       li.tabIndex = -1;
       li.dataset.dirpath = dir.path;
+      li.dataset.type = "tree";
       if (dir.children_omitted_reason)
         li.dataset.childrenOmittedReason = dir.children_omitted_reason;
       if (dir.explicit)
@@ -8077,6 +8146,7 @@ ${frontmatter.yaml}
       li.className = "tree-file";
       li.tabIndex = -1;
       li.dataset.path = f2.path;
+      li.dataset.type = "blob";
       li.classList.toggle("viewed", !onFileClick && STATE.viewedFiles.has(f2.path));
       li.classList.toggle("hidden-by-tests", STATE.hideTests && TEST_RE.test(f2.path || ""));
       li.style.setProperty("--lvl-pad", `${12 + depth * 14}px`);
@@ -9084,6 +9154,102 @@ ${frontmatter.yaml}
       createTrashDialog("Trash failed", message, [ok]);
       ok.focus();
     }
+    function showCreateDirectoryError(message) {
+      const ok = document.createElement("button");
+      ok.type = "button";
+      ok.className = "gdp-btn gdp-btn-sm";
+      ok.textContent = "OK";
+      ok.addEventListener("click", closeTrashDialog);
+      createTrashDialog("New folder failed", message, [ok]);
+      ok.focus();
+    }
+    function askNewDirectoryName(path, focusReturnTarget) {
+      return new Promise((resolve) => {
+        const previousFocus = focusReturnTarget || document.activeElement;
+        const cancel = document.createElement("button");
+        cancel.type = "button";
+        cancel.className = "gdp-btn gdp-btn-sm";
+        cancel.textContent = "Cancel";
+        const create = document.createElement("button");
+        create.type = "button";
+        create.className = "gdp-btn gdp-btn-sm";
+        create.textContent = "Create";
+        const input = document.createElement("input");
+        input.className = "gdp-create-dir-input";
+        input.type = "text";
+        input.autocomplete = "off";
+        input.placeholder = "Folder name";
+        input.setAttribute("aria-label", "Folder name");
+        const error2 = document.createElement("div");
+        error2.className = "gdp-create-dir-error";
+        error2.setAttribute("role", "alert");
+        const syncValidity = () => {
+          const valid = !!normalizeNewDirectoryName(input.value);
+          create.disabled = !valid;
+          error2.textContent = input.value && !valid ? "Use a folder name without slashes, control characters, . or .." : "";
+          return valid;
+        };
+        const done = (name) => {
+          document.removeEventListener("keydown", onKeydown);
+          closeTrashDialog();
+          previousFocus?.focus?.();
+          resolve(name);
+        };
+        const submit = () => {
+          const name = normalizeNewDirectoryName(input.value);
+          if (!name) {
+            syncValidity();
+            input.focus();
+            return;
+          }
+          done(name);
+        };
+        const onKeydown = (event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            done(null);
+            return;
+          }
+          if (event.isComposing || event.keyCode === 229)
+            return;
+          if (event.key === "Enter") {
+            event.preventDefault();
+            submit();
+            return;
+          }
+          if (event.key !== "Tab")
+            return;
+          const focusables = [input, cancel, create];
+          const index = focusables.indexOf(document.activeElement);
+          if (index < 0) {
+            event.preventDefault();
+            focusables[0].focus();
+            return;
+          }
+          if (event.shiftKey && index <= 0) {
+            event.preventDefault();
+            focusables[focusables.length - 1].focus();
+          } else if (!event.shiftKey && index === focusables.length - 1) {
+            event.preventDefault();
+            focusables[0].focus();
+          }
+        };
+        cancel.addEventListener("click", () => done(null));
+        create.addEventListener("click", submit);
+        input.addEventListener("input", syncValidity);
+        create.disabled = true;
+        const backdrop = createTrashDialog("New Folder", `Create a folder in "${path || PROJECT_NAME || "repository"}".`, [cancel, create]);
+        const body = backdrop.querySelector(".gdp-trash-dialog-body");
+        body?.append(input, error2);
+        backdrop.addEventListener("pointerdown", (event) => {
+          if (event.target === backdrop)
+            done(null);
+        });
+        document.addEventListener("keydown", onKeydown);
+        input.focus();
+      });
+    }
     async function moveRepoPathToTrash(path) {
       const res = await fetch("/_trash_path", {
         method: "POST",
@@ -9102,6 +9268,32 @@ ${frontmatter.yaml}
         UNDO_STACK.unshift(body.undo);
       return true;
     }
+    async function requestCreateDirectory(path, onCreated, options = {}) {
+      if (creatingDirectory)
+        return;
+      const name = await askNewDirectoryName(path, options.focusReturnTarget);
+      if (!name)
+        return;
+      creatingDirectory = true;
+      try {
+        const res = await fetch("/_create_directory", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Code-Viewer-Action": "1"
+          },
+          body: JSON.stringify({ dir: path, name })
+        });
+        if (!res.ok) {
+          showCreateDirectoryError(`Failed to create "${name}": ${await res.text()}`);
+          return;
+        }
+        const body = await res.json();
+        onCreated(body.path || (path ? `${path}/${name}` : name));
+      } finally {
+        creatingDirectory = false;
+      }
+    }
     async function runUndoAction(action) {
       if (action.type !== "trash")
         return false;
@@ -9140,13 +9332,47 @@ ${frontmatter.yaml}
     function canTrashWorktreeRef(ref) {
       return ref === "worktree" || ref === "";
     }
-    function showRepoContextMenu(event, entry, ref, onDeleted) {
+    function parentRepoPath(path) {
+      return path.split("/").slice(0, -1).join("/");
+    }
+    async function copyRepoContextText(text2) {
+      if (!text2)
+        return;
+      await navigator.clipboard.writeText(text2);
+    }
+    function createCopyPathButton(path) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "gdp-file-header-icon gdp-copy-path";
+      button.title = "copy folder path";
+      button.setAttribute("aria-label", "copy folder path");
+      button.innerHTML = iconSvg("octicon-copy", COPY_16_PATHS);
+      button.addEventListener("click", async (event) => {
+        event.stopPropagation();
+        try {
+          await navigator.clipboard.writeText(filePathClipboardText(path));
+          button.classList.add("copied");
+          setTimeout(() => {
+            button.classList.remove("copied");
+          }, 1200);
+        } catch {
+          button.classList.add("failed");
+          setTimeout(() => {
+            button.classList.remove("failed");
+          }, 1200);
+        }
+      });
+      return button;
+    }
+    function showRepoContextMenu(event, entry, ref, onChanged) {
       if (document.querySelector(".gdp-trash-dialog-backdrop"))
         return false;
       if (!canTrashWorktreeRef(ref))
         return false;
       if (entry.children_omitted_reason === "internal")
         return false;
+      if (entry.type !== "tree" && entry.type !== "blob")
+        return false;
       event.preventDefault();
       closeRepoContextMenu();
       const menu = document.createElement("div");
@@ -9158,15 +9384,39 @@ ${frontmatter.yaml}
       const anchorY = event.clientY > 0 ? event.clientY : anchorRect?.bottom || window.innerHeight / 2;
       menu.style.left = `${anchorX}px`;
       menu.style.top = `${anchorY}px`;
+      const copyPath = document.createElement("button");
+      copyPath.type = "button";
+      copyPath.textContent = "Copy Path";
+      copyPath.addEventListener("click", async () => {
+        closeRepoContextMenu();
+        await copyRepoContextText(filePathClipboardText(entry.path));
+      });
+      const copyName = document.createElement("button");
+      copyName.type = "button";
+      copyName.textContent = "Copy Name";
+      copyName.addEventListener("click", async () => {
+        closeRepoContextMenu();
+        await copyRepoContextText(fileNameClipboardText(entry.path));
+      });
+      const createDir = document.createElement("button");
+      createDir.type = "button";
+      createDir.textContent = "New Folder...";
+      createDir.addEventListener("click", async () => {
+        closeRepoContextMenu();
+        const targetPath = entry.type === "blob" ? parentRepoPath(entry.path) : entry.path;
+        await requestCreateDirectory(targetPath, onChanged, {
+          focusReturnTarget
+        });
+      });
       const trash = document.createElement("button");
       trash.type = "button";
       trash.className = "danger";
       trash.textContent = "Move to Trash...";
       trash.addEventListener("click", async () => {
         closeRepoContextMenu();
-        await requestMoveToTrash(entry.path, onDeleted, { focusReturnTarget });
+        await requestMoveToTrash(entry.path, onChanged, { focusReturnTarget });
       });
-      menu.appendChild(trash);
+      menu.append(copyPath, copyName, createDir, trash);
       document.body.appendChild(menu);
       const rect = menu.getBoundingClientRect();
       const left = Math.min(anchorX, window.innerWidth - rect.width - 8);
@@ -9186,6 +9436,7 @@ ${frontmatter.yaml}
         return null;
       return {
         path,
+        type: row.dataset.type,
         children_omitted_reason: row.dataset.childrenOmittedReason
       };
     }
@@ -9199,14 +9450,31 @@ ${frontmatter.yaml}
     function createMoveToTrashButton(path, onDeleted) {
       const button = document.createElement("button");
       button.type = "button";
-      button.className = "gdp-btn gdp-btn-sm gdp-trash-path";
-      button.textContent = "Move to Trash";
+      button.className = "gdp-file-header-icon gdp-trash-path";
+      button.title = "move folder to Trash";
+      button.setAttribute("aria-label", "move folder to Trash");
+      button.innerHTML = iconSvg("octicon-trash", TRASH_16_PATH);
       button.addEventListener("click", async (event) => {
         event.stopPropagation();
         await requestMoveToTrash(path, onDeleted, { focusReturnTarget: button });
       });
       return button;
     }
+    function createNewFolderButton(path, onCreated) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "gdp-file-header-icon gdp-create-dir";
+      button.title = "new folder";
+      button.setAttribute("aria-label", "new folder");
+      button.innerHTML = iconSvg("octicon-plus", PLUS_16_PATH);
+      button.addEventListener("click", async (event) => {
+        event.stopPropagation();
+        await requestCreateDirectory(path, onCreated, {
+          focusReturnTarget: button
+        });
+      });
+      return button;
+    }
     function createOpenPathButton(path, kind, title = "open folder in OS") {
       const button = document.createElement("button");
       button.type = "button";
@@ -9257,7 +9525,10 @@ ${frontmatter.yaml}
       button.className = "gdp-btn gdp-btn-sm";
       button.textContent = "Upload files";
       button.addEventListener("click", () => input.click());
-      const fail = () => {
+      const error2 = document.createElement("div");
+      error2.className = "gdp-upload-error";
+      const fail = (message = "Upload failed") => {
+        error2.textContent = message;
         dropPanel.classList.add("failed");
         setTimeout(() => dropPanel.classList.remove("failed"), 1600);
       };
@@ -9265,8 +9536,9 @@ ${frontmatter.yaml}
         try {
           if (input.files?.length)
             await uploadFiles(path, input.files);
-        } catch {
-          fail();
+          error2.textContent = "";
+        } catch (uploadError) {
+          fail(uploadError instanceof Error ? uploadError.message : "Upload failed");
         } finally {
           input.value = "";
         }
@@ -9283,11 +9555,12 @@ ${frontmatter.yaml}
           const files = event.dataTransfer?.files;
           if (files?.length)
             await uploadFiles(path, files);
-        } catch {
-          fail();
+          error2.textContent = "";
+        } catch (uploadError) {
+          fail(uploadError instanceof Error ? uploadError.message : "Upload failed");
         }
       });
-      dropPanel.append(copy, button, input);
+      dropPanel.append(copy, button, input, error2);
       return dropPanel;
     }
     function repoRoute(ref, path) {
@@ -9362,39 +9635,31 @@ ${frontmatter.yaml}
       const target = $("#diff");
       const shell = document.createElement("section");
       shell.className = "gdp-repo-shell";
-      const { wrap: targetPickerWrap, input: targetPicker } = createRefSelectorInput({
-        id: "repo-ref",
-        placeholder: "ref...",
-        title: "repository ref",
-        value: meta.ref || "worktree"
-      });
-      wireRefSelectorInput(targetPicker, (ref) => {
-        setRoute(repoRoute(ref, ""));
-        loadRepo();
-      });
       const toolbar = document.createElement("div");
       toolbar.className = "gdp-file-detail-header gdp-repo-toolbar";
-      toolbar.append(targetPickerWrap, createRepoBreadcrumb(meta.ref, meta.path || ""), createOpenPathButton(meta.path || "", "directory", "open this folder in OS"));
+      const pathHeader = document.createElement("div");
+      pathHeader.className = "gdp-file-detail-path";
+      pathHeader.appendChild(createRepoBreadcrumb(meta.ref, meta.path || ""));
+      if (meta.path)
+        pathHeader.appendChild(createCopyPathButton(meta.path));
+      pathHeader.appendChild(createOpenPathButton(meta.path || "", "directory", "open this folder in OS"));
+      toolbar.appendChild(pathHeader);
+      if (canTrashWorktreeRef(meta.ref)) {
+        toolbar.appendChild(createNewFolderButton(meta.path || "", () => loadRepo()));
+        if (meta.path) {
+          toolbar.appendChild(createMoveToTrashButton(meta.path, () => {
+            const parent = meta.path.split("/").slice(0, -1).join("/");
+            setRoute(repoRoute(meta.ref, parent));
+            loadRepo();
+          }));
+        }
+      }
       shell.appendChild(toolbar);
       const listCard = document.createElement("section");
       listCard.className = "gdp-file-shell loaded gdp-repo-list-shell";
       const listWrapper = document.createElement("div");
       listWrapper.className = "d2h-file-wrapper";
-      const listHeader = document.createElement("div");
-      listHeader.className = "d2h-file-header";
-      const listName = document.createElement("div");
-      listName.className = "d2h-file-name-wrapper";
-      const listIcon = document.createElement("span");
-      listIcon.className = "dir-icon";
-      setFolderIcon(listIcon, false);
-      const listTitle = document.createElement("span");
-      listTitle.className = "d2h-file-name";
-      listTitle.textContent = meta.path || meta.project || "Files";
-      listName.append(listIcon, listTitle);
-      listHeader.appendChild(listName);
-      listHeader.appendChild(createOpenPathButton(meta.path || "", "directory", "open this folder in OS"));
-      listWrapper.appendChild(listHeader);
-      if (meta.upload_enabled && (meta.ref === "worktree" || meta.ref === "")) {
+      if (meta.ref === "worktree" || meta.ref === "") {
         listWrapper.appendChild(createRepoUploadPanel(meta.path || ""));
       }
       const sortHost = document.createElement("div");

package/web/index.html

@@ -21,7 +21,7 @@
   <header id="global-header">
     <a class="brand" href="/" aria-label="Repository home">
       <img class="brand-icon" src="/favicon.png" alt="" width="20" height="20" />
-      <span class="title">code viewer</span>
+      <span class="title" id="project-title">repository</span>
     </a>
     <nav class="app-menu" aria-label="Views">
       <a class="app-menu-item active" data-route="repo" href="/">Repository</a>
@@ -32,6 +32,7 @@
       <button id="theme" title="toggle theme">🌗</button>
       <span id="status" class="status"></span>
       <a class="global-help-link" data-route="help" href="/help">Help</a>
+      <span class="product-label" aria-hidden="true">code viewer</span>
     </div>
   </header>
   <header id="topbar">

package/web/style.css

@@ -101,6 +101,7 @@ html, body {
   margin: 0; padding: 0;
   background: var(--bg); color: var(--fg);
   --code-font-size: 12px;
+  --markdown-font-size: calc(var(--code-font-size) + 2px);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
                Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-size: 14px;
@@ -282,9 +283,11 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
 .brand {
   display: flex; align-items: center; gap: 9px;
   font-weight: 600;
-  font-size: 14px;
+  font-size: 15px;
   color: var(--fg);
-  flex-shrink: 0;
+  min-width: 0;
+  max-width: min(34vw, 420px);
+  flex: 0 1 auto;
   text-decoration: none;
 }
 .brand:hover { color: var(--fg); text-decoration: none; }
@@ -294,7 +297,12 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   display: block;
   border-radius: 5px;
 }
-.brand .title { letter-spacing: -0.005em; }
+.brand .title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .app-menu {
   display: flex;
@@ -366,6 +374,13 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   gap: 8px;
   flex: 0 0 auto;
 }
+.product-label {
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
 .global-actions #theme,
 .global-icon-action {
   display: inline-flex;
@@ -2298,6 +2313,12 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
 .gdp-upload-panel.failed {
   border-color: var(--danger);
 }
+.gdp-upload-error {
+  min-height: 18px;
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 18px;
+}
 .gdp-upload-copy {
   min-width: 0;
   color: var(--fg-muted);
@@ -2542,6 +2563,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   display: flex;
   align-items: center;
   min-width: 0;
+  flex: 0 1 auto;
   gap: 4px;
   padding-top: 2px;
   overflow: hidden;
@@ -2595,6 +2617,9 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   flex-shrink: 0;
   color: var(--danger);
 }
+.gdp-file-detail-header .gdp-create-dir {
+  flex-shrink: 0;
+}
 .gdp-file-detail-meta {
   display: flex;
   align-items: center;
@@ -2634,7 +2659,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   padding: 24px 32px 40px;
   color: var(--fg);
   overflow-wrap: break-word;
-  font-size: 16px;
+  font-size: var(--markdown-font-size);
   line-height: 1.75;
 }
 .gdp-html-preview {
@@ -2697,7 +2722,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   margin: 0;
 }
 .gdp-markdown-toc a {
-  display: -webkit-box;
+  display: block;
   min-height: 28px;
   padding: 5px 10px 5px 12px;
   border-left: 3px solid transparent;
@@ -2706,8 +2731,6 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   overflow: hidden;
   overflow-wrap: anywhere;
   text-decoration: none;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
   transition:
     background-color 0.06s ease,
     border-color 0.06s ease,
@@ -2741,6 +2764,14 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   font-weight: 600;
 }
 .gdp-markdown-preview h1,
+.gdp-markdown-preview h2,
+.gdp-markdown-preview h3,
+.gdp-markdown-preview h4,
+.gdp-markdown-preview h5,
+.gdp-markdown-preview h6 {
+  scroll-margin-top: calc(var(--global-header-h) + 120px);
+}
+.gdp-markdown-preview h1,
 .gdp-markdown-preview h2 {
   padding-bottom: 0.3em;
   border-bottom: 1px solid var(--border-muted);
@@ -3141,9 +3172,6 @@ body.gdp-file-detail-page #empty {
   padding-left: 0;
   padding-right: 0;
 }
-.gdp-repo-breadcrumb {
-  flex: 1;
-}
 .gdp-repo-breadcrumb button {
   max-width: 260px;
   border: 0;
@@ -3324,6 +3352,29 @@ body.gdp-file-detail-page #empty {
   line-height: 1.5;
   overflow-wrap: anywhere;
 }
+.gdp-create-dir-input {
+  display: block;
+  width: 100%;
+  height: 32px;
+  margin-top: 10px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+}
+.gdp-create-dir-input:focus {
+  outline: 2px solid var(--accent-subtle);
+  border-color: var(--accent);
+}
+.gdp-create-dir-error {
+  min-height: 18px;
+  margin-top: 6px;
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 18px;
+}
 .gdp-trash-dialog-actions {
   display: flex;
   justify-content: flex-end;