diff --git a/apps/web/src/components/ui/markdown.test.tsx b/apps/web/src/components/ui/markdown.test.tsx
new file mode 100644
index 000000000..4a3c154cb
--- /dev/null
+++ b/apps/web/src/components/ui/markdown.test.tsx
@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Markdown } from "./markdown";
+
+vi.mock("@/components/ui/markdown-mermaid", () => ({
+ MermaidBlock: () => null,
+}));
+vi.mock("@/components/ui/markdown-mermaid-theme", () => ({
+ useMermaidTheme: () => "default",
+}));
+
+afterEach(cleanup);
+
+describe("MarkdownDefault overflow", () => {
+ it("keeps prose unclipped and gives tables their own horizontal scroller", () => {
+ const { container } = render(
+
{`| First | Second | Third |
+| --- | --- | --- |
+| alpha | beta | gamma |`}
+ );
+
+ const prose = container.firstElementChild as HTMLElement;
+ const scroller = screen.getByTestId("markdown-table-scroll");
+ expect(prose.className).not.toContain("overflow-x-hidden");
+ expect(scroller.className).toContain("overflow-x-auto");
+ expect(scroller.querySelector("table")).not.toBeNull();
+ });
+});
diff --git a/apps/web/src/components/ui/markdown.tsx b/apps/web/src/components/ui/markdown.tsx
index bdd5796b1..b87349c4d 100644
--- a/apps/web/src/components/ui/markdown.tsx
+++ b/apps/web/src/components/ui/markdown.tsx
@@ -154,10 +154,10 @@ function MarkdownDefault({
return (
+ );
+ },
pre({ children }) {
const block = getCodeBlock(children);
if (block?.className === "language-mermaid") {
diff --git a/docs/chat-surface-plan.md b/docs/chat-surface-plan.md
index 157a84092..962a0858f 100644
--- a/docs/chat-surface-plan.md
+++ b/docs/chat-surface-plan.md
@@ -107,7 +107,7 @@ write to `agent_chat_messages`. The web also invalidates the feed on
--- DISPATCH CHAT (id:
) ---
--- END DISPATCH CHAT ---
-The user is reading the Chat tab, not this terminal — they only see what you post with dispatch_chat_post. Reply there (replyTo: ""); terminal output alone will not reach them.
+Reply with dispatch_chat_post (replyTo: "").
```
Answers to a question use the same envelope with the chosen label as text.
@@ -429,7 +429,7 @@ Decided 2026-09-03. Brad's ask: when someone launches an agent with context
(an initial message, startup files, links, pins), show it in the Chat right
when the agent starts — otherwise it is only visible in the Console.
-- **One post per launch.** `AgentManager.createAgent` records the context
+- **One post per launch with user-visible context.** `AgentManager.createAgent` records the context
through a `LaunchContextRecorder` attached post-construction
(`ChatService.recordLaunchContext`), after the agent row and its media
rows exist and alongside the runtime launch, so every launch path (create
@@ -437,7 +437,8 @@ when the agent starts — otherwise it is only visible in the Console.
best-effort: it never blocks the runtime launch, and `createAgent` waits
for it at most 5s before returning (a late write still lands). The post is a user
message, kind `reply`, `delivered: true` (the prompt reaches the CLI by the
- normal launch path; nothing is injected), text = the initial prompt, and
+ normal launch path; nothing is injected), text = the explicitly supplied
+ user-authored launch context (never generated/internal startup guidance), and
attachments = a `file` per startup media row (resolved by `mediaId`), a
`link` per startup link, and a `pin` per initial pin — except a url pin
the route made from one of the links, so the URL is not shown twice. A
diff --git a/e2e/chat-surface.spec.ts b/e2e/chat-surface.spec.ts
index 3b2b3fc53..8c353dd54 100644
--- a/e2e/chat-surface.spec.ts
+++ b/e2e/chat-surface.spec.ts
@@ -572,7 +572,7 @@ test.describe("Chat surface", () => {
}) => {
await setChatSurface(request, true);
const agent = await createAgentViaAPI(request, {
- name: `e2e-chat-touch-${Date.now()}`,
+ name: `e2e-chat-touch-with-a-realistically-long-agent-task-name-${Date.now()}`,
});
const protocol = process.env.TLS_CERT ? "https" : "http";
@@ -607,6 +607,35 @@ test.describe("Chat surface", () => {
)
.toBeGreaterThanOrEqual(44);
}
+ const track = touchPage.getByTestId("agent-view-track");
+ const filterSurface = touchPage.getByTestId("chat-filters-surface");
+ const filterIcon = touchPage.getByTestId("chat-filters-icon");
+ await expect
+ .poll(async () => {
+ const trackBox = (await track.boundingBox())!;
+ const surfaceBox = (await filterSurface.boundingBox())!;
+ const iconBox = (await filterIcon.boundingBox())!;
+ return {
+ trackHeight: Math.round(trackBox.height),
+ surfaceWidth: Math.round(surfaceBox.width),
+ surfaceHeight: Math.round(surfaceBox.height),
+ centerDelta: Math.round(
+ surfaceBox.y +
+ surfaceBox.height / 2 -
+ (trackBox.y + trackBox.height / 2)
+ ),
+ iconWidth: Math.round(iconBox.width),
+ iconHeight: Math.round(iconBox.height),
+ };
+ })
+ .toEqual({
+ trackHeight: 24,
+ surfaceWidth: 24,
+ surfaceHeight: 24,
+ centerDelta: 0,
+ iconWidth: 14,
+ iconHeight: 14,
+ });
// The header grew to hold it rather than clipping it.
const controls = toggle.locator("xpath=..");
const header = controls.locator("xpath=..");
@@ -617,6 +646,33 @@ test.describe("Chat surface", () => {
headerBox.y + headerBox.height
);
await expect(touchPage.getByTestId("chat-pane")).toBeVisible();
+
+ const indicator = touchPage.getByTestId("agent-view-indicator");
+ const indicatorInsets = async () => {
+ const trackBox = (await track.boundingBox())!;
+ const indicatorBox = (await indicator.boundingBox())!;
+ const segmentStart =
+ (await toggle.getAttribute("data-view")) === "console"
+ ? trackBox.x + trackBox.width / 2
+ : trackBox.x;
+ const segmentEnd = segmentStart + trackBox.width / 2;
+ return {
+ left: Math.round(indicatorBox.x - segmentStart),
+ right: Math.round(segmentEnd - (indicatorBox.x + indicatorBox.width)),
+ top: Math.round(indicatorBox.y - trackBox.y),
+ bottom: Math.round(
+ trackBox.y +
+ trackBox.height -
+ (indicatorBox.y + indicatorBox.height)
+ ),
+ };
+ };
+ await expect.poll(indicatorInsets).toEqual({
+ left: 2,
+ right: 2,
+ top: 2,
+ bottom: 2,
+ });
await touchPage.screenshot({
path: test.info().outputPath("chat-surface-touch-390.png"),
});
@@ -624,8 +680,91 @@ test.describe("Chat surface", () => {
await touchPage.getByTestId("agent-view-console").tap();
await expect(toggle).toHaveAttribute("data-view", "console");
await expect(touchPage.getByTestId("terminal-pane")).toBeVisible();
+ await expect.poll(indicatorInsets).toEqual({
+ left: 2,
+ right: 2,
+ top: 2,
+ bottom: 2,
+ });
+
+ await touchPage.getByTestId("agent-view-chat").tap();
+ await expect(toggle).toHaveAttribute("data-view", "chat");
+ await expect(touchPage.getByTestId("chat-pane")).toBeVisible();
+ await expect.poll(indicatorInsets).toEqual({
+ left: 2,
+ right: 2,
+ top: 2,
+ bottom: 2,
+ });
+
+ await touchPage.setViewportSize({ width: 320, height: 844 });
+ await expect
+ .poll(async () => {
+ const toggleBox = (await toggle.boundingBox())!;
+ const triggerBox = (await touchPage
+ .getByTestId("chat-filters-trigger")
+ .boundingBox())!;
+ return {
+ railWidth: Math.round(
+ (await touchPage.getByTestId("agent-view-track").boundingBox())!
+ .width
+ ),
+ controlsOverlap: Math.max(
+ 0,
+ Math.round(toggleBox.x + toggleBox.width - triggerBox.x)
+ ),
+ pageOverflow: await touchPage.evaluate(
+ () => document.documentElement.scrollWidth - innerWidth
+ ),
+ };
+ })
+ .toEqual({ railWidth: 124, controlsOverlap: 0, pageOverflow: 0 });
+ await touchPage.screenshot({
+ path: test.info().outputPath("chat-surface-touch-long-name-320.png"),
+ });
} finally {
await context.close();
}
});
+
+ test("keeps wide markdown tables reachable without page overflow", async ({
+ page,
+ request,
+ }) => {
+ await setChatSurface(request, true);
+ const agent = await createAgentViaAPI(request, {
+ name: `e2e-chat-table-${Date.now()}`,
+ });
+ await callMcpTool(request, agent.id, "dispatch_chat_post", {
+ text: [
+ "| Alpha heading | Bravo heading | Charlie heading | Delta heading | Echo heading |",
+ "| --- | --- | --- | --- | --- |",
+ "| alpha-value-long | bravo-value-long | charlie-value-long | delta-value-long | echo-value-long |",
+ ].join("\n"),
+ });
+
+ await page.setViewportSize({ width: 390, height: 844 });
+ await page.goto(`/agents/${agent.id}`, { waitUntil: "domcontentloaded" });
+ const scroller = page.getByTestId("markdown-table-scroll");
+ await scroller.waitFor({ state: "visible" });
+ await expect
+ .poll(() =>
+ scroller.evaluate((node) => ({
+ overflowX: getComputedStyle(node).overflowX,
+ scrollable: node.scrollWidth > node.clientWidth,
+ pageOverflow: document.documentElement.scrollWidth - innerWidth,
+ }))
+ )
+ .toEqual({ overflowX: "auto", scrollable: true, pageOverflow: 0 });
+
+ await scroller.evaluate((node) => {
+ node.scrollLeft = 120;
+ });
+ await expect
+ .poll(() => scroller.evaluate((node) => node.scrollLeft))
+ .toBeGreaterThan(0);
+ await page.screenshot({
+ path: test.info().outputPath("chat-surface-wide-table-390.png"),
+ });
+ });
});
diff --git a/packages/shared/src/chat-types.ts b/packages/shared/src/chat-types.ts
index f200628bc..fb6f27f3b 100644
--- a/packages/shared/src/chat-types.ts
+++ b/packages/shared/src/chat-types.ts
@@ -131,6 +131,8 @@ export type ChatAgentMessageEntry = {
senderName: string;
recipientAgentId: string;
recipientName: string;
+ /** True when either endpoint is a direct child of this feed's agent. */
+ involvesChildAgent?: boolean;
content: string;
/** `null` while the pane delivery is still pending (see `agent_messages`). */
delivered: boolean | null;