@graph8/sdk 0.361.0 → 0.370.0

package/blocks/deals/hooks/use-default-owner.ts

@@ -0,0 +1,60 @@
+"use client";
+
+/**
+ * useDefaultOwner: who owns a deal created in the UI when nobody picked an owner.
+ *
+ * graph8 requires an owner on every deal. The rule (documented in the README defaults, so no agent has to ask):
+ *   1. the API key's own user: GET /team-members/me (roster record of the person who minted a PERSONAL key);
+ *   2. otherwise the first active team member of GET /team-members (an organisation key has no person, and
+ *      /team-members/me answers 403 for it), which the screen shows in an owner picker the person can change.
+ *
+ * SDK operations, in order:
+ *   1. GET /team-members/me   (teamMembers.getMyTeamMember)  read  - may be refused for an organisation key
+ *   2. GET /team-members      (teamMembers.listTeamMembers)  read  - the picker options
+ *
+ * `owner_id` accepts a user id or an email; this hook prefers the identity-provider user id and falls back to the email.
+ */
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { dataOf } from "../lib/deals-types";
+
+interface TeamMember {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  propelauth_user_id?: string | null;
+  status?: string | null;
+}
+
+export interface OwnerOption {
+  /** The value to send as `owner_id`. */
+  id: string;
+  name: string;
+  email?: string | null;
+}
+
+export type OwnerSource = "key" | "first-member" | "none";
+
+function toOption(m: TeamMember | null | undefined): OwnerOption | null {
+  const id = m?.propelauth_user_id || m?.email || null;
+  return m && id ? { id, name: m.name || m.email || id, email: m.email } : null;
+}
+
+function membersOf(env: unknown): TeamMember[] {
+  const inner = dataOf<unknown>(env);
+  if (Array.isArray(inner)) return inner as TeamMember[];
+  const o = inner as { items?: unknown; team_members?: unknown } | null;
+  const list = o?.items ?? o?.team_members;
+  return Array.isArray(list) ? (list as TeamMember[]) : [];
+}
+
+export function useDefaultOwner() {
+  const me = useG8Query(async (signal) => toOption(dataOf<TeamMember>(await g8Get("/team-members/me", undefined, { signal }))), []);
+  const team = useG8Query(async (signal) => membersOf(await g8Get("/team-members", { limit: 200 }, { signal })).filter((m) => !m.status || m.status === "active").map(toOption).filter((o): o is OwnerOption => o !== null), []);
+  const mine = me.data ?? null; // a refused /team-members/me (organisation key) is expected, not an error to show
+  const owners = team.data ?? [];
+  const all = mine && !owners.some((o) => o.id === mine.id) ? [mine, ...owners] : owners;
+  const defaultOwner = mine ?? all[0] ?? null;
+  const source: OwnerSource = mine ? "key" : defaultOwner ? "first-member" : "none";
+  return { owners: all, defaultOwner, source, loading: me.loading || (team.loading && !defaultOwner), error: all.length === 0 ? team.error : undefined, reload: team.refetch };
+}

package/blocks/deals/hooks/use-pipeline-deals.ts

@@ -15,6 +15,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { g8Get, g8Patch } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { invalidate } from "@/g8/lib/g8-cache";
 import type { Deal } from "../lib/deals-types";
 import { dataOf } from "../lib/deals-types";
 
@@ -42,7 +43,7 @@ export function usePipelineDeals(pipelineId: string | undefined, filters: Pipeli
       return all.slice(0, maxDeals);
     },
     [pipelineId, filters.search, filters.ownerId, maxDeals],
-    { enabled: Boolean(pipelineId) },
+    { enabled: Boolean(pipelineId), key: ["deals", "list", "board", { pipelineId, search: filters.search || undefined, ownerId: filters.ownerId || undefined, maxDeals }] },
   );
   useEffect(() => { if (query.data) setDeals(query.data); }, [query.data]);
 
@@ -53,6 +54,9 @@ export function usePipelineDeals(pipelineId: string | undefined, filters: Pipeli
     try {
       const saved = dataOf<Deal>(await g8Patch(`/deals/${encodeURIComponent(deal.id)}`, { stage_id: stageId, expected_revision: deal.revision ?? undefined, ...extra }));
       setDeals((all) => all.map((d) => (d.id === deal.id ? { ...d, ...saved } : d)));
+      // The deal's revision changed: a cached detail or history of it is out of date.
+      void invalidate(["deals", "detail"]);
+      void invalidate(["deals", "history"]);
       return saved;
     } catch (err) {
       // Roll back by re-reading the server's truth: a snapshot taken before the move could itself be stale.

package/blocks/deals/hooks/use-pipelines.ts

@@ -13,7 +13,7 @@ export function usePipelines() {
   const q = useG8Query(async (signal) => {
     const env = await g8Get<Pipeline[]>("/deals/pipelines", undefined, { signal });
     return (env.data ?? []).map((p) => ({ ...p, stages: sortedStages(p) }));
-  }, []);
+  }, [], { key: ["deals", "pipelines"] });
   const pipelines = q.data ?? [];
   return { ...q, pipelines, defaultPipeline: pipelines.find((p) => p.is_default) ?? pipelines[0] };
 }

package/blocks/deals/lib/deals-types.ts

@@ -80,6 +80,20 @@ export function sumAmounts(deals: ReadonlyArray<Pick<Deal, "amount">>): number {
   return deals.reduce((total, d) => total + (d.amount ?? 0), 0);
 }
 
+/**
+ * Money for a group of deals that may span currencies: one formatted total per currency, joined with " + "
+ * ("$1,200 + €300"). A single currency formats exactly like formatMoney. `valueOf` defaults to the amount sum.
+ */
+export function sumMoney(deals: ReadonlyArray<Deal>, valueOf: (group: ReadonlyArray<Deal>) => number = sumAmounts, fallbackCurrency?: string | null): string {
+  const groups = new Map<string, Deal[]>();
+  for (const d of deals) {
+    const key = d.currency || "USD";
+    groups.set(key, [...(groups.get(key) ?? []), d]);
+  }
+  if (groups.size <= 1) return formatMoney(valueOf(deals), deals[0]?.currency ?? fallbackCurrency);
+  return [...groups].map(([currency, group]) => formatMoney(valueOf(group), currency)).join(" + ");
+}
+
 /**
  * Probability-weighted value of open deals. This is an ESTIMATE computed here: the analytics endpoint refuses to
  * return a weighted total because a stage's probability defaults to 0 when nobody configured it, which would

package/blocks/dialer/README.md

@@ -9,6 +9,26 @@ browser, record outcomes, and review transcripts. Copy `DialerWorkspace` for the
 > voicemail, or mints a softphone credential without a confirm dialog first, and the block never auto-advances to
 > the next batch.
 
+## Screens
+
+- `DialerScreen` (`components/dialer-screen.tsx`): **Session** tab picks a list (ListPicker), creates a session (dials
+  nobody), then runs the queue: every batch, voicemail drop, softphone credential and stop is confirmed; finished calls
+  open the outcome panel and transcript. **Sessions** tab lists every session; a row opens `DialerSessionDetail` (stats, details, calls, queue; pause, confirmed resume, confirmed stop; `?tab=sessions&session=<id>`). **History** tab lists the rep's calls. Props are optional: `userId` (needed to
+  enable the browser softphone), `userEmail`, `listId`, `sessionId`, `transport` (default: the Twilio adapter, loaded
+  on demand, needs `@twilio/voice-sdk`). Resume a session with `?session=<id>`. Add `&view=full` to any detail (session, call, and the same in the other screens) to open it as a full page.
+- `CallLogScreen` (`components/call-log-screen.tsx`): history of one rep, contact or session with outcome filter and search;
+  open a call for recording, transcript and AI grade (`?id=<room_name>`), and **Call back** the number (`CallContactButton`). Needs a rep email (it asks) or a prop.
+- Slots on both: `toolbarActions`, `renderRowActions`, `renderDetailActions`, `extraDetailTabs`.
+- `CallContactButton` (`components/call-contact-button.tsx`): **call one contact from any screen**. Drop it into a
+  contact page's `renderDetailActions` (the apollo and outreach stacks do) or a row slot: `<CallContactButton contact={c} />`.
+  Closed, it loads nothing. Open: pick the number (masked `***` numbers are never offered), a PAUSED or COMPLETED
+  session to log the call under, and the caller ID; turn on the softphone; confirm (external, 1 recipient). It calls
+  `POST /dialer/parallel-calls/manual-dial` and the softphone joins the returned `conference_name`. The rep is
+  `userId` if passed, else the personal key's user (`GET /team-members/me`); an organisation key is not a rep, so it
+  then asks for `userId`. Why not `next-batch` with `force_next_contact`: that only picks a contact already in the
+  session's list and dials a whole batch.
+Scopes: `voice:read`, `voice:write`, `voice:run` (and `team:read` for `CallContactButton` without `userId`). A phone number must exist (buy or verify it in the graph8 app).
+
 ## How it works (read this before building)
 
 - graph8 places the calls **from its servers** into a conference. The rep's browser only **joins that
@@ -81,13 +101,22 @@ and the call log for a rep email. Pass `userId` / `userEmail` from your session
 - Voicemail drop plays the rep's cloned voice to a stranger's phone. The confirm dialog names the contact.
 - Another tenant's session id is a 404, the same as a missing one.
 - Manual dial (`POST /dialer/parallel-calls/manual-dial`, external) needs a PAUSED or COMPLETED session and can
-  create a contact; it is a server recipe here, not a component.
+  create a contact (an unknown number is matched to a contact or one is created). `CallContactButton` uses it.
+- **Late join.** The conference name of a batch is only known from the `next-batch` (or `manual-dial`) response; the
+  app learns the NEXT batch's name earlier over a WebSocket the API does not have, and the session read does not
+  expose it. Voice waits up to 2 s for the rep only when the name was announced, so an SDK softphone joins after the
+  dials go out and the first second of an instant answer can be missed (voice's late-join reconciliation still
+  connects the audio). Keep the softphone registered BEFORE dialing (`CallContactButton` only enables the call once
+  it is ready) so the join is a single `joinConference` the moment the response lands.
+- `next-batch` `user_email`: with a personal key the dialer's rep is the key's own user (naming someone else is a
+  403); with an organisation key the name is passed through but not vouched for, so voice keeps dialing without
+  moving the session to that rep.
 
 ## Operations
 
 | Operation | Method and path | Tier | Used by |
 |---|---|---|---|
-| `voice.listDialerNumbers` | GET /voice/dialer/numbers | read | SessionStartForm |
+| `voice.listDialerNumbers` | GET /voice/dialer/numbers | read | SessionStartForm, CallContactButton |
 | `dialer.createSessionDraft` | POST /dialer/sessions/draft | write | SessionStartForm |
 | `dialer.readQueueStats` | GET /dialer/sessions/{id}/queue-stats | read | useDialerSession |
 | `voice.getDialerSession` | GET /dialer/sessions/{id} | read | useDialerSession |
@@ -106,6 +135,9 @@ and the call log for a rep email. Pass `userId` / `userEmail` from your session
 | `voice.getCallTranscript` | GET /voice/dialer/calls/{room}/transcript | read | TranscriptViewer |
 | `voice.getCallGrading` | GET /voice/dialer/calls/{room}/grading | read | TranscriptViewer |
 | `voice.downloadCallRecording` | GET /voice/calls/{id}/recording | read | TranscriptViewer |
+| `teamMembers.getMyTeamMember` | GET /team-members/me | read | CallContactButton (only without `userId`) |
+| `voice.listDialerSessions` | GET /voice/dialer/sessions | read | CallContactButton |
+| `dialer.manualDial` | POST /dialer/parallel-calls/manual-dial | external | CallContactButton |
 
 ## Recipes (server side)
 

package/blocks/dialer/block.json

@@ -21,15 +21,19 @@
     "get_call_grading_voice_dialer_calls__room_name__grading_get",
     "get_call_transcript_voice_dialer_calls__room_name__transcript_get",
     "get_dialer_session_dialer_sessions__session_id__get",
+    "get_my_team_member_team_members_me_get",
     "hangup_session_call_dialer_sessions_calls_hangup_post",
     "list_calls_for_contact_voice_dialer_calls_get",
     "list_dialer_numbers_voice_dialer_numbers_get",
+    "list_dialer_sessions_voice_dialer_sessions_get",
     "list_voice_dispositions_voice_dispositions_get",
+    "manual_dial_dialer_parallel_calls_manual_dial_post",
     "mint_softphone_token_dialer_sessions_token_get",
     "mute_call_dialer_sessions_calls_mute_post",
     "pause_dialer_session_dialer_sessions__session_id__pause_post",
     "read_queue_stats_dialer_sessions__session_id__queue_stats_get",
     "read_session_grid_dialer_sessions__session_id__grid_post",
+    "resume_dialer_session_voice_dialer_sessions__session_id__resume_post",
     "set_call_disposition_dialer_parallel_calls_calls__livekit_room_name__disposition_patch",
     "skip_contact_dialer_sessions__session_id__calls_skip_contact_post",
     "stop_dialer_session_dialer_sessions__session_id__stop_post"
@@ -135,6 +139,61 @@
       "purpose": "The whole rep screen wiring queue, softphone, outcome panel and transcript together.",
       "operations": [],
       "tiers": []
+    },
+    {
+      "name": "DialerScreen",
+      "file": "components/dialer-screen.tsx",
+      "purpose": "Finished calling page: pick a list, run a session, softphone, outcomes, transcript and history.",
+      "operations": [
+        "get_dialer_session_dialer_sessions__session_id__get",
+        "list_dialer_sessions_voice_dialer_sessions_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "CallLogScreen",
+      "file": "components/call-log-screen.tsx",
+      "purpose": "Finished call history page with outcome filter, recording, transcript and AI grade, and Call back on a call (CallContactButton, confirmed); also exports CallHistory.",
+      "operations": [
+        "list_calls_for_contact_voice_dialer_calls_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "DialerSessionDetail",
+      "file": "components/dialer-session-detail.tsx",
+      "purpose": "One dialing session as a full record: stats, details, calls and queue, with pause, confirmed resume and confirmed stop.",
+      "operations": [
+        "get_dialer_session_dialer_sessions__session_id__get",
+        "pause_dialer_session_dialer_sessions__session_id__pause_post",
+        "read_queue_stats_dialer_sessions__session_id__queue_stats_get",
+        "resume_dialer_session_voice_dialer_sessions__session_id__resume_post",
+        "stop_dialer_session_dialer_sessions__session_id__stop_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    },
+    {
+      "name": "CallContactButton",
+      "file": "components/call-contact-button.tsx",
+      "purpose": "Call one contact from any screen (contact page, table row): pick the number, a paused or completed session and the caller ID, turn on the softphone, confirm (external), and the softphone joins the call.",
+      "operations": [
+        "get_my_team_member_team_members_me_get",
+        "list_dialer_sessions_voice_dialer_sessions_get",
+        "list_dialer_numbers_voice_dialer_numbers_get",
+        "manual_dial_dialer_parallel_calls_manual_dial_post"
+      ],
+      "tiers": [
+        "read",
+        "external"
+      ]
     }
   ],
   "hooks": [
@@ -222,6 +281,7 @@
     }
   ],
   "scopes": [
+    "team:read",
     "voice:read",
     "voice:run",
     "voice:write"
@@ -251,10 +311,16 @@
       "decision": "Browser audio vendor for the Softphone",
       "default": "Twilio via lib/twilio-transport.ts; graph8's dialer runs on Twilio conferences. For another vendor write a SoftphoneTransport and delete twilio-transport.ts",
       "askHuman": true
+    },
+    {
+      "decision": "How a single contact is called outside a dialing session",
+      "default": "manual-dial under a PAUSED or COMPLETED session the rep picks (same call log and analytics), only once the softphone is ready; the rep is the personal key's user unless userId is passed",
+      "askHuman": false
     }
   ],
   "peerDependencies": {
     "react": ">=18",
-    "@twilio/voice-sdk": "^2.18.5"
+    "@twilio/voice-sdk": "^2.18.5",
+    "lucide-react": ">=0.400.0"
   }
 }

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

@@ -0,0 +1,252 @@
+"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, useState } from "react";
+import { Phone } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+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 { 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";
+}
+
+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;
+  const me = useG8Query(
+    async (signal) => dataOf<{ propelauth_user_id?: string | null; email?: string | null }>(await g8Get("/team-members/me", undefined, { signal })),
+    [],
+    { enabled: !props.userId },
+  );
+  const userId = props.userId ?? me.data?.propelauth_user_id ?? undefined;
+  // 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.data?.email ?? undefined);
+  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);
+
+  const sessions = useG8Query(
+    async (signal) => {
+      const lists = await Promise.all(
+        CALLABLE.map(async (status) => dataOf<{ sessions?: SessionOption[] }>(await g8Get("/voice/dialer/sessions", { status, page: 1, page_size: 25, user_email: userEmail }, { signal })).sessions ?? []),
+      );
+      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 && 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;
+}