diff --git a/docs/plugin-architecture.md b/docs/plugin-architecture.md
index b76db3ca4e..b09e3197c8 100644
--- a/docs/plugin-architecture.md
+++ b/docs/plugin-architecture.md
@@ -2022,7 +2022,7 @@ pinch, Ctrl/⌘-scroll, drag, double-click and keyboard and offers Copy code.
Invalid source shows Pele's error with the source.
The conversation preview exposes top-level `registerTool`, `registerCompletion` and `registerInline`
-methods and stable `conversation.ui.Composer` / `.Message` / `.Thread` components, plus `.Tabs` while a plugin provides it. Generated
+methods and stable `conversation.ui.Composer` / `.Message` / `.Thread` / `.Conversation` components, plus `.Tabs` while a plugin provides it. Generated
type-only `@buzz/author` declarations are exercised by a source-only external consumer
fixture in `tests/fixtures/conversation-consumer`; it is built and installed only in
the browser test's temporary profile.
@@ -2052,6 +2052,22 @@ that visit lasts across threads of the same channel. The page holds no second
message reader, cache or outbox.
Exact message links still navigate to Channels rather than the page's route.
+`conversation.ui.Conversation({ session, scope, channelId, channelName?, threadId?, children })`
+gives a page's own `ui.Message` rows and `ui.Composer` for one channel the host
+behavior Channels rows have, without showing a thread or visiting the channel:
+mounting it never marks anything read, follows a thread or holds the channel's
+roster. `children(interactions)` receives the host's `onOpenLink`, `canOpenLink`
+and `onOpenMediaReview` for those rows. Inside it, rows offer Edit and Delete
+under the usual permissions; Edit fills the `ui.Composer` inside the same
+`ui.Conversation` (pass the rows it may edit as `editMessages`), and a row has
+no Edit without one. Delete asks for confirmation, and a failed edit or deletion
+shows a notice to retry or discard it before `children`. Media review and
+registered panels open over the page and stop opening once its session is no
+longer the ready one. Render one `ui.Conversation` per channel or card, so each
+card's edits and recovery stay its own; `threadId` keeps panels opened from a
+card in that thread. Writes, mark read/unread and follow remain explicit menu
+actions.
+
`conversation.ui.Tabs({ id, session, scope, label, icon, children })` makes the
page's content the first main tab of the host's conversation tab workspace.
`children(open, close, isOpen)` renders that tab; `open({ channelId, threadId?, messageId? }, { keep? })`
diff --git a/src/features/conversation/EmbeddedConversation.test.tsx b/src/features/conversation/EmbeddedConversation.test.tsx
new file mode 100644
index 0000000000..0b96da6658
--- /dev/null
+++ b/src/features/conversation/EmbeddedConversation.test.tsx
@@ -0,0 +1,410 @@
+// @vitest-environment jsdom
+import { Context } from "@deepseek-ai/cordis";
+import "@testing-library/jest-dom/vitest";
+import {
+ act,
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+ within,
+} from "@testing-library/react";
+import { afterEach, assert, expect, it, vi } from "vitest";
+import { composerDOMFixture } from "../messages/composer-testing";
+import type { ComposerInputElement } from "../messages/composer-dom";
+import { PublishRejected } from "../relay/outbox";
+import type { RelayEvent } from "../relay/events";
+import { useChannelWindow } from "../relay/react";
+import { createRelaySession } from "../relay/session";
+import type { RelaySession } from "../relay/session";
+import {
+ bounds,
+ keypair,
+ message,
+ metadata,
+ roster,
+ signed,
+} from "../relay/testing";
+import { ConversationPresentation } from "./ConversationPresentation";
+import { EmbeddedConversation } from "./EmbeddedThread";
+import { PluginRuntime } from "../../plugins/runtime";
+import { ConversationService } from "./service";
+
+// The host's review viewer has its own suites; this proves which card's review opens.
+vi.mock("../messages/MediaReviewViewer", () => ({
+ MediaReviewViewer: (props: {
+ channelId: string;
+ messageId: string;
+ close(): void;
+ }) => (
+
+ {`${props.channelId}:${props.messageId}`}
+
+ Close review
+
+
+ ),
+}));
+
+composerDOMFixture();
+const owners: ReturnType[] = [];
+const runtimes: Context[] = [];
+afterEach(async () => {
+ cleanup();
+ vi.unstubAllGlobals();
+ for (const owner of owners.splice(0)) owner.dispose();
+ for (const root of runtimes.splice(0)) await root.fiber.dispose();
+});
+function deferred() {
+ let resolve!: () => void, reject!: (error: unknown) => void;
+ const promise = new Promise((yes, no) => {
+ resolve = yes;
+ reject = no;
+ });
+ return { promise, resolve, reject };
+}
+
+async function fixture() {
+ vi.stubGlobal(
+ "ResizeObserver",
+ class {
+ observe() {}
+ disconnect() {}
+ },
+ );
+ HTMLElement.prototype.scrollIntoView = vi.fn();
+ const relay = keypair(),
+ viewer = keypair();
+ const posts = {
+ alpha: message(viewer, "alpha", "Alpha note", 1700000000),
+ beta: message(viewer, "beta", "Beta note", 1700000001),
+ };
+ const publications: {
+ event: RelayEvent;
+ result: ReturnType;
+ }[] = [];
+ const owner = createRelaySession(
+ {
+ viewer: viewer.pubkey,
+ relayAuthor: relay.pubkey,
+ media: () => undefined,
+ async query(filters) {
+ const filter = filters[0];
+ assert.exists(filter);
+ if (filter.kinds?.includes(39000) || filter.kinds?.includes(39002))
+ return (["alpha", "beta"] as const).flatMap((id) => [
+ metadata(relay, id, id === "alpha" ? "Alpha" : "Beta"),
+ roster(relay, id, [viewer.pubkey]),
+ ]);
+ if (filter.kinds?.includes(9))
+ return (["alpha", "beta"] as const)
+ .filter((id) => !filter["#h"] || filter["#h"].includes(id))
+ .flatMap((id) => [
+ posts[id],
+ bounds(relay, id, "head", { has_more: false, next_cursor: null }),
+ ]);
+ return [];
+ },
+ writer: {
+ kinds: [9, 40003, 5],
+ sign: async (template) => signed(viewer, template),
+ publish(event) {
+ const result = deferred();
+ publications.push({ event, result });
+ return result.promise;
+ },
+ },
+ },
+ {
+ readStateFloor: () => 0,
+ outboxStorage: { load: () => [], save() {} },
+ readPublisherLock: async (_signal, work) => work(),
+ },
+ );
+ owners.push(owner);
+ const live = owner.session;
+ live.channels.ensureList();
+ await waitFor(() => expect(live.channels.list().status).toBe("ready"));
+ for (const id of ["alpha", "beta"]) live.channels.ensure(id);
+ await waitFor(() => {
+ expect(live.channels.window("alpha").rows).toHaveLength(1);
+ expect(live.channels.window("beta").rows).toHaveLength(1);
+ });
+ // The session is frozen, so visit entry points are observed through delegates.
+ const reads = {
+ enterChannel: vi.fn(live.unread.enterChannel),
+ leaveChannel: vi.fn(live.unread.leaveChannel),
+ follow: vi.fn(live.unread.follow),
+ markMessageRead: vi.fn(live.unread.markMessageRead),
+ markChannelRead: vi.fn(live.unread.markChannelRead),
+ };
+ // An open channel reserves profile room for its roster; a no-visit scope holds none.
+ const reserve = vi.fn(
+ (members: number) => live.profiles.reserve?.(members) ?? (() => {}),
+ );
+ const session: RelaySession = {
+ ...live,
+ unread: { ...live.unread, ...reads },
+ profiles: { ...live.profiles, reserve },
+ };
+ const root = new Context();
+ new PluginRuntime(root, async () => ({ apply() {} }));
+ runtimes.push(root);
+ const service = new ConversationService(root);
+ const scope = `wss://fixture.test:${viewer.pubkey}`;
+ let connection: { status: string; session: RelaySession; scope: string } = {
+ status: "ready",
+ session,
+ scope,
+ };
+ const noPanels: never[] = [];
+ const host = {
+ panels: {
+ snapshot: () => noPanels,
+ subscribe: () => () => {},
+ resolve: () => undefined,
+ },
+ relay: { snapshot: () => connection },
+ navigation: { open: vi.fn() },
+ } as unknown as Context;
+ const { Message, Composer } = service.ui;
+
+ /** A fictional overview: one card per channel, rows and composer composed by the page. */
+ function Card({
+ channelId,
+ scoped = true,
+ }: {
+ channelId: "alpha" | "beta";
+ scoped?: boolean;
+ }) {
+ const { rows } = useChannelWindow(session.channels, channelId);
+ const content = (
+ onOpenMediaReview?: (id: string, attachment: never, at: number) => void,
+ ) => (
+ <>
+ {rows.map((row) => (
+ undefined}
+ onOpenLink={() => false}
+ day={false}
+ retry={undefined}
+ />
+ ))}
+ {onOpenMediaReview && rows[0] && (
+
+ onOpenMediaReview(
+ rows[0]?.id ?? "",
+ { url: "https://fixture.test/a.png" } as never,
+ 0,
+ )
+ }
+ >
+ Review media
+
+ )}
+
+ {scoped ? (
+
+ {(interactions) => content(interactions.onOpenMediaReview)}
+
+ ) : (
+ content()
+ )}
+
+ );
+ }
+ function Overview({
+ presented = true,
+ scoped = true,
+ }: {
+ presented?: boolean;
+ scoped?: boolean;
+ }) {
+ return (
+
+
+ );
+ }
+ return {
+ session,
+ service,
+ posts,
+ reads: { ...reads, reserve },
+ publications,
+ Overview,
+ loseAccess() {
+ connection = { ...connection, status: "connecting" };
+ },
+ };
+}
+
+const card = (id: string) =>
+ within(screen.getByRole("region", { name: `Card ${id}` }));
+async function openMenu(id: string) {
+ fireEvent.click(
+ card(id).getByRole("button", { name: "More message actions" }),
+ );
+ return within(await screen.findByRole("menu"));
+}
+function editor(id: string) {
+ return card(id).getByRole("textbox", {
+ name: "Edit message",
+ });
+}
+
+it("adds native edit and delete to page rows without visiting, reading or following", async () => {
+ const h = await fixture();
+ const view = render(;
};
/** Channel visits and recovery span threads; overlays belong to one thread. */
export function EmbeddedThread({
+ messageId,
+ ...props
+}: EmbeddedThreadProps & Hosted) {
+ return (
+
+
+ );
+}
+
+/** Rows and composer act as in Channels; nothing marks the channel read or follows it. */
+export function EmbeddedConversation({
+ children,
+ ...props
+}: EmbeddedConversationProps & Hosted) {
+ return (
+
+ {children}
+
+ );
+}
+
+function Interactions({
+ children,
+}: Pick) {
+ const { onOpenLink, canOpenLink, onOpenMediaReview } = useConversation();
+ return children({ onOpenLink, canOpenLink, onOpenMediaReview });
+}
+
+function HostedChannel({
session,
scope,
channelId,
channelName,
- messageId,
+ threadId,
+ active,
host,
extensions,
-}: Props) {
+ children,
+}: Omit &
+ Hosted & { active?: false; children: ReactNode }) {
const { channels } = useSyncExternalStore(
session.channels.subscribeList,
session.channels.list,
@@ -36,15 +86,16 @@ export function EmbeddedThread({
scope={scope}
extensions={extensions}
host={host}
- threadId={messageId}
+ threadId={threadId}
+ active={active}
channel={{
id: channelId,
- name: channelName,
+ name: channelName ?? channel?.name ?? "",
channelType: channel?.channelType,
creator: channel?.creator,
}}
>
- ) => ReactNode;
Message: (props: Omit) => ReactNode;
/** The page's content as the first tab, beside conversations it opens;
@@ -222,6 +230,9 @@ export class ConversationService extends Service implements Conversation {
Thread: (props: EmbeddedThreadProps) => (
) => (