@youtyan/code-viewer 0.1.43 → 0.1.44

package/dist/code-viewer.js

@@ -633,6 +633,27 @@ function refCommits(cwd, query = "", max = DEFAULT_REF_COMMIT_LIMIT) {
   ]);
   return mergeCommitResults(limit, hashMatches, subjectMatches, authorMatches);
 }
+function parseRemoteWebUrl(remote) {
+  const raw = (remote || "").trim();
+  if (!raw)
+    return null;
+  const sshShorthand = /^[\w.-]+@([\w.-]+):(.+?)(?:\.git)?\/?$/.exec(raw);
+  if (sshShorthand)
+    return `https://${sshShorthand[1]}/${sshShorthand[2]}`;
+  const sshUrl = /^ssh:\/\/(?:[\w.-]+@)?([\w.-]+)(?::\d+)?\/(.+?)(?:\.git)?\/?$/.exec(raw);
+  if (sshUrl)
+    return `https://${sshUrl[1]}/${sshUrl[2]}`;
+  const httpUrl = /^https?:\/\/([\w.-]+)\/(.+?)(?:\.git)?\/?$/.exec(raw);
+  if (httpUrl)
+    return `https://${httpUrl[1]}/${httpUrl[2]}`;
+  return null;
+}
+function remoteWebUrl(cwd) {
+  const res = run(["git", "remote", "get-url", "origin"], cwd);
+  if (res.code !== 0)
+    return null;
+  return parseRemoteWebUrl(res.stdout.trim());
+}
 function parseHistoryLog(stdout) {
   const parts = stdout.split("\x00");
   const commits = [];
@@ -3104,6 +3125,7 @@ function handleTree(url) {
 function handleSettings() {
   return json({
     project: basename2(cwd),
+    repo_web_url: remoteWebUrl(cwd),
     scope: {
       omit_dirs_effective: scopeOmitDirNames,
       omit_dirs_built_in: DEFAULT_WORKTREE_OMIT_DIR_NAMES,

package/package.json

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

package/web/app.js

@@ -7698,6 +7698,114 @@ ${frontmatter.yaml}
     };
   }
 
+  // web-src/views/diff-line-select.ts
+  var SELECTED_CLASS = "gdp-diff-line-selected";
+  function cardPath(el) {
+    return el.closest(".gdp-file-shell[data-path]")?.dataset.path || "";
+  }
+  function afterLineFromCell(cell) {
+    const sideCell = cell.closest("td.d2h-code-side-linenumber");
+    if (sideCell) {
+      const side = sideCell.closest(".d2h-file-side-diff");
+      const wrapper = sideCell.closest(".d2h-file-wrapper");
+      if (!side || !wrapper)
+        return null;
+      const sides = wrapper.querySelectorAll(".d2h-file-side-diff");
+      if (sides.length < 2 || side !== sides[1])
+        return null;
+      const line2 = Number((sideCell.textContent || "").trim());
+      return Number.isInteger(line2) && line2 > 0 ? line2 : null;
+    }
+    const numCell = cell.closest("td.d2h-code-linenumber");
+    if (!numCell)
+      return null;
+    const raw = (numCell.querySelector(".line-num2")?.textContent || "").trim();
+    const line = Number(raw);
+    return Number.isInteger(line) && line > 0 ? line : null;
+  }
+  function rowsWithAfterLines(card) {
+    const out = [];
+    card.querySelectorAll("table.d2h-diff-table tr").forEach((row) => {
+      const cell = row.querySelector("td.d2h-code-linenumber, td.d2h-code-side-linenumber");
+      if (!cell)
+        return;
+      const line = afterLineFromCell(cell);
+      if (line !== null)
+        out.push({ row, line });
+    });
+    return out;
+  }
+  function createDiffLineSelect(deps) {
+    let drag = null;
+    let selection = null;
+    function clearHighlights() {
+      document.querySelectorAll(`.${SELECTED_CLASS}`).forEach((row) => {
+        row.classList.remove(SELECTED_CLASS);
+      });
+    }
+    function applySelection(next) {
+      selection = next;
+      clearHighlights();
+      if (!next) {
+        deps.pill.hide();
+        return;
+      }
+      const start = Math.min(next.start, next.end);
+      const end = Math.max(next.start, next.end);
+      const card = document.querySelector(`.gdp-file-shell[data-path="${CSS.escape(next.path)}"]`);
+      if (card) {
+        for (const item of rowsWithAfterLines(card)) {
+          if (item.line >= start && item.line <= end)
+            item.row.classList.add(SELECTED_CLASS);
+        }
+      }
+      deps.pill.show(next.path, start, end);
+    }
+    function clear() {
+      drag = null;
+      applySelection(null);
+    }
+    const diff = document.querySelector("#diff");
+    if (!diff)
+      return { clear };
+    diff.addEventListener("mousedown", (e2) => {
+      const target = e2.target;
+      const cell = target.closest("td.d2h-code-linenumber, td.d2h-code-side-linenumber");
+      if (!cell)
+        return;
+      const line = afterLineFromCell(cell);
+      const path = cardPath(cell);
+      if (line === null || !path) {
+        if (selection)
+          clear();
+        return;
+      }
+      e2.preventDefault();
+      drag = { path, start: line };
+      applySelection({ path, start: line, end: line });
+    });
+    diff.addEventListener("mouseover", (e2) => {
+      if (!drag)
+        return;
+      const target = e2.target;
+      const cell = target.closest("td.d2h-code-linenumber, td.d2h-code-side-linenumber");
+      if (!cell || cardPath(cell) !== drag.path)
+        return;
+      const line = afterLineFromCell(cell);
+      if (line === null)
+        return;
+      applySelection({ path: drag.path, start: drag.start, end: line });
+    });
+    document.addEventListener("mouseup", () => {
+      drag = null;
+    });
+    document.addEventListener("keydown", (e2) => {
+      if (e2.key === "Escape" && selection && !drag)
+        clear();
+    });
+    return { clear };
+  }
+
   // web-src/core/file-path-copy.ts
   function filePathClipboardText(path) {
     return path || "";
@@ -7708,6 +7816,13 @@ ${frontmatter.yaml}
     const parts = path.split("/").filter(Boolean);
     return parts[parts.length - 1] || "";
   }
+  function fileReferenceClipboardText(path, start, end) {
+    if (!path)
+      return "";
+    const a2 = Math.max(1, Math.floor(Math.min(start, end)));
+    const b2 = Math.max(1, Math.floor(Math.max(start, end)));
+    return a2 === b2 ? `@${path}#${a2}` : `@${path}#${a2}-${b2}`;
+  }
 
   // web-src/core/ws-highlight.ts
   function isWhitespaceOnlyInlineHighlight(text2) {
@@ -9769,6 +9884,76 @@ ${frontmatter.yaml}
     return { setupHunkExpand };
   }
 
+  // web-src/views/line-ref-pill.ts
+  var COPY_ICON = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="currentColor">' + '<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/>' + '<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/>' + "</svg>";
+  var CHECK_ICON = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="currentColor">' + '<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>' + "</svg>";
+  function escapeHtml2(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  function createLineRefPill() {
+    const pill = document.createElement("button");
+    pill.id = "line-ref-pill";
+    pill.type = "button";
+    pill.title = "選択行の参照をコピー（Claude Code / Codex に貼り付け用）";
+    pill.hidden = true;
+    document.body.appendChild(pill);
+    let refText = "";
+    let feedbackTimer = null;
+    function render(state) {
+      pill.classList.toggle("copied", state === "copied");
+      if (state === "copied") {
+        pill.innerHTML = `${CHECK_ICON}<span class="lrp-label">Copied!</span>`;
+        return;
+      }
+      if (state === "failed") {
+        pill.innerHTML = `${COPY_ICON}<span class="lrp-label">copy failed</span>`;
+        return;
+      }
+      pill.innerHTML = `${COPY_ICON}<span class="lrp-label">Copy</span>` + `<span class="lrp-ref">${escapeHtml2(refText)}</span>`;
+    }
+    pill.addEventListener("click", async () => {
+      if (!refText)
+        return;
+      try {
+        await navigator.clipboard.writeText(refText);
+        render("copied");
+      } catch {
+        render("failed");
+      }
+      if (feedbackTimer)
+        clearTimeout(feedbackTimer);
+      feedbackTimer = setTimeout(() => {
+        feedbackTimer = null;
+        if (!pill.hidden)
+          render("ready");
+      }, 1200);
+    });
+    return {
+      show(path, start, end) {
+        const next = fileReferenceClipboardText(path, start, end);
+        if (!next)
+          return;
+        const changed = next !== refText;
+        refText = next;
+        if (feedbackTimer) {
+          clearTimeout(feedbackTimer);
+          feedbackTimer = null;
+        }
+        render("ready");
+        if (pill.hidden || changed) {
+          pill.classList.remove("pop");
+          pill.offsetWidth;
+          pill.classList.add("pop");
+        }
+        pill.hidden = false;
+      },
+      hide() {
+        refText = "";
+        pill.hidden = true;
+      }
+    };
+  }
+
   // web-src/views/ref-picker.ts
   function createRefPicker(deps) {
     function wireRefSelectorInput(input, onPick) {
@@ -15126,6 +15311,11 @@ ${frontmatter.yaml}
           return null;
         const settings = await res.json();
         setProjectName(settings.project || "");
+        const repoLink = document.querySelector("#repo-web-link");
+        if (repoLink && settings.repo_web_url) {
+          repoLink.href = settings.repo_web_url;
+          repoLink.hidden = false;
+        }
         SERVER_SCOPE_OMIT_DIRS_DEFAULT = normalizeScopeOmitDirs(settings.scope.omit_dirs_effective);
         SERVER_SCOPE_EXCLUDE_NAMES_DEFAULT = normalizeScopeExcludeNames(settings.scope.exclude_names_effective);
         return settings;
@@ -15164,6 +15354,19 @@ ${frontmatter.yaml}
     let highlightConfigured = false;
     let PROJECT_NAME = "";
     let REPO_SIDEBAR_REF = null;
+    const LINE_REF_PILL = createLineRefPill();
+    const DIFF_LINE_SELECT = createDiffLineSelect({ pill: LINE_REF_PILL });
+    function syncLineRefPill() {
+      const route = STATE.route;
+      if (route.screen === "diff")
+        return;
+      DIFF_LINE_SELECT.clear();
+      if (route.screen === "file" && route.line) {
+        const start = typeof route.line === "number" ? route.line : route.line.start;
+        const end = typeof route.line === "number" ? route.line : route.line.end;
+        LINE_REF_PILL.show(route.path, start, end);
+      }
+    }
     const SIDEBAR = createSidebar({
       $,
       $$,
@@ -15553,7 +15756,7 @@ ${frontmatter.yaml}
         throw e2;
       });
     }
-    function escapeHtml2(s2) {
+    function escapeHtml3(s2) {
       return String(s2 == null ? "" : s2).replace(/[&<>"']/g, (c2) => ({
         "&": "&amp;",
         "<": "&lt;",
@@ -15571,6 +15774,19 @@ ${frontmatter.yaml}
         to: STATE.to || DEFAULT_RANGE.to
       };
     }
+    let preHistoryRange = null;
+    function parkRangeForHistory() {
+      if (preHistoryRange === null)
+        preHistoryRange = { from: STATE.from, to: STATE.to };
+    }
+    function restoreRangeAfterHistory() {
+      if (!preHistoryRange)
+        return;
+      STATE.from = preHistoryRange.from;
+      STATE.to = preHistoryRange.to;
+      preHistoryRange = null;
+      syncRefInputs();
+    }
     function repoFileTargetFromRoute() {
       return STATE.route.screen === "file" && STATE.route.view === "blob" ? STATE.route.ref : null;
     }
@@ -15601,6 +15817,7 @@ ${frontmatter.yaml}
       else
         history.pushState(state, "", url);
       syncHeaderMenu();
+      syncLineRefPill();
     }
     function setPageMode() {
       document.body.classList.toggle("gdp-file-detail-page", STATE.route.screen === "file");
@@ -15633,7 +15850,10 @@ ${frontmatter.yaml}
           });
         }
         if (link2.dataset.route === "diff") {
-          link2.href = buildRoute({ screen: "diff", range: currentRange() });
+          link2.href = buildRoute({
+            screen: "diff",
+            range: preHistoryRange ?? currentRange()
+          });
         }
         if (link2.dataset.route === "history") {
           link2.href = buildRoute({
@@ -15763,7 +15983,7 @@ ${frontmatter.yaml}
       STATE,
       setRoute,
       currentRange,
-      escapeHtml: escapeHtml2,
+      escapeHtml: escapeHtml3,
       trackLoad,
       diffCardSelector,
       getHljs,
@@ -16169,10 +16389,12 @@ ${frontmatter.yaml}
         setStatus("live");
         applySourceRouteToShell();
       } else if (STATE.route.screen === "history") {
+        parkRangeForHistory();
         setStatus("live");
         HISTORY_VIEW.enterHistory();
       } else
         load();
+      syncLineRefPill();
     });
     function syncRefInputs() {
       const fi = $("#ref-from"), ti = $("#ref-to");
@@ -16182,6 +16404,7 @@ ${frontmatter.yaml}
         ti.value = STATE.to;
     }
     function setRange(from, to) {
+      preHistoryRange = null;
       STATE.from = from || "";
       STATE.to = to || "";
       localStorage.setItem("gdp:from", STATE.from);
@@ -16208,7 +16431,7 @@ ${frontmatter.yaml}
     syncHeaderMenu();
     const HISTORY_VIEW = createHistoryView({
       $,
-      escapeHtml: escapeHtml2,
+      escapeHtml: escapeHtml3,
       getRoute: () => STATE.route,
       setRoute,
       applyCommitRange: (range) => {
@@ -16237,7 +16460,7 @@ ${frontmatter.yaml}
     });
     const REF_PICKER = createRefPicker({
       $,
-      escapeHtml: escapeHtml2,
+      escapeHtml: escapeHtml3,
       currentRange,
       setRange,
       setRoute,
@@ -16256,6 +16479,9 @@ ${frontmatter.yaml}
     }
     $("#ref-reset").addEventListener("click", () => setRange("HEAD", "worktree"));
     function applyRouteFromLocation() {
+      if (STATE.route.screen === "history" && window.location.pathname !== "/history") {
+        restoreRangeAfterHistory();
+      }
       const parsedRoute = parseRoute(window.location.pathname, window.location.search, currentRange());
       STATE.route = parsedRoute.screen === "unknown" ? { screen: "diff", range: parsedRoute.range } : parsedRoute;
       STATE.from = STATE.route.range.from;
@@ -16265,6 +16491,7 @@ ${frontmatter.yaml}
       ANNOTATIONS_UI?.restoreSessionFromUrl();
       syncRefInputs();
       syncHeaderMenu();
+      syncLineRefPill();
       if (STATE.route.screen === "help") {
         cancelActiveSourceLoad("navigation");
         setPageMode();
@@ -16280,6 +16507,7 @@ ${frontmatter.yaml}
         return;
       }
       if (STATE.route.screen === "history") {
+        parkRangeForHistory();
         cancelActiveSourceLoad("navigation");
         setPageMode();
         removeStandaloneSource();

package/web/index.html

@@ -33,6 +33,7 @@
       <button id="viewer-settings" class="global-icon-action" title="viewer settings" aria-label="viewer settings"></button>
       <button id="theme" title="toggle theme">🌗</button>
       <span id="status" class="status"></span>
+      <a id="repo-web-link" class="global-help-link" href="#" target="_blank" rel="noopener" hidden>GitHub</a>
       <a class="global-help-link" data-route="help" href="/help">Help</a>
       <span class="product-label" aria-hidden="true">code viewer</span>
     </div>

package/web/style.css

@@ -926,6 +926,11 @@ body.gdp-history-page.gdp-sidebar-hidden main#content {
 body.gdp-history-page #sidebar-resizer {
   left: calc(var(--history-w) + var(--sidebar-w) - 4px);
 }
+/* The history screen drives its diff range from the commit list; the topbar
+   from/to pickers belong to the Diff Viewer and are hidden here. */
+body.gdp-history-page #topbar .ref-pickers {
+  display: none;
+}
 #history-panel[hidden] {
   display: none !important;
 }
@@ -1801,7 +1806,10 @@ body.gdp-help-page #content {
 
 #diff > *:first-child { margin-top: 0; }
 
-body:not(.gdp-file-detail-page) #diff::after {
+/* Scroll-past-end spacer so the sidebar can align the last diff file to the
+   top of the viewport. Not wanted on the history screen, where small
+   single-commit diffs would gain a screenful of dead scroll space. */
+body:not(.gdp-file-detail-page):not(.gdp-history-page) #diff::after {
   content: "";
   display: block;
   height: calc(100vh - var(--chrome-h) - 40px);
@@ -2071,6 +2079,86 @@ table.d2h-diff-table tr.gdp-diff-line-target .d2h-code-line-ctn {
 table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   box-shadow: inset 3px 0 0 var(--line-hit-border), inset -1px 0 0 var(--border-muted);
 }
+
+/* After-side drag selection (diff screen) — same yellow as the file view. */
+table.d2h-diff-table tr.gdp-diff-line-selected > td,
+table.d2h-diff-table tr.gdp-diff-line-selected .d2h-code-line,
+table.d2h-diff-table tr.gdp-diff-line-selected .d2h-code-side-line,
+table.d2h-diff-table tr.gdp-diff-line-selected .d2h-code-line-ctn {
+  background: var(--line-hit-bg) !important;
+  background-color: var(--line-hit-bg) !important;
+}
+table.d2h-diff-table tr.gdp-diff-line-selected > td:first-child {
+  box-shadow: inset 3px 0 0 var(--line-hit-border), inset -1px 0 0 var(--border-muted);
+}
+table.d2h-diff-table td.d2h-code-linenumber,
+table.d2h-diff-table td.d2h-code-side-linenumber {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Floating "copy @path#start-end" pill shown while lines are selected. */
+#line-ref-pill {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  z-index: 400;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: min(680px, calc(100vw - 48px));
+  white-space: nowrap;
+  padding: 9px 16px;
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 8px 28px rgba(31, 35, 40, 0.35);
+}
+#line-ref-pill:hover {
+  filter: brightness(1.1);
+}
+#line-ref-pill svg {
+  flex: 0 0 auto;
+}
+#line-ref-pill .lrp-label {
+  flex: 0 0 auto;
+}
+#line-ref-pill .lrp-ref {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.18);
+  font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  font-weight: 400;
+}
+#line-ref-pill.copied {
+  background: var(--success, #2ea043);
+  border-color: var(--success, #2ea043);
+}
+#line-ref-pill.pop {
+  animation: lrp-pop 0.22s ease-out;
+}
+@keyframes lrp-pop {
+  0% {
+    transform: translateX(-50%) translateY(14px) scale(0.92);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(-50%) translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+#line-ref-pill[hidden] {
+  display: none;
+}
 /* Stack height = number of buttons * 20px. With 1 button = 20px row,
  * with 2 (↑+↓) = 40px row, matching GitHub. */
 .gdp-expand-stack {