@graph8/sdk 0.362.0 → 0.373.0

package/blocks/dialer/components/call-contact-button.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+/**
+ * CallContactButton: call ONE contact from any screen (a contact page, a table row), through the same
+ * Twilio-backed dialer as CallQueue, with the rep's softphone joining the call.
+ *
+ * Why manual-dial (and not next-batch's force_next_contact): `force_next_contact` only picks a contact that is IN
+ * the session's list, and next-batch also dials the rest of the batch. `manual-dial` places exactly one call to the
+ * number you pass, attaches it to an existing session (same analytics and call log), and answers with the
+ * `conference_name` the softphone joins. It needs a PAUSED or COMPLETED session (an idle ACTIVE one is re-paused by
+ * voice; one with live calls is refused) and refuses DRAFT, so the picker offers paused and completed sessions.
+ *
+ * SDK operations, in order:
+ *   0. GET  /team-members/me     (teamMembers.getMyTeamMember)   read - only without `userId`: the rep is the person who
+ *        minted a PERSONAL key (`propelauth_user_id`, `email`). An organisation key is refused there (403), so the
+ *        panel then asks for `userId`: an org key is not a rep.
+ *   1. GET  /voice/dialer/sessions?status=PAUSED|COMPLETED  (voice.listDialerSessions)   read - the session to log under
+ *   2. GET  /voice/dialer/numbers                           (voice.listDialerNumbers)    read - caller ID
+ *   3. GET  /dialer/sessions/token?user_id=                 (Softphone, EXTERNAL, confirmed inside Softphone)
+ *   4. POST /dialer/parallel-calls/manual-dial              (dialer.manualDial)          EXTERNAL -> ConfirmSpendDialog
+ *        CALLS A REAL PERSON and spends dialer credits. An unknown number is matched to a contact (or one is created).
+ *        The response's `conference_name` goes to the Softphone, which joins with audio.
+ *
+ * The call is only offered once the softphone is ready, so the rep is never late to their own call (the response
+ * is the first moment the conference name is known; a softphone that registers after it would join late).
+ */
+import { useEffect, useRef, useState } from "react";
+import { Phone } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { FirstNotice } from "@/g8/components/paging-notices";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useCurrentMember } from "@/g8/pickers/hooks/use-current-member";
+import { useDialerNumbers } from "../hooks/use-dialer-numbers";
+import { dataOf } from "../lib/dialer-types";
+import type { SoftphoneTransport } from "../lib/softphone-transport";
+import { Softphone, type SoftphoneState } from "./softphone";
+
+export interface CallableContact {
+  id?: string | number | null;
+  first_name?: string | null;
+  last_name?: string | null;
+  full_name?: string | null;
+  name?: string | null;
+  email?: string | null;
+  company?: string | null;
+  company_name?: string | null;
+  phone?: string | null;
+  mobile_phone?: string | null;
+  direct_phone?: string | null;
+  work_phone?: string | null;
+}
+
+export interface CallContactButtonProps {
+  contact: CallableContact;
+  /** The rep's user id: the softphone credential and the call are minted for it. Without it the button explains. */
+  userId?: string;
+  /** The rep's email. Only used together with `userId`; without `userId` both come from the personal key's user. */
+  userEmail?: string;
+  /** Log the call under this session (PAUSED or COMPLETED). Omit to pick one. */
+  sessionId?: string;
+  /** Caller ID. Defaults to the session's number, else the first dialer number. */
+  fromPhone?: string;
+  /** Your audio client (`createTwilioTransport()`); by default the Twilio adapter loads on demand. */
+  transport?: SoftphoneTransport;
+  label?: string;
+  onCalled?: (result: ManualDialResult) => void;
+  className?: string;
+}
+
+export interface ManualDialResult {
+  session_id?: string;
+  status?: string;
+  conference_name?: string | null;
+  calls?: Array<{ call_id?: string; to_phone?: string; status?: string }>;
+}
+
+interface SessionOption {
+  session_id: string;
+  name?: string | null;
+  status?: string | null;
+  from_phone?: string | null;
+}
+
+const CALLABLE = ["PAUSED", "COMPLETED"];
+
+/** Every distinct phone on the contact, labelled by field. */
+export function contactPhones(c: CallableContact): Array<{ field: string; phone: string }> {
+  const out: Array<{ field: string; phone: string }> = [];
+  for (const field of ["mobile_phone", "direct_phone", "work_phone", "phone"] as const) {
+    const phone = (c[field] ?? "").trim();
+    // A locked field arrives masked as "***" (search results before saving): never offer it as a number.
+    if (phone && !phone.includes("*") && !out.some((p) => p.phone === phone)) out.push({ field, phone });
+  }
+  return out;
+}
+
+function displayName(c: CallableContact): string {
+  return c.full_name || c.name || [c.first_name, c.last_name].filter(Boolean).join(" ") || c.email || "this contact";
+}
+
+/** Dialer sessions per read and the most pages read per status; beyond that the picker says so. */
+const SESSION_PAGE = 25;
+const SESSION_PAGES = 8;
+
+export function CallContactButton(props: CallContactButtonProps) {
+  const { contact, label = "Call", className } = props;
+  const [open, setOpen] = useState(false);
+  const phones = contactPhones(contact);
+  if (open) return <CallContactPanel {...props} onClose={() => setOpen(false)} />;
+  const name = displayName(contact);
+  // Closed: nothing is loaded, so a table of rows with this button makes no requests until one is clicked.
+  return (
+    <Button size="sm" variant="outline" className={className} disabled={phones.length === 0} title={phones.length === 0 ? `${name} has no phone number` : undefined} onClick={() => setOpen(true)}>
+      <Phone className="mr-1 h-4 w-4" aria-hidden /> {label}
+    </Button>
+  );
+}
+
+function CallContactPanel(props: CallContactButtonProps & { onClose: () => void }) {
+  const { contact, sessionId, fromPhone, transport, onCalled, onClose, className } = props;
+  // The shared resolver (foundation): the same one DialerScreen uses, so the two cannot drift apart.
+  const me = useCurrentMember({ enabled: !props.userId });
+  const userId = props.userId ?? me.userId;
+  // user_id and user_email must describe the same person: a userEmail without a userId (e.g. a history filtered to
+  // another rep) is ignored, and both come from /team-members/me.
+  const userEmail = props.userId ? props.userEmail : me.email;
+  const phones = contactPhones(contact);
+  const [phone, setPhone] = useState(phones[0]?.phone ?? "");
+  const [session, setSession] = useState(sessionId ?? "");
+  const [caller, setCaller] = useState(fromPhone ?? "");
+  const [softphone, setSoftphone] = useState<SoftphoneState>("off");
+  const [confirming, setConfirming] = useState(false);
+  const [conference, setConference] = useState<string | null>(null);
+  const audio = useLazyTransport(transport, true);
+
+  // Every page of each status is read (25 per page) up to SESSION_PAGES pages; `capped` says the cap cut a status short.
+  const capped = useRef(false);
+  const sessions = useG8Query(
+    async (signal) => {
+      let cut = false;
+      const lists = await Promise.all(
+        CALLABLE.map(async (status) => {
+          const rows: SessionOption[] = [];
+          for (let page = 1; page <= SESSION_PAGES; page++) {
+            const got = dataOf<{ sessions?: SessionOption[] }>(await g8Get("/voice/dialer/sessions", { status, page, page_size: SESSION_PAGE, user_email: userEmail }, { signal })).sessions ?? [];
+            rows.push(...got);
+            if (got.length < SESSION_PAGE) return rows;
+          }
+          cut = true;
+          return rows;
+        }),
+      );
+      capped.current = cut;
+      return lists.flat();
+    },
+    [userEmail],
+    { enabled: !sessionId },
+  );
+  const numbers = useDialerNumbers();
+  const chosenSession = (sessions.data ?? []).find((s) => s.session_id === session);
+  const from = caller || chosenSession?.from_phone || numbers.numbers[0]?.phone_number || "";
+
+  const dial = useG8Mutation(async () => {
+    const env = await g8Post<ManualDialResult>("/dialer/parallel-calls/manual-dial", {
+      session_id: session,
+      user_id: userId,
+      user_email: userEmail,
+      to_phone: phone,
+      from_phone: from,
+      first_name: contact.first_name ?? undefined,
+      last_name: contact.last_name ?? undefined,
+      company: contact.company ?? contact.company_name ?? undefined,
+      contact_id: contact.id != null ? String(contact.id) : undefined,
+      email: contact.email ?? undefined,
+    });
+    return dataOf<ManualDialResult>(env);
+  }, { invalidates: ["dialer"] });
+
+  const confirm = async () => {
+    try {
+      const result = await dial.mutateAsync(undefined);
+      setConference(result.conference_name ?? null);
+      onCalled?.(result);
+    } catch {
+      // ApiError below shows why; nothing was dialed on a refusal.
+    } finally {
+      setConfirming(false);
+    }
+  };
+
+  const name = displayName(contact);
+  const missing = !userId
+    ? me.loading
+      ? "Finding your user..."
+      : "Calling from the browser needs the rep: pass `userId`, or use a personal API key (an organisation key is not a rep)."
+    : phones.length === 0
+      ? `${name} has no phone number.`
+      : !session
+        ? "Pick a paused or completed dialer session to log the call under."
+        : !from
+          ? "Pick the number to call from."
+          : softphone !== "ready" && softphone !== "in-call"
+            ? "Turn on the softphone first, so you are on the line when they answer."
+            : null;
+
+  const select = "h-9 w-full rounded-md border border-border bg-background px-2 text-sm";
+  return (
+    <div className={`space-y-3 rounded-lg border border-border p-3 text-sm ${className ?? ""}`} aria-label={`Call ${name}`}>
+      <div className="flex items-center justify-between">
+        <p className="font-medium">Call {name}</p>
+        <Button size="sm" variant="ghost" onClick={onClose}>Close</Button>
+      </div>
+      <select aria-label="Number to call" className={select} value={phone} onChange={(e) => setPhone(e.target.value)}>
+        {phones.map((p) => <option key={p.phone} value={p.phone}>{p.phone} ({p.field.replace("_", " ")})</option>)}
+      </select>
+      {!sessionId ? (
+        <select aria-label="Dialer session" className={select} value={session} onChange={(e) => setSession(e.target.value)}>
+          <option value="">{sessions.loading ? "Loading sessions..." : "Log the call under session..."}</option>
+          {(sessions.data ?? []).map((s) => <option key={s.session_id} value={s.session_id}>{s.name || s.session_id} ({(s.status ?? "").toLowerCase()})</option>)}
+        </select>
+      ) : null}
+      {!sessionId ? <FirstNotice force={capped.current} shown={(sessions.data ?? []).length} limit={0} noun="sessions" /> : null}
+      {!sessionId && sessions.data?.length === 0 ? (
+        <p className="text-muted-foreground">No paused or completed session yet. Start one on the Dialer screen and pause it; the call is logged under it.</p>
+      ) : null}
+      <select aria-label="Call from" className={select} value={from} onChange={(e) => setCaller(e.target.value)}>
+        {numbers.numbers.map((n) => <option key={n.phone_number} value={n.phone_number}>{n.friendly_name || n.phone_number}</option>)}
+        {from && !numbers.numbers.some((n) => n.phone_number === from) ? <option value={from}>{from}</option> : null}
+      </select>
+      {userId && audio ? (
+        <Softphone userId={userId} transport={audio} conferenceName={conference} onStateChange={setSoftphone} />
+      ) : null}
+      {sessions.error || numbers.error ? <ApiError error={sessions.error ?? numbers.error} title="Could not load the dialer" onRetry={() => { void sessions.refetch(); void numbers.refetch(); }} /> : null}
+      {dial.error ? <ApiError error={dial.error} title="The call was not placed" /> : null}
+      {conference ? <p role="status">Calling {name} at {phone}. You join the call through the softphone.</p> : null}
+      {missing ? <p className="text-muted-foreground">{missing}</p> : null}
+      <Button disabled={Boolean(missing) || dial.loading} onClick={() => setConfirming(true)}>
+        <Phone className="mr-1 h-4 w-4" aria-hidden /> Call {phone}
+      </Button>
+      <ConfirmSpendDialog
+        open={confirming}
+        tier="external"
+        title={`Call ${name}?`}
+        description={`This calls ${phone} now from ${from}, through your softphone, and spends dialer credits per attempt and per connected minute.`}
+        recipients={1}
+        confirmLabel="Call now"
+        confirming={dial.loading}
+        onConfirm={() => void confirm()}
+        onCancel={() => setConfirming(false)}
+      />
+    </div>
+  );
+}
+
+/** The caller's transport, else the Twilio adapter loaded on demand once the panel opens. */
+function useLazyTransport(provided: SoftphoneTransport | undefined, active: boolean): SoftphoneTransport | null {
+  const [loaded, setLoaded] = useState<SoftphoneTransport | null>(null);
+  useEffect(() => {
+    if (!active || provided || loaded) return;
+    let live = true;
+    import("../lib/twilio-transport").then((m) => { if (live) setLoaded(m.createTwilioTransport()); }).catch(() => undefined);
+    return () => { live = false; };
+  }, [active, provided, loaded]);
+  return provided ?? loaded;
+}

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

@@ -0,0 +1,208 @@
+"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 { useCurrentMember } from "@/g8/pickers/hooks/use-current-member";
+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");
+  // Unscoped history defaults to YOUR calls (the signed-in member); typing another rep's email still overrides.
+  const me = useCurrentMember({ enabled: !userEmail && !contactId && !sessionId });
+  const rep = useDebounced(userEmail || typedEmail.trim() || me.email || "");
+  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

@@ -9,14 +9,18 @@
  * Org-wide history across all reps: use POST /voice/call-results/search (voice.searchCallResults) from a server recipe.
  */
 import { useState } from "react";
-import { Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+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 { 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,16 +35,20 @@ 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);
+  // The calls API pages by a growing `limit`: "Load more" asks for another page-worth and keeps the earlier calls.
+  const scope = `${contactId}|${repEmail}|${sessionId}|${limit}`;
+  const [size, setSize] = useState({ scope, rows: limit });
+  const rowsWanted = size.scope === scope ? size.rows : limit;
   const q = useG8Query(
     async (signal) => {
-      const env = await g8Get("/voice/dialer/calls", { contact_id: contactId, user_email: repEmail || undefined, parallel_session_id: sessionId, limit }, { signal });
+      const env = await g8Get("/voice/dialer/calls", { contact_id: contactId, user_email: repEmail || undefined, parallel_session_id: sessionId, limit: rowsWanted }, { signal });
       return dataOf<{ calls?: CallSummary[] }>(env).calls ?? [];
     },
-    [contactId, repEmail, sessionId, limit],
+    [contactId, repEmail, sessionId, rowsWanted],
     { enabled: scoped },
   );
 
@@ -58,14 +66,15 @@ export function CallLog({ contactId, userEmail, sessionId, limit = 25, onSelect,
   if (calls.length === 0) return <EmptyState className={className} title="No calls yet" description="Calls appear here after the dialer places them." />;
 
   return (
-    <Table className={className} aria-label="Call log">
+    <div className={className}>
+    <Table aria-label="Call log">
       <TableHeader>
         <TableRow><TableHead>When</TableHead><TableHead>Number</TableHead><TableHead>Outcome</TableHead><TableHead>Length</TableHead><TableHead>Summary</TableHead></TableRow>
       </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>
@@ -74,5 +83,12 @@ export function CallLog({ contactId, userEmail, sessionId, limit = 25, onSelect,
         ))}
       </TableBody>
     </Table>
+    {calls.length >= rowsWanted ? (
+      <div className="flex items-center justify-between gap-3 py-2 text-sm text-muted-foreground">
+        <span role="status">Showing {calls.length.toLocaleString()} calls</span>
+        <Button size="sm" variant="outline" loading={q.loading} onClick={() => setSize({ scope, rows: rowsWanted + limit })}>Load more</Button>
+      </div>
+    ) : null}
+    </div>
   );
 }

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

@@ -50,12 +50,12 @@ function Stat({ label, value }: { label: string; value: string | number }) {
   return (
     <div className="rounded-lg border p-3">
       <div className="text-xs uppercase text-muted-foreground">{label}</div>
-      <div className="text-lg font-semibold capitalize">{value}</div>
+      <div className="text-lg font-medium capitalize">{value}</div>
     </div>
   );
 }
 
-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 });
@@ -71,7 +71,7 @@ function WaitingContacts({ sessionId, version, onSkipped }: { sessionId: string;
   const rows = (grid.data ?? []).filter((r) => !r.callresult?.disposition);
   return (
     <div className="space-y-2">
-      <h3 className="text-sm font-semibold">Up next</h3>
+      <h3 className="text-sm font-medium">Up next</h3>
       {skip.error ? <ApiError error={skip.error} title="Could not skip that contact" /> : null}
       <Table aria-label="Contacts waiting">
         <TableHeader>
@@ -141,7 +141,7 @@ export function CallQueue({ sessionId: initialId, userId, userEmail, listId, lis
   return (
     <div className={`space-y-4 ${className ?? ""}`}>
       <header className="flex flex-wrap items-center justify-between gap-2">
-        <h2 className="text-base font-semibold">{session.detail?.name ?? "Dialing session"}</h2>
+        <h2 className="text-base font-medium">{session.detail?.name ?? "Dialing session"}</h2>
         <div className="flex gap-2">
           <Button disabled={!stats || over || nextBatch.loading} onClick={() => setConfirming(true)}>Dial next batch</Button>
           <Button variant="outline" disabled={!stats || over} onClick={() => void pause.mutate(undefined)}>Pause</Button>