@graph8/sdk 0.361.0 → 0.370.0

package/blocks/dialer/components/call-log-screen.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+/**
+ * CallLogScreen: the dialer's call history as a finished page. Pick whose calls to show (a rep's email, a session or a
+ * contact; the API never lists the whole organisation at once), then filter by outcome, search numbers and summaries,
+ * and open a call to hear the recording, read the transcript and AI grade (deep link `?id=<room_name>`).
+ *
+ * SDK operations (through the composed parts): GET /voice/dialer/calls (read, CallLog's query), transcript, grading and
+ * recording (read, via TranscriptViewer). The page itself dials, spends and deletes nothing. A call's detail offers
+ * "Call back" (CallContactButton), which dials only through its own external confirm dialog and loads nothing until opened.
+ * `CallHistory` is exported so DialerScreen can embed the same body under its own header.
+ */
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Phone } from "lucide-react";
+import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { StatStrip } from "@/g8/components/screen/stat-strip";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { dataOf, formatDuration, type CallSummary } from "../lib/dialer-types";
+import { TranscriptViewer } from "./transcript-viewer";
+import { CallContactButton } from "./call-contact-button";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
+
+export interface CallLogScreenProps {
+  contactId?: string;
+  userEmail?: string;
+  sessionId?: string;
+  /** Rows loaded at first; "Load more" adds this many again. Default 25. */
+  limit?: number;
+  toolbarActions?: ReactNode;
+  renderRowActions?: (call: CallSummary) => ReactNode;
+  renderDetailActions?: (call: CallSummary) => ReactNode;
+  extraDetailTabs?: Array<{ id: string; label: string; render: (call: CallSummary) => ReactNode }>;
+  className?: string;
+  /** URL query key that holds the open call (a room name). Default "id"; give a screen-specific key when another list on the page shares `id`. */
+  idParam?: string;
+}
+
+function useDebounced<T>(value: T, ms = 300): T {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), ms);
+    return () => clearTimeout(t);
+  }, [value, ms]);
+  return v;
+}
+
+const label = (d?: string | null) => (d ? d.replace(/_/g, " ") : "none");
+export function outcomeTone(d?: string | null): "neutral" | "info" | "positive" | "warning" | "negative" {
+  if (!d) return "neutral";
+  if (/wrong|do_not|dnc|bad|invalid|fail/.test(d)) return "negative";
+  if (/call_?back|follow|meeting|interested|connected|booked/.test(d)) return /connected|interested|meeting|booked/.test(d) ? "positive" : "info";
+  if (/voicemail|no_answer|busy/.test(d)) return "warning";
+  return "neutral";
+}
+
+function when(iso?: string | null): string {
+  const d = iso ? new Date(iso) : null;
+  return d && !Number.isNaN(d.getTime()) ? d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : "";
+}
+
+export function CallHistory({ contactId, userEmail, sessionId, limit = 25, idParam = "id", renderRowActions, renderDetailActions, extraDetailTabs }: CallLogScreenProps) {
+  const [typedEmail, setTypedEmail] = useState("");
+  const [rows, setRows] = useState(limit);
+  const [search, setSearch] = useState("");
+  const [outcome, setOutcome] = useState("");
+  const [openId, setOpenId] = useUrlState(idParam);
+  const [view, setView] = useUrlState("view");
+  const rep = useDebounced(userEmail || typedEmail.trim());
+  const scoped = Boolean(contactId || rep || sessionId);
+  const q = useG8Query(
+    async (signal) => {
+      const env = await g8Get("/voice/dialer/calls", { contact_id: contactId, user_email: rep || undefined, parallel_session_id: sessionId, limit: rows }, { signal });
+      return dataOf<{ calls?: CallSummary[] }>(env).calls ?? [];
+    },
+    [contactId, rep, sessionId, rows],
+    { enabled: scoped },
+  );
+  // A different rep, session or contact is a different list.
+  const scope = `${contactId}|${rep}|${sessionId}|${limit}`;
+  const lastScope = useRef(scope);
+  useEffect(() => {
+    if (lastScope.current === scope) return; // keep a deep-linked ?id= on first render
+    lastScope.current = scope;
+    setRows(limit);
+    setOutcome("");
+    setOpenId(null);
+  }, [scope]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const all = q.data ?? [];
+  const needle = search.trim().toLowerCase();
+  const calls = useMemo(
+    () => all.filter((c) => (!outcome || (c.disposition ?? "none") === outcome) && (!needle || `${c.to ?? ""} ${c.from_ ?? ""} ${c.summary ?? ""}`.toLowerCase().includes(needle))),
+    [all, outcome, needle],
+  );
+  const outcomes = [...new Set(all.map((c) => c.disposition ?? "none"))];
+  const selected = openId ? all.find((c) => c.room_name === openId) : undefined;
+  const expanded = view === "full" && Boolean(selected);
+  const totalSecs = all.reduce((n, c) => n + (c.call_duration ?? 0), 0);
+
+  if (!scoped) {
+    return (
+      <div className="max-w-md space-y-3">
+        <EmptyState icon={<Phone className="size-6" />} title="Choose whose calls to show" description="Type a rep's email. The API will not list the whole organisation's calls at once." />
+        <Input aria-label="Rep email" type="email" placeholder="rep@company.com" value={typedEmail} onChange={(e) => setTypedEmail(e.target.value)} />
+      </div>
+    );
+  }
+  const list = (
+    <div className="space-y-3">
+      <Toolbar
+        search={{ value: search, onChange: setSearch, placeholder: "Search number or summary" }}
+        filters={
+          <select aria-label="Outcome" className="h-8 rounded-md border border-border bg-background px-2 text-sm" value={outcome} onChange={(e) => setOutcome(e.target.value)}>
+            <option value="">Any outcome</option>
+            {outcomes.map((o) => <option key={o} value={o}>{label(o)}</option>)}
+          </select>
+        }
+      />
+      {q.error ? (
+        <ApiError error={q.error} title="Could not load calls" onRetry={() => void q.refetch()} />
+      ) : q.loading && !q.data ? (
+        <Skeleton className="h-32 w-full" aria-label="Loading calls" />
+      ) : calls.length === 0 ? (
+        all.length === 0 ? (
+          <EmptyState icon={<Phone className="size-6" />} title="No calls yet" description="Calls appear here after the dialer places them." />
+        ) : (
+          <EmptyState title="No calls match" description="Nothing fits this search or outcome." action={<Button size="sm" variant="outline" onClick={() => { setSearch(""); setOutcome(""); }}>Clear filters</Button>} />
+        )
+      ) : (
+        <Table aria-label="Call history">
+          <TableHeader><TableRow><TableHead>When</TableHead><TableHead>Number</TableHead><TableHead>Outcome</TableHead><TableHead>Length</TableHead><TableHead>Summary</TableHead>{renderRowActions ? <TableHead /> : null}</TableRow></TableHeader>
+          <TableBody>
+            {calls.map((c) => (
+              <TableRow key={c.room_name} data-state={openId === c.room_name ? "selected" : undefined} className="cursor-pointer" {...rowActivationProps(() => setOpenId(c.room_name))}>
+                <TableCell className="whitespace-nowrap"><RecordLink param={idParam} id={c.room_name} onOpen={() => setOpenId(c.room_name)}>{when(c.created_at)}</RecordLink></TableCell>
+                <TableCell>{c.to}</TableCell>
+                <TableCell><StatusPill tone={outcomeTone(c.disposition)}>{label(c.disposition)}</StatusPill></TableCell>
+                <TableCell>{formatDuration(c.call_duration)}</TableCell>
+                <TableCell className="max-w-64 truncate text-muted-foreground">{c.summary ?? (c.has_transcript ? "Transcript available" : "")}</TableCell>
+                {renderRowActions ? <TableCell onClick={(e) => e.stopPropagation()}>{renderRowActions(c)}</TableCell> : null}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+      {all.length >= rows ? <Button size="sm" variant="outline" disabled={q.loading} onClick={() => setRows(rows + limit)}>Load more</Button> : null}
+    </div>
+  );
+  const detail = selected ? (
+    <DetailPanel
+      title={selected.to ?? "Call"}
+      subtitle={when(selected.created_at)}
+      badges={<StatusPill tone={outcomeTone(selected.disposition)}>{label(selected.disposition)}</StatusPill>}
+      actions={
+        <>
+          {renderDetailActions?.(selected)}
+          {/* Call the same number again: CallContactButton (manual-dial, confirmed; loads nothing until opened). */}
+          {selected.to ? <CallContactButton contact={{ id: selected.contact_id, phone: selected.to }} userEmail={userEmail} label="Call back" /> : null}
+        </>
+      }
+      onClose={() => { setOpenId(null); setView(null); }}
+      onExpand={expanded ? undefined : () => setView("full")}
+      onCollapse={expanded ? () => setView(null) : undefined}
+      tabs={[
+        { id: "recording", label: "Recording and transcript", content: <TranscriptViewer key={selected.room_name} roomName={selected.room_name} /> },
+        { id: "details", label: "Details", content: <KeyValueList columns={1} items={[{ label: "From", value: selected.from_ ?? "" }, { label: "To", value: selected.to ?? "" }, { label: "Length", value: formatDuration(selected.call_duration) }, { label: "Contact id", value: selected.contact_id ?? "" }, { label: "Room", value: selected.room_name }]} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selected) })),
+      ]}
+    />
+  ) : null;
+  return (
+    <div className="space-y-4">
+      {all.length > 0 ? (
+        <StatStrip
+          items={[
+            { label: "Calls loaded", value: all.length },
+            { label: "Talk time", value: formatDuration(totalSecs) },
+            { label: "With transcript", value: all.filter((c) => c.has_transcript).length },
+            { label: "No outcome yet", value: all.filter((c) => !c.disposition).length, tone: all.some((c) => !c.disposition) ? "warning" : "neutral" },
+          ]}
+        />
+      ) : null}
+      <SplitView list={list} detail={detail} detailOpen={Boolean(selected)} onCloseDetail={() => { setOpenId(null); setView(null); }} expanded={expanded} onExpandedChange={(next) => setView(next ? "full" : null)} />
+    </div>
+  );
+}
+
+export function CallLogScreen(props: CallLogScreenProps) {
+  return (
+    <ScreenLayout className={props.className} title="Call log" description="Every dialer call with its outcome, recording, transcript and AI grade." icon={<Phone className="size-5" />} actions={props.toolbarActions}>
+      <CallHistory {...props} />
+    </ScreenLayout>
+  );
+}

package/blocks/dialer/components/call-log.tsx

@@ -15,8 +15,12 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { dataOf, formatDuration, type CallSummary } from "../lib/dialer-types";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 
 export interface CallLogProps {
+  /** URL param the host screen reads for this record type. With it the name is a real link (Cmd-click opens it in a new tab); without it a plain button. */
+  linkParam?: string;
   contactId?: string;
   userEmail?: string;
   sessionId?: string;
@@ -31,7 +35,7 @@ function when(iso: string | null | undefined): string {
   return Number.isNaN(d.getTime()) ? "" : d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
 }
 
-export function CallLog({ contactId, userEmail, sessionId, limit = 25, onSelect, className }: CallLogProps) {
+export function CallLog({ linkParam, contactId, userEmail, sessionId, limit = 25, onSelect, className }: CallLogProps) {
   const [typedEmail, setTypedEmail] = useState("");
   const repEmail = userEmail || typedEmail.trim();
   const scoped = Boolean(contactId || repEmail || sessionId);
@@ -64,8 +68,8 @@ export function CallLog({ contactId, userEmail, sessionId, limit = 25, onSelect,
       </TableHeader>
       <TableBody>
         {calls.map((c) => (
-          <TableRow key={c.room_name} className={onSelect ? "cursor-pointer" : undefined} onClick={() => onSelect?.(c)}>
-            <TableCell className="whitespace-nowrap">{when(c.created_at)}</TableCell>
+          <TableRow key={c.room_name} className={onSelect ? "cursor-pointer" : undefined} {...(onSelect ? rowActivationProps(() => onSelect(c)) : {})}>
+            <TableCell className="whitespace-nowrap">{onSelect ? <RecordLink param={linkParam} id={c.room_name} onOpen={() => onSelect(c)}>{when(c.created_at)}</RecordLink> : when(c.created_at)}</TableCell>
             <TableCell>{c.to}</TableCell>
             <TableCell className="capitalize">{c.disposition?.replace(/_/g, " ") ?? "none"}</TableCell>
             <TableCell>{formatDuration(c.call_duration)}</TableCell>

package/blocks/dialer/components/call-queue.tsx

@@ -55,7 +55,7 @@ function Stat({ label, value }: { label: string; value: string | number }) {
   );
 }
 
-function WaitingContacts({ sessionId, version, onSkipped }: { sessionId: string; version: number; onSkipped: () => void }) {
+export function WaitingContacts({ sessionId, version, onSkipped }: { sessionId: string; version: number; onSkipped: () => void }) {
   const grid = useG8Query(
     async (signal) => {
       const env = await g8Post(`/dialer/sessions/${encodeURIComponent(sessionId)}/grid`, { limit: 10, offset: 0, include_contact_data: true }, { signal });

package/blocks/dialer/components/dialer-screen.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+/**
+ * DialerScreen: the whole calling page for a rep. Tabs: Session (pick a list, create a session, dial batch by batch,
+ * watch live calls, take them in the browser, record outcomes, read the transcript), Sessions (every session as a list;
+ * a row opens the full session record with stats, calls, queue, pause / resume / stop; ?tab=sessions&open=<id>&view=full
+ * is the full page) and History (the rep's past calls).
+ *
+ * Flow: choose a list (ListPicker) -> SessionStartForm (caller ID, power or parallel mode; creating it dials nobody)
+ * -> CallQueue ("Dial next batch" confirms each batch; pause, stop with confirm, skip contacts, hang up, mute, voicemail
+ * drop with confirm) -> Softphone ("Enable calling" confirms the one-hour credential) -> DispositionPanel for the call
+ * that just finished -> TranscriptViewer. Resume a session with `?session=<id>`.
+ *
+ * SDK operations (all through the composed parts): see CallQueue, SessionStartForm, Softphone, DispositionPanel, CallLog.
+ * External and destructive steps always open ConfirmSpendDialog; nothing dials by itself and there is no auto-advance.
+ * The browser audio vendor is `transport`; by default the Twilio adapter loads on demand (needs @twilio/voice-sdk).
+ * Buying or verifying a caller ID number happens in the graph8 app.
+ */
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { Phone } from "lucide-react";
+import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { EmptyState } from "@/g8/components/empty-state";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { ListPicker, type ListSummary } from "@/g8/lists/components/list-picker";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { DialerSessionDetail } from "./dialer-session-detail";
+import { dataOf, isLiveCall, normalizeStatus, needsDisposition, type LiveCall, type NextBatchResult, type SessionDetail } from "../lib/dialer-types";
+import type { SoftphoneTransport } from "../lib/softphone-transport";
+import { CallHistory } from "./call-log-screen";
+import { CallQueue } from "./call-queue";
+import { DispositionPanel } from "./disposition-panel";
+import { Softphone } from "./softphone";
+import { TranscriptViewer } from "./transcript-viewer";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
+
+export interface DialerScreenProps {
+  /** The rep these calls belong to. When omitted the start form asks for the graph8 user id. */
+  userId?: string;
+  userEmail?: string;
+  /** Skip the list picker. */
+  listId?: string;
+  listTitle?: string;
+  /** Resume this session. */
+  sessionId?: string;
+  /** Your audio client. Default: the Twilio adapter, loaded on demand. */
+  transport?: SoftphoneTransport;
+  toolbarActions?: ReactNode;
+  renderRowActions?: (call: LiveCall) => ReactNode;
+  renderDetailActions?: (call: LiveCall) => ReactNode;
+  extraDetailTabs?: Array<{ id: string; label: string; render: (call: LiveCall) => ReactNode }>;
+  className?: string;
+}
+
+const TABS = [
+  { id: "session", label: "Session" },
+  { id: "sessions", label: "Sessions" },
+  { id: "history", label: "History" },
+];
+
+interface SessionRow {
+  session_id: string;
+  name?: string | null;
+  status?: string | null;
+  total_calls?: number | null;
+  user_email?: string | null;
+  from_phone?: string | null;
+  created_at?: unknown;
+  session_metadata?: Record<string, unknown> | null;
+}
+
+const STATUSES = ["ACTIVE", "PAUSED", "COMPLETED"];
+
+function useDebounced<T>(value: T, ms = 300): T {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), ms);
+    return () => clearTimeout(t);
+  }, [value, ms]);
+  return v;
+}
+
+function sessionTone(status?: string | null) {
+  const s = normalizeStatus(status);
+  return s === "active" ? "positive" : s === "paused" ? "warning" : "neutral";
+}
+
+function created(v: unknown): string {
+  const d = typeof v === "string" ? new Date(v) : null;
+  return d && !Number.isNaN(d.getTime()) ? d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : "";
+}
+
+/** All dialing sessions (GET /voice/dialer/sessions). A row opens the full session record: ?tab=sessions&open=<id>[&view=full]. */
+function SessionsTab({ userEmail, onWork }: { userEmail?: string; onWork: (id: string) => void }) {
+  // Its own param: `session` belongs to the Session tab (the running session); closing a detail here must never clear it.
+  const [openId, setOpenId] = useUrlState("open");
+  const [view, setView] = useUrlState("view");
+  const [page, setPage] = useState(1);
+  const [status, setStatus] = useState("");
+  const [name, setName] = useState("");
+  const search = useDebounced(name.trim());
+  const q = useG8Query(
+    async (signal) => {
+      const env = await g8Get("/voice/dialer/sessions", { page, page_size: 25, status: status || undefined, name: search || undefined, user_email: userEmail }, { signal });
+      const d = dataOf<{ sessions?: SessionRow[]; pagination?: { total_items?: number; total_pages?: number } }>(env);
+      return { rows: d.sessions ?? [], total: d.pagination?.total_items, pages: d.pagination?.total_pages };
+    },
+    [page, status, search, userEmail],
+  );
+  const rows = q.data?.rows ?? [];
+  const reset = () => setPage(1);
+  const list = (
+    <div className="space-y-3">
+      <Toolbar
+        search={{ value: name, onChange: (v) => { setName(v); reset(); }, placeholder: "Search by session name" }}
+        filters={
+          <select aria-label="Session status" className="h-8 rounded-md border border-border bg-background px-2 text-sm" value={status} onChange={(e) => { setStatus(e.target.value); reset(); }}>
+            <option value="">Any status</option>
+            {STATUSES.map((s) => <option key={s} value={s}>{s.toLowerCase()}</option>)}
+          </select>
+        }
+      />
+      {q.error ? (
+        <ApiError error={q.error} title="Could not load sessions" onRetry={() => void q.refetch()} />
+      ) : q.loading && !q.data ? (
+        <Skeleton className="h-32 w-full" aria-label="Loading sessions" />
+      ) : rows.length === 0 ? (
+        <EmptyState icon={<Phone className="size-6" />} title={name || status ? "No sessions match" : "No sessions yet"} description={name || status ? "Try a different search or status." : "Start one in the Session tab. Each session keeps its queue, calls and outcomes."} />
+      ) : (
+        <Table aria-label="Dialing sessions">
+          <TableHeader><TableRow><TableHead>Session</TableHead><TableHead>Status</TableHead><TableHead>Calls</TableHead><TableHead>Rep</TableHead><TableHead>Started</TableHead></TableRow></TableHeader>
+          <TableBody>
+            {rows.map((r) => (
+              <TableRow key={r.session_id} data-state={openId === r.session_id ? "selected" : undefined} className="cursor-pointer" {...rowActivationProps(() => setOpenId(r.session_id))}>
+                <TableCell className="font-medium"><RecordLink param="open" id={r.session_id} onOpen={() => setOpenId(r.session_id)}>{r.name ?? "Dialing session"}</RecordLink></TableCell>
+                <TableCell><StatusPill tone={sessionTone(r.status)}>{normalizeStatus(r.status) || "unknown"}</StatusPill></TableCell>
+                <TableCell className="tabular-nums">{r.total_calls ?? ""}</TableCell>
+                <TableCell>{r.user_email ?? ""}</TableCell>
+                <TableCell>{created(r.created_at)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <span>{q.data?.total != null ? `${q.data.total.toLocaleString()} sessions` : `Page ${page}`}</span>
+        <div className="flex gap-2">
+          <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage(page - 1)}>Previous</Button>
+          <Button size="sm" variant="outline" disabled={q.data?.pages != null ? page >= q.data.pages : rows.length < 25} onClick={() => setPage(page + 1)}>Next</Button>
+        </div>
+      </div>
+    </div>
+  );
+  const expanded = view === "full" && Boolean(openId);
+  return (
+    <SplitView
+      list={list}
+      detailOpen={Boolean(openId)}
+      onCloseDetail={() => { setOpenId(null); setView(null); }}
+      expanded={expanded}
+      onExpandedChange={(next) => setView(next ? "full" : null)}
+      detail={openId ? (
+        <DialerSessionDetail
+          key={openId}
+          sessionId={openId}
+          userEmail={userEmail}
+          onWork={onWork}
+          onClose={() => { setOpenId(null); setView(null); }}
+          onExpand={expanded ? undefined : () => setView("full")}
+          onCollapse={expanded ? () => setView(null) : undefined}
+          onChanged={() => void q.refetch()}
+        />
+      ) : null}
+    />
+  );
+}
+
+/** The Twilio adapter, created once in the browser; null until loaded or when the optional peer is missing. */
+function useDefaultTransport(provided?: SoftphoneTransport): SoftphoneTransport | null {
+  const [loaded, setLoaded] = useState<SoftphoneTransport | null>(null);
+  useEffect(() => {
+    if (provided) return;
+    let live = true;
+    import("../lib/twilio-transport").then((m) => { if (live) setLoaded(m.createTwilioTransport()); }).catch(() => undefined);
+    return () => { live = false; };
+  }, [provided]);
+  return provided ?? loaded;
+}
+
+/** Every field of the session in one card; re-read when the call list changes. */
+function SessionDetails({ sessionId, version }: { sessionId: string; version: number }) {
+  const q = useG8Query(async (signal) => dataOf<SessionDetail>(await g8Get(`/dialer/sessions/${encodeURIComponent(sessionId)}`, undefined, { signal })), [sessionId, version]);
+  const d = q.data;
+  if (q.error) return <ApiError error={q.error} title="Could not load the session" onRetry={() => void q.refetch()} />;
+  if (!d) return <Skeleton className="h-24 w-full" aria-label="Loading session details" />;
+  const dash = "";
+  return (
+    <SectionCard title="Session details">
+      <KeyValueList
+        columns={1}
+        items={[
+          { label: "Name", value: d.name ?? dash },
+          { label: "Status", value: String(d.status ?? dash).toLowerCase() },
+          { label: "List", value: d.list_title ?? d.list_id ?? dash },
+          { label: "Mode", value: d.dialing_mode ? `${d.dialing_mode}${d.dialing_mode === "parallel" ? ` (${Math.min(4, Math.max(1, d.parallel_count ?? 2))} at once)` : ""}` : dash },
+          { label: "Caller ID", value: d.from_phone ?? dash },
+          { label: "Contacts", value: d.counts?.total ?? dash },
+          { label: "Dialed", value: d.counts?.total_dialed ?? dash },
+          { label: "Left in queue", value: d.counts?.queue_remaining ?? dash },
+          { label: "Voicemails", value: d.live_state?.voicemail_calls ?? dash },
+        ]}
+      />
+    </SectionCard>
+  );
+}
+
+function SessionTab(props: DialerScreenProps & { onCalls: (calls: LiveCall[]) => void }) {
+  const [sessionId, setSessionId] = useUrlState("session", props.sessionId ?? "");
+  const [list, setList] = useState<{ id?: string; title?: string } | null>(props.listId ? { id: props.listId, title: props.listTitle } : null);
+  const [calls, setCalls] = useState<LiveCall[]>([]);
+  const [selected, setSelected] = useState<LiveCall | null>(null);
+  const [batch, setBatch] = useState<NextBatchResult | null>(null);
+  const transport = useDefaultTransport(props.transport);
+  const waiting = useMemo(() => calls.find(needsDisposition) ?? null, [calls]);
+  const focus = selected ?? waiting;
+  const { onCalls } = props;
+  useEffect(() => { onCalls(calls); }, [calls, onCalls]);
+
+  if (!sessionId && !list) {
+    return (
+      <SectionCard title="Who do you want to call?" description="Pick a contact list. Creating a session dials nobody; each batch is confirmed before it goes out.">
+        <ListPicker type="contacts" allowCreate={false} onChange={(l: ListSummary) => setList({ id: String(l.id), title: l.title })} />
+      </SectionCard>
+    );
+  }
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
+      <CallQueue
+        sessionId={sessionId || undefined}
+        userId={props.userId}
+        userEmail={props.userEmail}
+        listId={list?.id}
+        listTitle={list?.title}
+        onSessionCreated={setSessionId}
+        onBatch={setBatch}
+        onCalls={setCalls}
+        onSelectCall={setSelected}
+      />
+      <div className="space-y-4">
+        {props.userId && transport ? (
+          <Softphone userId={props.userId} transport={transport} conferenceName={batch?.conference_name} joinMuted={(batch?.batch?.length ?? 1) > 1} />
+        ) : props.userId ? (
+          <Skeleton className="h-24 w-full" aria-label="Loading softphone" />
+        ) : (
+          <SectionCard title="Softphone"><p className="text-sm text-muted-foreground">Pass the rep's user id to take calls in this browser.</p></SectionCard>
+        )}
+        {sessionId ? (
+          <>
+            <SessionDetails sessionId={sessionId} version={calls.length} />
+            <DispositionPanel key={`outcome-${focus?.call_id}`} call={focus} onSaved={() => setSelected(null)} />
+            {focus ? (
+              <>
+                <TranscriptViewer key={`transcript-${focus.call_id}`} roomName={focus.room_name ?? focus.call_id} live={isLiveCall(focus)} />
+                {props.renderDetailActions ? <div className="flex flex-wrap gap-2">{props.renderDetailActions(focus)}</div> : null}
+                {(props.extraDetailTabs ?? []).map((t) => <SectionCard key={t.id} title={t.label}>{t.render(focus)}</SectionCard>)}
+              </>
+            ) : (
+              <EmptyState title="Nothing on screen" description="The transcript of the call you select shows here." />
+            )}
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function DialerScreen(props: DialerScreenProps) {
+  const [tab, setTab] = useUrlState("tab", "session");
+  const [, setView] = useUrlState("view");
+  const [, setSession] = useUrlState("session");
+  const [calls, setCalls] = useState<LiveCall[]>([]);
+  const active = TABS.some((t) => t.id === tab) ? tab : "session";
+  // The header counters describe the Session tab's calls; drop them when it unmounts so they are never stale.
+  useEffect(() => { if (active !== "session") setCalls([]); }, [active]);
+  const live = calls.filter(isLiveCall).length;
+  const stats = calls.length > 0
+    ? [
+        { label: "On calls now", value: live, tone: live > 0 ? ("positive" as const) : ("neutral" as const) },
+        { label: "Need an outcome", value: calls.filter(needsDisposition).length, tone: calls.some(needsDisposition) ? ("warning" as const) : ("neutral" as const) },
+        { label: "Voicemails", value: calls.filter((c) => c.is_voicemail).length },
+        { label: "Calls this session", value: calls.length },
+      ]
+    : undefined;
+  return (
+    <ScreenLayout
+      className={props.className}
+      title="Dialer"
+      description="Call a list batch by batch, take calls in the browser and record every outcome."
+      icon={<Phone className="size-5" />}
+      actions={props.toolbarActions}
+      tabs={TABS}
+      activeTab={active}
+      onTabChange={(id) => setTab(id)}
+      stats={stats}
+    >
+      {active === "session" ? <SessionTab {...props} onCalls={setCalls} /> : null}
+      {active === "sessions" ? <SessionsTab userEmail={props.userEmail} onWork={(id) => { setSession(id); setView(null); setTab("session"); }} /> : null}
+      {active === "history" ? <CallHistory userEmail={props.userEmail} /> : null}
+    </ScreenLayout>
+  );
+}