// parts.jsx — reusable bits: code block w/ copy, diagrams, expandable concept, // tab bar. Globals attached at the bottom for app.jsx to consume. const { useState, useEffect, useRef, useCallback } = React; // ----- CopyButton ------------------------------------------------------------- function CopyButton({ text, label = "copy", accent = "var(--ink)" }) { const [state, setState] = useState("idle"); // idle | ok | err const t = useRef(null); const onClick = useCallback(async () => { try { await navigator.clipboard.writeText(text); setState("ok"); } catch { // Fallback for non-secure contexts (older deployments) try { const ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); document.body.removeChild(ta); setState("ok"); } catch { setState("err"); } } clearTimeout(t.current); t.current = setTimeout(() => setState("idle"), 1400); }, [text]); useEffect(() => () => clearTimeout(t.current), []); return ( ); } // ----- CodeBlock -------------------------------------------------------------- function CodeBlock({ code, accent = "var(--ink)", small = false, label }) { return (

{label || "shell"}

        {highlightShell(code)}

); } // Minimal shell highlighter — keeps prose comments dim, commands bright. function highlightShell(src) { const lines = src.split("\n"); return lines.map((line, i) => { const nl = i < lines.length - 1 ? "\n" : ""; if (/^\s*#/.test(line)) { return {line}{nl}; } // split inline trailing comment const m = line.match(/^(.*?)(\s+#\s.*)$/); if (m) { return ( {tokens(m[1])} {m[2]} {nl} ); } return {tokens(line)}{nl}; }); } function tokens(s) { // highlight first word as command keyword const m = s.match(/^(\s*)(\S+)(.*)$/); if (!m) return s; return <> {m[1]} {m[2]} {m[3]} ; } // ----- LaneBadge -------------------------------------------------------------- function LaneBadge({ n, accent, accentBg, accentInk, size = 38 }) { return (

{n}

); } // ----- LaneChip (clickable, used in matrix + flowchart) ----------------------- function LaneChip({ lane, onClick }) { const L = window.CHEAT.LANES[lane - 1]; return ( ); } // ----- Flowchart (custom SVG, not Mermaid) ----------------------------------- function Flowchart({ goto }) { // Pure SVG, no foreignObject — keeps it crisp at any size. // Nodes: A (start), B (trivial?), L1, D (parallel?), L2, E (CI/review?), G (done?), L3. const W = 560, H = 360; const L = window.CHEAT.LANES; return ( ); } function FNode({ x, y, w, h, label, diamond, subtle, compact }) { const cx = x + w / 2, cy = y + h / 2; return ( {diamond ? ( ) : ( )} {label} ); } function LaneNode({ lane, cx, cy, goto, small }) { const w = small ? 110 : 130, h = small ? 36 : 44; return ( goto(lane.id)}> {lane.n} {lane.short} ); } // ----- Lane diagrams --------------------------------------------------------- function DiagramTimeline() { // Lane 1: dev branch with merge points, fix branch born/merged/deleted. const W = 560, H = 170; const dev = "M40,80 L140,80 L240,80 L340,80 L440,80 L520,80"; return ( ); } function DiagramParallel() { // Lane 2: main repo lane + worktrees stacked, arrows back to dev const W = 580, H = 220; return ( ); } function DiagramReview() { // Lane 2 · mode B: main-repo timeline briefly diverts to the agent's branch // for in-place verification, then returns to dev once the PR is merged. const W = 580, H = 200; return ( ); } function DiagramLifecycle() { // Lane 3: state machine for a worktree const W = 580, H = 220; const states = [ { x: 80, y: 110, label: "active", id: "a" }, { x: 240, y: 60, label: "locked", id: "l" }, { x: 400, y: 110, label: "active", id: "a2" }, { x: 540, y: 110, label: "gone", id: "g", terminal: true }, { x: 240, y: 170, label: "orphan", id: "o", warn: true }, ]; return ( ); } // ----- Concept (expandable) -------------------------------------------------- function Concept({ c, open, onToggle }) { return (

{open && (

{c.body.map((b, i) => { if (b.p) return

{b.p}

; if (b.code) return

; if (b.list) return (

{li}

); if (b.table) return (

{b.table[0].map((th, k) => ( ))}{b.table.slice(1).map((row, ri) => ( {row.map((td, k) => ( ))} ))}

{th}
{td}

); return null; })}

)}

); } // ----- ModeToggle ------------------------------------------------------------ // Bigger, banner-style segmented control used inside a lane card to switch // between fundamentally different workflows (e.g. manual vs. with Claude Code). // Visually heavier than Tabs because the choice changes ALL the content below. function ModeToggle({ modes, value, onChange, accent, accentBg, accentInk }) { return (

{modes.map((m, i) => { const on = m.id === value; return ( ); })}

); } // ----- Tabs ------------------------------------------------------------------ function Tabs({ tabs, value, onChange, accent }) { return (

{tabs.map((t) => { const active = value === t.id; return ( ); })}

); } Object.assign(window, { CopyButton, CodeBlock, LaneBadge, LaneChip, Flowchart, DiagramTimeline, DiagramParallel, DiagramReview, DiagramLifecycle, Concept, Tabs, ModeToggle, });