@youtyan/code-viewer 0.1.23 → 0.1.25

package/dist/code-viewer.js

@@ -313,6 +313,13 @@ function objectByteSize(oid, cwd) {
     stderr: res.stderr
   };
 }
+function lastCommitDateForPath(ref, path, cwd) {
+  const args = ["git", "log", "-1", "--format=%cI", ref, "--", path];
+  const res = run(args, cwd);
+  if (res.code !== 0)
+    return null;
+  return res.stdout.trim() || null;
+}
 function objectId(ref, path, cwd) {
   const res = run(["git", "rev-parse", "--verify", `${ref}:${path}`], cwd);
   const oid = res.stdout.trim();
@@ -1694,6 +1701,71 @@ function parentRepoPath(path) {
   const parent = dirname2(path);
   return parent === "." ? "" : parent;
 }
+function isoDate(ms) {
+  return ms && Number.isFinite(ms) ? new Date(ms).toISOString() : undefined;
+}
+function worktreeFileMetadata(path, knownSize) {
+  const full = safeWorktreePath(path);
+  if (!full)
+    return {};
+  try {
+    const stat = statSync(full);
+    return {
+      size: knownSize ?? stat.size,
+      created_at: isoDate(stat.birthtimeMs),
+      updated_at: isoDate(stat.mtimeMs)
+    };
+  } catch {
+    return {};
+  }
+}
+function gitFileMetadata(ref, path, knownSize) {
+  const size = knownSize ?? rawFileSize(path, ref);
+  const commitUpdatedAt = lastCommitDateForPath(ref, path, cwd) || undefined;
+  return {
+    size: size == null ? undefined : size,
+    updated_at: commitUpdatedAt,
+    commit_updated_at: commitUpdatedAt
+  };
+}
+function directoryMetadata(target, path) {
+  if (target === "worktree" || target === "") {
+    const full = path === "" ? safeOpenWorktreePath("") : safeWorktreePath(path);
+    if (!full)
+      return {};
+    try {
+      const stat = statSync(full);
+      return {
+        created_at: isoDate(stat.birthtimeMs),
+        updated_at: isoDate(stat.mtimeMs)
+      };
+    } catch {
+      return {};
+    }
+  }
+  const commitUpdatedAt = lastCommitDateForPath(target, path || ".", cwd) || undefined;
+  return { updated_at: commitUpdatedAt, commit_updated_at: commitUpdatedAt };
+}
+function fileMetadataForTarget(target, path) {
+  return target === "worktree" || target === "" ? worktreeFileMetadata(path) : gitFileMetadata(target, path);
+}
+function attachTreeEntryMetadata(target, entry) {
+  if (entry.type === "tree")
+    return { ...entry, ...directoryMetadata(target, entry.path) };
+  if (entry.type !== "blob")
+    return entry;
+  return { ...entry, ...fileMetadataForTarget(target, entry.path) };
+}
+function fileMetadataHeaders(metadata) {
+  const headers = {};
+  if (metadata.created_at)
+    headers["X-Code-Viewer-Created-At"] = metadata.created_at;
+  if (metadata.updated_at)
+    headers["X-Code-Viewer-Updated-At"] = metadata.updated_at;
+  if (metadata.commit_updated_at)
+    headers["X-Code-Viewer-Commit-Updated-At"] = metadata.commit_updated_at;
+  return headers;
+}
 function readReadme(target, dirPath) {
   const candidates = ["README.md", "readme.md", "README.markdown", "README"];
   for (const name of candidates) {
@@ -1735,7 +1807,7 @@ function handleTree(url) {
     path,
     project: basename2(cwd),
     branch: currentBranch(cwd) || undefined,
-    entries,
+    entries: recursive ? entries : entries.map((entry) => attachTreeEntryMetadata(target, entry)),
     readme: readReadme(target, path),
     upload_enabled: allowUpload && (target === "worktree" || target === "")
   });
@@ -2169,13 +2241,18 @@ function handleRawFile(req, url) {
     const size = rawFileSize(path, ref);
     if (size == null)
       return text("not in ref", 404);
+    const metadata = gitFileMetadata(ref, path, size);
     if (req.method === "HEAD")
-      return new Response(null, { headers: rawFileHeaders(path, size) });
+      return new Response(null, {
+        headers: rawFileHeaders(path, size, undefined, metadata)
+      });
     const res = showBytes(ref, path, cwd);
     if (res.code !== 0)
       return text("not in ref", 404);
     body = res.stdout.buffer.slice(res.stdout.byteOffset, res.stdout.byteOffset + res.stdout.byteLength);
-    return new Response(body, { headers: rawFileHeaders(path, size) });
+    return new Response(body, {
+      headers: rawFileHeaders(path, size, undefined, metadata)
+    });
   } else {
     const full = safeWorktreePath(path);
     if (!full)
@@ -2183,12 +2260,13 @@ function handleRawFile(req, url) {
     const size = rawFileSize(path, ref);
     if (size == null)
       return text("not found", 404);
+    const metadata = worktreeFileMetadata(path, size);
     const rangeResult = req.headers.get("range") ? parseHttpByteRange(req.headers.get("range"), size) : null;
     if (rangeResult?.kind === "unsatisfiable") {
       return new Response(null, {
         status: 416,
         headers: {
-          ...rawFileHeaders(path, size),
+          ...rawFileHeaders(path, size, undefined, metadata),
           "Content-Range": `bytes */${size}`,
           "Content-Length": "0"
         }
@@ -2199,18 +2277,20 @@ function handleRawFile(req, url) {
       if (req.method === "HEAD") {
         return new Response(null, {
           status: 206,
-          headers: rawFileHeaders(path, size, range)
+          headers: rawFileHeaders(path, size, range, metadata)
         });
       }
       return new Response(fileByteRangeResponseBody(full, range.start, range.end), {
         status: 206,
-        headers: rawFileHeaders(path, size, range)
+        headers: rawFileHeaders(path, size, range, metadata)
       });
     }
     if (req.method === "HEAD")
-      return new Response(null, { headers: rawFileHeaders(path, size) });
+      return new Response(null, {
+        headers: rawFileHeaders(path, size, undefined, metadata)
+      });
     return new Response(fileReadableStream(full), {
-      headers: rawFileHeaders(path, size)
+      headers: rawFileHeaders(path, size, undefined, metadata)
     });
   }
 }
@@ -2230,7 +2310,7 @@ function rawFileSize(path, ref) {
     return null;
   }
 }
-function rawFileHeaders(path, size = null, range) {
+function rawFileHeaders(path, size = null, range, metadata = {}) {
   const mime = {
     ".png": "image/png",
     ".jpg": "image/jpeg",
@@ -2263,6 +2343,9 @@ function rawFileHeaders(path, size = null, range) {
   } else if (size != null) {
     headers["Content-Length"] = String(size);
   }
+  for (const [key, value] of Object.entries(fileMetadataHeaders(metadata))) {
+    headers[key] = value;
+  }
   return headers;
 }
 function isForbiddenUploadName(name) {

package/package.json

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

package/web/app.js

@@ -6942,6 +6942,10 @@ ${frontmatter.yaml}
     let SIDEBAR_ROW_BY_PATH = new Map;
     let SIDEBAR_VIRTUAL_ACTIVE_PATH = "";
     const SIDEBAR_TREE_ITEMS_CACHE = new WeakMap;
+    let REPO_SORT = {
+      key: "name",
+      direction: "asc"
+    };
     let SERVER_SCOPE_OMIT_DIRS_DEFAULT = [];
     let PENDING_G_SCOPE = null;
     let PENDING_G_UNTIL = 0;
@@ -9130,69 +9134,81 @@ ${frontmatter.yaml}
       if (meta.upload_enabled && (meta.ref === "worktree" || meta.ref === "")) {
         listWrapper.appendChild(createRepoUploadPanel(meta.path || ""));
       }
+      const sortHost = document.createElement("div");
+      sortHost.className = "gdp-repo-sort-host";
       const list2 = document.createElement("div");
       list2.className = "gdp-source-viewer gdp-repo-file-list";
-      if (meta.path) {
-        const parent = meta.path.split("/").slice(0, -1).join("/");
-        const row = document.createElement("button");
-        row.type = "button";
-        row.className = "gdp-repo-row parent";
-        const parentIcon = document.createElement("span");
-        parentIcon.className = "dir-icon";
-        setFolderIcon(parentIcon, false);
-        const parentName = document.createElement("span");
-        parentName.className = "name";
-        parentName.textContent = "..";
-        const parentKind = document.createElement("span");
-        parentKind.className = "kind";
-        parentKind.textContent = "parent";
-        row.append(parentIcon, parentName, parentKind);
-        row.addEventListener("click", () => {
-          setRoute(repoRoute(meta.ref, parent));
-          loadRepo();
-        });
-        list2.appendChild(row);
-      }
-      meta.entries.forEach((entry) => {
-        const row = document.createElement("button");
-        row.type = "button";
-        row.className = `gdp-repo-row ${entry.type}`;
-        const icon = document.createElement("span");
-        icon.className = entry.type === "tree" ? "dir-icon" : "d2h-icon-wrapper";
-        if (entry.type === "tree")
-          setFolderIcon(icon, true);
-        else
-          icon.innerHTML = fileEntryIcon();
-        const name = document.createElement("span");
-        name.className = "name";
-        name.textContent = entry.name;
-        const kind = document.createElement("span");
-        kind.className = "kind";
-        kind.textContent = entry.type === "tree" ? "directory" : entry.type === "commit" ? "submodule" : "file";
-        row.append(icon, name, kind);
-        row.addEventListener("click", () => {
-          if (entry.type === "tree") {
-            setRoute(repoRoute(meta.ref, entry.path));
+      const renderRepoRows = (focusSortKey) => {
+        sortHost.replaceChildren(createRepoSortHeader(renderRepoRows));
+        if (focusSortKey) {
+          sortHost.querySelector(`[data-repo-sort="${focusSortKey}"]`)?.focus();
+        }
+        list2.replaceChildren();
+        if (meta.path) {
+          const parent = meta.path.split("/").slice(0, -1).join("/");
+          const row = document.createElement("button");
+          row.type = "button";
+          row.className = "gdp-repo-row parent";
+          const parentIcon = document.createElement("span");
+          parentIcon.className = "dir-icon";
+          setFolderIcon(parentIcon, false);
+          const parentName = document.createElement("span");
+          parentName.className = "name";
+          parentName.textContent = "..";
+          const parentKind = document.createElement("span");
+          parentKind.className = "meta";
+          parentKind.textContent = "";
+          const parentSize = document.createElement("span");
+          parentSize.className = "size";
+          row.append(parentIcon, parentName, parentKind, parentSize);
+          row.addEventListener("click", () => {
+            setRoute(repoRoute(meta.ref, parent));
             loadRepo();
-          } else if (entry.type === "blob") {
-            setRoute({
-              screen: "file",
-              path: entry.path,
-              ref: meta.ref,
-              view: "blob",
-              range: currentRange()
-            });
-            renderStandaloneSource({ path: entry.path, ref: meta.ref });
-          }
+          });
+          list2.appendChild(row);
+        }
+        sortedRepoEntries(meta.entries).forEach((entry) => {
+          const row = document.createElement("button");
+          row.type = "button";
+          row.className = `gdp-repo-row ${entry.type}`;
+          const icon = document.createElement("span");
+          icon.className = entry.type === "tree" ? "dir-icon" : "d2h-icon-wrapper";
+          if (entry.type === "tree")
+            setFolderIcon(icon, true);
+          else
+            icon.innerHTML = fileEntryIcon();
+          const name = document.createElement("span");
+          name.className = "name";
+          name.textContent = entry.name;
+          const metaBlock = createRepoEntryMeta(entry);
+          const size = createRepoEntrySize(entry);
+          row.append(icon, name, metaBlock, size);
+          row.addEventListener("click", () => {
+            if (entry.type === "tree") {
+              setRoute(repoRoute(meta.ref, entry.path));
+              loadRepo();
+            } else if (entry.type === "blob") {
+              setRoute({
+                screen: "file",
+                path: entry.path,
+                ref: meta.ref,
+                view: "blob",
+                range: currentRange()
+              });
+              renderStandaloneSource({ path: entry.path, ref: meta.ref });
+            }
+          });
+          list2.appendChild(row);
         });
-        list2.appendChild(row);
-      });
-      if (!meta.entries.length) {
-        const empty = document.createElement("div");
-        empty.className = "gdp-repo-empty";
-        empty.textContent = "No files in this directory.";
-        list2.appendChild(empty);
-      }
+        if (!meta.entries.length) {
+          const empty = document.createElement("div");
+          empty.className = "gdp-repo-empty";
+          empty.textContent = "No files in this directory.";
+          list2.appendChild(empty);
+        }
+      };
+      listWrapper.appendChild(sortHost);
+      renderRepoRows();
       listWrapper.appendChild(list2);
       listCard.appendChild(listWrapper);
       shell.appendChild(listCard);
@@ -10335,6 +10351,117 @@ ${frontmatter.yaml}
       }
       return (unit === 0 ? String(value) : value.toFixed(value >= 10 ? 1 : 2).replace(/\.0+$/, "")) + " " + units[unit];
     }
+    function formatFileDate(value) {
+      if (!value)
+        return "";
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime()))
+        return "";
+      return date.toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    }
+    function createRepoEntryMeta(entry) {
+      const meta = document.createElement("span");
+      meta.className = "meta";
+      const updated = formatFileDate(entry.updated_at || entry.commit_updated_at);
+      const created = formatFileDate(entry.created_at);
+      if (entry.type === "tree" && updated) {
+        meta.textContent = updated;
+        if (created)
+          meta.title = `Created ${created}`;
+        return meta;
+      }
+      if (entry.type !== "blob") {
+        meta.textContent = "-";
+        return meta;
+      }
+      meta.textContent = updated ? updated : created ? created : "-";
+      if (created)
+        meta.title = `Created ${created}`;
+      return meta;
+    }
+    function createRepoEntrySize(entry) {
+      const size = document.createElement("span");
+      size.className = "size";
+      size.textContent = entry.type === "blob" && entry.size != null ? formatBytes(entry.size) : "";
+      return size;
+    }
+    function repoEntryUpdatedTime(entry) {
+      const raw = entry.updated_at || entry.commit_updated_at || entry.created_at;
+      if (!raw)
+        return -1;
+      const time = new Date(raw).getTime();
+      return Number.isNaN(time) ? -1 : time;
+    }
+    function sortedRepoEntries(entries) {
+      const direction = REPO_SORT.direction === "asc" ? 1 : -1;
+      return [...entries].sort((a2, b2) => {
+        if (REPO_SORT.key === "name" && a2.type !== b2.type) {
+          if (a2.type === "tree")
+            return -1;
+          if (b2.type === "tree")
+            return 1;
+        }
+        let result = 0;
+        if (REPO_SORT.key === "updated") {
+          const aTime = repoEntryUpdatedTime(a2);
+          const bTime = repoEntryUpdatedTime(b2);
+          if (aTime < 0 && bTime >= 0)
+            return 1;
+          if (bTime < 0 && aTime >= 0)
+            return -1;
+          result = aTime - bTime;
+        } else if (REPO_SORT.key === "size") {
+          if (a2.size == null && b2.size != null)
+            return 1;
+          if (b2.size == null && a2.size != null)
+            return -1;
+          result = (a2.size ?? 0) - (b2.size ?? 0);
+        } else {
+          result = a2.name.localeCompare(b2.name);
+        }
+        if (result === 0)
+          result = a2.name.localeCompare(b2.name);
+        return result * direction;
+      });
+    }
+    function createRepoSortHeader(onSortChange) {
+      const header = document.createElement("div");
+      header.className = "gdp-repo-sort-header";
+      const spacer = document.createElement("span");
+      spacer.className = "gdp-repo-sort-spacer";
+      header.appendChild(spacer);
+      const columns = [
+        { key: "name", label: "Name" },
+        { key: "updated", label: "Updated" },
+        { key: "size", label: "Size" }
+      ];
+      columns.forEach((column) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.dataset.repoSort = column.key;
+        button.textContent = column.label + (REPO_SORT.key === column.key ? REPO_SORT.direction === "asc" ? " ↑" : " ↓" : "");
+        button.className = REPO_SORT.key === column.key ? "active" : "";
+        button.addEventListener("click", () => {
+          if (REPO_SORT.key === column.key) {
+            REPO_SORT.direction = REPO_SORT.direction === "asc" ? "desc" : "asc";
+          } else {
+            REPO_SORT = {
+              key: column.key,
+              direction: column.key === "name" ? "asc" : "desc"
+            };
+          }
+          onSortChange(column.key);
+        });
+        header.appendChild(button);
+      });
+      return header;
+    }
     function humanFileKind(path, mime, fallback) {
       const ext = (path.split(".").pop() || "").toLowerCase();
       if (ext === "png")
@@ -10392,12 +10519,41 @@ ${frontmatter.yaml}
         const size = rawSize == null ? NaN : Number(rawSize);
         return {
           size: rawSize != null && Number.isFinite(size) ? size : undefined,
-          type: res.headers.get("content-type") || undefined
+          type: res.headers.get("content-type") || undefined,
+          created_at: res.headers.get("x-code-viewer-created-at") || undefined,
+          updated_at: res.headers.get("x-code-viewer-updated-at") || undefined,
+          commit_updated_at: res.headers.get("x-code-viewer-commit-updated-at") || undefined
         };
       } catch {
         return {};
       }
     }
+    function createFileDetailMeta(target, meta) {
+      const wrap = document.createElement("div");
+      wrap.className = "gdp-file-detail-meta";
+      const addItem = (label, value) => {
+        if (!value)
+          return;
+        const item = document.createElement("span");
+        item.className = "gdp-file-detail-meta-item";
+        const labelEl = document.createElement("span");
+        labelEl.className = "label";
+        labelEl.textContent = label;
+        const valueEl = document.createElement("span");
+        valueEl.className = "value";
+        valueEl.textContent = value;
+        item.append(labelEl, valueEl);
+        wrap.appendChild(item);
+      };
+      addItem("Size", meta.size == null ? "" : formatBytes(meta.size));
+      addItem("Updated", formatFileDate(meta.updated_at || meta.commit_updated_at));
+      addItem("Created", formatFileDate(meta.created_at));
+      if (!wrap.childElementCount) {
+        wrap.hidden = true;
+        wrap.dataset.path = target.path;
+      }
+      return wrap;
+    }
     function createSourceFileInfo(target, kind) {
       const info = document.createElement("div");
       info.className = "gdp-source-file-info";
@@ -11423,6 +11579,11 @@ ${frontmatter.yaml}
       name.appendChild(copy);
       name.appendChild(createOpenPathButton(target.path, "file-parent", "open parent folder in OS"));
       header.appendChild(name);
+      loadRawFileInfo(target).then((meta) => {
+        if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+          return;
+        header.appendChild(createFileDetailMeta(target, meta));
+      });
       if (!repoTarget) {
         const back = document.createElement("button");
         back.type = "button";

package/web/style.css

@@ -2515,6 +2515,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
 .gdp-file-detail-header {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
   min-height: 34px;
   margin-bottom: 0;
@@ -2589,6 +2590,39 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   flex-shrink: 0;
   color: var(--fg-muted);
 }
+.gdp-file-detail-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+.gdp-file-detail-meta-item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 0 10px;
+  border-right: 1px solid var(--border-muted);
+  white-space: nowrap;
+}
+.gdp-file-detail-meta-item:first-child {
+  padding-left: 0;
+}
+.gdp-file-detail-meta-item:last-child {
+  border-right: 0;
+  padding-right: 0;
+}
+.gdp-file-detail-meta-item .label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fg-subtle);
+}
+.gdp-file-detail-meta-item .value {
+  color: var(--fg);
+  font-weight: 500;
+}
 .gdp-markdown-preview {
   width: 100%;
   max-width: none;
@@ -2998,7 +3032,7 @@ body.gdp-file-detail-page.gdp-repo-blob-page .sb-head {
   justify-content: stretch;
   align-items: center;
   gap: 8px;
-  top: var(--global-header-h);
+  top: 0;
   z-index: 5;
 }
 body.gdp-repo-page .sb-head > #sidebar-toggle,
@@ -3124,10 +3158,46 @@ body.gdp-file-detail-page #empty {
   padding: 0;
   overflow: hidden;
 }
+.gdp-repo-sort-header {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) minmax(150px, 220px) 80px;
+  column-gap: 8px;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 14px;
+  border-top: 1px solid var(--border-muted);
+  border-bottom: 1px solid var(--border-muted);
+  background: var(--bg-soft);
+}
+.gdp-repo-sort-spacer {
+  display: block;
+}
+.gdp-repo-sort-header button {
+  appearance: none;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  line-height: 20px;
+  padding: 0;
+}
+.gdp-repo-sort-header button:hover,
+.gdp-repo-sort-header button.active {
+  color: var(--fg);
+}
+.gdp-repo-sort-header button[data-repo-sort="size"] {
+  text-align: right;
+}
 .gdp-repo-row {
   display: grid;
-  grid-template-columns: 28px minmax(0, 1fr) 120px;
+  grid-template-columns: 28px minmax(0, 1fr) minmax(150px, 220px) 80px;
   align-items: center;
+  column-gap: 8px;
   width: 100%;
   min-height: 42px;
   border: 0;
@@ -3173,6 +3243,20 @@ body.gdp-file-detail-page #empty {
   color: var(--fg-muted);
   font-size: 12px;
 }
+.gdp-repo-row .meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+.gdp-repo-row .size {
+  justify-self: end;
+  min-width: 0;
+  color: var(--fg-muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
 .gdp-repo-empty {
   padding: 32px;
   color: var(--fg-muted);