Git Explorer
GPT 5.6 Luna Pro · typescript

Reviews & generation details
Reviews
No human review yet. Unreviewed does not mean unsuccessful.
Generation context
Imported historical artifact. Its exact original instructions and lineage are not known.
Generation prompt · exact text unavailable
See the current prompt for reference. It may differ from the instructions used to generate this artifact.
Inspect original source 22,765 bytes · SHA-256 66c4e182bf38
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Branchline · Git & Structure Visualizer</title>
<style>
/* ── css: app ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');:root{--bg:#0b1015;--panel:#111820;--panel2:#151e27;--border:#25313c;--muted:#82909e;--text:#e7eef4;--teal:#5ee4c0;--teal2:#2cb69b;--amber:#f4b860;--red:#ff7d72;--purple:#a58cff;--mono:'DM Mono',monospace;--sans:'Manrope',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px var(--sans);letter-spacing:.01em}button,input,select,textarea{font:inherit}button{cursor:pointer}#shell{min-height:100vh}.topbar{height:76px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#0d141b}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:34px;height:34px;border:1px solid #3d766e;border-radius:9px;color:var(--teal);display:grid;place-items:center;font-size:24px;background:#122925}.eyebrow,.section-label{font:500 10px var(--mono);letter-spacing:.14em;color:#71818e}.brand h1{font-size:18px;letter-spacing:-.02em;margin:4px 0 0;font-weight:800}.brand h1 span{color:#78909e;font-weight:500}.top-actions{display:flex;align-items:center;gap:10px}.save-status{color:#8fa19f;font:11px var(--mono);margin-right:12px}.save-status i,.live-dot{display:inline-block;width:6px;height:6px;background:var(--teal);border-radius:50%;margin-right:6px;box-shadow:0 0 10px var(--teal)}.btn{border:1px solid var(--border);padding:9px 13px;border-radius:6px;background:transparent;color:#bcc8d0;font-size:12px}.btn:hover,.small-btn:hover,.view-btn:hover{border-color:#4e6572;color:var(--text)}.btn.primary{background:var(--teal);color:#09201b;border-color:var(--teal);font-weight:800}.btn.primary:hover{background:#7aefd1}.file-btn{position:relative;overflow:hidden}.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.workspace{display:grid;grid-template-columns:270px 1fr;min-height:calc(100vh - 76px)}.sidebar{border-right:1px solid var(--border);padding:25px 18px;background:#0e151c}.panel{padding:0 0 23px;margin-bottom:22px;border-bottom:1px solid var(--border)}.overview{padding-bottom:20px}.repo-name{display:flex;align-items:center;gap:10px;margin:18px 0}.repo-icon{color:var(--teal);font-size:18px}.repo-name strong{display:block;font-size:13px}.repo-name small{display:block;color:var(--muted);font:10px var(--mono);margin-top:3px}.pulse{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--teal)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metrics div{background:#151f28;border:1px solid #22303a;border-radius:5px;padding:10px 7px}.metrics b{display:block;font:500 17px var(--mono);color:#ecf5f5}.metrics span{font-size:9px;color:var(--muted);display:block;margin-top:4px}.section-head{display:flex;justify-content:space-between;align-items:center}.icon-btn,.close-btn{border:0;background:transparent;color:var(--muted);font-size:20px}.branch-list{margin-top:14px;display:flex;flex-direction:column;gap:6px}.branch-row{display:flex;align-items:center;padding:7px 8px;border-radius:5px;color:#aebcc5}.branch-row.active{background:#172a2b;color:var(--teal)}.branch-row .branch-name{font:11px var(--mono);flex:1}.branch-row small{font:10px var(--mono);color:#687782}.branch-glyph{width:10px;height:10px;border:2px solid currentColor;border-radius:50%;margin-right:9px}.empty-inspector{color:#677782;line-height:1.6;font-size:12px;margin-top:16px}.inspector-content{margin-top:15px}.inspect-title{font-size:14px;font-weight:700;margin:8px 0}.hash{font:11px var(--mono);color:var(--teal)}.inspect-meta{color:var(--muted);font-size:11px;line-height:1.8;margin-top:12px}.legend{border-bottom:0;font-size:10px;color:var(--muted);line-height:2.7}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 5px 0 10px}.dot:first-child{margin-left:0}.commit-dot{background:var(--teal)}.event-dot{background:var(--amber)}.line{display:inline-block;width:16px;border-top:2px solid var(--teal);margin:0 5px 3px 10px}.branch-line{border-color:var(--purple)}.content{padding:28px 34px 42px;max-width:1420px;width:100%;margin:auto}.content-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.content-head h2{font-size:25px;margin:8px 0 5px;letter-spacing:-.04em}.content-head p{color:#7f909c;margin:0;font-size:12px}.view-controls{display:flex;border:1px solid var(--border);border-radius:6px;padding:3px}.view-btn{background:transparent;border:0;color:#7c8e99;padding:8px 15px;font-size:11px;border-radius:4px}.view-btn.active{background:#233039;color:var(--text)}.graph-card,.context-card{border:1px solid var(--border);background:var(--panel);border-radius:8px;overflow:hidden}.graph-toolbar{height:45px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#758691;font:10px var(--mono)}.keycap{border:1px solid #33424d;border-radius:3px;padding:3px 5px;color:#aabac2;margin-right:7px}.divider{border-left:1px solid #33414c;margin:0 12px}.small-btn{background:#172129;border:1px solid var(--border);color:#8c9ba4;padding:4px 9px;margin-left:4px;border-radius:4px}.graph-toolbar #selection-label{color:var(--teal)}#graph-wrap{height:440px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#18262c 0%,#111820 52%,#0e151b 100%)}#git-graph{width:100%;height:100%}.grid-line{stroke:#223039;stroke-width:1}.graph-edge{fill:none;stroke:#3d7c76;stroke-width:2;opacity:.85}.graph-edge.branch{stroke:#756bb3}.commit-node{fill:#10181e;stroke:var(--teal);stroke-width:2}.commit-node.selected{fill:var(--teal);stroke:#d6fff2;stroke-width:3}.commit-label{fill:#d4e0e5;font:11px var(--sans);font-weight:700}.commit-sub{fill:#71818d;font:9px var(--mono)}.event-anchor{fill:var(--amber);stroke:#30281c;stroke-width:3}.event-link{stroke:var(--amber);stroke-width:1;stroke-dasharray:3 3;opacity:.7}.event-label{fill:#f5d59d;font:10px var(--mono)}.tooltip{position:absolute;background:#1c292f;border:1px solid #57736e;border-radius:6px;padding:11px 13px;max-width:250px;box-shadow:0 10px 30px #0008;z-index:5}.tooltip strong{display:block;color:var(--amber);margin-bottom:5px}.tooltip span{display:block;color:#b7c5ca;font-size:11px;line-height:1.5}.context-card{margin-top:18px;padding:18px 20px 20px}.context-card h3{font-size:15px;margin:6px 0 0}.count-pill{background:#1c2b2e;color:var(--teal);padding:5px 8px;border-radius:4px;font:10px var(--mono)}.event-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.event-item{border-left:2px solid var(--amber);padding:7px 10px;background:#172027;min-height:73px;cursor:pointer}.event-item:hover,.event-item.active{background:#20302f}.event-item strong{font-size:11px;display:block}.event-item small{display:block;color:var(--muted);font:10px var(--mono);margin-top:7px}.event-item em{font-style:normal;color:var(--amber);font-size:9px}.modal-backdrop{position:fixed;inset:0;background:#05090dcc;display:grid;place-items:center;z-index:10}.modal-backdrop[hidden]{display:none}.modal{width:410px;background:#151e25;border:1px solid #394853;border-radius:9px;box-shadow:0 22px 80px #000b}.modal-head{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}.modal h3{margin:7px 0 0;font-size:18px}.modal form{padding:20px}.modal label{display:block;color:#9eafb8;font-size:11px;margin-bottom:14px}.modal input,.modal select,.modal textarea{display:block;width:100%;background:#0f171d;border:1px solid #30404b;color:var(--text);padding:10px;border-radius:5px;margin-top:6px;outline:none}.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--teal)}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}@media(max-width:850px){.topbar{padding:0 16px}.top-actions .ghost{display:none}.workspace{grid-template-columns:1fr}.sidebar{display:none}.content{padding:20px 14px}.event-flow{grid-template-columns:repeat(2,1fr)}.content-head{align-items:start;gap:12px;flex-direction:column}.graph-card #graph-wrap{height:420px}}
</style>
</head>
<body>
<div id="shell"><header class="topbar"><div class="brand"><div class="brand-mark">⌁</div><div><div class="eyebrow">STRUCTURAL INTELLIGENCE</div><h1>Branchline <span>/ Git topology</span></h1></div></div><div class="top-actions"><div class="save-status" id="save-status"><i></i> Saved locally</div><button class="btn ghost" id="export-btn">Export JSON</button><label class="btn ghost file-btn">Import JSON<input id="import-input" type="file" accept=".json,application/json"></label><button class="btn primary" id="new-event-btn">+ New event</button></div></header><main class="workspace"><aside class="sidebar"><section class="panel overview"><div class="section-label">REPOSITORY OVERVIEW</div><div class="repo-name"><span class="repo-icon">◈</span><div><strong id="repo-title">platform-core</strong><small>origin / main</small></div><span class="pulse"></span></div><div class="metrics"><div><b id="commit-count">0</b><span>Commits</span></div><div><b id="branch-count">0</b><span>Branches</span></div><div><b id="event-count">0</b><span>Events</span></div></div></section><section class="panel"><div class="section-head"><div class="section-label">BRANCHES</div><button class="icon-btn" id="new-branch-btn">+</button></div><div id="branch-list" class="branch-list"></div></section><section class="panel inspector"><div class="section-label">INSPECTOR</div><div id="inspector-content" class="empty-inspector">Select a commit<br>to inspect its structure.</div></section><section class="panel legend"><div class="section-label">LEGEND</div><div><i class="dot commit-dot"></i> Commit <i class="dot event-dot"></i> Context event</div><div><i class="line main-line"></i> mainline <i class="line branch-line"></i> branch</div></section></aside><section class="content"><div class="content-head"><div><div class="section-label">LIVE TOPOLOGY <span class="live-dot"></span></div><h2>Development history</h2><p>External context anchored to the exact commit where it happened.</p></div><div class="view-controls"><button class="view-btn active" data-view="graph">Graph</button><button class="view-btn" data-view="timeline">Context flow</button></div></div><div class="graph-card"><div class="graph-toolbar"><div class="toolbar-note"><span class="keycap">⌘ K</span> Search history <span class="divider"></span><span id="selection-label">No commit selected</span></div><div><button class="small-btn" id="zoom-out">−</button><button class="small-btn" id="zoom-reset">100%</button><button class="small-btn" id="zoom-in">+</button></div></div><div id="graph-wrap"><svg id="git-graph" role="img" aria-label="Interactive Git commit graph"></svg><div id="tooltip" class="tooltip" hidden=""></div></div></div><div class="context-card"><div class="section-head"><div><div class="section-label">CONTEXTUAL FLOW</div><h3>Events across the history</h3></div><span class="count-pill" id="flow-count">0 markers</span></div><div id="event-flow" class="event-flow"></div></div></section></main><div class="modal-backdrop" id="modal" hidden=""><div class="modal"><div class="modal-head"><div><div class="section-label">CONTEXT MARKER</div><h3 id="modal-title">New event</h3></div><button class="close-btn" id="close-modal">×</button></div><form id="event-form"><label>Event title<input id="event-title" required="" placeholder="e.g. Code Freeze"></label><label>Type<select id="event-type"><option value="milestone">Milestone</option><option value="release">Release</option><option value="decision">Decision</option><option value="incident">Incident</option></select></label><label>Associated commit<select id="event-commit" required=""></select></label><label>Reference / identifying note<input id="event-ref" placeholder="e.g. RFC-042 · Release train 12"></label><label>Details<textarea id="event-details" rows="3" placeholder="What changed in the world around this commit?"></textarea></label><div class="form-actions"><button type="button" class="btn ghost" id="cancel-modal">Cancel</button><button class="btn primary" type="submit">Save event</button></div></form></div></div></div>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
if (__cache[id]) return __cache[id].exports;
var module = __cache[id] = { exports: {} };
var factory = __mods[id];
if (!factory) throw new Error("Module not found: " + id);
factory(module.exports, function (spec) {
var target = (__map[id] && __map[id][spec]) || spec;
return __require(target);
}, module);
return module.exports;
}
// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const seed = { commits: [{ id: 'a91f2c', parents: [], message: 'Initialize platform shell', author: 'Mira Chen', date: '2024-04-02', branch: 'main' }, { id: 'b7e401', parents: ['a91f2c'], message: 'Define service boundaries', author: 'Mira Chen', date: '2024-04-04', branch: 'main' }, { id: 'c83d19', parents: ['b7e401'], message: 'Add observability layer', author: 'Jon Bell', date: '2024-04-08', branch: 'main' }, { id: 'd14aa8', parents: ['c83d19'], message: 'feat: edge caching', author: 'Nora Singh', date: '2024-04-12', branch: 'feature/edge-cache' }, { id: 'e52bb0', parents: ['c83d19'], message: 'fix: retry policy', author: 'Jon Bell', date: '2024-04-14', branch: 'main' }, { id: 'f60c7d', parents: ['e52bb0', 'd14aa8'], message: 'Merge edge-cache', author: 'Mira Chen', date: '2024-04-17', branch: 'main' }, { id: 'g781de', parents: ['f60c7d'], message: 'Release v2.4.0', author: 'Mira Chen', date: '2024-04-19', branch: 'main' }], branches: [{ name: 'main', head: 'g781de', color: '#5ee4c0' }, { name: 'feature/edge-cache', head: 'd14aa8', color: '#a58cff' }, { name: 'release/2.4', head: 'g781de', color: '#f4b860' }], events: [{ id: 'ev1', title: 'Architecture RFC approved', type: 'decision', commitId: 'b7e401', ref: 'RFC-042', details: 'The platform boundary proposal cleared review.' }, { id: 'ev2', title: 'Observability goes live', type: 'milestone', commitId: 'c83d19', ref: 'SLO-018', details: 'Dashboards and traces are now part of the release gate.' }, { id: 'ev3', title: 'Code freeze', type: 'incident', commitId: 'f60c7d', ref: 'Release train 12', details: 'No new features after this merge.' }, { id: 'ev4', title: 'Customer release', type: 'release', commitId: 'g781de', ref: 'v2.4.0', details: 'Production rollout completed.' }] };
let state = load();
let scale = 1;
const $ = (s) => document.querySelector(s);
function load() { try {
const x = localStorage.getItem('branchline-state');
return x ? JSON.parse(x) : seed;
}
catch {
return seed;
} }
function save() { localStorage.setItem('branchline-state', JSON.stringify(state)); $('#save-status').innerHTML = '<i></i> Saved locally'; }
function esc(x) { return x.replace(/[&<>]/g, c => ({ '&': '&', '<': '<', '>': '>' }[c] || c)); }
function render() { const commits = state.commits, branches = state.branches; $('#commit-count').textContent = String(commits.length); $('#branch-count').textContent = String(branches.length); $('#event-count').textContent = String(state.events.length); $('#flow-count').textContent = state.events.length + ' markers'; $('#branch-list').innerHTML = branches.map(b => `<div class="branch-row ${b.name === 'main' ? 'active' : ''}"><i class="branch-glyph" style="color:${b.color}"></i><span class="branch-name">${esc(b.name)}</span><small>${b.head}</small></div>`).join(''); renderGraph(); renderFlow(); renderInspector(); }
function renderGraph() { const svg = $('#git-graph'); const w = svg.clientWidth || 900, h = 440; svg.setAttribute('viewBox', `0 0 ${w} ${h}`); const xs = [70, 190, 310, 430, 550, 670, 790], ymain = 300, ybranch = 150; const pos = {}; state.commits.forEach((c, i) => { pos[c.id] = { x: xs[i] ?? (70 + i * 105), y: c.branch === 'feature/edge-cache' ? ybranch : ymain }; }); let out = '<g>'; for (let x = 0; x < w; x += 60)
out += `<path class="grid-line" d="M${x} 0V${h}"/>`; for (let y = 40; y < h; y += 50)
out += `<path class="grid-line" d="M0 ${y}H${w}"/>`; out += '</g>'; state.commits.forEach(c => c.parents.forEach(p => { const a = pos[c.id], b = pos[p]; if (!a || !b)
return; const mid = (a.x + b.x) / 2; out += `<path class="graph-edge ${c.branch !== 'main' ? 'branch' : ''}" d="M${b.x} ${b.y} C${mid} ${b.y},${mid} ${a.y},${a.x} ${a.y}"/>`; })); state.commits.forEach(c => { const p = pos[c.id], sel = state.selected === c.id; out += `<g class="commit" data-id="${c.id}"><circle class="commit-node ${sel ? 'selected' : ''}" cx="${p.x}" cy="${p.y}" r="${sel ? 9 : 7}"/><text class="commit-label" x="${p.x}" y="${p.y + 28}" text-anchor="middle">${esc(c.message.length > 19 ? c.message.slice(0, 18) + '…' : c.message)}</text><text class="commit-sub" x="${p.x}" y="${p.y + 42}" text-anchor="middle">${c.id} · ${c.date.slice(5)}</text></g>`; }); state.events.forEach(e => { const p = pos[e.commitId]; if (!p)
return; out += `<g class="event-mark" data-event="${e.id}"><line class="event-link" x1="${p.x}" y1="${p.y - 10}" x2="${p.x}" y2="${p.y - 57}"/><circle class="event-anchor" cx="${p.x}" cy="${p.y - 64}" r="7"/><text class="event-label" x="${p.x + 12}" y="${p.y - 61}">${esc(e.title)}</text></g>`; }); svg.innerHTML = out; svg.querySelectorAll('.commit').forEach(n => n.addEventListener('click', () => { state.selected = n.getAttribute('data-id') || ''; render(); })); svg.querySelectorAll('.event-mark').forEach(n => { n.addEventListener('mouseenter', ev => showTip(ev, state.events.find(e => e.id === n.getAttribute('data-event')))); n.addEventListener('mouseleave', hideTip); n.addEventListener('click', () => { state.selected = state.events.find(e => e.id === n.getAttribute('data-event')).commitId; render(); }); }); }
function showTip(ev, e) { const t = $('#tooltip'); t.hidden = false; t.style.left = (ev.offsetX + 18) + 'px'; t.style.top = (ev.offsetY - 10) + 'px'; t.innerHTML = `<strong>${esc(e.title)}</strong><span>${esc(e.details || 'No details')}</span><span style="color:#f4b860;margin-top:7px">↳ commit ${e.commitId} · ${esc(e.ref)}</span>`; }
function hideTip() { $('#tooltip').hidden = true; }
function renderFlow() { $('#event-flow').innerHTML = state.events.map(e => `<div class="event-item ${state.selected === e.commitId ? 'active' : ''}" data-commit="${e.commitId}"><strong>${esc(e.title)}</strong><small>${e.commitId} · ${esc(e.ref || 'No reference')}</small><em>${e.type.toUpperCase()}</em></div>`).join(''); document.querySelectorAll('.event-item').forEach(x => x.addEventListener('click', () => { state.selected = x.getAttribute('data-commit') || ''; render(); })); }
function renderInspector() { const c = state.commits.find(x => x.id === state.selected); $('#selection-label').textContent = c ? c.id + ' selected' : 'No commit selected'; if (!c) {
$('#inspector-content').innerHTML = 'Select a commit<br/>to inspect its structure.';
return;
} const ev = state.events.filter(e => e.commitId === c.id); $('#inspector-content').innerHTML = `<div class="hash">${c.id}</div><div class="inspect-title">${esc(c.message)}</div><div class="inspect-meta">AUTHOR · ${esc(c.author)}<br/>DATE · ${c.date}<br/>PARENTS · ${c.parents.join(', ') || 'root'}<br/>BRANCH · ${c.branch}</div><div style="margin-top:13px;color:#f4b860;font-size:11px">${ev.length ? ev.length + ' contextual marker' + (ev.length > 1 ? 's' : '') : 'No contextual markers'}</div>`; }
function openModal() { const m = $('#modal'); m.hidden = false; $('#event-commit').innerHTML = state.commits.map(c => `<option value="${c.id}" ${c.id === state.selected ? 'selected' : ''}>${c.id} — ${esc(c.message)}</option>`).join(''); $('#event-title').focus(); }
function closeModal() { $('#modal').hidden = true; }
$('#new-event-btn').addEventListener('click', openModal);
$('#close-modal').addEventListener('click', closeModal);
$('#cancel-modal').addEventListener('click', closeModal);
$('#event-form').addEventListener('submit', e => { e.preventDefault(); const id = 'ev' + Date.now(); state.events.push({ id, title: $('#event-title').value, type: $('#event-type').value, commitId: $('#event-commit').value, ref: $('#event-ref').value, details: $('#event-details').value }); save(); closeModal(); render(); });
$('#new-branch-btn').addEventListener('click', () => { const name = prompt('Branch name', 'feature/new-path'); if (name && state.selected) {
state.branches.push({ name, head: state.selected, color: '#a58cff' });
save();
render();
} });
$('#export-btn').addEventListener('click', () => { const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([JSON.stringify(state, null, 2)], { type: 'application/json' })); a.download = 'branchline-history.json'; a.click(); });
$('#import-input').addEventListener('change', async (e) => { const f = e.target.files?.[0]; if (!f)
return; try {
const x = JSON.parse(await f.text());
if (x.commits && x.events) {
state = x;
save();
render();
}
}
catch {
alert('Invalid Branchline JSON');
} });
document.querySelectorAll('.view-btn').forEach(b => b.addEventListener('click', () => { document.querySelectorAll('.view-btn').forEach(x => x.classList.remove('active')); b.classList.add('active'); const timeline = b.getAttribute('data-view') === 'timeline'; $('#git-graph').style.display = timeline ? 'none' : 'block'; $('#event-flow').style.display = timeline ? 'grid' : 'grid'; if (timeline)
$('#event-flow').scrollIntoView({ behavior: 'smooth', block: 'center' }); }));
$('#zoom-in').addEventListener('click', () => { scale = Math.min(1.5, scale + .1); $('#git-graph').style.transform = `scale(${scale})`; });
$('#zoom-out').addEventListener('click', () => { scale = Math.max(.7, scale - .1); $('#git-graph').style.transform = `scale(${scale})`; });
$('#zoom-reset').addEventListener('click', () => { scale = 1; $('#git-graph').style.transform = 'scale(1)'; });
window.addEventListener('resize', renderGraph);
render();
};
// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"typescript","sessionId":"a7280983-a5ef-46af-9d65-a9f3a403d6cb","tokensIn":313557,"tokensOut":23030,"tokensTotal":336587,"turns":10,"toolCalls":11,"failedToolCalls":0,"timestamp":"2026-07-31T03:22:45.137Z"} -->