// Mini live-output previews for each AIDD agent. // Each preview is a stylised, abstract artifact — not a screenshot. const AgentPreview = ({ kind, color }) => { const View = previews[kind]; if (!View) return null; return (
); }; const Mono = ({ children, c }) => ( {children} ); const previews = { // 01 — Requirements requirements: ({ color }) => (
PRD.parsed
User wants to track invoices and trigger a notification when one is overdue by 7 days.
entities.detected
{['Invoice', 'User', 'Notification', 'Vendor'].map((e) => ( {e} ))}
jira.stories — 7 generated {[ { id: 'WBV-101', t: 'Invoice list view', p: 'M' }, { id: 'WBV-102', t: 'Overdue detection job', p: 'L' }, { id: 'WBV-103', t: 'Email + in-app alert', p: 'S' }, { id: 'WBV-104', t: 'Vendor profile page', p: 'M' }, ].map((s) => (
{s.id} {s.t} {s.p}
))}
), // 02 — Architecture architecture: ({ color }) => (
system.diagram {/* Web */} Next.js edge · ssr API tRPC · Node 20 Postgres RLS · pgvector Worker cron · queue LLM Gateway cache · eval
{['Vercel', 'Supabase', 'Upstash', 'Stripe', 'Resend'].map((t) => ( {t} ))}
), // 03 — Design design: ({ color }) => (
{[ { l: 'Dashboard', x1: 60, x2: 30, x3: 80 }, { l: 'Detail', x1: 80, x2: 50, x3: 60 }, { l: 'Settings', x1: 40, x2: 70, x3: 50 }, ].map((s, i) => (
{s.l}
))}
figma.kit · 24 components {['#E63329', '#F5C518', '#14A04A', '#1B7BD6'].map((c) => ( ))}
), // 04 — Tech Lead techlead: ({ color }) => (
impl.plan · sprint 14
{[ { id: 'WBV-101', t: 'Invoice list view', eta: '6h', dep: '—', p: 0 }, { id: 'WBV-102', t: 'Overdue detection cron', eta: '4h', dep: 'WBV-101', p: 1 }, { id: 'WBV-103', t: 'Notification dispatcher', eta: '3h', dep: 'WBV-102', p: 2 }, { id: 'WBV-104', t: 'Vendor profile page', eta: '5h', dep: 'WBV-101', p: 1 }, { id: 'WBV-105', t: 'Audit log writer', eta: '2h', dep: '—', p: 0 }, ].map((s, i) => (
{s.id} {s.t} dep: {s.dep}
{s.eta}
))}
critical path 101 → 102 → 103 total · 20h
), // 05 — Coding coding: ({ color }) => (
invoices.service.ts +24 −6
1 export async function findOverdue() {'{'}
2   const cutoff = subDays(new Date(), 7);
+ 3   return db.invoice.findMany({'{'}
+ 4     where: {'{'} dueDate: {'{'} lt: cutoff {'}'}, status: 'OPEN' {'}'},
+ 5     include: {'{'} vendor: true {'}'},
+ 6   {'}'});
7 {'}'}
● PR #847 — opened tests · 12/12 lint · clean build · ✓
), // 06 — Code Review review: ({ color }) => (
PR #847 · feat: overdue invoices APPROVED
{[ { sev: 'pass', t: 'Architecture standards · 12/12 checks pass' }, { sev: 'warn', t: 'Add @ts-expect-error context in line 42' }, { sev: 'pass', t: 'Test coverage · 94% on changed lines' }, { sev: 'pass', t: 'No N+1 queries detected' }, { sev: 'info', t: 'Suggestion: extract cutoff calc into util' }, ].map((c, i) => { const dot = c.sev === 'pass' ? '#14A04A' : c.sev === 'warn' ? '#F5C518' : '#1B7BD6'; return (
{c.t}
); })}
), // 07 — Testing testing: ({ color }) => (
test.results
{[ { l: 'Functional', pass: 28, fail: 0 }, { l: 'Regression', pass: 142, fail: 1 }, { l: 'Integration', pass: 18, fail: 0 }, { l: 'E2E (Playwright)', pass: 9, fail: 0 }, ].map((r) => { const total = r.pass + r.fail; const pct = (r.pass / total) * 100; return (
{r.l} {r.pass}/{total}
{r.fail > 0 &&
}
); })}
defects · 1 open
BUG-2401 P2
Notification fires twice when invoice is reopened then re-overdue.
assigned · coding-agent
coverage 91.4%
), // 08 — Deployment deployment: ({ color }) => (
release · v1.14.0 ● LIVE
{[ { l: 'build · production', s: 'done', t: '0:42' }, { l: 'image · pushed', s: 'done', t: '0:18' }, { l: 'canary · 5% traffic', s: 'done', t: '0:30' }, { l: 'health · green 4/4', s: 'done', t: '0:15' }, { l: 'rollout · 100%', s: 'done', t: '0:45' }, { l: 'monitor · attached', s: 'live', t: '—' }, ].map((step, i) => (
{step.l} {step.t}
))}
P95
184ms
Error rate
0.02%
Rollback ready
1-click
), }; window.AgentPreview = AgentPreview;