{ onSelect(card.id); onMouseDown(card.id, e); }}
style={{
position: 'absolute',
left: card.x, top: card.y, width: card.w, height: card.h,
background: isBase
? 'linear-gradient(180deg, rgba(28,26,22,0.96) 0%, rgba(19,19,22,0.96) 100%)'
: 'linear-gradient(180deg, rgba(22,22,25,0.96) 0%, rgba(15,15,18,0.96) 100%)',
border: `1px solid ${isSelected ? hue.c : 'rgba(255,255,255,0.07)'}`,
borderRadius: 14,
boxShadow: isSelected
? `0 0 0 1px ${hue.c}, 0 0 28px ${hue.glow}, 0 18px 60px rgba(0,0,0,0.55)`
: isBase
? `0 0 36px ${hue.glow}, 0 18px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05)`
: '0 12px 36px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04)',
cursor: 'grab',
userSelect: 'none',
transition: 'border-color 140ms ease, box-shadow 140ms ease',
backdropFilter: 'blur(8px)',
}}
>
{/* left hue stripe */}
{/* in-port (left) */}
{!isBase && (
)}
{/* out-port (right) — drag handle */}
onPortDown(card.id, e)}
title="drag to merge into another branch"
style={{
position: 'absolute', right: -7, top: card.h / 2 - 7, width: 14, height: 14,
borderRadius: 14, background: hue.c,
border: '2px solid #0c0c0e',
boxShadow: `0 0 10px ${hue.glow}`,
cursor: 'crosshair',
zIndex: 3,
}}
/>
{/* content */}
{isBase ? (
) : (
)}
);
}
function BaseInner({ card, hue }) {
return (
main
{card.upstream}
{card.headMsg}
{card.head}
·
{card.commits} commits
·
{card.pushed}
);
}
function WorktreeInner({ card, hue }) {
const st = STATUS_LABEL[card.status];
const stHue = HUE[st.hue];
return (
{/* row 1: parent + status pill */}
from {card.parent === 'base' ? 'main' : card.parent}
{st.text}
{/* row 2: branch name */}
{card.branch}
{/* row 3: head commit msg */}
{card.headMsg}
{/* row 4: ahead/behind/dirty */}
{card.ahead > 0 && (
{card.ahead}
)}
{card.behind > 0 && (
{card.behind}
)}
{card.dirty > 0 && (
{card.dirty} dirty
)}
{card.last}
{/* row 5: hash */}
{card.head}
);
}
// ---------- edge ----------
const EDGE_AMBER = 'oklch(0.76 0.15 70)'; // dashed lineage line (matches app)
const COMMIT_DOT = 'oklch(0.68 0.16 280)'; // iris — pending commit dots
function Edge({ id, from, to, kind, fromHue, toHue, hovered, onHover, onClick, pending }) {
const a = portPos(from, 'out');
const b = portPos(to, 'in');
const d = smartBezier(a, b, kind);
const isMerge = kind === 'merge-intent';
const isConflict = kind === 'conflict';
const isBranched = kind === 'branched';
const stroke = isMerge ? HUE.amber.c : isConflict ? HUE.ember.c : isBranched ? EDGE_AMBER : HUE[fromHue].c;
const dash = isBranched ? '7 7' : isMerge ? '6 5' : isConflict ? '3 4' : null;
const glow = isBranched ? 'rgba(245,179,71,0.28)' : HUE[fromHue].glow;
const pathId = 'edgepath-' + id;
const dots = pending ? pending.dots : 0;
const dur = 6.5;
return (
onHover(null)} onClick={onClick}>
{/* glow underlay */}
{/* main stroke */}
{/* arrowhead for merge intent */}
{isMerge && (
)}
{/* flowing commit dots — forward = pull from main, reverse = ready to send to main */}
{dots > 0 && Array.from({ length: dots }).map((_, i) => (
))}
);
}
// ---------- edge pill (behind · dirty, or ahead when ready) ----------
function EdgePill({ x, y, pending }) {
const reverse = pending.dir === 'reverse';
return (
{reverse ? (
{pending.ahead}
) : (
<>
{pending.behind}
·
{pending.dirty}
)}
);
}
// ---------- temp drag edge ----------
function DragEdge({ from, x, y }) {
const a = portPos(from, 'out');
const b = { x, y };
const d = bezierPath(a, b);
return (
);
}
// ---------- main ----------
function WorktreeCanvas() {
const [cards, setCards] = useState(window.INITIAL_CARDS);
const [edges, setEdges] = useState(window.INITIAL_EDGES);
const [view, setView] = useState({ tx: 40, ty: -20, scale: 0.78 });
const [selected, setSelected] = useState('w2');
const [hoveredEdge, setHoveredEdge] = useState(null);
const [dragPort, setDragPort] = useState(null);
const [filter, setFilter] = useState('all');
const stageRef = useRef(null);
// refs mirroring latest state — used by gesture/zoom handlers to avoid stale closures
const viewRef = useRef(view); viewRef.current = view;
const cardsRef = useRef(cards); cardsRef.current = cards;
const SCALE_MIN = 0.2, SCALE_MAX = 2.4;
// zoom around a screen point (defaults to stage center)
const zoomBy = useCallback((factor, clientX, clientY) => {
const el = stageRef.current; if (!el) return;
const rect = el.getBoundingClientRect();
const ox = (clientX == null ? rect.width / 2 : clientX - rect.left);
const oy = (clientY == null ? rect.height / 2 : clientY - rect.top);
const v = viewRef.current;
const scale = clamp(v.scale * factor, SCALE_MIN, SCALE_MAX);
const k = scale / v.scale;
setView({ scale, tx: ox - (ox - v.tx) * k, ty: oy - (oy - v.ty) * k });
}, []);
// fit all cards into the visible stage, centered
const fitView = useCallback(() => {
const el = stageRef.current; if (!el) return;
const rect = el.getBoundingClientRect();
if (!rect.width || !rect.height) return;
const cs = cardsRef.current;
const bx0 = Math.min(...cs.map(c => c.x));
const by0 = Math.min(...cs.map(c => c.y));
const bx1 = Math.max(...cs.map(c => c.x + c.w));
const by1 = Math.max(...cs.map(c => c.y + c.h));
const cw = bx1 - bx0, ch = by1 - by0;
const pad = 44;
const scale = clamp(Math.min((rect.width - pad * 2) / cw, (rect.height - pad * 2) / ch), SCALE_MIN, 1.1);
setView({
scale,
tx: (rect.width - cw * scale) / 2 - bx0 * scale,
ty: (rect.height - ch * scale) / 2 - by0 * scale,
});
}, []);
const cardMap = useMemo(() => Object.fromEntries(cards.map(c => [c.id, c])), [cards]);
const worldFromScreen = useCallback((sx, sy) => {
const rect = stageRef.current.getBoundingClientRect();
return {
x: (sx - rect.left - view.tx) / view.scale,
y: (sy - rect.top - view.ty) / view.scale,
};
}, [view]);
// wheel: trackpad pinch (ctrlKey) zooms; plain wheel is swallowed so it doesn't scroll the page
useEffect(() => {
const el = stageRef.current;
if (!el) return;
const onWheel = (e) => {
e.preventDefault();
if (e.ctrlKey) zoomBy(Math.exp(-e.deltaY * 0.01), e.clientX, e.clientY);
};
el.addEventListener('wheel', onWheel, { passive: false });
return () => el.removeEventListener('wheel', onWheel);
}, [zoomBy]);
// touch: one finger pans, two fingers pinch-zoom
useEffect(() => {
const el = stageRef.current;
if (!el) return;
const distOf = (t) => Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);
const midOf = (t) => ({ x: (t[0].clientX + t[1].clientX) / 2, y: (t[0].clientY + t[1].clientY) / 2 });
let mode = null, startDist = 0, startView = null, startMid = null, panStart = null;
const onStart = (e) => {
if (e.target.closest('[data-card], [data-port-in], [data-port-out]')) return;
if (e.touches.length === 2) {
mode = 'pinch'; startDist = distOf(e.touches); startMid = midOf(e.touches); startView = viewRef.current;
} else if (e.touches.length === 1) {
mode = 'pan'; panStart = { x: e.touches[0].clientX, y: e.touches[0].clientY }; startView = viewRef.current;
setSelected(null);
}
};
const onMove = (e) => {
if (!mode) return;
e.preventDefault();
const rect = el.getBoundingClientRect();
if (mode === 'pinch' && e.touches.length === 2) {
const d = distOf(e.touches), m = midOf(e.touches);
const scale = clamp(startView.scale * (d / startDist), SCALE_MIN, SCALE_MAX);
const k = scale / startView.scale;
const ox = startMid.x - rect.left, oy = startMid.y - rect.top;
setView({
scale,
tx: ox - (ox - startView.tx) * k + (m.x - startMid.x),
ty: oy - (oy - startView.ty) * k + (m.y - startMid.y),
});
} else if (mode === 'pan' && e.touches.length === 1) {
setView({
...startView,
tx: startView.tx + (e.touches[0].clientX - panStart.x),
ty: startView.ty + (e.touches[0].clientY - panStart.y),
});
}
};
const onEnd = (e) => { if (e.touches.length === 0) mode = null; };
el.addEventListener('touchstart', onStart, { passive: false });
el.addEventListener('touchmove', onMove, { passive: false });
el.addEventListener('touchend', onEnd);
el.addEventListener('touchcancel', onEnd);
return () => {
el.removeEventListener('touchstart', onStart);
el.removeEventListener('touchmove', onMove);
el.removeEventListener('touchend', onEnd);
el.removeEventListener('touchcancel', onEnd);
};
}, []);
// fit to content on mount and when the stage resizes
useEffect(() => {
const raf = requestAnimationFrame(fitView);
const onResize = () => fitView();
window.addEventListener('resize', onResize);
return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); };
}, [fitView]);
const startPan = (e) => {
if (e.button !== 0) return;
if (e.target.closest('[data-card], [data-port-in], [data-port-out]')) return;
const sx0 = e.clientX, sy0 = e.clientY;
const { tx, ty } = view;
const move = (ev) => setView(v => ({ ...v, tx: tx + (ev.clientX - sx0), ty: ty + (ev.clientY - sy0) }));
const up = () => {
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', up);
document.body.style.cursor = '';
};
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
document.body.style.cursor = 'grabbing';
setSelected(null);
};
const startCardDrag = (id, e) => {
const start = worldFromScreen(e.clientX, e.clientY);
const card = cardMap[id];
const offX = start.x - card.x, offY = start.y - card.y;
const move = (ev) => {
const p = worldFromScreen(ev.clientX, ev.clientY);
setCards(cs => cs.map(c => c.id === id ? { ...c, x: p.x - offX, y: p.y - offY } : c));
};
const up = () => {
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', up);
document.body.style.cursor = '';
};
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
document.body.style.cursor = 'grabbing';
};
const startPortDrag = (fromId, e) => {
e.stopPropagation();
e.preventDefault();
const fromCard = cardMap[fromId];
const startWorld = { x: fromCard.x + fromCard.w, y: fromCard.y + fromCard.h / 2 };
setDragPort({ from: fromId, x: startWorld.x, y: startWorld.y });
const move = (ev) => {
const p = worldFromScreen(ev.clientX, ev.clientY);
setDragPort({ from: fromId, x: p.x, y: p.y });
};
const up = (ev) => {
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', up);
const el = document.elementFromPoint(ev.clientX, ev.clientY);
const portEl = el && el.closest('[data-port-in]');
const cardEl = el && el.closest('[data-card]');
let toId = null;
if (portEl) toId = portEl.getAttribute('data-port-in');
else if (cardEl) toId = cardEl.getAttribute('data-card');
if (toId && toId !== fromId) {
setEdges(es => {
// remove any existing intent for this pair
const filtered = es.filter(e => !(e.from === fromId && e.to === toId && e.kind === 'merge-intent'));
return [...filtered, { id: 'mi-' + Date.now(), from: fromId, to: toId, kind: 'merge-intent' }];
});
}
setDragPort(null);
};
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
};
const resetView = () => fitView();
// bounds for SVG world
const worldW = 1700, worldH = 1100;
// pending merge intents (for inspector)
const pendingMerges = edges.filter(e => e.kind === 'merge-intent');
const selCard = selected ? cardMap[selected] : null;
// counts for filter chips
const counts = useMemo(() => {
const r = { all: 0, wip: 0, ready: 0, conflict: 0, stale: 0 };
cards.forEach(c => {
if (c.kind === 'worktree') {
r.all++;
if (c.status === 'wip' || c.status === 'draft') r.wip++;
if (c.status === 'ready') r.ready++;
if (c.status === 'conflict') r.conflict++;
if (c.status === 'stale') r.stale++;
}
});
return r;
}, [cards]);
const removeEdge = (id) => setEdges(es => es.filter(e => e.id !== id));
return (
{/* TOP BAR */}
HelmDeck
/
helmdeck
/
worktree canvas
{/* FILTER CHIPS */}
worktrees
{[
{ id: 'all', label: 'all', hue: 'amber' },
{ id: 'wip', label: 'working', hue: 'iris' },
{ id: 'ready', label: 'ready', hue: 'sage' },
{ id: 'conflict', label: 'conflict', hue: 'ember' },
{ id: 'stale', label: 'stale', hue: 'slate' },
].map(f => {
const active = filter === f.id;
const h = HUE[f.hue];
return (
);
})}
{pendingMerges.length}
pending merges
{/* STAGE */}
{/* lineage labels */}
BASE
upstream · pull target
BRANCHED FROM main
{/* edge pills — behind · dirty */}
{edges.map(e => {
const f = cardMap[e.from], t = cardMap[e.to];
if (!f || !t) return null;
const pend = pendingFor(e, t);
if (!pend) return null;
const a = portPos(f, 'out'), b = portPos(t, 'in');
return
;
})}
{cards.map(c => (
))}
{/* TOOLBAR — top right (zoom + recenter) */}
{/* HINT */}
drag to move
{/* LEGEND */}
connection
branched
merge intent
conflict
{/* INSPECTOR */}
{selCard &&
setSelected(null)}/>}
);
}
function Inspector({ card, cardMap, edges, setEdges, onClose }) {
const hue = HUE[card.hue];
const isBase = card.kind === 'base';
const incoming = edges.filter(e => e.to === card.id);
const outgoing = edges.filter(e => e.from === card.id);
const pendingMerge = outgoing.find(e => e.kind === 'merge-intent');
const parentCard = card.parent && cardMap[card.parent];
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);