@youtyan/code-viewer 0.4.1 → 0.5.0

package/package.json

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

package/web/app.js

@@ -658,6 +658,13 @@
           lang: params.get("lang") || "en",
           section: params.get("section") || "overview"
         };
+      case "/doctor":
+        return {
+          screen: "repo",
+          ref: params.get("ref") || params.get("target") || "worktree",
+          path: params.get("path") || "",
+          range
+        };
       case "/history": {
         const commit = params.get("commit") || "";
         return {
@@ -757,6 +764,24 @@
   function buildRawFileUrl(target) {
     return "/_file?path=" + encodeURIComponent(target.path) + "&ref=" + encodeURIComponent(target.ref || "worktree");
   }
+  function parseDoctorOverlay(pathname, search) {
+    if (pathname === "/doctor")
+      return true;
+    const params = new URLSearchParams(search);
+    return params.get("doctor") === "open";
+  }
+  function withDoctorOverlay(url, open) {
+    const queryIdx = url.indexOf("?");
+    const base = queryIdx >= 0 ? url.slice(0, queryIdx) : url;
+    const query = queryIdx >= 0 ? url.slice(queryIdx + 1) : "";
+    const params = new URLSearchParams(query);
+    if (open)
+      params.set("doctor", "open");
+    else
+      params.delete("doctor");
+    const qs = params.toString();
+    return qs ? `${base}?${qs}` : base;
+  }
 
   // web-src/core/annotation-player-core.ts
   function createAnnotationPlayerCore(deps) {
@@ -20855,6 +20880,196 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     };
   }
 
+  // web-src/views/doctor-view.ts
+  var TEXT = {
+    en: {
+      title: "Environment doctor",
+      refresh: "Re-run checks",
+      refreshing: "Running checks…",
+      loadFailed: "Failed to load doctor report",
+      worstOk: "All checks passed.",
+      worstWarn: "Some checks reported warnings.",
+      worstError: "Some checks failed. See the items marked ERROR below.",
+      empty: "No checks ran.",
+      close: "Close",
+      statusLabels: { ok: "OK", warn: "WARN", error: "ERROR" }
+    },
+    ja: {
+      title: "環境ドクター",
+      refresh: "再診断",
+      refreshing: "診断中…",
+      loadFailed: "doctor の結果を取得できませんでした",
+      worstOk: "すべての診断項目が OK です。",
+      worstWarn: "一部の項目に注意があります (WARN)。",
+      worstError: "失敗している項目があります。下の ERROR を確認してください。",
+      empty: "診断項目がありません。",
+      close: "閉じる",
+      statusLabels: { ok: "OK", warn: "警告", error: "エラー" }
+    }
+  };
+  var viewGeneration = 0;
+  function doctorText(lang) {
+    return TEXT[lang];
+  }
+  function statusLabel(text2, status) {
+    return text2.statusLabels[status];
+  }
+  function renderRow(text2, esc, row) {
+    const pill = `<span class="doctor-row-pill doctor-row-pill-${row.status}">` + `${esc(statusLabel(text2, row.status))}</span>`;
+    const body = `<div class="doctor-row-body">` + `<div class="doctor-row-title">${esc(row.title)}</div>` + (row.detail ? `<div class="doctor-row-detail">${esc(row.detail)}</div>` : "") + (row.hint ? `<div class="doctor-row-hint">${esc(row.hint)}</div>` : "") + `</div>`;
+    return `<div class="doctor-row" data-status="${esc(row.status)}">${pill}${body}</div>`;
+  }
+  function renderGroup(text2, esc, group) {
+    if (group.rows.length === 0)
+      return "";
+    const rows = group.rows.map((row) => renderRow(text2, esc, row)).join("");
+    return `<section class="doctor-group" data-group="${esc(group.id)}">` + `<h2 class="doctor-group-title">${esc(group.title)}</h2>` + rows + `</section>`;
+  }
+  function renderReport(mount, report, text2, esc) {
+    const summary = mount.querySelector(".doctor-summary");
+    if (summary) {
+      const message = report.worstStatus === "error" ? text2.worstError : report.worstStatus === "warn" ? text2.worstWarn : text2.worstOk;
+      summary.textContent = message;
+    }
+    const content = mount.querySelector(".doctor-content");
+    if (!content)
+      return;
+    if (!report.groups.length) {
+      content.innerHTML = `<div class="doctor-empty">${esc(text2.empty)}</div>`;
+      return;
+    }
+    content.innerHTML = report.groups.map((group) => renderGroup(text2, esc, group)).join("");
+  }
+  function ensureSkeleton(mount, text2, esc) {
+    if (mount.querySelector(".doctor-header"))
+      return;
+    mount.innerHTML = `<div class="doctor-header">` + `<h1>${esc(text2.title)}</h1>` + `<button type="button" class="doctor-refresh">${esc(text2.refresh)}</button>` + `<button type="button" class="doctor-close" aria-label="${esc(text2.close)}" title="${esc(text2.close)}">×</button>` + `</div>` + `<div class="doctor-summary"></div>` + `<div class="doctor-content"></div>`;
+  }
+  function createDoctorView(deps) {
+    function getMount() {
+      return deps.$("#doctor-sheet");
+    }
+    function getOverlay() {
+      return deps.$("#doctor-sheet-overlay");
+    }
+    function setRefreshState(mount, busy) {
+      const btn = mount.querySelector(".doctor-refresh");
+      if (!btn)
+        return;
+      btn.disabled = busy;
+    }
+    async function load(mount) {
+      viewGeneration += 1;
+      const myGen = viewGeneration;
+      const lang = deps.getLanguage();
+      const text2 = doctorText(lang);
+      setRefreshState(mount, true);
+      const content = mount.querySelector(".doctor-content");
+      if (content)
+        content.innerHTML = `<div class="doctor-empty">${deps.escapeHtml(text2.refreshing)}</div>`;
+      const summary = mount.querySelector(".doctor-summary");
+      if (summary)
+        summary.textContent = "";
+      try {
+        const res = await deps.trackLoad(fetch("/_doctor"));
+        if (myGen !== viewGeneration)
+          return;
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}`);
+        }
+        const data = await res.json();
+        if (myGen !== viewGeneration)
+          return;
+        renderReport(mount, data, text2, deps.escapeHtml);
+        deps.onWorstStatusChange?.(data.worstStatus);
+      } catch (err) {
+        if (myGen !== viewGeneration)
+          return;
+        if (content) {
+          const message = err instanceof Error ? err.message : String(err);
+          content.innerHTML = `<div class="doctor-empty">${deps.escapeHtml(`${text2.loadFailed}: ${message}`)}</div>`;
+        }
+        deps.onWorstStatusChange?.(null);
+      } finally {
+        if (myGen === viewGeneration)
+          setRefreshState(mount, false);
+      }
+    }
+    function applyLocalizedLabels(mount, text2) {
+      const title = mount.querySelector(".doctor-header h1");
+      if (title)
+        title.textContent = text2.title;
+      const refreshBtn = mount.querySelector(".doctor-refresh");
+      if (refreshBtn)
+        refreshBtn.textContent = text2.refresh;
+      const closeBtn = mount.querySelector(".doctor-close");
+      if (closeBtn) {
+        closeBtn.setAttribute("aria-label", text2.close);
+        closeBtn.setAttribute("title", text2.close);
+      }
+    }
+    function bindOnce(mount) {
+      if (mount.dataset.bound)
+        return;
+      mount.dataset.bound = "1";
+      const text2 = doctorText(deps.getLanguage());
+      ensureSkeleton(mount, text2, deps.escapeHtml);
+      const refreshBtn = mount.querySelector(".doctor-refresh");
+      refreshBtn?.addEventListener("click", (event) => {
+        event.preventDefault();
+        load(mount);
+      });
+      const closeBtn = mount.querySelector(".doctor-close");
+      closeBtn?.addEventListener("click", (event) => {
+        event.preventDefault();
+        deps.onCloseRequest?.();
+      });
+    }
+    function isOpen() {
+      const mount = getMount();
+      return mount ? !mount.hidden : false;
+    }
+    async function open() {
+      const mount = getMount();
+      if (!mount)
+        return;
+      bindOnce(mount);
+      applyLocalizedLabels(mount, doctorText(deps.getLanguage()));
+      mount.hidden = false;
+      mount.setAttribute("aria-hidden", "false");
+      mount.removeAttribute("inert");
+      const overlay = getOverlay();
+      if (overlay) {
+        overlay.hidden = false;
+        overlay.setAttribute("aria-hidden", "false");
+      }
+      document.body.classList.add("doctor-sheet-open");
+      await load(mount);
+    }
+    function close() {
+      const mount = getMount();
+      if (!mount)
+        return;
+      mount.hidden = true;
+      mount.setAttribute("aria-hidden", "true");
+      mount.setAttribute("inert", "");
+      const overlay = getOverlay();
+      if (overlay) {
+        overlay.hidden = true;
+        overlay.setAttribute("aria-hidden", "true");
+      }
+      document.body.classList.remove("doctor-sheet-open");
+      viewGeneration += 1;
+    }
+    async function refresh() {
+      const mount = getMount();
+      if (!mount)
+        return;
+      await load(mount);
+    }
+    return { open, close, isOpen, refresh };
+  }
+
   // web-src/views/empty-diff-pane.ts
   function showEmptyHistoryDiffPane(deps) {
     if (deps.diff)
@@ -21835,6 +22050,19 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
                   text: "In large repositories the sidebar loads folder children on demand. Folders you open are remembered and automatically re-expanded after a reload."
                 }
               ]
+            },
+            {
+              title: "Environment doctor",
+              blocks: [
+                {
+                  kind: "paragraph",
+                  text: "Toggle the \uD83E\uDE7A icon in the header to slide in a diagnostic sheet from the right. It works on top of any screen (Repository, Diff, History, Datastores) and the open state is preserved in the URL as ?doctor=open so links are reproducible."
+                },
+                {
+                  kind: "paragraph",
+                  text: "Each row reports OK / WARN / ERROR with a remediation hint when relevant. The check groups are Runtime (Node / Bun / NODE_MODULE_VERSION), Package (version + execution origin including npx cache), SQLite driver, Snapshot store, Git, Discovery summary, Docker / Compose (CLI / v2 plugin / daemon / compose config dry-parse / compose ps health per discovered service), and Server. The most common hint is the npx cache fix for better-sqlite3 NODE_MODULE_VERSION mismatch (rm -rf ~/.npm/_npx then re-run with npx -y @youtyan/code-viewer@latest)."
+                }
+              ]
             }
           ]
         },
@@ -22398,6 +22626,19 @@ code-viewer query diff rows --id diff-xyz789 --table users --type inserted --lim
                   text: "大きいリポジトリではサイドバーがフォルダの中身を必要に応じて読み込みます。開いたフォルダは記憶され、次回のリロード時に同じ状態で展開し直されます。"
                 }
               ]
+            },
+            {
+              title: "環境ドクター",
+              blocks: [
+                {
+                  kind: "paragraph",
+                  text: "ヘッダ右の \uD83E\uDE7A アイコンで、右からスライドする診断シートを開きます。Repository / Diff / History / Datastores などどの画面の上にも重ねて表示でき、開閉状態は URL の ?doctor=open に同期されるのでリンク共有で復元できます。"
+                },
+                {
+                  kind: "paragraph",
+                  text: "各項目は OK / WARN / ERROR で表示され、必要に応じて対処手順のヒントが付きます。診断グループは Runtime (Node / Bun / NODE_MODULE_VERSION)、Package (バージョン + 実行元: npx cache / global / local / bunx)、SQLite driver、Snapshot store、Git、Discovery summary、Docker / Compose (CLI / v2 plugin / daemon / compose config dry parse / compose ps による各サービスのヘルス)、Server (待ち受けポート) の 8 つ。よくあるヒントは npx キャッシュ起因の better-sqlite3 NODE_MODULE_VERSION 不一致で、rm -rf ~/.npm/_npx の後に npx -y @youtyan/code-viewer@latest を再実行する手順を表示します。"
+                }
+              ]
             }
           ]
         },
@@ -29886,7 +30127,8 @@ code-viewer query diff rows --id diff-xyz789 --table users --type inserted --lim
       } : { view: route.screen };
     }
     function replaceUrlWithCurrentRoute() {
-      const url = withAnnotationSessionParam(buildRoute(STATE.route));
+      const base2 = withAnnotationSessionParam(buildRoute(STATE.route));
+      const url = withDoctorOverlay(base2, parseDoctorOverlay(window.location.pathname, window.location.search));
       const current = window.location.pathname + window.location.search;
       if (url !== current) {
         history.replaceState(historyStateForRoute(STATE.route), "", url + window.location.hash);
@@ -29950,7 +30192,7 @@ code-viewer query diff rows --id diff-xyz789 --table users --type inserted --lim
       if (nextRoute.screen === "repo" || nextRoute.screen === "file" && (nextRoute.view === "blob" || nextRoute.view === "blame" || nextRoute.view === "history")) {
         STATE.repoRef = nextRoute.ref || "worktree";
       }
-      const url = withAnnotationSessionParam(buildRoute(nextRoute));
+      const url = withDoctorOverlay(withAnnotationSessionParam(buildRoute(nextRoute)), parseDoctorOverlay(window.location.pathname, window.location.search));
       const state = historyStateForRoute(nextRoute);
       if (replace2)
         history.replaceState(state, "", url);
@@ -30225,6 +30467,10 @@ code-viewer query diff rows --id diff-xyz789 --table users --type inserted --lim
     $("#sb-expand-all").addEventListener("click", () => setAllSidebarDirsCollapsed(false));
     $("#sb-collapse-all").addEventListener("click", () => setAllSidebarDirsCollapsed(true));
     $("#viewer-settings")?.addEventListener("click", toggleScopeSettings);
+    $("#doctor-btn")?.addEventListener("click", (event) => {
+      event.preventDefault();
+      toggleDoctorSheet();
+    });
     $("#scope-settings-close")?.addEventListener("click", closeScopeSettings);
     $("#scope-omit-reset")?.addEventListener("click", resetScopeSettings);
     $("#viewer-language")?.addEventListener("change", (event) => {
@@ -30704,6 +30950,7 @@ code-viewer query diff rows --id diff-xyz789 --table users --type inserted --lim
       } else
         load();
       syncLineRefPill();
+      syncDoctorSheetFromUrl();
     });
     function syncRefInputs() {
       const fi = $("#ref-from"), ti = $("#ref-to");
@@ -30792,6 +31039,69 @@ code-viewer query diff rows --id diff-xyz789 --table users --type inserted --lim
       getLanguage: () => STATE.language,
       trackLoad
     });
+    const DOCTOR_VIEW = createDoctorView({
+      $: (sel) => document.querySelector(sel),
+      escapeHtml: escapeHtml3,
+      trackLoad,
+      getLanguage: () => STATE.language,
+      onWorstStatusChange: (status) => {
+        const badge = document.getElementById("doctor-badge");
+        if (!badge)
+          return;
+        if (status === "error") {
+          badge.hidden = false;
+          badge.dataset.level = "error";
+        } else if (status === "warn") {
+          badge.hidden = false;
+          badge.dataset.level = "warn";
+        } else {
+          badge.hidden = true;
+          badge.removeAttribute("data-level");
+        }
+      },
+      onCloseRequest: () => closeDoctorSheet()
+    });
+    function isDoctorOverlayOpen() {
+      return parseDoctorOverlay(window.location.pathname, window.location.search);
+    }
+    function updateUrlForDoctorOverlay(open) {
+      const current = window.location.pathname + window.location.search;
+      const next = withDoctorOverlay(current, open);
+      if (next !== current) {
+        history.replaceState(history.state, "", next + window.location.hash);
+      }
+    }
+    function openDoctorSheet() {
+      updateUrlForDoctorOverlay(true);
+      DOCTOR_VIEW.open();
+    }
+    function closeDoctorSheet() {
+      DOCTOR_VIEW.close();
+      updateUrlForDoctorOverlay(false);
+    }
+    function toggleDoctorSheet() {
+      if (isDoctorOverlayOpen() || DOCTOR_VIEW.isOpen())
+        closeDoctorSheet();
+      else
+        openDoctorSheet();
+    }
+    function syncDoctorSheetFromUrl() {
+      const shouldOpen = isDoctorOverlayOpen();
+      const open = DOCTOR_VIEW.isOpen();
+      if (shouldOpen && !open)
+        DOCTOR_VIEW.open();
+      else if (!shouldOpen && open)
+        DOCTOR_VIEW.close();
+    }
+    document.getElementById("doctor-sheet-overlay")?.addEventListener("click", () => closeDoctorSheet());
+    document.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape")
+        return;
+      if (!DOCTOR_VIEW.isOpen())
+        return;
+      event.preventDefault();
+      closeDoctorSheet();
+    });
     const DATABASE_VIEW = createDatabaseView({
       setRoute,
       setPageMode,
@@ -30852,6 +31162,7 @@ code-viewer query diff rows --id diff-xyz789 --table users --type inserted --lim
       syncRefInputs();
       syncHeaderMenu();
       syncLineRefPill();
+      syncDoctorSheetFromUrl();
       if (isSameBlobFileRoute(previousRoute, STATE.route) && routeBlobPreview(previousRoute) !== routeBlobPreview(STATE.route) && switchSourceTab(routeBlobPreview(STATE.route) ? "preview" : "code", {
         updateRoute: false
       })) {

package/web/index.html

@@ -33,6 +33,7 @@
     <div class="global-actions">
       <button id="annotations-toggle" class="global-icon-action" title="code annotations" aria-label="code annotations">💬<span id="annotations-count" hidden></span></button>
       <button id="viewer-settings" class="global-icon-action" title="viewer settings" aria-label="viewer settings"></button>
+      <button id="doctor-btn" class="global-icon-action" title="environment doctor" aria-label="environment doctor">🩺<span id="doctor-badge" class="doctor-badge" hidden></span></button>
       <button id="auto-update" class="global-icon-action active" title="auto update on file change">auto</button>
       <button id="cancel-requests" class="global-icon-action" title="no in-flight requests" aria-label="cancel in-flight requests" disabled>stop</button>
       <button id="theme" title="toggle theme">🌗</button>
@@ -251,6 +252,8 @@
     <div id="query-history-content"></div>
   </aside>
 
+  <div id="doctor-sheet-overlay" class="doctor-sheet-overlay" hidden aria-hidden="true"></div>
+  <aside id="doctor-sheet" class="doctor-sheet" hidden aria-hidden="true" inert aria-label="environment doctor"></aside>
   <main id="content">
     <section id="history-commit-info" hidden></section>
     <div id="empty" class="empty hidden">

package/web/style.css

@@ -9699,3 +9699,200 @@ body.db-resizing {
 .gdp-blame-error {
   color: var(--danger, #c33);
 }
+
+/* ===== Doctor sheet (right-side drawer) ===== */
+.doctor-sheet {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(560px, 92vw);
+  max-width: 100vw;
+  background: var(--bg, #fff);
+  border-left: 1px solid var(--border, #d0d7de);
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
+  z-index: 60;
+  overflow-y: auto;
+  padding: 16px 20px 32px;
+  box-sizing: border-box;
+  transform: translateX(100%);
+  transition: transform 200ms ease;
+}
+.doctor-sheet:not([hidden]) {
+  transform: translateX(0);
+}
+.doctor-sheet[hidden] {
+  display: block;
+  pointer-events: none;
+}
+.doctor-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.28);
+  z-index: 55;
+  opacity: 0;
+  transition: opacity 200ms ease;
+  pointer-events: none;
+}
+.doctor-sheet-overlay:not([hidden]) {
+  opacity: 1;
+  pointer-events: auto;
+}
+.doctor-sheet-overlay[hidden] {
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+}
+.doctor-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0 16px;
+  border-bottom: 1px solid var(--border, #d0d7de);
+  margin-bottom: 16px;
+}
+.doctor-close {
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--fg-muted, #57606a);
+  cursor: pointer;
+}
+.doctor-close:hover {
+  background: var(--bg-mute, #eaeef2);
+  color: var(--fg, #1f2328);
+}
+.doctor-header h1 {
+  font-size: 18px;
+  margin: 0;
+  flex: 1;
+}
+.doctor-refresh {
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border, #d0d7de);
+  background: var(--bg-soft, #f6f8fa);
+  color: var(--fg);
+  cursor: pointer;
+}
+.doctor-refresh:hover {
+  background: var(--bg-mute, #eaeef2);
+}
+.doctor-refresh[disabled] {
+  cursor: progress;
+  opacity: 0.6;
+}
+.doctor-summary {
+  font-size: 12px;
+  color: var(--fg-muted);
+  margin-bottom: 16px;
+}
+.doctor-group {
+  border: 1px solid var(--border, #d0d7de);
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: var(--bg, #fff);
+}
+.doctor-group-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.doctor-row {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  gap: 12px;
+  padding: 8px 0;
+  border-top: 1px solid var(--bg-mute, #eaeef2);
+  align-items: start;
+}
+.doctor-row:first-of-type {
+  border-top: 0;
+}
+.doctor-row-pill {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  text-align: center;
+  align-self: start;
+  min-width: 56px;
+}
+.doctor-row-pill-ok {
+  background: rgba(46, 160, 67, 0.15);
+  border-color: rgba(46, 160, 67, 0.4);
+  color: var(--success, #2da44e);
+}
+.doctor-row-pill-warn {
+  background: rgba(212, 167, 44, 0.18);
+  border-color: rgba(212, 167, 44, 0.45);
+  color: var(--attn, #9a6700);
+}
+.doctor-row-pill-error {
+  background: rgba(207, 34, 46, 0.15);
+  border-color: rgba(207, 34, 46, 0.4);
+  color: var(--danger, #cf222e);
+}
+.doctor-row-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.doctor-row-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--fg);
+}
+.doctor-row-detail {
+  font-size: 12px;
+  color: var(--fg-muted);
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.doctor-row-hint {
+  font-size: 12px;
+  color: var(--fg);
+  background: rgba(151, 119, 0, 0.08);
+  border-left: 3px solid var(--attn, #9a6700);
+  padding: 8px 10px;
+  border-radius: 4px;
+  margin-top: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.doctor-row-pill-error ~ .doctor-row-body .doctor-row-hint {
+  background: rgba(207, 34, 46, 0.08);
+  border-left-color: var(--danger, #cf222e);
+}
+.doctor-empty {
+  padding: 32px;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+.doctor-badge {
+  display: inline-flex;
+  margin-left: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--danger, #cf222e);
+}
+.doctor-badge[data-level="warn"] {
+  background: var(--attn, #9a6700);
+}