// ════════════════════════════════════════════════════════════════ // Agentic Forge · Composite Team · v2 · 180s · 5 scenes // Multi-surface: email → Slack → Figma/intel → IDE split → close // All AF outputs render INLINE in each role's surface. No popups. // ════════════════════════════════════════════════════════════════ const T = window.TOKENS; const CT = { carbon: '#080c14', charcoal: '#1c1e24', line: '#2a2d35', bgDim: '#0f1218', white: '#fff', gray: '#a0a4ab', dim: '#6e7178', green: '#00da41', red: '#ff6b6b', amber: '#f4b400', blue: '#3b82f6', slackBg: '#1a1d21', slackHover: '#22252a', slackText: '#d1d2d3', slackLink: '#1d9bd1', }; const ease = t => t<=0?0:t>=1?1:1-Math.pow(1-t,3); const fade = (time, start, dur=0.2) => Math.max(0, Math.min(1, ease((time-start)/dur))); const slideUp = (time, start, dur=0.2, dist=4) => (1 - fade(time, start, dur)) * dist; // Gradient — display-size emphasized green text. Reference as the "gradient" style. const gradientStyle = { background: 'linear-gradient(135deg, #00E87B 0%, #00da41 50%, #00B35A 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', textShadow: 'none', }; // ─── Lower-third surface label ──────────────────────────────── function SurfaceLabel({ text, sceneStart }) { const time = useTime(); const t = time - sceneStart; let o = 0; if (t < 0.2) o = t / 0.2; else if (t < 1.7) o = 1; else if (t < 1.9) o = 1 - (t - 1.7) / 0.2; o = Math.max(0, Math.min(1, o)); if (o === 0) return null; return (
{text}
); } function AFChip({ skill, start = 0 }) { const time = useTime(); const o = fade(time, start, 0.18); return (
Agentic Forge · {skill}
); } function Card({ children, accent, start = 0, padding = 18, style }) { const time = useTime(); const o = fade(time, start, 0.22); return (
{accent &&
} {children}
); } // ─── Subtitles ──────────────────────────────────────────────── const SUBS = [ { t: 0.5, end: 5.0, text: "Four roles at Ledgerline." }, { t: 5.2, end: 11.0, text: "They never coordinated directly. The framework absorbed it." }, { t: 25.0, end: 32.0, text: "A customer success rep forwarded an email." }, { t: 32.2, end: 40.0, text: "The framework captured intent, NFR dimensions, and deadline — from one paragraph." }, { t: 42.5, end: 47.5, text: "Jessica is the PM." }, { t: 47.7, end: 52.5, text: "She types a vague Slack message because that's how PMs talk." }, { t: 52.7, end: 56.0, text: "The framework asks her to disambiguate." }, { t: 82.5, end: 87.0, text: "Rachel attaches a Figma link." }, { t: 87.2, end: 95.5, text: "The framework reads the design, maps the components, notices a missing state." }, { t: 122.5, end: 128.5, text: "Two engineers, two branches, same file." }, { t: 128.7, end: 135.0, text: "The framework saw the overlap before either of them did." }, { t: 168.5, end: 174.0, text: "The substrate they coordinate through is the framework." }, { t: 174.2, end: 178.0, text: "Not standups." }, ]; function Subtitles() { const time = useTime(); const active = SUBS.find(s => time >= s.t && time <= s.end); if (!active) return null; const words = active.text.split(' '); const lines = []; let cur = ''; for (const w of words) { const next = cur ? cur + ' ' + w : w; if (next.length > 42) { lines.push(cur); cur = w; } else cur = next; } if (cur) lines.push(cur); return (
{lines.map((l, i) => (
{l}
))}
); } // ════════════════════════════════════════════════════════════════ // SCENE 1 — Email (Outlook web, dark mode) (0-42s) // ════════════════════════════════════════════════════════════════ const OL = { bg: '#1f1f1f', panel: '#262626', chrome: '#2b2b2b', border: '#404040', hover: '#3a3a3a', accent: '#0078d4', text: '#ffffff', textDim: '#a0a0a0', }; function OLWaffle() { return ( {[0,1,2].flatMap(r => [0,1,2].map(c => ( )))} ); } function OLLogo() { return ( O ); } function OLRailIcon({ kind }) { const s=20, sw=1.6, c='currentColor'; switch(kind){ case 'mail': return ; case 'calendar': return ; case 'people': return ; case 'todo': return ; case 'files': return ; } } function OLTopIcon({ kind }) { const s=16, sw=1.4, c='currentColor'; switch(kind){ case 'bell': return ; case 'gear': return ; case 'help': return ; } } function OLActionIcon({ kind }) { const s=14, sw=1.4, c='currentColor'; switch(kind){ case 'reply': return ; case 'reply-all': return ; case 'forward': return ; case 'delete': return ; case 'archive': return ; case 'flag': return ; case 'mark-unread': return ; case 'more': return ; } } function Scene1({ sceneStart = 0 }) { const time = useTime(); const replyT = sceneStart + 13; const cardT = sceneStart + 14; return (
{/* ── TOP BAR ───────────────────────────────────────────── */}
Outlook
Search
{['bell','gear','help'].map(k => (
))}
J
{/* ── LEFT RAIL ───────────────────────────────────────── */}
{[{k:'mail',active:true},{k:'calendar'},{k:'people'},{k:'todo'},{k:'files'}].map(it => (
{it.active &&
}
))}
{/* ── FOLDER PANE ─────────────────────────────────────── */}
+ New mail
FAVORITES
{['Inbox','Demand Capture','Sent Items','Drafts','Archive'].map((f, i) => (
{f} {f === 'Inbox' && 4}
))}
{/* ── MAIN CONTENT ────────────────────────────────────── */}
{/* Focused / Other tabs */}
Focused
Other
Filter ▾
{/* Action toolbar */}
{[['reply','Reply'],['reply-all','Reply all'],['forward','Forward']].map(([k,label]) => (
{label}
))}
{['delete','archive','flag','mark-unread','more'].map(k => (
))}
{/* Email content */}
Forwarded: Sterling & Associates — EU expansion requirements
2 messages · today
{/* AF reply (top of thread) */} {time > replyT - 0.2 && (
Agentic Forge <agentic-forge@ledgerline.com>
to demand-capture@ledgerline.com · just now
REQ-047 created (draft)
Source: email from Sterling & Associates via customer-success
REQ-047 · EU VAT calculation in export
Intent
Add EU VAT calculation to invoice export. VAT rates per country, automated.
NFR dimensions auto-flagged
  • · Regulatory — EU VAT rules vary by country and product type
  • · Localization — country selection, currency formatting per locale
  • · Deadline — Q3 European launch
Status
draft, awaiting PM triage
Routed to
USER-jessica (PM)
Customer context
Sterling & Associates · existing client
Account
ACCOUNT-014
)} {/* Original forwarded email */}
C
Casey Park <customer-success@ledgerline.com>
to demand-capture@ledgerline.com · 8:42 AM
Hi team — forwarding an email from Sterling & Associates. They're expanding to Germany and France next quarter and want EU tax calculations in the export module. Hard requirement before their European launch in Q3.
— Casey, Customer Success
▼ Original message
We're expanding to Germany and France next quarter. We need EU tax calculations in the export module — VAT rates per country, automated. Hard requirement before our European launch in Q3.
— Sterling & Associates
); } // ════════════════════════════════════════════════════════════════ // SCENE 2 — Slack (42-82s) // ════════════════════════════════════════════════════════════════ function SlackNavIcon({ kind }) { const s=18, sw=1.6, c='currentColor'; switch(kind){ case 'home': return ; case 'dm': return ; case 'activity': return ; case 'later': return ; case 'more': return ; } } function SlackComposeIcon({ kind }) { const s=14, sw=1.4, c='currentColor'; switch(kind){ case 'link': return ; case 'ol': return 123; case 'ul': return ; case 'code': return ; case 'plus': return ; case 'video': return ; case 'mic': return ; case 'emoji': return ; case 'mention': return ; case 'send': return ; } } function Scene2({ sceneStart = 42 }) { const time = useTime(); const reply1T = sceneStart + 6; const card1T = sceneStart + 7; const jessReplyT = sceneStart + 20; const reply2T = sceneStart + 26; return (
{/* ── TOP BAR ──────────────────────────────────────── */}
Search Ledgerline
{/* ── WORKSPACE RAIL ──────────────────────────────── */}
L
+
{[{k:'home',label:'Home',active:true},{k:'dm',label:'DMs'},{k:'activity',label:'Activity'},{k:'later',label:'Later'},{k:'more',label:'More'}].map(it => (
{it.label}
))}
J
{/* sidebar */}
Ledgerline
Channels
{['general','engineering','design','#product-engineering','random'].map((c, i) => { const active = c === '#product-engineering'; return (
# {c.replace('#','')}
); })}
{/* main channel */}
# product-engineering
14 members
{/* Jessica's original */}
J
Jessica Chen 9:47 AM
hey can we make the dashboard faster? clients keep complaining
{/* Thread reply 1 — Agentic Forge bot */} {time > reply1T - 0.2 && (
Agentic Forge APP 9:47 AM
I have a related item: STORY-044 (Dashboard loading optimization, High priority, blocked by DECISION-019 on caching strategy for 21 days).
Are you reporting:
(a) New customer feedback to add to STORY-044's context, or
(b) Pressure to break the DECISION-019 blocker?
Pick one and I'll route accordingly.
)} {/* Jessica reply */} {time > jessReplyT - 0.2 && (
J
Jessica Chen 9:48 AM
b. need to unblock that
)} {/* AF reply 2 */} {time > reply2T - 0.2 && (
Agentic Forge APP 9:48 AM
Recorded. Notifying decision owner USER-alex (CTO) of escalation.
DECISION-019 will appear at top of Alex's intelligence surface tomorrow morning with escalation flag and cost-of-delay update ($31K/week, now 21 days).
)}
{/* ── COMPOSE BOX ───────────────────────────────── */}
B
I
S
{['link','ol','ul','code'].map(k => (
))}
Message #product-engineering
{['plus','video','mic','emoji','mention'].map(k => (
))}
); } // ════════════════════════════════════════════════════════════════ // SCENE 3 — Figma → story comment thread (82-122s) // ════════════════════════════════════════════════════════════════ function Scene3({ sceneStart = 82 }) { const time = useTime(); const figmaPhase = time < sceneStart + 8; return figmaPhase ? : ; } function FigmaLogo() { return ( ); } function FigmaToolIcon({ kind }) { const s=14, sw=1.6, c='currentColor'; switch(kind){ case 'move': return ; case 'frame': return ; case 'shape': return ; case 'pen': return ; case 'text': return ; case 'hand': return ; case 'comment': return ; } } function FigmaLayerIcon({ kind }) { const s=10, sw=1.3, c='currentColor'; switch(kind){ case 'frame': return ; case 'component': return ; case 'text': return ; } } function Scene3Figma({ sceneStart }) { const time = useTime(); return (
{/* ── FIGMA TOP BAR ─────────────────────────────────── */}
Ledgerline · Manual retry button v3
{[{bg:'#b8336a',l:'J'},{bg:'#7a4d2a',l:'C'},{bg:'#3b5b7c',l:'A'}].map((a, i) => (
{a.l}
))}
Share
{/* ── LEFT SIDEBAR ─────────────────────────────────── */}
File
Assets
▾ PAGES
Page 1
▾ LAYERS
{[ {d:0, k:'frame', n:'Frame · STORY-046'}, {d:1, k:'component', n:'RetryButton'}, {d:2, k:'frame', n:'default'}, {d:2, k:'frame', n:'hover'}, {d:2, k:'frame', n:'active'}, {d:2, k:'frame', n:'disabled'}, {d:2, k:'frame', n:'loading'}, {d:1, k:'frame', n:'ConfirmationModal'}, {d:1, k:'text', n:'FailureReasonText'}, ].map((l, i) => (
{l.n}
))}
{/* canvas */}
{[ ['default','Retry'], ['hover','Retry'], ['active','Retry'], ['disabled','Retry'], ['loading','Retrying…'], ['modal','Confirm retry?'], ].map(([state, label], i) => (
{state}
{state === 'modal' ? (
{label}
Failure reason text shown here…
Cancel
Retry
) : (
{label}
)}
))}
{/* cursor + share dialog appearing */} {time > sceneStart + 4 && (
Share with developers
figma.com/file/Lx7…/STORY-046
✓ Copied
)} {/* ── FLOATING TOOLBAR (bottom center) ─────────── */}
{[{k:'move',active:true},{k:'frame'},{k:'shape'},{k:'pen'},{k:'text'},{k:'comment'}].map(t => (
))}
{/* right — figma comments */}
Comments
No comments yet
); } function Scene3Story({ sceneStart }) { const time = useTime(); const subSceneStart = sceneStart + 8; const pasteT = subSceneStart + 1.5; const commentT = subSceneStart + 4; const cardT = subSceneStart + 5; const rachelT = subSceneStart + 24; return (
Work› STORY-046
Manual retry button
{/* attachment bar */}
Attached design
pasteT ? CT.white : CT.dim }}> {time > pasteT ? 'figma.com/file/Lx7…/STORY-046' : 'Paste a Figma URL…'}
{time > pasteT && time < pasteT + 1.5 && (
{[0,1,2].map(i =>
)}
)} {time > pasteT + 1.5 &&
✓ Linked
}
Comments
{/* AF comment */} {time > commentT - 0.2 && (
Agentic Forge just now
Design decomposed for STORY-046.
Components identified
States visible
default · hover · active · disabled · loading
⚠
Missing state: error
No artboard for the case where retry itself fails (retry of retry).
Suggestion: render the same modal with an updated failure count and a "contact support" link.
)} {/* Rachel reply */} {time > rachelT - 0.2 && (
R
Rachel Kim just now
good catch — I'll update the figma. exactly what I'd want for the failed-retry path
)}
); } function Comp({ name, detail, warn }) { return (
· {name}
{detail}
); } function BrowserBar({ url }) { return (
🔒 {url}
); } // ════════════════════════════════════════════════════════════════ // SCENE 4 — IDE split + Slack DM + intel cut (122-168s) // ════════════════════════════════════════════════════════════════ function Scene4({ sceneStart = 122 }) { const time = useTime(); // 0-34: split IDE; 34-48: slack DM; 48-58: split IDE resolution; 58-end: intel cut // Adjusted: scene is 46s const phaseT = time - sceneStart; if (phaseT < 18) return ; if (phaseT < 32) return ; if (phaseT < 40) return ; return ; } function IDEHalf({ name, branch, lines, color, isMaria, conflictT, resolvedT, mode }) { const time = useTime(); return (
{/* tab bar */}
auth.ts ●
{/* header */}
{name[0]}
{name}
{branch}
{/* code */}
{lines.map((_, i) =>
{i + 22}
)}
{lines.map((l, i) => (
{l.text}
))}
{/* Copilot Chat panel */}
Copilot Chat Agentic Forge connected
{mode === 'conflict' && time > conflictT - 0.2 && (
In-flight conflict detected (severity: HIGH).
src/middleware/auth.ts
Carlos
feature/STORY-035-fastify-auth
147 lines changed
Maria
feature/STORY-035-helper-fns
38 lines changed
Overlap: lines 24–67
Both branches modify the same regions.
Suggested action
Sync now to avoid rework at merge time.
)} {mode === 'resolved' && (
{isMaria ? ( <>You've been reassigned to STORY-052 (test fixtures).
Carlos will complete STORY-035 first.
Your STORY-035-helper-fns branch parked, will rebase at completion. ) : ( <>You'll complete STORY-035 first.
Maria reassigned to STORY-052 (test fixtures).
Her STORY-035-helper-fns branch parked, will rebase at completion. )}
Conflict cleared.
)}
); } const carlosLines = [ { text:'export class AuthMiddleware {' }, { text:' async handle(req, reply) {', hl:true }, { text:' const token = req.headers.authorization?', hl:true }, { text:' .replace("Bearer ", "");', hl:true }, { text:' if (!token) return reply.code(401);', hl:true }, { text:' const decoded = await verify(token, SECRET);', hl:true }, { text:' req.user = decoded;', hl:true }, { text:' }', hl:true }, { text:'}' }, { text:'' }, { text:'export function requireRole(role) {' }, { text:' return async (req, reply) => {' }, { text:' if (req.user?.role !== role)' }, ]; const mariaLines = [ { text:'function extractToken(req) {' }, { text:' return req.headers.authorization?', hl:true }, { text:' .replace("Bearer ", "");', hl:true }, { text:'}', hl:true }, { text:'' }, { text:'function checkScope(token, scope) {' }, { text:' return token.scopes?.includes(scope);' }, { text:'}' }, { text:'' }, { text:'export async function authMiddleware(req, reply) {', hl:true }, { text:' const token = extractToken(req);', hl:true }, { text:' if (!token) return reply.code(401);', hl:true }, { text:' // ...' }, ]; function Scene4IDE({ sceneStart, mode }) { return (
{/* unified VS Code chrome */}
auth.ts — Ledgerline / platform
); } function Scene4SlackDM({ sceneStart }) { const time = useTime(); const m1T = sceneStart + 1; const m2T = sceneStart + 6; return (
{/* ── TOP BAR ──────────────────────────────────────── */}
Search Ledgerline
{/* ── WORKSPACE RAIL ─────────────────────────────── */}
L
+
{[{k:'home',label:'Home'},{k:'dm',label:'DMs',active:true},{k:'activity',label:'Activity'},{k:'later',label:'Later'},{k:'more',label:'More'}].map(it => (
{it.label}
))}
C
{/* ── SIDEBAR (DM focused) ──────────────────────── */}
Ledgerline
Direct messages
{[ {name:'Maria Liu', initial:'M', bg:'#22c55e', online:true, active:true}, {name:'Jessica Chen', initial:'J', bg:'#b8336a', online:true}, {name:'Casey Park', initial:'C', bg:'#7a4d2a', online:false}, {name:'Alex Rivera', initial:'A', bg:'#3b5b7c', online:false}, ].map((u, i) => (
{u.initial}
{u.online &&
}
{u.name}
))}
{/* ── MAIN DM ──────────────────────────────────── */}
{/* DM header */}
M
Maria Liu
· Active
{/* Messages */}
{time > m1T - 0.2 && (
C
Carlos Mendoza 2:14 PM
ugh — maria let's sync, I'll be done with the structural piece in 2h then yours should rebase clean
)} {time > m2T - 0.2 && (
M
Maria Liu 2:14 PM
sounds good — I'll pause and pick up the test fixtures task in the meantime
)}
{/* ── COMPOSE BOX ──────────────────────────────── */}
B
I
S
{['link','ol','ul','code'].map(k => (
))}
Message Maria Liu
{['plus','video','mic','emoji','mention'].map(k => (
))}
); } function Scene4Intel({ sceneStart }) { const time = useTime(); return (
Activity
2:14 PM
Conflict resolved
Carlos × Maria · src/middleware/auth.ts
Maria reassigned to STORY-052
); } // ════════════════════════════════════════════════════════════════ // SCENE 5 — Closing card (168-180s) // ════════════════════════════════════════════════════════════════ function Scene5({ sceneStart = 168 }) { const time = useTime(); const a = fade(time, sceneStart + 0.3, 0.6); const b = fade(time, sceneStart + 4.0, 0.7); const c = fade(time, sceneStart + 6.5, 0.7); const bgO = fade(time, sceneStart, 0.6); const lines = [ ['Customer success', 'forwarded an email.'], ['A PM', 'sent a vague Slack message.'], ['A designer', 'attached a Figma link.'], ['Two engineers', 'touched the same file.'], ]; return (
{lines.map(([role, action], i) => (
{role} {action}
))}
None of them coordinated with each other.
They coordinated through the framework.
Agentic Forge Quantivex
); } // ════════════════════════════════════════════════════════════════ function App() { return ( {/* — disabled: no voiceover. Re-enable when audio lands. */} ); } ReactDOM.createRoot(document.getElementById('root')).render();