Agent builder. The configuration surface.

<!-- The overview composes 6 chapter-private blocks under one
     .ab-overview wrapper. Every block is independently
     reorderable / removable — the only structural rule is the
     hero comes first.                                          -->
<div class="ab-overview">
  <header class="ab-ov-hero">
    <span class="ab-ov-hero-eyebrow">New agent — v1 draft</span>
    <h2 class="ab-ov-hero-title">
      Your new agent is <em>ready to meet</em> your first lead.
    </h2>
    <p class="ab-ov-hero-sub">Three things to do before you publish.</p>
    <div class="ab-ov-hero-actions">
      <button class="ab-ov-hero-pill is-primary">Run a test chat</button>
      <button class="ab-ov-hero-pill">Connect a channel</button>
      <button class="ab-ov-hero-pill">2-min tour</button>
    </div>
  </header>

  <div class="ab-ov-kpis ab-ov-kpis-primary">
    <div class="ab-ov-kpi">
      <span class="ab-ov-kpi-label">Visit</span>
      <span class="ab-ov-kpi-value">0</span>
      <span class="ab-ov-kpi-sub">Web Chat only</span>
      <span class="ab-ov-kpi-delta is-down">−100% vs last week</span>
    </div>
    …4 more tiles
  </div>

  <div class="ab-ov-kpis ab-ov-kpis-secondary">…4 rate tiles…</div>

  <div class="ab-ov-row-2">
    <section class="ab-ov-card">…Goals…</section>
    <section class="ab-ov-card">…Where this agent is live…</section>
  </div>

  <section class="ab-ov-card">…Conversations chart…</section>
  <section class="ab-ov-card">…Conversations live + empty state…</section>

  <div class="ab-ov-row-2">
    <section class="ab-ov-card">…Guardrails…</section>
    <section class="ab-ov-card">…Missing knowledge…</section>
  </div>
</div>

/* All Overview chrome is chapter-private (.ab-ov-*) — promote to
   _shared.css once a second consumer needs the same shape.

   Hero: gradient wash + display headline w/ serif italic emphasis
   on a span (.ab-ov-hero-title em). Three pills; .is-primary uses
   --success-text (the "go live" colour) not --accent.

   KPI strips: 5 / 4 columns desktop, 2 / 2 columns ≤ 980px.
   Tiles separated by 1px hair-soft vertical rule (becomes
   horizontal on mobile). Empty state uses 0 / — for values.

   Cards: .ab-ov-card is the surface primitive — paper bg, hair
   border, r-lg radius, gap-3 flex column. Used 4 times. */

/* PROVISIONAL — composes existing kit primitives + the chapter-
   private .ab-ov-* chrome. A future  wrapper
   could codify this shape; today it lives inline so the design
   can flex per agent type (Website vs Omnichannel changes which
   channels are listed; SMS-only changes the KPI labels).
   Existing kit exports used: StatTile (KPI tiles), Button. */

import {
  Button,
  AgentChannelIcon,
  MessageSquareIcon,
  SmartphoneIcon,
  MailIcon,
  PhoneIcon,
  GlobeIcon,
} from "@magicblocksai/ui";

export function AgentOverview({ agent, kpis, goals, channels }) {
  return (
    <div className="ab-overview">
      <header className="ab-ov-hero">
        <span className="ab-ov-hero-eyebrow">
          {agent.name} — v{agent.version} {agent.status}
        </span>
        <h2 className="ab-ov-hero-title">
          Your new agent is <em>ready to meet</em> your first lead.
        </h2>
        <p className="ab-ov-hero-sub">
          Three things to do before you publish. Each takes a minute.
        </p>
        <div className="ab-ov-hero-actions">
          <button className="ab-ov-hero-pill is-primary">Run a test chat</button>
          <button className="ab-ov-hero-pill">Connect a channel</button>
          <button className="ab-ov-hero-pill">2-min tour</button>
        </div>
      </header>

      <KpiStripPrimary kpis={kpis.primary} />
      <KpiStripSecondary kpis={kpis.secondary} />

      <div className="ab-ov-row-2">
        <GoalsCard goals={goals} />
        <ChannelsCard channels={channels} />
      </div>

      <ConversationsChartCard />
      <ConversationsLiveCard />

      <div className="ab-ov-row-2">
        <GuardrailsCard />
        <MissingKnowledgeCard />
      </div>
    </div>
  );
}

<div class="ab-overview">
  <header class="ab-ov-hero">
    <span class="ab-ov-hero-eyebrow">Live · website agent</span>
    <h2 class="ab-ov-hero-title">Live on crefco.com — <em>38 conversations</em> this week.</h2>
    <p class="ab-ov-hero-sub">Greeting → Discovery → Handoff · 5 blocks · last published 2 days ago</p>
    <div class="ab-ov-hero-actions">
      <span class="chip chip-amber">Setup 5 of 6 — connect a phone number</span>
      <button type="button" class="ab-ov-hero-pill">View conversations</button>
    </div>
  </header>
  <div class="ab-ov-row-2">…GoLiveCard · identity .ab-ov-card…</div>
  …4 × .kpi-delta-tile strip…
  <div class="ab-ov-row-2">…questions queue · guardrails glance (.ab-ov-card + .ab-ov-guards)…</div>
  …RecentChangesList…
</div>

/* Ships in @magicblocksai/css — .ab-ov-* chrome plus the new .golive-* and
   .recent-change* blocks (@surface: operator). */

// No wiring — Teach it converts a question into a knowledge item
// (Knowledge Phase A primitives); Undo reverts the Sage patch on the draft.

import { SetupProgressChip, GoLiveCard, RecentChangesList, KpiDeltaTile, Button, GlobeIcon, PhoneIcon } from '@magicblocksai/ui';

<div className="ab-overview">
  <header className="ab-ov-hero">
    <span className="ab-ov-hero-eyebrow">Live · website agent</span>
    <h2 className="ab-ov-hero-title">Live on crefco.com — <em>38 conversations</em> this week.</h2>
    <p className="ab-ov-hero-sub">Greeting → Discovery → Handoff · 5 blocks · last published 2 days ago</p>
    <div className="ab-ov-hero-actions">
      <SetupProgressChip done={5} total={6} nextStep="connect a phone number" />
      <button type="button" className="ab-ov-hero-pill">View conversations</button>
    </div>
  </header>
  <div className="ab-ov-row-2">
    <GoLiveCard
      channels={[
        { icon: <GlobeIcon />, name: 'Website widget', state: 'Live on crefco.com', live: true },
        { icon: <PhoneIcon />, name: 'Phone & SMS', state: 'Not connected yet' },
      ]}
      action={<Button size="sm" variant="secondary">Open Channels</Button>}
    />
    {identityCard}
  </div>
  {kpiStrip /* 4 × KpiDeltaTile */}
  {questionsAndGuardrails}
  <RecentChangesList changes={recentChanges} />
</div>

<div class="ab-pane-form" role="region" aria-label="Persona configuration">
  <div class="ab-form-title-row">
    <h2>Persona</h2>
    <span class="ab-mode-chip">Basic</span>
    <span class="ab-form-help" title="What this screen does">?</span>
  </div>

  <div class="ab-form-field">
    <label class="ab-form-label" for="persona-name">
      Agent name <span class="ab-form-req">*</span>
    </label>
    <input id="persona-name" class="ab-form-input" type="text"
           value="Charlie">
  </div>

  <div class="ab-form-field">
    <label class="ab-form-label">Describe the role of the agent in the company</label>
    <div class="ab-form-input-row">
      <textarea class="ab-form-input" rows="3">…</textarea>
      <span class="ab-form-count">158 / 700</span>
    </div>
  </div>

  <div class="ab-form-field">
    <label class="ab-form-label">Choose agent persona</label>
    <div class="ab-set-picker">
      <select class="ab-form-input">…personas</select>
      <button class="ab-set-create">+ Create new</button>
      <button class="ab-set-edit">…pencil SVG</button>
    </div>
    <div class="ab-set-card">
      <div class="ab-set-card-meta">Version 1 · 08 Mar 2026 · Creativity 0.3</div>
      <p class="ab-set-card-desc">Created from website…</p>
      <p class="ab-set-card-prompt">You work for Tyrnell…</p>
    </div>
  </div>
</div>

/* Pane form — bounded, paper bg, top-aligned. Three field shapes:
   .ab-form-field         vertical stack (label + control + count)
   .ab-set-picker         3-col grid (select + create + edit)
                          (shared library-picker family — same shape
                          backs Guardrails 18.13, Knowledge 18.14,
                          Design & Go Live appearance 18.17)
   .ab-set-card           read-only summary surface (warm bg)
   .ab-set-card-prompt    fade-truncated long-text preview (chapter-
                          private to 18.10's persona-prompt slot)

   Field input: hair-bordered, accent-soft focus ring (kit standard).
   Character count: absolutely-positioned bottom-right of the .ab-form-
   input-row wrapper so it overlays the textarea/input without
   reflowing.

   The select gets a custom dropdown caret via background-image (two
   triangles forming a downward chevron) because native select arrows
   vary wildly across OS chrome. */

import { Input, Textarea, Select, Button, PenIcon } from "@magicblocksai/ui";

/* PROVISIONAL — the agent-builder form layout chrome lives chapter-
   private (.ab-pane-form / .ab-form-*) because the field set is
   stable but the shell wrapper varies per screen (Persona, Key Facts,
   Actions all reuse this layout). Promote to kit once a second
   consumer needs the same form-pane primitive. */

export function PersonaPage({ agent, personas, onEdit, onCreate }) {
  return (
    <div className="ab-pane-form">
      <header className="ab-form-title-row">
        <h2>Persona</h2>
        <span className="ab-mode-chip">Basic</span>
      </header>

      <div className="ab-form-field">
        <label htmlFor="persona-name">Agent name *</label>
        <Input id="persona-name" defaultValue={agent.name} />
      </div>

      <div className="ab-form-field">
        <label>Describe the role of the agent in the company</label>
        <Textarea
          defaultValue={agent.role}
          maxLength={700}
          showCount
        />
      </div>

      <div className="ab-form-field">
        <label>Choose agent persona</label>
        <div className="ab-set-picker">
          <Select value={agent.personaId} options={personas} />
          <Button variant="link" onClick={onCreate}>+ Create new</Button>
          <Button variant="ghost" icon onClick={onEdit}><PenIcon /></Button>
        </div>
        <PersonaSummaryCard persona={agent.persona} />
      </div>
    </div>
  );
}

<div class="ab-dialog-overlay" role="dialog" aria-modal="true">
  <div class="ab-dialog">
    <header class="ab-dialog-head">
      <span class="ab-dialog-title">New custom persona</span>
      <button class="ab-dialog-close">×</button>
    </header>
    <div class="ab-dialog-body">
      <div class="ab-dialog-row-2">
        <div class="ab-form-field">Persona name</div>
        <div class="ab-form-field">Description</div>
      </div>
      <div class="ab-dialog-row-2">
        <div class="ab-form-field">Version select</div>
        <div class="ab-form-field">Creativity slider</div>
      </div>
      <div class="ab-form-field">Tags chip-input</div>
      <div class="ab-form-field">Persona prompt textarea (rows=9)</div>
    </div>
    <footer class="ab-dialog-foot">
      <button class="ab-h-pill">Cancel</button>
      <button class="ab-h-pill is-primary">Save</button>
    </footer>
  </div>
</div>

/* The dialog overlay is absolutely-positioned inside its
   demo-stage so the modal frames the parent pane (you can see
   the dimmed page behind it). In real consumer code, the
   overlay would mount via the kit's <Modal> portal — which
   pins to body, traps focus, and locks scroll. The CSS shape
   is identical; only the mount point differs. */

import {
  Modal,
  Input,
  Textarea,
  Select,
  Slider,
  Button,
} from "@magicblocksai/ui";

/* Real consumer integration uses the kit's <Modal> for the
   overlay (focus trap + scroll lock + Esc + outside-click).
   The form body is the same .ab-* primitives demoed above. */

export function PersonaEditDialog({ persona, open, onClose, onSave }) {
  const [draft, setDraft] = useState(persona);
  return (
    <Modal open={open} onOpenChange={onClose} title="New custom persona">
      <div className="ab-dialog-body">
        <div className="ab-dialog-row-2">
          <Field label="Persona name">
            <Input value={draft.name} onChange={…} />
          </Field>
          <Field label="Description">
            <Input value={draft.description} onChange={…} />
          </Field>
        </div>
        <div className="ab-dialog-row-2">
          <Field label="Version">
            <Select value={draft.versionId} options={persona.versions} />
          </Field>
          <Field label="Creativity">
            <Slider min={0} max={1} step={0.1}
                    value={draft.creativity}
                    onValueChange={…} />
          </Field>
        </div>
        <Field label="Tags">
          <TagInput value={draft.tags} onChange={…} />
        </Field>
        <Field label="Persona prompt *">
          <Textarea
            value={draft.prompt}
            maxLength={8000}
            showCount
            rows={9} />
        </Field>
      </div>
      <Modal.Foot>
        <Button onClick={onClose}>Cancel</Button>
        <Button tone="accent" onClick={() => onSave(draft)}>Save</Button>
      </Modal.Foot>
    </Modal>
  );
}

<div class="ab-pane-form is-list">
  <div class="ab-form-title-row">
    <h2>Key Facts</h2> <span class="ab-mode-chip">Basic</span>
  </div>
  <p>Key facts are details you collect from users…</p>

  <div class="ab-list-toolbar">
    <div class="ab-list-search"><svg>…</svg><input></div>
    <button class="ab-list-filter"><svg>…</svg></button>
    <button class="ab-list-new">+ New</button>
  </div>

  <div class="ab-list-count">
    <span>Shared key facts list</span>
    <span>Total: <em>2</em></span>
  </div>

  <div class="ab-fact-list">
    <div class="ab-fact-card" tabindex="0">
      <span class="ab-fact-handle"><svg>…dots</svg></span>
      <span class="ab-fact-glyph"><svg>…</svg></span>
      <div class="ab-fact-body">
        <span class="ab-fact-name">Wine Preferences</span>
        <span class="ab-fact-sub">Ask about their preferred type of wine.</span>
      </div>
      <button class="ab-fact-menu">…</button>
    </div>
    <!-- …more fact cards… -->
  </div>

  <div class="ab-privacy-advisory">
    <svg>…triangle warning</svg>
    <span><strong>For Privacy & Safety,</strong> avoid requesting…</span>
  </div>
</div>

/* List page chrome (chapter-private):
   .ab-pane-form.is-list   widens the form pane to 880px
   .ab-list-toolbar         3-col grid (search / filter / new)
   .ab-list-search          rounded pill input with leading icon
   .ab-list-new             accent-green primary button
   .ab-list-count           total counter strip (mono caption)
   .ab-fact-list            vertical stack of sortable cards
   .ab-fact-card            handle / glyph / body / menu
   .ab-fact-card.is-dragging / .is-drop-before / .is-drop-after
                            sortable visual states — matches the
                            same contract used by journey blocks
                            so initSortableList() is reusable.
   .ab-privacy-advisory     warning-soft pinned strip at bottom. */

// Sortable list is wired generically by the chapter's
// initSortableList(list, { itemSelector }) helper. Same helper
// powers journey blocks at 18.7 — second consumer of the contract
// confirms the pattern is reusable across the builder.

document.querySelectorAll('.ab-fact-list').forEach((list) => {
  initSortableList(list, { itemSelector: '.ab-fact-card' });
});

// Drag-and-drop:        click + hold the card, drop above/below
//                       a target — accent rail indicates landing
// Keyboard reorder:     focus a card, Cmd/Ctrl + ArrowUp/Down
//                       moves it one position
// Visual state classes: .is-dragging / .is-drop-before /
//                       .is-drop-after (applied by the helper,
//                       styled by the chapter CSS).

import {
  SortableList,
  Input,
  Button,
  Alert,
  PlusIcon,
  FilterIcon,
  SearchIcon,
} from "@magicblocksai/ui";

export function KeyFactsPage({ facts, onReorder, onCreate }) {
  return (
    <div className="ab-pane-form is-list">
      <header className="ab-form-title-row">
        <h2>Key Facts</h2>
        <span className="ab-mode-chip">Basic</span>
      </header>
      <p>Key facts are details you collect from users…</p>

      <div className="ab-list-toolbar">
        <Input
          type="search"
          placeholder="Search key facts by name only"
          icon={<SearchIcon />}
          shape="pill"
        />
        <Button variant="ghost" icon aria-label="Filter"><FilterIcon /></Button>
        <Button tone="success" icon={<PlusIcon />} onClick={onCreate}>
          New
        </Button>
      </div>

      {/* SortableList uses the kit's useSortable hook (chapter
          1.3.0) — same shape as the inline init helper above. */}
      <SortableList items={facts} onReorder={onReorder} className="ab-fact-list">
        {(fact, dragHandleProps) => (
          <FactCard fact={fact} dragHandleProps={dragHandleProps} />
        )}
      </SortableList>

      <Alert tone="warning" className="ab-privacy-advisory">
        <strong>For Privacy & Safety,</strong> avoid requesting sensitive
        information like passwords, bank details, health records, PINs,
        or other private data.
      </Alert>
    </div>
  );
}

<div class="ab-dialog-overlay" role="dialog">
  <div class="ab-dialog" style="max-width: 540px;">
    <header class="ab-dialog-head">
      <span class="ab-dialog-title">Create a new key fact</span>
      <button class="ab-dialog-close">×</button>
    </header>

    <div class="ab-dialog-body">
      <p>Choose how you'd like to create your Key Fact…</p>

      <div class="ab-chooser-grid">
        <button class="ab-chooser-card">
          <span class="ab-chooser-illus"><svg>…magnifier+books</svg></span>
          <span class="ab-chooser-title">Choose from template</span>
          <span class="ab-chooser-sub">Use a predefined format…</span>
        </button>
        <button class="ab-chooser-card">
          <span class="ab-chooser-illus"><svg>…book</svg></span>
          <span class="ab-chooser-title">Create custom key fact</span>
          <span class="ab-chooser-sub">Start from scratch…</span>
        </button>
      </div>

      <div class="ab-chooser-recent">
        <h4>Recently used templates (0)</h4>
        <div class="ab-chooser-recent-empty">
          <svg>…empty-state stacked books</svg>
          <p>No recently used templates yet</p>
          <span>Start creating Key Facts…</span>
        </div>
      </div>
    </div>
  </div>
</div>

/* Chooser dialog uses the same .ab-dialog primitives as the Persona
   edit dialog at 18.10. The body content is bespoke:

   .ab-chooser-grid     2-col grid of large illustrated cards
   .ab-chooser-card     clickable surface; hover → accent-soft fill
   .ab-chooser-illus    72×72 SVG slot (success-text tinted)
   .ab-chooser-recent-empty  centered "no recent" illustration block.

   Card padding stays loose to communicate the "this is a meaningful
   choice" weight — these are the entry points for everything that
   follows in the agent's key-fact configuration. */

import { Modal, Button } from "@magicblocksai/ui";

export function CreateKeyFactChooser({ open, onClose, onPick, recent }) {
  return (
    <Modal open={open} onOpenChange={onClose} title="Create a new key fact">
      <p>Choose how you'd like to create your Key Fact…</p>

      <div className="ab-chooser-grid">
        <button className="ab-chooser-card" onClick={() => onPick('template')}>
          <span className="ab-chooser-illus"><ChooserMagnifierBooks /></span>
          <span className="ab-chooser-title">Choose from template</span>
          <span className="ab-chooser-sub">Use a predefined format and customize as needed.</span>
        </button>
        <button className="ab-chooser-card" onClick={() => onPick('custom')}>
          <span className="ab-chooser-illus"><ChooserBook /></span>
          <span className="ab-chooser-title">Create custom key fact</span>
          <span className="ab-chooser-sub">Start from scratch and define your own key fact.</span>
        </button>
      </div>

      <RecentTemplatesSection items={recent} />
    </Modal>
  );
}

<div class="ab-dialog-overlay" role="dialog">
  <div class="ab-dialog">
    <header class="ab-dialog-head">
      <span class="ab-dialog-title">Edit key fact</span>
      <button class="ab-dialog-close">×</button>
    </header>

    <div class="ab-dialog-body">
      <div class="ab-warning-banner">
        <svg>…triangle</svg>
        <div>
          <b>Updates will take effect across this agent</b>
          <span>Changes will reflect…</span>
        </div>
      </div>

      <div class="ab-dialog-row-2">
        <div class="ab-form-field">Type of information</div>
        <div class="ab-form-field">Who am I listening to</div>
      </div>

      <div class="ab-dialog-row-2">
        <div class="ab-form-field">Fact name + count</div>
        <div class="ab-form-field">Token + copy button</div>
      </div>

      <label class="ab-form-check">
        <input type="checkbox" checked> Listen across all blocks
      </label>

      <div class="ab-form-field">Ask textarea + count</div>
      <div class="ab-form-field">Listen textarea + count</div>
    </div>

    <footer class="ab-dialog-foot">
      <button class="ab-h-pill">Cancel</button>
      <button class="ab-h-pill is-primary">Update Fact</button>
    </footer>
  </div>
</div>

/* Same .ab-dialog / .ab-dialog-row-2 / .ab-form-* primitives as
   the Persona dialog (18.10). New chrome for this screen:

   .ab-warning-banner   yellow advisory at top — operator changes
                        cascade across every journey block
   .ab-token-input      input + copy-button grid — for the
                        machine-readable token slot
   .ab-form-check       inline checkbox row.

   When Tab 2 (Ask-when) ships with 18.12, the dialog grows tabs
   at the top of the body; the form chrome below stays identical. */

import {
  Modal,
  Tabs,
  Select,
  Input,
  Textarea,
  Checkbox,
  Alert,
  Button,
  CopyButton,
} from "@magicblocksai/ui";

export function EditKeyFactDialog({ fact, open, onClose, onSave }) {
  const [draft, setDraft] = useState(fact);
  return (
    <Modal open={open} onOpenChange={onClose} title="Edit key fact">
      <Tabs defaultValue="setup" items={[
        { id: 'setup', label: 'Key fact setup' },
        { id: 'ask-when', label: 'Ask when condition' },
      ]} />

      <Alert tone="warning">
        <b>Updates will take effect across this agent.</b>
        Changes will reflect and override all Journey Blocks using
        this key fact.
      </Alert>

      <div className="ab-dialog-row-2">
        <Field label="Type of information to collect *">
          <Select value={draft.type} options={TYPE_OPTIONS} />
        </Field>
        <Field label="Who am I listening to for the key fact? *">
          <Select value={draft.source} options={SOURCE_OPTIONS} />
        </Field>
      </div>

      <div className="ab-dialog-row-2">
        <Field label="Fact name *">
          <Input value={draft.name} maxLength={30} showCount />
        </Field>
        <Field label="Key fact token *">
          <Input value={draft.token} mono trailing={
            <CopyButton value={draft.token} icon />
          } />
        </Field>
      </div>

      <Checkbox checked={draft.listenAcrossBlocks}
                label="Listen for this fact across all journey blocks" />

      <Field label="Ask the user *">
        <Textarea value={draft.ask} maxLength={400} showCount rows={3} />
      </Field>
      <Field label="Listen for key fact *">
        <Textarea value={draft.listen} maxLength={400} showCount rows={4} />
      </Field>

      <Modal.Foot>
        <Button onClick={onClose}>Cancel</Button>
        <Button tone="accent" onClick={() => onSave(draft)}>Update Fact</Button>
      </Modal.Foot>
    </Modal>
  );
}

<div class="action-wizard">
  <aside class="action-list">… actions list …</aside>

  <div class="wizard-pane">
    <header class="wizard-head">
      <nav class="wizard-steps">
        <button class="wizard-step is-active"><span class="wizard-step-num">1</span> Action</button>
        <button class="wizard-step"><span class="wizard-step-num">2</span> Conditions <span class="wizard-step-count">1</span></button>
        <button class="wizard-step"><span class="wizard-step-num">3</span> Goal</button>
      </nav>
    </header>

    <div class="wizard-body">
      <div class="action-picker">
        <button class="action-tile is-selected"><span class="action-tile-glyph">…</span><span class="action-tile-name">Send Message</span></button>
        <!-- …14 more tiles. Website-only types carry .is-disabled -->
      </div>
      <div class="action-detail">… selected description …</div>

      <!-- The selected action's config reveals here -->
      <div class="action-config">
        <div class="field-row">
          <label class="field-label">Message</label>
          <div class="message-field">
            <div class="message-field-tabs"><button class="message-field-tab">Select</button><button class="message-field-tab is-active">Custom</button></div>
            <textarea class="message-field-textarea">…</textarea>
          </div>
        </div>
      </div>
    </div>

    <footer class="wizard-foot">…</footer>
  </div>
</div>

/* Promoted to @magicblocksai/css (operator surface) in v1.67.0:

   .action-wizard   2-col shell (.action-list / .wizard-pane)
   .wizard-steps    numbered step indicator (.is-active / .is-done)
   .action-picker   registry-driven grid of .action-tile cards
                     (.is-selected accent fill · .is-disabled "Website only")
   .action-detail   selected-action description card
   .action-config   per-action config surface — stacks .field-row rows
   .message-field   Select | Custom snippet-or-custom editor

   Full rules ship in _shared.css. */

import { useState } from "react";
import {
  ActionWizard, ActionList, WizardSteps, ActionPicker,
  ActionConfigPanel, ActionField, MessageField, Switch,
} from "@magicblocksai/ui";
// `actionRegistry` + the `Action` / `ActionFieldSpec` types are also kit exports.

// `actions` is the block's actions; `selectedId` the one being edited.
export function ActionStep({ actions, selectedId, onChange, onSelect, onAdd }) {
  const action = actions.find((a) => a.id === selectedId)!;
  const [collapsed] = useState(false);
  return (
    <ActionWizard
      actionsList={
        <ActionList
          items={actions.map((a) => ({
            id: a.id,
            name: a.name,
            scope: KIND_LABELS[a.type],              // kind chip
            meta: a.conditions.length === 0          // NEW — trigger summary
              ? "Fires every turn"
              : `${a.conditions.length} condition${a.conditions.length === 1 ? "" : "s"}`,
          }))}
          selectedId={selectedId} onSelect={onSelect} onAddAction={onAdd} />
      }
      steps={
        <WizardSteps onStepChange={() => {}} steps={[
          { id: "action",     label: "Action",     status: "active" },
          { id: "conditions", label: "Conditions", count: 1, status: "todo" },
          { id: "goal",       label: "Goal",       status: "todo" },
        ]} />
      }
      toolbar={<label className="ab-only-once">Only match once <Switch defaultChecked /></label>}
    >
      {/* Pick a type → the registry seeds a new action of that type */}
      <ActionPicker value={action.type} channel="chat"
        onChange={(type) => onChange(actionRegistry[type].makeDefault(action.id))} />

      {/* …and its config reveals below — declarative fields (rendered via
          <ActionField> → <MessageField> etc.) or a custom panel. */}
      <ActionConfigPanel action={action} onChange={onChange}
        context={{ snippets: savedSnippets }} />
    </ActionWizard>
  );
}

<div class="calendar-config">
  <div class="field-row">
    <label class="field-label">Select a calendar</label>
    <select class="...">Calendly / Google / HighLevel / HubSpot</select>
  </div>
  <!-- Calendly: embed type · account · event ID -->

  <div class="calendar-autofill">
    <p class="field-label">Calendar form auto-population</p>
    <div class="calendar-autofill-locked">Name → Name</div>     <!-- locked -->
    <div class="calendar-autofill-locked">Email → Email</div>   <!-- locked -->
    <!-- <FieldMapper> renders the editable MagicBlocks→Calendly rows -->
  </div>
</div>

/* operator surface (v1.67.0):
   .calendar-config          stacked field rows
   .calendar-autofill        the form-field mapper section
   .calendar-autofill-locked Name/Email always-mapped rows
   Editable rows are <FieldMapper> (chapter 18.3 / .field-mapper). */

import { CalendarActionConfig } from "@magicblocksai/ui";

// Registered as the Add Calendar action's custom `Panel`; 
// renders it automatically when `action.type === "add_calendar"`.
export function CalendarStep({ action, onChange, contactFields, calendlyFields }) {
  return (
    <CalendarActionConfig
      action={action}
      onChange={onChange}
      context={{
        calendarSourceFields: contactFields,  // MagicBlocks fields (left)
        calendlyFields,                        // [form_field_N] slots (right)
      }}
    />
  );
}

<!-- Switch Journey — block/channel cascade + conditional follow-up -->
<div class="action-config-stack">
  <div class="field-row"><label class="field-label">Select Journey Block</label> <select>…</select></div>
  <div class="field-row field-row-switch"><label class="switch">…</label> Switch Channel</div>
  <!-- channel + sender selects appear when Switch Channel is on -->
  <div class="action-config-section">     <!-- follow-up: only on Current Block -->
    <select>Send message / Auto</select>
    <div class="message-field">…</div>
  </div>
</div>

/* operator surface (v1.68.0):
   .action-config-stack    vertical field stack (shared by every Phase-2 panel)
   .action-config-section  grouped sub-cascade (follow-up / Slack block) */

import { SwitchJourneyActionConfig, HumanTakeoverActionConfig } from "@magicblocksai/ui";

// Both are registered as their action type's custom `Panel`; <ActionConfigPanel>
// renders them automatically. Shown standalone here for clarity.
export function FlowPanels({ action, onChange, ctx }) {
  return action.type === "switch_journey" ? (
    <SwitchJourneyActionConfig
      action={action}
      onChange={onChange}
      context={{ journeyBlocks: ctx.blocks, switchChannels: ctx.channels, smsSenders: ctx.senders, snippets: ctx.snippets }}
    />
  ) : (
    <HumanTakeoverActionConfig
      action={action}
      onChange={onChange}
      context={{ slackConnections: ctx.slack, availabilityProfiles: ctx.profiles, snippets: ctx.snippets }}
    />
  );
}

<!-- Add Buttons — two messages bracketing a button repeater -->
<div class="action-config-stack">
  <div class="field-row"><span class="field-label">Message before</span> <div class="message-field">…</div></div>
  <div class="action-button-rows">
    <div class="action-button-row"><input value="Book a tasting"> <button class="icon-btn">🗑</button></div>
    <div class="action-button-row"><input value="Talk to sales"> <button class="icon-btn">🗑</button></div>
  </div>
  <button class="btn btn-secondary btn-sm">+ Add button</button>
  <div class="field-row"><span class="field-label">Message after</span> <div class="message-field">…</div></div>
</div>

/* operator surface (v1.68.0):
   .action-button-rows   the button list
   .action-button-row    one row — label <input> (flex:1) + remove .icon-btn
   Declarative actions (Embed/End Chat/Opt-Out/Run Task) reuse .field-row. */

import { ButtonsActionConfig, FormsActionConfig, ActionConfigPanel } from "@magicblocksai/ui";

// Buttons + Forms are custom panels; End Chat / Opt-Out / Run Task / Embed are
// declarative — ActionConfigPanel renders their `fields` with no bespoke code.
export function ActionConfig({ action, onChange, ctx }) {
  if (action.type === "add_buttons")
    return <ButtonsActionConfig action={action} onChange={onChange} context={{ snippets: ctx.snippets }} />;
  if (action.type === "add_forms")
    return <FormsActionConfig action={action} onChange={onChange} context={{ forms: ctx.forms, snippets: ctx.snippets }} />;
  // Embed / End Chat / Opt-Out → declarative fields; Run Task → its own panel:
  return <ActionConfigPanel action={action} onChange={onChange} context={{ snippets: ctx.snippets }} />;
}

<!-- A button row that expands to a recursive sub-action editor -->
<div class="action-button-item">
  <div class="action-button-row"><input value="Book a tasting"> <button>Edit action</button> <button class="icon-btn">🗑</button></div>
  <div class="action-button-subaction">
    <div class="sub-action-field">
      <div class="action-picker">… restricted tiles (no Add Buttons) …</div>
      <div class="sub-action-config"><!-- nested <ActionConfigPanel> -->…</div>
    </div>
  </div>
</div>

/* operator surface (v1.69.0):
   .action-button-item       wraps a button row + its sub-action editor
   .action-button-subaction  indented, hair-bordered nesting affordance
   .sub-action-field         restricted picker + recursive config
   .sub-action-config        the chosen sub-action's panel (warm group) */

import { SubActionField, RunTaskActionConfig } from "@magicblocksai/ui";

// A button's nested action — SubActionField fronts a restricted ActionPicker
// with a recursive ActionConfigPanel (allow-list excludes add_buttons → terminates).
export function ButtonAction({ button, onChange, ctx }) {
  return (
    <SubActionField
      value={button.action}
      onChange={(action) => onChange({ ...button, action })}
      idPrefix={button.id}
      context={{ snippets: ctx.snippets }}
    />
  );
}

// Run Task — saved prompt | custom instructions + a functions multi-select.
export function TaskStep({ action, onChange, ctx }) {
  return (
    <RunTaskActionConfig
      action={action}
      onChange={onChange}
      context={{ prompts: ctx.prompts, functions: ctx.functions }}
    />
  );
}

<div class="action-opt-demo" role="listbox" aria-label="Action type">
        <span class="action-opt"><span class="action-opt-glyph" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><circle cx="8" cy="8" r="5"></circle></svg></span><span class="action-opt-text"><span class="action-opt-name">Send Message</span><span class="action-opt-desc">Send a message to the end user — a saved snippet or custom text.</span></span></span>
        <span class="action-opt"><span class="action-opt-glyph" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><circle cx="8" cy="8" r="5"></circle></svg></span><span class="action-opt-text"><span class="action-opt-name">Switch Journey</span><span class="action-opt-desc">Move the conversation to another journey block.</span></span></span>
        <span class="action-opt"><span class="action-opt-glyph" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><circle cx="8" cy="8" r="5"></circle></svg></span><span class="action-opt-text"><span class="action-opt-name">Run Task</span><span class="action-opt-desc">Run a saved prompt or call functions to do work mid-chat.</span></span></span>
        <span class="action-opt"><span class="action-opt-glyph" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><circle cx="8" cy="8" r="5"></circle></svg></span><span class="action-opt-text"><span class="action-opt-name">Human Takeover</span><span class="action-opt-desc">Hand off to a human agent and pause the bot.</span></span></span>
      </div>

/* The .action-opt option rows ship in @magicblocksai/css (@surface: operator).
   <ActionPicker layout="dropdown"> renders them inside <Combobox>'s popover via
   its renderOption — searchable, keyboard-navigable, viewport-aware. */

// No wiring — <ActionPicker layout="dropdown"> composes the kit's <Combobox>
// (search + roving keyboard nav + portal popover) out of the box.

import { useState } from 'react';
import { ActionPicker } from '@magicblocksai/ui';

// layout="dropdown" → a searchable <Combobox> instead of the 4-col grid.
// Each option reads icon · name · one-line description (from the registry);
// type to filter. The grid stays the default elsewhere.
const [type, setType] = useState('send_message');

<ActionPicker
  layout="dropdown"
  value={type}
  onChange={setType}
  channel="chat"
/>

<div class="ab-wiz-body">
  <div class="ab-cond-builder">
    <!-- Each row: type select / comparator select / value editor / remove -->
    <div class="ab-cond-row">
      <select>All Key Facts Found (Active Block)</select>
      <select>Equals</select>
      <div class="ab-cond-row-yesno">
        <button>No</button>
        <button class="is-active">Yes</button>
      </div>
      <button class="ab-cond-row-remove">×</button>
    </div>

    <!-- Value editor swaps shape on type: number + unit for "No message
         received for", text input for "User Message Contents", chips for
         "One of", etc. Same shape vocabulary as the 18.1 QueryBuilder. -->
    <div class="ab-cond-row">
      <select>No message received from user for</select>
      <select>in the last</select>
      <div style="display: grid; grid-template-columns: 80px 1fr; gap: 6px;">
        <input type="number" value="2">
        <select><option>Minutes</option>…</select>
      </div>
      <button class="ab-cond-row-remove">×</button>
    </div>

    <button class="ab-cond-add">+ Add condition</button>
  </div>
</div>

/* Conditions builder reuses the .ab-form-input chrome for selects +
   inputs (same focus ring, same border treatment) and adds:

   .ab-cond-builder      gap-3 vertical stack
   .ab-cond-row          4-col grid (type / comparator / value / remove)
                         140px on comparator (fits "does not equal")
                         minmax(0, 1fr) on type + value so they shrink
                         gracefully on narrow viewports
   .ab-cond-row-yesno    inline segmented control for boolean values
                         (Yes activates with success-text fill)
   .ab-cond-row-remove   ghost button → error-soft on hover
   .ab-cond-add          dashed-border accent button, fills on hover.

   The 15 condition types vocabularise different value editors but the
   row chrome is identical — same contract as the kit's QueryBuilder
   at 18.1 so a single component eventually backs both. */

import { QueryBuilder } from "@magicblocksai/ui";

// The 15 condition types map to fields the kit's QueryBuilder already
// understands. Each declares its type (boolean, number, text, etc.)
// which drives the operator vocabulary + value editor shape.
const CONDITION_FIELDS = [
  { id: 'all_facts_found', label: 'All Key Facts Found (Active Block)',
    type: 'boolean' },
  { id: 'key_fact',        label: 'Key Fact',
    type: 'enum', subFields: keyFactsForThisAgent },
  { id: 'user_msg_count',  label: 'User message count (Active Block)',
    type: 'number' },
  { id: 'user_msg_content', label: 'User Message Contents',
    type: 'text' },
  { id: 'wants_human',     label: 'Wants To Talk To Human',
    type: 'boolean' },
  { id: 'sentiment',       label: 'Sentiment',
    type: 'enum', options: ['Positive','Negative','Neutral','Unknown'] },
  { id: 'no_msg_for',      label: 'No message received from user for',
    type: 'duration' },
  { id: 'custom',          label: 'Custom Condition',
    type: 'custom-prompt' },
  // …7 more.
];

export function ConditionsStep({ conditions, onChange }) {
  return (
    <QueryBuilder
      fields={CONDITION_FIELDS}
      value={conditions}
      onChange={onChange}
      conjunction="AND"
      addLabel="+ Add condition"
    />
  );
}

// Same component also backs the Ask-when tab on Key Fact edit (18.11
// Tab 2), the webhook event-filter on Channels (18.16), and audience
// filters on Campaigns (14.17). One conditions vocabulary, one
// operator set, four consumers.

<div class="action-config-stack">
  <div class="field-row"><label class="field-label">Select a goal</label> <select>…</select></div>
  <!-- value shows once a goal is picked -->
  <div class="field-row"><label class="field-label">Goal value</label> <div class="input-group"><span class="input-affix">$</span><input type="number"></div></div>
</div>

/* Reuses the shared .action-config-stack + .field-row families.
   The $ prefix is the kit's <Input prefix> (.input-group / .input-affix). */

import { GoalStep } from "@magicblocksai/ui";

// Step 3 of the agent-builder wizard. Conditions (Step 2) is <QueryBuilder>.
export function GoalStepDemo({ goal, setGoal, ctx }) {
  return <GoalStep value={goal} onChange={setGoal} goals={ctx.goals} />;
}

<div class="ab-pane-form">
  <div class="ab-form-title-row">
    <h2>Guardrails</h2> <span class="ab-mode-chip">Basic</span>
  </div>

  <!-- Library picker -->
  <div class="ab-form-field">
    <label>Choose guardrail set</label>
    <div class="ab-set-picker">
      <select class="ab-form-input">…sets</select>
      <button class="ab-set-create">+ Create new</button>
      <button class="ab-set-edit"><svg>…pencil</svg></button>
    </div>
    <div class="ab-set-card">
      <div class="ab-set-card-meta">
        <span>Version v3 · 12 May 2026</span>
        <span>12 / 15 rules used</span>
        <span class="is-shared">↻ Shared with 3 agents</span>
      </div>
      <p>A 12-rule baseline for every Tyrnell-family agent…</p>
    </div>
  </div>

  <!-- Agent-level controls -->
  <div class="ab-form-field">
    <label>Agent-level controls</label>
    <div class="ab-control-list">

      <div class="ab-control-row">
        <span class="ab-control-row-glyph"><svg>…</svg></span>
        <div class="ab-control-row-body">
          <span class="ab-control-row-name">PII collection control</span>
          <span class="ab-control-row-sub">…</span>
        </div>
        <div class="ab-control-row-action">
          <select>3 types blocked</select>
        </div>
      </div>

      <div class="ab-control-row is-on">
        <span class="ab-control-row-glyph"><svg>…shield</svg></span>
        <div class="ab-control-row-body">
          <span class="ab-control-row-name">Rules monitor</span>
          <span class="ab-control-row-sub">…</span>
        </div>
        <div class="ab-control-row-action">
          <span class="ab-control-row-status is-on">On</span>
          <button class="ab-pill-toggle" aria-pressed="true"></button>
        </div>
      </div>

      <!-- …PII / Redaction / Jailbreak / Moderation rows… -->
    </div>
  </div>
</div>

/* New chapter-private chrome for the library-loaded screen:

   .ab-set-picker      3-col grid: select + Create-new + edit pencil
                       (shared library-picker family — same shape
                       backs Persona 18.10, Knowledge 18.14, and
                       Design & Go Live appearance 18.17).
   .ab-set-card        warm summary card under the picker
                       .is-shared meta highlights cross-agent reuse
   .ab-control-list    paper card with horizontal hair dividers
   .ab-control-row     32px glyph / body / action grid
   .ab-control-row.is-on  glyph adopts accent fill
   .ab-control-row-status pill (Off / On)
   .ab-pill-toggle     42×24 segmented toggle (cousin of .ab-only-once-
                       toggle but bigger, label-pairing-friendly). */

import {
  Input,
  Select,
  Button,
  Switch,
  PenIcon,
  ShieldIcon,
} from "@magicblocksai/ui";

export function GuardrailsPage({ agent, guardrailSets, onEditSet }) {
  return (
    <div className="ab-pane-form">
      <header className="ab-form-title-row">
        <h2>Guardrails</h2>
        <span className="ab-mode-chip">Basic</span>
      </header>
      <p>Pick a guardrail set from your library…</p>

      {/* Library picker — same shape as Persona picker (18.10) */}
      <Field label="Choose guardrail set">
        <div className="ab-set-picker">
          <Select value={agent.guardrailSetId} options={guardrailSets} />
          <Button variant="link" onClick={onCreateSet}>+ Create new</Button>
          <Button variant="ghost" icon onClick={onEditSet}><PenIcon /></Button>
        </div>
        <GuardrailSetSummaryCard set={agent.guardrailSet} />
      </Field>

      {/* Agent-level runtime controls — 5 rows, each with its own
          configured value alongside an On/Off pill toggle. */}
      <Field label="Agent-level controls">
        <ControlList>
          <ControlRow icon={<LockIcon />} name="PII collection control"
                      sub="Stop the agent from asking for sensitive info">
            <Select value={agent.piiBlocked} options={PII_OPTIONS} />
          </ControlRow>
          <ControlRow icon={<BlackoutIcon />} name="Redaction"
                      sub="Strip sensitive content before storage">
            <Switch checked={agent.redactionEnabled} />
          </ControlRow>
          <ControlRow on icon={<ShieldIcon />} name="Rules monitor"
                      sub="Output verification layer">
            <Switch checked={agent.rulesMonitorEnabled} />
          </ControlRow>
          {/* …Jailbreak / Moderation rows… */}
        </ControlList>
      </Field>
    </div>
  );
}

<div class="ab-dialog-overlay" role="dialog">
  <div class="ab-dialog">
    <header class="ab-dialog-head">
      <span class="ab-dialog-title">Edit guardrail set</span>
      <button class="ab-dialog-close">×</button>
    </header>

    <div class="ab-dialog-body">
      <div class="ab-warning-banner">
        <b>This set is used by 3 agents</b> Changes will roll out…
      </div>

      <div class="ab-dialog-row-2">
        <div class="ab-form-field">Set name *</div>
        <div class="ab-form-field">Version</div>
      </div>

      <div class="ab-form-field">Description</div>
      <div class="ab-form-field">Tags chip-input</div>

      <div class="ab-form-field">
        <label>Rules <span class="ab-rule-counter">Total 4 / 15</span></label>
        <div class="ab-rule-list">
          <div class="ab-rule-card" tabindex="0">
            <span class="ab-rule-handle"><svg>…</svg></span>
            <span class="ab-rule-text">Don't recommend other wineries.</span>
            <button class="ab-rule-menu">…</button>
          </div>
          <!-- …more rule cards… -->
        </div>
        <button class="ab-add-rule">+ New rule</button>
      </div>
    </div>

    <footer class="ab-dialog-foot">
      <button class="ab-h-pill">Cancel</button>
      <button class="ab-h-pill is-primary">Save & roll out</button>
    </footer>
  </div>
</div>

/* Reuses .ab-dialog / .ab-warning-banner / .ab-dialog-row-2 /
   .ab-tag-input from earlier sections. New chrome:

   .ab-rule-list       sortable vertical stack of rule cards
   .ab-rule-card       drag handle + text + 3-dot menu
                       .is-dragging / .is-drop-before / .is-drop-after
                       — same sortable contract as fact cards (18.11)
                       and journey blocks (18.7)
   .ab-add-rule        dashed-accent button, fills on hover
   .ab-rule-counter    "Total 4 / 15" caption inside the field label
                       so operators see they're at 4 of the plan limit. */

// The shared initSortableList() helper from the script block at the
// top of the chapter (also used by journey blocks 18.7 + fact cards
// 18.11) gains rule cards as its third consumer:

document.querySelectorAll('.ab-rule-list').forEach((list) => {
  initSortableList(list, { itemSelector: '.ab-rule-card' });
});

// Drag-and-drop:    grab card, drop above/below target
// Keyboard reorder: Cmd/Ctrl + ArrowUp/Down on a focused rule

import {
  Modal,
  Input,
  Select,
  Button,
  Alert,
  SortableList,
} from "@magicblocksai/ui";

export function EditGuardrailSetDialog({ set, open, onClose, onSave }) {
  const [draft, setDraft] = useState(set);
  return (
    <Modal open={open} onOpenChange={onClose} title="Edit guardrail set">
      <Alert tone="warning">
        <b>This set is used by {set.usedByCount} agents.</b>
        Changes will roll out to every agent using {set.name}
        the next time they reload.
      </Alert>

      <div className="ab-dialog-row-2">
        <Field label="Set name *">
          <Input value={draft.name} />
        </Field>
        <Field label="Version">
          <Select value={draft.versionId} options={set.versions} />
        </Field>
      </div>

      <Field label="Description"><Input value={draft.description} /></Field>
      <Field label="Tags"><TagInput value={draft.tags} /></Field>

      <Field label={`Rules (${draft.rules.length} / ${planLimit})`}>
        <SortableList
          items={draft.rules}
          onReorder={(rules) => setDraft({ …draft, rules })}
          className="ab-rule-list">
          {(rule) => (
            <div className="ab-rule-card">
              <DragHandle />
              <span>{rule.text}</span>
              <RuleMenu rule={rule} />
            </div>
          )}
        </SortableList>
        <Button variant="ghost-dashed" onClick={addRule}>+ New rule</Button>
      </Field>

      <Modal.Foot>
        <Button onClick={onClose}>Cancel</Button>
        <Button tone="accent" onClick={() => onSave(draft)}>
          Save & roll out
        </Button>
      </Modal.Foot>
    </Modal>
  );
}

<div class="ab-pane-form">
  <div class="ab-form-title-row">
    <h2>Knowledge</h2> <span class="ab-mode-chip">Basic</span>
  </div>

  <!-- Company info (4 fields, 2-col grid) -->
  <div class="ab-form-field">
    <label>Company info</label>
    <div class="ab-info-grid">
      <input value="Tyrnell Wines">
      <input value="https://www.tyrnells.com.au">
      <input value="sales@tyrnells.com.au">
      <input value="+61 480 022 801">
    </div>
  </div>

  <!-- Unified knowledge resources (sortable) -->
  <div class="ab-form-field">
    <label>Knowledge resources <b>Total 5 · priority order</b></label>
    <p>Drag to reorder. Top = first to be consulted.</p>

    <div class="ab-resource-list">
      <div class="ab-resource-card" tabindex="0">
        <span class="ab-resource-handle"><svg>…</svg></span>
        <span class="ab-resource-glyph is-playbook"><svg>…</svg></span>
        <div class="ab-resource-body">
          <span class="ab-resource-name">Tyrnell Wine Sales Playbook</span>
          <span class="ab-resource-meta">
            <span class="ab-resource-type is-playbook">Playbook</span>
            <span class="ab-resource-meta-sub">6 sections · v4 · updated 3d ago</span>
          </span>
        </div>
        <button class="ab-resource-menu">…</button>
      </div>
      <!-- …collection / qa / snippet rows, same shape with different type chip… -->
    </div>

    <button class="ab-add-resource">+ Add knowledge</button>
  </div>

  <!-- Tools & MCP (separate — call-out capability, not reference) -->
  <div class="ab-form-field">
    <label>Tools & MCP</label>
    <div class="ab-resource-list">
      <div class="ab-resource-card">
        <span class="ab-resource-glyph is-tool"><svg>…wrench</svg></span>
        <div class="ab-resource-body">
          <span class="ab-resource-name">Tyrnell inventory MCP</span>
          <span class="ab-resource-meta">
            <span class="ab-resource-type is-tool">MCP</span>
            <span>3 tools · check_stock · check_availability · …</span>
          </span>
        </div>
      </div>
    </div>
    <button class="ab-add-resource">+ Add MCP or AI tool</button>
  </div>

  <!-- Always-on context (was: Priority Knowledge) -->
  <div class="ab-form-field">
    <label>Always-on context</label>
    <p>Free-form context the agent treats as known from session start.</p>
    <textarea rows="6">### Previously Purchased Wines:…</textarea>
  </div>
</div>

/* New chapter-private chrome for the unified knowledge model:

   .ab-resource-list      sortable vertical stack
   .ab-resource-card      handle / glyph / body / menu — same sortable
                          contract as fact cards (18.11) and rule
                          cards (18.13); 4th consumer of the helper
   .ab-resource-glyph     32×32 chip; .is-playbook / .is-collection /
                          .is-qa / .is-snippet / .is-tool drive tone
                          (each picks a colour family from the
                          conic-gradient brand palette — accent /
                          blue / green / amber / purple)
   .ab-resource-type      9px mono uppercase pill; same colour family
                          as the glyph for instant recognition
   .ab-resource-meta-sub  mono caption inline with the type chip
   .ab-add-resource       dashed-accent button (fills on hover)
   .ab-info-grid          2-col grid for the company info block
   .ab-resources-caption  italicised explainer line above each list. */

import {
  Input,
  Textarea,
  Button,
  SortableList,
  BookIcon,
  FileTextIcon,
  HelpBubble,
  FlaskIcon,
} from "@magicblocksai/ui";

// One row shape, multiple resource types — the type field drives the
// glyph colour family + the chip label. No more "is this a playbook
// or a collection?" branching in the UI.
const RESOURCE_TYPES = {
  playbook:   { label: 'Playbook',   tone: 'green',  icon: BookIcon },
  collection: { label: 'Collection', tone: 'blue',   icon: FileTextIcon },
  qa:         { label: 'Q&A',        tone: 'amber',  icon: HelpBubble },
  snippet:    { label: 'Snippet pack', tone: 'accent', icon: QuoteIcon },
  tool:       { label: 'MCP',        tone: 'purple', icon: FlaskIcon },
};

export function KnowledgePage({ agent, resources, tools, onReorder }) {
  return (
    <div className="ab-pane-form">
      <header className="ab-form-title-row">
        <h2>Knowledge</h2>
        <span className="ab-mode-chip">Basic</span>
      </header>

      <CompanyInfoCard agent={agent} />

      <Field label="Knowledge resources"
             caption="Drag to reorder — top is consulted first.">
        <SortableList items={resources} onReorder={onReorder}
                      className="ab-resource-list">
          {(r) => <ResourceCard resource={r} />}
        </SortableList>
        <Button variant="ghost-dashed">+ Add knowledge</Button>
      </Field>

      <Field label="Tools & MCP"
             caption="Call-out capability — agent runs these mid-chat.">
        <SortableList items={tools} onReorder={…}
                      className="ab-resource-list">
          {(t) => <ResourceCard resource={t} />}
        </SortableList>
        <Button variant="ghost-dashed">+ Add MCP or AI tool</Button>
      </Field>

      <Field label="Always-on context"
             caption="Loaded into the prompt every turn.">
        <Textarea value={agent.alwaysOnContext}
                  maxLength={5000} showCount rows={6} />
      </Field>
    </div>
  );
}

<div class="ab-dialog-overlay" role="dialog">
  <div class="ab-dialog">
    <header class="ab-dialog-head">
      <span class="ab-dialog-title">Add knowledge</span>
      <button class="ab-dialog-close">×</button>
    </header>
    <div class="ab-dialog-body">
      <p>Pick the kind of knowledge to attach…</p>
      <div class="ab-knowledge-chooser-grid">
        <button class="ab-knowledge-chooser-tile">
          <span class="ab-knowledge-chooser-glyph is-playbook"><svg>…</svg></span>
          <div>
            <span class="ab-knowledge-chooser-name">Sales Playbook</span>
            <span class="ab-knowledge-chooser-sub">A structured doc…</span>
          </div>
        </button>
        <!-- …Collection / Q&A / Snippet Pack tiles… -->
      </div>
    </div>
  </div>
</div>

/* Chooser dialog reuses the .ab-dialog primitives from earlier
   sections. New: a 2-col grid of "type tile" buttons.

   .ab-knowledge-chooser-grid    2-col grid for 4 tiles
   .ab-knowledge-chooser-tile    icon-left, body-right layout (faster
                                 to scan than the chooser-card pattern
                                 from 18.11 because there are FOUR
                                 options here, not two)
   .ab-knowledge-chooser-glyph   36×36 paper-bg square, type-coloured
                                 .is-playbook / .is-collection / .is-qa /
                                 .is-snippet — same colour family as
                                 the resource-card glyphs (consistency
                                 across the surface). */

import { Modal } from "@magicblocksai/ui";

const ADD_KNOWLEDGE_TILES = [
  { type: 'playbook',   name: 'Sales Playbook',
    sub: 'A structured doc telling the agent how to converse.' },
  { type: 'collection', name: 'Knowledge Collection',
    sub: 'Unstructured docs the agent looks up to answer questions.' },
  { type: 'qa',         name: 'Q&A Set',
    sub: 'Curated question-answer pairs the agent matches first.' },
  { type: 'snippet',    name: 'Snippet Pack',
    sub: 'Reusable text fragments for replies.' },
];

export function AddKnowledgeChooser({ open, onClose, onPick }) {
  return (
    <Modal open={open} onOpenChange={onClose} title="Add knowledge">
      <p>Pick the kind of knowledge to attach…</p>
      <div className="ab-knowledge-chooser-grid">
        {ADD_KNOWLEDGE_TILES.map((tile) => (
          <ChooserTile key={tile.type} {...tile} onPick={onPick} />
        ))}
      </div>
    </Modal>
  );
}

<div class="ab-pane-form">
  <h2>Contact Transfer</h2>

  <label>Handovers <b>Total 3 · 2 active</b></label>
  <p>Drag to reorder — top fires first.</p>

  <div class="ab-handover-list">
    <div class="ab-handover-card" tabindex="0">
      <span class="ab-handover-handle"><svg>…</svg></span>
      <span class="ab-handover-glyph is-email"><svg>…</svg></span>
      <div class="ab-handover-body">
        <span class="ab-handover-name">Notify Sales — New Tyrnell Lead</span>
        <span class="ab-handover-meta">
          <span class="ab-handover-trigger is-goal">Goal · Lead Captured</span>
          <span>jay@magicblocks.ai · +2 more</span>
          <span>Transcript on</span>
        </span>
      </div>
      <span class="ab-handover-status">
        <span class="ab-handover-status-dot"></span> Active
      </span>
      <button class="ab-handover-menu">…</button>
    </div>
    <!-- …more handover cards — HubSpot deal-push, internal webhook…  -->
  </div>

  <button class="ab-add-resource">+ New handover</button>
</div>

/* Each card: handle / 40px glyph / body / status / menu.
   Glyph fill colour family per destination type:
     .is-email     blue   #2D6FE3
     .is-hubspot   orange #E15B3D
     .is-webhook   purple #6F4AD9
     .is-zapier    red    #E04400
     .is-highlevel green  #0F8062
   Trigger chip: .is-goal green, default neutral.
   Sortable contract: same .is-dragging / .is-drop-before /
   .is-drop-after as fact cards / rule cards / resource cards. */

import {
  SortableList,
  Button,
  MailIcon,
  GlobeIcon,
} from "@magicblocksai/ui";

const DESTINATION_TYPES = {
  email:     { tone: 'blue',   icon: MailIcon,         label: 'Email' },
  hubspot:   { tone: 'orange', icon: HubspotMarkIcon,  label: 'HubSpot' },
  webhook:   { tone: 'purple', icon: WebhookIcon,      label: 'Webhook' },
  zapier:    { tone: 'red',    icon: ZapierIcon,       label: 'Zapier' },
  highlevel: { tone: 'green',  icon: HighLevelIcon,    label: 'HighLevel' },
};

export function HandoversList({ handovers, onReorder, onEdit, onNew }) {
  return (
    <Field label={`Handovers (${handovers.length} · ${activeCount} active)`}>
      <SortableList items={handovers} onReorder={onReorder}
                    className="ab-handover-list">
        {(h) => <HandoverCard handover={h} onEdit={() => onEdit(h)} />}
      </SortableList>
      <Button variant="ghost-dashed" onClick={onNew}>+ New handover</Button>
    </Field>
  );
}

<div class="ab-dialog-overlay" role="dialog">
  <div class="ab-dialog">
    <header class="ab-dialog-head">Create Handover</header>

    <div class="ab-dialog-body">
      <!-- Shared trigger config -->
      <div class="ab-dialog-row-2">
        <Field label="Choose when to transfer">Goal | Session End</Field>
        <Field label="Select from Goal">Lead Captured</Field>
      </div>
      <Field label="Min user messages">1</Field>

      <!-- Destination tabs with .is-configured dot indicator -->
      <nav class="ab-dest-tabs">
        <button class="ab-dest-tab is-email is-configured">Email</button>
        <button class="ab-dest-tab is-highlevel">HighLevel</button>
        <button class="ab-dest-tab is-hubspot is-active is-configured">HubSpot</button>
        <button class="ab-dest-tab is-zapier">Zapier</button>
        <button class="ab-dest-tab is-webhook is-configured">Webhook</button>
      </nav>

      <!-- HubSpot config -->
      <div class="ab-warning-banner">Contactable-session gate…</div>
      <label>Active toggle</label>
      <Field label="Pick connected HubSpot account">…</Field>
      <label>Enable deals creation toggle</label>
      <Field label="Deal name">Tyrnell wine lead — {{user.name}}</Field>
      <div class="ab-dialog-row-2">
        <Field label="Pipeline">Sales</Field>
        <Field label="Deal stage">Qualified Lead</Field>
      </div>

      <!-- Two-column: mapping ← → payload preview -->
      <div class="ab-mapper-split">
        <section class="ab-mapper-side">
          <div>Fields mapping</div>
          <div class="ab-mapper-rows">
            <!-- field-mapper row: source select → target select × remove -->
          </div>
        </section>
        <section>
          <div>Payload preview</div>
          <div class="ab-payload-preview">
            <div class="ab-payload-row">
              <span class="ab-payload-key">phone</span>
              <span class="ab-payload-val">"+61 480 022 801"</span>
            </div>
            <!-- …more rows… -->
          </div>
        </section>
      </div>
    </div>

    <footer class="ab-dialog-foot">
      <button>Cancel</button>
      <button class="is-primary">Create</button>
    </footer>
  </div>
</div>

/* Destination tabs are a horizontal pill row with an active state
   that uses .is-active + per-type colour applied to the glyph. The
   .is-configured class adds a small green dot in the top-right of
   the tab to communicate "this destination has a config saved" —
   so operators can flip between tabs and see at a glance which
   have data without having to open each one.

   The .ab-mapper-split is a 2-col grid (1fr / 1fr) that pairs the
   FieldMapper rows with the live JSON preview. The preview uses
   .ab-payload-row (mono key/value pairs with the value tinted to
   the kit's accent) so the payload reads as "code-like" without
   needing a full CodeBlock primitive. */

import {
  Modal,
  Tabs,
  Select,
  Input,
  Switch,
  Button,
  Alert,
  FieldMapper,
} from "@magicblocksai/ui";  // FieldMapper ships in kit chapter 18.3

export function CreateHandoverDialog({ open, onClose, onCreate }) {
  const [dest, setDest] = useState('hubspot');
  const [draft, setDraft] = useState(INITIAL);
  return (
    <Modal open={open} onOpenChange={onClose} title="Create Handover">
      {/* Shared trigger config */}
      <div className="ab-dialog-row-2">
        <Field label="Choose when to transfer">
          <Select value={draft.trigger} options={['Goal', 'Session End']} />
        </Field>
        {draft.trigger === 'Goal' && (
          <Field label="Select from Goal">
            <Select value={draft.goalId} options={goals} />
          </Field>
        )}
      </div>

      {/* Destination-type tabs */}
      <Tabs value={dest} onValueChange={setDest} items={[
        { id: 'email',     label: 'Email',     configured: draft.email.set },
        { id: 'highlevel', label: 'HighLevel', configured: draft.hl.set },
        { id: 'hubspot',   label: 'HubSpot',   configured: draft.hs.set },
        { id: 'zapier',    label: 'Zapier',    configured: draft.zap.set },
        { id: 'webhook',   label: 'Webhook',   configured: draft.hook.set },
      ]} />

      {dest === 'hubspot' && <HubSpotConfig draft={draft.hs} onChange={…} />}
      {/* …per-destination panels…  */}

      <Modal.Foot>
        <Button onClick={onClose}>Cancel</Button>
        <Button tone="accent" onClick={() => onCreate(draft)}>Create</Button>
      </Modal.Foot>
    </Modal>
  );
}

function HubSpotConfig({ draft, onChange }) {
  return (
    <>
      <Alert tone="warning">Contactable-session gate…</Alert>
      <Switch checked={draft.active} label="Active" />
      <Field label="Pick connected HubSpot account *">
        <Select value={draft.accountId} options={hubspotAccounts} />
      </Field>
      <Switch checked={draft.dealsCreation} label="Enable deals creation" />
      {draft.dealsCreation && (
        <>
          <Field label="Deal name *">
            <Input value={draft.dealName} />
          </Field>
          <div className="ab-dialog-row-2">
            <Field label="Pipeline *">
              <Select value={draft.pipelineId} options={pipelines} />
            </Field>
            <Field label="Deal stage *">
              <Select value={draft.stageId} options={stages} />
            </Field>
          </div>
        </>
      )}
      <div className="ab-mapper-split">
        <FieldMapper                              {/* kit 18.3 */}
          left={magicblocksFields}
          right={hubspotFields}
          value={draft.mappings}
          onChange={…} />
        <PayloadPreview mappings={draft.mappings} />
      </div>
    </>
  );
}

<div class="ab-pane-form">
  <h2>Channels</h2>

  <!-- Omnichannel summary banner — top -->
  <div class="ab-omnichannel-banner">
    <div>
      <div class="ab-omnichannel-headline">Charlie is reachable on <em>4 of 9 channels</em></div>
      <div class="ab-omnichannel-sub">2,341 conversations across all channels this month…</div>
    </div>
    <div class="ab-omnichannel-strip">
      <span class="ab-omnichannel-chip is-on"><svg>…web chat</svg></span>
      <span class="ab-omnichannel-chip is-on"><svg>…SMS</svg></span>
      <!-- …7 more chips… -->
    </div>
  </div>

  <!-- Channel rows -->
  <div class="ab-channel-list">
    <div class="ab-channel-row is-on">
      <div class="ab-channel-head">
        <span class="ab-channel-glyph is-web"><svg>…</svg></span>
        <div class="ab-channel-body">
          <span class="ab-channel-name">Web Chat <span class="ab-channel-name-meta">Live</span></span>
          <span class="ab-channel-sub">Embedded chat widget…</span>
        </span>
        <span class="ab-channel-stats"><strong>1,589</strong> conv / mo</span>
        <button class="ab-channel-toggle" aria-pressed="true"></button>
      </div>
      <div class="ab-channel-config">
        <div class="ab-channel-config-grid">
          <!-- 2x2 grid of label + value pairs -->
          <div class="ab-channel-config-field">
            <span class="ab-channel-config-label">Live on</span>
            <span class="ab-channel-config-value"><code>tyrnells.com.au</code></span>
          </div>
          <!-- …more fields… -->
          <div class="ab-channel-config-foot">
            <span>Last conversation 2m ago</span>
            <button>Test in browser</button>
            <button>Copy embed snippet</button>
          </div>
        </div>
      </div>
    </div>

    <!-- …more channel rows… off ones collapse to .ab-channel-head only -->
    <div class="ab-channel-row">
      <div class="ab-channel-head">
        <span class="ab-channel-glyph is-whatsapp"><svg>…</svg></span>
        <div class="ab-channel-body">
          <span class="ab-channel-name">WhatsApp <span class="ab-channel-name-meta">Off</span></span>
          <span class="ab-channel-sub">WhatsApp Business API…</span>
        </span>
        <span class="ab-channel-stats"></span>
        <button class="ab-channel-toggle" aria-pressed="false"></button>
      </div>
    </div>
  </div>
</div>

/* "Just turn it on" omnichannel pattern. Per-channel colour family
   on the glyph: Web Chat = accent (pink), SMS = green, WhatsApp =
   brighter green, Email = blue, Form = purple, Voice = amber,
   Instagram = pink-red, Messenger = blue. Same colours show on the
   .ab-omnichannel-chip summary strip + on the channel row glyph so
   one mental map carries across.

   .ab-channel-row.is-on    accent-tinted bg + visible .ab-channel-config
   .ab-channel-config       slot for per-channel config (2x2 grid)
   .ab-channel-toggle       48x26 pill, success-green when on,
                            "the toggle is the primary action" sizing.

   The summary banner up top is the omnichannel framing device —
   "your agent is reachable on N channels" reads first, settings
   follow. */

import {
  Switch,
  Button,
  MessageSquareIcon,
  SmartphoneIcon,
  MailIcon,
  PhoneIcon,
} from "@magicblocksai/ui";

const CHANNEL_TYPES = [
  { id: 'web',       label: 'Web Chat',       tone: 'accent',  icon: MessageSquareIcon },
  { id: 'sms',       label: 'SMS',            tone: 'green',   icon: SmartphoneIcon },
  { id: 'email',     label: 'Email',          tone: 'blue',    icon: MailIcon },
  { id: 'form',      label: 'Form',           tone: 'purple',  icon: FormIcon },
  { id: 'whatsapp',  label: 'WhatsApp',       tone: 'bright-green' },
  { id: 'voice',     label: 'Voice',          tone: 'amber',   icon: PhoneIcon },
  { id: 'api',       label: 'API / Webhook',  tone: 'neutral' },
  { id: 'instagram', label: 'Instagram DM',   tone: 'pink' },
  { id: 'messenger', label: 'Messenger',      tone: 'blue' },
];

export function ChannelsPage({ agent, channels, onToggle }) {
  return (
    <div className="ab-pane-form">
      <OmnichannelBanner agent={agent} channels={channels} />

      <div className="ab-channel-list">
        {CHANNEL_TYPES.map((type) => {
          const channel = channels[type.id];
          return (
            <ChannelRow
              key={type.id}
              type={type}
              channel={channel}
              onToggle={(on) => onToggle(type.id, on)}
            >
              {channel.on && <ChannelConfig type={type} channel={channel} />}
            </ChannelRow>
          );
        })}
      </div>
    </div>
  );
}

// Per-channel config component picks the right field set:
// Web → domain + appearance + start block + open behaviour
// SMS → number + provider + start block + TCPA quiet hours
// Email → inbox address + forwarding aliases + thread mode + auto-reply latency
// Form → connected forms + trigger + start block + field-to-fact mapping
// Voice → number + voice persona + max call duration + handoff number
// (etc.)

<div class="ab-pane-form">
  <h2>Design & Go Live</h2>

  <!-- 1) Preflight checklist — 5-up grid -->
  <div class="ab-publish-preflight">
    <div class="ab-publish-check is-ok">
      <span class="ab-publish-check-head">✓ Persona</span>
      <span class="ab-publish-check-value">Set</span>
      <span class="ab-publish-check-sub">Charlie · v1 · Creativity 0.3</span>
    </div>
    <!-- …4 more checks: Key Facts, Journey, Guardrails, Channels -->
  </div>

  <!-- 2) Config + embed grid -->
  <div class="ab-publish-grid">
    <div class="ab-publish-card">
      <h3>Where it lives</h3>
      <!-- Appearance picker (library-loaded — same .ab-set-picker
           shape as Persona / Guardrails / Knowledge) -->
      <!-- Widget style 2-up cards (Standard / Sidebar) -->
      <!-- Start block select -->
      <!-- Restrict domains list -->
    </div>

    <div class="ab-publish-card">
      <h3>Code to embed</h3>
      <div class="ab-code-block">
        <button class="ab-code-block-copy">Copy</button>
        <script id="magicblocks-chatbot-script">
          window.MAGICBLOCKS = { workspace: 'ws_…', experience: 'e_…' };
          // …loader
        </script>
      </div>
      <!-- Live preview — mini widget pinned bottom-right -->
      <div class="ab-widget-preview">
        <div class="ab-widget-preview-bubble">Hi! Looking for a wine…</div>
        <span class="ab-widget-preview-launcher"><svg></svg></span>
      </div>
    </div>
  </div>

  <!-- 3) Publish bar -->
  <div class="ab-publish-bar">
    <span>Editing <b>v4 draft</b></span>
    <span>● All preflight green · v3 currently live</span>
    <button class="ab-publish-bar-secondary">Save draft</button>
    <button class="ab-publish-bar-primary">⤴ Publish v4</button>
  </div>
</div>

/* The preflight is the design win on this page. Each check is one
   card with 4 visual states:
     .is-ok      success-soft bg + success-text head — green check
     .is-warn    warning-soft bg + warning-text head — yellow !
     .is-block   accent-soft bg + accent head        — pink × ("can't publish")
     (neutral)   paper bg + faint head               — not configured

   Two-column .ab-publish-grid for the config / embed pairing.
   .ab-code-block uses ink background with paper-on-ink syntax colours
   (gold keywords, mint strings, faint comments) — matches the kit's
   codeblk family.

   .ab-widget-preview is a hatched-bg "page" with the launcher bubble
   + proactive-message bubble pinned bottom-right, mirroring the
   actual widget chrome from chapter 17.

   The publish bar sits below the grid as a sticky-feeling action
   row: version meta + status + Save-draft + big green Publish CTA. */

import {
  Button,
  Select,
  Input,
  CodeBlock,
  CopyButton,
  CheckIcon,
  RocketIcon,
} from "@magicblocksai/ui";

const PREFLIGHT_CHECKS = [
  { id: 'persona',    label: 'Persona',    check: agent => !!agent.personaId },
  { id: 'facts',      label: 'Key Facts',  check: agent => agent.facts.length > 0 },
  { id: 'journey',    label: 'Journey',    check: agent => agent.blocks.length > 0 },
  { id: 'guardrails', label: 'Guardrails', check: agent => !!agent.guardrailSetId },
  { id: 'channels',   label: 'Channels',   check: agent => activeChannels(agent).length > 0 },
];

export function DesignGoLivePage({ agent, onPublish, onSaveDraft }) {
  const checks = PREFLIGHT_CHECKS.map(c => ({ ...c, status: c.check(agent) ? 'ok' : 'block' }));
  const canPublish = checks.every(c => c.status === 'ok');
  const embed = useMemo(() => buildEmbedSnippet(agent), [agent]);

  return (
    <div className="ab-pane-form">
      <PreflightStrip checks={checks} />

      <div className="ab-publish-grid">
        <Card title="Where it lives">
          <AppearancePicker value={agent.appearanceId} />
          <WidgetStyleCards value={agent.widgetStyle} />
          <Select value={agent.startBlockId} />
          <DomainList domains={agent.allowedDomains} />
        </Card>

        <Card title="Code to embed">
          <CodeBlock language="html" trailing={<CopyButton value={embed} />}>
            {embed}
          </CodeBlock>
          <WidgetPreview agent={agent} />
        </Card>
      </div>

      <PublishBar
        version={agent.version}
        liveVersion={agent.liveVersion}
        canPublish={canPublish}
        onPublish={onPublish}
        onSaveDraft={onSaveDraft} />
    </div>
  );
}

<header class="ab-builder-head">
  <div class="ab-builder-head-title">
    <button type="button" class="ab-builder-head-back" aria-label="Back to agents">‹</button>
    <span class="ab-builder-head-name">Acme Assistant<span class="chip">website</span><span class="chip chip-green">Live</span></span>
    <span class="ab-builder-head-meta"><span class="ab-version">Draft · working copy ▾</span></span>
  </div>
  <div class="ab-builder-head-actions">
    <button type="button" class="ab-h-pill">View conversations</button>
    <button type="button" class="ab-h-pill">Save</button>
    <button type="button" class="ab-h-pill is-primary">Publish</button>
  </div>
</header>
<nav class="tabs tabs-link ab-frame-tabs" aria-label="Agent sections">
  <a class="tab" href="#">Overview</a>
  <a class="tab active" aria-current="page" href="#">Journey</a>
  <a class="tab" href="#">Knowledge</a>
  <a class="tab" href="#">Channels</a>
  <a class="tab" href="#">Settings</a>
</nav>

/* Ships in @magicblocksai/css (components/_shared.css, @surface: operator).
   .ab-frame-tabs adds the paper background + hairline under the head. */

// No wiring needed — LinkTabs drives active state via the consumer's router
// (NavLink applies .active + aria-current="page" automatically).

import { AgentBuilderHead, LinkTabs } from '@magicblocksai/ui';

<>
  <AgentBuilderHead
    name="Acme Assistant"
    typeChip={<><span className="chip">website</span><span className="chip chip-green">Live</span></>}
    version="Draft · working copy ▾"
    onBack={() => nav('/agents')}
    actions={<>
      <button type="button" className="ab-h-pill">View conversations</button>
      <button type="button" className="ab-h-pill">Save</button>
      <button type="button" className="ab-h-pill is-primary">Publish</button>
    </>}
  />
  <LinkTabs
    ariaLabel="Agent sections"
    linkAs={NavLink}
    className="ab-frame-tabs"
    items={[
      { to: '?tab=overview', label: 'Overview' },
      { to: '?tab=journey',  label: 'Journey' },
      { to: '?tab=knowledge', label: 'Knowledge' },
      { to: '?tab=channels', label: 'Channels' },
      { to: '?tab=settings', label: 'Settings' },
    ]}
  />
</>

<span class="chip chip-blue">Used by 4 agents</span>
<span class="chip chip-blue">Used by 1 agent</span>
<span class="chip">Not used yet</span>

/* Ships in @magicblocksai/css — reuses .chip + tone variants; no new CSS. */

// No wiring — the label and tone derive from the count.

import { UsedByChip } from '@magicblocksai/ui';

<UsedByChip count={4} />
<UsedByChip count={1} />
<UsedByChip count={0} />

<span class="chip chip-amber">Setup 5 of 6 — connect a phone number</span>
<span class="chip chip-green">Setup complete</span>

/* Ships in @magicblocksai/css — reuses .chip + tone variants; no new CSS. */

// No wiring — the label and tone derive from done / total.

import { SetupProgressChip } from '@magicblocksai/ui';

<SetupProgressChip done={5} total={6} nextStep="connect a phone number" />
<SetupProgressChip done={6} total={6} />

<div class="golive-card">
  <div class="golive-head"><span class="golive-glyph">…rocket svg…</span><span class="golive-title">Where this agent talks</span></div>
  <ul class="golive-channels">
    <li class="golive-channel"><span class="golive-channel-icon">…</span><span class="golive-channel-name">Website widget</span><span class="golive-channel-state is-live">Live on crefco.com</span></li>
    <li class="golive-channel"><span class="golive-channel-icon">…</span><span class="golive-channel-name">Phone &amp; SMS</span><span class="golive-channel-state">Not connected yet</span></li>
  </ul>
  <div class="golive-action"><button class="btn btn-secondary btn-sm">Open Channels</button></div>
</div>

<div class="recent-changes">
  <span class="recent-changes-title">Recent changes</span>
  <ul class="recent-changes-list">
    <li class="recent-change"><span class="recent-change-glyph">…clock svg…</span><span class="recent-change-text">You added the key fact <code class="mono">budget</code> to Discovery</span><span class="recent-change-when">yesterday</span></li>
    <li class="recent-change"><span class="recent-change-glyph is-sage">…wand svg…</span><span class="recent-change-text">Sage tightened the Greeting job wording</span><span class="recent-change-when">2 days ago</span><button type="button" class="recent-change-undo">Undo</button></li>
  </ul>
</div>

/* Ships in @magicblocksai/css (components/_shared.css, @surface: operator) —
   .golive-* and .recent-change* under the 18.9 Agent overview home block. */

// No wiring needed — Undo is a real button; pass onUndo per change.
// Sage may only edit the working copy; publishing stays a human action.

import { GoLiveCard, RecentChangesList, Button, GlobeIcon, PhoneIcon } from '@magicblocksai/ui';

<GoLiveCard
  channels={[
    { icon: <GlobeIcon />, name: 'Website widget', state: 'Live on crefco.com', live: true },
    { icon: <PhoneIcon />, name: 'Phone & SMS', state: 'Not connected yet' },
  ]}
  action={<Button size="sm" variant="secondary">Open Channels</Button>}
/>

<RecentChangesList
  changes={[
    { text: <>You added the key fact <code className="mono">budget</code> to Discovery</>, when: 'yesterday' },
    { text: 'Sage tightened the Greeting job wording', when: '2 days ago', by: 'sage', onUndo: undo },
  ]}
/>

<nav class="tabs tabs-link" aria-label="Agents HQ">
  <a class="tab" href="#">All agents</a>
  <a class="tab active" aria-current="page" href="#">Personas</a>
  <a class="tab" href="#">Snippets</a>
  <a class="tab" href="#">Forms</a>
  <a class="tab" href="#">Goals</a>
</nav>
<div class="data-table">
  …header row: Name · Description · Used by · Version · Updated…
  …rows with <span class="chip chip-blue">Used by 4 agents</span> usage cells…
</div>

/* Ships in @magicblocksai/css — .tabs, .data-table and .chip are package classes. */

// No wiring — LinkTabs is router-driven; the table is the shipped DataTable.

import { LinkTabs, DataTable, UsedByChip } from '@magicblocksai/ui';

<LinkTabs ariaLabel="Agents HQ" linkAs={NavLink} items={[
  { to: '/agents', label: 'All agents' },
  { to: '/agents/personas', label: 'Personas' },
  { to: '/agents/snippets', label: 'Snippets' },
  { to: '/agents/forms', label: 'Forms' },
  { to: '/agents/goals', label: 'Goals' },
]} />
<DataTable
  rowId={(p) => p.id}
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'description', label: 'Description' },
    { key: 'usedBy', label: 'Used by', width: '160px', render: (p) => <UsedByChip count={p.usedBy} /> },
    { key: 'version', label: 'Version', width: '80px' },
    { key: 'updated', label: 'Updated', width: '100px' },
  ]}
  rows={personas}
/>

<div class="data-table">
  …header row: Name · Token · Variants · Used by · Updated…
  …token cells render as <code class="mono">{{booking_line}}</code>…
</div>

/* Ships in @magicblocksai/css — no new classes; tokens use .mono. */

// Variants rotate at runtime — the agent picks one per session, so the
// same snippet never reads identically across a campaign.

import { DataTable, UsedByChip } from '@magicblocksai/ui';

<DataTable
  rowId={(s) => s.id}
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'token', label: 'Token', width: '190px', render: (s) => <code className="mono">{'{{' + s.token + '}}'}</code> },
    { key: 'variants', label: 'Variants', width: '100px' },
    { key: 'usedBy', label: 'Used by', width: '160px', render: (s) => <UsedByChip count={s.usedBy} /> },
    { key: 'updated', label: 'Updated', width: '100px' },
  ]}
  rows={snippets}
/>

<div class="empty">
  <h3 class="empty-title">No snippets yet</h3>
  <p class="empty-lede">Write a line once, reuse it anywhere the {+} picker appears — jobs, messages, the persona role, priority knowledge.</p>
  <div class="empty-actions"><button type="button" class="btn btn-primary btn-sm">+ New snippet</button></div>
</div>

/* Ships in @magicblocksai/css — the shipped .empty block. */

// No wiring needed.

import { EmptyState, Button } from '@magicblocksai/ui';

<EmptyState
  title="No snippets yet"
  description="Write a line once, reuse it anywhere the {+} picker appears — jobs, messages, the persona role, priority knowledge."
  primaryAction={<Button size="sm">+ New snippet</Button>}
/>

<!-- Blocks (RailBlockItem) — start pill on the entry block, hint on the empty one -->
<div class="ab-rail-block is-active">…<span class="ab-rail-block-name">Greeting</span><span class="ab-rail-block-start">Start</span>…</div>
<div class="ab-rail-block">…<span class="ab-rail-block-name">Refinance</span><span class="ab-rail-block-hint">0 jobs · needs work</span>…</div>
<!-- Then Add block · Block library, a divider, and the pinned journey rows -->
<button class="ab-rail-item">…Key facts<span class="ab-rail-count">7</span></button>
<button class="ab-rail-item">…Anytime actions<span class="ab-rail-count">24</span></button>

/* Ships in @magicblocksai/css — .ab-rail-block-start / .ab-rail-block-hint are new in 4.11.0. */

// Drag-reorder comes from wrapping the blocks in the shipped SortableList.

import { BuilderRail, RailBlockItem, RailItem, SortableList } from '@magicblocksai/ui';

<SortableList items={blocks} rowId={(b) => b.id} onReorder={reorder}
  renderRow={(b) => (
    <RailBlockItem
      name={b.name}
      start={b.id === startBlockId}
      active={b.id === currentId}
      keyFactCount={b.keyFacts.length}
      actionCount={b.actions.length}
      hint={b.jobs.length === 0 ? '0 jobs · needs work' : undefined}
      onSelect={() => select(b.id)}
    />
  )} />
<RailItem icon={<PlusIcon />}>Add block</RailItem>
<RailItem icon={<BookIcon />}>Block library</RailItem>
<RailItem icon={<ChecklistIcon />} count={7}>Key facts</RailItem>
<RailItem icon={<BoltIcon />} count={24}>Anytime actions</RailItem>

<!-- The shipped JourneyGraph SVG; dashed edges carry data-variant="dashed" -->
<div class="journey-graph">
  <svg class="journey-graph-svg" viewBox="0 0 600 300">
    <line class="journey-graph-edge" …/>
    <line class="journey-graph-edge" data-variant="dashed" …/>
    <g class="journey-node">…</g>
  </svg>
</div>

/* .journey-graph-edge[data-variant="dashed"] { stroke-dasharray: 5 4; opacity: .65; } — new in 4.11.0. */

// Toggle the anytime layer by filtering edges on variant before passing them.

import { JourneyGraph } from '@magicblocksai/ui';

<JourneyGraph
  viewBox="0 0 600 300"
  nodes={blocks.map((b) => ({ id: b.id, kind: 'tool', label: b.name, x: b.x, y: b.y }))}
  edges={[
    { from: 'greeting', to: 'discovery', label: 'facts collected', title: 'Once every key fact here is collected' },
    { from: 'opener', to: 'handoff', label: 'wants a human', title: 'Anytime action — from any block', variant: 'dashed' },
  ]}
  selectedNodeId={selected}
  onSelectedNodeChange={setSelected}
/>

<div class="ab-leads" tabindex="0">
  <div class="ab-leads-row">
    <span class="ab-leads-label">Leads to</span>
    <span class="ab-leads-target">→ Discovery</span>
    <span class="ab-leads-rule">once every key fact here is collected</span>
    <span class="ab-leads-action"><button class="ab-h-pill">Edit transitions →</button></span>
  </div>
  <div class="ab-leads-reached"><span class="ab-leads-label">Reached from</span><span class="ab-leads-rule">2 anytime actions</span></div>
</div>

/* .ab-leads-reached is display:none until :hover / :focus-visible / :focus-within. */

// No wiring — the reveal is CSS-only; the strip is focusable when reachedFrom is set.

import { LeadsToStrip } from '@magicblocksai/ui';

<LeadsToStrip
  to="Discovery"
  rule="once every key fact here is collected"
  reachedFrom="2 anytime actions"
  action={<button type="button" className="ab-h-pill">Edit transitions →</button>}
/>
<LeadsToStrip />

<span class="kf-line">
  <span class="kf-line-asked">Asked in Greeting</span>
  <span class="kf-line-sep">·</span>
  <span class="kf-line-listened">listened for everywhere</span>
</span>

/* .kf-line-when wraps to its own line in the info tone. */

// No wiring — the sentence derives from askedIn / listensEverywhere.

import { KeyFactBehaviourLine } from '@magicblocksai/ui';

<KeyFactBehaviourLine askedIn={['Greeting']} listensEverywhere />
<KeyFactBehaviourLine listensEverywhere />
<KeyFactBehaviourLine askedIn={['Discovery']}
  onlyAskedWhen={<><code className="mono">loan_intent</code> is Purchase</>} />

<aside class="action-list" aria-label="Anytime actions list">
  <div class="action-list-head"><span>Anytime actions <span class="action-list-count">24</span></span>…</div>
  <p>Rules that watch every block — they can move the conversation from anywhere.</p>
  <button class="action-row has-meta">…</button>
</aside>

/* Ships in @magicblocksai/css — the 18.12 .action-list / .action-row classes, retitled. */

// Same two-pane workbench + three-step wizard as 18.12 — only the framing changes.

import { ActionList } from '@magicblocksai/ui';

<ActionList
  title="Anytime actions"
  description="Rules that watch every block — they can move the conversation from anywhere."
  items={anytimeActions} /* { id, name, meta?, scope? } */
  selectedId={selected}
  onSelect={setSelected}
  onAddAction={addAnytimeAction}
/>

<div class="template-card is-selected" role="button" tabindex="0">
  <div class="template-card-head">
    <span class="template-card-title">Mortgage lead qualifier</span>
    <span class="template-card-badge">MagicBlocks</span>
  </div>
  <p class="template-card-desc">Qualifies, answers objections, books a call.</p>
  <div class="template-card-shape"><span class="template-card-block">Greeting<span class="template-card-arrow">→</span></span>…</div>
  <span class="template-card-meta">6 key facts · 2 goals</span>
</div>
<div class="template-card is-blank" role="button" tabindex="0">…Start blank…</div>

/* Ships in @magicblocksai/css (@surface: operator) — .template-card + is-selected /
   is-blank, head / badge / desc / shape / block / arrow / meta. */

// Selection is consumer state; Enter / Space select like any kit row.

import { TemplateCard } from '@magicblocksai/ui';

<TemplateCard
  title="Mortgage lead qualifier"
  description="Qualifies, answers objections, books a call."
  blocks={['Greeting', 'Qualify', 'Pitch', 'Booking']}
  meta="6 key facts · 2 goals"
  badge="MagicBlocks"
  selected
  onSelect={pick}
/>
<TemplateCard title="Start blank" blank onSelect={pickBlank} />

<div class="template-gallery" aria-label="Agent templates">
  <div class="template-card is-selected">…</div>
  <div class="template-card">…</div>
  <div class="template-card">…</div>
  <div class="template-card is-blank">…Start blank…</div>
</div>

/* .template-gallery — repeat(auto-fill, minmax(220px, 1fr)) grid. */

// Copy-on-create: confirming clones the workflow; the template never updates.

import { TemplateGallery, TemplateCard } from '@magicblocksai/ui';

<TemplateGallery aria-label="Agent templates">
  {templates.map((t) => (
    <TemplateCard key={t.id} title={t.title} description={t.pitch}
      blocks={t.blocks} meta={t.meta} badge={t.source}
      selected={t.id === selectedId} onSelect={() => setSelectedId(t.id)} />
  ))}
  <TemplateCard title="Start blank" blank onSelect={startBlank} />
</TemplateGallery>

<div class="block-tpl-list">
  <div class="block-tpl-group">
    <span class="block-tpl-group-label">MagicBlocks blocks</span>
    <div class="block-tpl-row">
      <span class="block-tpl-text"><span class="block-tpl-name">Qualify</span><span class="block-tpl-sum">3 jobs · 3 key facts · transition placeholder</span></span>
      <button class="block-tpl-insert">Insert</button>
    </div>
  </div>
</div>

/* Ships in @magicblocksai/css — .block-tpl-list / -group / -group-label / -row /
   -text / -name / -sum / -insert. */

// Insert copies the block — nothing is shared by reference, so editing an
// inserted block never haunts another journey.

import { BlockLibraryDrawer } from '@magicblocksai/ui';

<BlockLibraryDrawer
  open={open}
  onOpenChange={setOpen}
  templates={[
    { id: 'qualify', name: 'Qualify', summary: '3 jobs · 3 key facts · transition placeholder' },
    { id: 'warm-close', name: 'Warm close', summary: 'Saved from Acme Assistant', source: 'yours' },
  ]}
  onInsert={(id) => insertBlock(id)}
/>

<!-- Three .ab-ov-card sections + the greyed unavailable channel -->
<section class="ab-ov-card">…Website widget…</section>
<section class="ab-ov-card">…Phone & SMS…</section>
<section class="ab-ov-card">…Hand off to your team…</section>
<section class="ab-ov-card" style="opacity:.55">…Email — Not available yet…</section>

/* Reuses the shipped .ab-ov-card chrome; no new classes. */

// Section editors are the existing 18.15–18.17 surfaces, mounted per section.

// Composition — the tab stacks the existing editors:
// WidgetStyleEditor + WidgetEmbedSnippet (ch 25), the numbers list (18.16),
// and the handover editor with FieldMapper + PayloadPreview (18.15).

<!-- Guardrails first, then defaults, about, danger zone -->
<section class="ab-ov-card">…Guardrails…</section>
<section class="ab-ov-card">…Conversation defaults…</section>
<section class="ab-ov-card">…About…</section>
<section class="danger-zone-block">…Pause · Duplicate · Delete…</section>

/* Reuses .ab-ov-card + the shipped .danger-zone-block family (15.15); no new classes. */

// Pause/Delete confirm before acting; Duplicate creates an unpublished draft.

import { DangerZoneBlock, DangerZoneAction, Button } from '@magicblocksai/ui';

<DangerZoneBlock title="Danger zone">
  <DangerZoneAction title="Pause agent"
    description="Stops new conversations; live ones finish gracefully."
    action={<Button variant="secondary">Pause</Button>} />
  <DangerZoneAction title="Duplicate agent"
    description="Copies everything into a new unpublished draft."
    action={<Button variant="secondary">Duplicate</Button>} />
  <DangerZoneAction title="Delete agent"
    description="Removes the agent and its draft. Sessions are kept."
    action={<Button variant="danger">Delete</Button>} />
</DangerZoneBlock>