living-documentation 7.6.0 → 7.8.0

package/dist/src/frontend/accuracy-gauge.js

@@ -0,0 +1,47 @@
+// ── Accuracy gauge ──────────────────────────────────────────────────────────
+// Shown in the sticky document header (right-aligned, own row) when the
+// current document has at least one metadata entry.
+
+function accuracyColor(ratio) {
+  const pct = Math.max(0, Math.min(1, ratio)) * 100;
+  if (pct > 80) return "#16a34a"; // green-600
+  if (pct >= 60) return "#eab308"; // yellow-500
+  if (pct >= 40) return "#f97316"; // orange-500
+  return "#dc2626"; // red-600
+}
+
+function renderAccuracyGauge(report) {
+  const wrap = document.getElementById("accuracy-gauge");
+  if (!wrap) return;
+  if (!report || report.total === 0) {
+    wrap.classList.add("hidden");
+    return;
+  }
+  wrap.classList.remove("hidden");
+
+  const pct = Math.round(report.accuracy * 100);
+  const color = accuracyColor(report.accuracy);
+
+  const label = document.getElementById("accuracy-gauge-label");
+  const bar = document.getElementById("accuracy-gauge-bar");
+  const value = document.getElementById("accuracy-gauge-value");
+
+  if (label) label.textContent = window.t("accuracy.label");
+  if (bar) {
+    bar.style.width = pct + "%";
+    bar.style.backgroundColor = color;
+  }
+  if (value) {
+    value.textContent = pct + "%";
+    value.style.color = color;
+  }
+
+  wrap.title = window
+    .t("accuracy.tooltip")
+    .replace("{unchanged}", String(report.unchanged))
+    .replace("{modified}", String(report.modified))
+    .replace("{missing}", String(report.missing))
+    .replace("{total}", String(report.total));
+}
+
+window.renderAccuracyGauge = renderAccuracyGauge;

package/dist/src/frontend/boot.js

@@ -12,6 +12,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   setupSearch();
   wcRestorePrefs();
   if (typeof initFileAttach === "function") initFileAttach();
+  if (typeof initSidebarResize === "function") initSidebarResize();
   await loadConfig();
   if (typeof initMarkerState === "function") initMarkerState();
   if (typeof initFullWidthState === "function") initFullWidthState();

package/dist/src/frontend/documents.js

@@ -164,6 +164,11 @@ async function openDocument(id, skipHistory = false, fromLink = false, anchor =
     // Load annotations for this document
     loadAnnotations(id);
 
+    // Load source-file metadata report (drives the accuracy gauge)
+    if (typeof loadMetadataReport === "function") {
+      loadMetadataReport(id);
+    }
+
     // Add IDs to headings for anchor navigation
     contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach((h) => {
       if (!h.id) {

package/dist/src/frontend/i18n/en.json

@@ -69,6 +69,20 @@
   "doc.failed_to_load": "Failed to load document: ",
   "doc.copied": "✓ Copied!",
 
+  "metadata.button": "Metadata",
+  "metadata.button_title": "Manage source-file metadata",
+  "metadata.title": "Source metadata",
+  "metadata.subtitle": "Attach source files to track whether this document is still accurate.",
+  "metadata.add": "Add source file",
+  "metadata.refresh": "Refresh hashes",
+  "metadata.remove": "Remove",
+  "metadata.empty": "No metadata yet — add a source file to start tracking accuracy.",
+  "metadata.status.unchanged": "Unchanged",
+  "metadata.status.modified": "Modified",
+  "metadata.status.missing": "Missing",
+  "accuracy.label": "Accuracy",
+  "accuracy.tooltip": "Unchanged: {unchanged} · Modified: {modified} · Missing: {missing} · Total: {total}",
+
   "modal.new_folder.title": "New folder",
   "modal.new_folder.name_label": "Folder name",
   "modal.new_folder.name_placeholder": "my-folder",

package/dist/src/frontend/i18n/fr.json

@@ -69,6 +69,20 @@
   "doc.failed_to_load": "Impossible de charger le document : ",
   "doc.copied": "✓ Copié !",
 
+  "metadata.button": "Métadonnées",
+  "metadata.button_title": "Gérer les métadonnées des fichiers source",
+  "metadata.title": "Métadonnées des sources",
+  "metadata.subtitle": "Rattachez des fichiers source pour suivre si ce document reste à jour.",
+  "metadata.add": "Ajouter un fichier source",
+  "metadata.refresh": "Rafraîchir les hashs",
+  "metadata.remove": "Retirer",
+  "metadata.empty": "Aucune métadonnée — ajoutez un fichier source pour commencer à suivre la justesse.",
+  "metadata.status.unchanged": "Inchangé",
+  "metadata.status.modified": "Modifié",
+  "metadata.status.missing": "Manquant",
+  "accuracy.label": "Justesse",
+  "accuracy.tooltip": "Inchangés : {unchanged} · Modifiés : {modified} · Manquants : {missing} · Total : {total}",
+
   "modal.new_folder.title": "Nouveau dossier",
   "modal.new_folder.name_label": "Nom du dossier",
   "modal.new_folder.name_placeholder": "mon-dossier",

package/dist/src/frontend/index.html

@@ -40,6 +40,7 @@
     <script defer src="/dark-mode.js"></script>
     <script defer src="/config.js"></script>
     <script defer src="/sidebar.js"></script>
+    <script defer src="/sidebar-resize.js"></script>
     <script defer src="/search.js"></script>
     <script defer src="/image-paste.js"></script>
     <script defer src="/file-attach.js"></script>
@@ -47,6 +48,8 @@
     <script defer src="/misc.js"></script>
     <script defer src="/snippets.js"></script>
     <script defer src="/annotations.js"></script>
+    <script defer src="/metadata.js"></script>
+    <script defer src="/accuracy-gauge.js"></script>
     <script defer src="/export.js"></script>
     <script defer src="/diagram-link-modal.js"></script>
     <script defer src="/new-folder-modal.js"></script>
@@ -573,6 +576,15 @@
                     >
                       <i class="fa-solid fa-link"></i> <span data-i18n="doc.copy_link_btn">Copy link</span>
                     </button>
+                    <button
+                      onclick="openMetadataModal()"
+                      id="metadata-btn"
+                      data-i18n-title="metadata.button_title"
+                      title="Manage source-file metadata"
+                      class="no-print text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <i class="fa-solid fa-code-compare"></i> <span data-i18n="metadata.button">Metadata</span>
+                    </button>
                     <button
                       onclick="enterEditMode()"
                       data-i18n-title="doc.edit"
@@ -620,6 +632,33 @@
                   </div>
                 </div>
               </div>
+              <!-- Accuracy gauge (shown when the current doc has metadata entries) -->
+              <div
+                id="accuracy-gauge"
+                onclick="openMetadataModal()"
+                class="hidden no-print mt-3 flex items-center gap-3 ml-auto w-full sm:w-80 cursor-pointer select-none"
+              >
+                <span
+                  id="accuracy-gauge-label"
+                  data-i18n="accuracy.label"
+                  class="text-xs text-gray-500 dark:text-gray-400 shrink-0"
+                >Accuracy</span>
+                <div
+                  class="flex-1 h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden"
+                >
+                  <div
+                    id="accuracy-gauge-bar"
+                    class="h-full transition-all"
+                    style="width: 0%; background-color: #9ca3af"
+                  ></div>
+                </div>
+                <span
+                  id="accuracy-gauge-value"
+                  class="text-xs font-semibold shrink-0 tabular-nums"
+                  style="color: #9ca3af"
+                >0%</span>
+              </div>
+
               <!-- Navigation history back-links -->
               <div
                 id="doc-back"
@@ -660,6 +699,116 @@
     </div>
     <!-- end root -->
 
+    <!-- ── Metadata modal ── -->
+    <div
+      id="metadata-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    >
+      <div
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-2xl mx-4 p-6 space-y-4"
+      >
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-50">
+              <i class="fa-solid fa-code-compare mr-1"></i>
+              <span data-i18n="metadata.title">Source metadata</span>
+            </h3>
+            <p
+              data-i18n="metadata.subtitle"
+              class="text-xs text-gray-500 dark:text-gray-400 mt-1"
+            >
+              Attach source files to track whether this document is still accurate.
+            </p>
+          </div>
+          <button
+            onclick="closeMetadataModal()"
+            data-i18n-title="common.close"
+            title="Close"
+            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+          >
+            <i class="fa-solid fa-xmark text-lg"></i>
+          </button>
+        </div>
+
+        <!-- Summary -->
+        <div
+          id="metadata-summary"
+          class="text-xs text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 rounded-lg px-3 py-2"
+        ></div>
+
+        <!-- List -->
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+          <div
+            id="metadata-list"
+            class="max-h-64 overflow-y-auto"
+          ></div>
+          <div
+            id="metadata-empty"
+            data-i18n="metadata.empty"
+            class="hidden px-3 py-4 text-center text-xs text-gray-400"
+          >
+            No metadata yet — add a source file to start tracking accuracy.
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex items-center gap-2 flex-wrap">
+          <button
+            onclick="metadataToggleBrowser()"
+            class="text-sm px-3 py-1.5 rounded-lg border border-blue-200 dark:border-blue-700 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors"
+          >
+            <i class="fa-solid fa-plus"></i> <span data-i18n="metadata.add">Add source file</span>
+          </button>
+          <button
+            onclick="metadataRefresh()"
+            id="metadata-refresh-btn"
+            class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            <i class="fa-solid fa-arrows-rotate"></i> <span data-i18n="metadata.refresh">Refresh hashes</span>
+          </button>
+        </div>
+
+        <!-- Source browser -->
+        <div
+          id="metadata-browser"
+          class="hidden border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden text-sm"
+        >
+          <div
+            class="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+          >
+            <button
+              id="metadata-browse-up"
+              onclick="metadataBrowseUp()"
+              data-i18n="common.up"
+              class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0"
+            >
+              ↑ Up
+            </button>
+            <span
+              id="metadata-browse-path"
+              class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate flex-1"
+            ></span>
+          </div>
+          <div
+            id="metadata-browse-list"
+            class="max-h-56 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800"
+          ></div>
+        </div>
+
+        <p id="metadata-error" class="hidden text-xs text-red-500"></p>
+
+        <div class="flex justify-end">
+          <button
+            onclick="closeMetadataModal()"
+            data-i18n="common.close"
+            class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+
     <!-- ── New Folder modal ── -->
     <div
       id="new-folder-modal"

package/dist/src/frontend/metadata.js

@@ -0,0 +1,292 @@
+// ── Metadata (source-file dependencies) ─────────────────────────────────────
+// Exposes: openMetadataModal(), closeMetadataModal(),
+//          metadataRefresh(), metadataAddPath(), metadataRemovePath(),
+//          loadMetadataReport(docId) → used by accuracy-gauge.js
+
+let metadataReport = null;
+let metadataBrowseCurrent = ""; // relative to sourceRoot
+let metadataBrowseCache = null;
+
+function metadataCurrentDocId() {
+  return typeof currentDocId !== "undefined" ? currentDocId : null;
+}
+
+async function loadMetadataReport(docId) {
+  if (!docId) {
+    metadataReport = null;
+    return null;
+  }
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId),
+    );
+    if (!r.ok) throw new Error(r.statusText);
+    metadataReport = await r.json();
+  } catch {
+    metadataReport = null;
+  }
+  if (typeof renderAccuracyGauge === "function") {
+    renderAccuracyGauge(metadataReport);
+  }
+  return metadataReport;
+}
+
+function statusBadge(status) {
+  if (status === "unchanged") {
+    return `<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">
+      <i class="fa-solid fa-check"></i>
+      <span data-i18n="metadata.status.unchanged">Unchanged</span>
+    </span>`;
+  }
+  if (status === "modified") {
+    return `<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+      <i class="fa-solid fa-triangle-exclamation"></i>
+      <span data-i18n="metadata.status.modified">Modified</span>
+    </span>`;
+  }
+  return `<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
+    <i class="fa-solid fa-circle-xmark"></i>
+    <span data-i18n="metadata.status.missing">Missing</span>
+  </span>`;
+}
+
+function renderMetadataList() {
+  const listEl = document.getElementById("metadata-list");
+  const emptyEl = document.getElementById("metadata-empty");
+  if (!listEl || !emptyEl) return;
+
+  const items = (metadataReport && metadataReport.items) || [];
+  if (items.length === 0) {
+    listEl.innerHTML = "";
+    emptyEl.classList.remove("hidden");
+    return;
+  }
+  emptyEl.classList.add("hidden");
+
+  listEl.innerHTML = items
+    .map((it) => {
+      const safePath = esc(it.path);
+      return `<div class="flex items-center gap-2 px-3 py-2 border-b border-gray-100 dark:border-gray-800">
+        <div class="flex-1 min-w-0">
+          <div class="text-sm font-mono truncate text-gray-800 dark:text-gray-200" title="${safePath}">${safePath}</div>
+        </div>
+        ${statusBadge(it.status)}
+        <button
+          onclick="metadataRemovePath('${safePath.replace(/'/g, "\\'")}')"
+          data-i18n-title="metadata.remove"
+          title="Remove"
+          class="text-xs px-2 py-1 rounded-lg border border-red-200 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
+        >
+          <i class="fa-solid fa-trash"></i>
+        </button>
+      </div>`;
+    })
+    .join("");
+
+  if (typeof window.applyI18n === "function") window.applyI18n();
+}
+
+function renderMetadataSummary() {
+  const el = document.getElementById("metadata-summary");
+  if (!el) return;
+  if (!metadataReport || metadataReport.total === 0) {
+    el.textContent = "";
+    return;
+  }
+  const pct = Math.round(metadataReport.accuracy * 100);
+  const { total, unchanged, modified, missing } = metadataReport;
+  el.innerHTML = `<span class="font-semibold">${pct}%</span> · ${unchanged}/${total} ${window.t("metadata.status.unchanged")} · ${modified} ${window.t("metadata.status.modified")} · ${missing} ${window.t("metadata.status.missing")}`;
+}
+
+async function openMetadataModal() {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  await loadMetadataReport(docId);
+  renderMetadataList();
+  renderMetadataSummary();
+  document.getElementById("metadata-modal").classList.remove("hidden");
+  document.getElementById("metadata-error").classList.add("hidden");
+  // Reset browser
+  metadataBrowseCurrent = "";
+  metadataBrowseCache = null;
+  document.getElementById("metadata-browser").classList.add("hidden");
+}
+
+function closeMetadataModal() {
+  document.getElementById("metadata-modal").classList.add("hidden");
+}
+
+async function metadataRefresh() {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  const btn = document.getElementById("metadata-refresh-btn");
+  if (btn) btn.disabled = true;
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId) + "/refresh",
+      { method: "POST" },
+    );
+    if (!r.ok) throw new Error(r.statusText);
+    metadataReport = await r.json();
+    renderMetadataList();
+    renderMetadataSummary();
+    if (typeof renderAccuracyGauge === "function") {
+      renderAccuracyGauge(metadataReport);
+    }
+  } catch (err) {
+    showMetadataError(err.message);
+  } finally {
+    if (btn) btn.disabled = false;
+  }
+}
+
+async function metadataRemovePath(path) {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId),
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path }),
+      },
+    );
+    if (!r.ok) throw new Error(r.statusText);
+    metadataReport = await r.json();
+    renderMetadataList();
+    renderMetadataSummary();
+    if (typeof renderAccuracyGauge === "function") {
+      renderAccuracyGauge(metadataReport);
+    }
+    refreshBrowserIfOpen();
+  } catch (err) {
+    showMetadataError(err.message);
+  }
+}
+
+async function metadataAddPath(relPath) {
+  const docId = metadataCurrentDocId();
+  if (!docId) return;
+  try {
+    const r = await fetch(
+      "/api/metadata/" + encodeURIComponent(docId),
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: relPath }),
+      },
+    );
+    if (!r.ok) {
+      const body = await r.json().catch(() => ({}));
+      throw new Error(body.error || r.statusText);
+    }
+    metadataReport = await r.json();
+    renderMetadataList();
+    renderMetadataSummary();
+    if (typeof renderAccuracyGauge === "function") {
+      renderAccuracyGauge(metadataReport);
+    }
+    refreshBrowserIfOpen();
+  } catch (err) {
+    showMetadataError(err.message);
+  }
+}
+
+function refreshBrowserIfOpen() {
+  const b = document.getElementById("metadata-browser");
+  if (b && !b.classList.contains("hidden")) {
+    metadataBrowseLoad(metadataBrowseCurrent);
+  }
+}
+
+function showMetadataError(msg) {
+  const el = document.getElementById("metadata-error");
+  if (!el) return;
+  el.textContent = window.t("common.error_prefix") + msg;
+  el.classList.remove("hidden");
+  setTimeout(() => el.classList.add("hidden"), 5000);
+}
+
+// ── Source browser ─────────────────────────────────────────────────────────
+
+function metadataToggleBrowser() {
+  const b = document.getElementById("metadata-browser");
+  if (b.classList.contains("hidden")) {
+    b.classList.remove("hidden");
+    metadataBrowseLoad("");
+  } else {
+    b.classList.add("hidden");
+  }
+}
+
+async function metadataBrowseLoad(relPath) {
+  const listEl = document.getElementById("metadata-browse-list");
+  const pathEl = document.getElementById("metadata-browse-path");
+  const upBtn = document.getElementById("metadata-browse-up");
+  if (!listEl) return;
+  listEl.innerHTML = `<div class="px-3 py-2 text-xs text-gray-400">${esc(window.t("common.loading"))}</div>`;
+  try {
+    const r = await fetch(
+      "/api/browse-source?path=" + encodeURIComponent(relPath || ""),
+    );
+    if (!r.ok) {
+      const body = await r.json().catch(() => ({}));
+      throw new Error(body.error || r.statusText);
+    }
+    const data = await r.json();
+    metadataBrowseCache = data;
+    metadataBrowseCurrent = data.current || "";
+    pathEl.textContent = data.current ? "/" + data.current : "/ (sourceRoot)";
+    upBtn.disabled = data.parent === null;
+    upBtn.classList.toggle("opacity-30", data.parent === null);
+    upBtn.classList.toggle("pointer-events-none", data.parent === null);
+
+    const dirRows = data.dirs.map(
+      (d) => `<button
+        onclick="metadataBrowseLoad('${d.path.replace(/'/g, "\\'")}')"
+        class="w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-2"
+      >
+        <i class="fa-solid fa-folder text-yellow-500"></i>
+        <span class="truncate">${esc(d.name)}</span>
+      </button>`,
+    );
+    const attached = new Set(
+      ((metadataReport && metadataReport.items) || []).map((it) => it.path),
+    );
+    const fileRows = data.files
+      .filter((f) => !attached.has(f.path))
+      .map(
+        (f) => `<button
+        onclick="metadataAddPath('${f.path.replace(/'/g, "\\'")}')"
+        class="w-full text-left px-3 py-1.5 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/30 flex items-center gap-2"
+      >
+        <i class="fa-solid fa-file text-gray-400"></i>
+        <span class="truncate">${esc(f.name)}</span>
+        <i class="fa-solid fa-plus ml-auto text-blue-500 text-xs"></i>
+      </button>`,
+      );
+    const rows = [...dirRows, ...fileRows];
+    listEl.innerHTML = rows.length
+      ? rows.join("")
+      : `<div class="px-3 py-2 text-xs text-gray-400" data-i18n="common.empty_dir">${esc(window.t("common.empty_dir"))}</div>`;
+  } catch (err) {
+    listEl.innerHTML = `<div class="px-3 py-2 text-xs text-red-500">${esc(err.message)}</div>`;
+  }
+}
+
+function metadataBrowseUp() {
+  if (!metadataBrowseCache || metadataBrowseCache.parent === null) return;
+  metadataBrowseLoad(metadataBrowseCache.parent);
+}
+
+// Expose
+window.openMetadataModal = openMetadataModal;
+window.closeMetadataModal = closeMetadataModal;
+window.metadataRefresh = metadataRefresh;
+window.metadataRemovePath = metadataRemovePath;
+window.metadataAddPath = metadataAddPath;
+window.metadataToggleBrowser = metadataToggleBrowser;
+window.metadataBrowseLoad = metadataBrowseLoad;
+window.metadataBrowseUp = metadataBrowseUp;
+window.loadMetadataReport = loadMetadataReport;

package/dist/src/frontend/sidebar-resize.js

@@ -0,0 +1,98 @@
+// ── Sidebar horizontal resize ───────────────────────────────────────────────
+// Drag a handle on the sidebar's right edge to resize it.
+// Width is persisted in localStorage (`ld-sidebar-w`) across reloads.
+// The toggle (toggleSidebar) keeps working because it only flips the `hidden`
+// class — width stays intact on the element.
+
+(function () {
+  const STORAGE_KEY = "ld-sidebar-w";
+  const MIN_W = 200;
+  const MAX_W = 600;
+
+  function applyStoredWidth() {
+    const sidebar = document.getElementById("sidebar");
+    if (!sidebar) return;
+    let w = parseInt(localStorage.getItem(STORAGE_KEY) || "", 10);
+    if (!Number.isFinite(w)) return;
+    w = Math.max(MIN_W, Math.min(MAX_W, w));
+    sidebar.classList.remove("w-72");
+    sidebar.style.width = w + "px";
+  }
+
+  function initSidebarResize() {
+    const sidebar = document.getElementById("sidebar");
+    if (!sidebar) return;
+
+    applyStoredWidth();
+
+    const handle = document.createElement("div");
+    handle.id = "sidebar-resize-handle";
+    handle.setAttribute("aria-hidden", "true");
+    handle.style.cssText = [
+      "position:absolute",
+      "top:0",
+      "right:-2px",
+      "width:6px",
+      "height:100%",
+      "cursor:col-resize",
+      "z-index:20",
+      "user-select:none",
+      "background:transparent",
+      "transition:background 0.15s ease",
+    ].join(";");
+    handle.addEventListener("mouseenter", () => {
+      handle.style.background = "rgba(59,130,246,0.35)";
+    });
+    handle.addEventListener("mouseleave", () => {
+      if (!handle.dataset.dragging) handle.style.background = "transparent";
+    });
+
+    // Sidebar needs `relative` so the absolutely-positioned handle anchors to it.
+    sidebar.style.position = "relative";
+    sidebar.appendChild(handle);
+
+    let startX = 0;
+    let startW = 0;
+
+    function onMove(e) {
+      const dx = e.clientX - startX;
+      let w = startW + dx;
+      w = Math.max(MIN_W, Math.min(MAX_W, w));
+      sidebar.style.width = w + "px";
+    }
+
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      delete handle.dataset.dragging;
+      handle.style.background = "transparent";
+      const finalW = parseInt(sidebar.style.width, 10);
+      if (Number.isFinite(finalW)) {
+        try {
+          localStorage.setItem(STORAGE_KEY, String(finalW));
+        } catch {
+          /* ignore */
+        }
+      }
+    }
+
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      startX = e.clientX;
+      startW = sidebar.getBoundingClientRect().width;
+      // Drop the Tailwind width class so inline width takes over for good.
+      sidebar.classList.remove("w-72");
+      sidebar.style.width = startW + "px";
+      handle.dataset.dragging = "1";
+      handle.style.background = "rgba(59,130,246,0.55)";
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    });
+  }
+
+  window.initSidebarResize = initSidebarResize;
+})();