/* global React, RP, Chip, Grain, InkBlock, HandNote */ // Responsive, page-native workflow interactives. const OPS_STEPS = [ { id: 'intake', label: 'Intake', eyebrow: 'Inputs', color: RP.blue, headline: 'Requests arrive from the places work already happens.', body: 'Commands, property systems, calendar items, email, and voice intake all feed the same operations layer.', bullets: ['Operator commands', 'Approvals and alerts', 'Voice intake', 'Property systems and web sources'], }, { id: 'gateway', label: 'Gateway', eyebrow: 'Runtime', color: RP.green, headline: 'A local gateway controls the handoff.', body: 'The managed gateway starts at login, validates its environment, restarts on failure, and keeps work routed through one observable local entry point.', bullets: ['Starts at login', 'Validates setup', 'Managed gateway', 'Auto-restart on failure'], }, { id: 'agents', label: 'Agents', eyebrow: 'Workers', color: RP.pink, headline: 'Single-purpose lanes own different kinds of work.', body: 'The system splits planning, property work, operations health, archive upkeep, finance, and collections so one noisy job does not become the whole system.', bullets: ['main: planning', 'work: property operations', 'ops: reliability', 'archive, finance, collections'], }, { id: 'schedule', label: 'Schedule', eyebrow: 'Cadence', color: RP.yellow, headline: 'Cron and launchd keep recurring work moving.', body: 'Cron handles timed jobs and reports. launchd handles durable scripts, keep-alives, dependency restarts, and lower-level service ownership.', bullets: ['Reports and reminders', 'Managed scripts', 'Keep-alive services', 'Dependency restarts'], }, { id: 'tools', label: 'Tools', eyebrow: 'Actions', color: RP.green, headline: 'Tools turn intent into real work.', body: 'The runtime can use local tools, browser control, property systems, documents, queues, and web services to turn intent into action.', bullets: ['Local tools', 'Browser and docs', 'Property systems', 'Queues and web services'], }, { id: 'outputs', label: 'Outputs', eyebrow: 'Results', color: RP.blue, headline: 'Results return as visible operating outcomes.', body: 'Property operations, Sarah customer service, monitoring, cadence reminders, and documentation all update the loop instead of disappearing into tool sprawl.', bullets: ['Property ops', 'Sarah service', 'Ops health', 'Documentation and cadence'], }, ]; const SARAH_PATHS = [ { id: 'tour', label: 'Tour request', color: '#1576d2', trigger: 'Prospect asks for a tour by phone or SMS.', route: ['Caller', 'Sarah detects leasing intent', 'Worker validates request', 'Calendar + tour queue update', 'SMS confirmation sent'], outcome: 'Tour scheduled', detail: 'Sarah handles booking, rescheduling, and tour questions while the worker logs the request and checks safety gates before outbound messages.', }, { id: 'maintenance', label: 'Maintenance', color: '#f59e0b', trigger: 'Resident reports a maintenance issue.', route: ['Resident', 'Sarah classifies maintenance', 'Worker logs details', 'Sheet / queue receives item', 'Carson or ops follows up'], outcome: 'Maintenance logged', detail: 'The path captures the issue cleanly, keeps the transcript attached, and routes the work without pretending a human never needs to review it.', }, { id: 'emergency', label: 'Emergency', color: '#dc2626', trigger: 'Caller reports an urgent safety issue.', route: ['Caller', 'Sarah detects emergency', 'Worker bypasses normal cadence', 'Telegram alert fires', 'Human response required'], outcome: 'Emergency alert', detail: 'Emergency routing is intentionally loud and observable: the workflow prioritizes fast human awareness over quiet automation.', }, { id: 'account', label: 'Account question', color: '#16a34a', trigger: 'Caller asks about rent, balance, account status, or tenant details.', route: ['Caller', 'Sarah identifies account intent', 'Worker verifies tenant context', 'Tenant directory / data checked', 'Follow-up logged'], outcome: 'Carson follow-up', detail: 'Sensitive account flows stay bounded by lookup and verification steps instead of giving the voice layer unrestricted access.', }, { id: 'general', label: 'General message', color: '#6d28d9', trigger: 'Caller leaves a message, asks an unclear question, or needs a custom answer.', route: ['Caller', 'Sarah records context', 'Worker stores transcript', 'Telegram / log update', 'Response path chosen'], outcome: 'Call logged', detail: 'The fallback path is still useful: it preserves context, records metadata, and gives the operator a clean follow-up item.', }, ]; const SARAH_CONTROLS = [ ['Auth token', 'Webhook tools require the Sarah tool token.'], ['Message verification', 'Inbound messages are verified before processing.'], ['Consent gate', 'Outbound tour reminders require explicit consent.'], ['Dry-run mode', 'Routing and reminders can be tested without sending messages.'], ['Observability', 'Health, metrics, logs, and queue counts stay visible.'], ]; const WORKFLOW_CHOICES = [ { label: 'Sarah call', body: 'A leasing or tenant call becomes an owned follow-up path.', mode: 'sarah', activeId: 'tour', pattern: 'Caller -> Sarah -> Worker -> Queue -> Human gate', }, { label: 'Maintenance intake', body: 'A resident issue gets captured, classified, logged, and routed.', mode: 'sarah', activeId: 'maintenance', pattern: 'Resident -> Classify -> Log -> Ops follow-up', }, { label: 'Emergency alert', body: 'Urgent calls skip the quiet path and make human review loud.', mode: 'sarah', activeId: 'emergency', pattern: 'Caller -> Detect emergency -> Telegram -> Human response', }, { label: 'Recurring ops', body: 'Scheduled checks keep dashboards, reminders, and reviews moving.', mode: 'ops', activeId: 'schedule', pattern: 'Cron -> Gateway -> Lane -> Result -> Log', }, ]; function ArrowBetween() { return ( ); } function Pill({ children, color, active }) { return ( {children} ); } function OperationsFlow({ activeId, setActiveId }) { const active = OPS_STEPS.find((step) => step.id === activeId) || OPS_STEPS[0]; return (
{OPS_STEPS.map((step, index) => { const selected = step.id === active.id; return ( ); })}
{active.eyebrow}

{active.headline}

{active.body}

What this touches
{active.bullets.map((item) => {item})}
); } function SarahPathExplorer({ activeId, setActiveId }) { const active = SARAH_PATHS.find((path) => path.id === activeId) || SARAH_PATHS[0]; return (
{SARAH_PATHS.map((path) => { const selected = path.id === active.id; return ( ); })}
Active path

{active.label}

{active.outcome}

{active.trigger}

{active.route.map((step, index) => (
0{index + 1}
{step}
{index < active.route.length - 1 && } ))}

{active.detail}

{SARAH_CONTROLS.map(([k]) => {k})}
); } function InteractiveWorkflowImages() { const [mode, setMode] = React.useState('ops'); const [opsActive, setOpsActive] = React.useState('gateway'); const [sarahActive, setSarahActive] = React.useState('tour'); const tabs = [ { id: 'ops', label: 'Operations flow' }, { id: 'sarah', label: 'Sarah path explorer' }, ]; return (
Section 02 - Interactive workflows

Click a step.
Watch the handoff.

fitted to the page, not pasted onto it

The diagrams are rebuilt as interactive webpage sections. Use the operations flow to understand the automation pattern, then switch to Sarah to trace exactly how a phone call or SMS becomes a logged result.

{WORKFLOW_CHOICES.map((choice) => ( ))}
{tabs.map((tab) => ( ))}
{mode === 'ops' ? ( ) : ( )}
); } Object.assign(window, { InteractiveWorkflowImages });