diff --git a/web/oss/src/components/DrillInView/BeautifiedJsonView.tsx b/web/oss/src/components/DrillInView/BeautifiedJsonView.tsx
index 4ada672cfb..b4dedb3d01 100644
--- a/web/oss/src/components/DrillInView/BeautifiedJsonView.tsx
+++ b/web/oss/src/components/DrillInView/BeautifiedJsonView.tsx
@@ -1,4 +1,4 @@
-import {memo, useEffect, useLayoutEffect, useMemo} from "react"
+import {memo, useEffect, useLayoutEffect, useMemo, useState} from "react"
 
 import {
     Editor as EditorWrapper,
@@ -12,6 +12,16 @@ import {
     ROLE_COLOR_CLASSES,
     DEFAULT_ROLE_COLOR_CLASS,
 } from "@agenta/ui/cell-renderers"
+import {Button} from "antd"
+
+import LargeValuePreview from "./LargeValuePreview"
+import {
+    getPreviewItems,
+    getRenderStats,
+    previewValueString,
+    shouldUsePreview,
+    type RenderBudgetMode,
+} from "./renderBudget"
 
 /**
  * "Beautified JSON" view.
@@ -233,6 +243,39 @@ const getMessageText = (content: unknown): string => {
     }
 }
 
+const formatToolCall = (toolCall: unknown): string => {
+    const rec =
+        toolCall && typeof toolCall === "object" ? (toolCall as Record<string, unknown>) : {}
+    const fn =
+        rec.function && typeof rec.function === "object"
+            ? (rec.function as Record<string, unknown>)
+            : undefined
+    const name =
+        (typeof fn?.name === "string" && fn.name) ||
+        (typeof rec.name === "string" && rec.name) ||
+        "tool"
+    const args = fn?.arguments ?? rec.arguments ?? rec.args ?? rec.input
+
+    if (args === undefined || args === null || args === "") {
+        return `${name}()`
+    }
+
+    if (typeof args === "string") {
+        return `${name}(${previewValueString(args)})`
+    }
+
+    const argStats = getRenderStats(args)
+    if (shouldUsePreview(argStats, "beautified-json")) {
+        return `${name}(${previewValueString(args)})`
+    }
+
+    try {
+        return `${name}(${JSON.stringify(args, null, 2)})`
+    } catch {
+        return `${name}(...)`
+    }
+}
+
 const RenderedChatMessages = memo(function RenderedChatMessages({
     messages,
     keyPrefix,
@@ -248,6 +291,7 @@ const RenderedChatMessages = memo(function RenderedChatMessages({
                 const roleColor =
                     ROLE_COLOR_CLASSES[msg.role.toLowerCase()] ?? DEFAULT_ROLE_COLOR_CLASS
                 const text = getMessageText(msg.content)
+                const toolCalls = Array.isArray(msg.tool_calls) ? msg.tool_calls : []
                 const editorId = `${keyPrefix}-msg-${i}`
 
                 return (
@@ -255,24 +299,38 @@ const RenderedChatMessages = memo(function RenderedChatMessages({
                         <span className={`text-xs font-medium capitalize ${roleColor}`}>
                             {msg.role}
                         </span>
-                        <EditorProvider
-                            id={editorId}
-                            initialValue={text}
-                            showToolbar={false}
-                            enableTokens={false}
-                            readOnly
-                            className={EDITOR_RESET_CLASSES}
-                        >
-                            <MarkdownModeSync isMarkdownView={false} />
-                            <EditorWrapper
+                        {text ? (
+                            <EditorProvider
+                                id={editorId}
                                 initialValue={text}
-                                disabled
                                 showToolbar={false}
-                                noProvider
+                                enableTokens={false}
                                 readOnly
-                                boundHeight={false}
-                            />
-                        </EditorProvider>
+                                className={EDITOR_RESET_CLASSES}
+                            >
+                                <MarkdownModeSync isMarkdownView={false} />
+                                <EditorWrapper
+                                    initialValue={text}
+                                    disabled
+                                    showToolbar={false}
+                                    noProvider
+                                    readOnly
+                                    boundHeight={false}
+                                />
+                            </EditorProvider>
+                        ) : null}
+                        {toolCalls.length > 0 ? (
+                            <div className="flex flex-col gap-1">
+                                {toolCalls.map((toolCall, toolCallIndex) => (
+                                    <pre
+                                        key={`${editorId}-tool-call-${toolCallIndex}`}
+                                        className="m-0 whitespace-pre-wrap break-words rounded bg-[#F6F8FB] px-2 py-1 font-mono text-xs text-[var(--ant-color-text)]"
+                                    >
+                                        {formatToolCall(toolCall)}
+                                    </pre>
+                                ))}
+                            </div>
+                        ) : null}
                     </div>
                 )
             })}
@@ -339,6 +397,10 @@ const RenderedValueBlock = memo(function RenderedValueBlock({
     maxDepth?: number
 }) {
     const value = useMemo(() => simplifyValue(rawValue), [rawValue])
+    const [renderFull, setRenderFull] = useState(false)
+    const stats = useMemo(() => getRenderStats(value), [value])
+    const shouldPreviewValue =
+        !renderFull && shouldUsePreview(stats, "beautified-json" as RenderBudgetMode)
 
     const chatMessages = useMemo(() => extractChatMessages(value), [value])
 
@@ -351,6 +413,18 @@ const RenderedValueBlock = memo(function RenderedValueBlock({
     }
 
     if (typeof value === "string") {
+        if (shouldPreviewValue) {
+            return (
+                <LargeValuePreview
+                    compact
+                    value={value}
+                    mode="beautified-json"
+                    stats={stats}
+                    onRenderFull={() => setRenderFull(true)}
+                />
+            )
+        }
+
         return (
             <EditorProvider
                 id={keyPrefix}
@@ -377,15 +451,19 @@ const RenderedValueBlock = memo(function RenderedValueBlock({
         return <span className="text-[#758391]">—</span>
     }
 
+    const previewItems = shouldPreviewValue ? getPreviewItems(value) : null
+
     if (
         depth < maxDepth &&
         Array.isArray(value) &&
         value.length > 0 &&
         value.some((item) => item && typeof item === "object")
     ) {
+        const items = previewItems?.kind === "array" ? (previewItems.items as unknown[]) : value
+
         return (
             <div className="flex flex-col gap-2">
-                {value.map((item, i) => {
+                {items.map((item, i) => {
                     const simplified = simplifyValue(item)
                     if (
                         typeof simplified === "string" ||
@@ -424,12 +502,20 @@ const RenderedValueBlock = memo(function RenderedValueBlock({
                         />
                     )
                 })}
+                {previewItems?.kind === "array" && previewItems.hiddenCount > 0 ? (
+                    <Button size="small" type="link" onClick={() => setRenderFull(true)}>
+                        Show {previewItems.hiddenCount} more items
+                    </Button>
+                ) : null}
             </div>
         )
     }
 
     if (value && typeof value === "object" && !Array.isArray(value)) {
-        const entries = Object.entries(value as Record<string, unknown>)
+        const entries =
+            previewItems?.kind === "object"
+                ? (previewItems.items as [string, unknown][])
+                : Object.entries(value as Record<string, unknown>)
         return (
             <div className="flex flex-col gap-1">
                 {entries.map(([k, v]) => {
@@ -490,10 +576,27 @@ const RenderedValueBlock = memo(function RenderedValueBlock({
                         />
                     )
                 })}
+                {previewItems?.kind === "object" && previewItems.hiddenCount > 0 ? (
+                    <Button size="small" type="link" onClick={() => setRenderFull(true)}>
+                        Show {previewItems.hiddenCount} more keys
+                    </Button>
+                ) : null}
             </div>
         )
     }
 
+    if (shouldPreviewValue) {
+        return (
+            <LargeValuePreview
+                compact
+                value={value}
+                mode="beautified-json"
+                stats={stats}
+                onRenderFull={() => setRenderFull(true)}
+            />
+        )
+    }
+
     return (
         <EditorProvider
             id={keyPrefix}
diff --git a/web/oss/src/components/DrillInView/LargeValuePreview.tsx b/web/oss/src/components/DrillInView/LargeValuePreview.tsx
new file mode 100644
index 0000000000..a9ea952345
--- /dev/null
+++ b/web/oss/src/components/DrillInView/LargeValuePreview.tsx
@@ -0,0 +1,87 @@
+import {useMemo, useState} from "react"
+
+import {CopyIcon} from "@phosphor-icons/react"
+import {Button, Typography} from "antd"
+
+import {copyToClipboard} from "@/oss/lib/helpers/copyToClipboard"
+
+import {
+    formatRenderSize,
+    getRenderStats,
+    previewValueString,
+    stringifyFullValue,
+    type RenderBudgetMode,
+    type RenderStats,
+} from "./renderBudget"
+
+interface LargeValuePreviewProps {
+    value: unknown
+    mode: RenderBudgetMode
+    stats?: RenderStats
+    title?: string
+    onRenderFull?: () => void
+    compact?: boolean
+}
+
+export default function LargeValuePreview({
+    value,
+    mode,
+    stats: statsProp,
+    title = "Large value preview",
+    onRenderFull,
+    compact = false,
+}: LargeValuePreviewProps) {
+    const [isCopying, setIsCopying] = useState(false)
+    const stats = statsProp ?? getRenderStats(value)
+    const preview = useMemo(() => previewValueString(value), [value])
+
+    const handleCopyFull = async () => {
+        setIsCopying(true)
+        try {
+            await copyToClipboard(stringifyFullValue(value))
+        } finally {
+            setIsCopying(false)
+        }
+    }
+
+    const detailParts = [
+        stats.type,
+        formatRenderSize(stats.estimatedChars),
+        stats.arrayLength !== undefined ? `${stats.arrayLength} items` : null,
+        stats.objectKeyCount !== undefined ? `${stats.objectKeyCount} keys` : null,
+        `mode: ${mode}`,
+    ].filter(Boolean)
+
+    return (
+        <div
+            className={`${compact ? "my-1" : "m-4"} flex flex-col gap-3 rounded-md border border-solid border-[rgba(5,23,41,0.08)] bg-white p-3`}
+        >
+            <div className="flex flex-wrap items-center justify-between gap-2">
+                <div className="flex flex-col gap-0.5">
+                    <Typography.Text strong>{title}</Typography.Text>
+                    <Typography.Text type="secondary" className="text-xs">
+                        {detailParts.join(" · ")}
+                    </Typography.Text>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Button
+                        size="small"
+                        icon={<CopyIcon size={13} />}
+                        loading={isCopying}
+                        onClick={handleCopyFull}
+                    >
+                        Copy full
+                    </Button>
+                    {onRenderFull ? (
+                        <Button size="small" onClick={onRenderFull}>
+                            Render full
+                        </Button>
+                    ) : null}
+                </div>
+            </div>
+            <pre className="m-0 max-h-[320px] overflow-auto whitespace-pre-wrap break-words rounded bg-[#F6F8FB] p-2 font-mono text-xs text-[var(--ant-color-text)]">
+                {preview}
+            </pre>
+        </div>
+    )
+}
diff --git a/web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx b/web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx
index 66f37edc6f..94e7cb38a0 100644
--- a/web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx
+++ b/web/oss/src/components/DrillInView/TraceSpanDrillInView.tsx
@@ -47,6 +47,13 @@ import {
 } from "./decodedJsonHelpers"
 import type {DrillInContentProps} from "./DrillInContent"
 import {EntityDrillInView} from "./EntityDrillInView"
+import LargeValuePreview from "./LargeValuePreview"
+import {
+    getRenderStats,
+    previewValueString,
+    shouldUsePreview,
+    type RenderBudgetMode,
+} from "./renderBudget"
 import {getDefaultJsonViewMode} from "./viewModes"
 const ImagePreview = dynamic(() => import("@agenta/ui").then((mod) => mod.ImagePreview), {
     ssr: false,
@@ -309,6 +316,7 @@ export const TraceSpanDrillInView = memo(
         const [searchTerm, setSearchTerm] = useState("")
         const [currentResultIndex, setCurrentResultIndex] = useState(0)
         const [resultCount, setResultCount] = useState(0)
+        const [renderFullModes, setRenderFullModes] = useState<Record<string, boolean>>({})
 
         const isStringValue = typeof sanitizedSpanData === "string"
         const isObjectOrArrayValue =
@@ -318,39 +326,6 @@ export const TraceSpanDrillInView = memo(
             [isStringValue, sanitizedSpanData],
         )
 
-        const jsonOutput = useMemo(
-            () =>
-                isStringValue
-                    ? parsedStructuredString !== null
-                        ? sanitizedSpanData
-                        : (JSON.stringify(sanitizedSpanData) ?? "")
-                    : getStringOrJson(sanitizedSpanData),
-            [isStringValue, parsedStructuredString, sanitizedSpanData],
-        )
-        const yamlOutput = useMemo(() => {
-            const yamlSource = isStringValue ? parsedStructuredString : sanitizedSpanData
-            if (yamlSource === null || yamlSource === undefined) return ""
-            try {
-                return yaml.dump(yamlSource, {lineWidth: 120})
-            } catch {
-                return ""
-            }
-        }, [isStringValue, parsedStructuredString, sanitizedSpanData])
-
-        const textOutput = useMemo(() => {
-            if (typeof sanitizedSpanData === "string") {
-                return parsedStructuredString !== null
-                    ? normalizeEscapedLineBreaks(sanitizedSpanData)
-                    : sanitizedSpanData
-            }
-            return getStringOrJson(sanitizedSpanData)
-        }, [parsedStructuredString, sanitizedSpanData])
-
-        const decodedJsonOutput = useMemo(
-            () => buildDecodedJsonOutput(sanitizedSpanData, parsedStructuredString),
-            [sanitizedSpanData, parsedStructuredString],
-        )
-
         const beautifiedJsonSource = useMemo(() => {
             if (isStringValue) return parsedStructuredString ?? sanitizedSpanData
             return sanitizedSpanData
@@ -391,17 +366,63 @@ export const TraceSpanDrillInView = memo(
 
         const isCodeMode = viewMode === "json" || viewMode === "yaml" || viewMode === "decoded-json"
         const isBeautifiedJson = viewMode === "beautified-json"
+        const activeStatsSource =
+            viewMode === "json" || viewMode === "text" || viewMode === "markdown"
+                ? sanitizedSpanData
+                : beautifiedJsonSource
+        const activeRenderStats = useMemo(
+            () => getRenderStats(activeStatsSource),
+            [activeStatsSource],
+        )
+        const shouldPreviewActiveMode =
+            !renderFullModes[viewMode] &&
+            shouldUsePreview(activeRenderStats, viewMode as RenderBudgetMode)
+
+        const activeOutput = useMemo(() => {
+            if (shouldPreviewActiveMode) return previewValueString(activeStatsSource)
+
+            if (viewMode === "yaml") {
+                const yamlSource = isStringValue ? parsedStructuredString : sanitizedSpanData
+                if (yamlSource === null || yamlSource === undefined) return ""
+                try {
+                    return yaml.dump(yamlSource, {lineWidth: 120})
+                } catch {
+                    return ""
+                }
+            }
+
+            if (viewMode === "json") {
+                return isStringValue
+                    ? parsedStructuredString !== null
+                        ? sanitizedSpanData
+                        : (JSON.stringify(sanitizedSpanData) ?? "")
+                    : getStringOrJson(sanitizedSpanData)
+            }
 
-        const activeOutput =
-            viewMode === "yaml"
-                ? yamlOutput
-                : viewMode === "json"
-                  ? jsonOutput
-                  : viewMode === "decoded-json"
-                    ? decodedJsonOutput
-                    : viewMode === "beautified-json"
-                      ? JSON.stringify(beautifiedJsonSource, null, 2)
-                      : textOutput
+            if (viewMode === "decoded-json") {
+                return buildDecodedJsonOutput(sanitizedSpanData, parsedStructuredString)
+            }
+
+            if (viewMode === "beautified-json") {
+                return JSON.stringify(beautifiedJsonSource, null, 2)
+            }
+
+            if (typeof sanitizedSpanData === "string") {
+                return parsedStructuredString !== null
+                    ? normalizeEscapedLineBreaks(sanitizedSpanData)
+                    : sanitizedSpanData
+            }
+
+            return getStringOrJson(sanitizedSpanData)
+        }, [
+            activeStatsSource,
+            beautifiedJsonSource,
+            isStringValue,
+            parsedStructuredString,
+            sanitizedSpanData,
+            shouldPreviewActiveMode,
+            viewMode,
+        ])
 
         const closeSearch = useCallback(() => {
             setIsSearchOpen(false)
@@ -440,10 +461,14 @@ export const TraceSpanDrillInView = memo(
         }, [activeOutput, closeSearch])
 
         useEffect(() => {
-            if (!isCodeMode) {
+            if (!isCodeMode || shouldPreviewActiveMode) {
                 closeSearch()
             }
-        }, [isCodeMode, closeSearch])
+        }, [isCodeMode, shouldPreviewActiveMode, closeSearch])
+
+        useEffect(() => {
+            setRenderFullModes({})
+        }, [sanitizedSpanData])
 
         const downloadFile = useCallback((url: string) => {
             const link = document.createElement("a")
@@ -478,7 +503,7 @@ export const TraceSpanDrillInView = memo(
                                 className={`${isSearchOpen ? "!bg-[#17324D] !border-[#17324D]" : "text-gray-500"} !px-1 !h-6 text-xs`}
                                 icon={<MagnifyingGlassIcon size={14} />}
                                 onClick={() => setIsSearchOpen((prev) => !prev)}
-                                disabled={!isCodeMode}
+                                disabled={!isCodeMode || shouldPreviewActiveMode}
                             />
                             <Select
                                 size="small"
@@ -537,7 +562,16 @@ export const TraceSpanDrillInView = memo(
                                     />
                                 </div>
                             )}
-                            {isCodeMode ? (
+                            {shouldPreviewActiveMode ? (
+                                <LargeValuePreview
+                                    value={activeStatsSource}
+                                    mode={viewMode as RenderBudgetMode}
+                                    stats={activeRenderStats}
+                                    onRenderFull={() =>
+                                        setRenderFullModes((prev) => ({...prev, [viewMode]: true}))
+                                    }
+                                />
+                            ) : isCodeMode ? (
                                 <DrillInProvider
                                     value={{
                                         enabled: false,
@@ -578,7 +612,7 @@ export const TraceSpanDrillInView = memo(
                                 <div className="mx-1 my-2 rounded-md bg-[#F6F8FB]">
                                     <TextModeViewer
                                         editorId={`trace-span-${textViewerId}`}
-                                        value={textOutput}
+                                        value={activeOutput}
                                         mode={viewMode as "text" | "markdown"}
                                     />
                                 </div>
diff --git a/web/oss/src/components/DrillInView/VIEW_MODES.md b/web/oss/src/components/DrillInView/VIEW_MODES.md
index aea72960b4..b222f730f4 100644
--- a/web/oss/src/components/DrillInView/VIEW_MODES.md
+++ b/web/oss/src/components/DrillInView/VIEW_MODES.md
@@ -107,6 +107,19 @@ Both panels use the same default-selection logic:
 - Otherwise the first available mode wins (in practice `text` for plain
   strings that do not parse as JSON).
 
+## Large value guard
+
+All display targets must respect the shared render budget in
+[renderBudget.ts](./renderBudget.ts). Large strings, objects, arrays, and
+decoded/serialized outputs are previewed first instead of being formatted and
+mounted in full. The user can still explicitly choose `Render full`, and can
+copy the full value from the preview.
+
+This guard is intentionally generic. Do not special-case Gmail, tool calls,
+provider payloads, or any other schema when deciding whether a value is safe to
+render. Budget by value size, key count, item count, and depth so the behavior
+works for arbitrary trace data.
+
 ## Availability matrix
 
 | Source                                              | Available modes                                                           |
diff --git a/web/oss/src/components/DrillInView/renderBudget.ts b/web/oss/src/components/DrillInView/renderBudget.ts
new file mode 100644
index 0000000000..03993cc621
--- /dev/null
+++ b/web/oss/src/components/DrillInView/renderBudget.ts
@@ -0,0 +1,205 @@
+export type RenderBudgetMode =
+    | "json"
+    | "yaml"
+    | "decoded-json"
+    | "beautified-json"
+    | "text"
+    | "markdown"
+
+export type RenderValueType = "string" | "array" | "object" | "null" | "primitive"
+
+export interface RenderStats {
+    type: RenderValueType
+    estimatedChars: number
+    estimateExceeded: boolean
+    arrayLength?: number
+    objectKeyCount?: number
+}
+
+export const MAX_INLINE_STRING_CHARS = 8_000
+export const MAX_AUTO_FORMAT_CHARS = 50_000
+export const MAX_ARRAY_ITEMS = 20
+export const MAX_OBJECT_KEYS = 50
+export const PREVIEW_STRING_CHARS = 4_000
+
+const ESTIMATE_STOP_CHARS = MAX_AUTO_FORMAT_CHARS + MAX_INLINE_STRING_CHARS
+const PREVIEW_STRING_LEAF_CHARS = 800
+const PREVIEW_OBJECT_KEYS = 12
+const PREVIEW_ARRAY_ITEMS = 8
+const PREVIEW_DEPTH = 3
+
+function getValueType(value: unknown): RenderValueType {
+    if (value === null || value === undefined) return "null"
+    if (typeof value === "string") return "string"
+    if (Array.isArray(value)) return "array"
+    if (typeof value === "object") return "object"
+    return "primitive"
+}
+
+function estimateChars(
+    value: unknown,
+    seen: WeakSet<object>,
+    depth = 0,
+): {chars: number; exceeded: boolean} {
+    if (value === null || value === undefined) return {chars: 4, exceeded: false}
+
+    if (typeof value === "string") {
+        const chars = value.length + 2
+        return {chars, exceeded: chars > ESTIMATE_STOP_CHARS}
+    }
+
+    if (typeof value === "number" || typeof value === "boolean") {
+        return {chars: String(value).length, exceeded: false}
+    }
+
+    if (typeof value !== "object") {
+        return {chars: String(value).length, exceeded: false}
+    }
+
+    if (seen.has(value)) return {chars: 12, exceeded: false}
+    seen.add(value)
+
+    if (depth > 6) return {chars: 32, exceeded: false}
+
+    let chars = Array.isArray(value) ? 2 : 2
+    const entries = Array.isArray(value)
+        ? value.map((item, index) => [String(index), item] as const)
+        : Object.entries(value as Record<string, unknown>)
+
+    for (const [key, nested] of entries) {
+        chars += key.length + 4
+        const estimate = estimateChars(nested, seen, depth + 1)
+        chars += estimate.chars + 1
+
+        if (estimate.exceeded || chars > ESTIMATE_STOP_CHARS) {
+            return {chars, exceeded: true}
+        }
+    }
+
+    return {chars, exceeded: false}
+}
+
+export function getRenderStats(value: unknown): RenderStats {
+    const type = getValueType(value)
+    const estimate = estimateChars(value, new WeakSet())
+
+    return {
+        type,
+        estimatedChars: estimate.chars,
+        estimateExceeded: estimate.exceeded,
+        arrayLength: Array.isArray(value) ? value.length : undefined,
+        objectKeyCount:
+            value && typeof value === "object" && !Array.isArray(value)
+                ? Object.keys(value as Record<string, unknown>).length
+                : undefined,
+    }
+}
+
+export function shouldUsePreview(stats: RenderStats, mode: RenderBudgetMode): boolean {
+    if (stats.type === "string" && stats.estimatedChars > MAX_INLINE_STRING_CHARS) return true
+    if ((stats.arrayLength ?? 0) > MAX_ARRAY_ITEMS) return true
+    if ((stats.objectKeyCount ?? 0) > MAX_OBJECT_KEYS) return true
+
+    if (mode === "json" || mode === "yaml" || mode === "decoded-json") {
+        return stats.estimateExceeded || stats.estimatedChars > MAX_AUTO_FORMAT_CHARS
+    }
+
+    return stats.estimateExceeded || stats.estimatedChars > MAX_AUTO_FORMAT_CHARS
+}
+
+export function truncateText(value: string, maxChars = PREVIEW_STRING_CHARS) {
+    if (value.length <= maxChars) {
+        return {text: value, isTruncated: false, hiddenChars: 0}
+    }
+
+    return {
+        text: `${value.slice(0, maxChars)}…`,
+        isTruncated: true,
+        hiddenChars: value.length - maxChars,
+    }
+}
+
+export function getPreviewItems(value: unknown) {
+    if (Array.isArray(value)) {
+        const items = value.slice(0, MAX_ARRAY_ITEMS)
+        return {
+            items,
+            hiddenCount: Math.max(0, value.length - items.length),
+            kind: "array" as const,
+        }
+    }
+
+    if (value && typeof value === "object") {
+        const entries = Object.entries(value as Record<string, unknown>)
+        const items = entries.slice(0, MAX_OBJECT_KEYS)
+        return {
+            items,
+            hiddenCount: Math.max(0, entries.length - items.length),
+            kind: "object" as const,
+        }
+    }
+
+    return {items: [], hiddenCount: 0, kind: "none" as const}
+}
+
+function buildPreviewValue(value: unknown, depth = 0): unknown {
+    if (typeof value === "string") {
+        const truncated = truncateText(value, PREVIEW_STRING_LEAF_CHARS)
+        return truncated.isTruncated
+            ? `${truncated.text} (${truncated.hiddenChars} more chars)`
+            : truncated.text
+    }
+
+    if (!value || typeof value !== "object") return value
+
+    if (depth >= PREVIEW_DEPTH) {
+        if (Array.isArray(value)) return `[Array(${value.length})]`
+        return `[Object(${Object.keys(value as Record<string, unknown>).length})]`
+    }
+
+    if (Array.isArray(value)) {
+        const preview = value
+            .slice(0, PREVIEW_ARRAY_ITEMS)
+            .map((item) => buildPreviewValue(item, depth + 1))
+        if (value.length > PREVIEW_ARRAY_ITEMS) {
+            preview.push(`... ${value.length - PREVIEW_ARRAY_ITEMS} more items`)
+        }
+        return preview
+    }
+
+    const entries = Object.entries(value as Record<string, unknown>)
+    const preview: Record<string, unknown> = {}
+    for (const [key, nested] of entries.slice(0, PREVIEW_OBJECT_KEYS)) {
+        preview[key] = buildPreviewValue(nested, depth + 1)
+    }
+    if (entries.length > PREVIEW_OBJECT_KEYS) {
+        preview.__truncated__ = `${entries.length - PREVIEW_OBJECT_KEYS} more keys`
+    }
+    return preview
+}
+
+export function previewValueString(value: unknown, maxChars = PREVIEW_STRING_CHARS): string {
+    if (typeof value === "string") return truncateText(value, maxChars).text
+
+    try {
+        const preview = JSON.stringify(buildPreviewValue(value), null, 2) ?? ""
+        return truncateText(preview, maxChars).text
+    } catch {
+        return truncateText(String(value), maxChars).text
+    }
+}
+
+export function stringifyFullValue(value: unknown): string {
+    if (typeof value === "string") return value
+    try {
+        return JSON.stringify(value, null, 2) ?? "null"
+    } catch {
+        return String(value)
+    }
+}
+
+export function formatRenderSize(chars: number): string {
+    if (chars < 1_000) return `${chars} chars`
+    if (chars < 1_000_000) return `${Math.round(chars / 100) / 10} KB`
+    return `${Math.round(chars / 100_000) / 10} MB`
+}
diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/AccordionTreePanel.tsx b/web/oss/src/components/SharedDrawers/TraceDrawer/components/AccordionTreePanel.tsx
index 74194dd9ee..e81f321788 100644
--- a/web/oss/src/components/SharedDrawers/TraceDrawer/components/AccordionTreePanel.tsx
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/AccordionTreePanel.tsx
@@ -31,6 +31,13 @@ import {
     normalizeEscapedLineBreaks,
     parseStructuredJson,
 } from "@/oss/components/DrillInView/decodedJsonHelpers"
+import LargeValuePreview from "@/oss/components/DrillInView/LargeValuePreview"
+import {
+    getRenderStats,
+    previewValueString,
+    shouldUsePreview,
+    type RenderBudgetMode,
+} from "@/oss/components/DrillInView/renderBudget"
 import {getDefaultJsonViewMode} from "@/oss/components/DrillInView/viewModes"
 import EnhancedButton from "@/oss/components/EnhancedUIs/Button"
 import {copyToClipboard} from "@/oss/lib/helpers/copyToClipboard"
@@ -272,6 +279,7 @@ const AccordionTreePanel = ({
     const [searchTerm, setSearchTerm] = useState("")
     const [currentResultIndex, setCurrentResultIndex] = useState(0)
     const [resultCount, setResultCount] = useState(0)
+    const [renderFullModes, setRenderFullModes] = useState<Record<string, boolean>>({})
 
     const handleNextMatch = () => {
         if (resultCount === 0) return
@@ -351,6 +359,10 @@ const AccordionTreePanel = ({
         closeSearch()
     }, [sanitizedValue, closeSearch])
 
+    useEffect(() => {
+        setRenderFullModes({})
+    }, [sanitizedValue])
+
     const downloadFile = useCallback((url: string) => {
         const link = document.createElement("a")
         link.href = url
@@ -358,38 +370,6 @@ const AccordionTreePanel = ({
         link.click()
     }, [])
 
-    const jsonOutput = useMemo(() => {
-        if (panelViewMode !== "json") return ""
-
-        if (isStringValue) {
-            if (parsedStructuredString !== null) {
-                return sanitizedValue
-            }
-            return JSON.stringify(sanitizedValue) ?? ""
-        }
-
-        return getStringOrJson(sanitizedValue)
-    }, [panelViewMode, isStringValue, parsedStructuredString, sanitizedValue])
-
-    const yamlOutput = useMemo(() => {
-        if (panelViewMode !== "yaml") return ""
-
-        const yamlSource = isStringValue ? parsedStructuredString : sanitizedValue
-        if (yamlSource === null || yamlSource === undefined) return ""
-
-        try {
-            return yaml.dump(yamlSource, {lineWidth: 120})
-        } catch (error: any) {
-            console.error("Failed to convert value to YAML:", error)
-            return `Error: Failed to convert content to YAML. (${error?.message || "Unknown error"})`
-        }
-    }, [panelViewMode, isStringValue, parsedStructuredString, sanitizedValue])
-
-    const decodedJsonOutput = useMemo(() => {
-        if (panelViewMode !== "decoded-json") return ""
-        return buildDecodedJsonOutput(sanitizedValue, parsedStructuredString)
-    }, [panelViewMode, sanitizedValue, parsedStructuredString])
-
     const beautifiedJsonSource = useMemo(() => {
         if (isStringValue) {
             return parsedStructuredString ?? sanitizedValue
@@ -397,14 +377,20 @@ const AccordionTreePanel = ({
         return sanitizedValue
     }, [isStringValue, parsedStructuredString, sanitizedValue])
 
-    const textOutput = useMemo(() => {
-        if (typeof sanitizedValue === "string") {
-            return parsedStructuredString !== null
-                ? normalizeEscapedLineBreaks(sanitizedValue)
-                : sanitizedValue
+    const activeStatsSource =
+        panelViewMode === "json" || panelViewMode === "text" || panelViewMode === "markdown"
+            ? sanitizedValue
+            : beautifiedJsonSource
+    const activeRenderStats = useMemo(() => getRenderStats(activeStatsSource), [activeStatsSource])
+    const shouldPreviewActiveMode =
+        !renderFullModes[panelViewMode] &&
+        shouldUsePreview(activeRenderStats, panelViewMode as RenderBudgetMode)
+
+    useEffect(() => {
+        if (shouldPreviewActiveMode) {
+            closeSearch()
         }
-        return getStringOrJson(sanitizedValue)
-    }, [parsedStructuredString, sanitizedValue])
+    }, [shouldPreviewActiveMode, closeSearch])
 
     const viewModeMenuItems = useMemo(
         () =>
@@ -416,16 +402,57 @@ const AccordionTreePanel = ({
         [availableViewModes],
     )
 
-    const copyText =
-        panelViewMode === "yaml"
-            ? yamlOutput
-            : panelViewMode === "decoded-json"
-              ? decodedJsonOutput
-              : panelViewMode === "json"
-                ? jsonOutput
-                : panelViewMode === "beautified-json"
-                  ? JSON.stringify(beautifiedJsonSource, null, 2)
-                  : textOutput
+    const activeOutput = useMemo(() => {
+        if (shouldPreviewActiveMode) return previewValueString(activeStatsSource)
+
+        if (panelViewMode === "yaml") {
+            const yamlSource = isStringValue ? parsedStructuredString : sanitizedValue
+            if (yamlSource === null || yamlSource === undefined) return ""
+
+            try {
+                return yaml.dump(yamlSource, {lineWidth: 120})
+            } catch (error: any) {
+                console.error("Failed to convert value to YAML:", error)
+                return `Error: Failed to convert content to YAML. (${error?.message || "Unknown error"})`
+            }
+        }
+
+        if (panelViewMode === "decoded-json") {
+            return buildDecodedJsonOutput(sanitizedValue, parsedStructuredString)
+        }
+
+        if (panelViewMode === "json") {
+            if (isStringValue) {
+                if (parsedStructuredString !== null) {
+                    return sanitizedValue
+                }
+                return JSON.stringify(sanitizedValue) ?? ""
+            }
+
+            return getStringOrJson(sanitizedValue)
+        }
+
+        if (panelViewMode === "beautified-json") {
+            return JSON.stringify(beautifiedJsonSource, null, 2)
+        }
+
+        if (typeof sanitizedValue === "string") {
+            return parsedStructuredString !== null
+                ? normalizeEscapedLineBreaks(sanitizedValue)
+                : sanitizedValue
+        }
+        return getStringOrJson(sanitizedValue)
+    }, [
+        activeStatsSource,
+        beautifiedJsonSource,
+        isStringValue,
+        panelViewMode,
+        parsedStructuredString,
+        sanitizedValue,
+        shouldPreviewActiveMode,
+    ])
+
+    const copyText = activeOutput
 
     const collapse = (
         <div className="relative">
@@ -488,7 +515,19 @@ const AccordionTreePanel = ({
                                     overflowY: "auto",
                                 }}
                             >
-                                {isCodeMode ? (
+                                {shouldPreviewActiveMode ? (
+                                    <LargeValuePreview
+                                        value={activeStatsSource}
+                                        mode={panelViewMode as RenderBudgetMode}
+                                        stats={activeRenderStats}
+                                        onRenderFull={() =>
+                                            setRenderFullModes((prev) => ({
+                                                ...prev,
+                                                [panelViewMode]: true,
+                                            }))
+                                        }
+                                    />
+                                ) : isCodeMode ? (
                                     <DrillInProvider
                                         value={{
                                             enabled: false,
@@ -506,13 +545,7 @@ const AccordionTreePanel = ({
                                             noProvider
                                         >
                                             <LanguageAwareViewer
-                                                initialValue={
-                                                    panelViewMode === "yaml"
-                                                        ? yamlOutput
-                                                        : panelViewMode === "decoded-json"
-                                                          ? decodedJsonOutput
-                                                          : jsonOutput
-                                                }
+                                                initialValue={activeOutput}
                                                 language={panelViewMode}
                                                 searchProps={
                                                     isSearchOpen
@@ -534,7 +567,7 @@ const AccordionTreePanel = ({
                                 ) : (
                                     <TextModeViewer
                                         editorId={`accordion-${textViewerId}`}
-                                        value={textOutput}
+                                        value={activeOutput}
                                         mode={panelViewMode as "text" | "markdown"}
                                     />
                                 )}
@@ -542,7 +575,7 @@ const AccordionTreePanel = ({
                         ),
                         extra: (
                             <Space size={8} onClick={(e) => e.stopPropagation()}>
-                                {enableSearch && isCodeMode && (
+                                {enableSearch && isCodeMode && !shouldPreviewActiveMode && (
                                     <EnhancedButton
                                         icon={<MagnifyingGlassIcon size={14} />}
                                         type={isSearchOpen ? "primary" : "text"}
diff --git a/web/oss/tests/manual/drill-in/test-render-budget.ts b/web/oss/tests/manual/drill-in/test-render-budget.ts
new file mode 100644
index 0000000000..5af3154e1f
--- /dev/null
+++ b/web/oss/tests/manual/drill-in/test-render-budget.ts
@@ -0,0 +1,37 @@
+import {
+    getRenderStats,
+    getPreviewItems,
+    shouldUsePreview,
+    truncateText,
+} from "../../../src/components/DrillInView/renderBudget"
+
+function assert(condition: boolean, message: string) {
+    if (!condition) {
+        throw new Error(message)
+    }
+}
+
+const longText = "x".repeat(10_000)
+const longStats = getRenderStats(longText)
+
+assert(longStats.type === "string", "long text should be detected as a string")
+assert(shouldUsePreview(longStats, "beautified-json"), "long text should use preview")
+assert(truncateText(longText, 100).text.length <= 101, "truncated text should stay bounded")
+assert(truncateText(longText, 100).isTruncated, "long text should be marked truncated")
+
+const manyItems = Array.from({length: 100}, (_, index) => ({index}))
+const itemPreview = getPreviewItems(manyItems)
+
+assert(itemPreview.items.length < manyItems.length, "large arrays should render a bounded subset")
+assert(itemPreview.hiddenCount > 0, "large arrays should report hidden items")
+
+const manyKeys = Object.fromEntries(
+    Array.from({length: 100}, (_, index) => [`key_${index}`, index]),
+)
+const keyPreview = getPreviewItems(manyKeys)
+
+assert(
+    keyPreview.items.length < Object.keys(manyKeys).length,
+    "large objects should render a bounded subset",
+)
+assert(keyPreview.hiddenCount > 0, "large objects should report hidden keys")