Git Explorer

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Threadline · Git & Context Visualizer</title>
<style>
:root{--bg:#0b1017;--panel:#111925;--panel2:#162130;--line:#283447;--text:#eef4fb;--muted:#8493a8;--cyan:#4de1d0;--amber:#ffbd6b;--violet:#9b8cff;--red:#ff7186;--green:#69dc91;--shadow:0 18px 55px #0005}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% -20%,#23324c 0,#0b1017 48%);color:var(--text);font:14px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer;color:var(--text);border:1px solid var(--line);background:#182334;border-radius:8px;padding:9px 12px;transition:.2s}button:hover{border-color:#516583;background:#203049;transform:translateY(-1px)}button.primary{background:var(--cyan);color:#071518;border-color:var(--cyan);font-weight:700}.app{display:grid;grid-template-columns:282px 1fr;min-height:100vh}.side{border-right:1px solid #253043;background:#0d141e;display:flex;flex-direction:column;padding:25px 18px 18px;gap:22px}.brand{display:flex;align-items:center;gap:11px}.logo{height:34px;width:34px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--violet));display:grid;place-items:center;color:#081219;font-weight:900;box-shadow:0 5px 20px #4de1d044}.brand b{font-size:17px;letter-spacing:.4px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:1.4px;text-transform:uppercase}.side h4,.label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 9px}.branch-list{display:grid;gap:5px}.branch{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:8px;color:#b8c4d4}.branch.active{background:#1d2d3b;color:var(--cyan)}.branch span:last-child{font-family:monospace;color:var(--muted);font-size:11px}.side .bottom{margin-top:auto;display:grid;gap:9px}.side .bottom button{width:100%;text-align:left}.main{padding:28px 32px 32px;max-width:1600px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:25px}.eyebrow{color:var(--cyan);font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700}.title{font-size:30px;font-weight:760;letter-spacing:-1px;margin:4px 0}.sub{color:var(--muted);max-width:700px}.actions{display:flex;gap:9px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:17px}.stat,.card{background:linear-gradient(145deg,#151f2d,#111923);border:1px solid #263449;border-radius:13px;box-shadow:var(--shadow)}.stat{padding:15px 17px}.stat .num{font-size:24px;font-weight:750}.stat .cap{color:var(--muted);font-size:12px;margin-top:4px}.grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:17px}.card{padding:18px}.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.cardhead h2{font-size:15px;margin:0}.cardhead small{color:var(--muted)}.graph-wrap{height:454px;overflow:auto;border-radius:10px;background:linear-gradient(180deg,#101925,#0d141d);border:1px solid #222f42;position:relative}.graph{min-width:760px;width:100%;height:100%}.axis{fill:#64748b;font-size:11px;font-weight:600}.lane{stroke:#27364a;stroke-width:1}.edge{fill:none;stroke-width:3;stroke-linecap:round;opacity:.75}.commit{cursor:pointer}.commit circle{fill:#111925;stroke-width:3}.commit.selected circle{stroke:#fff;stroke-width:4;filter:drop-shadow(0 0 8px #fff8)}.commit:hover circle{filter:drop-shadow(0 0 8px currentColor)}.commit text{fill:#aab7ca;font:11px ui-monospace,SFMono-Regular,monospace}.commit .msg{fill:#e7edf7;font:12px Inter,system-ui,sans-serif}.event-pin{cursor:pointer}.event-pin line{stroke:var(--amber);stroke-width:2}.event-pin circle{fill:var(--amber);stroke:#111925;stroke-width:3}.event-pin text{fill:var(--amber);font-weight:700;font-size:10px}.event-pin.selected circle{fill:var(--cyan);stroke:#fff}.event-list{display:grid;gap:10px;max-height:497px;overflow:auto}.event{padding:12px;border:1px solid #29384d;background:#141f2d;border-radius:10px;cursor:pointer;transition:.2s}.event:hover,.event.active{border-color:var(--cyan);background:#182d35}.event .evtop{display:flex;justify-content:space-between;gap:8px}.event b{font-size:13px}.pill{font-size:10px;border-radius:20px;padding:3px 7px;background:#243348;color:var(--amber);white-space:nowrap}.event p{color:var(--muted);font-size:12px;margin:7px 0}.event code{color:var(--cyan);font-size:11px}.legend{display:flex;gap:18px;color:var(--muted);font-size:11px;margin-top:12px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.empty{color:var(--muted);padding:35px;text-align:center}.modal-bg{position:fixed;inset:0;background:#05090fcc;display:none;place-items:center;z-index:5;padding:18px}.modal-bg.open{display:grid}.modal{width:min(510px,100%);background:#121c29;border:1px solid #34445d;border-radius:15px;box-shadow:0 25px 90px #000b;padding:21px}.modal h2{margin:0 0 16px;font-size:19px}.form{display:grid;gap:12px}.form label{display:grid;gap:6px;color:#aebbd0;font-size:12px}.form input,.form select,.form textarea{background:#0c141e;color:var(--text);border:1px solid #304057;border-radius:7px;padding:10px;outline:none}.form textarea{min-height:75px;resize:vertical}.form input:focus,.form select:focus{border-color:var(--cyan)}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}.toast{position:fixed;bottom:20px;right:20px;background:#d7fff7;color:#09201d;padding:11px 16px;border-radius:8px;font-weight:700;display:none;z-index:9}.tip{position:fixed;display:none;pointer-events:none;background:#101b28;border:1px solid var(--amber);border-radius:8px;padding:10px 12px;box-shadow:var(--shadow);z-index:8;font-size:12px;max-width:250px}.tip strong{display:block;color:var(--amber);margin-bottom:4px}.mobile-menu{display:none}@media(max-width:960px){.app{grid-template-columns:1fr}.side{display:none}.side.open{display:flex;position:fixed;z-index:4;inset:0 auto 0 0;width:282px;box-shadow:20px 0 60px #000b}.mobile-menu{display:block}.main{padding:22px 16px}.grid{grid-template-columns:1fr}.event-list{max-height:none}.topbar{align-items:flex-start}.stats{grid-template-columns:repeat(2,1fr)}}
</style></head>
<body><div class="app"><aside class="side" id="side"><div class="brand"><div class="logo">⌘</div><div><b>threadline</b><small>history / context</small></div></div><div><h4>Branches</h4><div id="branches" class="branch-list"></div></div><div><h4>Quick actions</h4><button onclick="openModal('commit')">＋ New commit</button><button onclick="openModal('event')">＋ Add context marker</button><button onclick="openModal('branch')">＋ New branch</button></div><div class="bottom"><button onclick="exportData()">↓ Export workspace</button><button onclick="document.getElementById('file').click()">↑ Import JSON</button><input id="file" type="file" accept="application/json" hidden onchange="importData(event)"><small style="color:var(--muted);font-size:11px">Autosaved locally · <span id="saved">ready</span></small></div></aside><main class="main"><div class="topbar"><div><button class="mobile-menu" onclick="side.classList.toggle('open')">☰</button><div class="eyebrow">Repository topology / main</div><div class="title">A living history of decisions</div><div class="sub">Trace how code moved, then layer the moments that changed its direction directly onto the commit graph.</div></div><div class="actions"><button onclick="resetData()">Reset demo</button><button class="primary" onclick="openModal('event')">＋ Context marker</button></div></div><div class="stats"><div class="stat"><div class="num" id="commitCount">0</div><div class="cap">commits in history</div></div><div class="stat"><div class="num" id="branchCount">0</div><div class="cap">active branches</div></div><div class="stat"><div class="num" id="eventCount">0</div><div class="cap">anchored markers</div></div><div class="stat"><div class="num" id="tagCount">0</div><div class="cap">release tags</div></div></div><div class="grid"><section class="card"><div class="cardhead"><h2>Commit topology</h2><small>click a node to inspect its context</small></div><div class="graph-wrap"><svg id="graph" class="graph" role="img" aria-label="Git commit topology"></svg></div><div class="legend"><span><i class="dot" style="background:var(--cyan)"></i>mainline</span><span><i class="dot" style="background:var(--violet)"></i>feature branch</span><span><i class="dot" style="background:var(--amber)"></i>context marker</span><span style="margin-left:auto">Scroll horizontally to explore →</span></div></section><section class="card"><div class="cardhead"><h2>Context flow</h2><small id="filterLabel">all markers</small></div><div id="events" class="event-list"></div></section></div><section class="card" style="margin-top:17px"><div class="cardhead"><h2>Workspace controls</h2><small>CRUD management</small></div><div class="actions"><button onclick="openModal('commit')">Manage commits</button><button onclick="openModal('branch')">Manage branches</button><button onclick="openModal('tag')">Manage tags</button><button onclick="openModal('event')">Manage context events</button></div></section></main></div><div id="modalBg" class="modal-bg"><div class="modal"><h2 id="modalTitle"></h2><form id="form" class="form"></form><div class="modal-actions"><button onclick="closeModal()" type="button">Cancel</button><button class="primary" id="saveBtn" type="button">Save changes</button></div></div></div><div class="tip" id="tip"></div><div class="toast" id="toast">Saved</div>
<script>
const seed={commits:[{id:'a1b2c3d',msg:'initialize project',branch:'main',parents:[],time:'2024-02-02'},{id:'e4f5a6b',msg:'shape the data layer',branch:'main',parents:['a1b2c3d'],time:'2024-02-08'},{id:'c7d8e9f',msg:'prototype timeline canvas',branch:'feature/context',parents:['e4f5a6b'],time:'2024-02-15'},{id:'b2c3d4e',msg:'add import pipeline',branch:'feature/context',parents:['c7d8e9f'],time:'2024-02-20'},{id:'f5a6b7c',msg:'stabilize persistence',branch:'main',parents:['e4f5a6b'],time:'2024-02-25'},{id:'d8e9f0a',msg:'merge context timeline',branch:'main',parents:['f5a6b7c','b2c3d4e'],time:'2024-03-01'},{id:'b1c2d3e',msg:'polish interaction states',branch:'main',parents:['d8e9f0a'],time:'2024-03-07'}],branches:[{name:'main',head:'b1c2d3e'},{name:'feature/context',head:'b2c3d4e'},{name:'release/v1',head:'d8e9f0a'}],tags:[{name:'v0.1.0',commit:'e4f5a6b'},{name:'v1.0.0',commit:'d8e9f0a'}],events:[{id:'ev1',title:'Project kickoff',type:'milestone',ref:'planning-01',commitId:'a1b2c3d',detail:'The initial scope was agreed and the repository was born.'},{id:'ev2',title:'Code freeze',type:'deadline',ref:'freeze-02',commitId:'c7d8e9f',detail:'Feature work paused while the interaction model was reviewed.'},{id:'ev3',title:'Feature completion',type:'milestone',ref:'launch-01',commitId:'b2c3d4e',detail:'Context import and associations reached parity with the brief.'},{id:'ev4',title:'Production launch',type:'release',ref:'ship-01',commitId:'d8e9f0a',detail:'The first integrated timeline shipped to its users.'}]};
let state=JSON.parse(localStorage.getItem('threadline-state')||'null')||seed,selected=null,modalMode=null;
const $=s=>document.querySelector(s); function save(){localStorage.setItem('threadline-state',JSON.stringify(state));$('#saved').textContent='just now';setTimeout(()=>$('#saved').textContent='saved locally',900)} function toast(x='Saved'){let t=$('#toast');t.textContent=x;t.style.display='block';setTimeout(()=>t.style.display='none',1600)}
function render(){save();$('#commitCount').textContent=state.commits.length;$('#branchCount').textContent=state.branches.length;$('#eventCount').textContent=state.events.length;$('#tagCount').textContent=state.tags.length;$('#branches').innerHTML=state.branches.map((b,i)=>`<div class="branch ${i?'':'active'}"><span>◉　${b.name}</span><span>${b.head.slice(0,7)} <button title="Delete branch" style="padding:1px 5px;margin-left:5px" onclick="deleteBranch('${b.name}',event)">×</button></span></div>`).join('');draw();renderEvents()}
function draw(){let svg=$('#graph'),w=Math.max(760,state.commits.length*118+100),h=454;svg.setAttribute('viewBox',`0 0 ${w} ${h}`);let branchNames=[...new Set(state.commits.map(c=>c.branch))],colors=['#4de1d0','#9b8cff','#ff7186','#69dc91'];let pos={};state.commits.forEach((c,i)=>{let lane=branchNames.indexOf(c.branch);pos[c.id]={x:70+i*112,y:100+lane*105,color:colors[lane%colors.length]}});let out=`<rect width="${w}" height="${h}" fill="transparent"/>`;branchNames.forEach((b,i)=>{let y=100+i*105;out+=`<line class="lane" x1="38" x2="${w-20}" y1="${y}" y2="${y}"/><text class="axis" x="15" y="${y+4}">${b.split('/').pop()}</text>`});state.commits.forEach(c=>c.parents.forEach(p=>{if(pos[p]){let a=pos[c.id],b=pos[p],d=a.y===b.y?`M${b.x},${b.y} L${a.x},${a.y}`:`M${b.x},${b.y} C${b.x+45},${b.y} ${a.x-45},${a.y} ${a.x},${a.y}`;out+=`<path class="edge" style="stroke:${pos[c.id].color}" d="${d}"/>`}}));state.commits.forEach(c=>{let p=pos[c.id],tag=state.tags.find(t=>t.commit===c.id);out+=`<g class="commit ${selected===c.id?'selected':''}" data-id="${c.id}" style="color:${p.color}" onclick="selectCommit('${c.id}')"><circle cx="${p.x}" cy="${p.y}" r="9" style="stroke:${p.color}"/><text x="${p.x-25}" y="${p.y+27}">${c.id}</text><text class="msg" x="${p.x-25}" y="${p.y-17}">${c.msg.slice(0,20)}${c.msg.length>20?'…':''}</text>${tag?`<text x="${p.x+14}" y="${p.y+4}" fill="#ffbd6b" font-size="10">◆ ${tag.name}</text>`:''}</g>`});state.events.forEach((e,i)=>{let p=pos[e.commitId];if(!p)return;let x=p.x,y=p.y-45-(i%2)*16;out+=`<g class="event-pin ${selected===e.commitId?'selected':''}" data-event="${e.id}" onclick="selectEvent('${e.id}')" onmouseenter="showTip(event,'${e.id}')" onmouseleave="hideTip()"><line x1="${p.x}" y1="${p.y-10}" x2="${x}" y2="${y+8}"/><circle cx="${x}" cy="${y}" r="8"/><text x="${x+12}" y="${y+4}">◆ ${e.title.slice(0,18)}</text></g>`});svg.innerHTML=out}
function renderEvents(){let list=state.events.filter(e=>!selected||e.commitId===selected);$('#filterLabel').textContent=selected?`linked to ${selected}`:'all markers';$('#events').innerHTML=list.length?list.map(e=>`<div class="event ${selected===e.commitId?'active':''}" onclick="selectEvent('${e.id}')"><div class="evtop"><b>${e.title}</b><span class="pill">${e.type}</span></div><p>${e.detail||'No additional detail.'}</p><code>◆ ${e.ref}　→　${e.commitId}</code></div>`).join(''):'<div class="empty">No context markers on this commit.<br><br><button onclick="openModal(\'event\')">Add one</button></div>'}
function selectCommit(id){selected=selected===id?null:id;render()}function selectEvent(id){let e=state.events.find(x=>x.id===id);selected=e.commitId;render();setTimeout(()=>document.querySelector(`[data-event="${id}"]`)?.scrollIntoView({block:'nearest'}),20)}
function showTip(ev,id){let e=state.events.find(x=>x.id===id);let t=$('#tip');t.innerHTML=`<strong>${e.title}</strong>${e.detail||''}<br><span style="color:var(--cyan)">Anchored to commit ${e.commitId}</span>`;t.style.display='block';t.style.left=(ev.clientX+14)+'px';t.style.top=(ev.clientY+14)+'px'}function hideTip(){$('#tip').style.display='none'}
function openModal(mode){modalMode=mode;$('#modalBg').classList.add('open');$('#modalTitle').textContent={commit:'Create commit',event:'Add contextual marker',branch:'Create branch',tag:'Create release tag'}[mode];let f=$('#form');if(mode==='commit')f.innerHTML=`<label>Commit message<input name="msg" required placeholder="what changed?"></label><label>Branch<select name="branch">${state.branches.map(b=>`<option>${b.name}</option>`).join('')}</select></label><label>Parent commit<select name="parent"><option value="">No parent</option>${state.commits.map(c=>`<option value="${c.id}">${c.id} · ${c.msg}</option>`).join('')}</select></label>`;if(mode==='event')f.innerHTML=`<label>Title<input name="title" required placeholder="Code freeze"></label><label>Event type<select name="type"><option>milestone</option><option>deadline</option><option>release</option><option>incident</option></select></label><label>Spatial reference<input name="ref" required placeholder="launch-01"></label><label>Associated commit<select name="commitId" required>${state.commits.map(c=>`<option value="${c.id}" ${selected===c.id?'selected':''}>${c.id} · ${c.msg}</option>`).join('')}</select></label><label>Details<textarea name="detail" placeholder="Why does this moment matter?"></textarea></label>`;if(mode==='branch')f.innerHTML=`<label>Branch name<input name="name" required placeholder="feature/new-work"></label><label>Start from<select name="head">${state.commits.map(c=>`<option value="${c.id}">${c.id} · ${c.msg}</option>`).join('')}</select></label>`;if(mode==='tag')f.innerHTML=`<label>Tag name<input name="name" required placeholder="v1.1.0"></label><label>Commit<select name="commit">${state.commits.map(c=>`<option value="${c.id}">${c.id} · ${c.msg}</option>`).join('')}</select></label>`;$('#saveBtn').onclick=submitModal}
function closeModal(){$('#modalBg').classList.remove('open')}function submitModal(){let d=Object.fromEntries(new FormData($('#form')));if(modalMode==='commit'){let id=Math.random().toString(16).slice(2,9);state.commits.push({id,msg:d.msg,branch:d.branch,parents:d.parent?[d.parent]:[],time:new Date().toISOString().slice(0,10)});let b=state.branches.find(x=>x.name===d.branch);if(b)b.head=id}if(modalMode==='event')state.events.push({id:'ev'+Date.now(),...d});if(modalMode==='branch')state.branches.push(d);if(modalMode==='tag')state.tags.push(d);closeModal();selected=null;render();toast('Workspace updated')}
function deleteBranch(name,ev){ev.stopPropagation();if(name==='main'){toast('Main branch is protected');return}if(confirm('Delete branch '+name+'?')){state.branches=state.branches.filter(b=>b.name!==name);state.commits=state.commits.filter(c=>c.branch!==name);state.events=state.events.filter(e=>state.commits.some(c=>c.id===e.commitId));state.tags=state.tags.filter(t=>state.commits.some(c=>c.id===t.commit));selected=null;render();toast('Branch deleted')}}function exportData(){let a=document.createElement('a');a.href='data:application/json;charset=utf-8,'+encodeURIComponent(JSON.stringify(state,null,2));a.download='threadline-workspace.json';a.click();toast('Export ready')}function importData(ev){let file=ev.target.files[0];if(!file)return;let r=new FileReader();r.onload=()=>{try{let x=JSON.parse(r.result);if(!x.commits||!x.events)throw Error();state={...seed,...x};render();toast('Workspace imported')}catch(e){toast('Invalid workspace JSON')}};r.readAsText(file)}function resetData(){if(confirm('Reset to the demo workspace?')){state=JSON.parse(JSON.stringify(seed));selected=null;render();toast('Demo restored')}}
$('#modalBg').addEventListener('click',e=>{if(e.target.id==='modalBg')closeModal()});render();
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"full","sessionId":"0d040b43-64c5-4cd8-a071-91a87df613fb","tokensIn":426880,"tokensOut":30180,"tokensTotal":457060,"turns":11,"toolCalls":14,"failedToolCalls":1,"timestamp":"2026-07-31T01:46:36.452Z"} -->