diff --git a/apps/web/src/components/ChatCodePreviewCard.test.tsx b/apps/web/src/components/ChatCodePreviewCard.test.tsx
new file mode 100644
index 00000000..9b3c60fc
--- /dev/null
+++ b/apps/web/src/components/ChatCodePreviewCard.test.tsx
@@ -0,0 +1,58 @@
+import type { ReactElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { buildStreamingCodePreviewMeta } from "~/lib/chatCodePreview";
+
+import { ChatCodePreviewCard } from "./ChatCodePreviewCard";
+
+function renderCard(element: ReactElement) {
+  return renderToStaticMarkup(element);
+}
+
+describe("ChatCodePreviewCard", () => {
+  it("renders a live status line for streaming previews", () => {
+    const meta = buildStreamingCodePreviewMeta({
+      className: "language-typescript",
+      code: "export const answer = 42;\n",
+      isStreaming: true,
+      highlightFailed: false,
+    });
+
+    const markup = renderCard(
+      <ChatCodePreviewCard code="export const answer = 42;\n" meta={meta} isStreaming>
+        <pre>
+          <code>export const answer = 42;</code>
+        </pre>
+      </ChatCodePreviewCard>,
+    );
+
+    expect(markup).toContain("Streaming code preview");
+    expect(markup).toContain("TypeScript");
+    expect(markup).toContain("1 line");
+    expect(markup).toContain("Live");
+    expect(markup).toContain("Copy code");
+  });
+
+  it("renders fallback status when highlighting is unavailable", () => {
+    const meta = buildStreamingCodePreviewMeta({
+      className: "language-bash",
+      code: "bun typecheck",
+      isStreaming: false,
+      highlightFailed: true,
+    });
+
+    const markup = renderCard(
+      <ChatCodePreviewCard code="bun typecheck" meta={meta} isStreaming={false}>
+        <pre>
+          <code>bun typecheck</code>
+        </pre>
+      </ChatCodePreviewCard>,
+    );
+
+    expect(markup).toContain("Preview unavailable, showing plain code");
+    expect(markup).toContain("Bash");
+    expect(markup).toContain("1 line");
+    expect(markup).toContain("bun typecheck");
+  });
+});
diff --git a/apps/web/src/components/ChatCodePreviewCard.tsx b/apps/web/src/components/ChatCodePreviewCard.tsx
new file mode 100644
index 00000000..b061c188
--- /dev/null
+++ b/apps/web/src/components/ChatCodePreviewCard.tsx
@@ -0,0 +1,99 @@
+import { CheckIcon, CircleIcon, CopyIcon } from "lucide-react";
+import { memo, useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+
+import type { StreamingCodePreviewMeta } from "~/lib/chatCodePreview";
+import { cn } from "~/lib/utils";
+
+function formatLineCount(lineCount: number): string {
+  return `${lineCount} line${lineCount === 1 ? "" : "s"}`;
+}
+
+export const ChatCodePreviewCard = memo(function ChatCodePreviewCard(props: {
+  code: string;
+  meta: StreamingCodePreviewMeta;
+  isStreaming: boolean;
+  children: ReactNode;
+}) {
+  const { code, meta, isStreaming, children } = props;
+  const [copied, setCopied] = useState(false);
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = useCallback(() => {
+    if (typeof navigator === "undefined" || navigator.clipboard == null) {
+      return;
+    }
+    void navigator.clipboard
+      .writeText(code)
+      .then(() => {
+        if (copiedTimerRef.current != null) {
+          clearTimeout(copiedTimerRef.current);
+        }
+        setCopied(true);
+        copiedTimerRef.current = setTimeout(() => {
+          setCopied(false);
+          copiedTimerRef.current = null;
+        }, 1200);
+      })
+      .catch(() => undefined);
+  }, [code]);
+
+  useEffect(
+    () => () => {
+      if (copiedTimerRef.current != null) {
+        clearTimeout(copiedTimerRef.current);
+        copiedTimerRef.current = null;
+      }
+    },
+    [],
+  );
+
+  const statusText = meta.isHighlightFallback
+    ? "Preview unavailable, showing plain code"
+    : isStreaming && !meta.isCompleteFence
+      ? "Preparing code preview"
+      : isStreaming
+        ? "Streaming code preview"
+        : "Code preview";
+
+  return (
+    <div
+      className={cn(
+        "chat-code-preview",
+        isStreaming && "chat-code-preview-streaming",
+        meta.isHighlightFallback && "chat-code-preview-fallback",
+      )}
+      data-streaming={isStreaming ? "true" : "false"}
+      data-highlight-fallback={meta.isHighlightFallback ? "true" : "false"}
+    >
+      <div className="chat-code-preview-header">
+        <div className="chat-code-preview-title-row">
+          <span className="chat-code-preview-title">{meta.displayLanguage}</span>
+          {isStreaming ? (
+            <span className="chat-code-preview-badge">
+              <CircleIcon className="chat-code-preview-live-dot size-2.5 fill-current stroke-none" />
+              Live
+            </span>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          className="chat-markdown-copy-button chat-code-preview-copy-button"
+          onClick={handleCopy}
+          title={copied ? "Copied" : "Copy code"}
+          aria-label={copied ? "Copied" : "Copy code"}
+        >
+          {copied ? <CheckIcon className="size-3" /> : <CopyIcon className="size-3" />}
+        </button>
+      </div>
+      <div className="chat-code-preview-body">{children}</div>
+      <div className="chat-code-preview-footer">
+        <span className="chat-code-preview-status">{statusText}</span>
+        <span className="chat-code-preview-meta">
+          <span>{meta.displayLanguage}</span>
+          <span>{formatLineCount(meta.lineCount)}</span>
+          <span>{isStreaming ? "Live" : "Updated just now"}</span>
+        </span>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 60e39a17..69d41aaa 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -1,32 +1,28 @@
-import { CheckIcon, CopyIcon } from "lucide-react";
-import React, {
+import {
   Children,
-  Suspense,
+  useDeferredValue,
   isValidElement,
-  use,
-  useCallback,
   memo,
   useEffect,
   useMemo,
-  useRef,
   useState,
   type ReactNode,
 } from "react";
 import type { Components } from "react-markdown";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { CodeHighlightErrorBoundary } from "./CodeHighlightErrorBoundary";
+import { ChatCodePreviewCard } from "./ChatCodePreviewCard";
 import { useAppSettings } from "../appSettings";
 import { openFileReference } from "../fileOpen";
 import { useFileViewNavigation } from "~/hooks/useFileViewNavigation";
 import { resolveDiffThemeName, type DiffThemeName } from "../lib/diffRendering";
 import {
-  extractFenceLanguage,
   getCachedHighlightedHtml,
   getHighlighterPromise,
   renderHighlightedCodeHtml,
   setCachedHighlightedHtml,
 } from "../lib/syntaxHighlighting";
+import { buildStreamingCodePreviewMeta } from "../lib/chatCodePreview";
 import { useTheme } from "../hooks/useTheme";
 import { resolveMarkdownFileLinkTarget } from "../markdown-links";
 import { readNativeApi } from "../nativeApi";
@@ -73,94 +69,90 @@ function extractCodeBlock(
   };
 }
 
-function MarkdownCodeBlock({ code, children }: { code: string; children: ReactNode }) {
-  const [copied, setCopied] = useState(false);
-  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const handleCopy = useCallback(() => {
-    if (typeof navigator === "undefined" || navigator.clipboard == null) {
-      return;
-    }
-    void navigator.clipboard
-      .writeText(code)
-      .then(() => {
-        if (copiedTimerRef.current != null) {
-          clearTimeout(copiedTimerRef.current);
-        }
-        setCopied(true);
-        copiedTimerRef.current = setTimeout(() => {
-          setCopied(false);
-          copiedTimerRef.current = null;
-        }, 1200);
-      })
-      .catch(() => undefined);
-  }, [code]);
-
-  useEffect(
-    () => () => {
-      if (copiedTimerRef.current != null) {
-        clearTimeout(copiedTimerRef.current);
-        copiedTimerRef.current = null;
-      }
-    },
-    [],
-  );
-
-  return (
-    <div className="chat-markdown-codeblock">
-      <button
-        type="button"
-        className="chat-markdown-copy-button"
-        onClick={handleCopy}
-        title={copied ? "Copied" : "Copy code"}
-        aria-label={copied ? "Copied" : "Copy code"}
-      >
-        {copied ? <CheckIcon className="size-3" /> : <CopyIcon className="size-3" />}
-      </button>
-      {children}
-    </div>
-  );
-}
-
-interface SuspenseShikiCodeBlockProps {
+interface HighlightedCodeBlockProps {
   className: string | undefined;
   code: string;
   themeName: DiffThemeName;
   isStreaming: boolean;
+  fallback: ReactNode;
 }
 
-function SuspenseShikiCodeBlock({
+function HighlightedCodeBlock({
   className,
   code,
   themeName,
   isStreaming,
-}: SuspenseShikiCodeBlockProps) {
-  const language = extractFenceLanguage(className);
-  const cachedHighlightedHtml = !isStreaming
-    ? getCachedHighlightedHtml(code, language, themeName, "chat-markdown")
-    : null;
-
-  if (cachedHighlightedHtml != null) {
-    return (
-      <div
-        className="chat-markdown-shiki"
-        dangerouslySetInnerHTML={{ __html: cachedHighlightedHtml }}
-      />
-    );
-  }
-
-  const highlighter = use(getHighlighterPromise(language));
-  const highlightedHtml = useMemo(() => {
-    return renderHighlightedCodeHtml(highlighter, code, language, themeName);
-  }, [code, highlighter, language, themeName]);
+  fallback,
+}: HighlightedCodeBlockProps) {
+  const deferredCode = useDeferredValue(code);
+  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null);
+  const [highlightFailed, setHighlightFailed] = useState(false);
+  const meta = useMemo(
+    () =>
+      buildStreamingCodePreviewMeta({
+        className,
+        code,
+        isStreaming,
+        highlightFailed,
+      }),
+    [className, code, highlightFailed, isStreaming],
+  );
+  const effectiveCode = isStreaming ? deferredCode : code;
 
   useEffect(() => {
-    if (!isStreaming) {
-      setCachedHighlightedHtml(code, language, themeName, "chat-markdown", highlightedHtml);
+    let cancelled = false;
+    const cachedHighlightedHtml = !isStreaming
+      ? getCachedHighlightedHtml(code, meta.language, themeName, "chat-markdown")
+      : null;
+
+    if (cachedHighlightedHtml != null) {
+      setHighlightFailed(false);
+      setHighlightedHtml(cachedHighlightedHtml);
+      return () => {
+        cancelled = true;
+      };
     }
-  }, [code, highlightedHtml, isStreaming, language, themeName]);
+
+    setHighlightedHtml((current) => (isStreaming ? current : null));
+    setHighlightFailed(false);
+
+    void getHighlighterPromise(meta.language)
+      .then((highlighter) => {
+        if (cancelled) return;
+        const nextHtml = renderHighlightedCodeHtml(
+          highlighter,
+          effectiveCode,
+          meta.language,
+          themeName,
+        );
+        if (cancelled) return;
+        setHighlightedHtml(nextHtml);
+        if (!isStreaming) {
+          setCachedHighlightedHtml(code, meta.language, themeName, "chat-markdown", nextHtml);
+        }
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setHighlightFailed(true);
+        setHighlightedHtml(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code, effectiveCode, isStreaming, meta.language, themeName]);
 
   return (
-    <div className="chat-markdown-shiki" dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
+    <ChatCodePreviewCard code={code} meta={meta} isStreaming={isStreaming}>
+      {highlightedHtml ? (
+        <div
+          className="chat-markdown-shiki"
+          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+        />
+      ) : (
+        fallback
+      )}
+    </ChatCodePreviewCard>
   );
 }
 
@@ -213,19 +205,15 @@ function ChatMarkdown({ text, cwd, isStreaming = false }: ChatMarkdownProps) {
           return <pre {...props}>{children}</pre>;
         }
 
+        const fallback = <pre {...props}>{children}</pre>;
         return (
-          <MarkdownCodeBlock code={codeBlock.code}>
-            <CodeHighlightErrorBoundary fallback={<pre {...props}>{children}</pre>}>
-              <Suspense fallback={<pre {...props}>{children}</pre>}>
-                <SuspenseShikiCodeBlock
-                  className={codeBlock.className}
-                  code={codeBlock.code}
-                  themeName={diffThemeName}
-                  isStreaming={isStreaming}
-                />
-              </Suspense>
-            </CodeHighlightErrorBoundary>
-          </MarkdownCodeBlock>
+          <HighlightedCodeBlock
+            className={codeBlock.className}
+            code={codeBlock.code}
+            themeName={diffThemeName}
+            isStreaming={isStreaming}
+            fallback={fallback}
+          />
         );
       },
     }),
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index d47e94db..ec408682 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -332,4 +332,56 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("Open diff");
     expect(markup).toContain("Diff available");
   });
+
+  it("renders a live code preview card for streaming assistant fences", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderWithI18n(
+      <MessagesTimeline
+        threadId={"thread-1" as never}
+        hasMessages
+        isWorking={false}
+        activeTurnInProgress={true}
+        activeTurnStartedAt="2026-03-17T19:12:28.000Z"
+        scrollContainer={null}
+        timelineEntries={[
+          {
+            id: "entry-1",
+            kind: "message",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            message: {
+              id: MessageId.makeUnsafe("assistant-streaming-code"),
+              role: "assistant",
+              text: ["```typescript", "export const answer = 42;", "```"].join("\n"),
+              createdAt: "2026-03-17T19:12:28.000Z",
+              streaming: true,
+            },
+          },
+        ]}
+        completionDividerBeforeEntryId={null}
+        completionSummary={null}
+        turnDiffSummaryByAssistantMessageId={new Map()}
+        nowIso="2026-03-17T19:12:30.000Z"
+        expandedWorkGroups={{}}
+        onToggleWorkGroup={() => {}}
+        revertTurnCountByUserMessageId={new Map()}
+        onRevertUserMessage={() => {}}
+        isRevertingCheckpoint={false}
+        onImageExpand={() => {}}
+        markdownCwd={undefined}
+        resolvedTheme="light"
+        showReasoningContent={false}
+        timestampFormat="locale"
+        workspaceRoot={undefined}
+        onRemoveQueuedMessage={() => {}}
+        shortcutGuides={EMPTY_SHORTCUT_GUIDES}
+        onOpenSettings={() => {}}
+        onOpenTurnDiff={() => {}}
+      />,
+    );
+
+    expect(markup).toContain("Streaming code preview");
+    expect(markup).toContain("TypeScript");
+    expect(markup).toContain("Live");
+    expect(markup).toContain("export const answer = 42;");
+  });
 });
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 74e7c31b..ba496787 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -391,6 +391,112 @@ label:has(> select#reasoning-effort) select {
   margin: 0.65rem 0;
 }
 
+.chat-markdown .chat-code-preview {
+  margin: 0.75rem 0;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
+  border-radius: 0.95rem;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card) 88%, transparent),
+    color-mix(in srgb, var(--muted) 42%, var(--card))
+  );
+  box-shadow: 0 10px 28px color-mix(in srgb, var(--background) 90%, transparent);
+}
+
+.chat-markdown .chat-code-preview-header,
+.chat-markdown .chat-code-preview-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 0.75rem;
+}
+
+.chat-markdown .chat-code-preview-header {
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  background: color-mix(in srgb, var(--background) 65%, transparent);
+}
+
+.chat-markdown .chat-code-preview-title-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chat-markdown .chat-code-preview-title {
+  min-width: 0;
+  font-size: 0.73rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--foreground) 82%, var(--muted-foreground));
+}
+
+.chat-markdown .chat-code-preview-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+  border-radius: 999px;
+  padding: 0.18rem 0.45rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: color-mix(in srgb, var(--foreground) 70%, var(--primary));
+  background: color-mix(in srgb, var(--background) 72%, transparent);
+}
+
+.chat-markdown .chat-code-preview-live-dot {
+  color: var(--primary);
+  animation: chat-code-preview-pulse 1.4s ease-in-out infinite;
+}
+
+.chat-markdown .chat-code-preview-copy-button {
+  position: static;
+  flex: none;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.chat-markdown .chat-code-preview-body {
+  overflow-x: auto;
+  background: color-mix(in srgb, var(--muted) 68%, var(--background));
+}
+
+.chat-markdown .chat-code-preview-body pre {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+.chat-markdown .chat-code-preview-footer {
+  flex-wrap: wrap;
+  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+  background: color-mix(in srgb, var(--background) 56%, transparent);
+  font-size: 0.68rem;
+  line-height: 1.4;
+}
+
+.chat-markdown .chat-code-preview-status {
+  color: color-mix(in srgb, var(--foreground) 80%, var(--muted-foreground));
+}
+
+.chat-markdown .chat-code-preview-meta {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  color: color-mix(in srgb, var(--foreground) 60%, var(--muted-foreground));
+}
+
+.chat-markdown .chat-code-preview-fallback .chat-code-preview-status {
+  color: color-mix(in srgb, var(--warning-foreground) 80%, var(--foreground));
+}
+
 .chat-markdown .chat-markdown-codeblock pre {
   margin: 0;
 }
@@ -432,6 +538,16 @@ label:has(> select#reasoning-effort) select {
   background: color-mix(in srgb, var(--muted) 78%, var(--background)) !important;
 }
 
+@keyframes chat-code-preview-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
 .chat-markdown table {
   width: 100%;
   border-collapse: collapse;
diff --git a/apps/web/src/lib/chatCodePreview.test.ts b/apps/web/src/lib/chatCodePreview.test.ts
new file mode 100644
index 00000000..3ff33a98
--- /dev/null
+++ b/apps/web/src/lib/chatCodePreview.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+
+import { buildStreamingCodePreviewMeta } from "./chatCodePreview";
+
+describe("buildStreamingCodePreviewMeta", () => {
+  it("parses the language label and marks complete non-streaming fences", () => {
+    expect(
+      buildStreamingCodePreviewMeta({
+        className: "language-typescriptreact",
+        code: "const answer = 42;\nconsole.log(answer);\n",
+        isStreaming: false,
+        highlightFailed: false,
+      }),
+    ).toMatchObject({
+      language: "tsx",
+      displayLanguage: "TypeScript React",
+      lineCount: 2,
+      charCount: 40,
+      isCompleteFence: true,
+      isHighlightFallback: false,
+    });
+  });
+
+  it("falls back to Text and marks streaming previews as incomplete", () => {
+    expect(
+      buildStreamingCodePreviewMeta({
+        className: undefined,
+        code: "",
+        isStreaming: true,
+        highlightFailed: false,
+      }),
+    ).toMatchObject({
+      language: "text",
+      displayLanguage: "Text",
+      lineCount: 0,
+      charCount: 0,
+      isCompleteFence: false,
+      isHighlightFallback: false,
+    });
+  });
+
+  it("marks highlight fallback without dropping metadata", () => {
+    expect(
+      buildStreamingCodePreviewMeta({
+        className: "language-bash",
+        code: "bun typecheck",
+        isStreaming: false,
+        highlightFailed: true,
+      }),
+    ).toMatchObject({
+      language: "bash",
+      displayLanguage: "Bash",
+      lineCount: 1,
+      charCount: 13,
+      isCompleteFence: true,
+      isHighlightFallback: true,
+    });
+  });
+});
diff --git a/apps/web/src/lib/chatCodePreview.ts b/apps/web/src/lib/chatCodePreview.ts
new file mode 100644
index 00000000..d0f62de0
--- /dev/null
+++ b/apps/web/src/lib/chatCodePreview.ts
@@ -0,0 +1,79 @@
+import { extractFenceLanguage } from "./syntaxHighlighting";
+
+export interface StreamingCodePreviewMeta {
+  language: string;
+  displayLanguage: string;
+  lineCount: number;
+  charCount: number;
+  isCompleteFence: boolean;
+  isHighlightFallback: boolean;
+}
+
+const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
+  bash: "Bash",
+  css: "CSS",
+  html: "HTML",
+  ini: "INI",
+  javascriptreact: "JavaScript React",
+  javascript: "JavaScript",
+  json: "JSON",
+  js: "JavaScript",
+  jsx: "JavaScript React",
+  markdown: "Markdown",
+  md: "Markdown",
+  shell: "Shell",
+  sh: "Shell",
+  sql: "SQL",
+  text: "Text",
+  ts: "TypeScript",
+  tsx: "TypeScript React",
+  typescript: "TypeScript",
+  typescriptreact: "TypeScript React",
+  xml: "XML",
+  yaml: "YAML",
+  yml: "YAML",
+};
+
+const NORMALIZED_LANGUAGE_IDS: Record<string, string> = {
+  javascriptreact: "jsx",
+  typescript: "ts",
+  typescriptreact: "tsx",
+};
+
+function displayLanguageLabel(language: string): string {
+  const normalized = language.trim().toLowerCase();
+  const exact = LANGUAGE_DISPLAY_NAMES[normalized];
+  if (exact) return exact;
+
+  return normalized
+    .split(/[-_]+/g)
+    .filter((part) => part.length > 0)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function countPreviewLines(code: string): number {
+  if (code.length === 0) return 0;
+  const lines = code.endsWith("\n") ? code.slice(0, -1).split("\n") : code.split("\n");
+  return lines.length;
+}
+
+export function buildStreamingCodePreviewMeta(input: {
+  className: string | undefined;
+  code: string;
+  isStreaming: boolean;
+  highlightFailed: boolean;
+}): StreamingCodePreviewMeta {
+  const language = extractFenceLanguage(input.className);
+  const normalizedLanguage = NORMALIZED_LANGUAGE_IDS[language] ?? language;
+  const lineCount = countPreviewLines(input.code);
+
+  return {
+    language: normalizedLanguage,
+    displayLanguage: displayLanguageLabel(language),
+    lineCount,
+    charCount: input.code.length,
+    isCompleteFence: !input.isStreaming || input.code.trim().length > 0,
+    isHighlightFallback: input.highlightFailed,
+  };
+}