@actioneer/ads 1.0.9 → 1.0.10

package/examples/campaigns-screen.tsx

@@ -4,19 +4,25 @@
  * Follows principles `collection-screens`, `record-detail-panels`,
  * `status-language` and `tabs-search-opposed` (see `get_principles`):
  *
- * - One white panel: BodyPageHeader (title + one primary action), then the
- *   control row — Tabs with counts leading, SearchDisclosure then Filters as
+ * - The app window (rounded-window, WG4 hairline, shadow-window on the WG3
+ *   backdrop) holds one white page: BodyPageHeader (a 64px bar with the title,
+ *   one primary action and a full-width hairline), then the control row — Tabs with counts leading, SearchDisclosure then Filters as
  *   icon triggers trailing — then the Table.
  * - The rows fill the panel: the page size is derived from the height that is
  *   left, so Pagination always sits on the panel's bottom edge.
  * - Row checkboxes appear on hover (the header checkbox is always visible).
  * - Clicking a row opens its detail panel beside the list and marks the row
- *   with `isActive` — no radio, no modal.
- * - The detail panel: kicker, title, status Chip + context under the title,
- *   then Performance (stat cards + chart card) and Details (label–value rows).
- * - New campaign opens as a Modal over the list (never a separate screen): one
- *   scrolling form — Campaign name, Caller numbers, Audience — with Cancel and
- *   Create campaign together in the footer.
+ *   with `isActive` — no radio, no modal. The panel is attached to the page:
+ *   flush beside the list, split off by one full-height hairline, no gap.
+ * - The detail panel: a title-only 64px header (title and close centred on
+ *   one row), then Performance (stat cards + chart card) and Details
+ *   (label–value rows that start with the status Chip and the finish date).
+ * - New campaign opens as a fixed-height Modal over the list (never a separate
+ *   screen): one scrolling form — Campaign name, Caller numbers, Audience —
+ *   with Cancel and Create campaign together in the footer (principle
+ *   `create-modals`). Optional guidance lives in a Field `info` icon, the
+ *   source switch sits in the Field `actions` slot, uploads use the inline
+ *   FileDropzone, and picking one saved record is a single-select Table.
  *
  * In a full app this screen sits inside the shell, next to the Sidebar
  * (put the customer's logo in its brand slot with SidebarWorkspace).
@@ -24,16 +30,19 @@
  */
 import * as React from "react";
 import {
-  Avatar,
   BodyPageHeader,
   Button,
   Checkbox,
   Chip,
   Drawer,
+  Field,
   DrawerBody,
   DrawerFooter,
   DrawerHeader,
+  DrawerSection,
   DrawerTitle,
+  DetailItem,
+  DetailList,
   FileDropzone,
   Filters,
   InputField,
@@ -44,8 +53,10 @@ import {
   ModalHeader,
   ModalTitle,
   Pagination,
+  Progress,
   SearchDisclosure,
   SegmentedControl,
+  Sparkline,
   Tab,
   TabList,
   Table,
@@ -168,6 +179,10 @@ function findCampaign(id: string | null): CampaignRecord | undefined {
 }
 
 function CampaignCells({ campaign }: { campaign: CampaignRecord }) {
+  // Metric cells (principle `collection-screens`): a rate gets a small meter
+  // before the number; the 7-day trend is a dotless Sparkline.
+  const rate = campaign.connectRate === "—" ? null : Number.parseFloat(campaign.connectRate);
+  const hasCalls = campaign.week.some((value) => value > 0);
   return (
     <>
       <TableCell>{campaign.name}</TableCell>
@@ -175,12 +190,30 @@ function CampaignCells({ campaign }: { campaign: CampaignRecord }) {
         <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
       </TableCell>
       <TableCell align="right" className="tabular-nums">{campaign.leads.toLocaleString("en-IN")}</TableCell>
-      <TableCell>
-        <span className="flex items-center gap-2">
-          <Avatar name={campaign.owner} size="sm" />
-          {campaign.owner}
-        </span>
+      <TableCell align="right">
+        {rate === null ? (
+          <span className="text-on-white-secondary">—</span>
+        ) : (
+          <span className="inline-flex items-center justify-end gap-2.5">
+            <Progress value={rate} size="sm" label={`${campaign.name} connect rate`} className="w-12" />
+            <span className="tabular-nums">{campaign.connectRate}</span>
+          </span>
+        )}
+      </TableCell>
+      <TableCell align="right">
+        {hasCalls ? (
+          <Sparkline
+            data={campaign.week}
+            height={28}
+            dot={false}
+            label={`${campaign.name}: connected calls, last 7 days`}
+            className="ml-auto w-24"
+          />
+        ) : (
+          <span className="text-on-white-secondary">No calls yet</span>
+        )}
       </TableCell>
+      <TableCell>{campaign.owner}</TableCell>
     </>
   );
 }
@@ -188,34 +221,34 @@ function CampaignCells({ campaign }: { campaign: CampaignRecord }) {
 /** Selection-driven detail panel (principle `record-detail-panels`). */
 export function CampaignDetail({ campaign, onClose }: { campaign: CampaignRecord | undefined; onClose: () => void }) {
   return (
-    <Drawer open={Boolean(campaign)} onOpenChange={(open) => !open && onClose()} aria-label="Campaign details">
+    <Drawer
+      open={Boolean(campaign)}
+      onOpenChange={(open) => !open && onClose()}
+      aria-label="Campaign details"
+      // Centre the built-in close button on the 64px title row.
+      className="[&>button[aria-label=Close]]:top-4"
+    >
       {campaign && (
         <>
-          <DrawerHeader>
-            <p className="text-xs uppercase tracking-wide text-secondary">Campaign</p>
-            <DrawerTitle>{campaign.name}</DrawerTitle>
-            {/* Status lives with the title, so it never floats on its own. */}
-            <div className="mt-1 flex items-center gap-2">
-              <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
-              <span className="text-s text-secondary">{campaign.context}</span>
-            </div>
+          {/* Title-only header bar: the title and the close button share one centred row. */}
+          <DrawerHeader className="h-16 justify-center py-0">
+            <DrawerTitle className="truncate">{campaign.name}</DrawerTitle>
           </DrawerHeader>
-          <DrawerBody className="flex flex-col gap-8 overflow-y-auto">
-            <section aria-label="Performance" className="flex flex-col gap-2">
-              <h3 className="mb-1 text-m font-medium text-foreground">Performance</h3>
+          <DrawerBody className="flex flex-col gap-8">
+            <DrawerSection title="Performance">
               <dl className="grid grid-cols-3 gap-2">
                 {[
                   { label: "Leads", value: campaign.leads.toLocaleString("en-IN") },
                   { label: "Connect rate", value: campaign.connectRate },
                   { label: "Booked", value: campaign.booked.toLocaleString("en-IN") },
                 ].map((stat) => (
-                  <div key={stat.label} className="min-w-0 rounded-l border border-tertiary p-3">
+                  <div key={stat.label} className="min-w-0 rounded-card border border-border bg-wg1 p-3">
                     <dt className="truncate text-s text-secondary">{stat.label}</dt>
                     <dd className="mt-0.5 text-xl tabular-nums text-foreground">{stat.value}</dd>
                   </div>
                 ))}
               </dl>
-              <div className="rounded-l border border-tertiary p-4">
+              <div className="rounded-card border border-border p-4">
                 <LineChart
                   title={<span className="text-s font-normal text-secondary">Connected calls · last 7 days</span>}
                   data={campaign.week.map((calls, index) => ({ day: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][index], calls }))}
@@ -227,22 +260,22 @@ export function CampaignDetail({ campaign, onClose }: { campaign: CampaignRecord
                   height={160}
                 />
               </div>
-            </section>
-            <section aria-label="Details" className="flex flex-col gap-1">
-              <h3 className="text-m font-medium text-foreground">Details</h3>
-              <dl>
-                {[
-                  { label: "Owner", value: campaign.owner },
-                  { label: "Started", value: campaign.started },
-                  { label: "Calling windows", value: String(campaign.callingWindows) },
-                ].map((row) => (
-                  <div key={row.label} className="flex min-h-10 items-center justify-between gap-3 border-b border-tertiary last:border-0">
-                    <dt className="text-m text-secondary">{row.label}</dt>
-                    <dd className="text-m text-foreground">{row.value}</dd>
-                  </div>
-                ))}
-              </dl>
-            </section>
+            </DrawerSection>
+            <DrawerSection title="Details">
+              <DetailList>
+                <DetailItem label="Status">
+                  <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
+                </DetailItem>
+                <DetailItem label="Owner">{campaign.owner}</DetailItem>
+                <DetailItem label="Started">{campaign.started}</DetailItem>
+                {campaign.status === "Completed" ? (
+                  <DetailItem label="Finished">{campaign.context.replace(/^Finished /, "")}</DetailItem>
+                ) : (
+                  <DetailItem label="Activity">{campaign.context}</DetailItem>
+                )}
+                <DetailItem label="Calling windows">{campaign.callingWindows}</DetailItem>
+              </DetailList>
+            </DrawerSection>
           </DrawerBody>
           <DrawerFooter>
             <Button variant="outline">Duplicate</Button>
@@ -255,59 +288,79 @@ export function CampaignDetail({ campaign, onClose }: { campaign: CampaignRecord
 }
 
 const SAVED_AUDIENCES = [
-  { id: "0019b431", name: "CSV audience 0019b431", size: 6 },
-  { id: "b190b191", name: "CSV audience b190b191", size: 868 },
-  { id: "5ee46ae6", name: "CSV audience 5ee46ae6", size: 162 },
-  { id: "9dc3d0b1", name: "CSV audience 9dc3d0b1", size: 188 },
+  { id: "0019b431", name: "CSV audience 0019b431", uploaded: "Oct 24", size: 6 },
+  { id: "b190b191", name: "CSV audience b190b191", uploaded: "Oct 21", size: 868 },
+  { id: "5ee46ae6", name: "CSV audience 5ee46ae6", uploaded: "Oct 18", size: 162 },
+  { id: "9dc3d0b1", name: "CSV audience 9dc3d0b1", uploaded: "Oct 12", size: 188 },
 ];
 
-/** Create task launched from the collection: a Modal over the list (principle `minimal-information`). */
+/** Create task launched from the collection: a fixed-height Modal over the list (principle `create-modals`). */
 export function NewCampaignModal({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
   const [name, setName] = React.useState("");
   const [useNumber, setUseNumber] = React.useState(false);
   const [audience, setAudience] = React.useState("csv");
   const [query, setQuery] = React.useState("");
+  const [picked, setPicked] = React.useState<Set<string>>(new Set(["b190b191"]));
   const audiences = SAVED_AUDIENCES.filter((item) => item.name.toLowerCase().includes(query.trim().toLowerCase()));
 
   return (
-    <Modal open={open} onOpenChange={onOpenChange} height="fixed">
+    <Modal open={open} onOpenChange={onOpenChange}>
       <ModalHeader>
         <ModalTitle>New campaign</ModalTitle>
       </ModalHeader>
       <ModalBody className="flex flex-col gap-6">
         <InputField label="Campaign name" value={name} onChange={(event) => setName(event.target.value)} placeholder="First-EMI onboarding" />
-        <div className="flex flex-col gap-2">
-          <p className="text-m font-medium text-foreground">Caller numbers</p>
+
+        {/* Optional guidance goes in the label's info icon, not a helper line. */}
+        <Field
+          label="Caller numbers"
+          info="Optional. Tick none to call from any enabled number. You can change this later, even while the campaign is calling."
+        >
           <div className="flex min-h-12 items-center gap-3 rounded-m border border-input px-3">
             <Checkbox aria-label="+91 22 6987 0900" checked={useNumber} onChange={(event) => setUseNumber(event.target.checked)} />
             <span className="flex-1 text-m tabular-nums text-foreground">+91 22 6987 0900</span>
             <Chip>Plivo</Chip>
           </div>
-          <p className="text-s text-secondary">Optional. Tick none to call from any enabled number; you can change this later, even while it is calling.</p>
-        </div>
-        <div className="flex flex-col gap-3">
-          <p className="text-m font-medium text-foreground">Audience</p>
-          <SegmentedControl
-            aria-label="Audience source"
-            options={[{ value: "csv", label: "CSV upload" }, { value: "empty", label: "Empty audience" }]}
-            value={audience}
-            onChange={setAudience}
-          />
-          {audience === "csv" && (
-            <>
-              <InputField aria-label="Search audiences" type="search" placeholder="Search audiences" value={query} onChange={(event) => setQuery(event.target.value)} />
-              <FileDropzone accept=".csv,.xlsx" hint="CSV or first-sheet .xlsx with a phone column; name and other columns are optional" />
-              <ul aria-label="Saved audiences" className="rounded-m border border-input px-3">
-                {audiences.map((item) => (
-                  <li key={item.id} className="flex min-h-10 items-center justify-between gap-3 border-b border-tertiary text-m last:border-0">
-                    <span className="text-foreground">{item.name}</span>
-                    <span className="tabular-nums text-secondary">{item.size.toLocaleString("en-IN")}</span>
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-        </div>
+        </Field>
+
+        {/* The source switch sits on the label row; the body changes with it. */}
+        <Field
+          label="Audience"
+          actions={
+            <SegmentedControl
+              size="sm"
+              aria-label="Audience source"
+              options={[{ value: "csv", label: "CSV upload" }, { value: "empty", label: "Empty audience" }]}
+              value={audience}
+              onChange={setAudience}
+            />
+          }
+        >
+          {audience === "csv" ? (
+            <div className="flex flex-col gap-4">
+              <FileDropzone layout="inline" accept=".csv,.xlsx" label="Upload a new list" hint="Drop a CSV or .xlsx with a phone column" />
+              <InputField aria-label="Search saved audiences" type="search" placeholder="Search saved audiences" value={query} onChange={(event) => setQuery(event.target.value)} />
+              <Table aria-label="Saved audiences" selectionMode="single" selectedKeys={picked} onSelectionChange={setPicked}>
+                <TableHeader>
+                  <TableRow>
+                    <TableColumn>Name</TableColumn>
+                    <TableColumn>Uploaded</TableColumn>
+                    <TableColumn align="right">Contacts</TableColumn>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {audiences.map((item) => (
+                    <TableRow key={item.id} rowKey={item.id} aria-label={`Use ${item.name}`}>
+                      <TableCell>{item.name}</TableCell>
+                      <TableCell className="text-secondary">{item.uploaded}</TableCell>
+                      <TableCell align="right" className="tabular-nums">{item.size.toLocaleString("en-IN")}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : null}
+        </Field>
       </ModalBody>
       <ModalFooter>
         <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
@@ -346,94 +399,99 @@ export function CampaignsScreen() {
     value === "all" ? CAMPAIGNS.length : CAMPAIGNS.filter((c) => c.status === value).length;
 
   return (
-    <div className="flex h-screen gap-3 bg-background p-3 text-foreground">
-      <section aria-label="Voice campaigns" className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-l bg-card">
-        <BodyPageHeader title="Voice campaigns" actions={<Button onClick={() => setCreating(true)}>New campaign</Button>} />
+    <div className="flex h-screen bg-surface p-3 text-foreground">
+      {/* The app window: one rounded surface on the WG3 backdrop. */}
+      <div className="flex min-w-0 flex-1 overflow-hidden rounded-window border border-border bg-card shadow-window">
+        <section aria-label="Voice campaigns" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <BodyPageHeader title="Voice campaigns" actions={<Button onClick={() => setCreating(true)}>New campaign</Button>} />
 
-        {/* Tabs lead; search and filters trail as icon triggers. */}
-        <div className="flex items-center justify-between gap-4 px-6">
-          <Tabs className="min-w-0 flex-1" value={tab} onValueChange={(value) => { setTab(value as typeof tab); setPage(1); }}>
-            <TabList aria-label="Filter campaigns by status">
-              {TABS.map((item) => (
-                <Tab key={item.value} value={item.value} count={countFor(item.value)}>
-                  {item.label}
-                </Tab>
-              ))}
-            </TabList>
-          </Tabs>
-          <div className="flex shrink-0 items-center gap-2">
-            <SearchDisclosure
-              value={search}
-              onValueChange={(value) => { setSearch(value); setPage(1); }}
-              open={searchOpen}
-              onOpenChange={setSearchOpen}
-              placeholder="Search campaigns"
-              triggerLabel="Search campaigns"
-            />
-            <Filters
-              triggerLabel="Filter campaigns"
-              groups={filters}
-              onChange={(id, value) => { setFilters((groups) => groups.map((group) => (group.id === id ? { ...group, value } : group))); setPage(1); }}
-            />
+          {/* Tabs lead; search and filters trail as icon triggers. */}
+          <div className="flex items-center justify-between gap-4 px-6">
+            <Tabs className="min-w-0 flex-1" value={tab} onValueChange={(value) => { setTab(value as typeof tab); setPage(1); }}>
+              <TabList aria-label="Filter campaigns by status">
+                {TABS.map((item) => (
+                  <Tab key={item.value} value={item.value} count={countFor(item.value)}>
+                    {item.label}
+                  </Tab>
+                ))}
+              </TabList>
+            </Tabs>
+            <div className="flex shrink-0 items-center gap-2">
+              <SearchDisclosure
+                value={search}
+                onValueChange={(value) => { setSearch(value); setPage(1); }}
+                open={searchOpen}
+                onOpenChange={setSearchOpen}
+                placeholder="Search campaigns"
+                triggerLabel="Search campaigns"
+              />
+              <Filters
+                triggerLabel="Filter campaigns"
+                groups={filters}
+                onChange={(id, value) => { setFilters((groups) => groups.map((group) => (group.id === id ? { ...group, value } : group))); setPage(1); }}
+              />
+            </div>
           </div>
-        </div>
 
-        {/* The rows fill what is left of the panel; pagination sits at the bottom. */}
-        <div ref={rowsRef} className="min-h-0 flex-1 px-6 pt-4 pb-6">
-          <Table
-            aria-label="Voice campaigns"
-            selectionMode="multiple"
-            selectedKeys={selectedKeys}
-            onSelectionChange={setSelectedKeys}
-            footer={
-              <Pagination
-                className="w-full"
-                total={pages}
-                page={current}
-                onChange={setPage}
-                summary={`${visible.length === 0 ? 0 : (current - 1) * pageSize + 1}–${Math.min(current * pageSize, visible.length)} of ${visible.length} campaigns`}
-              />
-            }
-          >
-            <TableHeader>
-              <TableRow>
-                <TableColumn>Campaign</TableColumn>
-                <TableColumn>Status</TableColumn>
-                <TableColumn align="right">Leads</TableColumn>
-                <TableColumn>Owner</TableColumn>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {pageRows.map((campaign) => (
-                <TableRow
-                  key={campaign.id}
-                  rowKey={campaign.id}
-                  aria-label={`Open ${campaign.name}`}
-                  isActive={openId === campaign.id}
-                  onClick={() => setOpenId((id) => (id === campaign.id ? null : campaign.id))}
-                  childRows={campaign.cohorts?.map((cohort) => (
-                    <TableRow
-                      key={cohort.id}
-                      rowKey={cohort.id}
-                      aria-label={`Open ${cohort.name}`}
-                      isActive={openId === cohort.id}
-                      onClick={() => setOpenId((id) => (id === cohort.id ? null : cohort.id))}
-                    >
-                      <CampaignCells campaign={cohort} />
-                    </TableRow>
-                  ))}
-                  defaultExpanded={Boolean(campaign.cohorts)}
-                >
-                  <CampaignCells campaign={campaign} />
+          {/* The rows fill what is left of the panel; pagination sits at the bottom. */}
+          <div ref={rowsRef} className="min-h-0 flex-1 px-6 pt-4 pb-6">
+            <Table
+              aria-label="Voice campaigns"
+              selectionMode="multiple"
+              selectedKeys={selectedKeys}
+              onSelectionChange={setSelectedKeys}
+              footer={
+                <Pagination
+                  className="w-full"
+                  total={pages}
+                  page={current}
+                  onChange={setPage}
+                  summary={`${visible.length === 0 ? 0 : (current - 1) * pageSize + 1}–${Math.min(current * pageSize, visible.length)} of ${visible.length} campaigns`}
+                />
+              }
+            >
+              <TableHeader>
+                <TableRow>
+                  <TableColumn>Campaign</TableColumn>
+                  <TableColumn>Status</TableColumn>
+                  <TableColumn align="right">Leads</TableColumn>
+                  <TableColumn align="right">Connect rate</TableColumn>
+                  <TableColumn align="right">Last 7 days</TableColumn>
+                  <TableColumn>Owner</TableColumn>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </section>
+              </TableHeader>
+              <TableBody>
+                {pageRows.map((campaign) => (
+                  <TableRow
+                    key={campaign.id}
+                    rowKey={campaign.id}
+                    aria-label={`Open ${campaign.name}`}
+                    isActive={openId === campaign.id}
+                    onClick={() => setOpenId((id) => (id === campaign.id ? null : campaign.id))}
+                    childRows={campaign.cohorts?.map((cohort) => (
+                      <TableRow
+                        key={cohort.id}
+                        rowKey={cohort.id}
+                        aria-label={`Open ${cohort.name}`}
+                        isActive={openId === cohort.id}
+                        onClick={() => setOpenId((id) => (id === cohort.id ? null : cohort.id))}
+                      >
+                        <CampaignCells campaign={cohort} />
+                      </TableRow>
+                    ))}
+                    defaultExpanded={Boolean(campaign.cohorts)}
+                  >
+                    <CampaignCells campaign={campaign} />
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </section>
 
-      <CampaignDetail campaign={findCampaign(openId)} onClose={() => setOpenId(null)} />
-      <NewCampaignModal open={creating} onOpenChange={setCreating} />
+        <CampaignDetail campaign={findCampaign(openId)} onClose={() => setOpenId(null)} />
+        <NewCampaignModal open={creating} onOpenChange={setCreating} />
+      </div>
     </div>
   );
 }

package/examples/guardrails-settings-screen.tsx

@@ -0,0 +1,123 @@
+/**
+ * Guardrails settings — the ADS settings-screen recipe, built only from ADS
+ * exports.
+ *
+ * Follows principle `settings-screens` (see `get_principles`):
+ *
+ * - One white page in the app window: BodyPageHeader (a 64px bar with the
+ *   title, the one save action and a full-width hairline), then the setting
+ *   groups 32px apart.
+ * - Every group FILLS the panel's width between its 24px side insets — never a
+ *   fixed reading-width column — so each row's control lines up on the panel's
+ *   right edge under the save action.
+ * - A group is a 16px Medium title over a SettingList; each SettingRow reads
+ *   bare glyph → label + one-line description → the control that changes it
+ *   (Switch, a Button showing the current value, or a Badge).
+ *
+ * Copy it and replace GROUPS with your own settings.
+ */
+import * as React from "react";
+import {
+  Badge,
+  BodyPageHeader,
+  Button,
+  SettingList,
+  SettingRow,
+  Switch,
+} from "@actioneer/ads";
+import { Call, CheckCircle, FileText, Info, Refresh } from "@actioneer/ads/lib/icons";
+
+type Control =
+  | { kind: "switch"; on: boolean }
+  | { kind: "button"; label: string }
+  | { kind: "badge"; label: string };
+
+interface Setting {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+  control: Control;
+}
+
+export const GROUPS: { title: string; settings: Setting[] }[] = [
+  {
+    title: "Calling window",
+    settings: [
+      { id: "hours", icon: <Call />, label: "Calling hours", description: "Leads are dialled only inside this window", control: { kind: "button", label: "10:00 – 19:00" } },
+      { id: "retry", icon: <Refresh />, label: "Retry unanswered calls", description: "Up to 3 attempts, 2 hours apart", control: { kind: "switch", on: true } },
+      { id: "dnd", icon: <CheckCircle />, label: "Respect the DND registry", description: "Skip numbers on the national do-not-call list", control: { kind: "switch", on: true } },
+    ],
+  },
+  {
+    title: "Compliance",
+    settings: [
+      { id: "rates", icon: <Info />, label: "Block rate quotes", description: "The agent never quotes a rate outside the approved sheet", control: { kind: "switch", on: true } },
+      { id: "disclosure", icon: <FileText />, label: "Disclosure script", description: "Read at the start of every call", control: { kind: "button", label: "Edit" } },
+      { id: "talk-over", icon: <Info />, label: "Talk-over limit", description: "Flag calls where the agent talks over the lead for 2s or more", control: { kind: "badge", label: "2s" } },
+    ],
+  },
+  {
+    title: "Escalation",
+    settings: [
+      { id: "handoff", icon: <Call />, label: "Hand off to a person", description: "When the lead asks for a person twice", control: { kind: "switch", on: false } },
+    ],
+  },
+];
+
+export function GuardrailsSettingsScreen() {
+  const [switches, setSwitches] = React.useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      GROUPS.flatMap((group) => group.settings)
+        .filter((setting) => setting.control.kind === "switch")
+        .map((setting) => [setting.id, (setting.control as { on: boolean }).on]),
+    ),
+  );
+
+  const control = (setting: Setting) => {
+    switch (setting.control.kind) {
+      case "switch":
+        return (
+          <Switch
+            aria-label={setting.label}
+            checked={switches[setting.id]}
+            onCheckedChange={(on) => setSwitches((current) => ({ ...current, [setting.id]: on }))}
+          />
+        );
+      case "button":
+        return <Button variant="outline">{setting.control.label}</Button>;
+      case "badge":
+        return <Badge color="success">{setting.control.label}</Badge>;
+    }
+  };
+
+  return (
+    <div className="flex h-screen bg-surface p-3 text-foreground">
+      {/* The app window: one rounded surface on the WG3 backdrop. */}
+      <div className="flex min-w-0 flex-1 overflow-hidden rounded-window border border-border bg-card shadow-window">
+        <section aria-label="Guardrails" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <BodyPageHeader title="Guardrails" actions={<Button>Save changes</Button>} />
+          <div className="flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto px-6 pb-6">
+            {GROUPS.map((group) => (
+              // w-full: the group fills the panel — no max-width column.
+              <section key={group.title} aria-label={group.title} className="flex w-full flex-col gap-2">
+                <h2 className="m-0 text-l font-medium text-on-white-primary">{group.title}</h2>
+                <SettingList>
+                  {group.settings.map((setting) => (
+                    <SettingRow
+                      key={setting.id}
+                      icon={setting.icon}
+                      label={setting.label}
+                      description={setting.description}
+                      action={control(setting)}
+                    />
+                  ))}
+                </SettingList>
+              </section>
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}