diff --git a/src/index.ts b/src/index.ts
index aab80d0..af9a583 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ import { generateViewerHTML } from "./template.ts";
 import type { WalkthroughDiagram } from "./types.ts";
 
 const PORT = parseInt(process.env.TRAVERSE_PORT || "4173", 10);
+const GIT_HASH = await Bun.$`git rev-parse --short HEAD`.text().then(s => s.trim()).catch(() => "dev");
 
 // In-memory diagram store
 const diagrams = new Map<string, WalkthroughDiagram>();
@@ -26,7 +27,7 @@ Bun.serve({
           headers: { "Content-Type": "text/html; charset=utf-8" },
         });
       }
-      return new Response(generateViewerHTML(diagram), {
+      return new Response(generateViewerHTML(diagram, GIT_HASH, process.cwd()), {
         headers: { "Content-Type": "text/html; charset=utf-8" },
       });
     }
@@ -39,7 +40,7 @@ Bun.serve({
 
     // List available diagrams
     if (url.pathname === "/") {
-      return new Response(generateIndexHTML(diagrams), {
+      return new Response(generateIndexHTML(diagrams, GIT_HASH), {
         headers: { "Content-Type": "text/html; charset=utf-8" },
       });
     }
@@ -157,14 +158,21 @@ function generate404HTML(title: string, message: string): string {
 </html>`;
 }
 
-function generateIndexHTML(diagrams: Map<string, WalkthroughDiagram>): string {
+function generateIndexHTML(diagrams: Map<string, WalkthroughDiagram>, gitHash: string): string {
   const items = [...diagrams.entries()]
     .map(
       ([id, d]) => {
-        const nodeCount = Object.keys(d.nodes).length;
+        const nodes = Object.values(d.nodes);
+        const nodeCount = nodes.length;
+        const preview = nodes.slice(0, 4).map(n => escapeHTML(n.title));
+        const extra = nodeCount > 4 ? ` <span class="more">+${nodeCount - 4}</span>` : "";
+        const tags = preview.map(t => `<span class="tag">${t}</span>`).join("") + extra;
         return `<a href="/diagram/${id}" class="diagram-item">
-          <span class="diagram-title">${escapeHTML(d.summary)}</span>
-          <span class="diagram-meta">${nodeCount} node${nodeCount !== 1 ? "s" : ""}</span>
+          <div class="diagram-header">
+            <span class="diagram-title">${escapeHTML(d.summary)}</span>
+            <span class="diagram-meta">${nodeCount} node${nodeCount !== 1 ? "s" : ""}</span>
+          </div>
+          <div class="diagram-tags">${tags}</div>
         </a>`;
       },
     )
@@ -208,7 +216,9 @@ function generateIndexHTML(diagrams: Map<string, WalkthroughDiagram>): string {
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       background: var(--bg); color: var(--text); min-height: 100vh;
+      display: flex; flex-direction: column;
     }
+    .main-content { flex: 1; }
     .header {
       padding: 48px 20px 32px;
       max-width: 520px; margin: 0 auto;
@@ -226,22 +236,36 @@ function generateIndexHTML(diagrams: Map<string, WalkthroughDiagram>): string {
     .header p { color: var(--text-muted); font-size: 14px; margin-top: 8px; }
     .diagram-list {
       max-width: 520px; margin: 0 auto; padding: 0 20px 48px;
-      display: flex; flex-direction: column; gap: 8px;
+      display: flex; flex-direction: column; gap: 12px;
     }
     .diagram-item {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 14px 16px; border: 1px solid var(--border);
+      display: flex; flex-direction: column; gap: 10px;
+      padding: 16px; border: 1px solid var(--border);
       border-radius: 8px; text-decoration: none; color: var(--text);
       transition: border-color 0.15s, background 0.15s;
     }
     .diagram-item:hover {
       border-color: var(--text-muted); background: var(--code-bg);
     }
+    .diagram-header {
+      display: flex; align-items: center; justify-content: space-between;
+    }
     .diagram-title { font-size: 14px; font-weight: 500; }
     .diagram-meta {
       font-size: 12px; color: var(--text-muted);
       flex-shrink: 0; margin-left: 12px;
     }
+    .diagram-tags {
+      display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
+    }
+    .diagram-tags .tag {
+      font-size: 11px; color: var(--text-muted);
+      background: var(--code-bg); padding: 2px 8px;
+      border-radius: 4px;
+    }
+    .diagram-tags .more {
+      font-size: 11px; color: var(--text-muted); opacity: 0.6;
+    }
     .empty {
       max-width: 520px; margin: 0 auto; padding: 60px 20px;
       text-align: center; color: var(--text-muted);
@@ -254,22 +278,31 @@ function generateIndexHTML(diagrams: Map<string, WalkthroughDiagram>): string {
       border-radius: 3px; font-size: 12px;
     }
     .site-footer {
-      padding: 32px 20px; text-align: center;
+      padding: 32px 20px;
       font-size: 13px; color: var(--text-muted);
+      display: flex; justify-content: space-between; align-items: center;
     }
     .site-footer .heart { color: #e25555; }
     .site-footer a { color: var(--text); text-decoration: none; }
     .site-footer a:hover { text-decoration: underline; }
+    .site-footer .hash {
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 11px; opacity: 0.6;
+      color: var(--text-muted) !important;
+    }
   </style>
 </head>
 <body>
-  <div class="header">
-    <h1>Traverse <span>v0.1</span></h1>
-    <p>Interactive code walkthrough diagrams</p>
+  <div class="main-content">
+    <div class="header">
+      <h1>Traverse <span>v0.1</span></h1>
+      <p>Interactive code walkthrough diagrams</p>
+    </div>
+    ${content}
   </div>
-  ${content}
   <footer class="site-footer">
-    Made with <span class="heart">&hearts;</span> by <a href="https://dunkirk.sh">Kieran Klukas</a> &middot; <a href="https://github.com/taciturnaxolotl/traverse">GitHub</a>
+    <span>Made with &#x2764;&#xFE0F; by <a href="https://dunkirk.sh">Kieran Klukas</a></span>
+    <a class="hash" href="https://github.com/taciturnaxolotl/traverse/commit/${escapeHTML(gitHash)}">${escapeHTML(gitHash)}</a>
   </footer>
 </body>
 </html>`;
diff --git a/src/template.ts b/src/template.ts
index 8edda10..900f3f0 100644
--- a/src/template.ts
+++ b/src/template.ts
@@ -1,6 +1,6 @@
 import type { WalkthroughDiagram } from "./types.ts";
 
-export function generateViewerHTML(diagram: WalkthroughDiagram): string {
+export function generateViewerHTML(diagram: WalkthroughDiagram, gitHash: string = "dev", projectRoot: string = ""): string {
   const diagramJSON = JSON.stringify(diagram).replace(/<\//g, "<\\/");
 
   return `<!DOCTYPE html>
@@ -56,6 +56,8 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
       background: var(--bg);
       color: var(--text);
       min-height: 100vh;
+      display: flex;
+      flex-direction: column;
     }
 
     /* ── Summary bar with breadcrumb ── */
@@ -77,11 +79,12 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
 
     .summary-bar .label {
       font-weight: 600;
-      color: var(--accent);
+      color: var(--text-muted);
       text-transform: uppercase;
       font-size: 11px;
       letter-spacing: 0.05em;
       flex-shrink: 0;
+      text-decoration: none;
       transition: color 0.15s;
     }
 
@@ -139,6 +142,12 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
       padding: 24px;
       border: 1px solid var(--border);
       border-radius: 8px;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .diagram-section.ready {
+      opacity: 1;
     }
 
     .diagram-section pre.mermaid {
@@ -364,6 +373,7 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
       max-width: 720px;
       margin: 0 auto;
       padding: 32px 20px;
+      flex: 1;
     }
 
     /* ── Detail section ── */
@@ -459,7 +469,7 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
     }
 
     .links-list a {
-      color: var(--accent);
+      color: #5a7bc4;
       text-decoration: none;
       font-size: 13px;
       font-family: "SF Mono", "Fira Code", monospace;
@@ -467,7 +477,7 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
       transition: color 0.15s;
     }
 
-    .links-list a:hover { color: var(--accent-hover); text-decoration: underline; }
+    .links-list a:hover { color: #7b9ad8; text-decoration: underline; }
 
     .code-snippet {
       margin-top: 12px;
@@ -517,9 +527,11 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
 
     .site-footer {
       padding: 32px 20px;
-      text-align: center;
       font-size: 13px;
       color: var(--text-muted);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
 
     .site-footer .heart { color: #e25555; }
@@ -530,11 +542,18 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
     }
 
     .site-footer a:hover { text-decoration: underline; }
+
+    .site-footer .hash {
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 11px;
+      color: var(--text-muted) !important;
+      opacity: 0.6;
+    }
   </style>
 </head>
 <body>
   <div class="summary-bar">
-    <a class="label" href="/" style="text-decoration:none;color:inherit">Traverse</a>
+    <a class="label" href="/">Traverse</a>
     <span class="sep">&rsaquo;</span>
     <span class="breadcrumb-title" id="breadcrumb-title">${escapeHTML(diagram.summary)}</span>
     <span class="sep header-sep">&rsaquo;</span>
@@ -552,7 +571,8 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
   </div>
 
   <footer class="site-footer">
-    Made with <span class="heart">&hearts;</span> by <a href="https://dunkirk.sh">Kieran Klukas</a> &middot; <a href="https://github.com/taciturnaxolotl/traverse">GitHub</a>
+    <span>Made with &#x2764;&#xFE0F; by <a href="https://dunkirk.sh">Kieran Klukas</a></span>
+    <a class="hash" href="https://github.com/taciturnaxolotl/traverse/commit/${escapeHTML(gitHash)}">${escapeHTML(gitHash)}</a>
   </footer>
 
   <script type="module">
@@ -562,6 +582,7 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
     mermaid.registerLayoutLoaders(elkLayouts);
 
     const DIAGRAM_DATA = ${diagramJSON};
+    const PROJECT_ROOT = ${JSON.stringify(projectRoot)};
 
     const COPY_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="8" height="8" rx="1.5"/><path d="M3 11V3a1.5 1.5 0 011.5-1.5H11"/></svg>';
     const CHECK_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5l3.5 3.5 6.5-7"/></svg>';
@@ -589,6 +610,7 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
       // Set viewBox so the SVG scales to fit the container
       requestAnimationFrame(() => {
         fitDiagram();
+        document.querySelector(".diagram-section").classList.add("ready");
         attachClickHandlers();
 
         // Check URL hash for deep link
@@ -616,6 +638,11 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
         }
       });
 
+      // Escape key to deselect
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && selectedNodeId) deselectAll();
+      });
+
       // Handle browser back/forward
       window.addEventListener("hashchange", () => {
         const hash = window.location.hash.slice(1);
@@ -711,7 +738,8 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
         html += '<div class="section-label">Related Files</div>';
         html += '<ul class="links-list">';
         meta.links.forEach(link => {
-          html += '<li><a href="' + escapeAttr(link.url) + '">' + escapeText(link.label) + "</a></li>";
+          const href = buildFileUrl(link.label, link.url);
+          html += '<li><a href="' + escapeAttr(href) + '">' + escapeText(link.label) + "</a></li>";
         });
         html += "</ul>";
       }
@@ -816,6 +844,14 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string {
       });
     }
 
+    function buildFileUrl(label, url) {
+      // Parse line number from label like "src/index.ts:56-59" or "src/index.ts:56"
+      const lineMatch = label.match(/:(\d+)/);
+      const line = lineMatch ? lineMatch[1] : "1";
+      const filePath = PROJECT_ROOT + "/" + url;
+      return "vscode://file/" + filePath + ":" + line;
+    }
+
     function escapeText(s) {
       const d = document.createElement("div");
       d.textContent = s;