diff --git a/apps/server/src/provider/CodexInlineVisualization.ts b/apps/server/src/provider/CodexInlineVisualization.ts
new file mode 100644
index 00000000..7d3bf556
--- /dev/null
+++ b/apps/server/src/provider/CodexInlineVisualization.ts
@@ -0,0 +1,112 @@
+// @effect-diagnostics nodeBuiltinImport:off
+import { constants as NodeFsConstants } from "node:fs";
+import * as NodeFs from "node:fs/promises";
+import NodePath from "node:path";
+
+import {
+  CodexInlineVisualizationReadError,
+  type CodexInlineVisualizationReadResult,
+} from "@threadlines/contracts";
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+
+export const MAX_CODEX_INLINE_VISUALIZATION_BYTES = 5_000_000;
+
+const CODEX_INLINE_VISUALIZATION_FILE_NAME = /^[a-z0-9]+(?:-[a-z0-9]+)*\.html$/;
+const UUID_V7 = /^[0-9a-f]{8}-[0-9a-f]{4}-7[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+const isReadError = Schema.is(CodexInlineVisualizationReadError);
+const textDecoder = new TextDecoder("utf-8", { fatal: true });
+
+/** Codex shards visualizations using the UUIDv7 timestamp in local time. */
+export function codexVisualizationDateShard(providerThreadId: string): string | null {
+  if (!UUID_V7.test(providerThreadId)) {
+    return null;
+  }
+
+  const timestampHex = `${providerThreadId.slice(0, 8)}${providerThreadId.slice(9, 13)}`;
+  const timestampMs = Number.parseInt(timestampHex, 16);
+  const timestamp = new Date(timestampMs);
+  if (!Number.isFinite(timestampMs) || Number.isNaN(timestamp.getTime())) {
+    return null;
+  }
+
+  const year = String(timestamp.getFullYear()).padStart(4, "0");
+  const month = String(timestamp.getMonth() + 1).padStart(2, "0");
+  const day = String(timestamp.getDate()).padStart(2, "0");
+  return NodePath.join(year, month, day);
+}
+
+function readError(message: string, cause?: unknown): CodexInlineVisualizationReadError {
+  return new CodexInlineVisualizationReadError({
+    message,
+    ...(cause === undefined ? {} : { cause }),
+  });
+}
+
+export const readCodexInlineVisualization = Effect.fn("CodexInlineVisualization.read")(
+  function* (input: {
+    readonly codexHomePath: string;
+    readonly providerThreadId: string;
+    readonly file: string;
+  }): Effect.fn.Return<CodexInlineVisualizationReadResult, CodexInlineVisualizationReadError> {
+    if (!CODEX_INLINE_VISUALIZATION_FILE_NAME.test(input.file)) {
+      return yield* readError("The visualization filename is invalid.");
+    }
+
+    const dateShard = codexVisualizationDateShard(input.providerThreadId);
+    if (!dateShard) {
+      return yield* readError("This Codex thread cannot be mapped to a visualization directory.");
+    }
+
+    const filePath = NodePath.join(
+      input.codexHomePath,
+      "visualizations",
+      dateShard,
+      input.providerThreadId,
+      input.file,
+    );
+
+    return yield* Effect.tryPromise({
+      try: async () => {
+        const linkInfo = await NodeFs.lstat(filePath);
+        if (linkInfo.isSymbolicLink() || !linkInfo.isFile()) {
+          throw readError("The visualization is not a regular file.");
+        }
+        if (linkInfo.size > MAX_CODEX_INLINE_VISUALIZATION_BYTES) {
+          throw readError("The visualization is too large to display.");
+        }
+
+        const noFollow = NodeFsConstants.O_NOFOLLOW ?? 0;
+        const handle = await NodeFs.open(filePath, NodeFsConstants.O_RDONLY | noFollow);
+        try {
+          const openedInfo = await handle.stat();
+          if (
+            !openedInfo.isFile() ||
+            openedInfo.dev !== linkInfo.dev ||
+            openedInfo.ino !== linkInfo.ino
+          ) {
+            throw readError("The visualization changed while it was being opened.");
+          }
+          if (openedInfo.size > MAX_CODEX_INLINE_VISUALIZATION_BYTES) {
+            throw readError("The visualization is too large to display.");
+          }
+          const bytes = await handle.readFile();
+          if (bytes.byteLength > MAX_CODEX_INLINE_VISUALIZATION_BYTES) {
+            throw readError("The visualization is too large to display.");
+          }
+          return {
+            file: input.file,
+            contents: textDecoder.decode(bytes),
+            sizeBytes: bytes.byteLength,
+          };
+        } finally {
+          await handle.close();
+        }
+      },
+      catch: (cause) =>
+        isReadError(cause)
+          ? cause
+          : readError("The visualization could not be read for this Codex thread.", cause),
+    });
+  },
+);
diff --git a/apps/server/src/provider/Drivers/CodexHomeLayout.test.ts b/apps/server/src/provider/Drivers/CodexHomeLayout.test.ts
index e2635921..9b86ace4 100644
--- a/apps/server/src/provider/Drivers/CodexHomeLayout.test.ts
+++ b/apps/server/src/provider/Drivers/CodexHomeLayout.test.ts
@@ -11,6 +11,11 @@ import {
   materializeCodexShadowHome,
   resolveCodexHomeLayout,
 } from "./CodexHomeLayout.ts";
+import {
+  codexVisualizationDateShard,
+  MAX_CODEX_INLINE_VISUALIZATION_BYTES,
+  readCodexInlineVisualization,
+} from "../CodexInlineVisualization.ts";
 const decodeCodexSettingsValue = Schema.decodeSync(CodexSettings);
 
 const decodeCodexSettings = (input: {
@@ -81,6 +86,85 @@ it.layer(NodeServices.layer)("CodexHomeLayout", (it) => {
     );
   });
 
+  describe("Codex inline visualizations", () => {
+    const providerThreadId = "019f8ca0-8000-7992-a481-9125813cb125";
+
+    it("derives the local date shard from a native UUIDv7 thread id", () => {
+      const timestamp = new Date(Number.parseInt("019f8ca08000", 16));
+      const expected = [
+        String(timestamp.getFullYear()).padStart(4, "0"),
+        String(timestamp.getMonth() + 1).padStart(2, "0"),
+        String(timestamp.getDate()).padStart(2, "0"),
+      ].join("/");
+
+      expect(codexVisualizationDateShard(providerThreadId)).toBe(expected);
+      expect(codexVisualizationDateShard("not-a-native-thread-id")).toBeNull();
+    });
+
+    it.effect("reads only the expected visualization fragment", () =>
+      Effect.gen(function* () {
+        const path = yield* Path.Path;
+        const codexHomePath = yield* makeTempDir("threadlines-codex-visualization-");
+        const shard = codexVisualizationDateShard(providerThreadId);
+        expect(shard).not.toBeNull();
+        const filePath = path.join(
+          codexHomePath,
+          "visualizations",
+          shard ?? "",
+          providerThreadId,
+          "connection-map.html",
+        );
+        yield* writeTextFile(filePath, "<div>Connection map</div>");
+
+        const result = yield* readCodexInlineVisualization({
+          codexHomePath,
+          providerThreadId,
+          file: "connection-map.html",
+        });
+
+        expect(result).toEqual({
+          file: "connection-map.html",
+          contents: "<div>Connection map</div>",
+          sizeBytes: 25,
+        });
+      }),
+    );
+
+    it.effect("rejects symlinks and oversized visualization files", () =>
+      Effect.gen(function* () {
+        const fileSystem = yield* FileSystem.FileSystem;
+        const path = yield* Path.Path;
+        const codexHomePath = yield* makeTempDir("threadlines-codex-visualization-");
+        const shard = codexVisualizationDateShard(providerThreadId) ?? "";
+        const directory = path.join(codexHomePath, "visualizations", shard, providerThreadId);
+        const targetPath = path.join(directory, "target.html");
+        const symlinkPath = path.join(directory, "linked-file.html");
+        const oversizedPath = path.join(directory, "oversized-file.html");
+        yield* writeTextFile(targetPath, "<div>target</div>");
+        if (process.platform !== "win32") {
+          yield* fileSystem.symlink(targetPath, symlinkPath);
+          const symlinkError = yield* readCodexInlineVisualization({
+            codexHomePath,
+            providerThreadId,
+            file: "linked-file.html",
+          }).pipe(Effect.flip);
+          expect(symlinkError.message).toContain("not a regular file");
+        }
+
+        yield* fileSystem.writeFile(
+          oversizedPath,
+          new Uint8Array(MAX_CODEX_INLINE_VISUALIZATION_BYTES + 1),
+        );
+        const oversizedError = yield* readCodexInlineVisualization({
+          codexHomePath,
+          providerThreadId,
+          file: "oversized-file.html",
+        }).pipe(Effect.flip);
+        expect(oversizedError.message).toContain("too large");
+      }),
+    );
+  });
+
   describe("materializeCodexShadowHome", () => {
     it.effect("materializes a shadow home with shared state links and private auth", () =>
       Effect.gen(function* () {
diff --git a/apps/server/src/ws.ts b/apps/server/src/ws.ts
index 9c41dc57..5a3e0e02 100644
--- a/apps/server/src/ws.ts
+++ b/apps/server/src/ws.ts
@@ -31,6 +31,9 @@ import {
   OrchestrationThreadSearchError,
   ORCHESTRATION_WS_METHODS,
   ChatAttachmentReadError,
+  CodexInlineVisualizationReadError,
+  CodexSettings,
+  ProviderDriverKind,
   ProjectFaviconError,
   ProjectListEntriesError,
   ProjectReadFileError,
@@ -72,6 +75,9 @@ import {
 import { ProjectFaviconResolver } from "./project/Services/ProjectFaviconResolver.ts";
 import { ProviderRegistry } from "./provider/Services/ProviderRegistry.ts";
 import { ProviderService } from "./provider/Services/ProviderService.ts";
+import { readCodexInlineVisualization } from "./provider/CodexInlineVisualization.ts";
+import { resolveCodexHomeLayout } from "./provider/Drivers/CodexHomeLayout.ts";
+import { deriveProviderInstanceConfigMap } from "./provider/Layers/ProviderInstanceRegistryHydration.ts";
 import { startProviderReviewForThread } from "./provider/ProviderReviewCoordinator.ts";
 import { importExternalProviderThread } from "./provider/ExternalThreadImport.ts";
 import * as ProviderMaintenanceRunner from "./provider/providerMaintenanceRunner.ts";
@@ -131,6 +137,8 @@ import {
   type SessionCredentialChange,
 } from "./auth/Services/SessionCredentialService.ts";
 import { respondToAuthError } from "./auth/http.ts";
+
+const decodeCodexSettings = Schema.decodeUnknownEffect(CodexSettings);
 const isOrchestrationDispatchCommandError = Schema.is(OrchestrationDispatchCommandError);
 const isWorkspacePathOutsideRootError = Schema.is(WorkspacePathOutsideRootError);
 
@@ -1476,6 +1484,71 @@ const makeWsRpcLayer = (currentSessionId: AuthSessionId) =>
             }),
             { "rpc.aggregate": "workspace" },
           ),
+        [WS_METHODS.visualizationsRead]: (input) =>
+          observeRpcEffect(
+            WS_METHODS.visualizationsRead,
+            Effect.gen(function* () {
+              const threadOption = yield* projectionSnapshotQuery
+                .getThreadShellById(input.threadId)
+                .pipe(
+                  Effect.mapError(
+                    (cause) =>
+                      new CodexInlineVisualizationReadError({
+                        message: "The visualization thread could not be loaded.",
+                        cause,
+                      }),
+                  ),
+                );
+              if (Option.isNone(threadOption)) {
+                return yield* new CodexInlineVisualizationReadError({
+                  message: "The visualization thread was not found.",
+                });
+              }
+
+              const thread = threadOption.value;
+              const providerThreadId = thread.session?.providerThreadId;
+              if (!providerThreadId) {
+                return yield* new CodexInlineVisualizationReadError({
+                  message: "This thread does not have a native Codex session.",
+                });
+              }
+
+              const providerInstanceId =
+                thread.session?.providerInstanceId ?? thread.modelSelection.instanceId;
+              const settings = yield* serverSettings.getSettings.pipe(
+                Effect.mapError(
+                  (cause) =>
+                    new CodexInlineVisualizationReadError({
+                      message: "The Codex provider settings could not be loaded.",
+                      cause,
+                    }),
+                ),
+              );
+              const providerConfig = deriveProviderInstanceConfigMap(settings)[providerInstanceId];
+              if (!providerConfig || providerConfig.driver !== ProviderDriverKind.make("codex")) {
+                return yield* new CodexInlineVisualizationReadError({
+                  message: "This thread is not backed by a configured Codex provider.",
+                });
+              }
+
+              const codexSettings = yield* decodeCodexSettings(providerConfig.config ?? {}).pipe(
+                Effect.mapError(
+                  (cause) =>
+                    new CodexInlineVisualizationReadError({
+                      message: "The Codex provider settings are invalid.",
+                      cause,
+                    }),
+                ),
+              );
+              const homeLayout = yield* resolveCodexHomeLayout(codexSettings);
+              return yield* readCodexInlineVisualization({
+                codexHomePath: homeLayout.effectiveHomePath ?? homeLayout.sharedHomePath,
+                providerThreadId,
+                file: input.file,
+              });
+            }),
+            { "rpc.aggregate": "workspace" },
+          ),
         [WS_METHODS.shellOpenInEditor]: (input) =>
           observeRpcEffect(WS_METHODS.shellOpenInEditor, externalLauncher.launchEditor(input), {
             "rpc.aggregate": "workspace",
diff --git a/apps/web/src/components/ChatMarkdown.browser.tsx b/apps/web/src/components/ChatMarkdown.browser.tsx
index d5a999de..18561987 100644
--- a/apps/web/src/components/ChatMarkdown.browser.tsx
+++ b/apps/web/src/components/ChatMarkdown.browser.tsx
@@ -383,6 +383,45 @@ describe("ChatMarkdown", () => {
     }
   });
 
+  it("renders Codex inline visualization directives in a script-only sandbox", async () => {
+    const readVisualization = vi.fn(async () => ({
+      file: "connection-map.html",
+      contents: '<div id="connection-map"><button type="button">Explore</button></div>',
+      sizeBytes: 72,
+    }));
+    __setEnvironmentApiOverrideForTests(CHAT_MARKDOWN_ENVIRONMENT_ID, {
+      visualizations: { read: readVisualization },
+    } as unknown as EnvironmentApi);
+    const screen = await render(
+      <ChatMarkdown
+        text={'Overview\n\n::codex-inline-vis{file="connection-map.html"}'}
+        cwd="/repo/project"
+        environmentId={CHAT_MARKDOWN_ENVIRONMENT_ID}
+        threadId={CHAT_MARKDOWN_THREAD_ID}
+      />,
+    );
+
+    try {
+      await vi.waitFor(() => {
+        expect(readVisualization).toHaveBeenCalledWith({
+          threadId: CHAT_MARKDOWN_THREAD_ID,
+          file: "connection-map.html",
+        });
+      });
+      const iframe = document.querySelector<HTMLIFrameElement>(
+        'iframe[title="Interactive visualization: connection map"]',
+      );
+      expect(iframe).not.toBeNull();
+      expect(iframe?.getAttribute("sandbox")).toBe("allow-scripts");
+      expect(iframe?.getAttribute("sandbox")).not.toContain("allow-same-origin");
+      expect(iframe?.srcdoc).toContain("Content-Security-Policy");
+      expect(iframe?.srcdoc).toContain('id="connection-map"');
+      expect(document.body.textContent).not.toContain("::codex-inline-vis");
+    } finally {
+      await screen.unmount();
+    }
+  });
+
   it("wraps long fenced text and shows copy feedback", async () => {
     const code = `Please run ${"a-very-long-unbroken-value".repeat(20)} when ready.`;
     const writeText = vi.fn(async () => undefined);
diff --git a/apps/web/src/components/ChatMarkdown.test.ts b/apps/web/src/components/ChatMarkdown.test.ts
index 9309f98b..22139c08 100644
--- a/apps/web/src/components/ChatMarkdown.test.ts
+++ b/apps/web/src/components/ChatMarkdown.test.ts
@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vite-plus/test";
 
 import { splitMarkdownBlocks } from "./ChatMarkdown.tsx";
+import {
+  parseCodexInlineVisualizations,
+  stripCodexInlineVisualizationDirectives,
+} from "../lib/codexInlineVisualization";
 
 describe("splitMarkdownBlocks", () => {
   it("returns no blocks for empty text", () => {
@@ -49,3 +53,41 @@ describe("splitMarkdownBlocks", () => {
     expect(blocks.join("\n\n")).toBe(text);
   });
 });
+
+describe("Codex inline visualization directives", () => {
+  it("extracts exact standalone directives between markdown sections", () => {
+    expect(
+      parseCodexInlineVisualizations(
+        'Before\n\n::codex-inline-vis{file="connection-map.html"}\n\nAfter',
+      ),
+    ).toEqual([
+      { type: "markdown", key: "markdown:0", text: "Before\n" },
+      { type: "visualization", key: "visualization:8", file: "connection-map.html" },
+      { type: "markdown", key: "markdown:55", text: "\nAfter" },
+    ]);
+  });
+
+  it("leaves directives inside code fences and malformed filenames as markdown", () => {
+    const text =
+      '```text\n::codex-inline-vis{file="inside-code.html"}\n```\n\n::codex-inline-vis{file="../escape.html"}';
+    expect(parseCodexInlineVisualizations(text)).toEqual([
+      { type: "markdown", key: "markdown:0", text },
+    ]);
+  });
+
+  it("hides an unfinished final directive while streaming", () => {
+    expect(
+      parseCodexInlineVisualizations("Done\n\n::codex-inline-vis{file=", {
+        isStreaming: true,
+      }),
+    ).toEqual([{ type: "markdown", key: "markdown:0", text: "Done\n" }]);
+  });
+
+  it("removes rendered directives from copied assistant text", () => {
+    expect(
+      stripCodexInlineVisualizationDirectives(
+        'Before\n\n::codex-inline-vis{file="connection-map.html"}\n\nAfter',
+      ),
+    ).toBe("Before\n\nAfter");
+  });
+});
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 679f807c..7f5eb44b 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -1,5 +1,5 @@
 import { DiffsHighlighter, getSharedHighlighter, SupportedLanguages } from "@pierre/diffs";
-import type { EnvironmentId, ServerProviderSkill } from "@threadlines/contracts";
+import type { EnvironmentId, ServerProviderSkill, ThreadId } from "@threadlines/contracts";
 import React, {
   Children,
   Suspense,
@@ -48,6 +48,8 @@ import {
   useMarkdownFileLinkKinds,
 } from "../hooks/useMarkdownFileLinkKinds";
 import { cn } from "../lib/utils";
+import { parseCodexInlineVisualizations } from "../lib/codexInlineVisualization";
+import { CodexInlineVisualization } from "./chat/CodexInlineVisualization";
 
 class CodeHighlightErrorBoundary extends React.Component<
   { fallback: ReactNode; children: ReactNode },
@@ -74,6 +76,7 @@ interface ChatMarkdownProps {
   text: string;
   cwd: string | undefined;
   environmentId?: EnvironmentId | undefined;
+  threadId?: ThreadId | undefined;
   isStreaming?: boolean;
   skills?: ReadonlyArray<Pick<ServerProviderSkill, "name" | "displayName">>;
   searchHighlightQuery?: string | undefined;
@@ -861,7 +864,7 @@ function StreamingTailBlock({
   );
 }
 
-function ChatMarkdown({
+function ChatMarkdownBody({
   text,
   cwd,
   environmentId,
@@ -913,9 +916,50 @@ function ChatMarkdown({
     );
   }
 
+  return body;
+}
+
+function ChatMarkdown({
+  text,
+  cwd,
+  environmentId,
+  threadId,
+  isStreaming = false,
+  skills = EMPTY_MARKDOWN_SKILLS,
+  searchHighlightQuery,
+}: ChatMarkdownProps) {
+  const { resolvedTheme } = useTheme();
+  const canRenderVisualizations = environmentId !== undefined && threadId !== undefined;
+  const segments = canRenderVisualizations
+    ? parseCodexInlineVisualizations(text, { isStreaming })
+    : [{ type: "markdown" as const, key: "markdown:0", text }];
+
   return (
     <div className="chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/80">
-      {body}
+      {segments.map((segment, index) => {
+        if (segment.type === "visualization") {
+          return environmentId && threadId ? (
+            <CodexInlineVisualization
+              key={segment.key}
+              environmentId={environmentId}
+              threadId={threadId}
+              file={segment.file}
+              theme={resolvedTheme}
+            />
+          ) : null;
+        }
+        return (
+          <ChatMarkdownBody
+            key={segment.key}
+            text={segment.text}
+            cwd={cwd}
+            environmentId={environmentId}
+            isStreaming={isStreaming && index === segments.length - 1}
+            skills={skills}
+            searchHighlightQuery={searchHighlightQuery}
+          />
+        );
+      })}
     </div>
   );
 }
diff --git a/apps/web/src/components/chat/CodexInlineVisualization.tsx b/apps/web/src/components/chat/CodexInlineVisualization.tsx
new file mode 100644
index 00000000..395c79ff
--- /dev/null
+++ b/apps/web/src/components/chat/CodexInlineVisualization.tsx
@@ -0,0 +1,416 @@
+import type { EnvironmentId, ThreadId } from "@threadlines/contracts";
+import { ExternalLinkIcon, XIcon } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+
+import { ensureEnvironmentApi } from "../../environmentApi";
+import { LRUCache } from "../../lib/lruCache";
+import { Button } from "../ui/button";
+
+const INITIAL_VISUALIZATION_HEIGHT = 240;
+const MIN_VISUALIZATION_HEIGHT = 80;
+const MAX_VISUALIZATION_HEIGHT = 10_000;
+const BRIDGE_SOURCE = "threadlines-codex-inline-vis";
+const visualizationContentsCache = new LRUCache<string>(32, 40 * 1024 * 1024);
+const visualizationReadPromises = new Map<string, Promise<string>>();
+
+type VisualizationTheme = "light" | "dark";
+
+interface CodexInlineVisualizationProps {
+  readonly environmentId: EnvironmentId;
+  readonly threadId: ThreadId;
+  readonly file: string;
+  readonly theme: VisualizationTheme;
+}
+
+type LoadState =
+  | { readonly status: "loading" }
+  | { readonly status: "error"; readonly message: string }
+  | { readonly status: "loaded"; readonly contents: string };
+
+interface VisualizationBridgeMessage {
+  readonly source?: unknown;
+  readonly token?: unknown;
+  readonly type?: unknown;
+  readonly height?: unknown;
+  readonly url?: unknown;
+  readonly message?: unknown;
+}
+
+function errorMessage(cause: unknown): string {
+  if (cause instanceof Error && cause.message.trim().length > 0) {
+    return cause.message;
+  }
+  if (
+    typeof cause === "object" &&
+    cause !== null &&
+    "message" in cause &&
+    typeof cause.message === "string" &&
+    cause.message.trim().length > 0
+  ) {
+    return cause.message;
+  }
+  return "The visualization could not be loaded.";
+}
+
+function safeJson(value: string): string {
+  return JSON.stringify(value).replaceAll("<", "\\u003c");
+}
+
+function visualizationCacheKey(input: {
+  readonly environmentId: EnvironmentId;
+  readonly threadId: ThreadId;
+  readonly file: string;
+}): string {
+  return `${input.environmentId}\u0000${input.threadId}\u0000${input.file}`;
+}
+
+async function readVisualizationContents(input: {
+  readonly environmentId: EnvironmentId;
+  readonly threadId: ThreadId;
+  readonly file: string;
+}): Promise<string> {
+  const cacheKey = visualizationCacheKey(input);
+  const cached = visualizationContentsCache.get(cacheKey);
+  if (cached !== null) {
+    return cached;
+  }
+
+  const pending = visualizationReadPromises.get(cacheKey);
+  if (pending) {
+    return pending;
+  }
+
+  const read = (async () => {
+    const api = ensureEnvironmentApi(input.environmentId);
+    if (!api.visualizations) {
+      throw new Error("This Threadlines server does not support inline visualizations yet.");
+    }
+    const result = await api.visualizations.read({ threadId: input.threadId, file: input.file });
+    visualizationContentsCache.set(cacheKey, result.contents, result.contents.length * 2);
+    return result.contents;
+  })();
+  visualizationReadPromises.set(cacheKey, read);
+  const clearPending = () => {
+    if (visualizationReadPromises.get(cacheKey) === read) {
+      visualizationReadPromises.delete(cacheKey);
+    }
+  };
+  void read.then(clearPending, clearPending);
+  return read;
+}
+
+export function buildCodexInlineVisualizationDocument(input: {
+  readonly contents: string;
+  readonly theme: VisualizationTheme;
+  readonly bridgeToken: string;
+}): string {
+  const dark = input.theme === "dark";
+  const colors = dark
+    ? {
+        background: "#171717",
+        foreground: "#f3f3f3",
+        muted: "#292929",
+        mutedForeground: "#a3a3a3",
+        border: "#3a3a3a",
+        primary: "#e7e7e7",
+        primaryForeground: "#171717",
+        secondary: "#303030",
+        secondaryForeground: "#ededed",
+      }
+    : {
+        background: "#ffffff",
+        foreground: "#171717",
+        muted: "#f1f1f1",
+        mutedForeground: "#666666",
+        border: "#dedede",
+        primary: "#252525",
+        primaryForeground: "#ffffff",
+        secondary: "#eeeeee",
+        secondaryForeground: "#252525",
+      };
+  const bridgeToken = safeJson(input.bridgeToken);
+
+  return `<!doctype html>
+<html lang="en" data-theme="${input.theme}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' data: blob: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh https://unpkg.com; style-src 'unsafe-inline' data: blob: https://fonts.bunny.net https://fonts.googleapis.com; font-src data: https://fonts.bunny.net https://fonts.gstatic.com; img-src data: blob: https:; media-src data: blob: https:; connect-src data: blob:; worker-src data: blob:; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'">
+  <style>
+    :root {
+      color-scheme: ${input.theme};
+      --background: ${colors.background};
+      --foreground: ${colors.foreground};
+      --card: ${colors.background};
+      --card-foreground: ${colors.foreground};
+      --popover: ${colors.background};
+      --popover-foreground: ${colors.foreground};
+      --primary: ${colors.primary};
+      --primary-foreground: ${colors.primaryForeground};
+      --secondary: ${colors.secondary};
+      --secondary-foreground: ${colors.secondaryForeground};
+      --muted: ${colors.muted};
+      --muted-foreground: ${colors.mutedForeground};
+      --accent: ${colors.secondary};
+      --accent-foreground: ${colors.secondaryForeground};
+      --border: ${colors.border};
+      --input: ${colors.border};
+      --ring: ${colors.mutedForeground};
+      --destructive: #dc2626;
+      --destructive-foreground: #ffffff;
+      --viz-series-1: #3b82f6;
+      --viz-series-2: #f59e0b;
+      --viz-series-3: #22c55e;
+      --viz-series-4: #a855f7;
+      --viz-series-5: #ec4899;
+      --radius: 6px;
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 14px;
+      line-height: 1.45;
+    }
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { min-width: 0; margin: 0; background: var(--background); color: var(--foreground); }
+    body { padding: 5px; overflow: hidden; }
+    button, input, select, textarea { color: inherit; font: inherit; }
+    button { cursor: pointer; }
+    a { color: inherit; text-underline-offset: 3px; }
+    svg { display: block; width: 1em; height: 1em; stroke-width: 1.75; }
+    [hidden] { display: none !important; }
+    .text-small { font-size: 12px; line-height: 1.4; }
+    .text-muted { color: var(--muted-foreground); }
+    .viz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+    .btn {
+      display: inline-flex; min-height: 28px; align-items: center; justify-content: center; gap: 6px;
+      padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius);
+      background: var(--background); color: var(--foreground); font-weight: 500;
+    }
+    .btn:hover { background: var(--muted); }
+    .btn[aria-pressed="true"], .btn-primary { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
+    .form-input, .form-select, input[type="text"], input[type="number"], select, textarea {
+      min-height: 30px; border: 1px solid var(--input); border-radius: var(--radius);
+      background: var(--background); padding: 5px 8px;
+    }
+    .table-responsive { max-width: 100%; overflow-x: auto; }
+    .table { width: 100%; border-collapse: collapse; }
+    .table th, .table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; }
+    .card { border-block: 1px solid var(--border); padding-block: 12px; }
+    .badge { display: inline-flex; align-items: center; border-radius: 999px; background: var(--muted); padding: 2px 7px; font-size: 12px; }
+    #threadlines-viz-tooltip {
+      position: fixed; z-index: 2147483647; display: none; pointer-events: none;
+      border: 1px solid var(--border); border-radius: 4px; background: var(--foreground);
+      color: var(--background); padding: 3px 6px; font-size: 11px; white-space: nowrap;
+    }
+  </style>
+  <script src="https://unpkg.com/lucide@0.468.0/dist/umd/lucide.min.js"></script>
+  <script>
+    (() => {
+      const token = ${bridgeToken};
+      const send = (type, payload = {}) => parent.postMessage({ source: "${BRIDGE_SOURCE}", token, type, ...payload }, "*");
+      let lastHeight = 0;
+      let lastViewportHeight = 0;
+      const measure = () => {
+        const range = document.createRange();
+        range.selectNodeContents(document.body);
+        const rangeHeight = Math.ceil(range.getBoundingClientRect().height);
+        const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, rangeHeight);
+        const viewportHeight = window.innerHeight;
+        const followsViewport =
+          lastHeight > 0 &&
+          lastViewportHeight > 0 &&
+          Math.abs(height - lastHeight - (viewportHeight - lastViewportHeight)) <= 1;
+        lastViewportHeight = viewportHeight;
+        if (followsViewport) {
+          lastHeight = height;
+          return;
+        }
+        if (Number.isFinite(height) && height > 0 && height !== lastHeight) {
+          lastHeight = height;
+          send("height", { height });
+        }
+      };
+      const install = () => {
+        try { window.lucide?.createIcons?.(); } catch (_) {}
+        const tooltip = document.createElement("div");
+        tooltip.id = "threadlines-viz-tooltip";
+        document.body.append(tooltip);
+        document.addEventListener("pointerover", (event) => {
+          const target = event.target instanceof Element ? event.target.closest("[data-tooltip]") : null;
+          if (!target) return;
+          tooltip.textContent = target.getAttribute("data-tooltip") || "";
+          const rect = target.getBoundingClientRect();
+          tooltip.style.left = Math.max(5, rect.left + rect.width / 2) + "px";
+          tooltip.style.top = Math.max(5, rect.top - 5) + "px";
+          tooltip.style.transform = "translate(-50%, -100%)";
+          tooltip.style.display = "block";
+        });
+        document.addEventListener("pointerout", () => { tooltip.style.display = "none"; });
+        document.addEventListener("click", (event) => {
+          const anchor = event.target instanceof Element ? event.target.closest("a[href]") : null;
+          if (!anchor) return;
+          const href = anchor.getAttribute("href") || "";
+          if (href.startsWith("#")) return;
+          event.preventDefault();
+          try {
+            const url = new URL(anchor.href);
+            if (url.protocol === "https:" || url.protocol === "http:") send("external-link", { url: url.href });
+          } catch (_) {}
+        }, true);
+        new ResizeObserver(measure).observe(document.body);
+        new MutationObserver(measure).observe(document.body, { childList: true, subtree: true, attributes: true });
+        measure();
+        requestAnimationFrame(measure);
+      };
+      addEventListener("error", (event) => send("error", { message: event.message || "Visualization script error" }));
+      addEventListener("unhandledrejection", () => send("error", { message: "Visualization script error" }));
+      if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", install, { once: true });
+      else install();
+    })();
+  </script>
+</head>
+<body>
+${input.contents}
+</body>
+</html>`;
+}
+
+export function CodexInlineVisualization({
+  environmentId,
+  threadId,
+  file,
+  theme,
+}: CodexInlineVisualizationProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const bridgeToken = useId();
+  const [height, setHeight] = useState(INITIAL_VISUALIZATION_HEIGHT);
+  const [loadState, setLoadState] = useState<LoadState>({ status: "loading" });
+  const [pendingExternalUrl, setPendingExternalUrl] = useState<string | null>(null);
+  const [runtimeError, setRuntimeError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoadState({ status: "loading" });
+    setHeight(INITIAL_VISUALIZATION_HEIGHT);
+    setPendingExternalUrl(null);
+    setRuntimeError(null);
+    void (async () => {
+      try {
+        const contents = await readVisualizationContents({ environmentId, threadId, file });
+        if (!cancelled) {
+          setLoadState({ status: "loaded", contents });
+        }
+      } catch (cause) {
+        if (!cancelled) {
+          setLoadState({ status: "error", message: errorMessage(cause) });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [environmentId, file, threadId]);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent<VisualizationBridgeMessage>) => {
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      const data = event.data;
+      if (data?.source !== BRIDGE_SOURCE || data.token !== bridgeToken) return;
+      if (data.type === "height" && typeof data.height === "number") {
+        setHeight(
+          Math.max(
+            MIN_VISUALIZATION_HEIGHT,
+            Math.min(MAX_VISUALIZATION_HEIGHT, Math.ceil(data.height)),
+          ),
+        );
+      } else if (data.type === "external-link" && typeof data.url === "string") {
+        try {
+          const url = new URL(data.url);
+          if (url.protocol === "https:" || url.protocol === "http:") {
+            setPendingExternalUrl(url.href);
+          }
+        } catch {
+          // Ignore malformed URLs posted by untrusted visualization content.
+        }
+      } else if (data.type === "error" && typeof data.message === "string") {
+        setRuntimeError(data.message.slice(0, 180));
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [bridgeToken]);
+
+  const document = useMemo(
+    () =>
+      loadState.status === "loaded"
+        ? buildCodexInlineVisualizationDocument({
+            contents: loadState.contents,
+            theme,
+            bridgeToken,
+          })
+        : null,
+    [bridgeToken, loadState, theme],
+  );
+
+  if (loadState.status === "loading") {
+    return (
+      <div
+        role="status"
+        aria-label={`Loading visualization ${file}`}
+        className="my-3 h-60 w-full animate-pulse border-y border-border bg-muted/25"
+      />
+    );
+  }
+
+  if (loadState.status === "error") {
+    return (
+      <div className="my-3 border-y border-border py-3 text-xs text-muted-foreground">
+        <span className="font-medium text-foreground/80">Visualization unavailable.</span>{" "}
+        {loadState.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative my-3 w-full border-y border-border bg-background">
+      {pendingExternalUrl ? (
+        <div className="flex min-w-0 items-center gap-2 border-b border-border px-2 py-1.5 text-xs">
+          <span className="min-w-0 flex-1 truncate text-muted-foreground">
+            Open {pendingExternalUrl}?
+          </span>
+          <Button
+            size="xs"
+            variant="outline"
+            onClick={() => {
+              window.open(pendingExternalUrl, "_blank", "noopener,noreferrer");
+              setPendingExternalUrl(null);
+            }}
+          >
+            <ExternalLinkIcon aria-hidden />
+            Open
+          </Button>
+          <Button
+            size="icon-xs"
+            variant="ghost"
+            aria-label="Cancel opening external link"
+            onClick={() => setPendingExternalUrl(null)}
+          >
+            <XIcon aria-hidden />
+          </Button>
+        </div>
+      ) : null}
+      <iframe
+        ref={iframeRef}
+        title={`Interactive visualization: ${file.replace(/\.html$/, "").replaceAll("-", " ")}`}
+        srcDoc={document ?? undefined}
+        sandbox="allow-scripts"
+        referrerPolicy="no-referrer"
+        className="block w-full border-0 bg-transparent"
+        style={{ height }}
+      />
+      {runtimeError ? (
+        <div className="border-t border-border px-2 py-1.5 text-[11px] text-muted-foreground">
+          Visualization reported an error: {runtimeError}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
index 4173c669..19829837 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
@@ -261,6 +261,19 @@ describe("resolveAssistantMessageCopyState", () => {
       visible: false,
     });
   });
+
+  it("omits inline visualization directives from copied assistant text", () => {
+    expect(
+      resolveAssistantMessageCopyState({
+        showCopyButton: true,
+        text: 'Summary\n\n::codex-inline-vis{file="connection-map.html"}',
+        streaming: false,
+      }),
+    ).toEqual({
+      text: "Summary",
+      visible: true,
+    });
+  });
 });
 
 describe("deriveMessagesTimelineRows", () => {
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
index 2cea46fd..f8c16d08 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -9,6 +9,7 @@ import {
 } from "../../session-logic";
 import { type ChatMessage, type ProposedPlan, type TurnDiffSummary } from "../../types";
 import { type MessageId, type TurnId } from "@threadlines/contracts";
+import { stripCodexInlineVisualizationDirectives } from "../../lib/codexInlineVisualization";
 
 export const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
 
@@ -139,9 +140,10 @@ export function resolveAssistantMessageCopyState({
   showCopyButton: boolean;
   streaming: boolean;
 }) {
-  const hasText = text !== null && text.trim().length > 0;
+  const copyText = text === null ? null : stripCodexInlineVisualizationDirectives(text);
+  const hasText = copyText !== null && copyText.trim().length > 0;
   return {
-    text: hasText ? text : null,
+    text: hasText ? copyText : null,
     visible: showCopyButton && hasText && !streaming,
   };
 }
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 00cbab20..c3e2d09b 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2063,6 +2063,7 @@ function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "mess
                   text={messageText}
                   cwd={ctx.markdownCwd}
                   environmentId={ctx.activeThreadEnvironmentId}
+                  threadId={ctx.activeThreadId ?? undefined}
                   isStreaming={Boolean(row.message.streaming)}
                   skills={ctx.skills}
                   searchHighlightQuery={
diff --git a/apps/web/src/environmentApi.ts b/apps/web/src/environmentApi.ts
index 21aa2582..90d877e5 100644
--- a/apps/web/src/environmentApi.ts
+++ b/apps/web/src/environmentApi.ts
@@ -34,6 +34,9 @@ export function createEnvironmentApi(rpcClient: WsRpcClient): EnvironmentApi {
     attachments: {
       read: rpcClient.attachments.read,
     },
+    visualizations: {
+      read: rpcClient.visualizations.read,
+    },
     filesystem: {
       browse: rpcClient.filesystem.browse,
     },
diff --git a/apps/web/src/lib/codexInlineVisualization.ts b/apps/web/src/lib/codexInlineVisualization.ts
new file mode 100644
index 00000000..a70bdf31
--- /dev/null
+++ b/apps/web/src/lib/codexInlineVisualization.ts
@@ -0,0 +1,111 @@
+export const CODEX_INLINE_VISUALIZATION_DIRECTIVE = "::codex-inline-vis";
+
+const DIRECTIVE_LINE =
+  /^ {0,3}::codex-inline-vis\{file="([a-z0-9]+(?:-[a-z0-9]+)*\.html)"\}[ \t]*$/;
+const FENCE_START = /^ {0,3}(`{3,}|~{3,})(.*)$/;
+
+export type CodexInlineVisualizationSegment =
+  | { readonly type: "markdown"; readonly key: string; readonly text: string }
+  | { readonly type: "visualization"; readonly key: string; readonly file: string };
+
+interface OpenFence {
+  readonly marker: "`" | "~";
+  readonly length: number;
+}
+
+function nextFenceState(line: string, current: OpenFence | null): OpenFence | null {
+  const match = FENCE_START.exec(line);
+  if (!match?.[1]) {
+    return current;
+  }
+
+  const fence = match[1];
+  const marker = fence[0] as "`" | "~";
+  if (current === null) {
+    return { marker, length: fence.length };
+  }
+
+  const remainder = match[2] ?? "";
+  if (marker === current.marker && fence.length >= current.length && remainder.trim() === "") {
+    return null;
+  }
+  return current;
+}
+
+/**
+ * Splits only standalone visualization directives outside fenced code. During
+ * streaming, an unfinished directive on the final line is hidden until Codex
+ * has emitted its closing syntax.
+ */
+export function parseCodexInlineVisualizations(
+  text: string,
+  options: { readonly isStreaming?: boolean } = {},
+): ReadonlyArray<CodexInlineVisualizationSegment> {
+  const lines = text.split("\n");
+  const segments: CodexInlineVisualizationSegment[] = [];
+  let markdownLines: string[] = [];
+  let markdownStart = 0;
+  let offset = 0;
+  let openFence: OpenFence | null = null;
+
+  const flushMarkdown = () => {
+    if (markdownLines.length === 0) {
+      return;
+    }
+    const markdown = markdownLines.join("\n");
+    if (markdown.length > 0) {
+      segments.push({ type: "markdown", key: `markdown:${markdownStart}`, text: markdown });
+    }
+    markdownLines = [];
+  };
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index] ?? "";
+    const isLastLine = index === lines.length - 1;
+    const directive = openFence === null ? DIRECTIVE_LINE.exec(line) : null;
+
+    if (directive?.[1]) {
+      flushMarkdown();
+      segments.push({
+        type: "visualization",
+        key: `visualization:${offset}`,
+        file: directive[1],
+      });
+      markdownStart = offset + line.length + 1;
+    } else {
+      const isPartialStreamingDirective =
+        options.isStreaming === true &&
+        isLastLine &&
+        openFence === null &&
+        line.trimStart().startsWith(CODEX_INLINE_VISUALIZATION_DIRECTIVE);
+      if (!isPartialStreamingDirective) {
+        if (markdownLines.length === 0) {
+          markdownStart = offset;
+        }
+        markdownLines.push(line);
+        openFence = nextFenceState(line, openFence);
+      }
+    }
+
+    offset += line.length + (isLastLine ? 0 : 1);
+  }
+
+  flushMarkdown();
+  return segments;
+}
+
+export function stripCodexInlineVisualizationDirectives(text: string): string {
+  const segments = parseCodexInlineVisualizations(text);
+  if (!segments.some((segment) => segment.type === "visualization")) {
+    return text;
+  }
+  return segments
+    .filter(
+      (segment): segment is Extract<CodexInlineVisualizationSegment, { type: "markdown" }> =>
+        segment.type === "markdown",
+    )
+    .map((segment) => segment.text)
+    .join("\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
diff --git a/apps/web/src/localApi.test.ts b/apps/web/src/localApi.test.ts
index 4f1b3162..ecc5aa93 100644
--- a/apps/web/src/localApi.test.ts
+++ b/apps/web/src/localApi.test.ts
@@ -62,6 +62,9 @@ const rpcClientMock = {
   attachments: {
     read: vi.fn(),
   },
+  visualizations: {
+    read: vi.fn(),
+  },
   filesystem: {
     browse: vi.fn(),
   },
@@ -522,6 +525,28 @@ describe("wsApi", () => {
     });
   });
 
+  it("forwards visualization reads to the RPC client", async () => {
+    const result = {
+      file: "connection-map.html",
+      contents: "<div>Connection map</div>",
+      sizeBytes: 25,
+    };
+    rpcClientMock.visualizations.read.mockResolvedValue(result);
+    const { createEnvironmentApi } = await import("./environmentApi");
+
+    const api = createEnvironmentApi(rpcClientMock as never);
+    await expect(
+      api.visualizations?.read({
+        threadId: ThreadId.make("thread-1"),
+        file: "connection-map.html",
+      }),
+    ).resolves.toEqual(result);
+    expect(rpcClientMock.visualizations.read).toHaveBeenCalledWith({
+      threadId: "thread-1",
+      file: "connection-map.html",
+    });
+  });
+
   it("forwards filesystem browse requests to the RPC client", async () => {
     rpcClientMock.filesystem.browse.mockResolvedValue({
       parentPath: "/tmp/project/",
diff --git a/apps/web/src/rpc/wsRpcClient.ts b/apps/web/src/rpc/wsRpcClient.ts
index f4f79274..ed4a68c0 100644
--- a/apps/web/src/rpc/wsRpcClient.ts
+++ b/apps/web/src/rpc/wsRpcClient.ts
@@ -92,6 +92,9 @@ export interface WsRpcClient {
   readonly attachments: {
     readonly read: RpcUnaryMethod<typeof WS_METHODS.attachmentsRead>;
   };
+  readonly visualizations: {
+    readonly read: RpcUnaryMethod<typeof WS_METHODS.visualizationsRead>;
+  };
   readonly filesystem: {
     readonly browse: RpcUnaryMethod<typeof WS_METHODS.filesystemBrowse>;
   };
@@ -372,6 +375,13 @@ export function createWsRpcClient(transport: WsTransport): WsRpcClient {
           label: WS_METHODS.attachmentsRead,
         }),
     },
+    visualizations: {
+      read: (input) =>
+        transport.requestWithReconnectRetry(
+          (client) => client[WS_METHODS.visualizationsRead](input),
+          { label: WS_METHODS.visualizationsRead },
+        ),
+    },
     filesystem: {
       browse: (input) => transport.request((client) => client[WS_METHODS.filesystemBrowse](input)),
     },
diff --git a/packages/contracts/src/ipc.ts b/packages/contracts/src/ipc.ts
index 2ed68e6a..4cda335f 100644
--- a/packages/contracts/src/ipc.ts
+++ b/packages/contracts/src/ipc.ts
@@ -128,6 +128,8 @@ import * as Schema from "effect/Schema";
 import type {
   ChatAttachmentReadInput,
   ChatAttachmentReadResult,
+  CodexInlineVisualizationReadInput,
+  CodexInlineVisualizationReadResult,
   ClientOrchestrationCommand,
   OrchestrationGetFullThreadDiffInput,
   OrchestrationGetFullThreadDiffResult,
@@ -784,6 +786,10 @@ export interface EnvironmentApi {
   attachments: {
     read: (input: ChatAttachmentReadInput) => Promise<ChatAttachmentReadResult>;
   };
+  /** Optional so newer clients can still connect to older Threadlines servers. */
+  visualizations?: {
+    read: (input: CodexInlineVisualizationReadInput) => Promise<CodexInlineVisualizationReadResult>;
+  };
   filesystem: {
     browse: (input: FilesystemBrowseInput) => Promise<FilesystemBrowseResult>;
   };
diff --git a/packages/contracts/src/orchestration.test.ts b/packages/contracts/src/orchestration.test.ts
index 7ad11125..f93ee506 100644
--- a/packages/contracts/src/orchestration.test.ts
+++ b/packages/contracts/src/orchestration.test.ts
@@ -6,6 +6,7 @@ import * as Schema from "effect/Schema";
 import {
   ChatAttachment,
   ChatAttachmentListLenient,
+  CodexInlineVisualizationReadInput,
   ClientOrchestrationCommand,
   DEFAULT_PROVIDER_INTERACTION_MODE,
   DEFAULT_RUNTIME_MODE,
@@ -59,6 +60,25 @@ const decodeOrchestrationCommand = Schema.decodeUnknownEffect(OrchestrationComma
 const decodeOrchestrationEvent = Schema.decodeUnknownEffect(OrchestrationEvent);
 const decodeThreadMetaUpdatedPayload = Schema.decodeUnknownEffect(ThreadMetaUpdatedPayload);
 const decodeThreadForkContextPayload = Schema.decodeUnknownEffect(ThreadForkContextPayload);
+const decodeCodexInlineVisualizationReadInput = Schema.decodeUnknownEffect(
+  CodexInlineVisualizationReadInput,
+);
+
+it.effect("accepts only path-free kebab-case Codex visualization filenames", () =>
+  Effect.gen(function* () {
+    const parsed = yield* decodeCodexInlineVisualizationReadInput({
+      threadId: "thread-1",
+      file: "connection-map.html",
+    });
+    assert.strictEqual(parsed.file, "connection-map.html");
+
+    const traversal = yield* decodeCodexInlineVisualizationReadInput({
+      threadId: "thread-1",
+      file: "../connection-map.html",
+    }).pipe(Effect.result);
+    assert.strictEqual(traversal._tag, "Failure");
+  }),
+);
 
 it.effect("parses turn diff input when fromTurnCount <= toTurnCount", () =>
   Effect.gen(function* () {
diff --git a/packages/contracts/src/orchestration.ts b/packages/contracts/src/orchestration.ts
index f1b5c006..6fdbe824 100644
--- a/packages/contracts/src/orchestration.ts
+++ b/packages/contracts/src/orchestration.ts
@@ -298,6 +298,38 @@ export class ChatAttachmentReadError extends Schema.TaggedErrorClass<ChatAttachm
   },
 ) {}
 
+/**
+ * Reads a Codex-owned inline visualization fragment for a thread. The client
+ * supplies only the public Threadlines thread id and the filename emitted in
+ * the assistant response; the server derives the provider session and Codex
+ * home so arbitrary filesystem paths never cross the RPC boundary.
+ */
+export const CodexInlineVisualizationFileName = Schema.String.check(
+  Schema.isPattern(/^[a-z0-9]+(?:-[a-z0-9]+)*\.html$/),
+);
+export type CodexInlineVisualizationFileName = typeof CodexInlineVisualizationFileName.Type;
+
+export const CodexInlineVisualizationReadInput = Schema.Struct({
+  threadId: ThreadId,
+  file: CodexInlineVisualizationFileName,
+});
+export type CodexInlineVisualizationReadInput = typeof CodexInlineVisualizationReadInput.Type;
+
+export const CodexInlineVisualizationReadResult = Schema.Struct({
+  file: CodexInlineVisualizationFileName,
+  contents: Schema.String,
+  sizeBytes: NonNegativeInt,
+});
+export type CodexInlineVisualizationReadResult = typeof CodexInlineVisualizationReadResult.Type;
+
+export class CodexInlineVisualizationReadError extends Schema.TaggedErrorClass<CodexInlineVisualizationReadError>()(
+  "CodexInlineVisualizationReadError",
+  {
+    message: TrimmedNonEmptyString,
+    cause: Schema.optional(Schema.Defect()),
+  },
+) {}
+
 export const ProjectScriptIcon = Schema.Literals([
   "play",
   "test",
diff --git a/packages/contracts/src/rpc.ts b/packages/contracts/src/rpc.ts
index 034cac5a..3636ec44 100644
--- a/packages/contracts/src/rpc.ts
+++ b/packages/contracts/src/rpc.ts
@@ -64,6 +64,9 @@ import {
   ChatAttachmentReadError,
   ChatAttachmentReadInput,
   ChatAttachmentReadResult,
+  CodexInlineVisualizationReadError,
+  CodexInlineVisualizationReadInput,
+  CodexInlineVisualizationReadResult,
   ClientOrchestrationCommand,
   ORCHESTRATION_WS_METHODS,
   OrchestrationDispatchCommandError,
@@ -213,6 +216,9 @@ export const WS_METHODS = {
   // Chat attachment methods
   attachmentsRead: "attachments.read",
 
+  // Codex inline visualization methods
+  visualizationsRead: "visualizations.read",
+
   // Shell methods
   shellOpenInEditor: "shell.openInEditor",
 
@@ -647,6 +653,12 @@ export const WsAttachmentsReadRpc = Rpc.make(WS_METHODS.attachmentsRead, {
   error: ChatAttachmentReadError,
 });
 
+export const WsVisualizationsReadRpc = Rpc.make(WS_METHODS.visualizationsRead, {
+  payload: CodexInlineVisualizationReadInput,
+  success: CodexInlineVisualizationReadResult,
+  error: CodexInlineVisualizationReadError,
+});
+
 export const WsShellOpenInEditorRpc = Rpc.make(WS_METHODS.shellOpenInEditor, {
   payload: LaunchEditorInput,
   error: ExternalLauncherError,
@@ -991,6 +1003,7 @@ export const WsRpcGroup = RpcGroup.make(
   WsProjectsReadFileRpc,
   WsProjectsFaviconRpc,
   WsAttachmentsReadRpc,
+  WsVisualizationsReadRpc,
   WsShellOpenInEditorRpc,
   WsFilesystemBrowseRpc,
   WsSubscribeVcsStatusRpc,