@graph8/sdk 0.362.0 → 0.373.0

package/blocks/inbox/README.md

@@ -7,6 +7,23 @@ copy `InboxScreen`, the finished two-pane page.
 Depends on: `crm` (the contact on each thread), `mailboxes` (the connected sending mailboxes). Install with
 `npx @graph8/sdk add inbox`.
 
+## Screens
+
+`InboxScreen` (`components/inbox-screen.tsx`) is the finished page; it needs no props. Stat strip, channel / status /
+tag filters, search of the loaded page, paged list, and the open conversation (reply composer with confirmed AI draft
+and send, tag and assign). Open conversations deep-link as `?id=<channel>:<thread id>`. Optional slots:
+`toolbarActions`, `renderRowActions(thread)`, `renderDetailActions(thread)`, `extraDetailTabs`, `pageSize`.
+Needs scopes `inbox:read`, `inbox:write`, `inbox:run` (plus `campaigns:read` for the SMS sender picker) and a mailbox
+connected in the graph8 app (a link-out card says so).
+
+**Behaviour change.** Compared with the original two-pane `InboxScreen`, the finished page now writes `?id=` and
+`?view=` to the host page URL and renders its own header (an "Inbox" h1, description and stats). If your page
+already has a title or owns those query keys, pass `urlState={false}` (the open conversation lives in component
+state, the URL is untouched) and/or `hideHeader` (no title or stats, just search, filters, Refresh and the two panes).
+Defaults are unchanged from this release: both are on.
+
+Every detail opens as a full page with `&view=full` (the Open full page button).
+
 ## The flow, in order
 
 1. **List** `GET /inbox?channel=&status=&page=&page_size=` (`InboxList`). Each row has `id` and `channel`.
@@ -18,8 +35,12 @@ Depends on: `crm` (the contact on each thread), `mailboxes` (the connected sendi
    `shorten` / `expand` / `fix_grammar_spelling` rework the text you pass in `message_html`. The response
    `data.content` is HTML and `data.plain_content` is text. It sends nothing.
 4. **Send** `POST /inbox/{reply_id}/send` (`ReplyComposer`, **external**, confirm first) with
-   `{ channel, body, subject?, to? }`. The composer sends an `Idempotency-Key` so a double click cannot
-   send twice.
+   `{ channel, body, subject?, to, from_address }`. `from_address` is the thread's own sender: `thread.mailbox`
+   (email), `thread.from_number` (SMS) or `thread.linkedin_account_id` (LinkedIn); `to` is the thread's contact
+   (`contact.email`, or `thread.to_number` for SMS). If an SMS or LinkedIn thread names no sender, the composer
+   shows a picker filled from `GET /sms/phone-numbers` or `GET /inbox/linkedin/accounts`. The API fills both
+   from the thread when omitted (older API versions refused the send with 400). The composer sends an
+   `Idempotency-Key` so a double click cannot send twice.
 5. **Route** (`TagAndAssign`): `POST /inbox/tags` creates a tag (write), `POST /inbox/{id}/tag?channel=`
    applies tag ids and `POST /inbox/{id}/assign?channel=` hands the thread to a teammate by email. Both of
    those are **external** (confirm first) because they can fire automations and notify people.
@@ -31,13 +52,14 @@ IDs passed between steps: `thread.id` + `thread.channel` (list -> view -> draft/
 
 - Connect a mailbox in the graph8 app (Google / Microsoft OAuth exists only there; see the `mailboxes` block).
   Until then the inbox has no email threads. `where: "app"`.
-- Give the proxy's API key `inbox:read`, `inbox:write` and `inbox:run`.
+- Give the proxy's API key `inbox:read`, `inbox:write` and `inbox:run` (and `campaigns:read` for the SMS sender picker).
 - Credits for AI drafts (402 when none; there is no balance read, so the confirm dialog shows no estimate).
 
 ## Defaults (the agent does not need to ask)
 
 - AI drafts are only ever written into the reply box. Sending is always a separate, confirmed click.
 - Tone `professional`, goal `follow_up`.
+- A reply leaves from the thread's own mailbox, number or LinkedIn account and goes to the thread's contact.
 - No assignee filter: the API cannot filter by an arbitrary assignee email (an org key owns no threads), so
   filter `thread.assignees` client-side if you need it.
 - Ask the human only about **tags**: there is no list-tags operation. Pass `availableTags` from your own
@@ -60,6 +82,8 @@ IDs passed between steps: `thread.id` + `thread.channel` (list -> view -> draft/
 | `inbox.getReply` | GET /inbox/{reply_id} | read | ThreadView, useInboxThread |
 | `aiInbox.generateInboxDraft` | POST /inbox/drafts/generate | billable | ReplyComposer |
 | `inbox.sendReply` | POST /inbox/{reply_id}/send | external | ReplyComposer |
+| `channels.listSmsPhoneNumbers` | GET /sms/phone-numbers | read | ReplyComposer (SMS sender picker) |
+| `aiInbox.listInboxLinkedinAccounts` | GET /inbox/linkedin/accounts | read | ReplyComposer (LinkedIn sender picker) |
 | `aiInbox.listInboxUsers` | GET /inbox/users | read | TagAndAssign |
 | `aiInbox.createInboxTag` | POST /inbox/tags | write | TagAndAssign |
 | `inbox.tagReply` | POST /inbox/{reply_id}/tag | external | TagAndAssign |
@@ -70,3 +94,8 @@ IDs passed between steps: `thread.id` + `thread.channel` (list -> view -> draft/
 - `01-triage-and-reply.ts`: list, read, AI draft (billable), send (external).
 - `02-tag-and-assign.ts`: create a tag, apply it, assign a teammate.
 - `03-hot-contacts-digest.ts`: read-only digest of engaging contacts and unowned threads.
+
+## Cross-block glue
+
+
+- `RecordConversationsTab` (`components/record-conversations-tab.tsx`): the email conversations with a contact. The inbox has no filter by contact id, so it matches the contact's email through `searchInboxEmails` (`search_emails`) across the mailboxes from `listInboxMailboxes`, 10 per page with "Load more"; opening a row reads `getReply`, and the API's uniform 404 for a hidden thread shows "not available to you" (no retry). `extraDetailTabs` entry for ContactsScreen.

package/blocks/inbox/block.json

@@ -20,7 +20,11 @@
     "generate_inbox_draft_inbox_drafts_generate_post",
     "get_reply_inbox__reply_id__get",
     "list_inbox_inbox_get",
+    "list_inbox_linkedin_accounts_inbox_linkedin_accounts_get",
+    "list_inbox_mailboxes_inbox_mailboxes_get",
     "list_inbox_users_inbox_users_get",
+    "list_sms_phone_numbers_sms_phone_numbers_get",
+    "search_inbox_emails_inbox_emails_search_post",
     "send_reply_inbox__reply_id__send_post",
     "tag_reply_inbox__reply_id__tag_post"
   ],
@@ -50,12 +54,15 @@
     {
       "name": "ReplyComposer",
       "file": "components/reply-composer.tsx",
-      "purpose": "Write a reply, draft or reshape it with AI (confirm, billable) and send it on the thread's channel (confirm, external).",
+      "purpose": "Write a reply, draft or reshape it with AI (confirm, billable) and send it from the thread's own mailbox, number or LinkedIn account to its contact (confirm, external); picks a sender when an SMS or LinkedIn thread names none.",
       "operations": [
         "generate_inbox_draft_inbox_drafts_generate_post",
+        "list_inbox_linkedin_accounts_inbox_linkedin_accounts_get",
+        "list_sms_phone_numbers_sms_phone_numbers_get",
         "send_reply_inbox__reply_id__send_post"
       ],
       "tiers": [
+        "read",
         "billable",
         "external"
       ]
@@ -89,6 +96,19 @@
       "purpose": "Small status pill shared by the thread view and tag panel.",
       "operations": [],
       "tiers": []
+    },
+    {
+      "name": "RecordConversationsTab",
+      "file": "components/record-conversations-tab.tsx",
+      "purpose": "The email conversations with one contact (matched by address), with Load more and a calm answer for a thread that 404s; an extraDetailTabs entry for ContactsScreen.",
+      "operations": [
+        "list_inbox_mailboxes_inbox_mailboxes_get",
+        "search_inbox_emails_inbox_emails_search_post",
+        "get_reply_inbox__reply_id__get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [
@@ -157,6 +177,7 @@
     }
   ],
   "scopes": [
+    "campaigns:read",
     "inbox:read",
     "inbox:run",
     "inbox:write"
@@ -186,9 +207,15 @@
       "decision": "Filter by assignee",
       "default": "Not offered: the API cannot filter by an arbitrary assignee email (an org key owns no threads). Filter thread.assignees client-side",
       "askHuman": false
+    },
+    {
+      "decision": "Which mailbox, number or LinkedIn account a reply is sent from",
+      "default": "The thread's own (mailbox / from_number / linkedin_account_id on the thread); an SMS or LinkedIn thread without one shows a sender picker",
+      "askHuman": false
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

package/blocks/inbox/components/inbox-list.tsx

@@ -25,8 +25,12 @@ import {
   type InboxChannel,
   type InboxThread,
 } from "../lib/inbox-types";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 
 export interface InboxListProps {
+  /** 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;
   onSelect?: (thread: InboxThread) => void;
   selectedId?: string | null;
   /** Start with these filters (for example a tag id from the URL). */
@@ -62,7 +66,7 @@ function LoadingRows() {
   );
 }
 
-export function InboxList({ onSelect, selectedId, initialFilters, pageSize = 25, onFiltersChange, className }: InboxListProps) {
+export function InboxList({ linkParam, onSelect, selectedId, initialFilters, pageSize = 25, onFiltersChange, className }: InboxListProps) {
   const [filters, setFilters] = useState<InboxFilters>(initialFilters ?? {});
   const [page, setPage] = useState(1);
   const { threads, loading, error, hasNext, total, refetch } = useInboxThreads(filters, page, pageSize);
@@ -123,9 +127,9 @@ export function InboxList({ onSelect, selectedId, initialFilters, pageSize = 25,
                 key={`${thread.channel}:${thread.id}`}
                 data-state={selectedId === thread.id ? "selected" : undefined}
                 className="cursor-pointer"
-                onClick={() => onSelect?.(thread)}
+                {...rowActivationProps(() => onSelect?.(thread))}
               >
-                <TableCell className="max-w-48 truncate font-medium">{contactLabel(thread)}</TableCell>
+                <TableCell className="max-w-48 truncate font-medium">{onSelect ? <RecordLink param={linkParam} id={thread.id} onOpen={() => onSelect(thread)}>{contactLabel(thread)}</RecordLink> : contactLabel(thread)}</TableCell>
                 <TableCell className="max-w-80 truncate text-muted-foreground">
                   {thread.subject ? <span className="text-foreground">{thread.subject} </span> : null}
                   {previewText(thread)}

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

@@ -1,49 +1,316 @@
 "use client";
 
 /**
- * InboxScreen: the finished two-pane inbox. List on the left; on the right the open conversation with its
- * reply composer and tag/assign panel. Copy it as the page, or take the four parts it composes.
+ * InboxScreen: the finished inbox. A stat strip, a searchable and filterable conversation list on the left, and on the
+ * right the open conversation with its reply composer and tag/assign panel. Deep link: `?id=<channel>:<thread id>`.
  *
- * SDK operations: none of its own. It composes InboxList (read), ThreadView (read), ReplyComposer
- * (billable draft, external send) and TagAndAssign (external). The dialogs live in those parts.
+ * Flows: browse and page the queue; filter by channel, status and tag; search the loaded page; open a conversation;
+ * read it (unsent drafts flagged); draft with AI (billable, confirmed) and send (external, confirmed); tag and assign
+ * (external, confirmed); clear filters; connect a mailbox (link out to graph8, OAuth only exists there).
+ *
+ * SDK operations: none of its own. It composes useInboxThreads (GET /inbox, read), ThreadView (read), ReplyComposer
+ * (billable draft, external send) and TagAndAssign (external). The confirm dialogs live in those parts.
+ *
+ * BEHAVIOUR CHANGE (versus the original two-pane InboxScreen): it now writes `?id=` and `?view=` to the host page URL and
+ * renders its own ScreenLayout header ("Inbox" h1, stats). Opt out with `urlState={false}` (selection kept in component
+ * state, the URL untouched) and/or `hideHeader` (no title or stats, just the toolbar and the two panes). Defaults keep the new look.
+ *
+ * Props are backwards compatible: `initialFilters`, `availableTags`, `className` as before; everything else is optional glue.
  */
-import { useMemo, useState } from "react";
+import { useMemo, useState, type ReactNode } from "react";
+import { Inbox as InboxIcon, Mail, RefreshCw } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
-import type { InboxFilters } from "../hooks/use-inbox-threads";
-import type { InboxTag, InboxThread } from "../lib/inbox-types";
-import { InboxList } from "./inbox-list";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { useInboxThread } from "../hooks/use-inbox-thread";
+import { useInboxThreads, type InboxFilters } from "../hooks/use-inbox-threads";
+import {
+  INBOX_CHANNELS,
+  INBOX_STATUSES,
+  contactLabel,
+  formatWhen,
+  latestMessage,
+  previewText,
+  type InboxChannel,
+  type InboxTag,
+  type InboxThread,
+} from "../lib/inbox-types";
 import { ReplyComposer } from "./reply-composer";
 import { TagAndAssign } from "./tag-and-assign";
 import { ThreadView } from "./thread-view";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface InboxScreenProps {
   initialFilters?: InboxFilters;
   /** Tags the person can apply. There is no list-tags operation; keep this list in your app. */
   availableTags?: InboxTag[];
   className?: string;
+  /** Extra buttons next to Refresh. */
+  toolbarActions?: ReactNode;
+  /** Rendered at the end of each conversation row. */
+  renderRowActions?: (thread: InboxThread) => ReactNode;
+  /** Rendered in the header of the open conversation. */
+  renderDetailActions?: (thread: InboxThread) => ReactNode;
+  /** Extra tabs next to "Conversation" (for example the contact's CRM record). */
+  extraDetailTabs?: Array<{ id: string; label: string; render: (thread: InboxThread) => ReactNode }>;
+  /** Page size of the list. Default 25. */
+  pageSize?: number;
+  /** Keep the open conversation and full-page view in the page URL (`?id=`, `?view=`). Default true; false keeps them in component state and leaves the URL alone. */
+  urlState?: boolean;
+  /** Skip the screen header (title, description, stats) when the host page already has one. Default false. */
+  hideHeader?: boolean;
+}
+
+/** `useUrlState` or plain state, chosen once per mount (the flag must not change while mounted). */
+function useSelectionState(key: string, urlState: boolean): [string | undefined, (v: string | null) => void] {
+  const [fromUrl, setFromUrl] = useUrlState(key);
+  const [local, setLocal] = useState<string | null>(null);
+  return urlState ? [fromUrl, setFromUrl] : [local ?? undefined, setLocal];
 }
 
-export function InboxScreen({ initialFilters, availableTags, className }: InboxScreenProps) {
-  const [open, setOpen] = useState<InboxThread | null>(null);
-  const tags = useMemo(() => availableTags ?? [], [availableTags]);
+type Selected = { channel: string; id: string };
+const keyOf = (t: Selected) => `${t.channel}:${t.id}`;
+function parseKey(value: string): Selected | null {
+  const at = value.indexOf(":");
+  return at > 0 && at < value.length - 1 ? { channel: value.slice(0, at), id: value.slice(at + 1) } : null;
+}
+
+function statusTone(status?: string | null) {
+  const s = (status ?? "").toUpperCase();
+  return s === "DRAFT" ? "warning" : s === "SENT" ? "positive" : s === "AI_RESPONDED" ? "info" : "neutral";
+}
 
+function ThreadRow({ thread, selected, onOpen, actions }: { thread: InboxThread; selected: boolean; onOpen: () => void; actions?: ReactNode }) {
+  const hasDraft = thread.messages.some((m) => m.is_draft);
   return (
-    <div className={`grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] ${className ?? ""}`}>
-      <InboxList onFiltersChange={() => setOpen(null)} initialFilters={initialFilters} selectedId={open?.id} onSelect={setOpen} />
-      <div className="min-w-0">
-        {open ? (
-          <ThreadView key={`${open.channel}:${open.id}`} thread={open}>
-            {(thread, reload) => (
-              <div className="space-y-3">
-                <ReplyComposer thread={thread} onSent={reload} />
-                <TagAndAssign thread={thread} availableTags={tags} onChanged={reload} />
-              </div>
-            )}
-          </ThreadView>
-        ) : (
-          <EmptyState title="Select a conversation" description="Pick a reply on the left to read it and respond." />
-        )}
-      </div>
+    <li className={`flex items-start gap-1 border-b border-border ${selected ? "bg-muted" : "hover:bg-muted/50"}`}>
+      <button type="button" aria-current={selected ? "true" : undefined} onClick={onOpen} className="flex min-w-0 flex-1 items-start gap-3 p-3 text-left">
+        <EntityAvatar name={contactLabel(thread)} kind="person" size="sm" />
+        <span className="min-w-0 flex-1">
+          <span className="flex items-center justify-between gap-2">
+            <span className="truncate text-sm font-medium">{contactLabel(thread)}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{formatWhen(thread.updated_at ?? latestMessage(thread)?.date)}</span>
+          </span>
+          <span className="block truncate text-sm">{thread.subject ?? ""}</span>
+          <span className="block truncate text-xs text-muted-foreground">{previewText(thread)}</span>
+          <span className="mt-1 flex flex-wrap items-center gap-1">
+            <StatusPill tone="neutral">{String(thread.channel)}</StatusPill>
+            {thread.status ? <StatusPill tone={statusTone(thread.status)}>{thread.status.toLowerCase().replace("_", " ")}</StatusPill> : null}
+            {hasDraft ? <StatusPill tone="warning" dot>Draft waiting</StatusPill> : null}
+            {thread.tags.map((t) => <StatusPill key={t.id ?? t.name} tone="info">{t.name ?? t.id}</StatusPill>)}
+          </span>
+        </span>
+      </button>
+      {actions ? <div className="shrink-0 p-2">{actions}</div> : null}
+    </li>
+  );
+}
+
+function ChannelFilter({ value, onChange }: { value?: InboxChannel; onChange: (next?: InboxChannel) => void }) {
+  return (
+    <div role="group" aria-label="Channel" className="flex gap-1">
+      <Button size="sm" variant={value ? "outline" : "default"} onClick={() => onChange(undefined)}>All</Button>
+      {INBOX_CHANNELS.map((c) => (
+        <Button key={c.value} size="sm" variant={value === c.value ? "default" : "outline"} onClick={() => onChange(c.value)}>{c.label}</Button>
+      ))}
     </div>
   );
 }
+
+function Filters({ filters, tags, update }: { filters: InboxFilters; tags: InboxTag[]; update: (patch: Partial<InboxFilters>) => void }) {
+  const selectClass = "h-8 rounded-md border border-border bg-background px-2 text-sm";
+  return (
+    <>
+      <ChannelFilter value={filters.channel} onChange={(channel) => update({ channel })} />
+      <select aria-label="Status" className={selectClass} value={filters.status ?? ""} onChange={(e) => update({ status: e.target.value || undefined })}>
+        <option value="">Any status</option>
+        {INBOX_STATUSES.map((s) => <option key={s} value={s}>{s.replace("_", " ").toLowerCase()}</option>)}
+      </select>
+      {tags.length > 0 ? (
+        <select aria-label="Tag" className={selectClass} value={filters.tag ?? ""} onChange={(e) => update({ tag: e.target.value || undefined })}>
+          <option value="">Any tag</option>
+          {tags.map((t) => <option key={t.id} value={t.id ?? ""}>{t.name ?? t.id}</option>)}
+        </select>
+      ) : null}
+    </>
+  );
+}
+
+function ListEmpty({ filtered, onClear }: { filtered: boolean; onClear: () => void }) {
+  const brand = useBrand();
+  if (filtered) {
+    return <EmptyState title="No conversations match" description="Nothing fits these filters or this search." action={<Button size="sm" variant="outline" onClick={onClear}>Clear filters</Button>} />;
+  }
+  return (
+    <EmptyState
+      icon={<Mail className="size-6" />}
+      title="No conversations yet"
+      description={`Replies from sequences, SMS and LinkedIn land here. Connect a mailbox in ${brand.linkLabel} (Google and Microsoft sign-in only exist there), then enroll contacts in a sequence.`}
+      action={<a className="text-sm underline" href={brand.appUrl} target="_blank" rel="noreferrer">Connect in {brand.linkLabel}</a>}
+    />
+  );
+}
+
+function ThreadDetails({ thread }: { thread: Selected }) {
+  const { data: t, loading, error, refetch } = useInboxThread(thread.id, thread.channel);
+  if (error) return <ApiError error={error} title="Could not load this conversation" onRetry={() => void refetch()} />;
+  if (!t) return loading ? <Skeleton className="h-24 w-full" /> : null;
+  const dash = "";
+  return (
+    <KeyValueList
+      columns={1}
+      items={[
+        { label: "Contact", value: t.contact?.name || dash },
+        { label: "Email", value: t.contact?.email || dash },
+        { label: "Phone", value: t.contact?.phone || dash },
+        { label: "Company", value: t.contact?.company || dash },
+        { label: "Channel", value: String(t.channel) },
+        { label: "Status", value: t.status ? t.status.toLowerCase().replace("_", " ") : dash },
+        { label: "Tags", value: t.tags.length ? t.tags.map((x) => x.name ?? x.id).join(", ") : dash },
+        { label: "Assigned to", value: t.assignees.length ? t.assignees.map((a) => a.name || a.email).join(", ") : dash },
+        { label: "Messages", value: `${t.messages.length}${t.messages.some((m) => m.is_draft) ? " (includes an unsent draft)" : ""}` },
+        { label: "Started", value: formatWhen(t.created_at) || dash },
+        { label: "Last activity", value: formatWhen(t.updated_at) || dash },
+      ]}
+    />
+  );
+}
+
+function ExtraTab({ thread, render }: { thread: Selected; render: (thread: InboxThread) => ReactNode }) {
+  const { data, loading, error, refetch } = useInboxThread(thread.id, thread.channel);
+  if (error) return <ApiError error={error} title="Could not load this conversation" onRetry={() => void refetch()} />;
+  if (!data) return loading ? <Skeleton className="h-24 w-full" /> : null;
+  return <>{render(data)}</>;
+}
+
+export function InboxScreen({ initialFilters, availableTags, className, toolbarActions, renderRowActions, renderDetailActions, extraDetailTabs, pageSize = 25, urlState = true, hideHeader = false }: InboxScreenProps) {
+  const [filters, setFilters] = useState<InboxFilters>(initialFilters ?? {});
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+  const [openKey, setOpenKey] = useSelectionState("id", urlState);
+  const [view, setView] = useSelectionState("view", urlState);
+  const { threads, loading, error, hasNext, total, refetch } = useInboxThreads(filters, page, pageSize);
+  const open = openKey ? parseKey(openKey) : null;
+  const expanded = view === "full" && open != null;
+
+  const tags = useMemo(() => {
+    const seen = new Map<string, InboxTag>();
+    for (const t of [...(availableTags ?? []), ...threads.flatMap((th) => th.tags)]) if (t.id) seen.set(t.id, t);
+    return [...seen.values()];
+  }, [availableTags, threads]);
+  const needle = search.trim().toLowerCase();
+  const rows = useMemo(
+    () => (needle ? threads.filter((t) => `${contactLabel(t)} ${t.contact?.email ?? ""} ${t.contact?.company ?? ""} ${t.subject ?? ""} ${previewText(t, 300)}`.toLowerCase().includes(needle)) : threads),
+    [threads, needle],
+  );
+
+  const update = (patch: Partial<InboxFilters>) => {
+    setFilters((f) => ({ ...f, ...patch }));
+    setPage(1);
+    setOpenKey(null);
+  };
+  const clear = () => { setSearch(""); setFilters({}); setPage(1); setOpenKey(null); };
+  const filtered = Boolean(needle || filters.channel || filters.status || filters.tag || filters.sequenceId);
+  const drafts = threads.filter((t) => t.messages.some((m) => m.is_draft)).length;
+  const count = (c: string) => threads.filter((t) => t.channel === c).length;
+  const first = open ? threads.find((t) => t.id === open.id && t.channel === open.channel) : undefined;
+
+  const panes = (
+    <>
+      <div className={expanded ? "grid gap-4" : "grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"}>
+        <div className={expanded ? "hidden" : "min-w-0 space-y-2"}>
+          {error ? (
+            <ApiError error={error} title="Could not load the inbox" onRetry={() => void refetch()} />
+          ) : loading && threads.length === 0 ? (
+            <div aria-busy="true" className="space-y-2">{Array.from({ length: 5 }, (_, i) => <Skeleton key={i} className="h-16 w-full" />)}</div>
+          ) : rows.length === 0 ? (
+            <ListEmpty filtered={filtered} onClear={clear} />
+          ) : (
+            <ul aria-label="Conversations" className="rounded-md border border-border">
+              {rows.map((t) => (
+                <ThreadRow key={keyOf(t)} thread={t} selected={open != null && keyOf(open) === keyOf(t)} onOpen={() => setOpenKey(keyOf(t))} actions={renderRowActions?.(t)} />
+              ))}
+            </ul>
+          )}
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <span>{total != null ? `${total.toLocaleString()} conversations` : `Page ${page}`}</span>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" disabled={page <= 1 || loading} onClick={() => { setPage((p) => p - 1); setOpenKey(null); }}>Previous</Button>
+              <Button size="sm" variant="outline" disabled={!hasNext || loading} onClick={() => { setPage((p) => p + 1); setOpenKey(null); }}>Next</Button>
+            </div>
+          </div>
+        </div>
+        <div className="min-w-0">
+          {open ? (
+            <DetailPanel
+              key={keyOf(open)}
+              title={first ? first.subject || contactLabel(first) : "Conversation"}
+              subtitle={first ? `${contactLabel(first)}${first.contact?.company ? ` at ${first.contact.company}` : ""}` : undefined}
+              avatar={first ? <EntityAvatar name={contactLabel(first)} kind="person" /> : undefined}
+              onClose={() => { setOpenKey(null); setView(null); }}
+              onExpand={expanded ? undefined : () => setView("full")}
+              onCollapse={expanded ? () => setView(null) : undefined}
+              tabs={[
+                {
+                  id: "conversation",
+                  label: "Conversation",
+                  content: (
+                    <ThreadView thread={first ?? open}>
+                      {(thread, reload) => (
+                        <div className="space-y-3">
+                          {renderDetailActions ? <div className="flex flex-wrap gap-2">{renderDetailActions(thread)}</div> : null}
+                          <ReplyComposer thread={thread} onSent={reload} />
+                          <TagAndAssign thread={thread} availableTags={tags} onChanged={reload} />
+                        </div>
+                      )}
+                    </ThreadView>
+                  ),
+                },
+                { id: "details", label: "Details", content: <ThreadDetails thread={open} /> },
+                ...(extraDetailTabs ?? []).map((tab) => ({ id: tab.id, label: tab.label, content: <ExtraTab thread={open} render={tab.render} /> })),
+              ]}
+            />
+          ) : (
+            <EmptyState title="Select a conversation" description="Pick a reply on the left to read it and respond." />
+          )}
+        </div>
+      </div>
+    </>
+  );
+  if (hideHeader) {
+    return (
+      <div className={className ? `space-y-4 ${className}` : "space-y-4"}>
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search this page" }} filters={<Filters filters={filters} tags={tags} update={update} />} />
+          <div className="flex gap-2"><Button size="sm" variant="outline" onClick={() => void refetch()}><RefreshCw className="mr-1 size-4" />Refresh</Button>{toolbarActions}</div>
+        </div>
+        {panes}
+      </div>
+    );
+  }
+  return (
+    <ScreenLayout
+      className={className}
+      title="Inbox"
+      description="Every reply across email, SMS and LinkedIn in one queue."
+      icon={<InboxIcon className="size-5" />}
+      actions={<><Button size="sm" variant="outline" onClick={() => void refetch()}><RefreshCw className="mr-1 size-4" />Refresh</Button>{toolbarActions}</>}
+      stats={[
+        { label: "Conversations", value: total != null ? total.toLocaleString() : threads.length, hint: total != null ? "in this view" : "on this page" },
+        { label: "Drafts waiting", value: drafts, hint: "on this page", tone: drafts > 0 ? "warning" : "neutral" },
+        { label: "Email threads", value: count("email"), hint: "on this page" },
+        { label: "Text and LinkedIn", value: count("sms") + count("linkedin"), hint: "on this page" },
+      ]}
+      toolbar={<Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search this page" }} filters={<Filters filters={filters} tags={tags} update={update} />} />}
+    >
+      {panes}
+    </ScreenLayout>
+  );
+}