feat: add worktree vs branches microblog with interactive diagram

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: aymuos15

script.js

@@ -416,6 +416,16 @@ document.getElementById('back-btn').addEventListener('click', () => {
 // ── Microblog ────────────────────────────────────────────────────────────────
 /* eslint-disable quotes */
 const microblogEntries = [
+    {
+        id: "(Git) worktrees-vs-branches",
+        date: "Mar. '26",
+        title: "(Git) Worktrees vs Branches",
+        tags: ["git", "workflow"],
+        diagram: "worktree",
+        content: `<p>A <strong>branch</strong> is just a pointer to a commit. Switching branches swaps files in your single working directory. Which forces one on stashing uncommitted work. A <strong>worktree</strong> (<code>git worktree add</code>) gives each branch its own directory, all backed by the same <code>.git</code> object store. Thus, no stashing required, a personal ick only tbh.</p>
+<p>The agentic advantage: worktrees let you run coding agents in parallel. Each agent gets its own isolated checkout while sharing the same repo. <a href="https://github.com/jj-vcs/jj" target="_blank">Jujutsu (jj)</a> is an open-source alternative that bakes this kind of parallel workflow into the VCS itself. Find a better deep dive into other alternatives <a href="https://blog.ezyang.com/2026/03/parallel-agents-heart-sapling/" target="_blank">here</a>.</p>`,
+        links: []
+    },
     {
         id: "deformable-convolutions",
         date: "Mar. '26",
@@ -434,8 +444,146 @@ const microblogList = document.getElementById('microblog-list');
 const microblogDetail = document.getElementById('microblog-detail');
 let microblogTagSwitching = false;
 
+// ── Worktree vs Branches Diagram ─────────────────────────────────────────────
+function buildWorktreeDiagram() {
+    const container = document.getElementById('microblog-diagram-worktree');
+    if (!container) return;
+
+    let mode = 'branch';
+
+    // Shared geometry
+    const W = 300, H = 150;
+    const gitX = W / 2, gitY = 22, gitRx = 30, gitRy = 12;
+
+    // Animated node positions: [gitEllipse, ...boxes, ...branch-labels]
+    // We'll track box centres and animate between layouts
+    const branchLayout = {
+        boxes: [{ x: W / 2, y: 90 }],
+        labels: [
+            { x: 46,  y: 90, text: 'main',   dim: true },
+            { x: W / 2, y: 130, text: 'feat-A', dim: false },
+            { x: 254, y: 90, text: 'fix-B',  dim: true }
+        ],
+        connectors: [[gitX, gitY + gitRy, W / 2, 90 - 15]],
+        footnote: 'stash \u2192 checkout \u2192 switch'
+    };
+
+    const worktreeLayout = {
+        boxes: [
+            { x: W / 2 - 65, y: 90 },
+            { x: W / 2 + 65, y: 90 }
+        ],
+        labels: [],
+        connectors: [
+            [gitX - 10, gitY + gitRy, W / 2 - 65, 90 - 15],
+            [gitX + 10, gitY + gitRy, W / 2 + 65, 90 - 15]
+        ],
+        footnote: 'parallel \u2014 no stashing needed'
+    };
+
+    function buildSvg(layout) {
+        const bw = 90, bh = 30;
+        let s = `<svg viewBox="0 0 ${W} ${H}" class="wt-svg" xmlns="http://www.w3.org/2000/svg">`;
+
+        // .git ellipse
+        s += `<ellipse cx="${gitX}" cy="${gitY}" rx="${gitRx}" ry="${gitRy}"
+            fill="none" stroke="var(--text-secondary)" stroke-width="1" stroke-dasharray="3 2" opacity="0.55"/>`;
+        s += `<text x="${gitX}" y="${gitY + 3.5}" text-anchor="middle"
+            font-family="var(--font-mono)" font-size="8" fill="var(--text-secondary)">.git</text>`;
+
+        // Connectors (dashed lines from .git to boxes)
+        layout.connectors.forEach(([x1, y1, x2, y2]) => {
+            s += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"
+                stroke="var(--text-secondary)" stroke-width="0.7" stroke-dasharray="3 2" opacity="0.45"/>`;
+        });
+
+        // Boxes
+        layout.boxes.forEach((b, i) => {
+            const col = layout.boxes.length > 1
+                ? (i === 0 ? 'var(--link)' : 'var(--text)')
+                : 'var(--text)';
+            s += `<rect x="${b.x - bw/2}" y="${b.y - bh/2}" width="${bw}" height="${bh}"
+                rx="3" fill="none" stroke="${col}" stroke-width="1"/>`;
+            // Inner label for worktree mode, "working dir" for branch mode
+            const inner = layout.boxes.length === 1 ? 'working dir' : (i === 0 ? 'feat-A/' : 'fix-B/');
+            s += `<text x="${b.x}" y="${b.y + 3}" text-anchor="middle"
+                font-family="var(--font-mono)" font-size="7.5" fill="${col}">${inner}</text>`;
+        });
+
+        // Branch labels (only in branch mode)
+        layout.labels.forEach(l => {
+            const col = l.dim ? 'var(--text-secondary)' : 'var(--link)';
+            const op = l.dim ? '0.4' : '1';
+            s += `<text x="${l.x}" y="${l.y + 3}" text-anchor="middle"
+                font-family="var(--font-mono)" font-size="7" fill="${col}" opacity="${op}">${l.text}</text>`;
+            // Active indicator arrow for the checked-out branch
+            if (!l.dim && layout.boxes.length === 1) {
+                const bx = layout.boxes[0].x;
+                s += `<line x1="${l.x}" y1="${l.y - 4}" x2="${bx}" y2="${layout.boxes[0].y + bh/2}"
+                    stroke="var(--link)" stroke-width="0.6" stroke-dasharray="2 2" opacity="0.45"/>`;
+            }
+        });
+
+        // Footnote
+        s += `<text x="${W / 2}" y="${H - 4}" text-anchor="middle"
+            font-family="var(--font-mono)" font-size="6.5" fill="var(--text-secondary)" opacity="0.5">${layout.footnote}</text>`;
+
+        s += '</svg>';
+        return s;
+    }
+
+    function render() {
+        const layout = mode === 'branch' ? branchLayout : worktreeLayout;
+        container.querySelector('.wt-diagram-area').innerHTML = buildSvg(layout);
+    }
+
+    // Toggle buttons (reuse dcn-toggle / dcn-btn styles)
+    const toggle = document.createElement('div');
+    toggle.className = 'dcn-toggle';
+
+    const btnBr = document.createElement('button');
+    btnBr.className = 'dcn-btn active';
+    btnBr.textContent = 'Branches';
+
+    const btnWt = document.createElement('button');
+    btnWt.className = 'dcn-btn';
+    btnWt.textContent = 'Worktrees';
+
+    function setMode(m) {
+        if (m === mode) return;
+        mode = m;
+        btnBr.classList.toggle('active', mode === 'branch');
+        btnWt.classList.toggle('active', mode === 'worktree');
+        const area = container.querySelector('.wt-diagram-area');
+        area.classList.add('wt-fading');
+        setTimeout(() => {
+            render();
+            area.classList.remove('wt-fading');
+        }, 200);
+    }
+
+    btnBr.addEventListener('click', () => setMode('branch'));
+    btnWt.addEventListener('click', () => setMode('worktree'));
+
+    toggle.appendChild(btnBr);
+    toggle.appendChild(btnWt);
+
+    const area = document.createElement('div');
+    area.className = 'wt-diagram-area';
+
+    const caption = document.createElement('p');
+    caption.className = 'dcn-caption';
+    caption.textContent = 'Click to compare single-directory branching with parallel worktrees.';
+
+    container.appendChild(toggle);
+    container.appendChild(area);
+    container.appendChild(caption);
+    render();
+}
+
 // ── Deformable Convolution Diagram ───────────────────────────────────────────
 function buildMicroblogDiagram(type) {
+    if (type === 'worktree') { buildWorktreeDiagram(); return; }
     if (type !== 'deformable-conv') return;
     const container = document.getElementById('microblog-diagram-deformable-conv');
     if (!container) return;

styles/components/microblog.css

@@ -431,6 +431,23 @@
     margin-top: 0.2rem;
 }
 
+/* Worktree diagram */
+.wt-diagram-area {
+    transition: opacity 0.2s ease;
+    padding: 0.4rem 0;
+}
+
+.wt-diagram-area.wt-fading {
+    opacity: 0;
+}
+
+.wt-svg {
+    width: 100%;
+    max-width: 320px;
+    margin: 0 auto;
+    display: block;
+}
+
 @media (max-width: 768px) {
     .microblog-tag-btn {
         font-size: 0.6rem;