);
}
function CardDivider() { return ; }
function SectionLabel({ children }) { return
{children}
; }
// ─── Message ──────────────────────────────────────────────────
// AF messages use the chip AS the sender label. Copilot messages keep Copilot identity.
function AFMessage({ chip, start = 0, children }) {
const time = useTime();
const o = fade(time, start, 0.22);
return (
{children}
);
}
function CopilotMessage({ start = 0, children, time = '13:15' }) {
const t = useTime();
const o = fade(t, start, 0.2);
return (
GitHub Copilot{time}
{children}
);
}
function UserMessage({ text, start = 0, time='13:15' }) {
const t = useTime();
const o = fade(t, start, 0.15);
return (
C
Carlos{time}
{text}
);
}
function CopilotIcon() {
return (
);
}
// ─── Spinner / check (animated for TOC) ───────────────────────
function SpinCheck({ checked, checkedAt, time }) {
const o = checked ? fade(time, checkedAt, 0.3) : 0;
// spinner rotation
const angle = (time * 360) % 360;
return (
{/* spinner */}
{/* check */}
);
}
// ─── IDE Frame ────────────────────────────────────────────────
function IDEFrame({ activeFile, branch, fileTree, children, terminal, chatChildren, lineCount }) {
return (
{children}
{terminal}
{chatChildren}
);
}
function TitleBar({ activeFile }) {
return (
{activeFile} — platform
);
}
function ActivityBar() {
return (
{[0,1,2,3,4,5].map(i => (
))}
);
}
function ActivityIcon({ i }) {
const c='currentColor', sw=1.4, s=18;
switch(i){
case 0: return ;
case 1: return ;
case 2: return ;
case 3: return ;
case 4: return ;
case 5: return ;
}
}
function FileTree({ activeFile, branch }) {
return (
);
}
// auto-scroll the chat as new messages arrive
function ChatAutoScroll() {
const time = useTime();
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const parent = el.parentElement;
if (parent) parent.scrollTop = parent.scrollHeight;
});
return ;
}
// ─── PR creation snapshot (Scene 4 lead-in) ────────────────────
function PRCreateView({ start }) {
const time = useTime();
const local = time - start;
// we render a GitHub-flavored PR-create form pane on the editor area
return (
}
>
ledgerline / platform
Open a pull request
main←feature/STORY-041-payment-retry
STORY-041 payment retry
Implements retry with backoff per DECISION-018. Idempotent on charge_id.
Closes STORY-041.
);
}
// ════════════════════════════════════════════════════════════════
// SCENE 5 — Closing card (168-180s)
// ════════════════════════════════════════════════════════════════
function Scene5({ sceneStart = 168 }) {
const time = useTime();
const a = fade(time, sceneStart + 0.3, 0.7);
const b = fade(time, sceneStart + 1.6, 0.7);
const c = fade(time, sceneStart + 3.0, 0.7);
const bgO = fade(time, sceneStart, 0.6);
return (
Carlos used Copilot all day. He never opened Agentic Forge.
Engineers don't change tools. The tools become informed.
Agentic Forge
);
}
// ════════════════════════════════════════════════════════════════
// APP — 180s timeline
// ════════════════════════════════════════════════════════════════
function App() {
return (
{/* — disabled: no voiceover. Re-enable when audio lands. */}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();
