@graph8/sdk 0.373.0 → 0.374.0

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

@@ -15,13 +15,23 @@
  * 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.
  *
+ * Management (all optional, on by default; `showManagement={false}` hides the three toolbar buttons):
+ *   - "New message" (ComposeMessage): write a new email or text from a sender you choose (external, confirmed).
+ *   - "Search all" (InboxSearch): search every email thread or LinkedIn conversation on the server, then open a result.
+ *   - "Manage" (TagManager + BlockedSenders): create, rename, delete tags; block and unblock senders. The tag list it
+ *     loads also feeds the tag filter and the tag picker.
+ *   - In an open conversation, with `showThreadActions` (default off), "Manage conversation" (ThreadActions): mark read or unread, remove a tag, unassign, block sender.
+ * SDK operations of its own: none; the parts above own theirs and their confirm dialogs.
+ * A conversation this key cannot see (or that was removed) answers 404; the conversation view says so instead of failing.
+ *
  * Props are backwards compatible: `initialFilters`, `availableTags`, `className` as before; everything else is optional glue.
  */
 import { useMemo, useState, type ReactNode } from "react";
-import { Inbox as InboxIcon, Mail, RefreshCw } from "lucide-react";
+import { Inbox as InboxIcon, Mail, PenSquare, RefreshCw, Search, Tags } 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 { FormSheet } from "@/g8/components/screen/form-sheet";
 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";
@@ -42,7 +52,13 @@ import {
   type InboxTag,
   type InboxThread,
 } from "../lib/inbox-types";
+import { isNotFound } from "../lib/inbox-manage";
+import { BlockedSenders } from "./blocked-senders";
+import { ComposeMessage } from "./compose-message";
+import { InboxSearch } from "./inbox-search";
 import { ReplyComposer } from "./reply-composer";
+import { TagManager } from "./tag-manager";
+import { ThreadActions } from "./thread-actions";
 import { TagAndAssign } from "./tag-and-assign";
 import { ThreadView } from "./thread-view";
 import { useBrand } from "@/g8/hooks/use-brand";
@@ -66,6 +82,10 @@ export interface InboxScreenProps {
   urlState?: boolean;
   /** Skip the screen header (title, description, stats) when the host page already has one. Default false. */
   hideHeader?: boolean;
+  /** Show the New message, Search all and Manage buttons. Default true. */
+  showManagement?: boolean;
+  /** Show "Manage conversation" (mark read, remove tag, unassign, block sender) under the composer. Default false, so existing embedders see no new controls. */
+  showThreadActions?: boolean;
 }
 
 /** `useUrlState` or plain state, chosen once per mount (the flag must not change while mounted). */
@@ -160,6 +180,7 @@ function ListEmpty({ filtered, onClear }: { filtered: boolean; onClear: () => vo
 
 function ThreadDetails({ thread }: { thread: Selected }) {
   const { data: t, loading, error, refetch } = useInboxThread(thread.id, thread.channel);
+  if (isNotFound(error)) return <EmptyState compact title="Conversation not found" description="It may have been removed, or it is not shared with this API key." />;
   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 = "";
@@ -185,15 +206,18 @@ function ThreadDetails({ thread }: { thread: Selected }) {
 
 function ExtraTab({ thread, render }: { thread: Selected; render: (thread: InboxThread) => ReactNode }) {
   const { data, loading, error, refetch } = useInboxThread(thread.id, thread.channel);
+  if (isNotFound(error)) return <EmptyState compact title="Conversation not found" description="It may have been removed, or it is not shared with this API key." />;
   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) {
+export function InboxScreen({ initialFilters, availableTags, className, toolbarActions, renderRowActions, renderDetailActions, extraDetailTabs, pageSize = 25, urlState = true, hideHeader = false, showManagement = true, showThreadActions = false }: InboxScreenProps) {
   const [filters, setFilters] = useState<InboxFilters>(initialFilters ?? {});
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
+  const [sheet, setSheet] = useState<"compose" | "search" | "manage" | null>(null);
+  const [managed, setManaged] = useState<InboxTag[]>([]);
   const [openKey, setOpenKey] = useSelectionState("id", urlState);
   const [view, setView] = useSelectionState("view", urlState);
   const { threads, loading, error, hasNext, total, refetch } = useInboxThreads(filters, page, pageSize);
@@ -202,9 +226,9 @@ export function InboxScreen({ initialFilters, availableTags, className, toolbarA
 
   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);
+    for (const t of [...(availableTags ?? []), ...managed, ...threads.flatMap((th) => th.tags)]) if (t.id) seen.set(t.id, t);
     return [...seen.values()];
-  }, [availableTags, threads]);
+  }, [availableTags, managed, 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),
@@ -222,6 +246,27 @@ export function InboxScreen({ initialFilters, availableTags, className, toolbarA
   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 management = showManagement ? (
+    <>
+      <Button size="sm" variant="outline" onClick={() => setSheet("search")}><Search className="mr-1 size-4" />Search all</Button>
+      <Button size="sm" variant="outline" onClick={() => setSheet("manage")}><Tags className="mr-1 size-4" />Manage</Button>
+      <Button size="sm" onClick={() => setSheet("compose")}><PenSquare className="mr-1 size-4" />New message</Button>
+    </>
+  ) : null;
+  const sheets = showManagement ? (
+    <>
+      <FormSheet open={sheet === "compose"} onOpenChange={(o) => !o && setSheet(null)} width="lg" title="New message" description="Write to someone new. Nothing is sent until you confirm.">
+        {sheet === "compose" ? <ComposeMessage onCancel={() => setSheet(null)} onSent={() => { setSheet(null); void refetch(); }} /> : null}
+      </FormSheet>
+      <FormSheet open={sheet === "search"} onOpenChange={(o) => !o && setSheet(null)} width="lg" title="Search all conversations" description="Searches your email and LinkedIn on the server, beyond the page loaded here.">
+        {sheet === "search" ? <InboxSearch onOpen={(hit) => { setOpenKey(`${hit.channel}:${hit.id}`); setView(null); setSheet(null); }} /> : null}
+      </FormSheet>
+      <FormSheet open={sheet === "manage"} onOpenChange={(o) => !o && setSheet(null)} width="lg" title="Manage the inbox" description="Tags and blocked senders.">
+        {sheet === "manage" ? <div className="space-y-6"><TagManager onTags={setManaged} /><BlockedSenders /></div> : null}
+      </FormSheet>
+    </>
+  ) : null;
+
   const panes = (
     <>
       <div className={expanded ? "grid gap-4" : "grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"}>
@@ -268,6 +313,7 @@ export function InboxScreen({ initialFilters, availableTags, className, toolbarA
                           {renderDetailActions ? <div className="flex flex-wrap gap-2">{renderDetailActions(thread)}</div> : null}
                           <ReplyComposer thread={thread} onSent={reload} />
                           <TagAndAssign thread={thread} availableTags={tags} onChanged={reload} />
+                          {showThreadActions ? <ThreadActions thread={thread} onChanged={reload} /> : null}
                         </div>
                       )}
                     </ThreadView>
@@ -289,9 +335,10 @@ export function InboxScreen({ initialFilters, availableTags, className, toolbarA
       <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 className="flex gap-2"><Button size="sm" variant="outline" onClick={() => void refetch()}><RefreshCw className="mr-1 size-4" />Refresh</Button>{management}{toolbarActions}</div>
         </div>
         {panes}
+        {sheets}
       </div>
     );
   }
@@ -301,7 +348,7 @@ export function InboxScreen({ initialFilters, availableTags, className, toolbarA
       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}</>}
+      actions={<><Button size="sm" variant="outline" onClick={() => void refetch()}><RefreshCw className="mr-1 size-4" />Refresh</Button>{management}{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" },
@@ -311,6 +358,7 @@ export function InboxScreen({ initialFilters, availableTags, className, toolbarA
       toolbar={<Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search this page" }} filters={<Filters filters={filters} tags={tags} update={update} />} />}
     >
       {panes}
+      {sheets}
     </ScreenLayout>
   );
 }

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

@@ -0,0 +1,106 @@
+"use client";
+
+/**
+ * InboxSearch: search ALL of your email threads or LinkedIn conversations on the server, not just the page the list
+ * has loaded. Type, press Enter (or Search), pick a result; `onOpen` receives the thread's channel and id so a screen
+ * can open it in its conversation view.
+ *
+ * SDK operations, in order:
+ *   Email:    1. GET  /inbox/mailboxes/paginated                    (aiInbox.listInboxMailboxesPaginated)  READ - the mailboxes searched
+ *             2. POST /inbox/emails/search?page&page_size            (inbox.searchInboxEmails)              READ - `mailboxes` is required
+ *                (an empty mailbox list is "no result", never "all", so every mailbox you can see is sent)
+ *   LinkedIn: POST /inbox/linkedin/conversations/search             (aiInbox.searchInboxLinkedinConversations)  READ
+ * SMS threads have no search route in the API; they are found in the list. Searching sends nothing and costs nothing.
+ * Result rows are untyped in the contract, so they are read defensively; opening one loads the real thread
+ * (ThreadView), and a thread the key may not see answers a uniform 404 which the thread view explains.
+ */
+import { useState } from "react";
+import { Search } from "lucide-react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { FirstNotice } from "@/g8/components/paging-notices";
+import { useInboxMailboxes } from "../hooks/use-inbox-mailboxes";
+import { formatWhen } from "../lib/inbox-types";
+import { rowsFrom, searchHit } from "../lib/inbox-manage";
+import type { SearchHit } from "../lib/inbox-manage";
+
+export interface InboxSearchProps {
+  /** Called with the chosen result's channel and thread id. */
+  onOpen?: (hit: { channel: "email" | "linkedin"; id: string }) => void;
+  pageSize?: number;
+  className?: string;
+}
+
+type Channel = "email" | "linkedin";
+
+export function InboxSearch({ onOpen, pageSize = 20, className }: InboxSearchProps) {
+  const [channel, setChannel] = useState<Channel>("email");
+  const [text, setText] = useState("");
+  const [submitted, setSubmitted] = useState<{ channel: Channel; q: string; page: number } | null>(null);
+  const mailboxes = useInboxMailboxes({ enabled: channel === "email" });
+  const results = useG8Query(
+    async (signal): Promise<{ hits: SearchHit[]; hasNext: boolean }> => {
+      const s = submitted!;
+      if (s.channel === "email") {
+        const env = await g8Post("/inbox/emails/search", { mailboxes: (mailboxes.data ?? []).map((m) => m.address), search: s.q, sort_by: "updated_at", sort_order: "desc" }, { query: { page: s.page, page_size: pageSize }, signal });
+        const hits = rowsFrom<Record<string, unknown>>(env, "emails").map((r) => searchHit("email", r)).filter((h): h is SearchHit => h != null);
+        return { hits, hasNext: Boolean((env.pagination as { has_next?: boolean } | undefined)?.has_next) || hits.length >= pageSize };
+      }
+      const env = await g8Post("/inbox/linkedin/conversations/search", { search: s.q, limit: pageSize, offset: (s.page - 1) * pageSize, sort_order: "desc" }, { signal });
+      const hits = rowsFrom<Record<string, unknown>>(env, "conversations").map((r) => searchHit("linkedin", r)).filter((h): h is SearchHit => h != null);
+      return { hits, hasNext: hits.length >= pageSize };
+    },
+    [submitted?.channel, submitted?.q, submitted?.page, submitted ? (mailboxes.data ?? []).length : 0],
+    { enabled: submitted != null && (submitted.channel !== "email" || mailboxes.data != null) },
+  );
+
+  const run = () => {
+    const q = text.trim();
+    if (q) setSubmitted({ channel, q, page: 1 });
+  };
+  const hits = results.data?.hits ?? [];
+
+  return (
+    <div className={`space-y-3 ${className ?? ""}`}>
+      <form className="flex flex-wrap items-center gap-2" role="search" onSubmit={(e) => { e.preventDefault(); run(); }}>
+        <div role="group" aria-label="Search in" className="flex gap-1">
+          <Button type="button" size="sm" variant={channel === "email" ? "default" : "outline"} onClick={() => { setChannel("email"); setSubmitted(null); }}>Email</Button>
+          <Button type="button" size="sm" variant={channel === "linkedin" ? "default" : "outline"} onClick={() => { setChannel("linkedin"); setSubmitted(null); }}>LinkedIn</Button>
+        </div>
+        <Input aria-label="Search all conversations" className="min-w-48 flex-1" placeholder={channel === "email" ? "Subject, sender or text" : "Name or message text"} value={text} onChange={(e) => setText(e.target.value)} />
+        <Button type="submit" size="sm" disabled={!text.trim()}><Search className="mr-1 size-4" aria-hidden />Search</Button>
+      </form>
+      {channel === "email" ? <FirstNotice shown={mailboxes.items.length} limit={0} force={mailboxes.truncated} noun="mailboxes" /> : null}
+      {mailboxes.error && channel === "email" ? <ApiError error={mailboxes.error} title="Could not load your mailboxes" onRetry={() => void mailboxes.refetch()} /> : null}
+      {channel === "email" && mailboxes.data && mailboxes.data.length === 0 ? <p className="text-sm text-muted-foreground">No mailbox is connected yet, so there is nothing to search.</p> : null}
+      {results.error ? <ApiError error={results.error} title="The search failed" onRetry={() => void results.refetch()} /> : null}
+      {submitted && results.loading && !results.data ? <div aria-busy="true" className="space-y-2"><Skeleton className="h-14 w-full" /><Skeleton className="h-14 w-full" /></div> : null}
+      {submitted && results.data && hits.length === 0 ? <EmptyState compact title="No conversations found" description={`Nothing matches "${submitted.q}".`} /> : null}
+      {hits.length > 0 ? (
+        <ul aria-label="Search results" className="divide-y rounded-md border border-border">
+          {hits.map((h) => (
+            <li key={`${h.channel}:${h.id}`}>
+              <button type="button" className="flex w-full flex-col gap-0.5 p-3 text-left hover:bg-muted/50" onClick={() => onOpen?.({ channel: h.channel, id: h.id })}>
+                <span className="flex items-center justify-between gap-2"><span className="truncate text-sm font-medium">{h.title}</span><span className="shrink-0 text-xs text-muted-foreground">{formatWhen(h.when)}</span></span>
+                {h.subtitle ? <span className="truncate text-xs text-muted-foreground">{h.subtitle}</span> : null}
+                {h.preview ? <span className="truncate text-xs">{h.preview}</span> : null}
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {submitted && results.data && (submitted.page > 1 || results.data.hasNext) ? (
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span>Page {submitted.page}</span>
+          <div className="flex gap-2">
+            <Button size="sm" variant="outline" disabled={submitted.page <= 1 || results.loading} onClick={() => setSubmitted({ ...submitted, page: submitted.page - 1 })}>Previous</Button>
+            <Button size="sm" variant="outline" disabled={!results.data.hasNext || results.loading} onClick={() => setSubmitted({ ...submitted, page: submitted.page + 1 })}>Next</Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/blocks/inbox/components/tag-manager.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+/**
+ * TagManager: the inbox tag library. See every tag, create one, rename or recolour one, delete one.
+ *
+ * SDK operations, in order:
+ *   1. GET    /workflows/inbox-tags       (workflows.listInboxTags)  READ         - every tag, with its built-in policy
+ *   2. POST   /inbox/tags                 (aiInbox.createInboxTag)   write
+ *   3. PUT    /inbox/tags/{tag_id}        (aiInbox.updateInboxTag)   write        - ONLY the fields that changed
+ *   4. DELETE /inbox/tags/{tag_id}        (aiInbox.deleteInboxTag)   DESTRUCTIVE  -> ConfirmSpendDialog first
+ *
+ * Built-in tags follow the API's policy: "system" tags cannot be edited or deleted, "sdr_ai" tags cannot be renamed
+ * or deleted. Deleting a tag removes the label from every conversation that carries it (nothing else is removed).
+ * The edit form is seeded from a LOADED row and its Save stays disabled until something changed; it never writes a
+ * tag that was not loaded, and the request carries only the changed fields (a partial PUT must not reset
+ * `ai_can_apply` or the rules, which this form does not show). Applying a tag to a conversation is TagAndAssign.
+ */
+import { useEffect, useState } from "react";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import type { InboxTag } from "../lib/inbox-types";
+import { asInboxTags, canDeleteTag, canEditTag, canRenameTag, isHexColor, managedTags, tagChanges } from "../lib/inbox-manage";
+import type { ManagedTag } from "../lib/inbox-manage";
+
+export interface TagManagerProps {
+  /** Called with the current tag list after every load and change, so a screen can keep its pickers in step. */
+  onTags?: (tags: InboxTag[]) => void;
+  className?: string;
+}
+
+function TagForm({ tag, onDone }: { tag: ManagedTag | null; onDone: (changed: boolean) => void }) {
+  const [name, setName] = useState(tag?.name ?? "");
+  const [description, setDescription] = useState(tag?.description ?? "");
+  const [color, setColor] = useState(tag?.color ?? "");
+  useEffect(() => {
+    setName(tag?.name ?? "");
+    setDescription(tag?.description ?? "");
+    setColor(tag?.color ?? "");
+  }, [tag?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+  const changes = tag ? tagChanges(tag, { name, description, color }) : {};
+  const save = useG8Mutation(async () => {
+    if (tag) await g8Put(`/inbox/tags/${encodeURIComponent(tag.id)}`, changes);
+    else await g8Post("/inbox/tags", { name: name.trim(), ...(description.trim() ? { description: description.trim() } : {}), ...(color.trim() ? { color: color.trim() } : {}) });
+  }, { invalidates: ["inbox"] });
+  const valid = name.trim().length > 0 && isHexColor(color) && (tag ? Object.keys(changes).length > 0 : true);
+  const submit = async () => {
+    try {
+      await save.mutateAsync(undefined);
+      onDone(true);
+    } catch {
+      /* the error renders in the form; the typed values stay */
+    }
+  };
+  return (
+    <form className="space-y-2 rounded-md border border-border p-3" onSubmit={(e) => { e.preventDefault(); if (valid) void submit(); }} aria-label={tag ? `Edit ${tag.name}` : "New tag"}>
+      <Input aria-label="Tag name" placeholder="Tag name" value={name} disabled={tag ? !canRenameTag(tag) : false} onChange={(e) => setName(e.target.value)} />
+      <Input aria-label="Description" placeholder="What this tag means (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
+      <div className="flex items-center gap-2">
+        <Input aria-label="Colour" className="w-32" placeholder="#eab308" value={color} onChange={(e) => setColor(e.target.value)} />
+        {!isHexColor(color) ? <span role="alert" className="text-xs text-error-foreground">Use a hex colour such as #eab308.</span> : null}
+      </div>
+      {save.error ? <ApiError error={save.error} title={tag ? "Could not save the tag" : "Could not create the tag"} /> : null}
+      <div className="flex justify-end gap-2">
+        <Button type="button" variant="outline" size="sm" onClick={() => onDone(false)}>Cancel</Button>
+        <Button type="submit" size="sm" disabled={!valid || save.loading}>{tag ? "Save changes" : "Create tag"}</Button>
+      </div>
+    </form>
+  );
+}
+
+export function TagManager({ onTags, className }: TagManagerProps) {
+  const [editing, setEditing] = useState<ManagedTag | "new" | null>(null);
+  const [deleting, setDeleting] = useState<ManagedTag | null>(null);
+  const tags = useG8Query(async (signal) => managedTags(await g8Get("/workflows/inbox-tags", undefined, { signal })), [], { key: ["inbox", "tags"] });
+  useEffect(() => { if (tags.data) onTags?.(asInboxTags(tags.data)); }, [tags.data]); // eslint-disable-line react-hooks/exhaustive-deps
+  const remove = useG8Mutation(async (tag: ManagedTag) => {
+    await g8Delete(`/inbox/tags/${encodeURIComponent(tag.id)}`);
+    setDeleting(null);
+    await tags.refetch();
+  }, { invalidates: ["inbox"], onError: () => setDeleting(null) });
+
+  if (tags.error) return <ApiError error={tags.error} title="Could not load the tags" onRetry={() => void tags.refetch()} className={className} />;
+  if (tags.loading && !tags.data) return <div aria-busy="true" className={`space-y-2 ${className ?? ""}`}><Skeleton className="h-10 w-full" /><Skeleton className="h-10 w-full" /></div>;
+  const rows = tags.data ?? [];
+  const done = (changed: boolean) => { setEditing(null); if (changed) void tags.refetch(); };
+
+  return (
+    <div className={`space-y-3 ${className ?? ""}`}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">Tags</h3>
+        <Button size="sm" variant="outline" disabled={editing != null} onClick={() => setEditing("new")}><Plus className="mr-1 size-4" aria-hidden />New tag</Button>
+      </div>
+      {editing === "new" ? <TagForm tag={null} onDone={done} /> : null}
+      {rows.length === 0 && editing !== "new" ? (
+        <EmptyState compact title="No tags yet" description="Tags label conversations so you can filter and route them." action={<Button size="sm" onClick={() => setEditing("new")}>Create a tag</Button>} />
+      ) : (
+        <ul aria-label="Tags" className="divide-y rounded-md border border-border">
+          {rows.map((t) => (
+            <li key={t.id} className="p-2 text-sm">
+              {editing !== "new" && editing?.id === t.id ? (
+                <TagForm tag={t} onDone={done} />
+              ) : (
+                <div className="flex items-center gap-2">
+                  <span aria-hidden className="size-3 shrink-0 rounded-full border border-border" style={t.color ? { backgroundColor: t.color } : undefined} />
+                  <span className="min-w-0 flex-1"><span className="font-medium">{t.name}</span>{t.description ? <span className="block truncate text-xs text-muted-foreground">{t.description}</span> : null}</span>
+                  {t.policy !== "user" ? <StatusPill tone="neutral">built in</StatusPill> : null}
+                  <Button size="sm" variant="ghost" aria-label={`Edit ${t.name}`} disabled={!canEditTag(t) || editing != null} onClick={() => setEditing(t)}><Pencil className="size-4" aria-hidden /></Button>
+                  <Button size="sm" variant="ghost" aria-label={`Delete ${t.name}`} disabled={!canDeleteTag(t)} onClick={() => setDeleting(t)}><Trash2 className="size-4" aria-hidden /></Button>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the tag" /> : null}
+      <ConfirmSpendDialog
+        open={deleting != null}
+        tier="destructive"
+        title={`Delete the tag "${deleting?.name ?? ""}"?`}
+        description="Every conversation loses this label. The conversations themselves are not touched. This cannot be undone."
+        confirmLabel="Delete tag"
+        affected={1}
+        confirming={remove.loading}
+        onConfirm={() => deleting && void remove.mutate(deleting)}
+        onCancel={() => setDeleting(null)}
+      />
+    </div>
+  );
+}

package/blocks/inbox/components/thread-actions.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+/**
+ * ThreadActions: the small things you do to one conversation besides replying: mark it read (or, on LinkedIn,
+ * unread), take a tag off, take a teammate off, and block the sender.
+ *
+ * SDK operations, in order (the thread's own id and channel decide the route):
+ *   Read state   POST /inbox/emails/{id}/mark-read                                          (aiInbox.markInboxEmailRead)   write
+ *                POST /inbox/sms/{id}/mark-read                                             (aiInbox.markInboxSmsRead)     write
+ *                POST /inbox/linkedin/accounts/{account}/conversations/{id}/read|unread     (aiInbox.markInboxLinkedinConversationRead|Unread) write
+ *                There is no "mark unread" for email or SMS in the API, so those offer only "Mark as read".
+ *   Remove tag   DELETE /inbox/channels/{id}/tags?tag_id&channel_type                       (aiInbox.removeChannelTag)     DESTRUCTIVE -> ConfirmSpendDialog
+ *   Unassign     DELETE /inbox/channels/{id}/assign?assignee_email&channel_type             (aiInbox.unassignChannel)      DESTRUCTIVE -> ConfirmSpendDialog
+ *   Block sender POST /inbox/blocked-senders { mailbox, sender_email }                     (aiInbox.blockInboxSender)     write, email threads only;
+ *                asked inline first because future mail from them stops arriving (BlockedSenders can undo it)
+ * Applying a tag and assigning are TagAndAssign. Nothing here sends a message.
+ */
+import { useState } from "react";
+import { Ban, CheckCheck, MailOpen, X } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Delete, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { canMarkRead, canMarkUnread, channelTypeOf } from "../lib/inbox-manage";
+import type { InboxThread } from "../lib/inbox-types";
+
+type Pending = { kind: "tag"; id: string; name: string } | { kind: "assignee"; email: string; name: string } | null;
+
+export interface ThreadActionsProps {
+  thread: InboxThread;
+  /** Called after any change; reload the thread here. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+function readPath(thread: InboxThread, read: boolean): string | null {
+  const id = encodeURIComponent(thread.id);
+  if (thread.channel === "sms") return read ? `/inbox/sms/${id}/mark-read` : null;
+  if (thread.channel === "linkedin") {
+    return thread.linkedin_account_id == null ? null : `/inbox/linkedin/accounts/${thread.linkedin_account_id}/conversations/${id}/${read ? "read" : "unread"}`;
+  }
+  return read ? `/inbox/emails/${id}/mark-read` : null;
+}
+
+export function ThreadActions({ thread, onChanged, className }: ThreadActionsProps) {
+  const [pending, setPending] = useState<Pending>(null);
+  const [blocking, setBlocking] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const channelType = channelTypeOf(thread.channel);
+  const sender = thread.channel === "email" ? (thread.contact?.email ?? "") : "";
+  const channelQuery = { channel_type: channelType, linkedin_account_id: thread.channel === "linkedin" ? thread.linkedin_account_id : undefined };
+  const done = (message: string) => { setNotice(message); onChanged?.(); };
+
+  const mark = useG8Mutation(async (read: boolean) => {
+    const path = readPath(thread, read);
+    if (!path) throw new Error("This conversation cannot be marked that way.");
+    await g8Post(path);
+    done(read ? "Marked as read." : "Marked as unread.");
+  }, { invalidates: ["inbox"] });
+  const remove = useG8Mutation(async (p: NonNullable<Pending>) => {
+    const base = `/inbox/channels/${encodeURIComponent(thread.id)}`;
+    if (p.kind === "tag") await g8Delete(`${base}/tags`, { query: { ...channelQuery, tag_id: p.id } });
+    else await g8Delete(`${base}/assign`, { query: { ...channelQuery, assignee_email: p.email } });
+    done(p.kind === "tag" ? `Removed the tag "${p.name}".` : `Unassigned ${p.name}.`);
+  }, { invalidates: ["inbox"] });
+  const block = useG8Mutation(async () => {
+    await g8Post("/inbox/blocked-senders", { mailbox: thread.mailbox, sender_email: sender });
+    setBlocking(false);
+    done(`Blocked ${sender}.`);
+  }, { invalidates: ["inbox"] });
+
+  const confirm = async () => {
+    const current = pending;
+    if (!current) return;
+    try {
+      await remove.mutateAsync(current);
+    } catch {
+      /* surfaced below */
+    }
+    setPending(null);
+  };
+  const canBlock = thread.channel === "email" && Boolean(thread.mailbox) && Boolean(sender);
+  const label = (n: string | null | undefined, fallback: string) => n || fallback;
+
+  return (
+    <section aria-label="Conversation actions" className={`space-y-3 rounded-lg border p-3 text-sm ${className ?? ""}`}>
+      <h3 className="font-medium">Manage conversation</h3>
+      <div className="flex flex-wrap gap-2">
+        {canMarkRead(thread) ? <Button size="sm" variant="outline" loading={mark.loading} onClick={() => void mark.mutate(true)}><MailOpen className="mr-1 size-4" aria-hidden />Mark as read</Button> : null}
+        {canMarkUnread(thread) ? <Button size="sm" variant="outline" disabled={mark.loading} onClick={() => void mark.mutate(false)}>Mark as unread</Button> : null}
+        {canBlock && !blocking ? <Button size="sm" variant="outline" onClick={() => setBlocking(true)}><Ban className="mr-1 size-4" aria-hidden />Block sender</Button> : null}
+      </div>
+      {blocking ? (
+        <div role="group" aria-label="Block this sender" className="flex flex-wrap items-center gap-2 rounded-md border border-border p-2">
+          <span>Stop receiving mail from {sender} in {thread.mailbox}?</span>
+          <Button size="sm" loading={block.loading} onClick={() => void block.mutate(undefined)}>Block {sender}</Button>
+          <Button size="sm" variant="ghost" onClick={() => setBlocking(false)}>Cancel</Button>
+        </div>
+      ) : null}
+      {thread.tags.length > 0 || thread.assignees.length > 0 ? (
+        <ul aria-label="Remove from conversation" className="space-y-1">
+          {thread.tags.filter((t) => t.id).map((t) => (
+            <li key={`t-${t.id}`} className="flex items-center justify-between gap-2">
+              <span>Tag: {label(t.name, String(t.id))}</span>
+              <Button size="sm" variant="ghost" aria-label={`Remove tag ${label(t.name, String(t.id))}`} onClick={() => setPending({ kind: "tag", id: String(t.id), name: label(t.name, String(t.id)) })}><X className="size-4" aria-hidden /></Button>
+            </li>
+          ))}
+          {thread.assignees.map((a) => (
+            <li key={`a-${a.email}`} className="flex items-center justify-between gap-2">
+              <span>Assigned to {label(a.name, a.email)}</span>
+              <Button size="sm" variant="ghost" aria-label={`Unassign ${label(a.name, a.email)}`} onClick={() => setPending({ kind: "assignee", email: a.email, name: label(a.name, a.email) })}><X className="size-4" aria-hidden /></Button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {[mark.error, remove.error, block.error].map((e, i) => (e ? <ApiError key={i} error={e} title="Could not update the conversation" /> : null))}
+      {notice ? <p role="status" className="text-xs text-muted-foreground"><CheckCheck className="mr-1 inline size-3" aria-hidden />{notice}</p> : null}
+
+      <ConfirmSpendDialog
+        open={pending != null}
+        tier="destructive"
+        title={pending?.kind === "tag" ? `Remove the tag "${pending.name}"?` : `Unassign ${pending?.name ?? ""}?`}
+        description={pending?.kind === "tag" ? "The tag comes off this conversation only. Other conversations keep it." : "They no longer own this conversation. You can assign them again later."}
+        confirmLabel={pending?.kind === "tag" ? "Remove tag" : "Unassign"}
+        affected={1}
+        confirming={remove.loading}
+        onConfirm={() => void confirm()}
+        onCancel={() => setPending(null)}
+      />
+    </section>
+  );
+}

package/blocks/inbox/components/thread-view.tsx

@@ -18,6 +18,7 @@ import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { useInboxThread } from "../hooks/use-inbox-thread";
 import { contactLabel, formatWhen, stripHtml, type InboxMessage, type InboxThread } from "../lib/inbox-types";
+import { isNotFound } from "../lib/inbox-manage";
 
 export interface ThreadViewProps {
   /** A row from InboxList. Only `id` and `channel` are required; the rest is loaded fresh. */
@@ -73,6 +74,7 @@ function ThreadHeader({ thread }: { thread: InboxThread }) {
 export function ThreadView({ thread: row, children, className }: ThreadViewProps) {
   const { data, loading, error, refetch } = useInboxThread(row.id, row.channel);
 
+  if (isNotFound(error)) return <EmptyState title="Conversation not found" description="It may have been removed, or it is not shared with this API key. Hidden conversations answer exactly like missing ones." />;
   if (error) return <ApiError error={error} title="Could not load this conversation" onRetry={() => void refetch()} />;
   if (loading && !data) {
     return (

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

@@ -0,0 +1,31 @@
+"use client";
+
+/**
+ * useInboxMailboxes: EVERY mailbox the caller can see, with whether they may send as it. One page of 100 is read, then the
+ * next, until the API says there is no more (at most 20 pages); `truncated` is true when that cap was hit, and the picker
+ * must say so (FirstNotice). A mailbox beyond the first page can therefore never be silently missing from a sender picker.
+ *
+ * SDK operations: GET /inbox/mailboxes/paginated?page&page_size (aiInbox.listInboxMailboxesPaginated), read tier.
+ */
+import { g8Get } from "@/g8/lib/g8-client";
+import { useAllPages } from "@/g8/hooks/use-all-pages";
+import { hasNextOf } from "@/g8/lib/paging";
+import { mailboxChoices } from "../lib/inbox-manage";
+import type { MailboxChoice } from "../lib/inbox-manage";
+
+const PAGE = 100;
+
+export function useInboxMailboxes(options: { enabled?: boolean } = {}) {
+  const all = useAllPages<MailboxChoice>(
+    async (page, signal) => {
+      const env = await g8Get("/inbox/mailboxes/paginated", { page, page_size: PAGE }, { signal });
+      const rows = mailboxChoices(env);
+      return { rows, hasNext: hasNextOf(env, PAGE, rows.length) };
+    },
+    [],
+    { enabled: options.enabled, pageSize: PAGE },
+  );
+  const seen = new Set<string>();
+  const items = all.items.filter((m) => !seen.has(m.address.toLowerCase()) && seen.add(m.address.toLowerCase()));
+  return { ...all, items, data: all.loaded ? items : undefined };
+}