@graph8/sdk 0.370.0 → 0.374.0

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

@@ -23,6 +23,7 @@ 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";
@@ -76,7 +77,9 @@ export function CallHistory({ contactId, userEmail, sessionId, limit = 25, idPar
   const [outcome, setOutcome] = useState("");
   const [openId, setOpenId] = useUrlState(idParam);
   const [view, setView] = useUrlState("view");
-  const rep = useDebounced(userEmail || typedEmail.trim());
+  // 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) => {
@@ -89,12 +92,17 @@ export function CallHistory({ contactId, userEmail, sessionId, limit = 25, idPar
   // A different rep, session or contact is a different list.
   const scope = `${contactId}|${rep}|${sessionId}|${limit}`;
   const lastScope = useRef(scope);
+  const wasScoped = useRef(scoped);
   useEffect(() => {
+    const was = wasScoped.current;
+    wasScoped.current = scoped;
     if (lastScope.current === scope) return; // keep a deep-linked ?id= on first render
     lastScope.current = scope;
     setRows(limit);
     setOutcome("");
-    setOpenId(null);
+    // The default rep resolves AFTER the first render (GET /team-members/me). Going from "no list yet" to the rep's list
+    // is not a different list, so a deep-linked call (`/calls?id=<room>`, from a coach scorecard or a contact) stays open.
+    if (was) setOpenId(null);
   }, [scope]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const all = q.data ?? [];

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

@@ -9,7 +9,7 @@
  * 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";
@@ -39,12 +39,16 @@ export function CallLog({ linkParam, contactId, userEmail, sessionId, limit = 25
   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 },
   );
 
@@ -62,7 +66,8 @@ export function CallLog({ linkParam, contactId, userEmail, sessionId, limit = 25
   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>
@@ -78,5 +83,12 @@ export function CallLog({ linkParam, contactId, userEmail, sessionId, limit = 25
         ))}
       </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,7 +50,7 @@ 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>
   );
 }
@@ -71,7 +71,7 @@ export function WaitingContacts({ sessionId, version, onSkipped }: { sessionId:
   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>

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

@@ -22,11 +22,17 @@ import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader,
 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 { useCurrentMember } from "@/g8/pickers/hooks/use-current-member";
+import { MemberPicker } from "@/g8/pickers/components/member-picker";
+import type { MemberOption } from "@/g8/pickers/components/member-picker";
 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 { useUrlFilters } from "@/g8/hooks/use-url-filters";
+import { ListSelect } from "@/g8/crm/components/list-select";
+import { MoreFilters, RangeFilter, SelectFilter, TextFilter } from "@/g8/components/screen/filter-controls";
 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";
@@ -43,7 +49,10 @@ 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. */
+  /**
+   * The rep these calls belong to. Optional: when omitted the rep is the signed-in team member (GET /team-members/me,
+   * a personal API key) and a MemberPicker switches rep. A passed `userId` always wins and hides the switcher.
+   */
   userId?: string;
   userEmail?: string;
   /** Skip the list picker. */
@@ -79,15 +88,6 @@ interface SessionRow {
 
 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";
@@ -99,33 +99,56 @@ function created(v: unknown): string {
 }
 
 /** All dialing sessions (GET /voice/dialer/sessions). A row opens the full session record: ?tab=sessions&open=<id>[&view=full]. */
+/** Every filter the sessions API takes (user_email comes from the screen's `userEmail`). */
+const SESSION_FILTERS = ["name", "status", "campaign_id", "list_id", "list_name", "date_from", "date_to", "sort_by", "sort_order"] as const;
+const SESSION_MORE = ["campaign_id", "list_id", "list_name", "date_from", "date_to", "sort_by", "sort_order"] as const;
+
 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());
+  // Every filter the sessions API takes lives in the URL (`s_campaign_id=...`): status, name, campaign, list, dates, sort.
+  const uf = useUrlFilters(SESSION_FILTERS, { prefix: "s_" });
+  const { status, name } = uf.draft;
+  const f = uf.filters;
+  const search = f.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 env = await g8Get("/voice/dialer/sessions", {
+        page, page_size: 25, status: f.status || undefined, name: search || undefined, user_email: userEmail,
+        campaign_id: f.campaign_id || undefined, list_id: f.list_id || undefined, list_name: f.list_name || undefined,
+        date_from: f.date_from ? `${f.date_from}T00:00:00Z` : undefined, date_to: f.date_to ? `${f.date_to}T23:59:59Z` : undefined,
+        sort_by: f.sort_by || undefined, sort_order: f.sort_by ? f.sort_order || undefined : undefined,
+      }, { 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],
+    [page, f, search, userEmail],
+    { enabled: uf.ready },
   );
   const rows = q.data?.rows ?? [];
-  const reset = () => setPage(1);
+  useEffect(() => { setPage(1); }, [f]);
   const list = (
     <div className="space-y-3">
       <Toolbar
-        search={{ value: name, onChange: (v) => { setName(v); reset(); }, placeholder: "Search by session name" }}
+        search={{ value: name, onChange: (v) => uf.set("name", v), debounceMs: 0, 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>
+          <>
+            <select aria-label="Session status" className="h-8 rounded-md border border-border bg-background px-2 text-sm" value={status} onChange={(e) => uf.set("status", e.target.value)}>
+              <option value="">Any status</option>
+              {STATUSES.map((s) => <option key={s} value={s}>{s.toLowerCase()}</option>)}
+            </select>
+            <MoreFilters activeCount={SESSION_MORE.filter((k) => uf.draft[k]).length}>
+              <TextFilter label="campaign" placeholder="Campaign ID" value={uf.draft.campaign_id} onChange={(v) => uf.set("campaign_id", v)} className="w-40" />
+              <ListSelect label="Filter by list" emptyOption="Any list" value={uf.draft.list_id} valueLabel={`List ${uf.draft.list_id}`} pageSize={100} onChange={(l) => uf.set("list_id", l ? String(l.id) : "")} />
+              <TextFilter label="list name" placeholder="List name" value={uf.draft.list_name} onChange={(v) => uf.set("list_name", v)} className="w-40" />
+              <RangeFilter label="Created" type="date" min={uf.draft.date_from} max={uf.draft.date_to} onMinChange={(v) => uf.set("date_from", v)} onMaxChange={(v) => uf.set("date_to", v)} />
+              <SelectFilter label="sort" any="Newest first" value={uf.draft.sort_by} onChange={(v) => uf.set("sort_by", v)} options={[{ value: "created_at", label: "Created" }, { value: "updated_at", label: "Last updated" }, { value: "total_calls", label: "Calls" }]} />
+              <SelectFilter label="sort order" any="Descending" value={uf.draft.sort_order} onChange={(v) => uf.set("sort_order", v)} options={[{ value: "asc", label: "Ascending" }]} />
+            </MoreFilters>
+            {uf.active ? <Button variant="ghost" size="sm" onClick={uf.clear}>Clear filters</Button> : null}
+          </>
         }
       />
       {q.error ? (
@@ -133,7 +156,7 @@ function SessionsTab({ userEmail, onWork }: { userEmail?: string; onWork: (id: s
       ) : 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."} />
+        <EmptyState icon={<Phone className="size-6" />} title={uf.active ? "No sessions match" : "No sessions yet"} description={uf.active ? "Try a different search or fewer filters." : "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>
@@ -256,11 +279,11 @@ function SessionTab(props: DialerScreenProps & { onCalls: (calls: LiveCall[]) =>
       />
       <div className="space-y-4">
         {props.userId && transport ? (
-          <Softphone userId={props.userId} transport={transport} conferenceName={batch?.conference_name} joinMuted={(batch?.batch?.length ?? 1) > 1} />
+          <Softphone key={props.userId} 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>
+          <SectionCard title="Softphone"><p className="text-sm text-muted-foreground">Choose the rep above to take calls in this browser. A personal API key is the rep automatically; an organisation key is not a person.</p></SectionCard>
         )}
         {sessionId ? (
           <>
@@ -282,11 +305,30 @@ function SessionTab(props: DialerScreenProps & { onCalls: (calls: LiveCall[]) =>
   );
 }
 
+/** Who is calling, shown with a switcher when the rep was not passed in. Managers can pick a teammate; a personal key can only be itself. */
+function RepSwitcher({ me, picked, onPick }: { me: ReturnType<typeof useCurrentMember>; picked: MemberOption | null; onPick: (m: MemberOption | null) => void }) {
+  const current = picked ?? me.member;
+  return (
+    <div className="flex flex-wrap items-center gap-2 text-sm" aria-label="Rep">
+      {me.loading ? <span className="text-muted-foreground">Finding your user...</span> : null}
+      {current ? <span>Calling as {current.name}{current.id === me.userId ? " (you)" : ""}</span> : null}
+      <MemberPicker label={current ? "Switch rep" : "Rep"} value={current?.id ?? null} onChange={onPick} placeholder="Choose who is calling" />
+      {picked && me.member && picked.id !== me.userId ? <Button size="sm" variant="ghost" onClick={() => onPick(null)}>Use me</Button> : null}
+    </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[]>([]);
+  // The rep: a passed userId wins (BC). Otherwise the signed-in team member, or a teammate picked in the switcher.
+  const me = useCurrentMember({ enabled: !props.userId });
+  const [picked, setPicked] = useState<MemberOption | null>(null);
+  const rep = props.userId ? null : (picked ?? me.member);
+  const userId = props.userId ?? rep?.id;
+  const userEmail = props.userId ? props.userEmail : (rep ? (rep.email ?? undefined) : props.userEmail);
   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]);
@@ -305,15 +347,15 @@ export function DialerScreen(props: DialerScreenProps) {
       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}
+      actions={props.userId ? props.toolbarActions : <><RepSwitcher me={me} picked={picked} onPick={setPicked} />{props.toolbarActions}</>}
       tabs={TABS}
       activeTab={active}
       onTabChange={(id) => setTab(id)}
       stats={stats}
     >
-      {active === "session" ? <SessionTab {...props} onCalls={setCalls} /> : null}
+      {active === "session" ? <SessionTab {...props} userId={userId} userEmail={userEmail} 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}
+      {active === "history" ? <CallHistory userEmail={props.userEmail ?? userEmail} /> : null}
     </ScreenLayout>
   );
 }

package/blocks/dialer/components/disposition-panel.tsx

@@ -54,7 +54,7 @@ export function DispositionPanel({ call, onSaved, className }: DispositionPanelP
   return (
     <section className={`space-y-3 rounded-lg border p-4 ${className ?? ""}`} aria-label="Call outcome">
       <header>
-        <h3 className="text-sm font-semibold">How did the call with {contactName(call)} go?</h3>
+        <h3 className="text-sm font-medium">How did the call with {contactName(call)} go?</h3>
         {call.disposition ? <p className="text-xs text-muted-foreground">Currently: {call.disposition}</p> : null}
       </header>
       <div role="radiogroup" aria-label="Outcome" className="flex flex-wrap gap-2">

package/blocks/dialer/components/record-calls-tab.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+/**
+ * RecordCallsTab: one contact's call history, newest first, with a "Call" button that places one confirmed call through the
+ * dialer. Use it as an `extraDetailTabs` entry of ContactsScreen:
+ *   { id: "calls", label: "Calls", render: (c) => <RecordCallsTab contact={{ id: c.id, first_name: c.first_name, last_name: c.last_name, email: c.work_email, mobile_phone: c.mobile_phone, direct_phone: c.direct_phone }} onOpenCall={(room) => router.push(`/calls?id=${room}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. listCallsForContact  GET /voice/dialer/calls?contact_id=&limit=   (read; 25 at first, "Show more" asks for up to 100, the API maximum)
+ *   2. CallContactButton: getMyTeamMember, listDialerSessions, listDialerNumbers, manualDial   (external: confirmed in its dialog)
+ * The API has no offset, so past 100 calls the tab says so instead of cutting the list silently.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { PhoneCall } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { CallContactButton } from "./call-contact-button";
+import type { CallableContact } from "./call-contact-button";
+import { dataOf, formatDuration, type CallSummary } from "../lib/dialer-types";
+import { outcomeTone } from "./call-log-screen";
+
+/** The most calls one read can return. */
+export const CALLS_TAB_API_MAX = 100;
+
+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", year: "numeric", hour: "numeric", minute: "2-digit" }) : "";
+}
+
+export interface RecordCallsTabProps {
+  /** The contact: `id` scopes the history; the name and numbers feed the call button. */
+  contact: CallableContact & { id: string | number };
+  /** Route to the call in your calls screen; receives the call's room name. Without it the rows link to `${callsPath}?id=<room name>`. */
+  onOpenCall?: (roomName: string) => void;
+  /** Path of your calls screen for the plain links. Default "/calls". */
+  callsPath?: string;
+  /** Calls to read first. Default 25. */
+  pageSize?: number;
+  /** Pass the rep's softphone identity through to the call button (see CallContactButton). */
+  userId?: string;
+  userEmail?: string;
+}
+
+export function RecordCallsTab({ contact, onOpenCall, callsPath = "/calls", pageSize = 25, userId, userEmail }: RecordCallsTabProps) {
+  const [limit, setLimit] = useState(Math.min(pageSize, CALLS_TAB_API_MAX));
+  const contactId = String(contact.id);
+  const q = useG8Query(
+    async (signal) => dataOf<{ calls?: CallSummary[] }>(await g8Get("/voice/dialer/calls", { contact_id: contactId, limit }, { signal })).calls ?? [],
+    [contactId, limit],
+  );
+  const call = <CallContactButton contact={contact} userId={userId} userEmail={userEmail} onCalled={() => void q.refetch()} />;
+  if (q.error) return <ApiError error={q.error} title="Could not load calls" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading calls" />;
+  const calls = q.data;
+  const full = calls.length >= limit;
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm text-muted-foreground">{calls.length === 1 ? "1 call" : `${calls.length.toLocaleString()}${full ? "+" : ""} calls`}</p>
+        {call}
+      </div>
+      {calls.length === 0 ? (
+        <EmptyState compact icon={<PhoneCall className="size-8" />} title="No calls yet" description="Calls the dialer places to this contact show up here." />
+      ) : (
+        <ul className="divide-y rounded-md border" aria-label="Calls">
+          {calls.map((c) => (
+            <li key={c.room_name}>
+              <a
+                href={`${callsPath}?id=${encodeURIComponent(c.room_name)}`}
+                className="flex items-center justify-between gap-3 p-3 text-sm hover:bg-muted"
+                onClick={(e) => {
+                  if (!onOpenCall || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                  e.preventDefault();
+                  onOpenCall(c.room_name);
+                }}
+              >
+                <span className="min-w-0">
+                  <span className="block font-medium">{when(c.created_at) || "Call"}</span>
+                  <span className="block truncate text-xs text-muted-foreground">{[c.to, formatDuration(c.call_duration), c.summary ?? (c.has_transcript ? "Transcript available" : null)].filter(Boolean).join(" · ")}</span>
+                </span>
+                <StatusPill tone={outcomeTone(c.disposition)}>{c.disposition ? c.disposition.replace(/_/g, " ") : "no outcome"}</StatusPill>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+      {full && limit < CALLS_TAB_API_MAX ? (
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span role="status">Showing {calls.length.toLocaleString()} calls</span>
+          <Button size="sm" variant="outline" onClick={() => setLimit(CALLS_TAB_API_MAX)}>Show more</Button>
+        </div>
+      ) : null}
+      {full && limit >= CALLS_TAB_API_MAX ? <p role="note" className="text-xs text-muted-foreground">Showing the {CALLS_TAB_API_MAX} most recent calls. Older calls are in the call log by rep or session.</p> : null}
+    </div>
+  );
+}

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

@@ -4,9 +4,15 @@
  * SessionStartForm: create a DRAFT dialer session for a list. A draft dials NOBODY; dialing starts only when
  * CallQueue's "Dial next batch" is confirmed.
  *
+ * No ids to type: the rep defaults to the signed-in team member (`useCurrentMember`, GET /team-members/me) and can be
+ * switched with a MemberPicker; the list is picked with a ListPicker. A `userId` / `listId` prop still wins, and the
+ * raw id fields stay under "Use a ... id instead" for a key that is not a person (an organisation key).
+ *
  * SDK operations, in order:
+ *   0. GET  /team-members/me           (teamMembers.getMyTeamMember)   read  - only without `userId`: the rep is you
  *   1. GET  /voice/dialer/numbers      (voice.listDialerNumbers)       read  - caller IDs and today's usage
  *   2. POST /dialer/sessions/draft     (dialer.createSessionDraft)     write - safe: resolves the list, dials no one
+ * A personal key may only name itself as the rep: naming someone else answers 403, which the form explains.
  * Calling the draft twice for the same list returns the existing live session instead of making a second one.
  */
 import { useState } from "react";
@@ -17,6 +23,10 @@ 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";
+import { useCurrentMember } from "@/g8/pickers/hooks/use-current-member";
+import { MemberPicker } from "@/g8/pickers/components/member-picker";
+import type { MemberOption } from "@/g8/pickers/components/member-picker";
+import { ListPicker } from "@/g8/lists/components/list-picker";
 
 export interface SessionStartFormProps {
   /** The rep these calls are attributed to. An organisation API key has no user of its own, so you name one. */
@@ -34,12 +44,22 @@ export function SessionStartForm({ userId, userEmail, listId: initialListId = ""
   const brand = useBrand();
   const { numbers, loading, error, refetch } = useDialerNumbers();
   const [listId, setListId] = useState(initialListId);
+  const [pickedTitle, setPickedTitle] = useState("");
   const [typedUserId, setTypedUserId] = useState("");
-  const repId = userId || typedUserId.trim();
+  const [refused, setRefused] = useState(false);
+  // With a passed userId nobody is looked up, until a 403 needs to know whether the rep is someone else.
+  const me = useCurrentMember({ enabled: !userId || refused });
+  const [picked, setPicked] = useState<MemberOption | null>(null);
+  // Who the session is for: a passed userId, else a typed id, else the chosen teammate, else you. user_id and user_email
+  // always describe the same person.
+  const resolved = userId || typedUserId.trim() ? null : (picked ?? me.member);
+  const repId = userId || typedUserId.trim() || resolved?.id || "";
+  const repEmail = resolved ? (resolved.email ?? undefined) : userEmail;
   const [fromPhone, setFromPhone] = useState("");
   const [mode, setMode] = useState<DialerMode>("power");
   const [parallelCount, setParallelCount] = useState(3);
   const [name, setName] = useState(listTitle ? `Dialing ${listTitle}` : "");
+  const title = listTitle ?? pickedTitle;
 
   const chosenPhone = fromPhone || numbers[0]?.phone_number || "";
   const create = useG8Mutation(
@@ -47,9 +67,9 @@ export function SessionStartForm({ userId, userEmail, listId: initialListId = ""
       const count = mode === "parallel" ? Math.min(10, Math.max(2, Math.round(parallelCount) || 2)) : 1;
       const env = await g8Post("/dialer/sessions/draft", {
         user_id: repId,
-        user_email: userEmail,
+        user_email: repEmail,
         list_id: listId,
-        list_title: listTitle,
+        list_title: title || undefined,
         name: name || undefined,
         from_phone: chosenPhone || undefined,
         dialing_mode: mode,
@@ -60,21 +80,41 @@ export function SessionStartForm({ userId, userEmail, listId: initialListId = ""
       if (!sessionId) throw new Error(`${brand.linkLabel} did not return a session id`);
       return { sessionId, mode, parallelCount: count, fromPhone: chosenPhone };
     },
-    { onSuccess: onCreated },
+    { onSuccess: onCreated, onError: (e) => setRefused((e as { status?: number } | undefined)?.status === 403) },
   );
 
   return (
     <form className={`space-y-3 rounded-lg border p-4 ${className ?? ""}`} onSubmit={(e) => { e.preventDefault(); if (listId && repId) void create.mutate(undefined); }}>
-      <h3 className="text-sm font-semibold">Start a dialing session</h3>
+      <h3 className="text-sm font-medium">Start a dialing session</h3>
       <div className="grid gap-3 sm:grid-cols-2">
-        <div className="space-y-1">
-          <Label htmlFor="ds-list">List id</Label>
-          <Input id="ds-list" value={listId} onChange={(e) => setListId(e.target.value)} placeholder="From your lists" />
+        <div className="space-y-1 sm:col-span-2">
+          <span className="text-sm font-medium leading-none">List</span>
+          {initialListId ? (
+            <p className="text-sm">{title || `List ${initialListId}`}</p>
+          ) : (
+            <ListPicker type="contacts" allowCreate={false} value={Number(listId) || null} onChange={(l) => { setListId(String(l.id)); setPickedTitle(l.title); setName((n) => n || `Dialing ${l.title}`); }} />
+          )}
+          <details className="text-sm">
+            <summary className="cursor-pointer text-muted-foreground">Use a list id instead</summary>
+            <div className="mt-1 space-y-1">
+              <Label htmlFor="ds-list">List id</Label>
+              <Input id="ds-list" value={listId} onChange={(e) => setListId(e.target.value)} placeholder="From your lists" />
+            </div>
+          </details>
         </div>
         {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={`${brand.linkLabel} user id`} />
+          <div className="space-y-1 sm:col-span-2">
+            <span className="text-sm font-medium leading-none">Rep</span>
+            {me.loading ? <p className="text-sm text-muted-foreground">Finding your user...</p> : null}
+            {resolved ? <p className="text-sm">Calling as {resolved.name}{resolved.id === me.userId ? " (you)" : ""}</p> : null}
+            <MemberPicker label={resolved ? "Switch rep" : "Rep"} value={resolved?.id ?? null} onChange={(m) => { setPicked(m); setTypedUserId(""); }} placeholder="Choose who is calling" />
+            <details className="text-sm">
+              <summary className="cursor-pointer text-muted-foreground">Use a user id instead</summary>
+              <div className="mt-1 space-y-1">
+                <Label htmlFor="ds-user">Rep user id</Label>
+                <Input id="ds-user" value={typedUserId} onChange={(e) => setTypedUserId(e.target.value)} placeholder={`${brand.linkLabel} user id`} />
+              </div>
+            </details>
           </div>
         )}
         <div className="space-y-1">
@@ -105,6 +145,13 @@ export function SessionStartForm({ userId, userEmail, listId: initialListId = ""
       </div>
       {error ? <ApiError error={error} title="Could not load caller IDs" onRetry={() => void refetch()} /> : null}
       {create.error ? <ApiError error={create.error} title="Could not create the session" /> : null}
+      {(create.error as { status?: number } | undefined)?.status === 403 ? (
+        <p role="alert" className="text-sm text-muted-foreground">
+          {me.userId && repId && repId !== me.userId
+            ? "A personal API key can only act as its own user, so this session cannot be started for someone else. Switch the rep back to yourself."
+            : "This API key is not allowed to start dialer sessions. Check that it has the voice scopes, or ask an admin."}
+        </p>
+      ) : null}
       <Button type="submit" disabled={!listId || !repId || create.loading} loading={create.loading}>
         Create session (dials no one yet)
       </Button>

package/blocks/dialer/components/softphone.tsx

@@ -93,7 +93,7 @@ export function Softphone({ userId, transport, conferenceName, joinMuted, onStat
   return (
     <section className={`space-y-3 rounded-lg border p-4 ${className ?? ""}`} aria-label="Softphone">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold">Softphone</h3>
+        <h3 className="text-sm font-medium">Softphone</h3>
         <span role="status" className="text-sm text-muted-foreground">{label}</span>
       </div>
       {transportError ? <p role="alert" className="text-sm text-destructive">{transportError}</p> : null}