@marktiderman/genesis-chat 0.2.0 → 0.2.2

package/src/server/fake-video.ts

@@ -0,0 +1,171 @@
+// @feat:chat
+/**
+ * A pretend hosted video service for local development, behind `VideoProvider`, so the hosted
+ * path (pending attachment, upload, ready) runs without a Mux account.
+ *
+ *   createUpload  a local upload URL (`uploadUrl?id=<upload id>`) and its id, `fake_<uuid>`
+ *   handler       the fetch handler to mount at `uploadUrl`: takes the PUT body, stores it in
+ *                 the genesis-chat bucket, then marks the attachment ready
+ *   markReady     what Mux's `video.asset.ready` webhook does: `update_attachment` with status
+ *                 ready, a playback id (`fake-<upload id>`) and a fake HLS URL
+ *   playbackUrl   a signed link to the stored file (the fake HLS URL when nothing was stored)
+ *
+ * It refuses to be made when NODE_ENV is `production`, unless `force` is set.
+ */
+import { CHAT_BUCKET, CHAT_SCHEMA, type ChatSupabase } from "../core/client";
+import type { VideoProvider } from "./types";
+import { parseChatUploadPassthrough } from "./upload";
+
+export interface FakeVideoProviderOptions {
+  /** A service-role client: it writes the bucket and calls `update_attachment`. */
+  supabase: ChatSupabase;
+  /** Where `handler` is mounted, e.g. `http://localhost:3000/api/chat/fake-video`. */
+  uploadUrl: string;
+  /** The `provider` value it stands in for. Default `mux`. */
+  name?: "mux" | "cloudflare";
+  /** Run even when NODE_ENV is `production`. */
+  force?: boolean;
+  /** NODE_ENV, read from `process.env` by default. */
+  env?: string | undefined;
+  /** How long `handler` waits for the message carrying the upload to arrive before answering 202 (default 10 s). */
+  readyWaitMs?: number;
+  newId?: () => string;
+  sleep?: (ms: number) => Promise<void>;
+}
+
+export interface FakeReadyOptions {
+  durationMs?: number;
+  /** A poster image already in the genesis-chat bucket. */
+  posterPath?: string;
+}
+
+interface FakeUpload {
+  passthrough: string | undefined;
+  corsOrigin: string;
+  /** Where the body was stored, once it was. */
+  path?: string;
+}
+
+const json = (status: number, body: unknown, headers: Record<string, string> = {}) =>
+  new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json", "cache-control": "no-store", ...headers } });
+
+const EXTENSIONS: Record<string, string> = { "video/mp4": "mp4", "video/webm": "webm", "video/quicktime": "mov" };
+
+/** No attachment carries the upload yet: its message hasn't been sent. */
+class NotSentYet extends Error {}
+
+const nodeEnv = (): string | undefined => (globalThis as { process?: { env?: Record<string, string | undefined> } }).process?.env?.NODE_ENV;
+
+export function fakeVideoProvider(options: FakeVideoProviderOptions): VideoProvider & {
+  markReady(providerId: string, ready?: FakeReadyOptions): Promise<void>;
+  handler(request: Request): Promise<Response>;
+  playbackUrl(playbackId: string): Promise<string>;
+} {
+  const env = "env" in options ? options.env : nodeEnv();
+  if (env === "production" && !options.force) {
+    throw new Error("fakeVideoProvider is for development: it won't run with NODE_ENV=production (pass `force: true` to override)");
+  }
+  const name = options.name ?? "mux";
+  const db = () => options.supabase.schema(CHAT_SCHEMA);
+  const uploads = new Map<string, FakeUpload>();
+  const newId = options.newId ?? (() => crypto.randomUUID());
+  const sleep = options.sleep ?? ((ms: number) => new Promise<void>((r) => setTimeout(r, ms)));
+  const fakeHls = (providerId: string) => `https://fake-video.invalid/${encodeURIComponent(providerId)}.m3u8`;
+
+  async function find(providerId: string): Promise<{ id: string } | null> {
+    const { data, error } = await db()
+      .from("attachments")
+      .select("id")
+      .eq("provider", name)
+      .eq("provider_id", providerId)
+      .limit(1)
+      .maybeSingle();
+    if (error) throw new Error(`attachments: ${error.code ?? "error"}`);
+    return (data as { id: string } | null) ?? null;
+  }
+
+  async function markReady(providerId: string, ready: FakeReadyOptions = {}): Promise<void> {
+    const attachment = await find(providerId);
+    if (!attachment) throw new NotSentYet(`fakeVideoProvider: no ${name} attachment with provider_id ${providerId} (is its message sent?)`);
+    const { error } = await db().rpc("update_attachment", {
+      p_attachment_id: attachment.id,
+      p_patch: {
+        status: "ready",
+        playback_id: `fake-${providerId}`,
+        url: fakeHls(providerId),
+        transcript_status: "off",
+        ...(typeof ready.durationMs === "number" ? { duration_ms: Math.round(ready.durationMs) } : {}),
+        ...(ready.posterPath ? { poster_path: ready.posterPath } : {}),
+      },
+    });
+    if (error) throw new Error(`update_attachment: ${error.code ?? "error"}`);
+  }
+
+  return {
+    name,
+
+    async createUpload({ corsOrigin, passthrough }) {
+      const uploadId = `fake_${newId()}`;
+      uploads.set(uploadId, { passthrough, corsOrigin });
+      const url = new URL(options.uploadUrl);
+      url.searchParams.set("id", uploadId);
+      return { uploadId, url: url.toString() };
+    },
+
+    async remove(assetId) {
+      const id = assetId.replace(/^fake-/, "");
+      const path = uploads.get(id)?.path;
+      uploads.delete(id);
+      if (path) await options.supabase.storage.from(CHAT_BUCKET).remove([path]);
+    },
+
+    /** There is no webhook: `handler` (or `markReady`) does its work. */
+    async handleWebhook() {
+      return json(200, { ignored: "the fake provider has no webhook; call markReady" });
+    },
+
+    markReady,
+
+    async playbackUrl(playbackId) {
+      const path = uploads.get(playbackId.replace(/^fake-/, ""))?.path;
+      if (!path) return fakeHls(playbackId.replace(/^fake-/, ""));
+      const { data, error } = await options.supabase.storage.from(CHAT_BUCKET).createSignedUrl(path, 3600);
+      if (error || !data?.signedUrl) throw new Error("fakeVideoProvider: couldn't sign the stored file");
+      return data.signedUrl;
+    },
+
+    async handler(request) {
+      const id = new URL(request.url).searchParams.get("id") ?? "";
+      const upload = uploads.get(id);
+      const cors = { "access-control-allow-origin": upload?.corsOrigin ?? "*", vary: "origin" };
+      if (request.method === "OPTIONS") {
+        return new Response(null, {
+          status: 204,
+          headers: { ...cors, "access-control-allow-methods": "PUT, OPTIONS", "access-control-allow-headers": "content-type, content-range", "access-control-max-age": "600" },
+        });
+      }
+      if (request.method !== "PUT") return json(405, { error: "method not allowed" }, cors);
+      if (!upload) return json(404, { error: "no such upload" }, cors);
+      const binding = parseChatUploadPassthrough(upload.passthrough);
+      const contentType = request.headers.get("content-type") ?? "video/mp4";
+      const path = `${binding?.conversationId ?? "fake-video"}/${binding?.userId ?? "fake-video"}/${id}.${EXTENSIONS[contentType] ?? "mp4"}`;
+      const body = await request.arrayBuffer();
+      const { error } = await options.supabase.storage.from(CHAT_BUCKET).upload(path, body, { contentType, upsert: true });
+      if (error) return json(502, { error: `storage: ${error.message}` }, cors);
+      upload.path = path;
+      // The message carrying it usually lands first; give it a moment when it hasn't.
+      const deadline = Date.now() + (options.readyWaitMs ?? 10_000);
+      for (;;) {
+        try {
+          await markReady(id);
+          return json(200, { ok: true, providerId: id, path }, cors);
+        } catch (e) {
+          if (Date.now() >= deadline || !(e instanceof NotSentYet)) {
+            return json(202, { stored: true, ready: false, providerId: id, path, error: e instanceof Error ? e.message : String(e) }, cors);
+          }
+          await sleep(500);
+        }
+      }
+    },
+  };
+}

package/src/server/index.ts

@@ -10,6 +10,7 @@ export * from "./types";
 export { createChatRunner, CHAT_MAX_ATTEMPTS, type ChatRunner, type ChatRunnerOptions } from "./runner";
 export { deepgramTranscriber, openAiTranscriber, type DeepgramOptions, type OpenAiTranscriberOptions } from "./transcribers";
 export { muxVideo, verifyMuxSignature, muxPlaybackUrl, muxPlaybackToken, type MuxVideoOptions, type MuxSigningKey } from "./mux";
+export { fakeVideoProvider, type FakeVideoProviderOptions, type FakeReadyOptions } from "./fake-video";
 export {
   createExpoDeliver,
   deadTokens,

package/src/web/attachments.tsx

@@ -18,7 +18,7 @@ import {
   cn,
 } from "@marktiderman/genesis-ui";
 import type { ChatAttachment, ChatMessage } from "../core/types";
-import type { ChatAttachmentKind } from "../react/index";
+import type { ChatAttachmentKind, ChatCardContext } from "../react/index";
 import { ChatAttachmentCard, type ChatAttachmentCardProps } from "./cards";
 import { ChatErrorBoundary } from "./error-boundary";
 import { formatBytes } from "./format";
@@ -301,12 +301,12 @@ export function attachmentKindOf(kinds: Record<string, ChatAttachmentKind> | und
  * What the app's kind says to draw for this attachment, or null when its functions throw or
  * return the wrong shapes (the attachment's `ref` is whatever the sender put there).
  */
-export function attachmentCardOf(k: ChatAttachmentKind, a: ChatAttachment): Pick<ChatAttachmentCardProps, "title" | "subtitle" | "action"> | null {
+export function attachmentCardOf(k: ChatAttachmentKind, a: ChatAttachment, ctx: ChatCardContext = { mine: false }): Pick<ChatAttachmentCardProps, "title" | "subtitle" | "action"> | null {
   try {
-    const title = k.title(a);
+    const title = k.title(a, ctx);
     if (typeof title !== "string") return null;
-    const sub = typeof k.subtitle === "function" ? k.subtitle(a) : null;
-    const act = typeof k.action === "function" ? k.action(a) : null;
+    const sub = typeof k.subtitle === "function" ? k.subtitle(a, ctx) : null;
+    const act = typeof k.action === "function" ? k.action(a, ctx) : null;
     const action =
       act && typeof act === "object" && typeof act.label === "string" && (typeof act.href === "string" || typeof act.onPress === "function")
         ? { label: act.label, href: typeof act.href === "string" ? act.href : undefined, onPress: typeof act.onPress === "function" ? act.onPress : undefined }
@@ -363,7 +363,7 @@ export function MessageAttachments({ views, message, mine, tone, slot, kinds }:
             const generic = <GenericAttachment attachment={v.attachment} message={message} url={v.url} mine={mine} />;
             const k = attachmentKindOf(kinds, v.kind);
             if (k) {
-              const card = attachmentCardOf(k, v.attachment);
+              const card = attachmentCardOf(k, v.attachment, { mine });
               return card ? <ChatAttachmentCard key={v.key} {...card} tone={tone} /> : <GenericAttachment key={v.key} attachment={v.attachment} message={message} url={v.url} mine={mine} />;
             }
             // The app's slot draws sender-controlled data: if it throws, the generic card stands in.

package/src/web/bubble.tsx

@@ -43,6 +43,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Progress,
   Textarea,
   Tooltip,
   UserAvatar,
@@ -115,6 +116,14 @@ function pendingViews(p: PendingMessage): AttachmentView[] {
   }));
 }
 
+/** How much of a sending message's files has uploaded (0–100), once any file reports progress. */
+export function pendingProgress(p: PendingMessage): number | null {
+  if (p.status !== "sending") return null;
+  const files = p.files ?? [];
+  if (!files.some((f) => typeof f.progress === "number")) return null;
+  return Math.round((files.reduce((sum, f) => sum + (f.progress ?? 0), 0) / files.length) * 100);
+}
+
 /** A menu gives focus back to what opened it, unless the action put it somewhere (the composer, the edit box). */
 function returnFocus(e: Event, keepFocus: MutableRefObject<(() => void) | null>) {
   const next = keepFocus.current;
@@ -153,6 +162,7 @@ export function MessageRow({ item, startsGroup, className }: MessageRowProps) {
   const showHeader = ctx.isGroup && !mine && startsGroup;
   const tone: "default" | "primary" = mine && !note && !deleted ? "primary" : "default";
   const views = pending ? pendingViews(pending) : message.attachments.map((a) => toAttachmentView(a, ctx.urls));
+  const progress = pending ? pendingProgress(pending) : null;
   const editing = ctx.editingId === message.id;
   const reactions = pending ? [] : summarizeReactions(message, ctx.me);
   const highlighted = ctx.highlightedId === message.id;
@@ -194,6 +204,18 @@ export function MessageRow({ item, startsGroup, className }: MessageRowProps) {
           {views.length ? (
             <div className={cn(message.body ? "mb-1.5" : "")}>
               <MessageAttachments views={views} message={pending ? undefined : message} mine={mine} tone={tone} slot={ctx.attachmentSlot} kinds={ctx.attachmentKinds} />
+              {progress !== null ? (
+                <Progress
+                  value={progress}
+                  className={cn("mt-1.5 h-1", tone === "primary" && "bg-primary-foreground/30 [&>div]:bg-primary-foreground")}
+                  role="progressbar"
+                  aria-label="Uploading"
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={progress}
+                  data-testid="genesis-chat-upload-progress"
+                />
+              ) : null}
             </div>
           ) : null}
           {message.body ? <ChatMarkdown text={message.body} me={ctx.me} tone={tone} /> : null}

package/src/web/inbox.tsx

@@ -9,9 +9,9 @@ import { useRef, type KeyboardEvent } from "react";
 import { AtSign, BellOff, MessageSquare, Pin } from "lucide-react";
 import { Badge, Button, EmptyState, Skeleton, UserAvatar, cn } from "@marktiderman/genesis-ui";
 import { renderSlot, type SlotOverride } from "@marktiderman/genesis-core/slots";
-import { previewText } from "../core/thread";
 import type { ChatInboxItem } from "../core/types";
-import { useChat, useInbox } from "../react/index";
+import { useChat, useInbox, type ChatAttachmentKind } from "../react/index";
+import { attachmentPreview } from "../react/previews";
 import { relativeTime, type ResolveUser } from "./format";
 
 export interface ChatInboxEmptyProps {
@@ -55,7 +55,7 @@ export function inboxTitle(item: ChatInboxItem, resolveUser: ResolveUser, fallba
 }
 
 export function ChatInbox({ resolveUser, onSelect, selectedId, kind, archived = false, fallbackTitle, slots, className, ...rest }: ChatInboxProps) {
-  const { userId: me } = useChat();
+  const { userId: me, attachmentKinds } = useChat();
   const { items, isLoading, error, refetch } = useInbox({ kind, archived });
   const list = useRef<HTMLUListElement>(null);
 
@@ -113,7 +113,7 @@ export function ChatInbox({ resolveUser, onSelect, selectedId, kind, archived =
       <ul ref={list} className="flex flex-col" onKeyDown={onKeyDown}>
         {items.map((item) => (
           <li key={item.conversationId}>
-            <InboxRow item={item} me={me} resolveUser={resolveUser} fallbackTitle={fallbackTitle} selected={item.conversationId === selectedId} onSelect={onSelect} />
+            <InboxRow item={item} me={me} kinds={attachmentKinds} resolveUser={resolveUser} fallbackTitle={fallbackTitle} selected={item.conversationId === selectedId} onSelect={onSelect} />
           </li>
         ))}
       </ul>
@@ -124,18 +124,19 @@ export function ChatInbox({ resolveUser, onSelect, selectedId, kind, archived =
 interface InboxRowProps {
   item: ChatInboxItem;
   me: string;
+  kinds?: Record<string, ChatAttachmentKind>;
   resolveUser: ResolveUser;
   fallbackTitle?: (item: ChatInboxItem) => string;
   selected: boolean;
   onSelect: (id: string) => void;
 }
 
-function InboxRow({ item, me, resolveUser, fallbackTitle, selected, onSelect }: InboxRowProps) {
+function InboxRow({ item, me, kinds, resolveUser, fallbackTitle, selected, onSelect }: InboxRowProps) {
   const title = inboxTitle(item, resolveUser, fallbackTitle);
   const other = item.otherUserId ? resolveUser(item.otherUserId) : null;
   const last = item.lastMessage;
   const unread = item.unread > 0;
-  let preview = last ? previewText(last.body, last.attachment, last.deleted) : "";
+  let preview = last ? attachmentPreview(last.body, last.attachment, kinds, last.deleted) : "";
   if (last && last.kind !== "system" && !last.deleted && last.senderId) {
     if (last.senderId === me) preview = `You: ${preview}`;
     else if (!item.otherUserId && item.memberCount > 2) preview = `${resolveUser(last.senderId).name}: ${preview}`;

package/src/web/memory-client.ts

@@ -468,9 +468,16 @@ export function createMemoryChatClient(options: MemoryChatOptions): MemoryChatCl
       log("report", messageId, reason, note);
       return uuid();
     },
-    async upload(conversationId: string, userId: string, file: Blob | ArrayBuffer, opts: { name: string; contentType: string; id?: string }) {
+    async upload(
+      conversationId: string,
+      userId: string,
+      file: Blob | ArrayBuffer,
+      opts: { name: string; contentType: string; id?: string; onProgress?: (sent: number, total: number) => void; signal?: AbortSignal },
+    ) {
       log("upload", conversationId, opts.name);
       await wait();
+      const total = file instanceof Blob ? file.size : file.byteLength;
+      opts.onProgress?.(total, total);
       const path = `${conversationId}/${userId}/${opts.id ?? uuid()}-${opts.name}`;
       const blob = file instanceof Blob ? file : new Blob([file], { type: opts.contentType });
       files[path] = typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(blob) : `memory://${path}`;
@@ -569,7 +576,8 @@ export function createMemoryChatClient(options: MemoryChatOptions): MemoryChatCl
     },
     async cancelScheduled(id: string) {
       log("cancelScheduled", id);
-      const s = scheduledList.find((x) => x.id === id && x.status === "scheduled");
+      // As cancel_scheduled: anything not sent and not cancelled, a failed one included.
+      const s = scheduledList.find((x) => x.id === id && x.status !== "sent" && x.status !== "cancelled");
       if (!s) throw new ChatError("Nothing to cancel", "22023", "cancel_scheduled");
       s.cancelledAt = new Date().toISOString();
       s.status = "cancelled";
@@ -622,7 +630,7 @@ export function createMemoryChatClient(options: MemoryChatOptions): MemoryChatCl
         if (conversationId && c.conversation.id !== conversationId) continue;
         for (const m of c.messages) {
           if (m.deletedAt || !visible(c, m)) continue;
-          const base = { messageId: m.id, conversationId: c.conversation.id, seq: m.seq, senderId: m.senderId, createdAt: m.createdAt };
+          const base = { messageId: m.id, conversationId: c.conversation.id, seq: m.seq, senderId: m.senderId, createdAt: m.createdAt, threadRootId: m.threadRootId ?? null };
           if (m.body.toLowerCase().includes(q)) hits.push({ ...base, snippet: mark(m.body), inTranscript: false });
           else {
             const t = m.attachments.find((a) => a.transcript?.toLowerCase().includes(q))?.transcript;

package/src/web/panel.tsx

@@ -62,7 +62,7 @@ export function ChatPanel({
 }: ChatPanelProps) {
   const [own, setOwn] = useState<string | null>(defaultSelectedId);
   const [searching, setSearching] = useState(false);
-  const [jump, setJump] = useState<{ messageId: string; seq?: number } | null>(null);
+  const [jump, setJump] = useState<{ messageId: string; seq?: number; threadRootId?: string | null } | null>(null);
   const { items } = useInbox({ kind: inboxProps?.kind });
   const titleOf = (id: string) => {
     const item = items.find((i: ChatInboxItem) => i.conversationId === id);
@@ -113,7 +113,7 @@ export function ChatPanel({
               autoFocus
               conversationTitle={titleOf}
               onOpen={(hit) => {
-                setJump({ messageId: hit.messageId, seq: hit.seq });
+                setJump({ messageId: hit.messageId, seq: hit.seq, threadRootId: hit.threadRootId });
                 select(hit.conversationId);
               }}
               className="min-h-0 flex-1"

package/src/web/schedule.tsx

@@ -145,7 +145,7 @@ export interface ChatScheduledListProps {
   className?: string;
 }
 
-/** Your scheduled messages, soonest first, each with when it goes and Cancel. */
+/** Your scheduled messages, soonest first, each with when it goes and Cancel (Remove for one that failed). */
 export function ChatScheduledList({ conversationId, conversationTitle, className }: ChatScheduledListProps) {
   const { items, isLoading, cancel } = useScheduled(conversationId);
   if (isLoading) {
@@ -172,7 +172,19 @@ export function ChatScheduledList({ conversationId, conversationTitle, className
             <div className="truncate text-sm">{previewText(s.body, s.attachments[0]?.kind ?? null)}</div>
             {s.error ? <div className="text-xs text-destructive">{s.error}</div> : null}
           </div>
-          {s.status === "scheduled" ? (
+          {s.status === "failed" ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 shrink-0 gap-1 text-xs"
+              onClick={() => void cancel(s.id).then(() => toast.success("Removed"), () => toast.error("Couldn't remove it"))}
+              aria-label="Remove the message that couldn't send"
+              data-testid="genesis-chat-scheduled-remove"
+            >
+              <X className="size-3.5" aria-hidden /> Remove
+            </Button>
+          ) : s.status === "scheduled" ? (
             <Button
               type="button"
               variant="ghost"

package/src/web/thread.tsx

@@ -127,15 +127,18 @@ export interface ChatThreadProps {
   threadRootId?: string;
   /** One topic's messages. */
   topic?: string;
-  /** Shown on messages that have replies, to open their thread. */
-  onOpenThread?: (message: ChatMessage) => void;
+  /**
+   * Shown on messages that have replies, to open their thread. Also called when a search result
+   * is a reply in a thread, with `jumpTo` (that reply) for the thread's own ChatThread.
+   */
+  onOpenThread?: (message: ChatMessage, opts?: { jumpTo?: { messageId: string; seq: number } }) => void;
   /** The quick reactions; 👍 ❤️ 😂 😮 😢 🙏 by default. */
   quickReactions?: readonly string[];
   placeholder?: string;
   /** Show the topic bar even before the first topic exists (so an owner can add one). */
   showTopics?: boolean;
   /** Scroll to this message once it's loaded (a search result across conversations); `seq` lets earlier pages load to reach it. */
-  jumpTo?: { messageId: string; seq?: number } | null;
+  jumpTo?: { messageId: string; seq?: number; threadRootId?: string | null } | null;
   /** A search button in the header. Default true. */
   search?: boolean;
   /** Scheduled send in the composer. Default true. */
@@ -221,7 +224,7 @@ export function ChatThread({
   slots,
   className,
 }: ChatThreadProps) {
-  const { userId: me, attachmentKinds } = useChat();
+  const { userId: me, attachmentKinds, client: chatClient } = useChat();
   const topicsState = useTopics(threadRootId ? null : conversationId);
   const [chosenTopic, setChosenTopic] = useState<string | null>(null);
   const topic = topicProp ?? chosenTopic ?? undefined;
@@ -394,9 +397,34 @@ export function ChatThread({
 
   // A message to reach: loads earlier pages until it is here (leaving a topic it isn't in), then scrolls to it.
   type Jump = { messageId: string; seq?: number; phase: "new" | "loading" | "loaded" };
-  const [pendingJump, setPendingJump] = useState<Jump | null>(jumpToProp ? { ...jumpToProp, phase: "new" } : null);
+  /**
+   * A reply in a thread isn't on this timeline: open its thread (onOpenThread, scrolled to the
+   * reply) and come here to the thread's first message; without onOpenThread, just to that.
+   */
+  const reach = useCallback(
+    (target: { messageId: string; seq?: number; threadRootId?: string | null }) => {
+      const root = target.threadRootId;
+      if (!root || root === threadRootId || root === target.messageId) {
+        setPendingJump({ messageId: target.messageId, seq: target.seq, phase: "new" });
+        return;
+      }
+      void chatClient.message(root).then(
+        (m) => {
+          if (!m) {
+            toast.info("That message isn't here any more");
+            return;
+          }
+          onOpenThread?.(m, target.seq != null ? { jumpTo: { messageId: target.messageId, seq: target.seq } } : undefined);
+          setPendingJump({ messageId: m.id, seq: m.seq, phase: "new" });
+        },
+        (e) => toast.error(errorText(e)),
+      );
+    },
+    [chatClient, onOpenThread, threadRootId],
+  );
+  const [pendingJump, setPendingJump] = useState<Jump | null>(jumpToProp && !jumpToProp.threadRootId ? { ...jumpToProp, phase: "new" } : null);
   useEffect(() => {
-    if (jumpToProp) setPendingJump({ ...jumpToProp, phase: "new" });
+    if (jumpToProp) reach(jumpToProp);
   }, [jumpToProp?.messageId, jumpToProp?.seq]); // eslint-disable-line react-hooks/exhaustive-deps
   const { loadUntil } = state;
   useEffect(() => {
@@ -426,9 +454,9 @@ export function ChatThread({
     (hit: ChatSearchHit) => {
       setSearching(false);
       if (topic && topicProp === undefined) setChosenTopic(null);
-      setPendingJump({ messageId: hit.messageId, seq: hit.seq, phase: "new" });
+      reach(hit);
     },
-    [topic, topicProp],
+    [topic, topicProp, reach],
   );
 
   // ---- actions --------------------------------------------------------------

package/src/web/video.tsx

@@ -220,21 +220,26 @@ export function useVideoRecorder({ maxMs, onTick }: UseVideoRecorderOptions) {
 
 export type VideoRecorder = ReturnType<typeof useVideoRecorder>;
 
-/** A recording as a file the outbox uploads to storage (the fallback without `videoUpload`). */
-export function videoFile(rec: VideoRecording): LocalFile {
+/**
+ * A recording as a file for the outbox: `hosted` sends it to the hosted provider (the provider's
+ * `videoUpload`, the message going at once with the video pending); otherwise it goes to storage.
+ */
+export function videoFile(rec: VideoRecording, opts: { hosted?: boolean } = {}): LocalFile {
   return {
     data: rec.blob,
     name: rec.name,
     contentType: rec.contentType,
     previewUrl: rec.url ?? undefined,
     meta: { kind: "video", durationMs: rec.durationMs, bytes: rec.blob.size },
+    ...(opts.hosted ? { hosted: true } : {}),
   };
 }
 
 /**
  * Uploads a recording through the app's `videoUpload` (a Mux direct upload: PUT the bytes to
  * the URL it returns) and gives back the attachment to send, pending until Mux's webhook marks
- * it ready.
+ * it ready. The composer no longer uses it: it sends `videoFile(rec, { hosted: true })` through
+ * the outbox, so the message keeps its place in the order while the bytes go up.
  */
 export async function uploadVideo(
   videoUpload: ChatVideoUpload,
@@ -268,10 +273,15 @@ export interface ChatVideoRecorderProps {
   send: (input: Omit<SendInput, "conversationId" | "clientId">, files?: LocalFile[]) => Promise<unknown>;
   /** Merged into what's sent (a reply, a topic, an internal note). */
   extra?: Omit<SendInput, "conversationId" | "clientId" | "attachments" | "body">;
+  /**
+   * Marks the take as hosted. Pass the same `videoUpload` the `ChatProvider` has (or give the
+   * provider a `hostedUpload`): the outbox does the upload, and without one it falls back to
+   * storage with no error.
+   */
   videoUpload?: ChatVideoUpload;
   onTick?: () => void;
   onSent?: () => void;
-  /** For tests. */
+  /** @deprecated Unused: the bytes go through the outbox's `hostedUpload` now. */
   fetchImpl?: typeof fetch;
 }
 
@@ -290,56 +300,45 @@ function Preview({ stream }: { stream: MediaStream | null }) {
 }
 
 /** The composer's video dialog: preview, record (to the role's limit), review, retake, send. */
-export function ChatVideoRecorder({ open, onOpenChange, conversationId, maxMs, send, extra, videoUpload, onTick, onSent, fetchImpl }: ChatVideoRecorderProps) {
+export function ChatVideoRecorder({ open, onOpenChange, maxMs, send, extra, videoUpload, onTick, onSent }: ChatVideoRecorderProps) {
   const rec = useVideoRecorder({ maxMs, onTick });
   const [sending, setSending] = useState(false);
   const [sendError, setSendError] = useState<string | null>(null);
-  const upload = useRef<AbortController | null>(null);
+  // One send at a time; once sent, the outbox owns the upload (its Delete cancels it).
+  const sendingNow = useRef(false);
   const { open: openCamera, reset } = rec;
 
   useEffect(() => {
     if (open) void openCamera();
     else reset();
   }, [open, openCamera, reset]);
-  // Closing or unmounting stops an upload still going.
-  useEffect(() => () => upload.current?.abort(), []);
 
   const submit = async () => {
     const take = rec.recording;
-    if (!take || upload.current) return;
-    const controller = new AbortController();
-    upload.current = controller;
+    if (!take || sendingNow.current) return;
+    sendingNow.current = true;
     setSending(true);
     setSendError(null);
     try {
-      if (videoUpload) {
-        const attachment = await uploadVideo(videoUpload, conversationId, take, fetchImpl, controller.signal);
-        if (controller.signal.aborted) return;
-        await send({ ...extra, body: "", attachments: [attachment] });
-      } else {
-        // The outbox shows the take while it uploads and frees its URL once it lands.
-        await send({ ...extra, body: "" }, [videoFile(take)]);
-        rec.handOff();
-      }
+      // Through the outbox either way, in its place in the order: shown at once, the take as its
+      // preview (freed once it lands). Hosted, the message goes while the bytes go up.
+      await send({ ...extra, body: "" }, [videoFile(take, { hosted: Boolean(videoUpload) })]);
+      rec.handOff();
       onSent?.();
       onOpenChange(false);
     } catch (e) {
-      if (!controller.signal.aborted) setSendError(e instanceof Error ? e.message : "The video didn't send");
+      setSendError(e instanceof Error ? e.message : "The video didn't send");
     } finally {
-      upload.current = null;
+      sendingNow.current = false;
       setSending(false);
     }
   };
 
-  /** Closing while it uploads cancels the upload. */
-  const close = (o: boolean) => {
-    if (!o) upload.current?.abort();
-    onOpenChange(o);
-  };
 
   const recording = rec.state === "recording";
+  // It stays open while the take goes to the outbox: closing would free the preview it was handed.
   return (
-    <Dialog open={open} onOpenChange={close}>
+    <Dialog open={open} onOpenChange={(o) => (o || !sendingNow.current) && onOpenChange(o)}>
       <DialogContent className="sm:max-w-lg" data-testid="genesis-chat-video-recorder">
         <DialogHeader>
           <DialogTitle>Record a video</DialogTitle>
@@ -370,12 +369,7 @@ export function ChatVideoRecorder({ open, onOpenChange, conversationId, maxMs, s
           ) : null}
           {sending ? (
             <span className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/70 text-sm font-medium" role="status">
-              <Spinner /> Uploading…
-              {videoUpload ? (
-                <Button type="button" variant="outline" size="sm" onClick={() => upload.current?.abort()} data-testid="genesis-chat-video-cancel-upload">
-                  Cancel upload
-                </Button>
-              ) : null}
+              <Spinner /> Sending…
             </span>
           ) : null}
         </div>