// Canvas Directions — stream part vocabulary + shared atoms. // Receipts are the workhorse: actor · action · scope · time · restore/open/record. // Loads after canvas-data.js. Exports to window at the end. const DS = window.StimulusDesignSystem_bb8fa3 || {}; const ConsentChip = (props) => { const C = (window.StimulusDesignSystem_bb8fa3 || {}).ConsentChip; return C ? React.createElement(C, props) : null; }; const WorkStateChip = (props) => { const C = (window.StimulusDesignSystem_bb8fa3 || {}).WorkStateChip; return C ? React.createElement(C, props) : null; }; // ── Icons — Lucide path data, 2px stroke, currentColor ────────────────── const ICON_PATHS = { search: , lock: , check: , x: , clock: , history: , open: , chevD: , chevR: , chevL: , home: , building: , briefcase: , share: , chart: , user: , users: , filter: , list: , pause: , alert: , send: , eye: , settings: , panelL: , logout: , penSquare: , clipboard: , pieChart: , sparkles: , calendar: , clock: , star: , flame: , search: , exchange: , plus: , download: , upload: , globe: , grid: , mail: , linkedin: , bolt: , copy: , maximize: , minimize: , shield: , arrowUp: , }; function Icon({ name, size = 14, style }) { return ( ); } // Actor glyph: you = neutral initials · agent = brand arrowhead (the workspace, alive) function ActorGlyph({ actor }) { if (actor === "you") return PN; return ( ); } // ── User utterance — plain, right-weighted, no heavy bubble ───────────── function Utterance({ text }) { return (
{text}
); } // ── Agent prose — judgment, never data; may end with suggested intents ── function AgentProse({ text, suggestions, onSuggest }) { return (

{text}

{suggestions && suggestions.length > 0 && (
{suggestions.map((s) => ( ))}
)}
); } // ── Receipt — the compact grammar. One line that chains well. ──────────── function ReceiptRow({ r, onRestore, onOpen, isPast }) { return (
{r.verb} {r.scope && {r.scope}} {r.time}
{r.moved &&
Moved: {r.moved}
}
{r.snapshot && ( )} {r.reopenId && ( )} {r.open && ( )} e.preventDefault()} title="Open this decision in the record">record
); } // A chain of receipts from one agent run — scans as one story, collapsible. function ReceiptGroup({ title, count, children, defaultOpen }) { const [open, setOpen] = React.useState(!!defaultOpen); return (
{open &&
{children}
}
); } function DaySep({ label }) { return
{label}
; } // ── Job card — one card per job, updates in place. No fake percent. ───── function JobCard({ job, onCancel, mini }) { const stateMap = { queued: "queued", running: "running", "needs-you": "needs-you", done: "done", failed: "queued" }; const frac = job.total ? job.doneCount / job.total : 0; if (mini) { return ( {job.title} ); } return (
{job.title}
{job.state === "running" && (
)}
{job.state === "queued" && Waiting to start · {job.queueNote}} {job.state === "running" && {job.detail}} {job.state === "needs-you" && Paused — {job.pauseNote}} {job.state === "done" && {job.doneNote}} {job.state === "failed" && {job.failNote}} {(job.state === "queued" || job.state === "running") && ( )} {job.state === "failed" && }
); } // ── Approval request — governance as UI. Consent-colored moment. ──────── function ApprovalCard({ req, onApprove, onDeny, onEdit, resolved }) { return (
Needs you — {req.title}

{req.body}

{req.evidence.map((ev) => ( e.preventDefault()}>{ev} ))}
{!resolved ? (
) : (
{resolved}
)}
); } // ── Inline glanceable — read it here; work on it up on the stage ──────── function Glanceable({ metrics, caption }) { return (
{metrics.map((m) => (
{m.n} {m.label}
))} {caption &&
{caption}
}
); } // ── Ticker — the stream at rest: one line, the most recent receipt ────── function Ticker({ receipt, job, onExpand }) { return ( ); } // ── Frame chip — what the agent currently sees ─────────────────────────── function FrameChip({ feature, selection, subject, acting }) { return ( {feature} {subject && ·} {subject && {subject}} {selection > 0 && ·} {selection > 0 && {acting ? "acting on " : ""}{selection} selected} ); } // ── Warm path — list-first, never a graph hero ─────────────────────────── function WarmPath({ path, defaultOpen }) { const [open, setOpen] = React.useState(!!defaultOpen); return (
{open && (
{path.hops.map((h, i) => (
{h.name} {h.role}
{h.strength != null && (
{h.strength}
)} {i === path.hops.length - 1 && null} ))}
Meridian Catering Co.the business
)}
); } // ── Strength cell — score + read, "why" one hover away ────────────────── function StrengthCell({ score, trend, why }) { return ( {score} {trend} {why} ); } Object.assign(window, { Icon, ActorGlyph, Utterance, AgentProse, ReceiptRow, ReceiptGroup, DaySep, JobCard, ApprovalCard, Glanceable, Ticker, FrameChip, WarmPath, StrengthCell, });