@actioneer/ads 1.0.8 → 1.0.10

package/components/tabs.d.ts

@@ -19,7 +19,12 @@ export declare const TabList: React.ForwardRefExoticComponent<TabListProps & Rea
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
     isDisabled?: boolean;
-    /** Optional trailing count, rendered as `· N` (e.g. a filter's match count). */
+    /**
+     * Optional trailing count (e.g. a filter's match count), rendered as the bare
+     * number 6px after the label. It stays quieter than the label: Regular
+     * weight and tabular figures in every state, tertiary grey when inactive and
+     * the primary-action teal when active.
+     */
     count?: number;
 }
 export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

package/components/tabs.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as m, jsxs as E } from "react/jsx-runtime";
+import { jsx as p, jsxs as E } from "react/jsx-runtime";
 import * as r from "react";
 import { MotionConfig as j, motion as $ } from "motion/react";
 import { cva as L } from "class-variance-authority";
@@ -18,26 +18,26 @@ const U = r.forwardRef(
     value: e,
     defaultValue: t,
     onValueChange: a,
-    variant: w,
+    variant: g,
     orientation: c = "horizontal",
-    size: p,
+    size: m,
     children: R,
     ...A
   }, k) => {
-    const x = e !== void 0, [y, v] = r.useState(t), T = r.useId().replaceAll(":", ""), d = r.useId(), g = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : y, I = r.useCallback(
+    const x = e !== void 0, [y, v] = r.useState(t), T = r.useId().replaceAll(":", ""), d = r.useId(), w = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : y, I = r.useCallback(
       (l) => {
         x || v(l), a == null || a(l);
       },
       [x, a]
     ), i = r.useCallback((l) => {
-      g.current.includes(l) || g.current.push(l);
+      w.current.includes(l) || w.current.push(l);
     }, []), s = r.useMemo(
       () => ({
         value: f,
         setValue: I,
         baseId: T,
         registerTab: i,
-        tabs: g,
+        tabs: w,
         disabled: h,
         thumbId: d,
         orientation: c
@@ -51,7 +51,7 @@ const U = r.forwardRef(
         c
       ]
     );
-    return /* @__PURE__ */ m(P.Provider, { value: s, children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(P.Provider, { value: s, children: /* @__PURE__ */ p(
       "div",
       {
         ref: k,
@@ -63,13 +63,13 @@ const U = r.forwardRef(
           o
         ),
         ...A,
-        children: /* @__PURE__ */ m(j, { reducedMotion: "user", children: R })
+        children: /* @__PURE__ */ p(j, { reducedMotion: "user", children: R })
       }
     ) });
   }
 );
 U.displayName = "Tabs";
-const C = L("inline-flex text-l", {
+const C = L("inline-flex text-m", {
   variants: {
     orientation: {
       horizontal: b(
@@ -88,7 +88,7 @@ const C = L("inline-flex text-l", {
 }), B = r.forwardRef(
   ({ className: o, ...e }, t) => {
     const { orientation: a } = z("TabList");
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(
       "div",
       {
         ref: t,
@@ -127,7 +127,7 @@ const H = L(
     }
   }
 ), O = r.forwardRef(
-  ({ className: o, value: e, isDisabled: t, count: a, children: w, onClick: c, onKeyDown: p, ...R }, A) => {
+  ({ className: o, value: e, isDisabled: t, count: a, children: g, onClick: c, onKeyDown: m, ...R }, A) => {
     const {
       value: k,
       setValue: x,
@@ -135,7 +135,7 @@ const H = L(
       registerTab: v,
       tabs: T,
       disabled: d,
-      thumbId: g,
+      thumbId: w,
       orientation: h
     } = z("Tab"), f = k === e;
     r.useEffect(() => {
@@ -144,7 +144,7 @@ const H = L(
       t ? d.current.add(e) : d.current.delete(e);
     }, [d, t, e]);
     const I = (i) => {
-      if (p == null || p(i), i.defaultPrevented) return;
+      if (m == null || m(i), i.defaultPrevented) return;
       const s = T.current, l = s.indexOf(e);
       if (l === -1) return;
       const V = h === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], _ = h === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
@@ -199,10 +199,10 @@ const H = L(
         onKeyDown: I,
         ...R,
         children: [
-          f && /* @__PURE__ */ m(
+          f && /* @__PURE__ */ p(
             $.span,
             {
-              layoutId: g,
+              layoutId: w,
               "aria-hidden": !0,
               transition: M,
               className: b(
@@ -211,19 +211,16 @@ const H = L(
               )
             }
           ),
-          /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1", children: [
-            w,
-            a != null && /* @__PURE__ */ E(
+          /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1.5", children: [
+            g,
+            a != null && /* @__PURE__ */ p(
               "span",
               {
                 className: b(
-                  "tabular-nums",
-                  f ? "text-action-primary-text" : "text-secondary"
+                  "font-normal tabular-nums",
+                  f ? "text-action-primary-text" : "text-on-white-tertiary"
                 ),
-                children: [
-                  "· ",
-                  a
-                ]
+                children: a
               }
             )
           ] })
@@ -236,7 +233,7 @@ O.displayName = "Tab";
 const q = r.forwardRef(
   ({ className: o, ...e }, t) => {
     const { orientation: a } = z("TabSeparator");
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(
       "span",
       {
         ref: t,
@@ -254,15 +251,15 @@ const q = r.forwardRef(
 );
 q.displayName = "TabSeparator";
 const F = r.forwardRef(
-  ({ className: o, value: e, children: t, ...a }, w) => {
-    const { value: c, baseId: p } = z("TabPanel");
-    return c !== e ? null : /* @__PURE__ */ m(
+  ({ className: o, value: e, children: t, ...a }, g) => {
+    const { value: c, baseId: m } = z("TabPanel");
+    return c !== e ? null : /* @__PURE__ */ p(
       "div",
       {
-        ref: w,
+        ref: g,
         role: "tabpanel",
-        id: N(p, "panel", e),
-        "aria-labelledby": N(p, "tab", e),
+        id: N(m, "panel", e),
+        "aria-labelledby": N(m, "tab", e),
         tabIndex: 0,
         className: b(
           "flex-1 outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm",

package/demo/components/add-to-artifact.js

@@ -35,6 +35,8 @@ import "react-aria-components";
 import "../../components/autocomplete.js";
 import "../../components/slider.js";
 import "../../components/segmented.js";
+import "../../components/filters.js";
+import "../../components/filter-bar.js";
 import { Modal as q, ModalHeader as J, ModalTitle as Q, ModalBody as x, ModalFooter as g } from "../../components/modal.js";
 import "../../components/drawer.js";
 import "../../components/popover.js";
@@ -55,6 +57,8 @@ import "../../components/avatar.js";
 import "../../components/badge.js";
 import "../../components/chip.js";
 import "../../components/timeline.js";
+import "../../components/detail-list.js";
+import "../../components/sparkline.js";
 import "../../components/alert.js";
 import "../../components/surface-loader.js";
 import "../../components/pixel-blast-svg.js";
@@ -106,7 +110,7 @@ import "../../components/assistant-ui/quote.js";
 import "../../components/assistant-ui/sources.js";
 import "../../components/assistant-ui/tool-fallback.js";
 import "../../components/assistant-ui/tool-group.js";
-function ei({
+function ni({
   block: i,
   trigger: v = "button",
   className: A,
@@ -358,5 +362,5 @@ function ei({
   ] });
 }
 export {
-  ei as AddToArtifact
+  ni as AddToArtifact
 };

package/examples/README.md

@@ -13,6 +13,10 @@ root in `MotionConfig`, `ToastProvider` and `TooltipProvider`.
 | `agents-screen.tsx` | `AgentsScreen` | A full list page: `PageHeader` with a primary action, a summary strip, `Tabs` with counts leading a `SearchDisclosure`, a filter `Dropdown`, a sortable `Table` with clickable rows and a pinned action column, per-row actions with `Tooltip`s, and filtered `EmptyState`s. |
 | `settings-screen.tsx` | `SettingsScreen` | A settings card: `Card` header with a status `Badge`, an `InputField`, a `SettingList` of `SettingRow`s with `Switch` and `Button` controls, and one primary action. |
 | `workspace-header.tsx` | `WorkspaceHeaderScreen` | A page header with a status `Badge` and trailing actions, then `Tabs` with counts whose panels hold `Card`s. |
+| `campaigns-screen.tsx` | `CampaignsScreen` | The collection-screen recipe: `BodyPageHeader` with one primary action, counted `Tabs` leading `SearchDisclosure` + `Filters`, a multi-select `Table` (hover-revealed checkboxes, cohort child rows, `isActive` open row) whose page size fills the panel with `Pagination` at the bottom, a shell-level `Drawer` with status under the title and Performance / Details sections, and the fixed-height New campaign `Modal` (`NewCampaignModal`: `Field info` for optional guidance, `Field actions` for the source switch, inline `FileDropzone`, single-select `Table` of saved audiences). |
+| `call-logs-screen.tsx` | `CallLogsScreen`, `CallPanel` | The record-call-logs recipe: a campaign's Call logs tab titled by `Breadcrumbs` (status in `meta`, Test call + Launch in `actions`), a `Table` of calls (Number · plain-chip Status · Outcome · Duration) that fills the panel, and a footer-less call panel — grounded `DrawerHeader`, scrolling `DrawerSection`s (Summary, Recording, Transcript, Follow-ups, CRM write-back, Captured fields) with `DetailList` attributes and a collapsed Call metadata. |
+| `guardrails-settings-screen.tsx` | `GuardrailsSettingsScreen` | The settings-screen recipe: `BodyPageHeader` with one save action and full-width setting groups (16px title over a `SettingList` of `SettingRow`s with Switch / value Button / Badge controls). |
+| `campaign-analysis-screen.tsx` | `CampaignAnalysisScreen` | The record-analytics recipe: an 18px `Breadcrumbs` title with the primary action on the same row, record `Tabs`, outlined stat cards with `Progress`, and outlined `BarChart` / `LineChart` cards with header legends and printed values. |
 
 ```tsx
 // app/agents/page.tsx
@@ -25,6 +29,5 @@ export default function Page() {
 }
 ```
 
-These are the same compositions the ADS Storybook renders under
-**Recipes**, so what you see there is what these files produce. Icons come from
+Icons come from
 `@actioneer/ads/lib/icons`; never install a second icon package.

package/examples/call-logs-screen.tsx

@@ -0,0 +1,381 @@
+/**
+ * Call logs screen — the ADS record-call-logs recipe, built only from ADS
+ * exports.
+ *
+ * Follows principles `record-detail-panels`, `collection-screens`,
+ * `leading-back-navigation` and `status-language` (see `get_principles`):
+ *
+ * - Call logs is a TAB of its campaign, not a page of its own: the 16px
+ *   Breadcrumbs trail (Voice campaigns / campaign) is the title, the campaign
+ *   status Chip sits beside it, and the campaign actions (Test call, Launch)
+ *   sit on the right of the same row — a 64px header bar closed by a
+ *   full-width hairline.
+ * - The list is a Table — Number · Status · Outcome · Duration — whose rows
+ *   fill the panel with Pagination at the bottom. Status is a plain Chip
+ *   (square dot + 14px text: Completed green, No answer amber, Failed red);
+ *   the outcome exists only once a call connected, otherwise an em dash.
+ * - Opening a call marks its row `isActive` and mounts the call panel beside
+ *   the list, attached to the page by one full-height hairline.
+ * - The call panel: DrawerHeader (kicker, number, status + time · length),
+ *   then DrawerSections 32px apart — Summary, Recording, Transcript · N turns,
+ *   Follow-ups, CRM write-back, Captured fields · X of N — and Call metadata
+ *   collapsed last. Each fact appears once. No footer: there is no dedicated
+ *   call page, so there is nothing to "open".
+ *
+ * Copy it and replace CALLS with your own records.
+ */
+import * as React from "react";
+import {
+  AudioWaveform,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  Chip,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  DetailItem,
+  DetailList,
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  DrawerKicker,
+  DrawerMeta,
+  DrawerSection,
+  DrawerTitle,
+  Filters,
+  Pagination,
+  SearchDisclosure,
+  Tab,
+  TabList,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Transcript,
+  type FilterGroup,
+  type TranscriptTurn,
+} from "@actioneer/ads";
+import { ChevronDown } from "@actioneer/ads/lib/icons";
+
+/** Call statuses, one tone per meaning (principle `status-language`). */
+export type CallStatus = "Completed" | "No answer" | "Busy" | "Failed";
+
+export const CALL_STATUS_COLOR: Record<CallStatus, "success" | "warning" | "danger"> = {
+  Completed: "success",
+  "No answer": "warning",
+  Busy: "warning",
+  Failed: "danger",
+};
+
+export interface CallRecord {
+  id: string;
+  number: string;
+  status: CallStatus;
+  /** Disposition — only for calls that connected. */
+  outcome?: string;
+  seconds: number;
+  startedAt: string;
+  summary?: string;
+  cost: string;
+  pickedUp: boolean;
+  transcript: TranscriptTurn[];
+  followUps: string[];
+  crm: { nextAction?: string; reason?: string };
+  /** Field key → captured value (undefined = not stated). */
+  captured: Record<string, string | undefined>;
+  metadata: { callId: string; agent: string; callerId: string; provider: string };
+}
+
+/** Sentence-case labels for captured field keys — never show the raw key. */
+export const CAPTURED_FIELD_LABELS: Record<string, string> = {
+  customer_name: "Customer name",
+  type_of_loan: "Type of loan",
+  loan_amount: "Loan amount",
+  city: "City",
+  pincode: "Pincode",
+  type_of_employment: "Type of employment",
+  approximate_monthly_income: "Monthly income",
+  property_status: "Property status",
+  property_amount: "Property amount",
+  callback_slot: "Callback slot",
+};
+
+const EMPTY_CAPTURE = Object.fromEntries(Object.keys(CAPTURED_FIELD_LABELS).map((key) => [key, undefined]));
+
+const call = (number: string, status: CallStatus, seconds: number, extra: Partial<CallRecord> = {}): CallRecord => ({
+  id: number.replace(/\D/g, ""),
+  number,
+  status,
+  seconds,
+  startedAt: "12 Sep, 3:41 PM",
+  cost: "₹0.00",
+  pickedUp: status === "Completed",
+  transcript: [],
+  followUps: [],
+  crm: {},
+  captured: EMPTY_CAPTURE,
+  metadata: { callId: "d8138618-0042", agent: "Asha · Hindi", callerId: "+91 22 6987 0900", provider: "Plivo" },
+  ...extra,
+});
+
+export const CALLS: CallRecord[] = [
+  call("+91 98393 81298", "No answer", 0),
+  call("+91 87222 96094", "No answer", 0),
+  call("+91 98857 55120", "No answer", 0),
+  call("+91 90053 11157", "No answer", 0),
+  call("+91 86686 86494", "Completed", 4, {
+    outcome: "Customer did not speak",
+    summary: "An unknown customer answered but did not respond. No next step was established.",
+    transcript: [{ id: "t1", role: "agent", timeLabel: "0:01", text: "Hi, this is Asha calling from Liquide about your loan enquiry. Is this a good time to talk?" }],
+    crm: { reason: "The customer did not provide any voice response." },
+  }),
+  call("+91 73853 99695", "No answer", 0),
+  call("+91 94880 36418", "Completed", 10, { outcome: "Customer did not speak", summary: "The customer picked up and hung up after the greeting." }),
+  call("+91 74477 96759", "No answer", 0),
+  call("+91 75682 95332", "Completed", 7, { outcome: "Customer did not speak", summary: "The customer picked up and stayed silent." }),
+  call("+91 78876 09135", "Busy", 0),
+];
+
+const TABS = ["Script", "Workflow", "Analysis", "Call logs", "Reports", "Guardrails"];
+
+const INITIAL_FILTERS: FilterGroup[] = [
+  {
+    id: "status",
+    label: "Status",
+    value: "all",
+    options: [
+      { value: "all", label: "All statuses" },
+      { value: "Completed", label: "Completed" },
+      { value: "No answer", label: "No answer" },
+      { value: "Busy", label: "Busy" },
+      { value: "Failed", label: "Failed" },
+    ],
+  },
+];
+
+const ROW_HEIGHT = 64;
+const TABLE_CHROME = 90;
+
+function useRowsThatFit(ref: React.RefObject<HTMLDivElement | null>) {
+  const [rows, setRows] = React.useState(8);
+  React.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setRows(Math.max(3, Math.floor((node.clientHeight - TABLE_CHROME) / ROW_HEIGHT)));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return rows;
+}
+
+const seconds = (value: number) => `${value}s`;
+
+/** The call panel: header owns status, time and length; the body never repeats them. */
+export function CallPanel({ call, onClose }: { call: CallRecord | undefined; onClose: () => void }) {
+  const capturedKeys = Object.keys(CAPTURED_FIELD_LABELS);
+  const filled = call ? capturedKeys.filter((key) => call.captured[key]).length : 0;
+
+  return (
+    <Drawer open={Boolean(call)} onOpenChange={(open) => !open && onClose()} aria-label="Call details">
+      {call && (
+        <>
+          <DrawerHeader>
+            <DrawerKicker>Call</DrawerKicker>
+            <DrawerTitle className="tabular-nums">{call.number}</DrawerTitle>
+            <DrawerMeta>
+              <Chip color={CALL_STATUS_COLOR[call.status]}>{call.status}</Chip>
+              <span>
+                {call.startedAt} · {seconds(call.seconds)}
+              </span>
+            </DrawerMeta>
+          </DrawerHeader>
+          <DrawerBody className="flex flex-col gap-8">
+            <DrawerSection title="Summary">
+              {call.outcome && (
+                <div className="flex">
+                  <Chip variant="outline">{call.outcome}</Chip>
+                </div>
+              )}
+              <p className="m-0 text-m text-on-white-primary">{call.summary ?? "The call did not connect."}</p>
+              <dl className="m-0 mt-1 grid grid-cols-2 gap-2">
+                {[
+                  { label: "Cost", value: call.cost },
+                  { label: "Picked up", value: call.pickedUp ? "Yes" : "No" },
+                ].map((stat) => (
+                  <div key={stat.label} className="min-w-0 rounded-card border border-border bg-wg1 p-3">
+                    <dt className="text-s text-on-white-secondary">{stat.label}</dt>
+                    <dd className="m-0 mt-0.5 text-xl tabular-nums text-on-white-primary">{stat.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </DrawerSection>
+
+            {call.pickedUp && (
+              <DrawerSection title="Recording">
+                <AudioWaveform src="/samples/conversation-24s.wav" durationSeconds={call.seconds} channels={2} downloadName={`call-${call.id}.wav`} />
+              </DrawerSection>
+            )}
+
+            <DrawerSection title="Transcript" count={`${call.transcript.length} ${call.transcript.length === 1 ? "turn" : "turns"}`}>
+              <Transcript turns={call.transcript} emptyMessage="No one spoke on this call." />
+            </DrawerSection>
+
+            <DrawerSection title="Follow-ups">
+              {call.followUps.length ? (
+                <ul className="m-0 list-none p-0 text-m text-on-white-primary">
+                  {call.followUps.map((item) => <li key={item}>{item}</li>)}
+                </ul>
+              ) : (
+                <p className="m-0 text-m text-on-white-secondary">No follow-up recorded</p>
+              )}
+            </DrawerSection>
+
+            <DrawerSection title="CRM write-back">
+              <DetailList>
+                <DetailItem label="Next action" emptyLabel="None">{call.crm.nextAction}</DetailItem>
+                <DetailItem label="Reason">{call.crm.reason}</DetailItem>
+              </DetailList>
+            </DrawerSection>
+
+            <DrawerSection title="Captured fields" count={`${filled} of ${capturedKeys.length}`}>
+              <DetailList>
+                {capturedKeys.map((key) => (
+                  <DetailItem key={key} label={CAPTURED_FIELD_LABELS[key]}>{call.captured[key]}</DetailItem>
+                ))}
+              </DetailList>
+            </DrawerSection>
+
+            {/* Rarely needed, so it starts collapsed and closes the panel. */}
+            <Collapsible>
+              <CollapsibleTrigger className="group flex min-h-10 w-full items-center justify-between border-t border-tertiary font-medium text-on-white-primary">
+                Call metadata
+                <ChevronDown aria-hidden className="size-4 text-on-white-secondary transition-transform duration-150 group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <DetailList>
+                  <DetailItem label="Call ID">{call.metadata.callId}</DetailItem>
+                  <DetailItem label="Agent">{call.metadata.agent}</DetailItem>
+                  <DetailItem label="Caller ID">{call.metadata.callerId}</DetailItem>
+                  <DetailItem label="Provider">{call.metadata.provider}</DetailItem>
+                </DetailList>
+              </CollapsibleContent>
+            </Collapsible>
+          </DrawerBody>
+        </>
+      )}
+    </Drawer>
+  );
+}
+
+export function CallLogsScreen() {
+  const [tab, setTab] = React.useState("Call logs");
+  const [search, setSearch] = React.useState("");
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState(INITIAL_FILTERS);
+  const [openId, setOpenId] = React.useState<string | null>(null);
+  const [page, setPage] = React.useState(1);
+  const rowsRef = React.useRef<HTMLDivElement>(null);
+  const pageSize = useRowsThatFit(rowsRef);
+
+  const status = filters.find((group) => group.id === "status")?.value ?? "all";
+  const query = search.replace(/\s/g, "");
+  const visible = CALLS.filter((c) => (status === "all" || c.status === status) && (!query || c.number.replace(/\s/g, "").includes(query)));
+  const pages = Math.max(1, Math.ceil(visible.length / pageSize));
+  const current = Math.min(page, pages);
+  const pageRows = visible.slice((current - 1) * pageSize, current * pageSize);
+
+  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="12-09-2026" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          {/* The breadcrumb is the title; status sits beside it, campaign actions on the right. */}
+          <div className="flex h-16 shrink-0 items-center border-b border-border px-6">
+            <Breadcrumbs className="flex-1"
+              meta={<Chip color="success">Completed</Chip>}
+              actions={
+                <>
+                  <Button variant="outline">Test call</Button>
+                  <Button>Launch</Button>
+                </>
+              }
+            >
+              <BreadcrumbItem href="#campaigns">Voice campaigns</BreadcrumbItem>
+              <BreadcrumbItem isCurrent>12-09-2026</BreadcrumbItem>
+            </Breadcrumbs>
+          </div>
+
+          <div className="flex items-center justify-between gap-4 px-6 pt-5">
+            <Tabs className="min-w-0 flex-1" value={tab} onValueChange={setTab}>
+              <TabList aria-label="Campaign sections">
+                {TABS.map((item) => (
+                  <Tab key={item} value={item} count={item === "Call logs" ? CALLS.length : undefined}>
+                    {item}
+                  </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 numbers" triggerLabel="Search calls" />
+              <Filters
+                triggerLabel="Filter calls"
+                groups={filters}
+                onChange={(id, value) => { setFilters((groups) => groups.map((group) => (group.id === id ? { ...group, value } : group))); setPage(1); }}
+              />
+            </div>
+          </div>
+
+          <div ref={rowsRef} className="min-h-0 flex-1 px-6 pt-4 pb-6">
+            <Table
+              aria-label="Call logs"
+              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} calls`}
+                />
+              }
+            >
+              <TableHeader>
+                <TableRow>
+                  <TableColumn>Number</TableColumn>
+                  <TableColumn>Status</TableColumn>
+                  <TableColumn>Outcome</TableColumn>
+                  <TableColumn align="right">Duration</TableColumn>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {pageRows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    rowKey={row.id}
+                    aria-label={`Open call with ${row.number}`}
+                    isActive={openId === row.id}
+                    onClick={() => setOpenId((id) => (id === row.id ? null : row.id))}
+                  >
+                    <TableCell className="tabular-nums">{row.number}</TableCell>
+                    <TableCell>
+                      <Chip variant="plain" color={CALL_STATUS_COLOR[row.status]}>{row.status}</Chip>
+                    </TableCell>
+                    <TableCell className={row.outcome ? undefined : "text-on-white-secondary"}>{row.outcome ?? "—"}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{seconds(row.seconds)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </section>
+
+        <CallPanel call={CALLS.find((c) => c.id === openId)} onClose={() => setOpenId(null)} />
+      </div>
+    </div>
+  );
+}