gator-command 1.0.0__py3-none-any.whl

gator_command/scripts/dashboard/views/repo.js

@@ -0,0 +1,599 @@
+/**
+ * repo.js — Repo view for Gator Dashboard.
+ *
+ * Markdown file browser for a repo's .gator/ knowledge layer.
+ * Secondary sidebar lists files, main content renders markdown.
+ * Default document: pulse.md (if it exists), otherwise mission.md.
+ */
+
+(function () {
+  "use strict";
+
+  window.GatorViews = window.GatorViews || {};
+
+  function escHtml(str) {
+    return String(str)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  // ── simple markdown renderer ──────────────────────────────────────────────
+  // Handles: headers, bold, italic, links, code blocks, inline code,
+  // lists, blockquotes, horizontal rules, tables. No external deps.
+
+  function renderMarkdown(md) {
+    let html = "";
+    const lines = md.split("\n");
+    let i = 0;
+    let inCodeBlock = false;
+    let codeLines = [];
+    let inList = false;
+
+    while (i < lines.length) {
+      const line = lines[i];
+
+      // Fenced code blocks
+      if (line.trimStart().startsWith("```")) {
+        if (inCodeBlock) {
+          html += '<pre class="md-code-block">' + escHtml(codeLines.join("\n")) + "</pre>\n";
+          codeLines = [];
+          inCodeBlock = false;
+        } else {
+          if (inList) { html += "</ul>\n"; inList = false; }
+          inCodeBlock = true;
+        }
+        i++;
+        continue;
+      }
+      if (inCodeBlock) {
+        codeLines.push(line);
+        i++;
+        continue;
+      }
+
+      // Blank line
+      if (line.trim() === "") {
+        if (inList) { html += "</ul>\n"; inList = false; }
+        i++;
+        continue;
+      }
+
+      // Horizontal rule
+      if (/^---+$/.test(line.trim()) || /^\*\*\*+$/.test(line.trim())) {
+        if (inList) { html += "</ul>\n"; inList = false; }
+        html += "<hr>\n";
+        i++;
+        continue;
+      }
+
+      // Headers
+      const hMatch = line.match(/^(#{1,6})\s+(.*)/);
+      if (hMatch) {
+        if (inList) { html += "</ul>\n"; inList = false; }
+        const level = hMatch[1].length;
+        html += `<h${level}>${inlineFormat(hMatch[2])}</h${level}>\n`;
+        i++;
+        continue;
+      }
+
+      // Blockquote
+      if (line.startsWith(">")) {
+        if (inList) { html += "</ul>\n"; inList = false; }
+        const text = line.replace(/^>\s?/, "");
+        html += `<blockquote class="md-blockquote">${inlineFormat(text)}</blockquote>\n`;
+        i++;
+        continue;
+      }
+
+      // Unordered list
+      if (/^\s*[-*+]\s+/.test(line)) {
+        if (!inList) { html += "<ul>\n"; inList = true; }
+        const text = line.replace(/^\s*[-*+]\s+/, "");
+        html += `<li>${inlineFormat(text)}</li>\n`;
+        i++;
+        continue;
+      }
+
+      // Ordered list
+      if (/^\s*\d+\.\s+/.test(line)) {
+        if (!inList) { html += "<ul>\n"; inList = true; }
+        const text = line.replace(/^\s*\d+\.\s+/, "");
+        html += `<li>${inlineFormat(text)}</li>\n`;
+        i++;
+        continue;
+      }
+
+      // Table detection
+      if (line.includes("|") && i + 1 < lines.length && /^\|?\s*[-:]+/.test(lines[i + 1])) {
+        if (inList) { html += "</ul>\n"; inList = false; }
+        html += renderTable(lines, i);
+        // Skip past table
+        while (i < lines.length && lines[i].includes("|")) i++;
+        continue;
+      }
+
+      // Paragraph
+      if (inList) { html += "</ul>\n"; inList = false; }
+      html += `<p>${inlineFormat(line)}</p>\n`;
+      i++;
+    }
+
+    if (inList) html += "</ul>\n";
+    if (inCodeBlock) {
+      html += '<pre class="md-code-block">' + escHtml(codeLines.join("\n")) + "</pre>\n";
+    }
+
+    return html;
+  }
+
+  function inlineFormat(text) {
+    // Order matters: bold before italic, links before other patterns
+    let s = escHtml(text);
+    // Images: ![alt](src) — must come before links
+    s = s.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, function (_, alt, src) {
+      // Resolve relative image paths through the file endpoint
+      if (!src.startsWith("http") && window._gatorRepoContext) {
+        const ctx = window._gatorRepoContext;
+        let imgPath = src;
+        if (ctx.currentDir && !src.startsWith("/")) {
+          imgPath = ctx.currentDir + "/" + src;
+        }
+        imgPath = imgPath.replace(/^\.\//, "");
+        // Route through binary file endpoint
+        src = "/api/repo/" + encodeURIComponent(ctx.repoName) + "/raw/" + imgPath.split("/").map(encodeURIComponent).join("/");
+      }
+      return '<img src="' + src + '" alt="' + alt + '" style="max-width:100%;margin:8px 0">';
+    });
+    // Links: [text](url)
+    s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+    // Bold: **text** or __text__
+    s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+    s = s.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+    // Italic: *text* or _text_
+    s = s.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+    // Inline code: `text`
+    s = s.replace(/`([^`]+)`/g, '<code class="md-inline-code">$1</code>');
+    return s;
+  }
+
+  function renderTable(lines, startIdx) {
+    let html = '<table class="md-table"><thead><tr>';
+    const headerCells = lines[startIdx].split("|").map(c => c.trim()).filter(Boolean);
+    for (const cell of headerCells) {
+      html += `<th>${inlineFormat(cell)}</th>`;
+    }
+    html += "</tr></thead><tbody>";
+
+    for (let j = startIdx + 2; j < lines.length; j++) {
+      if (!lines[j].includes("|")) break;
+      const cells = lines[j].split("|").map(c => c.trim()).filter(Boolean);
+      html += "<tr>";
+      for (const cell of cells) {
+        html += `<td>${inlineFormat(cell)}</td>`;
+      }
+      html += "</tr>";
+    }
+    html += "</tbody></table>\n";
+    return html;
+  }
+
+  // ── file grouping ─────────────────────────────────────────────────────────
+
+  // Priority order for file sidebar
+  const FILE_ORDER = [
+    "pulse.md", "mission.md", "roadmap.md", "inbox.md", "issues.md",
+    "whiteboard.md", "identity.md", "patterns.md",
+  ];
+
+  // Files to hide from the browser (infrastructure, not user content)
+  const HIDDEN_FILES = new Set([
+    "commit_draft.md", "constitution.md", "gator-start-up.md",
+    "commit_issues.md",
+  ]);
+
+  // Directories to hide entirely
+  const HIDDEN_DIRS = new Set(["scripts", "hooks"]);
+
+  // Default template files — only show user-created content in these dirs
+  const DEFAULT_PROCEDURES = new Set([
+    "charter-alignment.md", "enforcer-review.md", "field-guide-generation.md",
+    "knowledge-capture.md", "significance-check.md",
+  ]);
+
+  const DEFAULT_REFERENCE_NOTES = new Set([
+    "concierge-responses.md", "dangerous-patterns.md", "enforcer-configuration.md",
+    "example-project.md", "failure-modes-and-self-correction.md", "git-workflow.md",
+    "identity-and-ownership.md", "refactor-approach.md",
+    "what-gator-requires-from-a-model.md", "why-navigation-coding-feels-different.md",
+    "workflow-profiles.md",
+  ]);
+
+  function filterFiles(files) {
+    return files.filter(f => {
+      const dir = f.dir || "";
+      // Normalize: strip gator-command/ prefix for filter matching
+      const normDir = dir.replace(/^gator-command\//, "");
+
+      // Hide specific top-level files
+      if (!dir && HIDDEN_FILES.has(f.name)) return false;
+      if (dir === "gator-command/" && HIDDEN_FILES.has(f.name)) return false;
+      // Hide entire directories
+      const topDir = normDir.split("/")[0];
+      if (topDir && HIDDEN_DIRS.has(topDir)) return false;
+      // Hide default template files in procedures/ and reference-notes/
+      if (normDir === "procedures" && DEFAULT_PROCEDURES.has(f.name)) return false;
+      if (normDir === "reference-notes" && DEFAULT_REFERENCE_NOTES.has(f.name)) return false;
+      // In .gator/ source: hide templates/ and deploy/ (fleet repo scaffolding)
+      // In gator-command/ source: keep them (product source code)
+      if (f.source === ".gator" && normDir.startsWith("templates")) return false;
+      if (f.source === ".gator" && normDir.startsWith("deploy")) return false;
+      return true;
+    });
+  }
+
+  function sortFiles(files) {
+    const filtered = filterFiles(files);
+    const top = [];
+    const dirs = {};
+    const rest = [];
+
+    for (const f of filtered) {
+      const orderIdx = FILE_ORDER.indexOf(f.name);
+      if (!f.dir && orderIdx >= 0) {
+        top.push({ ...f, _order: orderIdx });
+      } else if (f.dir) {
+        if (!dirs[f.dir]) dirs[f.dir] = [];
+        dirs[f.dir].push(f);
+      } else {
+        rest.push(f);
+      }
+    }
+
+    top.sort((a, b) => a._order - b._order);
+    return { top, dirs, rest };
+  }
+
+  // ── main render ───────────────────────────────────────────────────────────
+
+  window.GatorViews.repo = function (data, container, repoName, version) {
+    const verLabel = version ? ` @ ${version.substring(0, 8)}` : "";
+    container.innerHTML = `
+      <div class="repo-browser">
+        <div class="repo-sidebar" id="repo-file-list">
+          <div class="repo-sidebar-header">${escHtml(repoName)}${version ? '<span class="muted" style="font-size:10px;margin-left:6px;">' + escHtml(verLabel) + '</span>' : ''}</div>
+          <div class="muted" style="padding:8px 12px;font-size:12px">Loading files...</div>
+        </div>
+        <div class="repo-sidebar-resize" id="repo-resize-handle"></div>
+        <div class="repo-content" id="repo-file-content">
+          <div class="muted" style="padding:40px;text-align:center">Select a file to view</div>
+        </div>
+      </div>
+    `;
+
+    loadFileList(repoName, container, version);
+  };
+
+  async function loadFileList(repoName, container, version) {
+    const sidebar = container.querySelector("#repo-file-list");
+    const content = container.querySelector("#repo-file-content");
+
+    try {
+      let filesUrl = `/api/repo/${encodeURIComponent(repoName)}/files`;
+      if (version) filesUrl += `?version=${encodeURIComponent(version)}`;
+      const resp = await fetch(filesUrl);
+      const data = await resp.json();
+
+      if (data.error) {
+        sidebar.innerHTML = `<div class="repo-sidebar-header">${escHtml(repoName)}</div><div class="muted" style="padding:8px 12px">${escHtml(data.error)}</div>`;
+        return;
+      }
+
+      const files = data.files || [];
+      const { top, dirs, rest } = sortFiles(files);
+
+      // Separate files by source: .gator, gator-command, source (repo)
+      const gatorTop = top.filter(f => f.source !== "repo" && !f.dir?.startsWith("gator-command"));
+      const gatorRest = rest.filter(f => f.source !== "repo" && !f.dir?.startsWith("gator-command"));
+      const gatorDirs = {};
+      const gcDirs = {};
+      const sourceDirs = {};
+      for (const [dir, items] of Object.entries(dirs)) {
+        if (dir.startsWith("source")) {
+          sourceDirs[dir] = items;
+        } else if (dir.startsWith("gator-command")) {
+          gcDirs[dir] = items;
+        } else {
+          gatorDirs[dir] = items;
+        }
+      }
+
+      let html = `<div class="repo-sidebar-header">${escHtml(repoName)}</div>`;
+
+      // ── .gator/ section (collapsible, open by default)
+      const hasGator = gatorTop.length > 0 || gatorRest.length > 0 || Object.keys(gatorDirs).length > 0;
+      if (hasGator) {
+        html += `<button class="repo-sidebar-section" data-group="section-gator"><span class="group-arrow">&#9662;</span> .gator/</button>`;
+        html += `<div class="repo-dir-contents" id="section-gator">`;
+        for (const f of gatorTop) html += fileItem(repoName, f);
+        for (const f of gatorRest) html += fileItem(repoName, f);
+        for (const dir of Object.keys(gatorDirs).sort()) {
+          const groupId = "dir-" + dir.replace(/[^a-zA-Z0-9]/g, "-");
+          html += `<button class="repo-sidebar-group" data-group="${groupId}"><span class="group-arrow">&#9656;</span> ${escHtml(dir)}/</button>`;
+          html += `<div class="repo-dir-contents" id="${groupId}" style="display:none">`;
+          for (const f of gatorDirs[dir]) html += fileItem(repoName, f, true);
+          html += `</div>`;
+        }
+        html += `</div>`;
+      }
+
+      // ── gator-command/ section (command-post repos only, collapsible)
+      const gcTopFiles = top.filter(f => f.dir?.startsWith("gator-command") && !f.dir?.includes("/"));
+      const hasGc = gcTopFiles.length > 0 || Object.keys(gcDirs).length > 0;
+      if (hasGc) {
+        html += `<button class="repo-sidebar-section" data-group="section-gc"><span class="group-arrow">&#9656;</span> gator-command/</button>`;
+        html += `<div class="repo-dir-contents" id="section-gc" style="display:none">`;
+        // Top-level gator-command files
+        const gcRoot = gcDirs["gator-command"] || [];
+        for (const f of gcRoot) html += fileItem(repoName, f);
+        // Subdirectories
+        for (const dir of Object.keys(gcDirs).sort()) {
+          if (dir === "gator-command") continue;
+          const groupId = "dir-" + dir.replace(/[^a-zA-Z0-9]/g, "-");
+          html += `<button class="repo-sidebar-group" data-group="${groupId}"><span class="group-arrow">&#9656;</span> ${escHtml(dir.replace("gator-command/", ""))}/</button>`;
+          html += `<div class="repo-dir-contents" id="${groupId}" style="display:none">`;
+          for (const f of gcDirs[dir]) html += fileItem(repoName, f, true);
+          html += `</div>`;
+        }
+        html += `</div>`;
+      }
+
+      // ── source/ section (repo code, collapsible, collapsed by default)
+      const hasSource = Object.keys(sourceDirs).length > 0;
+      if (hasSource) {
+        html += `<button class="repo-sidebar-section" data-group="section-source"><span class="group-arrow">&#9656;</span> source/</button>`;
+        html += `<div class="repo-dir-contents" id="section-source" style="display:none">`;
+        // Root source files
+        const srcRoot = sourceDirs["source"] || [];
+        for (const f of srcRoot) html += fileItem(repoName, f);
+        // Subdirectories
+        for (const dir of Object.keys(sourceDirs).sort()) {
+          if (dir === "source") continue;
+          const groupId = "dir-" + dir.replace(/[^a-zA-Z0-9]/g, "-");
+          const shortDir = dir.replace("source/", "");
+          html += `<button class="repo-sidebar-group" data-group="${groupId}"><span class="group-arrow">&#9656;</span> ${escHtml(shortDir)}/</button>`;
+          html += `<div class="repo-dir-contents" id="${groupId}" style="display:none">`;
+          for (const f of sourceDirs[dir]) html += fileItem(repoName, f, true);
+          html += `</div>`;
+        }
+        html += `</div>`;
+      }
+
+      sidebar.innerHTML = html;
+
+      // Section and directory collapse/expand handlers
+      sidebar.querySelectorAll(".repo-sidebar-section, .repo-sidebar-group").forEach(group => {
+        group.addEventListener("click", function () {
+          const contents = document.getElementById(this.dataset.group);
+          const arrow = this.querySelector(".group-arrow");
+          if (contents.style.display === "none") {
+            contents.style.display = "block";
+            arrow.innerHTML = "&#9662;";  // down arrow
+          } else {
+            contents.style.display = "none";
+            arrow.innerHTML = "&#9656;";  // right arrow
+          }
+        });
+      });
+
+      // File click handlers
+      sidebar.querySelectorAll(".repo-file-item").forEach(item => {
+        item.addEventListener("click", function () {
+          sidebar.querySelectorAll(".repo-file-item").forEach(i => i.classList.remove("active"));
+          this.classList.add("active");
+          loadFile(repoName, this.dataset.path, content, window._gatorRepoVersion);
+        });
+      });
+
+      // Auto-load default document
+      const defaultFile = top.find(f => f.name === "pulse.md")
+        || top.find(f => f.name === "mission.md")
+        || top[0];
+      if (defaultFile) {
+        const defaultItem = sidebar.querySelector(`[data-path="${defaultFile.path}"]`);
+        if (defaultItem) {
+          defaultItem.classList.add("active");
+          loadFile(repoName, defaultFile.path, content, window._gatorRepoVersion);
+        }
+      }
+
+      // Resize handle
+      initResizeHandle(sidebar);
+
+    } catch (err) {
+      sidebar.innerHTML = `<div class="repo-sidebar-header">${escHtml(repoName)}</div><div class="muted" style="padding:8px 12px">Failed to load files</div>`;
+    }
+  }
+
+  function initResizeHandle(sidebar) {
+    const browser = sidebar.parentElement;
+    if (!browser) return;
+    const handle = browser.querySelector("#repo-resize-handle");
+    if (!handle) return;
+    let startX, startWidth;
+    handle.addEventListener("mousedown", function (e) {
+      startX = e.clientX;
+      startWidth = sidebar.offsetWidth;
+      e.preventDefault();
+      function onMove(e) {
+        const newWidth = startWidth + (e.clientX - startX);
+        if (newWidth >= 120 && newWidth <= 500) {
+          sidebar.style.width = newWidth + "px";
+        }
+      }
+      function onUp() {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      }
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    });
+  }
+
+  function fileItem(repoName, f, indented) {
+    const label = f.name.replace(/\.md$/, "");
+    const indent = indented ? ' style="padding-left:24px"' : "";
+    return `<button class="repo-file-item" data-path="${escHtml(f.path)}"${indent}>${escHtml(label)}</button>`;
+  }
+
+  async function loadFile(repoName, filePath, contentEl, version) {
+    contentEl.innerHTML = '<div class="muted" style="padding:40px;text-align:center">Loading...</div>';
+    // Set context for image path resolution
+    const currentDir = filePath.includes("/") ? filePath.substring(0, filePath.lastIndexOf("/")) : "";
+    window._gatorRepoContext = { repoName: repoName, currentDir: currentDir };
+
+    try {
+      // Encode path segments individually — don't encode the slashes
+      const encodedPath = filePath.split("/").map(encodeURIComponent).join("/");
+      let fileUrl = `/api/repo/${encodeURIComponent(repoName)}/file/${encodedPath}`;
+      if (version) fileUrl += `?version=${encodeURIComponent(version)}`;
+      const resp = await fetch(fileUrl);
+      const data = await resp.json();
+
+      if (data.error) {
+        contentEl.innerHTML = `<div class="muted" style="padding:40px">${escHtml(data.error)}</div>`;
+        return;
+      }
+
+      const dateLabel = data.version
+        ? `Viewing: ${escHtml(data.version.substring(0, 8))}${data.last_modified ? ' (' + escHtml(data.last_modified.substring(0, 19)) + ')' : ''}`
+        : `Last updated: ${escHtml((data.last_modified || "").substring(0, 19))}`;
+      const lastMod = data.last_modified || data.version
+        ? `<span class="repo-file-date" style="position:relative;">${dateLabel}<button class="history-toggle-btn" title="Show file history">&#9662;</button><div class="history-dropdown" id="history-dropdown" style="display:none;"></div></span>`
+        : "";
+      // Build the repo-relative path for copying
+      let copyPath;
+      if (filePath.startsWith("source/")) {
+        copyPath = filePath.substring("source/".length);  // strip source/ prefix — it's repo root
+      } else if (filePath.startsWith("gator-command/")) {
+        copyPath = filePath;  // already repo-relative
+      } else {
+        copyPath = ".gator/" + filePath;  // .gator/ files
+      }
+      contentEl.innerHTML = `
+        <div class="repo-file-header">
+          <span>${escHtml(filePath)} <button class="copy-path-btn" title="Copy path" data-path="${escHtml(copyPath)}">&#9112;</button></span>
+          ${lastMod}
+        </div>
+        <div class="repo-markdown">${filePath.endsWith(".md") ? renderMarkdown(data.content || "") : '<pre class="md-code-block">' + escHtml(data.content || "") + '</pre>'}</div>
+      `;
+
+      // Copy path button handler
+      contentEl.querySelector(".copy-path-btn").addEventListener("click", function (e) {
+        e.stopPropagation();
+        const path = this.dataset.path;
+        navigator.clipboard.writeText(path).then(() => {
+          this.textContent = "\u2713";
+          setTimeout(() => { this.innerHTML = "&#9112;"; }, 1500);
+        });
+      });
+
+      // History dropdown handler
+      const histBtn = contentEl.querySelector(".history-toggle-btn");
+      const histDropdown = contentEl.querySelector("#history-dropdown");
+      if (histBtn && histDropdown) {
+        let historyLoaded = false;
+
+        histBtn.addEventListener("click", async function (e) {
+          e.stopPropagation();
+
+          // Toggle visibility
+          if (histDropdown.style.display !== "none") {
+            histDropdown.style.display = "none";
+            return;
+          }
+
+          histDropdown.style.display = "block";
+
+          if (historyLoaded) return;
+
+          histDropdown.innerHTML = '<div style="padding:8px; color:#aaa;">Loading…</div>';
+          try {
+            const encodedHist = filePath.split("/").map(encodeURIComponent).join("/");
+            const hResp = await fetch(`/api/repo/${encodeURIComponent(repoName)}/history/${encodedHist}`);
+            const hData = await hResp.json();
+
+            if (!hData.commits || !hData.commits.length) {
+              histDropdown.innerHTML = '<div style="padding:8px; color:#aaa;">No history available</div>';
+              historyLoaded = true;
+              return;
+            }
+
+            let html = "";
+            for (const c of hData.commits) {
+              const dateStr = (c.date || "").substring(0, 19);
+              const isActive = data.version === c.hash;
+              html += `<div class="history-item${isActive ? " history-active" : ""}" data-hash="${escHtml(c.hash)}" title="${escHtml(c.message)}">
+                <span class="history-hash">${escHtml(c.short_hash)}</span>
+                <span class="history-date">${escHtml(dateStr)}</span>
+                <span class="history-msg">${escHtml((c.message || "").substring(0, 50))}</span>
+              </div>`;
+            }
+            histDropdown.innerHTML = html;
+            historyLoaded = true;
+
+            // Click handler on each history item
+            histDropdown.querySelectorAll(".history-item").forEach(item => {
+              item.addEventListener("click", function (e) {
+                e.stopPropagation();
+                histDropdown.style.display = "none";
+                const hash = this.dataset.hash;
+                loadFile(repoName, filePath, contentEl, hash);
+              });
+            });
+          } catch (err) {
+            histDropdown.innerHTML = `<div style="padding:8px; color:var(--color-critical);">Error: ${escHtml(err.message)}</div>`;
+          }
+        });
+
+        // Close dropdown on outside click
+        document.addEventListener("click", function closeHist() {
+          histDropdown.style.display = "none";
+        });
+      }
+
+      // Intercept .md links — load them in the file browser instead of navigating
+      contentEl.querySelectorAll(".repo-markdown a").forEach(link => {
+        const href = link.getAttribute("href") || "";
+        if (href.endsWith(".md") && !href.startsWith("http")) {
+          link.addEventListener("click", function (e) {
+            e.preventDefault();
+            // Resolve relative to current file's directory
+            const currentDir = filePath.includes("/") ? filePath.substring(0, filePath.lastIndexOf("/")) : "";
+            let target = href;
+            if (currentDir && !href.startsWith("/")) {
+              target = currentDir + "/" + href;
+            }
+            // Normalize: remove ./ and resolve ../
+            target = target.replace(/^\.\//, "");
+            while (target.includes("/../")) {
+              target = target.replace(/[^/]+\/\.\.\//, "");
+            }
+            target = target.replace(/^\.\.\//, "");
+            loadFile(repoName, target, contentEl, window._gatorRepoVersion);
+            // Update sidebar active state
+            const sidebar = contentEl.parentElement.querySelector("#repo-file-list");
+            if (sidebar) {
+              sidebar.querySelectorAll(".repo-file-item").forEach(i => i.classList.remove("active"));
+              const match = sidebar.querySelector(`[data-path="${target}"]`);
+              if (match) match.classList.add("active");
+            }
+          });
+        }
+      });
+    } catch (err) {
+      contentEl.innerHTML = `<div class="muted" style="padding:40px">Failed to load file</div>`;
+    }
+  }
+})();