@youtyan/code-viewer 0.1.12 → 0.1.14

package/web/index.html

@@ -26,6 +26,7 @@
     <nav class="app-menu" aria-label="Views">
       <a class="app-menu-item active" data-route="repo" href="/">Repository</a>
       <a class="app-menu-item active" data-route="diff" href="/todif?from=HEAD&to=worktree">Diff Viewer</a>
+      <a class="app-menu-item" data-route="help" href="/help">Help</a>
     </nav>
     <div class="global-actions">
       <button id="theme" title="toggle theme">🌗</button>

package/web/style.css

@@ -22,6 +22,7 @@
   --accent-emph:   #0550ae;
   --accent-subtle: #ddf4ff;
   --accent-muted:  #54aeff66;
+  --scope-accent:  #bf8700;
   /* success / danger / attention / done */
   --success:        #1a7f37;
   --success-emph:   #1f883d;
@@ -70,6 +71,7 @@
   --accent-emph:   #1f6feb;
   --accent-subtle: rgba(56,139,253,0.10);
   --accent-muted:  rgba(56,139,253,0.40);
+  --scope-accent:  #d29922;
   --success:        #3fb950;
   --success-emph:   #238636;
   --success-subtle: rgba(46,160,67,0.15);
@@ -804,6 +806,16 @@ html, body {
   padding: 0 0 32px;
   z-index: 30;
 }
+body[data-focus-scope="sidebar"] #sidebar {
+  background: var(--bg-soft);
+  outline: none;
+  box-shadow: none;
+}
+body[data-focus-scope="main"] #content {
+  background: var(--bg);
+  outline: none;
+  box-shadow: none;
+}
 .sb-head {
   display: flex; justify-content: space-between; align-items: center;
   padding: 14px 16px 10px;
@@ -926,6 +938,140 @@ body.gdp-resizing #sidebar-resizer {
 body.gdp-resizing { cursor: col-resize !important; user-select: none; }
 body.gdp-resizing * { user-select: none !important; }
 
+body.gdp-help-page #topbar,
+body.gdp-help-page #sidebar,
+body.gdp-help-page #sidebar-resizer {
+  display: none;
+}
+body.gdp-help-page #content {
+  margin-left: 0;
+  padding-top: calc(var(--global-header-h) + 28px);
+}
+.gdp-help-shell {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+}
+.gdp-help-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+.gdp-help-header h1 {
+  margin: 0;
+  font-size: 28px;
+}
+.gdp-help-language {
+  appearance: none;
+  min-width: 92px;
+  height: 34px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background:
+    linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%) right 15px center / 5px 5px no-repeat,
+    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%) right 10px center / 5px 5px no-repeat,
+    var(--bg);
+  color: var(--fg);
+  padding: 0 34px 0 12px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 32px;
+  cursor: pointer;
+}
+.gdp-help-language:hover {
+  border-color: var(--border-strong);
+}
+.gdp-help-language:focus {
+  border-color: var(--accent);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accent-muted);
+}
+.gdp-help-layout {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+.gdp-help-nav {
+  position: sticky;
+  top: calc(var(--global-header-h) + 20px);
+  display: grid;
+  gap: 4px;
+  padding-right: 16px;
+  border-right: 1px solid var(--border-muted);
+}
+.gdp-help-nav button {
+  appearance: none;
+  border: 0;
+  border-left: 3px solid transparent;
+  border-radius: 0 6px 6px 0;
+  background: transparent;
+  color: var(--fg-muted);
+  padding: 8px 10px;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+.gdp-help-nav button:hover {
+  background: var(--bg-mute);
+  color: var(--fg);
+}
+.gdp-help-nav button.active {
+  border-left-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent-emph);
+  font-weight: 700;
+}
+.gdp-help-content h2 {
+  margin: 0 0 8px;
+  font-size: 24px;
+}
+.gdp-help-content > p {
+  margin: 0 0 24px;
+  color: var(--fg-muted);
+}
+.gdp-help-group {
+  margin: 0 0 28px;
+}
+.gdp-help-group h3 {
+  margin: 0 0 10px;
+  font-size: 16px;
+}
+.gdp-help-group table {
+  width: 100%;
+  border-collapse: collapse;
+  border-top: 1px solid var(--border-muted);
+}
+.gdp-help-group th,
+.gdp-help-group td {
+  padding: 11px 8px;
+  border-bottom: 1px solid var(--border-muted);
+  vertical-align: top;
+}
+.gdp-help-group th {
+  width: 230px;
+  color: var(--fg);
+  font-weight: 600;
+  text-align: left;
+}
+.gdp-help-group td {
+  color: var(--fg-muted);
+}
+.gdp-help-group kbd {
+  display: inline-block;
+  min-width: 24px;
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-bottom-color: var(--border-strong);
+  border-radius: 5px;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font: 12px "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  text-align: center;
+}
+
 /* ===== Tree view ===== */
 #filelist.tree {
   padding: 4px 0 0;
@@ -954,6 +1100,12 @@ body.gdp-resizing * { user-select: none !important; }
 #filelist.tree .tree-dir.children-omitted .dir-label {
   border-bottom: 1px dashed var(--border-strong);
 }
+#filelist.tree .tree-dir.children-omitted-ignored {
+  cursor: pointer;
+}
+#filelist.tree .tree-dir.children-omitted-internal {
+  cursor: default;
+}
 #filelist.tree .tree-dir .chev {
   display: flex;
   width: 16px;
@@ -972,6 +1124,11 @@ body.gdp-resizing * { user-select: none !important; }
   width: 12px;
   height: 12px;
 }
+#filelist.tree .tree-dir .chev-spacer {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
 #filelist.tree .tree-dir .dir-label {
   min-width: 0;
   display: flex;
@@ -992,7 +1149,7 @@ body.gdp-resizing * { user-select: none !important; }
 }
 #filelist.tree .tree-dir .dir-omitted {
   flex: 0 0 auto;
-  max-width: 54px;
+  max-width: 62px;
   overflow: hidden;
   text-overflow: ellipsis;
   border: 1px solid var(--border-muted);
@@ -1003,6 +1160,16 @@ body.gdp-resizing * { user-select: none !important; }
   line-height: 15px;
   text-transform: uppercase;
 }
+#filelist.tree .tree-dir .dir-omitted-ignored {
+  color: var(--accent);
+  border-color: var(--accent-muted);
+  background: var(--accent-subtle);
+}
+#filelist.tree .tree-dir .dir-omitted-internal {
+  color: var(--fg-subtle);
+  border-color: var(--border-muted);
+  background: var(--bg-soft);
+}
 #filelist.tree .tree-dir .dir-icon {
   color: #54aeff;
   flex-shrink: 0;
@@ -1519,6 +1686,8 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
 }
 .gdp-copy-path.copied { color: var(--success); }
 .gdp-copy-path.failed { color: var(--danger); }
+.gdp-copy-source.copied { color: var(--success); }
+.gdp-copy-source.failed { color: var(--danger); }
 .gdp-open-path.opened { color: var(--success); }
 .gdp-open-path.failed { color: var(--danger); }
 .gdp-file-unfold[aria-pressed="true"] {
@@ -1738,6 +1907,23 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   color: var(--fg);
   border-bottom-color: var(--blob-tab-active);
 }
+.gdp-source-tabs .gdp-copy-source {
+  margin-left: auto;
+  align-self: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
+.gdp-source-virtual-copy {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
 .gdp-source-viewer > [hidden],
 .gdp-markdown-layout[hidden],
 .gdp-source-table[hidden] {
@@ -1754,6 +1940,25 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
 .gdp-source-table tr.gdp-source-line-target {
   background: var(--line-hit-bg);
 }
+.gdp-source-table tr.gdp-source-cursor .gdp-source-line-number,
+.gdp-source-virtual-row.gdp-source-cursor .gdp-source-virtual-line-number {
+  color: var(--fg);
+  box-shadow: inset 3px 0 0 var(--scope-accent), inset -1px 0 0 var(--border-muted);
+}
+.gdp-source-table tr.gdp-source-cursor .gdp-source-line-code,
+.gdp-source-virtual-row.gdp-source-cursor .gdp-source-virtual-line-code {
+  background: color-mix(in oklab, var(--bg) 90%, var(--scope-accent) 10%) !important;
+}
+.gdp-source-table tr.gdp-source-cursor .gdp-source-line-code::before,
+.gdp-source-virtual-row.gdp-source-cursor .gdp-source-virtual-line-code::before {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1.05em;
+  margin: 0 8px 0 -8px;
+  vertical-align: -0.16em;
+  background: var(--scope-accent);
+}
 .gdp-source-table tr.gdp-source-line-target .gdp-source-line-number,
 .gdp-source-table tr.gdp-source-line-target .gdp-source-line-code,
 .gdp-source-virtual-row.gdp-source-line-target {
@@ -1907,6 +2112,9 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   border-color: var(--accent);
   color: var(--accent);
 }
+.gdp-source-virtual-copy:hover {
+  border-color: var(--border);
+}
 .gdp-source-virtual-scroller {
   position: relative;
   overflow: auto;
@@ -3055,7 +3263,7 @@ body.gdp-file-detail-page #empty {
   font-style: italic;
 }
 
-/* ===== Media (binary image/video) ===== */
+/* ===== Media (binary image/video/audio) ===== */
 .gdp-media {
   display: flex;
   gap: 16px;
@@ -3091,7 +3299,8 @@ body.gdp-file-detail-page #empty {
   color: var(--danger);
 }
 .gdp-media img,
-.gdp-media video {
+.gdp-media video,
+.gdp-media audio {
   max-width: 100%;
   max-height: 70vh;
   border: 1px solid var(--border);
@@ -3106,6 +3315,12 @@ body.gdp-file-detail-page #empty {
   background-position: 0 0, 0 8px, 8px -8px, -8px 0;
   object-fit: contain;
 }
+.gdp-media audio {
+  width: min(100%, 480px);
+  max-height: none;
+  padding: 8px;
+  background-image: none;
+}
 .gdp-media .media-empty {
   width: 100%;
   min-height: 120px;

package/web-src/routes.ts

@@ -19,9 +19,10 @@ export type AppRoute =
   | { screen: 'repo'; ref: string; path: string; range: DiffRange }
   | { screen: 'diff'; range: DiffRange; path?: string; line?: SourceLineTarget }
   | { screen: 'file'; path: string; ref: string; range: DiffRange; view?: 'blob' | 'detail'; line?: SourceLineTarget }
+  | { screen: 'help'; range: DiffRange; lang: string; section: string }
   | { screen: 'unknown'; reason: 'unknown-pathname' | 'missing-path'; rawPathname: string; rawSearch: string; range: DiffRange };
 
-export const SPA_PATHS = ['/todif', '/todiff', '/file'] as const;
+export const SPA_PATHS = ['/todif', '/todiff', '/file', '/help'] as const;
 export const APP_ENTRY_PATHS = ['/', '/index.html'] as const;
 
 export function assertNever(value: never): never {
@@ -89,6 +90,13 @@ export function parseRoute(pathname: string, search: string, fallbackRange: Diff
       if (!path) return { screen: 'unknown', reason: 'missing-path', rawPathname: pathname, rawSearch: search, range };
       return { screen: 'file', path, ref, range, view: target ? 'blob' : 'detail', ...(line ? { line } : {}) };
     }
+    case '/help':
+      return {
+        screen: 'help',
+        range,
+        lang: params.get('lang') || 'en',
+        section: params.get('section') || 'keybindings',
+      };
     default:
       return { screen: 'unknown', reason: 'unknown-pathname', rawPathname: pathname, rawSearch: search, range };
   }
@@ -119,6 +127,13 @@ export function buildRoute(route: AppRoute): string {
         '&to=' + encodeURIComponent(route.range.to || 'worktree') +
         (route.path ? '&path=' + encodeURIComponent(route.path) : '') +
         (route.line ? '&line=' + encodeURIComponent(formatLineTarget(route.line)) : '');
+    case 'help': {
+      const params = new URLSearchParams();
+      if (route.lang && route.lang !== 'en') params.set('lang', route.lang);
+      if (route.section && route.section !== 'keybindings') params.set('section', route.section);
+      const qs = params.toString();
+      return '/help' + (qs ? '?' + qs : '');
+    }
     case 'unknown':
       return '/todif?from=' + encodeURIComponent(route.range.from || '') +
         '&to=' + encodeURIComponent(route.range.to || 'worktree');

package/web-src/server/git.ts

@@ -18,8 +18,11 @@ export type GitTreeEntry = {
   path: string;
   type: 'tree' | 'blob' | 'commit';
   children_omitted?: true;
+  children_omitted_reason?: 'ignored' | 'internal';
 };
 
+const WORKTREE_RECURSIVE_DEPTH_LIMIT = 32;
+
 function run(args: string[], cwd: string): { code: number; stdout: string; stderr: string } {
   const proc = Bun.spawnSync(args, { cwd, stdout: 'pipe', stderr: 'pipe' });
   return {
@@ -156,24 +159,85 @@ function sortTreeEntries(entries: GitTreeEntry[]): GitTreeEntry[] {
   });
 }
 
-function worktreeDirectChildren(cwd: string, path: string): GitTreeEntry[] {
+function ignoredWorktreeDirectories(cwd: string, path: string): Set<string> {
   const base = normalizeTreePath(path);
-  const dir = join(cwd, base);
-  try {
-    return sortTreeEntries(readdirSync(dir, { withFileTypes: true }).map((entry) => {
-      const entryPath = base ? `${base}/${entry.name}` : entry.name;
-      const type = entry.isDirectory()
-        ? hasDotGitEntry(join(dir, entry.name)) ? 'commit' as const : 'tree' as const
-        : 'blob' as const;
-      return {
-        name: entry.name,
+  const args = ['git', '-c', 'core.quotepath=false', 'ls-files', '--others', '--ignored', '--exclude-standard', '--directory', '-z'];
+  if (base) args.push('--', `${base}/`);
+  const proc = Bun.spawnSync(args, {
+    cwd,
+    stdout: 'pipe',
+    stderr: 'ignore',
+  });
+  if (proc.exitCode !== 0) return new Set();
+  return new Set(new TextDecoder().decode(proc.stdout)
+    .split('\0')
+    .filter(entry => entry.endsWith('/'))
+    .map(entry => entry.replace(/\/+$/g, ''))
+    .filter(entry => entry && entry !== base));
+}
+
+function worktreeEntryFromDirent(base: string, dir: string, name: string, isDirectory: boolean, ignoredDirectories: Set<string>): GitTreeEntry {
+  const entryPath = base ? `${base}/${name}` : name;
+  const type = isDirectory
+    ? hasDotGitEntry(join(dir, name)) ? 'commit' as const : 'tree' as const
+    : 'blob' as const;
+  return type === 'tree' && (name === '.git' || ignoredDirectories.has(entryPath))
+    ? {
+        name,
         path: entryPath,
         type,
-      };
-    }));
+        children_omitted: true,
+        children_omitted_reason: name === '.git' ? 'internal' : 'ignored',
+      }
+    : { name, path: entryPath, type };
+}
+
+function worktreeFilesystemEntries(cwd: string, path: string, recursive: boolean): GitTreeEntry[] {
+  const base = normalizeTreePath(path);
+  const root = join(cwd, base);
+  const ignoredDirectories = ignoredWorktreeDirectories(cwd, base);
+  let directEntries: GitTreeEntry[];
+  try {
+    const dirents = readdirSync(root, { withFileTypes: true });
+    directEntries = sortTreeEntries(dirents
+      .map(entry => worktreeEntryFromDirent(base, root, entry.name, entry.isDirectory(), ignoredDirectories)));
   } catch {
     return [];
   }
+  if (!recursive) return directEntries;
+
+  const fileEntries: GitTreeEntry[] = [];
+  const walk = (dir: string, prefix: string, depth: number) => {
+    if (depth >= WORKTREE_RECURSIVE_DEPTH_LIMIT) return;
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const entryPath = prefix ? `${prefix}/${entry.name}` : entry.name;
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name === '.git' || ignoredDirectories.has(entryPath)) {
+          fileEntries.push({
+            name: entry.name,
+            path: entryPath,
+            type: 'tree',
+            children_omitted: true,
+            children_omitted_reason: entry.name === '.git' ? 'internal' : 'ignored',
+          });
+          continue;
+        }
+        if (hasDotGitEntry(full)) continue;
+        walk(full, entryPath, depth + 1);
+      } else if (entry.isFile() || entry.isSymbolicLink()) {
+        fileEntries.push({ name: entry.name, path: entryPath, type: 'blob' });
+      }
+    }
+  };
+  walk(root, base, 0);
+  return combineDirectAndRecursiveFiles(directEntries, fileEntries.sort((a, b) => a.path.localeCompare(b.path)));
 }
 
 function hasDotGitEntry(dir: string): boolean {
@@ -185,20 +249,6 @@ function hasDotGitEntry(dir: string): boolean {
   }
 }
 
-function worktreeRecursiveFiles(cwd: string, path: string): GitTreeEntry[] {
-  const base = normalizeTreePath(path);
-  const trackedArgs = ['git', '-c', 'core.quotepath=false', 'ls-files', '-z'];
-  if (base) trackedArgs.push('--', `${base}/`);
-  const tracked = run(trackedArgs, cwd);
-  const paths = tracked.code === 0 ? tracked.stdout.split('\0').filter(Boolean) : [];
-  paths.push(...untracked(cwd, base));
-  return [...new Set(paths)].filter(Boolean).sort().map((entryPath) => ({
-    name: entryPath.split('/').pop() || entryPath,
-    path: entryPath,
-    type: 'blob' as const,
-  }));
-}
-
 function gitTreeEntries(ref: string, path: string, cwd: string, recursive: boolean): { code: number; entries: GitTreeEntry[]; stderr: string } {
   const base = normalizeTreePath(path);
   const args = ['git', '-c', 'core.quotepath=false', 'ls-tree'];
@@ -227,31 +277,6 @@ function combineDirectAndRecursiveFiles(directEntries: GitTreeEntry[], fileEntri
   ];
 }
 
-function ignoredWorktreePaths(cwd: string, path: string): Set<string> {
-  const base = normalizeTreePath(path);
-  const args = ['git', '-c', 'core.quotepath=false', 'status', '--ignored', '--porcelain=v1', '-z', '--'];
-  if (base) args.push(`${base}/`);
-  const res = run(args, cwd);
-  const ignored = new Set<string>();
-  if (res.code !== 0) return ignored;
-  const records = res.stdout.split('\0').filter(Boolean);
-  for (let i = 0; i < records.length; i++) {
-    const rec = records[i];
-    if (!rec.startsWith('!! ')) continue;
-    const path = rec.slice(3).replace(/\/+$/g, '');
-    if (path) ignored.add(path);
-  }
-  return ignored;
-}
-
-function annotateOmittedWorktreeChildren(entries: GitTreeEntry[], ignoredPaths: Set<string>): GitTreeEntry[] {
-  return entries.map((entry) => {
-    return entry.type === 'tree' && ignoredPaths.has(entry.path)
-      ? { ...entry, children_omitted: true }
-      : entry;
-  });
-}
-
 export function worktreeEntries(cwd: string, path: string): GitTreeEntry[] {
   return listTree('worktree', path, cwd).entries;
 }
@@ -276,12 +301,7 @@ export function listTree(
 ): { code: number; entries: GitTreeEntry[]; stderr: string } {
   const base = normalizeTreePath(path);
   if (ref === 'worktree') {
-    const directEntries = worktreeDirectChildren(cwd, base);
-    const ignoredPaths = ignoredWorktreePaths(cwd, base);
-    const annotatedDirectEntries = annotateOmittedWorktreeChildren(directEntries, ignoredPaths);
-    if (!options.recursive) return { code: 0, entries: annotatedDirectEntries, stderr: '' };
-    const recursiveEntries = worktreeRecursiveFiles(cwd, base);
-    return { code: 0, entries: combineDirectAndRecursiveFiles(annotatedDirectEntries, recursiveEntries), stderr: '' };
+    return { code: 0, entries: worktreeFilesystemEntries(cwd, base, !!options.recursive), stderr: '' };
   }
 
   const direct = gitTreeEntries(ref, base, cwd, false);

package/web-src/server/preview.ts

@@ -180,6 +180,7 @@ function guessMediaKind(path: string) {
   const ext = extname(path).slice(1).toLowerCase();
   if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'bmp', 'ico'].includes(ext)) return 'image';
   if (['mp4', 'webm', 'mov'].includes(ext)) return 'video';
+  if (['mp3', 'wav', 'ogg', 'flac', 'm4a', 'aac', 'opus'].includes(ext)) return 'audio';
   return null;
 }
 
@@ -641,7 +642,9 @@ function rawFileHeaders(path: string, size: number | null = null): HeadersInit {
   const mime: Record<string, string> = {
     '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif',
     '.webp': 'image/webp', '.svg': 'image/svg+xml', '.mp4': 'video/mp4', '.webm': 'video/webm',
-    '.pdf': 'application/pdf',
+    '.mov': 'video/quicktime', '.pdf': 'application/pdf',
+    '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.ogg': 'audio/ogg', '.flac': 'audio/flac',
+    '.m4a': 'audio/mp4', '.aac': 'audio/aac', '.opus': 'audio/ogg',
   };
   const headers: Record<string, string> = {
     'Content-Type': mime[extname(path).toLowerCase()] || 'application/octet-stream',

package/web-src/types.ts

@@ -38,6 +38,7 @@ export type RepoTreeEntry = {
   path: string;
   type: 'tree' | 'blob' | 'commit';
   children_omitted?: true;
+  children_omitted_reason?: 'ignored' | 'internal';
 };
 
 export type RepoTreeResponse = {