@graph8/sdk 0.361.0 → 0.370.0

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

package/blocks/inbox/components/reply-composer.tsx

@@ -9,7 +9,13 @@
  *      Returns { content (HTML), plain_content }; it delivers NOTHING.
  *   2. POST /inbox/{reply_id}/send   (inbox.sendReply)   EXTERNAL   -> ConfirmSpendDialog first
  *      Reaches a real person and cannot be recalled. A fixed Idempotency-Key per compose makes a double
- *      click or a retry safe.
+ *      click or a retry safe. Sends `from_address` = the thread's own sender (email mailbox, SMS number,
+ *      LinkedIn account id) and `to` = the thread's contact, so the reply leaves from the mailbox the
+ *      conversation is on. Before this the composer sent neither sender nor (for SMS) number, and the API
+ *      refused every email reply with 400 "'from_address' (mailbox) is required".
+ *   Only when an SMS or LinkedIn thread names no sender, one read fills a sender picker:
+ *      GET /sms/phone-numbers (channels.listSmsPhoneNumbers) or
+ *      GET /inbox/linkedin/accounts (aiInbox.listInboxLinkedinAccounts)   READ
  *
  * Both calls are gated by tier: nothing is billed or sent until the person clicks the dialog's button.
  */
@@ -18,9 +24,10 @@ import { useIdempotencyKey } from "../lib/idempotency";
 import { Button, Input, Textarea } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
-import { g8Post } from "@/g8/lib/g8-client";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
-import { replyRecipient, stripHtml, type InboxThread } from "../lib/inbox-types";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { replyRecipient, replySender, senderOptions, stripHtml, type InboxThread } from "../lib/inbox-types";
 
 type DraftOperation = "generate_from_scratch" | "shorten" | "expand" | "fix_grammar_spelling";
 type Pending = { kind: "draft"; operation: DraftOperation } | { kind: "send" } | null;
@@ -51,10 +58,22 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
   const [body, setBody] = useState("");
   const [subject, setSubject] = useState(thread.subject ? (/^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`) : "");
   const [to, setTo] = useState(replyRecipient(thread));
+  const threadSender = replySender(thread);
+  const [from, setFrom] = useState(threadSender);
   const [tone, setTone] = useState<(typeof TONES)[number]>("professional");
   const [objective, setObjective] = useState<(typeof OBJECTIVES)[number]>("follow_up");
   const [pending, setPending] = useState<Pending>(null);
-  const idempotency = useIdempotencyKey(JSON.stringify([thread.channel, thread.id, body, to, channel === "email" ? subject : null]));
+  const idempotency = useIdempotencyKey(JSON.stringify([thread.channel, thread.id, body, to, from, channel === "email" ? subject : null]));
+  // SMS and LinkedIn cannot send without a sender; when the thread does not name one, offer the org's.
+  const needsSenderPick = !threadSender && (channel === "sms" || channel === "linkedin");
+  const senders = useG8Query(
+    async (signal) => {
+      const path = channel === "sms" ? "/sms/phone-numbers" : "/inbox/linkedin/accounts";
+      return senderOptions(channel, (await g8Get<unknown>(path, undefined, { signal })).data);
+    },
+    [channel, needsSenderPick],
+    { enabled: needsSenderPick },
+  );
   const threadKey = `${thread.channel}:${thread.id}`;
   const currentThread = useRef(threadKey);
   currentThread.current = threadKey;
@@ -64,6 +83,7 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
     setBody("");
     setSubject(thread.subject ? (/^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`) : "");
     setTo(replyRecipient(thread));
+    setFrom(replySender(thread));
     setPending(null);
     draft.reset();
     send.reset();
@@ -85,11 +105,18 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
   const send = useG8Mutation(async () => {
     const env = await g8Post<{ message_id?: string | null; status: string }>(
       `/inbox/${encodeURIComponent(thread.id)}/send`,
-      { body, channel, subject: channel === "email" ? subject : undefined, to: to || undefined },
+      {
+        body,
+        channel,
+        subject: channel === "email" ? subject : undefined,
+        to: to || undefined,
+        // Empty only for an email thread the list did not label; the API then uses the thread's mailbox.
+        from_address: from || undefined,
+      },
       { idempotencyKey: idempotency.get() },
     );
     return env.data;
-  });
+  }, { invalidates: ["inbox"] });
 
   const confirm = async () => {
     const current = pending;
@@ -112,7 +139,8 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
   };
 
   const busy = draft.loading || send.loading;
-  const canSend = body.trim().length > 0 && (channel === "linkedin" || to.trim().length > 0) && !busy;
+  const hasSender = channel === "email" || from.trim().length > 0;
+  const canSend = body.trim().length > 0 && (channel === "linkedin" || to.trim().length > 0) && hasSender && !busy;
   const canTransform = body.trim().length > 0 && !busy;
   const canDraft = Boolean(draftChannel(channel));
 
@@ -121,7 +149,33 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
       {channel === "email" ? (
         <Input aria-label="Subject" placeholder="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
       ) : null}
-      <Input aria-label="To" placeholder={channel === "sms" ? "Phone number" : "Recipient"} value={to} onChange={(e) => setTo(e.target.value)} />
+      {needsSenderPick ? (
+        <div className="space-y-1 text-sm">
+          <select
+            aria-label="Send from"
+            className="h-9 w-full rounded-md border bg-background px-2"
+            value={from}
+            disabled={senders.loading}
+            onChange={(e) => setFrom(e.target.value)}
+          >
+            <option value="">{senders.loading ? "Loading senders..." : channel === "sms" ? "Choose the number to text from" : "Choose the LinkedIn account to send from"}</option>
+            {(senders.data ?? []).map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+          {senders.error ? <ApiError error={senders.error} title="Could not load your senders" onRetry={() => void senders.refetch()} /> : null}
+          {!senders.loading && !senders.error && senders.data?.length === 0 ? (
+            <p className="text-muted-foreground">{channel === "sms" ? "No SMS numbers on this account yet." : "No LinkedIn accounts connected yet."}</p>
+          ) : null}
+        </div>
+      ) : from ? (
+        <p className="text-xs text-muted-foreground">From {channel === "linkedin" ? "your LinkedIn account" : from}</p>
+      ) : null}
+      {channel !== "linkedin" ? (
+        <Input aria-label="To" placeholder={channel === "sms" ? "Phone number" : "Recipient"} value={to} onChange={(e) => setTo(e.target.value)} />
+      ) : null}
       <Textarea aria-label="Reply" rows={6} placeholder="Write your reply" value={body} onChange={(e) => setBody(e.target.value)} />
 
       {canDraft ? (
@@ -172,7 +226,9 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
         open={pending?.kind === "send"}
         tier="external"
         title={`Send this ${channel} reply?`}
-        description={`It goes to ${to || "the contact"} from your connected ${channel === "email" ? "mailbox" : channel} account.`}
+        description={`It goes to ${to || "the contact"} from ${
+          channel === "email" ? (from || "the thread's mailbox") : channel === "sms" ? from : "your LinkedIn account"
+        }.`}
         recipients={1}
         confirming={send.loading}
         onConfirm={() => void confirm()}

package/blocks/inbox/components/tag-and-assign.tsx

@@ -23,6 +23,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import type { InboxTag, InboxThread } from "../lib/inbox-types";
 import { ThreadBadge } from "./thread-badge";
+import { pluralWord } from "@/g8/lib/plural";
 
 type Pending = { kind: "tag"; ids: string[] } | { kind: "assign"; email: string } | null;
 interface TeamUser {
@@ -70,9 +71,10 @@ export function TagAndAssign({ thread, availableTags = [], onChanged, className
   const tag = useG8Mutation(async (ids: string[]) => {
     // Only the NEW ids: association can fire tag automations, so already-applied tags are not re-sent.
     return g8Post(`/inbox/${encodeURIComponent(thread.id)}/tag`, { tag_ids: ids.filter((id) => !applied.has(id)) }, { query: channelQuery });
-  });
+  }, { invalidates: ["inbox"] });
   const assign = useG8Mutation(async (email: string) =>
     g8Post(`/inbox/${encodeURIComponent(thread.id)}/assign`, { assignee_email: email }, { query: channelQuery }),
+    { invalidates: ["inbox"] },
   );
 
   const addTag = async () => {
@@ -132,7 +134,7 @@ export function TagAndAssign({ thread, availableTags = [], onChanged, className
           </Button>
         </div>
         <Button size="sm" disabled={selected.length === 0 || tag.loading} onClick={() => setPending({ kind: "tag", ids: selected })}>
-          Apply {selected.length > 0 ? `${selected.length} ` : ""}tag{selected.length === 1 ? "" : "s"}
+          Apply {selected.length > 0 ? `${selected.length} ` : ""}{pluralWord(selected.length, "tag")}
         </Button>
         {createTag.error ? <ApiError error={createTag.error} title="Could not create the tag" /> : null}
         {tag.error ? <ApiError error={tag.error} title="Could not apply the tags" /> : null}

package/blocks/inbox/hooks/use-inbox-thread.ts

@@ -19,6 +19,6 @@ export function useInboxThread(threadId: string | null | undefined, channel: str
       return env.data;
     },
     [threadId, channel],
-    { enabled: Boolean(threadId) },
+    { enabled: Boolean(threadId), key: ["inbox", "detail", threadId ?? null, channel ?? null] },
   );
 }

package/blocks/inbox/hooks/use-inbox-threads.ts

@@ -35,6 +35,7 @@ export function useInboxThreads(filters: InboxFilters, page = 1, pageSize = 25)
       return { threads: env.data ?? [], hasNext: Boolean(env.pagination?.has_next), total: (env.pagination as { total?: number } | undefined)?.total };
     },
     [filters.channel, filters.status, filters.tag, filters.sequenceId, page, pageSize],
+    { key: ["inbox", "list", { channel: filters.channel, status: filters.status, tag: filters.tag, sequenceId: filters.sequenceId, page, pageSize }] },
   );
   return { ...query, threads: query.data?.threads ?? [], hasNext: query.data?.hasNext ?? false, total: query.data?.total };
 }

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

@@ -46,6 +46,14 @@ export interface InboxThread {
   assignees: InboxAssignee[];
   created_at?: string | null;
   updated_at?: string | null;
+  /** Email: the connected mailbox the thread belongs to; a reply is sent from it. */
+  mailbox?: string | null;
+  /** SMS: your number the thread runs on; a reply is sent from it. */
+  from_number?: string | null;
+  /** SMS: the contact's number; a reply goes to it. */
+  to_number?: string | null;
+  /** LinkedIn: the account the conversation belongs to; a reply is sent from it. */
+  linkedin_account_id?: number | null;
 }
 
 /** Statuses `GET /inbox?status=` accepts (case-insensitive). Anything else is a 422. */
@@ -95,6 +103,44 @@ export function formatWhen(iso: string | null | undefined): string {
 /** Default recipient for a reply: the contact's address on the thread's channel. */
 export function replyRecipient(thread: InboxThread): string {
   const c = thread.contact;
-  if (thread.channel === "sms") return c?.phone ?? "";
+  if (thread.channel === "sms") return thread.to_number || c?.phone || "";
   return c?.email ?? "";
 }
+
+/**
+ * Default sender for a reply, as `POST /inbox/{id}/send` expects it in `from_address`: the thread's mailbox
+ * (email), your number on the thread (SMS) or the numeric LinkedIn account id. Empty when the thread does not
+ * say; the API then defaults email itself, and SMS/LinkedIn need a sender picked.
+ */
+export function replySender(thread: InboxThread): string {
+  if (thread.channel === "sms") return thread.from_number ?? "";
+  if (thread.channel === "linkedin") return thread.linkedin_account_id != null ? String(thread.linkedin_account_id) : "";
+  return thread.mailbox ?? "";
+}
+
+export interface SenderOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * Senders for a picker from `GET /sms/phone-numbers` or `GET /inbox/linkedin/accounts`. Both answer with an
+ * untyped `{ items: [...] }` envelope (no response schema in the contract), so this reads defensively.
+ */
+export function senderOptions(channel: string, payload: unknown): SenderOption[] {
+  const raw = Array.isArray(payload) ? payload : ((payload as { items?: unknown[] } | null)?.items ?? []);
+  const out: SenderOption[] = [];
+  for (const item of raw as Array<Record<string, unknown>>) {
+    if (!item || typeof item !== "object") continue;
+    if (channel === "sms") {
+      const number = item.phone_number ?? item.number ?? item.phone;
+      if (typeof number === "string" && number) out.push({ value: number, label: String(item.friendly_name ?? item.label ?? number) });
+      continue;
+    }
+    const id = item.id ?? item.account_id ?? item.linkedin_account_id;
+    if (typeof id !== "number" && !(typeof id === "string" && /^\d+$/.test(id))) continue;
+    const name = [item.first_name ?? item.firstName, item.last_name ?? item.lastName].filter(Boolean).join(" ");
+    out.push({ value: String(id), label: String(name || item.name || item.email || item.emailAddress || `Account ${id}`) });
+  }
+  return out;
+}

package/blocks/inbox/recipes/01-triage-and-reply.ts

@@ -32,11 +32,21 @@ const draft = await g8.api.aiInbox.generateInboxDraft({
 });
 const html = (draft.data as { content?: string }).content ?? "";
 
-// 4. EXTERNAL: send. Reuse the same idempotency key if you retry this exact call.
+// 4. EXTERNAL: send from the thread's own mailbox (`mailbox`) to its contact. Reuse the same idempotency key if
+// you retry this exact call. When `from_address` / `to` are omitted the API fills both from the thread, but
+// graph8 APIs older than contract 1.374.0 refuse the send with 400, so name them.
+const mailbox = full.data.mailbox ?? undefined;
+const contactEmail = (full.data.contact as { email?: string | null } | null | undefined)?.email ?? undefined;
 const sent = await g8.api.inbox.sendReply(
   {
     path: { reply_id: thread.id },
-    body: { channel: "email", body: html, subject: full.data.subject ? `Re: ${full.data.subject}` : null },
+    body: {
+      channel: "email",
+      body: html,
+      subject: full.data.subject ? `Re: ${full.data.subject}` : null,
+      from_address: mailbox,
+      to: contactEmail,
+    },
   },
   { idempotencyKey: randomUUID() },
 );

package/blocks/integrations/README.md

@@ -5,6 +5,15 @@ Apollo / Salesforce "integrations" settings screen.
 
 Depends on: `foundation`. Install: `npx @graph8/sdk add integrations`.
 
+## Screens
+
+`IntegrationsScreen` (`components/integrations-screen.tsx`) is the finished page: copy it as your route. No props are required.
+
+- **Connections tab**: the five CRMs and the workspace tools. "Manage sync" opens a side panel with sync switches, job progress and a manual
+  push (deep link `?id=hubspot`; a webhook is `?tab=webhooks&id=<webhook id>`). Connecting is a link out to the graph8 app, because OAuth consent only runs there.
+- **Webhooks tab**: create, pause, rotate and delete webhooks, read deliveries. The secret is shown once.
+- Props (all optional): `connectUrl`, `defaultWebhookUrl`, `pushRecords`, `toolbarActions`, `renderDetailActions(record)`, `extraDetailTabs` (each `{ id, label, render(record) }`), where `record` is `{ kind: "crm", provider }` or `{ kind: "webhook", id }`.
+
 ## Components
 
 | Component | What it does | Tiers |