@youtyan/code-viewer 0.8.5 → 0.8.7

package/package.json

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

package/web/app.js

@@ -227,6 +227,8 @@ ${lines.join(`
   function shouldAutoLoadForRoute(route, options = {}) {
     if (route.screen === "history")
       return options.historyWorktreeSelected === true;
+    if (route.screen === "diff")
+      return !route.range.from || route.range.from === "worktree" || !route.range.to || route.range.to === "worktree";
     if (route.screen === "database" || route.screen === "journal" || route.screen === "help" || route.screen === "unknown")
       return false;
     return true;
@@ -9672,6 +9674,10 @@ ${frontmatter.yaml}
   }
 
   // web-src/views/file-shell.ts
+  function isMediaPreviewOnlySource(path) {
+    const kind = sourceDisplayKind(path);
+    return kind === "image" || kind === "video" || kind === "audio" || kind === "pdf";
+  }
   function isBlobOrBlameFileRoute(route) {
     return route.screen === "file" && (route.view === "blob" || route.view === "blame");
   }
@@ -9724,14 +9730,18 @@ ${frontmatter.yaml}
   }
   function appendFileViewTabs(tabs, deps, target, activeTab, options = {}) {
     const includeFileTabs = options.includeFileTabs !== false;
-    const showPreview = options.previewable ?? (isPreviewableSource(target.path) || activeTab === "preview");
+    const mediaOnly = options.previewable === undefined && isMediaPreviewOnlySource(target.path);
+    const showPreview = mediaOnly || (options.previewable ?? (isPreviewableSource(target.path) || activeTab === "preview"));
     let previewButton = null;
     if (showPreview) {
-      previewButton = createBlobSourceTabButton(deps, target, "preview", activeTab === "preview", options);
+      previewButton = createBlobSourceTabButton(deps, target, "preview", activeTab === "preview" || mediaOnly && activeTab === "code", options);
       tabs.appendChild(previewButton);
     }
-    const codeButton = createBlobSourceTabButton(deps, target, "code", activeTab === "code", options);
-    tabs.appendChild(codeButton);
+    let codeButton = null;
+    if (!mediaOnly) {
+      codeButton = createBlobSourceTabButton(deps, target, "code", activeTab === "code", options);
+      tabs.appendChild(codeButton);
+    }
     if (includeFileTabs) {
       tabs.appendChild(createFileViewTabButton(deps, target, "blame", "Blame", activeTab === "blame"));
       tabs.appendChild(createFileViewTabButton(deps, target, "history", "History", activeTab === "history"));
@@ -9783,14 +9793,18 @@ ${frontmatter.yaml}
     sticky.appendChild(tabsHost);
     return { sticky, header, tabsHost };
   }
-  function mountFileShellCard(deps, target, card, repoTarget = deps.repoFileTargetFromRoute()) {
+  function mountFileShellCard(deps, target, card, repoTarget = deps.repoFileTargetFromRoute(), options = {}) {
     const root = deps.$("#diff");
     if (repoTarget) {
       const layout = document.createElement("div");
       layout.className = "gdp-repo-blob-layout";
       layout.appendChild(card);
       root.prepend(layout);
-      Promise.resolve(deps.renderRepoBlobSidebar(target.path, repoTarget)).catch(() => {}).finally(() => deps.placeSidebarToggle());
+      if (options.loadSidebar !== false) {
+        Promise.resolve(deps.renderRepoBlobSidebar(target.path, repoTarget)).catch((error2) => {
+          console.error("[code-viewer] failed to load repository sidebar", error2);
+        }).finally(() => deps.placeSidebarToggle());
+      }
     } else {
       root.prepend(card);
     }
@@ -23765,7 +23779,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         if (fresh && card.isConnected)
           enqueueLoad(fresh, card, 0);
       };
-      return trackLoad(fetch(url).then(async (r2) => {
+      const request = trackLoad(fetch(url).then(async (r2) => {
         if (!r2.ok)
           throw new Error(await r2.text());
         return r2.json();
@@ -23785,9 +23799,10 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         if (String(myReq) !== card.dataset.reqId)
           return;
         renderFile(file, data, card);
-      }).catch(() => {
+      }).catch((error2) => {
         if (String(myReq) !== card.dataset.reqId)
           return;
+        console.error("[code-viewer] failed to load diff", error2);
         card.classList.remove("loading");
         card.classList.add("error");
         card.style.minHeight = "";
@@ -23804,13 +23819,24 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
             enqueueLoad(file, card, 1);
           });
       });
+      const completed = request.finally(() => {
+        if (card._loadPromise === completed)
+          delete card._loadPromise;
+      });
+      card._loadPromise = completed;
+      return completed;
     }
     async function loadDiffFile(path) {
-      const card = document.querySelector(diffCardSelector(path));
+      const root = getDiffRoot?.() || document;
+      const card = root.querySelector(diffCardSelector(path));
       if (!card || card.classList.contains("gdp-standalone-source"))
         return false;
       if (card.classList.contains("loaded"))
         return true;
+      if (card.classList.contains("loading") && card._loadPromise) {
+        await card._loadPromise;
+        return card.classList.contains("loaded");
+      }
       const file = card._file || STATE.files.find((x) => x.path === path);
       if (!file)
         return false;
@@ -25601,7 +25627,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       (el.closest(".gdp-repo-blob-layout") || el).remove();
     });
   }
-  function renderFileHistoryShell(deps, route) {
+  function renderFileHistoryShell(deps, route, options = {}) {
     removeFileHistoryShell();
     const target = { path: route.path, ref: route.ref };
     const card = document.createElement("article");
@@ -25637,7 +25663,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     body.appendChild(embed);
     wrapper.appendChild(body);
     card.appendChild(wrapper);
-    mountFileShellCard(deps, target, card, target.ref);
+    mountFileShellCard(deps, target, card, target.ref, options);
     return {
       ...panelDom,
       commitInfo,
@@ -26044,7 +26070,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
                 },
                 {
                   kind: "paragraph",
-                  text: "A file detail page exposes four tabs — Preview, Code, Blame, History. Code is the default and ?preview=1 opts in to the Markdown / media preview. Blame and History have their own canonical URLs (view=blame, view=history) so deep links and the browser back/forward stay in sync, and they keep the Repository sidebar visible."
+                  text: "A file detail page exposes up to four tabs — Preview, Code, Blame, History. For text files Code is the default and ?preview=1 opts in to the Markdown / HTML preview; media files (images, video, audio, PDF) show a Preview tab only, with no Code tab. Blame and History have their own canonical URLs (view=blame, view=history) so deep links and the browser back/forward stay in sync, and they keep the Repository sidebar visible."
                 },
                 {
                   kind: "paragraph",
@@ -26715,7 +26741,7 @@ code-viewer query agent-help`
                 },
                 {
                   kind: "paragraph",
-                  text: "ファイル詳細ページには Preview / Code / Blame / History の 4 つのタブがあります。Code がデフォルトで、?preview=1 を付けると Markdown / メディアプレビューに切り替わります。Blame と History はそれぞれ専用 URL (view=blame, view=history) を持つため、ディープリンクとブラウザの戻る / 進むが同期し、いずれも Repository サイドバーは表示されたままです。"
+                  text: "ファイル詳細ページには最大 4 つのタブ (Preview / Code / Blame / History) があります。テキストファイルは Code がデフォルトで、?preview=1 を付けると Markdown / HTML プレビューに切り替わります。画像・動画・音声・PDF などのメディアファイルは Preview タブのみ表示され、Code タブは表示されません。Blame と History はそれぞれ専用 URL (view=blame, view=history) を持つため、ディープリンクとブラウザの戻る / 進むが同期し、いずれも Repository サイドバーは表示されたままです。"
                 },
                 {
                   kind: "paragraph",
@@ -30153,14 +30179,34 @@ code-viewer query agent-help`
     if (!popBody || !popSearch)
       return;
     let popTarget = null;
+    let refsLoaded = false;
+    let refsLoading = false;
+    let refsError = false;
+    let refsInFlight = null;
     function fetchRefs() {
-      return fetch("/_refs").then((r2) => r2.json()).then((refs) => {
+      if (refsLoaded)
+        return Promise.resolve();
+      if (refsInFlight)
+        return refsInFlight;
+      refsLoading = true;
+      refsError = false;
+      const request = fetch("/_refs").then((r2) => r2.json()).then((refs) => {
         Object.assign(REFS, refs);
-      }).catch(() => {
-        return;
+        refsLoaded = true;
+        if (!popover.hidden && popTab !== "commits")
+          buildPopBody(popSearch.value);
+      }).catch((error2) => {
+        refsError = true;
+        console.error("[code-viewer] failed to load refs", error2);
+      }).finally(() => {
+        refsLoading = false;
+        refsInFlight = null;
+        if (!popover.hidden && popTab !== "commits")
+          buildPopBody(popSearch.value);
       });
+      refsInFlight = request;
+      return request;
     }
-    fetchRefs();
     let popTab = "commits";
     const COMMIT_PAGE_SIZE = 50;
     let commitSearchTimer = null;
@@ -30301,6 +30347,10 @@ code-viewer query agent-help`
         } else if (commitHasMore) {
           html.push('<div class="rp-empty">scroll for more commits...</div>');
         }
+      } else if (refsLoading) {
+        html.push('<div class="rp-empty">loading refs...</div>');
+      } else if (refsError) {
+        html.push('<div class="rp-empty">failed to load refs</div>');
       } else if (popTab === "branches") {
         const branches = (REFS.branches || []).filter((b2) => m(b2.name));
         if (!branches.length) {
@@ -30435,6 +30485,14 @@ code-viewer query agent-help`
         });
         if (popTab === "commits")
           scheduleCommitSearch(popSearch.value);
+        else {
+          if (commitSearchTimer) {
+            clearTimeout(commitSearchTimer);
+            commitSearchTimer = null;
+          }
+          commitSearchLoading = false;
+          fetchRefs();
+        }
         buildPopBody(popSearch.value);
       });
     });
@@ -34083,6 +34141,8 @@ code-viewer query agent-help`
       });
     }
     function applyRenderedSourceTab(tab, codeButton, previewButton, codePane, previewPane, updateRoute = true) {
+      if (!codeButton)
+        return false;
       if (tab === "preview" && (!previewButton || !previewPane))
         return false;
       codeButton.classList.toggle("active", tab === "code");
@@ -34332,6 +34392,7 @@ code-viewer query agent-help`
         body.replaceWith(view);
       else
         card.appendChild(view);
+      setSourceCardState(card, "error");
     }
     function renderSourceCancelled(card, target) {
       const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
@@ -34356,6 +34417,7 @@ code-viewer query agent-help`
         body.replaceWith(view);
       else
         card.appendChild(view);
+      setSourceCardState(card, "cancelled");
     }
     function renderSourceUnsupported(card, target) {
       const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
@@ -34374,6 +34436,7 @@ code-viewer query agent-help`
         body.replaceWith(view);
       else
         card.appendChild(view);
+      setSourceCardState(card, "done");
     }
     function renderSourceInternalPath(card, target, kind) {
       const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
@@ -34398,6 +34461,7 @@ code-viewer query agent-help`
         body.replaceWith(view);
       else
         card.appendChild(view);
+      setSourceCardState(card, "done");
     }
     function renderHtmlPreview(target, html) {
       return renderHtmlPreviewFrame(`${target.path} preview`, html);
@@ -34511,7 +34575,7 @@ code-viewer query agent-help`
           previewButton2?.addEventListener("click", () => {
             applyRenderedSourceTab("preview", codeButton2, previewButton2, virtualCode, preview);
           });
-          codeButton2.addEventListener("click", () => {
+          codeButton2?.addEventListener("click", () => {
             applyRenderedSourceTab("code", codeButton2, previewButton2, virtualCode, preview);
           });
           if (header)
@@ -34606,7 +34670,7 @@ code-viewer query agent-help`
         previewButton?.addEventListener("click", () => {
           applyRenderedSourceTab("preview", codeButton, previewButton, table2, preview);
         });
-        codeButton.addEventListener("click", () => {
+        codeButton?.addEventListener("click", () => {
           applyRenderedSourceTab("code", codeButton, previewButton, table2, preview);
         });
         if (header)
@@ -34926,7 +34990,7 @@ code-viewer query agent-help`
         e2.preventDefault();
         const url = new URL(full.href, window.location.origin);
         setRoute(parseRoute(url.pathname, url.search, currentRange()), true);
-        renderStandaloneSource(target);
+        renderStandaloneSource(target, { refresh: true });
       });
       actions.append(copy, full);
       info.append(badge, summary, actions);
@@ -35042,7 +35106,7 @@ code-viewer query agent-help`
         e2.preventDefault();
         const url = new URL(full.href, window.location.origin);
         setRoute(parseRoute(url.pathname, url.search, currentRange()), true);
-        renderStandaloneSource(target);
+        renderStandaloneSource(target, { refresh: true });
       });
       actions.append(raw, full);
       info.append(badge, summary, actions);
@@ -35308,6 +35372,7 @@ code-viewer query agent-help`
         body.replaceWith(view);
       else
         card.appendChild(view);
+      setSourceCardState(card, "done");
     }
     function _renderSourceBinary(card, target) {
       const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
@@ -35331,7 +35396,30 @@ code-viewer query agent-help`
       else
         card.appendChild(view);
     }
-    async function renderStandaloneSource(target) {
+    function mountedStandaloneSourceCard(target) {
+      const card = document.querySelector(".gdp-standalone-source");
+      if (!card)
+        return null;
+      if (card.dataset.path !== target.path)
+        return null;
+      if (card.dataset.sourceRef !== (target.ref || "worktree"))
+        return null;
+      return card;
+    }
+    function setSourceCardState(card, state) {
+      card.dataset.sourceState = state;
+    }
+    async function renderStandaloneSource(target, options = {}) {
+      if (!options.refresh) {
+        const mounted = mountedStandaloneSourceCard(target);
+        const state = mounted?.dataset.sourceState;
+        if (mounted && state === "done") {
+          scrollStandaloneSourceLine(mounted, lineTargetStart(STATE.route.screen === "file" ? STATE.route.line : undefined));
+          return;
+        }
+        if (mounted && state === "loading")
+          return;
+      }
       cancelActiveSourceLoad("navigation");
       const req = ++SOURCE_REQ_SEQ;
       const repoTarget = repoFileTargetFromRoute();
@@ -35343,10 +35431,13 @@ code-viewer query agent-help`
       const card = document.createElement("article");
       card.className = "gdp-file-shell loaded gdp-standalone-source gdp-source-mode";
       card.dataset.path = target.path;
+      card.dataset.sourceRef = target.ref || "worktree";
+      setSourceCardState(card, "loading");
       const internalKind = sourceInternalPathKind(target.path);
       const wrapper = document.createElement("div");
       wrapper.className = "gdp-file-detail-wrapper";
-      const activeTab = !internalKind && STATE.route.screen === "file" && STATE.route.preview ? "preview" : "code";
+      const mediaOnly = !internalKind && isMediaPreviewOnlySource(target.path);
+      const activeTab = mediaOnly || !internalKind && STATE.route.screen === "file" && STATE.route.preview ? "preview" : "code";
       const { sticky, header } = createFileShellSticky({
         currentRange,
         setRoute,
@@ -35427,9 +35518,13 @@ code-viewer query agent-help`
             const rendered2 = await renderPagedSourceText(card, target, meta.size, controller.signal);
             if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
               return;
-            if (!rendered2)
+            if (!rendered2) {
+              finishSourceLoad(req);
+              renderSourceError(card, target, `Cannot load ${target.path} at ${target.ref}`);
               return;
+            }
             scrollStandaloneSourceLine(card, lineTargetStart(STATE.route.screen === "file" ? STATE.route.line : undefined));
+            setSourceCardState(card, "done");
             finishSourceLoad(req);
             return;
           }
@@ -35450,6 +35545,7 @@ code-viewer query agent-help`
           if (!rendered)
             return;
           scrollStandaloneSourceLine(card, lineTargetStart(STATE.route.screen === "file" ? STATE.route.line : undefined));
+          setSourceCardState(card, "done");
           finishSourceLoad(req);
         }
       } catch (err) {
@@ -35477,7 +35573,7 @@ code-viewer query agent-help`
       if (row)
         row.scrollIntoView({ block: "center" });
     }
-    function applySourceRouteToShell() {
+    function applySourceRouteToShell(options = {}) {
       const target = sourceTargetFromRoute();
       setPageMode();
       if (!target) {
@@ -35487,7 +35583,7 @@ code-viewer query agent-help`
         });
         return;
       }
-      renderStandaloneSource(target);
+      renderStandaloneSource(target, options);
     }
     function inferLang(path) {
       const name = sourceFileName(path);
@@ -37604,7 +37700,7 @@ code-viewer query agent-help`
         setPreferredSourceTab: (tab) => SOURCE_VIEW.setPreferredSourceTab(tab),
         createFileBreadcrumb: (path, ref) => DIFF_VIEW.createFileBreadcrumb(path, ref),
         emptyText: () => uiText().diff
-      }, historyRoute);
+      }, historyRoute, { loadSidebar: false });
       activeFileHistoryDiffHost = mount.diffHost;
       activeFileHistoryEmptyHost = mount.emptyHost;
       return mount;
@@ -37636,12 +37732,12 @@ code-viewer query agent-help`
         history.replaceState(historyStateForRoute(STATE.route), "", url + window.location.hash);
       }
     }
-    function dispatchFileRoute(route) {
+    function dispatchFileRoute(route, options = {}) {
       if (route.view === "blob") {
         setStatus("live");
         removeFileHistoryShell2();
         BLAME_VIEW.removeBlamePage();
-        applySourceRouteToShell();
+        applySourceRouteToShell(options);
         return true;
       }
       if (route.view === "blame") {
@@ -37659,7 +37755,17 @@ code-viewer query agent-help`
         parkRangeForHistory();
         setPageMode();
         const mount = renderFileHistoryShell2(route);
-        HISTORY_VIEW.enterHistory({ mount });
+        HISTORY_VIEW.enterHistory({ mount }).then(async () => {
+          const currentRoute = STATE.route;
+          if (currentRoute.screen !== "file" || currentRoute.view !== "history" || currentRoute.path !== route.path || currentRoute.ref !== route.ref)
+            return;
+          await loadDiffFile(route.path);
+          const routeAfterDiff = STATE.route;
+          if (routeAfterDiff.screen !== "file" || routeAfterDiff.view !== "history" || routeAfterDiff.path !== route.path || routeAfterDiff.ref !== route.ref)
+            return;
+          await REPO_VIEW.renderRepoBlobSidebar(route.path, route.ref);
+          placeSidebarToggle();
+        });
         return true;
       }
       return false;
@@ -38649,7 +38755,7 @@ code-viewer query agent-help`
         setStatus("live");
         return Promise.resolve(null);
       }
-      if (STATE.route.screen === "file" && !(isFileHistoryRoute(STATE.route) && activeHistoryPathFilter) && dispatchFileRoute(STATE.route)) {
+      if (STATE.route.screen === "file" && !(isFileHistoryRoute(STATE.route) && activeHistoryPathFilter) && dispatchFileRoute(STATE.route, { refresh: true })) {
         return Promise.resolve({
           structureChanged: false,
           invalidatedCards: 0,
@@ -39342,7 +39448,7 @@ code-viewer query agent-help`
       if (!shouldAutoLoadCurrentRoute(route))
         return;
       if (isBlobOrBlameFileRoute(route)) {
-        dispatchFileRoute(route);
+        dispatchFileRoute(route, { refresh: true });
         return;
       }
       doSseLoad(paths);
@@ -39382,7 +39488,7 @@ code-viewer query agent-help`
         const viewingPath = route.path;
         if (paths && viewingPath && !paths.has(viewingPath))
           return;
-        dispatchFileRoute(route);
+        dispatchFileRoute(route, { refresh: true });
         return;
       }
       if (route.screen === "repo") {