| """Business-first presentation helpers for the Agent 9 Gradio demo.""" |
|
|
| from __future__ import annotations |
|
|
| import html |
|
|
| from src.schemas import WorkflowRun |
|
|
| PLAYBACK_DELAY_SECONDS = 0.20 |
|
|
| NODE_LABELS = { |
| "validate_intake": "Check household intake", |
| "ai_intake_organizer": "AI Intake Organizer", |
| "document_check": "Check onboarding documents", |
| "policy_check": "Apply onboarding rules", |
| "create_onboarding_package": "Prepare onboarding package", |
| "verify_onboarding_package": "Verify onboarding package", |
| "review_gate": "Choose review path", |
| "onboarding_ready": "Standard package ready", |
| "human_review": "Operations / compliance review", |
| "reviewed_onboarding": "Ready after human review", |
| } |
|
|
| EVENT_LABELS = { |
| "WORKFLOW_STARTED": "Workflow started", |
| "NODE_STARTED": "Step started", |
| "NODE_COMPLETED": "Step completed", |
| "NODE_FAILED": "Step stopped safely", |
| "NODE_SKIPPED": "Step not needed", |
| "DECISION_ROUTED": "Route selected", |
| "RETRY_SCHEDULED": "Retry scheduled", |
| "HUMAN_REVIEW_REQUESTED": "Human review requested", |
| "HUMAN_APPROVED": "Human approved", |
| "HUMAN_REJECTED": "Human rejected", |
| "WORKFLOW_RESUMED": "Workflow resumed", |
| "WORKFLOW_COMPLETED": "Workflow completed", |
| "WORKFLOW_FAILED": "Workflow failed closed", |
| } |
|
|
| EVENT_ICONS = { |
| "WORKFLOW_STARTED": "▶", "NODE_STARTED": "→", "NODE_COMPLETED": "✓", |
| "NODE_FAILED": "×", "NODE_SKIPPED": "↷", "DECISION_ROUTED": "⇢", |
| "RETRY_SCHEDULED": "↻", "HUMAN_REVIEW_REQUESTED": "👤", |
| "HUMAN_APPROVED": "✓", "HUMAN_REJECTED": "■", "WORKFLOW_RESUMED": "▶", |
| "WORKFLOW_COMPLETED": "✓", "WORKFLOW_FAILED": "×", |
| } |
|
|
| APP_CSS = """ |
| .gradio-container { max-width:1120px !important; margin:0 auto !important; } |
| .agent-hero { padding:1.65rem 1.75rem; border:1px solid var(--border-color-primary,rgba(127,127,127,.25)); border-radius:22px; background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(99,102,241,.08)); margin-bottom:1rem; } |
| .agent-eyebrow,.outcome-eyebrow,.panel-eyebrow { font-size:.76rem; font-weight:800; letter-spacing:.12em; opacity:.72; margin-bottom:.35rem; } |
| .agent-hero h1 { margin:.25rem 0 .55rem; font-size:2.12rem; line-height:1.16; max-width:820px; } |
| .agent-hero p { margin:0; max-width:820px; font-size:1.06rem; line-height:1.58; } |
| .pattern-grid { display:grid; grid-template-columns:1fr; gap:.65rem; margin:1rem 0; } |
| .pattern-card,.ai-result,.why-panel { padding:1rem 1.1rem; border-radius:14px; border:1px solid var(--border-color-primary,rgba(127,127,127,.25)); background:var(--block-background-fill,rgba(127,127,127,.06)); } |
| .pattern-card strong { display:block; margin-bottom:.3rem; font-size:1.04rem; } |
| .pattern-card span { opacity:.80; line-height:1.48; font-size:.96rem; } |
| .ai-card { border-color:rgba(59,130,246,.55); background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(99,102,241,.09)); } |
| .ai-runtime { padding:1rem 1.1rem; border-radius:14px; border:1px solid rgba(59,130,246,.38); background:rgba(59,130,246,.08); margin:.7rem 0 1rem; line-height:1.5; } |
| .ai-runtime-live { border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.08); } |
| .ai-runtime-waiting { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.08); } |
| .pattern-flow { display:flex; flex-direction:column; align-items:stretch; gap:.35rem; margin:.8rem 0 1.2rem; } |
| .flow-pill { padding:.7rem .85rem; border-radius:12px; border:1px solid var(--border-color-primary,rgba(127,127,127,.25)); background:var(--block-background-fill,rgba(127,127,127,.06)); font-weight:700; font-size:.96rem; } |
| .ai-pill { border-color:rgba(59,130,246,.6); background:rgba(59,130,246,.12); } |
| .flow-arrow { align-self:center; opacity:.5; font-weight:800; transform:rotate(90deg); line-height:1; } |
| .section-note { padding:.9rem 1rem; border-radius:12px; background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.18); margin-bottom:.85rem; line-height:1.5; } |
| .business-outcome { border-radius:16px; padding:1.1rem 1.2rem; border:1px solid var(--border-color-primary,rgba(127,127,127,.25)); margin:.8rem 0; } |
| .outcome-success { border-left:6px solid #22c55e; background:rgba(34,197,94,.08); } |
| .outcome-waiting { border-left:6px solid #f59e0b; background:rgba(245,158,11,.08); } |
| .outcome-rejected { border-left:6px solid #f97316; background:rgba(249,115,22,.08); } |
| .outcome-failed { border-left:6px solid #ef4444; background:rgba(239,68,68,.08); } |
| .outcome-neutral { border-left:6px solid #64748b; background:rgba(100,116,139,.08); } |
| .outcome-title,.panel-title { font-size:1.2rem; font-weight:800; margin-bottom:.4rem; } |
| .outcome-body,.panel-body { line-height:1.5; margin-bottom:.55rem; } |
| .outcome-takeaway { font-weight:650; opacity:.83; } |
| .ai-result-live { border-color:rgba(59,130,246,.6); background:rgba(59,130,246,.09); } |
| .ai-result-fallback { border-color:rgba(100,116,139,.4); } |
| .ai-result-failed { border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.07); } |
| .ai-mode { display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.76rem; font-weight:800; background:rgba(59,130,246,.14); margin-bottom:.45rem; } |
| .ai-model { font-size:.82rem; opacity:.7; margin-bottom:.5rem; } |
| .ai-category { margin-bottom:.5rem; } |
| .ai-summary { line-height:1.48; margin-bottom:.6rem; } |
| .ai-used { font-weight:700; margin-bottom:.45rem; } |
| .ai-boundary,.why-proof { font-size:.88rem; opacity:.78; line-height:1.4; } |
| .why-standard { border-left:5px solid #22c55e; } |
| .why-review { border-left:5px solid #f59e0b; } |
| .why-list { margin:.35rem 0 .7rem 1.15rem; } |
| .workflow-map { margin:1rem 0; padding:1rem 1.05rem; border-radius:16px; border:1px solid var(--border-color-primary,rgba(127,127,127,.25)); background:var(--block-background-fill,rgba(127,127,127,.04)); } |
| .map-heading,.journey-heading { font-size:1.15rem; font-weight:800; } |
| .map-subheading,.journey-subheading { opacity:.72; margin:.25rem 0 .8rem; line-height:1.45; } |
| .map-main { display:flex; flex-wrap:wrap; align-items:center; gap:.42rem; } |
| .map-split { display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:.85rem; } |
| .map-branch { padding:.75rem; border-radius:12px; border:1px dashed var(--border-color-primary,rgba(127,127,127,.28)); } |
| .branch-label { font-size:.72rem; font-weight:800; letter-spacing:.08em; opacity:.65; margin-bottom:.45rem; } |
| .map-node { display:inline-block; padding:.42rem .62rem; border-radius:10px; border:1px solid rgba(100,116,139,.35); background:rgba(100,116,139,.08); font-size:.84rem; font-weight:700; } |
| .map-node-completed { border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.12); } |
| .map-node-waiting-for-human,.map-node-retry-scheduled,.map-node-running { border-color:rgba(245,158,11,.6); background:rgba(245,158,11,.12); } |
| .map-node-failed { border-color:rgba(239,68,68,.6); background:rgba(239,68,68,.12); } |
| .map-node-skipped,.map-node-pending,.map-node-ready { opacity:.42; } |
| .map-node-ai { box-shadow:inset 0 0 0 2px rgba(59,130,246,.62); } |
| .map-arrow { opacity:.5; font-weight:800; } |
| .map-legend { margin-top:.8rem; font-size:.8rem; opacity:.65; } |
| .journey-wrap { padding:1rem 0 .2rem; } |
| .journey-grid { display:grid; grid-template-columns:1fr; gap:.65rem; } |
| .journey-step { display:flex; gap:.7rem; padding:.85rem .9rem; border-radius:12px; border:1px solid var(--border-color-primary,rgba(127,127,127,.22)); background:var(--block-background-fill,rgba(127,127,127,.04)); } |
| .journey-icon { width:30px; height:30px; min-width:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; } |
| .journey-done { background:rgba(34,197,94,.16); } .journey-waiting { background:rgba(245,158,11,.18); } .journey-rejected { background:rgba(249,115,22,.18); } .journey-failed { background:rgba(239,68,68,.18); } .journey-skipped { background:rgba(100,116,139,.16); } .journey-pending { background:rgba(100,116,139,.10); } |
| .journey-title { font-weight:750; } .journey-state { font-size:.8rem; font-weight:700; opacity:.78; margin:.1rem 0 .2rem; } .journey-description { font-size:.9rem; opacity:.74; line-height:1.42; } |
| .activity-card { border:1px solid rgba(59,130,246,.30); border-radius:18px; padding:17px 19px; margin:14px 0 18px; background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(99,102,241,.035)); } |
| .activity-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } |
| .activity-spinner { width:24px; height:24px; box-sizing:border-box; border:4px solid rgba(59,130,246,.18); border-top-color:#3b82f6; border-right-color:#6366f1; border-radius:50%; animation:workflow-spin .78s linear infinite; flex:0 0 auto; } |
| .activity-badge { display:inline-block; border:1px solid rgba(59,130,246,.42); border-radius:999px; padding:4px 8px; font-size:.72rem; font-weight:850; letter-spacing:.09em; } |
| .activity-title { font-size:1.07rem; font-weight:800; } .activity-sub { font-size:.92rem; opacity:.79; line-height:1.4; margin-bottom:10px; } |
| .activity-track { height:8px; background:rgba(148,163,184,.18); border-radius:999px; overflow:hidden; margin:10px 0 13px; } |
| .activity-fill { height:100%; background:linear-gradient(90deg,#3b82f6,#6366f1); transition:width .2s ease; } |
| .activity-track.indeterminate .activity-fill { width:34%; animation:workflow-slide 1.05s ease-in-out infinite; } |
| .activity-feed { display:grid; gap:6px; } .activity-feed.activity-scroll { max-height:430px; overflow-y:auto; padding-right:7px; scrollbar-gutter:stable; } |
| .activity-event { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; padding-top:8px; border-top:1px solid rgba(148,163,184,.16); } .activity-event:first-child { border-top:0; padding-top:0; } |
| .activity-icon { font-weight:850; line-height:1.45; text-align:center; } .activity-main { font-size:.94rem; line-height:1.4; } .activity-main strong { font-weight:800; } .activity-meta { font-size:.78rem; opacity:.66; margin-top:2px; } |
| .activity-complete { border-color:rgba(34,197,94,.35); background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(59,130,246,.035)); } .activity-scroll-note { font-size:.82rem; opacity:.72; margin-bottom:8px; } |
| @keyframes workflow-spin { to { transform:rotate(360deg); } } @keyframes workflow-slide { 0% { transform:translateX(-110%); } 50% { transform:translateX(205%); } 100% { transform:translateX(-110%); } } |
| @media (max-width:700px) { .gradio-container { max-width:100% !important; } .agent-hero { padding:1.3rem 1.1rem; } .agent-hero h1 { font-size:1.75rem; } } |
| """ |
|
|
| HERO_HTML = """ |
| <div class="agent-hero"> |
| <div class="agent-eyebrow">AGENT 9 • BUSINESS + ENGINEERING DEMO • SYNTHETIC DATA</div> |
| <h1>How can AI help onboard a household without controlling the process?</h1> |
| <p>A fictional wealth-management operations team needs to move a new household through onboarding. AI may organize the unstructured intake into useful work product, but application code controls sequencing, retries, routing, persistence, and the human-review boundary.</p> |
| </div> |
| """ |
|
|
| PATTERN_HTML = """ |
| <div class="pattern-grid"> |
| <div class="pattern-card ai-card"><strong>🤖 AI prepares useful work</strong><span>The bounded AI node creates a profile category and concise intake summary for the simulated onboarding package.</span></div> |
| <div class="pattern-card"><strong>✓ Software controls consequences</strong><span>Document checks, exception rules, routes, retries, checkpoints, and allowed next steps remain deterministic.</span></div> |
| <div class="pattern-card"><strong>👤 A person owns exceptions</strong><span>Trust, entity, complex, missing-document, or identity-review cases pause until an explicit human decision is recorded.</span></div> |
| <div class="pattern-card"><strong>↻ Operations recover safely</strong><span>Temporary service failures retry within policy; permanent failures stop before uncertain downstream work continues.</span></div> |
| </div> |
| <div class="section-note"><strong>The operating model:</strong> AI contributes work. Application code governs the process. Humans retain authority over consequential exceptions.</div> |
| <div class="pattern-flow"> |
| <span class="flow-pill">1 · Household intake</span><span class="flow-arrow">→</span> |
| <span class="flow-pill ai-pill">2 · 🤖 AI organizes the intake</span><span class="flow-arrow">→</span> |
| <span class="flow-pill">3 · Rules prepare and verify the package</span><span class="flow-arrow">→</span> |
| <span class="flow-pill">4 · Standard path or explicit human review</span> |
| </div> |
| """ |
|
|
| EMPTY_OUTCOME_HTML = """<div class="business-outcome outcome-neutral"><div class="outcome-eyebrow">READY TO DEMONSTRATE</div><div class="outcome-title">Choose a fictional household story and run it</div><div class="outcome-body">The result will be explained in business language first. The engineering tabs remain available underneath as evidence.</div><div class="outcome-takeaway">Start with the Harbor Family straightforward case.</div></div>""" |
| EMPTY_PATH_HTML = """<div class="workflow-map"><div class="map-heading">Workflow path</div><div class="map-subheading">Run a household to light up the path it actually takes.</div></div>""" |
| EMPTY_AI_HTML = """<div class="ai-result"><div class="panel-eyebrow">🤖 BOUNDED AI WORK PRODUCT</div><div class="panel-title">Waiting for a household</div><div class="panel-body">The validated profile category and intake summary will appear here.</div></div>""" |
| EMPTY_ROUTING_HTML = """<div class="why-panel"><div class="panel-eyebrow">WHY DID IT ROUTE HERE?</div><div class="panel-title">Waiting for the review gate</div><div class="panel-body">After a run, this panel will show the exact deterministic reasons for the selected path.</div></div>""" |
| EMPTY_JOURNEY_HTML = """<div class="journey-wrap"><div class="journey-heading">What happened, step by step</div><div class="journey-subheading">After you run a story, this section will translate the workflow engine into an understandable onboarding journey.</div></div>""" |
| EMPTY_ACTIVITY_HTML = """<div class="activity-card"><div class="activity-title">Live workflow activity</div><div class="activity-sub">Run a household to watch the workflow's real append-only control events replay here at a readable pace.</div></div>""" |
|
|
|
|
| def activity_start_html(label: str) -> str: |
| return f"""<div class="activity-card"><div class="activity-head"><span class="activity-spinner"></span><span class="activity-badge">RUNNING</span><span class="activity-title">Workflow engine is running</span></div><div class="activity-sub">{html.escape(label)} · deterministic workflow control is executing. Real audit events from this exact run will appear here.</div><div class="activity-track indeterminate"><div class="activity-fill"></div></div><div class="activity-feed"><div class="activity-event"><div class="activity-icon">…</div><div class="activity-main">Preparing the workflow run and its persisted event trace.</div></div></div></div>""" |
|
|
|
|
| def _event_text(event) -> tuple[str, str, str]: |
| event_type = event.event_type.value |
| label = EVENT_LABELS.get(event_type, event_type.replace("_", " ").title()) |
| node_label = NODE_LABELS.get(event.node_id or "", (event.node_id or "Workflow").replace("_", " ").title()) |
| return EVENT_ICONS.get(event_type, "•"), label, node_label |
|
|
|
|
| def activity_html(run: WorkflowRun, count: int, *, complete: bool = False) -> str: |
| total = max(len(run.events), 1) |
| visible_count = min(max(count, 0), len(run.events)) |
| percent = min(100.0, (visible_count / total) * 100) |
| rows = run.events if complete else run.events[max(0, visible_count - 8):visible_count] |
| if complete: |
| badge = "STOPPED" if run.status.value == "FAILED" else "COMPLETE" |
| title = "Workflow event trace complete" |
| sub = f"{len(run.events)} real append-only workflow events retained. Scroll inside the transcript to review the full run." |
| spinner = "" |
| card_class = "activity-card activity-complete" |
| note = '<div class="activity-scroll-note">Scroll inside this panel to review the complete workflow event transcript.</div>' |
| feed_class = "activity-feed activity-scroll" |
| else: |
| current = run.events[visible_count - 1] if visible_count else None |
| if current is None: |
| sub = "Waiting for the first workflow event." |
| else: |
| _, event_label, node_label = _event_text(current) |
| sub = f"Event {visible_count}/{len(run.events)} · {event_label} · {node_label}" |
| badge, title = "RUNNING", "Workflow activity" |
| spinner = '<span class="activity-spinner"></span>' |
| card_class, note, feed_class = "activity-card", "", "activity-feed" |
| start = 1 if complete else max(1, visible_count - len(rows) + 1) |
| feed_rows = [] |
| for index, event in enumerate(rows, start=start): |
| icon, event_label, node_label = _event_text(event) |
| feed_rows.append(f'<div class="activity-event"><div class="activity-icon">{html.escape(icon)}</div><div class="activity-main"><strong>{html.escape(event_label)}</strong><br>{html.escape(node_label)}<div class="activity-meta">Event {index} · {html.escape(event.event_type.value)}</div></div></div>') |
| feed = "".join(feed_rows) or '<div class="activity-event"><div class="activity-icon">…</div><div class="activity-main">Waiting for the first workflow event.</div></div>' |
| return f'<div class="{card_class}"><div class="activity-head">{spinner}<span class="activity-badge">{badge}</span><span class="activity-title">{html.escape(title)}</span></div><div class="activity-sub">{html.escape(sub)}</div><div class="activity-track"><div class="activity-fill" style="width:{percent:.1f}%"></div></div>{note}<div class="{feed_class}">{feed}</div></div>' |
|
|
|
|
| def playback_delay(event_type: str, base: float = PLAYBACK_DELAY_SECONDS) -> float: |
| if base <= 0: |
| return 0 |
| if event_type in {"WORKFLOW_STARTED", "WORKFLOW_RESUMED"}: |
| return base * 1.5 |
| if event_type in {"DECISION_ROUTED", "RETRY_SCHEDULED", "HUMAN_REVIEW_REQUESTED"}: |
| return base * 2.0 |
| if event_type in {"WORKFLOW_COMPLETED", "WORKFLOW_FAILED", "HUMAN_APPROVED", "HUMAN_REJECTED"}: |
| return base * 2.4 |
| return base |
|
|
