@graph8/sdk 0.362.0 → 0.370.0

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>
+  );
+}

package/blocks/dialer/components/dialer-session-detail.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+/**
+ * DialerSessionDetail: one dialer session as a complete record. Tabs: Overview (stats and every session field), Calls (the
+ * calls in the session with hang up, mute and confirmed voicemail drop) and Queue (contacts still waiting, with skip).
+ * Header actions: Pause, Resume (dials the next contacts, so it is confirmed), Stop (hangs up live calls, confirmed) and
+ * "Work this session" (hands the id to the caller so the calling workspace can take over).
+ *
+ * SDK operations, in order:
+ *   1. GET /dialer/sessions/{id}/queue-stats + GET /dialer/sessions/{id}   read    (polled every 5s via useDialerSession)
+ *   2. POST /dialer/sessions/{id}/pause                                      write   (hangs up live calls)
+ *   3. POST /voice/dialer/sessions/{id}/resume { max_contacts }              EXTERNAL -> ConfirmSpendDialog first (places real calls)
+ *   4. POST /dialer/sessions/{id}/stop                                       write   -> ConfirmSpendDialog (one-way, hangs up live calls)
+ * Calls and queue use LiveCallsTable and WaitingContacts (see those files for their operations and confirmations).
+ * Full-page mode: pass `expanded` plus `onExpand` / `onCollapse` (DialerScreen ties them to `?view=full`).
+ */
+import { useState, type ReactNode } from "react";
+import { Phone } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatStrip } from "@/g8/components/screen/stat-strip";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Post } from "@/g8/lib/g8-client";
+import { useDialerSession } from "../hooks/use-dialer-session";
+import { isLiveCall, isSessionOver, needsDisposition, normalizeStatus } from "../lib/dialer-types";
+import { WaitingContacts } from "./call-queue";
+import { LiveCallsTable } from "./live-calls-table";
+import { pluralWord } from "@/g8/lib/plural";
+
+export interface DialerSessionDetailProps {
+  sessionId: string;
+  /** Needed by pause on some orgs; optional. */
+  userEmail?: string;
+  /** Show "Work this session" and call this with the id. */
+  onWork?: (sessionId: string) => void;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after pause, resume or stop succeeded (refresh your list). */
+  onChanged?: () => void;
+  /** Extra buttons in the header. */
+  actions?: ReactNode;
+  className?: string;
+}
+
+function tone(status: string) {
+  return status === "active" ? "positive" : status === "paused" ? "warning" : status === "completed" || status === "stopped" ? "neutral" : "info";
+}
+
+export function DialerSessionDetail({ sessionId, userEmail, onWork, onClose, onExpand, onCollapse, onChanged, actions, className }: DialerSessionDetailProps) {
+  const session = useDialerSession(sessionId);
+  const [version, setVersion] = useState(0);
+  const [asking, setAsking] = useState<"resume" | "stop" | null>(null);
+  const changed = () => { setVersion((v) => v + 1); session.refresh(); onChanged?.(); };
+  const base = `/dialer/sessions/${encodeURIComponent(sessionId)}`;
+  const pause = useG8Mutation(() => g8Post(`${base}/pause`, undefined, { query: { user_email: userEmail } }), { onSuccess: changed });
+  const stop = useG8Mutation(() => g8Post(`${base}/stop`), { onSuccess: () => { setAsking(null); changed(); }, onError: () => setAsking(null) });
+  const detail = session.detail;
+  const mode = detail?.dialing_mode ?? "power";
+  const count = mode === "parallel" ? Math.min(4, Math.max(1, detail?.parallel_count ?? 2)) : 1;
+  const resume = useG8Mutation(() => g8Post(`/voice/dialer/sessions/${encodeURIComponent(sessionId)}/resume`, { max_contacts: count }), { onSuccess: () => { setAsking(null); changed(); }, onError: () => setAsking(null) });
+
+  if (!session.stats && !session.error) return <Skeleton className="h-48 w-full" aria-label="Loading session" />;
+  const status = normalizeStatus(session.stats?.status ?? detail?.status);
+  const over = isSessionOver(status);
+  const calls = session.calls;
+  const failure = session.error ?? pause.error ?? stop.error ?? resume.error;
+
+  const header = (
+    <>
+      {onWork && !over ? <Button size="sm" variant="outline" onClick={() => onWork(sessionId)}><Phone className="mr-1 size-4" />Work this session</Button> : null}
+      {status === "active" ? <Button size="sm" variant="outline" disabled={pause.loading} loading={pause.loading} onClick={() => void pause.mutate(undefined)}>Pause</Button> : null}
+      {status === "paused" ? <Button size="sm" variant="outline" onClick={() => setAsking("resume")}>Resume</Button> : null}
+      {!over ? <Button size="sm" variant="outline" onClick={() => setAsking("stop")}>Stop</Button> : null}
+      {actions}
+    </>
+  );
+  const overview = (
+    <div className="space-y-4">
+      <StatStrip
+        items={[
+          { label: "Left in queue", value: session.stats?.queue_remaining ?? detail?.counts?.queue_remaining ?? 0 },
+          { label: "On calls now", value: calls.filter(isLiveCall).length, tone: calls.some(isLiveCall) ? "positive" : "neutral" },
+          { label: "Need an outcome", value: calls.filter(needsDisposition).length, tone: calls.some(needsDisposition) ? "warning" : "neutral" },
+          { label: "Voicemails", value: detail?.live_state?.voicemail_calls ?? calls.filter((c) => c.is_voicemail).length },
+        ]}
+      />
+      <SectionCard title="Session details">
+        <KeyValueList
+          columns={2}
+          items={[
+            { label: "Name", value: detail?.name ?? "" },
+            { label: "Status", value: status },
+            { label: "List", value: detail?.list_title ?? detail?.list_id ?? "" },
+            { label: "Mode", value: detail?.dialing_mode ? `${detail.dialing_mode}${detail.dialing_mode === "parallel" ? ` (${count} at once)` : ""}` : "" },
+            { label: "Caller ID", value: detail?.from_phone ?? "" },
+            { label: "Contacts", value: detail?.counts?.total },
+            { label: "Dialed", value: detail?.counts?.total_dialed },
+            { label: "Not dialed yet", value: detail?.counts?.total_undialed },
+            { label: "Session id", value: sessionId, mono: true, wide: true },
+          ]}
+        />
+      </SectionCard>
+    </div>
+  );
+
+  return (
+    <div className={className}>
+      {failure ? <ApiError error={failure} title="Session problem" onRetry={() => session.refresh()} /> : null}
+      <DetailPanel
+        title={detail?.name ?? "Dialing session"}
+        subtitle={detail?.list_title ?? undefined}
+        badges={<StatusPill tone={tone(status)} dot>{status || "unknown"}</StatusPill>}
+        actions={header}
+        onClose={onClose}
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+        tabs={[
+          { id: "overview", label: "Overview", content: overview },
+          { id: "calls", label: "Calls", count: calls.length, content: <LiveCallsTable sessionId={sessionId} calls={calls} onChanged={changed} /> },
+          { id: "queue", label: "Queue", content: <WaitingContacts sessionId={sessionId} version={version} onSkipped={changed} /> },
+        ]}
+      />
+      <ConfirmSpendDialog
+        open={asking === "resume"}
+        tier="external"
+        title={count > 1 ? `Resume and dial the next ${count} ${pluralWord(count, "contact")}?` : "Resume and dial the next contact?"}
+        description="This places real phone calls to people on the list and reserves credits for each attempt."
+        confirmLabel="Resume and dial"
+        recipients={count}
+        confirming={resume.loading}
+        onConfirm={() => void resume.mutate(undefined)}
+        onCancel={() => setAsking(null)}
+      />
+      <ConfirmSpendDialog
+        open={asking === "stop"}
+        tier="destructive"
+        title="Stop this session?"
+        description="Every live call is hung up and the session is completed. It cannot be resumed."
+        confirmLabel="Stop session"
+        affected={calls.filter(isLiveCall).length}
+        confirming={stop.loading}
+        onConfirm={() => void stop.mutate(undefined)}
+        onCancel={() => setAsking(null)}
+      />
+    </div>
+  );
+}

package/blocks/dialer/components/live-calls-table.tsx

@@ -18,8 +18,12 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { g8Post } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { contactName, isLiveCall, normalizeStatus, type LiveCall } from "../lib/dialer-types";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 
 export interface LiveCallsTableProps {
+  /** 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;
   sessionId: string;
   calls: LiveCall[];
   /** Called after a control succeeded; refresh the session here. */
@@ -29,7 +33,7 @@ export interface LiveCallsTableProps {
   className?: string;
 }
 
-export function LiveCallsTable({ sessionId, calls, onChanged, onSelect, className }: LiveCallsTableProps) {
+export function LiveCallsTable({ linkParam, sessionId, calls, onChanged, onSelect, className }: LiveCallsTableProps) {
   const [voicemailFor, setVoicemailFor] = useState<LiveCall | null>(null);
   // Per-row busy state: only the row being acted on is disabled, not every call in the table.
   const [busy, setBusy] = useState<ReadonlySet<string>>(new Set());
@@ -71,8 +75,8 @@ export function LiveCallsTable({ sessionId, calls, onChanged, onSelect, classNam
             const live = isLiveCall(call);
             const rowBusy = busy.has(call.call_id);
             return (
-              <TableRow key={call.call_id} className={onSelect ? "cursor-pointer" : undefined} onClick={() => onSelect?.(call)}>
-                <TableCell className="font-medium">{contactName(call)}</TableCell>
+              <TableRow key={call.call_id} className={onSelect ? "cursor-pointer" : undefined} {...(onSelect ? rowActivationProps(() => onSelect(call)) : {})}>
+                <TableCell className="font-medium">{onSelect ? <RecordLink param={linkParam} id={call.call_id} onOpen={() => onSelect(call)}>{contactName(call)}</RecordLink> : contactName(call)}</TableCell>
                 <TableCell>{call.to_phone}</TableCell>
                 <TableCell className="capitalize">{call.is_voicemail ? "voicemail" : normalizeStatus(call.status)}{call.disposition ? ` · ${call.disposition}` : ""}</TableCell>
                 <TableCell className="space-x-1 text-right" onClick={(e) => e.stopPropagation()}>

package/blocks/dialer/components/session-start-form.tsx

@@ -16,6 +16,7 @@ import { g8Post } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useDialerNumbers } from "../hooks/use-dialer-numbers";
 import { dataOf, type DialerMode } from "../lib/dialer-types";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface SessionStartFormProps {
   /** The rep these calls are attributed to. An organisation API key has no user of its own, so you name one. */
@@ -30,6 +31,7 @@ export interface SessionStartFormProps {
 }
 
 export function SessionStartForm({ userId, userEmail, listId: initialListId = "", listTitle, onCreated, className }: SessionStartFormProps) {
+  const brand = useBrand();
   const { numbers, loading, error, refetch } = useDialerNumbers();
   const [listId, setListId] = useState(initialListId);
   const [typedUserId, setTypedUserId] = useState("");
@@ -55,7 +57,7 @@ export function SessionStartForm({ userId, userEmail, listId: initialListId = ""
         user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       });
       const sessionId = dataOf<{ session_id?: string }>(env).session_id;
-      if (!sessionId) throw new Error("graph8 did not return a session id");
+      if (!sessionId) throw new Error(`${brand.linkLabel} did not return a session id`);
       return { sessionId, mode, parallelCount: count, fromPhone: chosenPhone };
     },
     { onSuccess: onCreated },
@@ -72,7 +74,7 @@ export function SessionStartForm({ userId, userEmail, listId: initialListId = ""
         {userId ? null : (
           <div className="space-y-1">
             <Label htmlFor="ds-user">Rep user id</Label>
-            <Input id="ds-user" value={typedUserId} onChange={(e) => setTypedUserId(e.target.value)} placeholder="graph8 user id" />
+            <Input id="ds-user" value={typedUserId} onChange={(e) => setTypedUserId(e.target.value)} placeholder={`${brand.linkLabel} user id`} />
           </div>
         )}
         <div className="space-y-1">

package/blocks/dialer/components/softphone.tsx

@@ -22,6 +22,7 @@ import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { dataOf } from "../lib/dialer-types";
 import type { SoftphoneTransport } from "../lib/softphone-transport";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface SoftphoneProps {
   /** The rep whose identity the credential is minted for. */
@@ -38,6 +39,7 @@ export interface SoftphoneProps {
 export type SoftphoneState = "off" | "connecting" | "ready" | "in-call" | "error";
 
 export function Softphone({ userId, transport, conferenceName, joinMuted, onStateChange, className }: SoftphoneProps) {
+  const brand = useBrand();
   const [state, setState] = useState<SoftphoneState>("off");
   const [muted, setMuted] = useState(false);
   const [expiring, setExpiring] = useState(false);
@@ -61,7 +63,7 @@ export function Softphone({ userId, transport, conferenceName, joinMuted, onStat
   const mint = useG8Mutation(async () => {
     const env = await g8Get("/dialer/sessions/token", { user_id: userId });
     const { token, identity } = dataOf<{ token?: string; identity?: string }>(env);
-    if (!token) throw new Error("graph8 did not return a softphone credential");
+    if (!token) throw new Error(`${brand.linkLabel} did not return a softphone credential`);
     return { token, identity };
   });
 

package/blocks/enrichment/README.md

@@ -5,14 +5,26 @@ contacts of a list in one job, and manage the provider pipelines behind it. Buil
 
 Install: `npx @graph8/sdk add enrichment` (installs `foundation`, `crm` and `lists` first).
 
+## Screens
+
+`EnrichmentScreen` is the finished enrichment page; mount it with no props. Tabs (`?tab=`): **Enrich a list** (pick a list,
+tick contacts, run a bulk enrichment with preflight, confirmed price, progress and cancel; open a contact to look it up
+or verify its email), **Look up** (one person or company, and email verification), **Pipelines** (a list's saved
+provider waterfalls: create, delete) and **Providers** (graph8-funded vs your own key, credits per action; keys are
+added in graph8 settings, so it links out). Every paid step goes through the confirmation dialog.
+Also a **Jobs** tab (`?job=`, `EnrichmentJobDetail`: live progress, counts, credits, provider errors, cancel; jobs started this session are listed, any job id can be opened) and a pipeline detail (`?pipeline=`: steps, credential status, missing keys). `?view=full` opens any detail full-page.
+Slots: `toolbarActions`, `renderDetailActions(contact)`, `extraDetailTabs`.
+
+Prerequisites: `crm` and `lists` installed, proxy allowlist `enrichment`, `lists`, `contacts`, `companies`; provider keys and credits as below.
+
 ## What you get
 
 | Component | Use it for | Props |
 |---|---|---|
 | `EnrichButton` | Look up one person/company; optionally apply the found fields to the record | `kind`, `lookup`, `record`, `onResult`, `onApplied` |
-| `EmailVerifyBadge` | Status chip (Unverified / Valid / Risky / Invalid) with a Verify action | `email`, `initialStatus`, `onVerified`, `readOnly` |
+| `EmailVerifyBadge` | Status chip (Unverified / Valid / Risky / Invalid / Couldn't verify) read from the verifier's own result codes: catch-all (`ok_for_all`) is Risky, a hard failure (`email_disabled`, `invalid_mx`, `dead_server`, `error`, ...) is Invalid and offers no second paid Verify, `unknown` (what the endpoint answers when the verifier itself fails, uncharged) is "Couldn't verify" with Try again. The verdict is shown, not saved to the contact (`POST /enrichment/verify-email` takes only `email`) | `email`, `initialStatus`, `onVerified`, `readOnly` |
 | `BulkEnrichPanel` | Fill work email / phones for many contacts of a list: preflight, estimate, job, progress | `listId`, `contactIds`, `defaultProviders`, `onDone` |
-| `WaterfallConfig` | Saved pipelines of a list and a form to create one | `listId`, `onChanged` |
+| `WaterfallConfig` | Saved pipelines of a list and a form to create one. Creating is idempotent per field and list: if the list already has a pipeline for the field, the API returns it (`created: false`, its own providers) and the form says "Already exists, reused" | `listId`, `onChanged` |
 
 `BulkEnrichPanel` with no props is a complete page (choose a list, tick contacts, enrich), so it can be mounted as a
 route as is; give it `listId` and `contactIds` to embed it. For that reason this block depends on `lists`.