64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 66:T1af0,'use client'; /** * @file structured-output-viewer.tsx * @description A result panel for `useGenerateObject`. Pretty-prints the * extracted JSON in a scrollable block, pairs it with an independently-usable * `InferenceStats` footer (token count, wall-clock duration, attempt/retry * count), and offers a navigable typed `SchemaTree` view alongside the value so * output can be inspected both as data and as its schema shape. Extends the * catalog `Response`. Data source: `useGenerateObject`. */ import * as React from 'react'; import { cn } from '@/registry/localmode/lib/utils'; import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@/registry/localmode/ui/tabs'; /** Generation usage (mirrors `@localmode/core` `GenerationUsage`). */ export interface InferenceUsage { inputTokens?: number; outputTokens?: number; totalTokens?: number; } /** Props for {@link InferenceStats}. */ export interface InferenceStatsProps extends React.ComponentProps<'div'> { /** Token usage. */ usage?: InferenceUsage; /** Wall-clock duration in milliseconds. */ durationMs?: number; /** Number of attempts/retries the generation took. */ attempts?: number; } /** Format a millisecond duration compactly. */ function fmtDuration(ms: number) { if (ms < 1000) return `${Math.round(ms)}ms`; return `${(ms / 1000).toFixed(1)}s`; } /** * A compact inference-stats footer. Independently usable beneath any generation * result (same usage shape as `useGenerateText`). */ export function InferenceStats({ usage, durationMs, attempts, className, ...props }: InferenceStatsProps) { const tokens = usage?.totalTokens ?? usage?.outputTokens; const tps = tokens != null && durationMs && durationMs > 0 ? (tokens / (durationMs / 1000)).toFixed(1) : null; return (

{tokens != null && ( {tokens} tokens )} {durationMs != null && ( {fmtDuration(durationMs)} )} {tps != null && {tps} tok/s} {attempts != null && ( {attempts} {attempts === 1 ? 'attempt' : 'attempts'} )}

); } /** Derive a coarse JSON type name for the schema tree. */ function typeName(value: unknown): string { if (value === null) return 'null'; if (Array.isArray(value)) return 'array'; return typeof value; } /** Props for {@link SchemaTree}. */ export interface SchemaTreeProps { /** The value whose shape is rendered as a typed tree. */ value: unknown; /** Field name (internal/recursive). */ name?: string; /** Nesting depth (internal/recursive). */ depth?: number; } /** A collapsible typed schema tree derived from the value's shape. */ export function SchemaTree({ value, name, depth = 0 }: SchemaTreeProps) { const [open, setOpen] = React.useState(depth < 2); const t = typeName(value); const isContainer = t === 'object' || t === 'array'; const entries: [string, unknown][] = isContainer ? Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value as Record) : []; return (

0 ? 12 : 0 }} >

{isContainer && ( )} {!isContainer && } {name != null && {name}} {name != null && :} {t} {isContainer && ( {Array.isArray(value) ? `[${entries.length}]` : `{${entries.length}}`} )}

{isContainer && open && (

{entries.map(([k, v]) => ( ))}

)}

); } /** Props for {@link StructuredOutputViewer}. */ export interface StructuredOutputViewerProps extends React.ComponentProps<'div'> { /** The generated object (from `useGenerateObject`). */ object: unknown; /** Token usage to surface in the footer. */ usage?: InferenceUsage; /** Wall-clock duration in milliseconds. */ durationMs?: number; /** Number of attempts/retries. */ attempts?: number; } /** * Structured-output panel with JSON + schema-tree tabs and an inference footer. * * @example * ```tsx * const { data } = useGenerateObject({ model, schema }); * * ``` */ export function StructuredOutputViewer({ object, usage, durationMs, attempts, className, ...props }: StructuredOutputViewerProps) { const json = React.useMemo(() => { try { return JSON.stringify(object, null, 2); } catch { return String(object); } }, [object]); return (

JSON Schema

            {json}

{(usage || durationMs != null || attempts != null) && ( )}

); } export default StructuredOutputViewer; 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","tabs"]}]]}],null]}],["$","$L65",null,{"files":[{"path":"registry/localmode/conversation/structured-output-viewer/structured-output-viewer.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]