@youtyan/code-viewer 0.9.0 → 0.9.2

package/package.json

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

package/web/app.js

@@ -247,6 +247,22 @@ ${lines.join(`
     };
   }
 
+  // web-src/core/changed-paths.ts
+  function changedPathCoversPath(changed, path) {
+    return path === changed || path.startsWith(`${changed}/`);
+  }
+  function changedPathsCoverPath(changedPaths, path) {
+    if (!changedPaths)
+      return true;
+    if (changedPaths.has(path))
+      return true;
+    for (const changed of changedPaths) {
+      if (changedPathCoversPath(changed, path))
+        return true;
+    }
+    return false;
+  }
+
   // web-src/core/expand-logic.ts
   function initExpandState(prevHunkEndNew, hunkNewStart) {
     return {
@@ -23348,7 +23364,14 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       const span = document.createElement("span");
       span.className = `badge ${ch}`;
       span.textContent = ch;
-      span.title = { M: "modified", A: "added", D: "deleted", R: "renamed" }[ch] || ch;
+      span.title = {
+        M: "modified",
+        A: "added",
+        D: "deleted",
+        R: "renamed",
+        U: "untracked",
+        I: "ignored"
+      }[ch] || ch;
       return span;
     }
     function setFileViewed(path, viewed) {
@@ -23690,7 +23713,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     function invalidateLoadedCard(card, file, changedPaths, measuredHeight) {
       if (!card.classList.contains("loaded") && !card.classList.contains("loading"))
         return false;
-      if (changedPaths && !changedPaths.has(file.path))
+      if (!changedPathsCoverPath(changedPaths, file.path))
         return false;
       card.dataset.reqId = String(++CLIENT_REQ_SEQ);
       card.style.minHeight = `${measuredHeight ?? card.offsetHeight}px`;
@@ -23780,13 +23803,12 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       const pathsUnknown = !changedPaths;
       const contentMayNeedReload = !listSame || pathsUnknown || (changedPaths ? newFiles.some((file) => {
         const key = fileKey(file);
-        return prevCardSignatures.get(key) !== newCardSigs.get(key) || changedPaths.has(file.path);
+        return prevCardSignatures.get(key) !== newCardSigs.get(key) || changedPathsCoverPath(changedPaths, file.path);
       }) : false);
       if (contentMayNeedReload)
         resetLoadScheduling();
       let invalidatedCards = 0;
       if (listSame && domIntact) {
-        const pathsUnknown2 = !changedPaths;
         const cardsByKey = collectDiffCardsByKey(target);
         const measuredHeights = new Map;
         for (const f2 of newFiles) {
@@ -23801,7 +23823,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           const oldSig = prevCardSignatures.get(key);
           const newSig = newCardSigs.get(key) ?? computeCardSignature(f2);
           const sigChanged = oldSig !== newSig;
-          const pathHint = pathsUnknown2 || changedPaths.has(f2.path);
+          const pathHint = changedPathsCoverPath(changedPaths, f2.path);
           if (!sigChanged && !pathHint) {
             continue;
           }
@@ -26425,7 +26447,11 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
                 },
                 {
                   kind: "paragraph",
-                  text: 'Symlinks show a distinct icon and a "→ target" label so they are never mistaken for a regular file or folder, and clicking one navigates to its resolved target. A broken symlink is visually flagged and disabled. Files with pending git changes (new, modified, renamed, deleted) show a status badge in the tree instead of the regular type icon.'
+                  text: 'Symlinks show a distinct icon and a "→ target" label so they are never mistaken for a regular file or folder, and clicking one navigates to its resolved target. A broken symlink is visually flagged and disabled.'
+                },
+                {
+                  kind: "paragraph",
+                  text: "Files with pending git changes show a status badge in the tree instead of the regular type icon: M (modified), A (added — staged for commit), D (deleted), R (renamed), U (untracked — in the worktree but not under version control yet), and I (ignored by a .gitignore rule). U and A stay separate so a file you have never run git add on does not look like one that is already staged. A wholly untracked or ignored directory is badged as a whole and keeps its folder icon, so it stays recognizable while collapsed; its contents inherit the badge unless an ignore rule names a file specifically."
                 }
               ]
             },
@@ -27116,7 +27142,11 @@ code-viewer query agent-help`
                 },
                 {
                   kind: "paragraph",
-                  text: "シンボリックリンクは専用アイコンと「→ リンク先」ラベルで表示されるため通常のファイル/フォルダと区別でき、クリックするとリンク先に遷移します。リンク切れのシンボリックリンクは無効化されたことが分かる表示になります。未コミットの git 変更(新規・変更・リネーム・削除)があるファイルは、通常の種類アイコンの代わりにステータスバッジがツリーに表示されます。"
+                  text: "シンボリックリンクは専用アイコンと「→ リンク先」ラベルで表示されるため通常のファイル/フォルダと区別でき、クリックするとリンク先に遷移します。リンク切れのシンボリックリンクは無効化されたことが分かる表示になります。"
+                },
+                {
+                  kind: "paragraph",
+                  text: "git の状態があるファイルは、通常の種類アイコンの代わりにステータスバッジがツリーに表示されます。M(変更)、A(追加 — コミット予定としてステージ済み)、D(削除)、R(リネーム)、U(未追跡 — ワークツリーにあるがまだバージョン管理下にない)、I(.gitignore の対象) の 6 種類です。U と A を分けているのは、git add をまだ一度もしていないファイルが、既にステージ済みのファイルと同じ見た目にならないようにするためです。丸ごと未追跡・無視のディレクトリにはディレクトリ単位でバッジが付き、フォルダアイコンは残るので折りたたんだままでも判別できます。配下のファイルはそのバッジを引き継ぎますが、無視ルールが個別に名指ししているファイルはそちらが優先されます。"
                 }
               ]
             },
@@ -31235,6 +31265,43 @@ code-viewer query agent-help`
     function toggleSidebarHidden() {
       applySidebarHidden(!STATE.sidebarHidden);
     }
+    function applyDirEntryToNode(node, entry) {
+      node.explicit = true;
+      if (entry.children_omitted === true) {
+        node.children_omitted = true;
+        node.children_omitted_reason = entry.children_omitted_reason;
+      }
+      if (entry.is_symlink) {
+        node.is_symlink = true;
+        node.symlink_target = entry.symlink_target;
+        node.resolved_path = entry.resolved_path;
+      }
+      if (entry.status)
+        node.status = entry.status;
+    }
+    function createTreeDirLabel(dir) {
+      const label = document.createElement("span");
+      label.className = "dir-label";
+      const dn = document.createElement("span");
+      dn.className = "dir-name";
+      dn.textContent = dir.name;
+      dn.title = dir.path;
+      label.appendChild(dn);
+      if (dir.status)
+        label.appendChild(fileBadge(dir.status));
+      if (dir.children_omitted) {
+        const omitted = document.createElement("span");
+        omitted.className = "dir-omitted " + (dir.children_omitted_reason === "heavy" ? "dir-omitted-heavy" : "dir-omitted-internal");
+        const badge = omittedDirectoryBadge(dir.children_omitted_reason);
+        omitted.textContent = badge.label;
+        omitted.title = badge.title;
+        label.appendChild(omitted);
+      }
+      const dirSymlinkLabel = symlinkTargetLabel(dir);
+      if (dirSymlinkLabel)
+        label.appendChild(dirSymlinkLabel);
+      return label;
+    }
     function buildTree(files) {
       const root = {
         name: "",
@@ -31266,16 +31333,7 @@ code-viewer query agent-help`
             node.minOrder = f2.order;
         }
         if (f2.type === "tree") {
-          node.explicit = true;
-          if (f2.children_omitted === true) {
-            node.children_omitted = true;
-            node.children_omitted_reason = f2.children_omitted_reason;
-          }
-          if (f2.is_symlink) {
-            node.is_symlink = true;
-            node.symlink_target = f2.symlink_target;
-            node.resolved_path = f2.resolved_path;
-          }
+          applyDirEntryToNode(node, f2);
           continue;
         }
         node.files.push(f2);
@@ -31345,25 +31403,7 @@ code-viewer query agent-help`
           const dirIcon = document.createElement("span");
           dirIcon.className = "dir-icon";
           li.appendChild(dirIcon);
-          const label = document.createElement("span");
-          label.className = "dir-label";
-          const dn = document.createElement("span");
-          dn.className = "dir-name";
-          dn.textContent = dir.name;
-          dn.title = dir.path;
-          label.appendChild(dn);
-          if (dir.children_omitted) {
-            const omitted = document.createElement("span");
-            omitted.className = "dir-omitted " + (dir.children_omitted_reason === "heavy" ? "dir-omitted-heavy" : "dir-omitted-internal");
-            const badge = omittedDirectoryBadge(dir.children_omitted_reason);
-            omitted.textContent = badge.label;
-            omitted.title = badge.title;
-            label.appendChild(omitted);
-          }
-          const dirSymlinkLabel = symlinkTargetLabel(dir);
-          if (dirSymlinkLabel)
-            label.appendChild(dirSymlinkLabel);
-          li.appendChild(label);
+          li.appendChild(createTreeDirLabel(dir));
           li.appendChild(createOpenPathButton(dir.path, "directory", openDirectoryInOsTitle()));
           const collapsed = STATE.collapsedDirs.has(dir.path);
           if (collapsed)
@@ -31460,16 +31500,7 @@ code-viewer query agent-help`
         node.minOrder = Math.min(node.minOrder, order);
       }
       if (entry.type === "tree") {
-        node.explicit = true;
-        if (entry.children_omitted === true) {
-          node.children_omitted = true;
-          node.children_omitted_reason = entry.children_omitted_reason;
-        }
-        if (entry.is_symlink) {
-          node.is_symlink = true;
-          node.symlink_target = entry.symlink_target;
-          node.resolved_path = entry.resolved_path;
-        }
+        applyDirEntryToNode(node, entry);
         return;
       }
       if (!node.files.some((file) => file.path === entry.path))
@@ -31553,25 +31584,7 @@ code-viewer query agent-help`
       const dirIcon = document.createElement("span");
       dirIcon.className = "dir-icon";
       li.appendChild(dirIcon);
-      const label = document.createElement("span");
-      label.className = "dir-label";
-      const dn = document.createElement("span");
-      dn.className = "dir-name";
-      dn.textContent = dir.name;
-      dn.title = dir.path;
-      label.appendChild(dn);
-      if (dir.children_omitted) {
-        const omitted = document.createElement("span");
-        omitted.className = "dir-omitted " + (dir.children_omitted_reason === "heavy" ? "dir-omitted-heavy" : "dir-omitted-internal");
-        const badge = omittedDirectoryBadge(dir.children_omitted_reason);
-        omitted.textContent = badge.label;
-        omitted.title = badge.title;
-        label.appendChild(omitted);
-      }
-      const dirSymlinkLabel = symlinkTargetLabel(dir);
-      if (dirSymlinkLabel)
-        label.appendChild(dirSymlinkLabel);
-      li.appendChild(label);
+      li.appendChild(createTreeDirLabel(dir));
       li.appendChild(createOpenPathButton(dir.path, "directory", openDirectoryInOsTitle()));
       const updateIcon = () => {
         setFolderIcon(dirIcon, li.classList.contains("collapsed"));
@@ -33209,10 +33222,17 @@ code-viewer query agent-help`
           row.className = nonBrowsableCommit ? `gdp-repo-row ${entry.type} gdp-repo-row-gitlink` : entry.is_symlink ? `gdp-repo-row ${entry.type} symlink-row${brokenSymlink ? " symlink-broken-row gdp-row-disabled" : ""}` : `gdp-repo-row ${entry.type}`;
           if (deletedEntry)
             row.classList.add("gdp-row-disabled");
-          const icon = entry.status ? fileBadge(entry.status) : repoEntryTypeIcon(entry, browsable, nonBrowsableCommit);
+          const directoryRow = entry.type === "tree";
+          const icon = entry.status && !directoryRow ? fileBadge(entry.status) : repoEntryTypeIcon(entry, browsable, nonBrowsableCommit);
           const name = document.createElement("span");
           name.className = "name";
           name.textContent = entry.name;
+          let nameCell = name;
+          if (directoryRow && entry.status) {
+            nameCell = document.createElement("span");
+            nameCell.className = "name-cell";
+            nameCell.append(name, fileBadge(entry.status));
+          }
           if (nonBrowsableCommit) {
             row.title = commitEntryMeta(entry.submodule).title;
             row.setAttribute("aria-disabled", "true");
@@ -33221,7 +33241,7 @@ code-viewer query agent-help`
           }
           const metaBlock = createRepoEntryMeta(entry, browsable);
           const size = createRepoEntrySize(entry);
-          row.append(icon, name, metaBlock, size);
+          row.append(icon, nameCell, metaBlock, size);
           row.addEventListener("click", () => {
             if (brokenSymlink || deletedEntry)
               return;
@@ -36588,6 +36608,11 @@ code-viewer query agent-help`
           SERVER_SCOPE_WATCH_LIMIT_MIN = settings.scope.watch_limit_min;
         if (typeof settings.scope.watch_limit_max === "number")
           SERVER_SCOPE_WATCH_LIMIT_MAX = settings.scope.watch_limit_max;
+        if (typeof settings.scope.watch_recursive === "boolean") {
+          const watchSection = document.querySelector("#watch-settings-section");
+          if (watchSection)
+            watchSection.hidden = settings.scope.watch_recursive;
+        }
         return settings;
       } catch {
         return null;
@@ -40074,7 +40099,7 @@ code-viewer query agent-help`
         return;
       if (isBlobOrBlameFileRoute(route)) {
         const viewingPath = route.path;
-        if (paths && viewingPath && !paths.has(viewingPath))
+        if (viewingPath && !changedPathsCoverPath(paths, viewingPath))
           return;
         dispatchFileRoute(route, { refresh: true });
         return;
@@ -40122,7 +40147,7 @@ code-viewer query agent-help`
         const route = STATE.route;
         if (isBlobOrBlameFileRoute(route)) {
           const viewingPath = route.path;
-          if (paths && viewingPath && !paths.has(viewingPath))
+          if (viewingPath && !changedPathsCoverPath(paths, viewingPath))
             return;
         }
         if (STATE.autoUpdate) {

package/web/index.html

@@ -191,7 +191,7 @@
       </label>
       <p id="datastore-s3-tooltip-help" class="scope-settings-help"></p>
     </div>
-    <div class="scope-settings-section">
+    <div id="watch-settings-section" class="scope-settings-section">
       <strong id="watch-section-title" class="scope-settings-section-title">File change watcher</strong>
       <label for="scope-watch-limit">Maximum directories to watch</label>
       <div class="scope-watch-limit-row">

package/web/style.css

@@ -2721,11 +2721,19 @@ body.gdp-help-page #content {
 .badge.A { background: #ccffd866; color: var(--success); }
 .badge.D { background: #ffd7d566; color: var(--danger); }
 .badge.R { background: #d8b9ff66; color: var(--done); }
+/* Outside version control. U (untracked) takes the accent hue so it reads as
+   "not in git yet" rather than as one more shade of the staged-green A it
+   used to be collapsed into. I (ignored) stays deliberately colorless: an
+   ignored file is present but irrelevant to the repository. */
+.badge.U { background: var(--accent-subtle); color: var(--accent); }
+.badge.I { background: var(--bg-emph); color: var(--fg-muted); }
 
 [data-theme="dark"] .badge.M { background: rgba(210,153,34,0.20); color: var(--attn); }
 [data-theme="dark"] .badge.A { background: rgba(46,160,67,0.20); color: var(--success); }
 [data-theme="dark"] .badge.D { background: rgba(248,81,73,0.20); color: var(--danger); }
 [data-theme="dark"] .badge.R { background: rgba(163,113,247,0.20); color: var(--done); }
+[data-theme="dark"] .badge.U { background: rgba(56,139,253,0.20); color: var(--accent); }
+[data-theme="dark"] .badge.I { background: rgba(145,152,161,0.15); color: var(--fg-muted); }
 
 /* Sidebar row marker for files worth a second look before diving in:
    heavy diffs, binary/media files, or Git commit entries. Same semantics as
@@ -4792,6 +4800,16 @@ body.gdp-file-detail-page #empty {
   white-space: nowrap;
   font-weight: 500;
 }
+/* Holds the name plus a directory's status badge inside the single name
+   column of the row grid - same shape as the sidebar's .dir-label, which
+   pairs a directory name with its badges. */
+.gdp-repo-row .name-cell {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+}
 .gdp-repo-row .kind {
   justify-self: end;
   color: var(--fg-muted);