[V0_FILE]typescriptreact:file="components/trace-details.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Hash } from "lucide-react" interface TraceDetailsProps { traceId: string spanId: string name: string kind: string startTime: string endTime: string duration: string } export default function TraceDetails({ traceId, spanId, name, kind, startTime, endTime, duration }: TraceDetailsProps) { return ( Trace Information

Trace ID

{traceId}

Span ID

{spanId}

Name

{name}

Kind

{kind}

Start Time

{startTime}

End Time

{endTime}

Duration

{duration}

) } [V0_FILE]typescriptreact:file="components/resource-info.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Server } from "lucide-react" interface ResourceAttribute { key: string value: { stringValue?: string intValue?: number boolValue?: boolean doubleValue?: number } } interface ResourceInfoProps { resource: { attributes: ResourceAttribute[] } } export default function ResourceInfo({ resource }: ResourceInfoProps) { return ( Resource Information

{resource.attributes.map((attr, index) => (

{attr.key}

{attr.value.stringValue || attr.value.intValue?.toString() || attr.value.doubleValue?.toString() || attr.value.boolValue?.toString() || "N/A"}

))}

) } [V0_FILE]typescriptreact:file="components/attributes-list.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Database } from "lucide-react" interface Attribute { key: string value: { stringValue?: string intValue?: number boolValue?: boolean doubleValue?: number } } interface AttributesListProps { attributes: Attribute[] } export default function AttributesList({ attributes }: AttributesListProps) { // Function to determine if the value is JSON const isJsonString = (str: string) => { try { JSON.parse(str) return true } catch (e) { return false } } // Function to format the value for display const formatValue = (attr: Attribute) => { if (attr.value.stringValue) { // If it's a JSON string, parse and format it if (isJsonString(attr.value.stringValue)) { try { const parsed = JSON.parse(attr.value.stringValue) return (

              {JSON.stringify(parsed, null, 2)}

) } catch (e) { return attr.value.stringValue } } // If it's a long string but not JSON (like the story output), truncate it if (attr.value.stringValue.length > 200 && attr.key === "traceloop.entity.output") { return (

Long text content (story output) - view in Story tab

) } return attr.value.stringValue } return ( attr.value.intValue?.toString() || attr.value.doubleValue?.toString() || attr.value.boolValue?.toString() || "N/A" ) } return ( Span Attributes

{attributes.map((attr, index) => (

{attr.key}

{formatValue(attr)}

{index < attributes.length - 1 && }

))}

) } [V0_FILE]typescriptreact:file="components/story-output.tsx" isMerged="true" interface StoryOutputProps { story: string } export default function StoryOutput({ story }: StoryOutputProps) { // Split the story into paragraphs const paragraphs = story.split("\\n\\n") return (

{paragraphs.map((paragraph, index) => (

{paragraph .replace(/\\"/g, '"') .replace(/\\u2019/g, "'") .replace(/\\u2014/g, "—") .replace(/\\n/g, " ")}

))}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, typography: { DEFAULT: { css: { maxWidth: "100%", }, }, }, }, }, plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Card } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { MessageSquare, Bot, Wrench, Brain, Activity } from "lucide-react" import TraceTimeline from "@/components/trace-timeline" import ConversationFlow from "@/components/conversation-flow" import SpanDetails from "@/components/span-details" import PerformanceMetrics from "@/components/performance-metrics" import { parseTraceData } from "@/lib/trace-utils" export default function Home() { // Sample trace data - multiple spans representing an AI agent conversation const rawSpans = [ { name: "execute_tool get_weather", context: { trace_id: "0xaaa19a396366e4ea70346845ae5affab", span_id: "0x3515a6f694d35fdd", trace_state: "[]", }, kind: "SpanKind.INTERNAL", parent_id: "0xedfe0ba5ee4dbe81", start_time: "2025-07-14T16:41:04.902920Z", end_time: "2025-07-14T16:41:04.903889Z", status: { status_code: "OK", }, attributes: { "session.id": "test_session", "user.id": "test_user", "gen_ai.system": "gcp.vertex.agent", "gen_ai.operation.name": "execute_tool", "gen_ai.tool.name": "get_weather", "gen_ai.tool.description": "Retrieves the current weather report for a specified city.\n\nArgs:\n city (str): The name of the city for which to retrieve the weather report.\n\nReturns:\n dict: status and result or error msg.", "gen_ai.tool.call.id": "adk-d9bf60db-468c-4f1e-82b6-acba5fe88f72", "gcp.vertex.agent.tool_call_args": '{"city": "New York"}', "gcp.vertex.agent.event_id": "1c842575-8859-48be-a12c-a4d495442d4f", "gcp.vertex.agent.tool_response": '{"status": "success", "report": "The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit)."}', "gcp.vertex.agent.llm_request": "{}", "gcp.vertex.agent.llm_response": "{}", "tool.name": "get_weather", "tool.description": "Retrieves the current weather report for a specified city.\n\nArgs:\n city (str): The name of the city for which to retrieve the weather report.\n\nReturns:\n dict: status and result or error msg.", "tool.parameters": '{"city": "New York"}', "input.value": '{"city": "New York"}', "input.mime_type": "application/json", "output.value": '{"id":"adk-d9bf60db-468c-4f1e-82b6-acba5fe88f72","name":"get_weather","response":{"status":"success","report":"The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit)."}}', "output.mime_type": "application/json", "openinference.span.kind": "TOOL", }, events: [], links: [], resource: { attributes: { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.34.1", "service.name": "unknown_service", }, schema_url: "", }, }, { name: "call_llm", context: { trace_id: "0xaaa19a396366e4ea70346845ae5affab", span_id: "0xedfe0ba5ee4dbe81", trace_state: "[]", }, kind: "SpanKind.INTERNAL", parent_id: "0x29db6cfed016e806", start_time: "2025-07-14T16:41:04.197077Z", end_time: "2025-07-14T16:41:04.904365Z", status: { status_code: "OK", }, attributes: { "session.id": "test_session", "user.id": "test_user", "gen_ai.system": "gcp.vertex.agent", "gen_ai.request.model": "gemini-2.0-flash-exp", "gcp.vertex.agent.invocation_id": "e-3d0e0542-0fc7-4a7d-b398-6bd9fdf6ef05", "gcp.vertex.agent.session_id": "test_session", "gcp.vertex.agent.event_id": "4e25d859-ceb2-4f9c-83cc-4e08070b5202", "gcp.vertex.agent.llm_request": '{"model": "gemini-2.0-flash-exp", "config": {"system_instruction": "You must use the available tools to find an answer.\\n\\nYou are an agent. Your internal name is \\"test_agent\\".\\n\\n The description about you is \\"Agent to answer questions using tools.\\"", "tools": [{"function_declarations": [{"description": "Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ", "name": "get_weather", "parameters": {"properties": {"city": {"type": "STRING"}}, "required": ["city"], "type": "OBJECT"}}]}]}, "contents": [{"parts": [{"text": "What is the weather in New York?"}], "role": "user"}]}', "gcp.vertex.agent.llm_response": '{"content":{"parts":[{"function_call":{"args":{"city":"New York"},"name":"get_weather"}}],"role":"model"},"usage_metadata":{"candidates_token_count":6,"candidates_tokens_details":[{"modality":"TEXT","token_count":6}],"prompt_token_count":106,"prompt_tokens_details":[{"modality":"TEXT","token_count":106}],"total_token_count":112}}', "gen_ai.usage.input_tokens": 106, "gen_ai.usage.output_tokens": 112, "llm.provider": "google", "input.value": '{"model": "gemini-2.0-flash-exp", "config": {"system_instruction": "You must use the available tools to find an answer.\\n\\nYou are an agent. Your internal name is \\"test_agent\\".\\n\\n The description about you is \\"Agent to answer questions using tools.\\"", "tools": [{"function_declarations": [{"description": "Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ", "name": "get_weather", "parameters": {"properties": {"city": {"type": "STRING"}}, "required": ["city"], "type": "OBJECT"}}]}]}, "contents": [{"parts": [{"text": "What is the weather in New York?"}], "role": "user"}]}', "input.mime_type": "application/json", "llm.tools.0.tool.json_schema": '{"description":"Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ","name":"get_weather","parameters":{"properties":{"city":{"type":"STRING"}},"required":["city"],"type":"OBJECT"}}', "llm.model_name": "gemini-2.0-flash-exp", "llm.invocation_parameters": '{"system_instruction":"You must use the available tools to find an answer.\\n\\nYou are an agent. Your internal name is \\"test_agent\\".\\n\\n The description about you is \\"Agent to answer questions using tools.\\"","tools":[{"function_declarations":[{"description":"Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ","name":"get_weather","parameters":{"properties":{"city":{"type":"STRING"}},"required":["city"],"type":"OBJECT"}}]}]}', "llm.input_messages.0.message.role": "system", "llm.input_messages.0.message.content": 'You must use the available tools to find an answer.\n\nYou are an agent. Your internal name is "test_agent".\n\n The description about you is "Agent to answer questions using tools."', "llm.input_messages.1.message.role": "user", "llm.input_messages.1.message.contents.0.message_content.text": "What is the weather in New York?", "llm.input_messages.1.message.contents.0.message_content.type": "text", "output.value": '{"content":{"parts":[{"function_call":{"args":{"city":"New York"},"name":"get_weather"}}],"role":"model"},"usage_metadata":{"candidates_token_count":6,"candidates_tokens_details":[{"modality":"TEXT","token_count":6}],"prompt_token_count":106,"prompt_tokens_details":[{"modality":"TEXT","token_count":106}],"total_token_count":112}}', "output.mime_type": "application/json", "llm.token_count.total": 112, "llm.token_count.prompt": 106, "llm.token_count.completion": 6, "llm.output_messages.0.message.role": "model", "llm.output_messages.0.message.tool_calls.0.tool_call.function.name": "get_weather", "llm.output_messages.0.message.tool_calls.0.tool_call.function.arguments": '{"city": "New York"}', "openinference.span.kind": "LLM", }, events: [], links: [], resource: { attributes: { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.34.1", "service.name": "unknown_service", }, schema_url: "", }, }, { name: "call_llm", context: { trace_id: "0xaaa19a396366e4ea70346845ae5affab", span_id: "0xa134eb4ab89f4ded", trace_state: "[]", }, kind: "SpanKind.INTERNAL", parent_id: "0x29db6cfed016e806", start_time: "2025-07-14T16:41:04.906974Z", end_time: "2025-07-14T16:41:05.573682Z", status: { status_code: "OK", }, attributes: { "session.id": "test_session", "user.id": "test_user", "gen_ai.system": "gcp.vertex.agent", "gen_ai.request.model": "gemini-2.0-flash-exp", "gcp.vertex.agent.invocation_id": "e-3d0e0542-0fc7-4a7d-b398-6bd9fdf6ef05", "gcp.vertex.agent.session_id": "test_session", "gcp.vertex.agent.event_id": "9e478e08-16e6-453c-8f2b-a50224489192", "gcp.vertex.agent.llm_request": '{"model": "gemini-2.0-flash-exp", "config": {"system_instruction": "You must use the available tools to find an answer.\\n\\nYou are an agent. Your internal name is \\"test_agent\\".\\n\\n The description about you is \\"Agent to answer questions using tools.\\"", "tools": [{"function_declarations": [{"description": "Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ", "name": "get_weather", "parameters": {"properties": {"city": {"type": "STRING"}}, "required": ["city"], "type": "OBJECT"}}]}]}, "contents": [{"parts": [{"text": "What is the weather in New York?"}], "role": "user"}, {"parts": [{"function_call": {"args": {"city": "New York"}, "name": "get_weather"}}], "role": "model"}, {"parts": [{"function_response": {"name": "get_weather", "response": {"status": "success", "report": "The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit)."}}}], "role": "user"}]}', "gcp.vertex.agent.llm_response": '{"content":{"parts":[{"text":"The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit).\\n"}],"role":"model"},"usage_metadata":{"candidates_token_count":23,"candidates_tokens_details":[{"modality":"TEXT","token_count":23}],"prompt_token_count":140,"prompt_tokens_details":[{"modality":"TEXT","token_count":140}],"total_token_count":163}}', "gen_ai.usage.input_tokens": 140, "gen_ai.usage.output_tokens": 163, "llm.provider": "google", "input.value": '{"model": "gemini-2.0-flash-exp", "config": {"system_instruction": "You must use the available tools to find an answer.\\n\\nYou are an agent. Your internal name is \\"test_agent\\".\\n\\n The description about you is \\"Agent to answer questions using tools.\\"", "tools": [{"function_declarations": [{"description": "Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ", "name": "get_weather", "parameters": {"properties": {"city": {"type": "STRING"}}, "required": ["city"], "type": "OBJECT"}}]}]}, "contents": [{"parts": [{"text": "What is the weather in New York?"}], "role": "user"}, {"parts": [{"function_call": {"args": {"city": "New York"}, "name": "get_weather"}}], "role": "model"}, {"parts": [{"function_response": {"name": "get_weather", "response": {"status": "success", "report": "The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit)."}}}], "role": "user"}]}', "input.mime_type": "application/json", "llm.tools.0.tool.json_schema": '{"description":"Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ","name":"get_weather","parameters":{"properties":{"city":{"type":"STRING"}},"required":["city"],"type":"OBJECT"}}', "llm.model_name": "gemini-2.0-flash-exp", "llm.invocation_parameters": '{"system_instruction":"You must use the available tools to find an answer.\\n\\nYou are an agent. Your internal name is \\"test_agent\\".\\n\\n The description about you is \\"Agent to answer questions using tools.\\"","tools":[{"function_declarations":[{"description":"Retrieves the current weather report for a specified city.\\n\\n Args:\\n city (str): The name of the city for which to retrieve the weather report.\\n\\n Returns:\\n dict: status and result or error msg.\\n ","name":"get_weather","parameters":{"properties":{"city":{"type":"STRING"}},"required":["city"],"type":"OBJECT"}}]}]}', "llm.input_messages.0.message.role": "system", "llm.input_messages.0.message.content": 'You must use the available tools to find an answer.\n\nYou are an agent. Your internal name is "test_agent".\n\n The description about you is "Agent to answer questions using tools."', "llm.input_messages.1.message.role": "user", "llm.input_messages.1.message.contents.0.message_content.text": "What is the weather in New York?", "llm.input_messages.1.message.contents.0.message_content.type": "text", "llm.input_messages.2.message.role": "model", "llm.input_messages.2.message.tool_calls.0.tool_call.function.name": "get_weather", "llm.input_messages.2.message.tool_calls.0.tool_call.function.arguments": '{"city": "New York"}', "llm.input_messages.3.message.role": "tool", "llm.input_messages.3.message.name": "get_weather", "llm.input_messages.3.message.content": '{"status": "success", "report": "The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit)."}', "output.value": '{"content":{"parts":[{"text":"The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit).\\n"}],"role":"model"},"usage_metadata":{"candidates_token_count":23,"candidates_tokens_details":[{"modality":"TEXT","token_count":23}],"prompt_token_count":140,"prompt_tokens_details":[{"modality":"TEXT","token_count":140}],"total_token_count":163}}', "output.mime_type": "application/json", "llm.token_count.total": 163, "llm.token_count.prompt": 140, "llm.token_count.completion": 23, "llm.output_messages.0.message.role": "model", "llm.output_messages.0.message.contents.0.message_content.text": "The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit).\n", "llm.output_messages.0.message.contents.0.message_content.type": "text", "openinference.span.kind": "LLM", }, events: [], links: [], resource: { attributes: { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.34.1", "service.name": "unknown_service", }, schema_url: "", }, }, { name: "agent_run [test_agent]", context: { trace_id: "0xaaa19a396366e4ea70346845ae5affab", span_id: "0x29db6cfed016e806", trace_state: "[]", }, kind: "SpanKind.INTERNAL", parent_id: "0x3f9d81c46a442d8c", start_time: "2025-07-14T16:41:04.196767Z", end_time: "2025-07-14T16:41:05.576746Z", status: { status_code: "OK", }, attributes: { "session.id": "test_session", "user.id": "test_user", "output.value": '{"content":{"parts":[{"text":"The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit).\\n"}],"role":"model"},"usage_metadata":{"candidates_token_count":23,"candidates_tokens_details":[{"modality":"TEXT","token_count":23}],"prompt_token_count":140,"prompt_tokens_details":[{"modality":"TEXT","token_count":140}],"total_token_count":163},"invocation_id":"e-3d0e0542-0fc7-4a7d-b398-6bd9fdf6ef05","author":"test_agent","actions":{"state_delta":{},"artifact_delta":{},"requested_auth_configs":{}},"id":"9e478e08-16e6-453c-8f2b-a50224489192","timestamp":1752511264.906881}', "output.mime_type": "application/json", "openinference.span.kind": "AGENT", }, events: [], links: [], resource: { attributes: { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.34.1", "service.name": "unknown_service", }, schema_url: "", }, }, { name: "invocation [test_instrumentation]", context: { trace_id: "0xaaa19a396366e4ea70346845ae5affab", span_id: "0x3f9d81c46a442d8c", trace_state: "[]", }, kind: "SpanKind.INTERNAL", parent_id: null, start_time: "2025-07-14T16:41:04.196619Z", end_time: "2025-07-14T16:41:05.577107Z", status: { status_code: "OK", }, attributes: { "llm.prompt_template.template": "asdf", "llm.prompt_template.version": "v1.0", "llm.prompt_template.variables": '{"foo": "bar"}', "input.value": '{"user_id": "test_user", "session_id": "test_session", "new_message": "{\\"parts\\": [{\\"video_metadata\\": null, \\"thought\\": null, \\"inline_data\\": null, \\"file_data\\": null, \\"thought_signature\\": null, \\"code_execution_result\\": null, \\"executable_code\\": null, \\"function_call\\": null, \\"function_response\\": null, \\"text\\": \\"What is the weather in New York?\\"}], \\"role\\": \\"user\\"}", "run_config": "{\\"speech_config\\": null, \\"response_modalities\\": null, \\"save_input_blobs_as_artifacts\\": false, \\"support_cfc\\": false, \\"streaming_mode\\": \\"StreamingMode.NONE\\", \\"output_audio_transcription\\": null, \\"input_audio_transcription\\": null, \\"realtime_input_config\\": null, \\"enable_affective_dialog\\": null, \\"proactivity\\": null, \\"max_llm_calls\\": 500}"}', "input.mime_type": "application/json", "user.id": "test_user", "session.id": "test_session", "output.value": '{"content":{"parts":[{"text":"The weather in New York is sunny with a temperature of 25 degrees Celsius (77 degrees Fahrenheit).\\n"}],"role":"model"},"usage_metadata":{"candidates_token_count":23,"candidates_tokens_details":[{"modality":"TEXT","token_count":23}],"prompt_token_count":140,"prompt_tokens_details":[{"modality":"TEXT","token_count":140}],"total_token_count":163},"invocation_id":"e-3d0e0542-0fc7-4a7d-b398-6bd9fdf6ef05","author":"test_agent","actions":{"state_delta":{},"artifact_delta":{},"requested_auth_configs":{}},"id":"9e478e08-16e6-453c-8f2b-a50224489192","timestamp":1752511264.906881}', "output.mime_type": "application/json", "openinference.span.kind": "CHAIN", }, events: [], links: [], resource: { attributes: { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.34.1", "service.name": "unknown_service", }, schema_url: "", }, }, ] const traceData = parseTraceData(rawSpans) return (

AI Agent Trace Viewer

Trace ID: {traceData.traceId.slice(-8)} {traceData.totalDuration} {traceData.spans.length} spans

Conversation Timeline Performance Spans Raw Data

{traceData.spans.map((span) => ( ))}

Raw Trace Data

                {JSON.stringify(rawSpans, null, 2)}

) } [V0_FILE]typescriptreact:file="components/conversation-flow.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { User, Bot, Wrench, MessageSquare } from "lucide-react" import type { ParsedSpan } from "@/lib/trace-utils" interface ConversationFlowProps { spans: ParsedSpan[] } export default function ConversationFlow({ spans }: ConversationFlowProps) { // Extract the conversation flow const userQuestion = "What is the weather in New York?" const toolCall = spans.find((s) => s.spanKind === "TOOL") const finalResponse = spans .filter((s) => s.spanKind === "LLM") .find((s) => s.attributes["llm.output_messages.0.message.contents.0.message_content.text"]) const weatherResponse = toolCall?.attributes["gcp.vertex.agent.tool_response"] let weatherData = null if (weatherResponse) { try { weatherData = JSON.parse(weatherResponse) } catch (e) { // ignore } } const finalText = finalResponse?.attributes["llm.output_messages.0.message.contents.0.message_content.text"] return ( Conversation Flow {/* User Question */}

User Question

{userQuestion}

{/* Agent Tool Decision */}

Agent (LLM) Tool Decision

Decided to use the get_weather tool for New York

{/* Tool Execution */}

Tool: get_weather Execution {toolCall?.duration || "N/A"}

Input:


                  {JSON.stringify({ city: "New York" })}

{weatherData && (

Output:

Status: {weatherData.status}
Report: {weatherData.report}

)}

{/* Final Response */}

Agent (LLM) Final Response

{finalText?.trim() || "Response generated successfully"}

) } [V0_FILE]typescriptreact:file="components/trace-timeline.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Clock } from "lucide-react" import type { ParsedSpan } from "@/lib/trace-utils" interface TraceTimelineProps { spans: ParsedSpan[] } export default function TraceTimeline({ spans }: TraceTimelineProps) { // Sort spans by start time const sortedSpans = [...spans].sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()) // Calculate the total trace duration and start time const traceStart = new Date(sortedSpans[0]?.startTime || 0).getTime() const traceEnd = Math.max(...sortedSpans.map((s) => new Date(s.endTime).getTime())) const totalDuration = traceEnd - traceStart const getSpanColor = (spanKind: string) => { switch (spanKind) { case "CHAIN": return "bg-blue-500" case "AGENT": return "bg-purple-500" case "LLM": return "bg-orange-500" case "TOOL": return "bg-green-500" default: return "bg-gray-500" } } const getSpanPosition = (span: ParsedSpan) => { const spanStart = new Date(span.startTime).getTime() const spanEnd = new Date(span.endTime).getTime() const left = ((spanStart - traceStart) / totalDuration) * 100 const width = ((spanEnd - spanStart) / totalDuration) * 100 return { left: `${left}%`, width: `${Math.max(width, 2)}%` } } return ( Execution Timeline

{sortedSpans.map((span, index) => { const position = getSpanPosition(span) return (

{span.spanKind} {span.name}

{span.duration}

{span.name}

) })}

Timeline Legend

Chain

Agent

LLM

Tool

) } [V0_FILE]typescriptreact:file="components/performance-metrics.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { BarChart3, Zap, Coins } from "lucide-react" import type { ParsedSpan } from "@/lib/trace-utils" interface PerformanceMetricsProps { spans: ParsedSpan[] } export default function PerformanceMetrics({ spans }: PerformanceMetricsProps) { // Calculate metrics const llmSpans = spans.filter((s) => s.spanKind === "LLM") const toolSpans = spans.filter((s) => s.spanKind === "TOOL") const totalTokens = llmSpans.reduce((sum, span) => { const total = Number.parseInt(span.attributes["llm.token_count.total"] || "0") return sum + total }, 0) const inputTokens = llmSpans.reduce((sum, span) => { const input = Number.parseInt(span.attributes["llm.token_count.prompt"] || "0") return sum + input }, 0) const outputTokens = llmSpans.reduce((sum, span) => { const output = Number.parseInt(span.attributes["llm.token_count.completion"] || "0") return sum + output }, 0) const totalDurationMs = spans.reduce((sum, span) => { const duration = Number.parseFloat(span.durationMs || "0") return sum + duration }, 0) const llmDurationMs = llmSpans.reduce((sum, span) => { const duration = Number.parseFloat(span.durationMs || "0") return sum + duration }, 0) const toolDurationMs = toolSpans.reduce((sum, span) => { const duration = Number.parseFloat(span.durationMs || "0") return sum + duration }, 0) return (

{/* Token Usage */} Token Usage

{totalTokens} Total

Input: {inputTokens}

Output: {outputTokens}

{/* Performance */} Performance

{totalDurationMs.toFixed(0)}ms Total

LLM: {llmDurationMs.toFixed(0)}ms

Tools: {toolDurationMs.toFixed(0)}ms

{/* Span Breakdown */} Span Breakdown

{spans.length} Total

LLM Calls: {llmSpans.length}

Tool Calls: {toolSpans.length}

{/* Model Information */} Model & Configuration

Model

{llmSpans[0]?.attributes["llm.model_name"] || llmSpans[0]?.attributes["gen_ai.request.model"] || "N/A"}

Provider

{llmSpans[0]?.attributes["llm.provider"] || "N/A"}

System

{llmSpans[0]?.attributes["gen_ai.system"] || "N/A"}

Session ID

{spans[0]?.attributes["session.id"] || "N/A"}

User ID

{spans[0]?.attributes["user.id"] || "N/A"}

Tools Available

{toolSpans.map((s) => s.attributes["tool.name"]).join(", ") || "None"}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Format nanosecond timestamp to human-readable date and time export function formatNanoToTime(nanoTimestamp: string): string { const timestamp = BigInt(nanoTimestamp) const milliseconds = Number(timestamp / BigInt(1000000)) const date = new Date(milliseconds) return date.toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", millisecond: "3-digit", }) } // Format duration in nanoseconds to human-readable format export function formatDuration(nanoseconds: number): string { if (nanoseconds < 1000) { return `${nanoseconds}ns` } else if (nanoseconds < 1000000) { return `${(nanoseconds / 1000).toFixed(2)}µs` } else if (nanoseconds < 1000000000) { return `${(nanoseconds / 1000000).toFixed(2)}ms` } else { return `${(nanoseconds / 1000000000).toFixed(2)}s` } } [V0_FILE]typescriptreact:file="components/span-details.tsx" isEdit="true" isQuickEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { ChevronDown, ChevronRight } from "lucide-react" import { useState } from "react" import type { ParsedSpan } from "@/lib/trace-utils" interface SpanDetailsProps { span: ParsedSpan } export default function SpanDetails({ span }: SpanDetailsProps) { const [isOpen, setIsOpen] = useState(false) const getSpanIcon = (spanKind: string) => { switch (spanKind) { case "CHAIN": return "🔗" case "AGENT": return "🤖" case "LLM": return "🧠" case "TOOL": return "🔧" default: return "📋" } } const formatAttributeValue = (key: string, value: any) => { // Convert everything to a string first const valueStr = typeof value === "string" ? value : JSON.stringify(value, null, 2) // Detect JSON-like strings for pretty printing if (valueStr.trim().startsWith("{") || valueStr.trim().startsWith("[")) { try { const parsed = JSON.parse(valueStr) return (

            {JSON.stringify(parsed, null, 2)}

) } catch { /* fall through and show the raw string */ } } // Truncate very long strings if (valueStr.length > 200) { return (

{valueStr.slice(0, 200)}...

Show full value

{valueStr}

) } return

{valueStr}

} return (

{getSpanIcon(span.spanKind)} {span.name} {span.spanKind}

{span.duration} {isOpen ? : }

{/* Basic Info */}

Span ID

{span.spanId}

Parent ID

{span.parentId || "None (root)"}

Start Time

{new Date(span.startTime).toLocaleString()}

End Time

{new Date(span.endTime).toLocaleString()}

{/* Attributes */}

Attributes

{Object.entries(span.attributes).map(([key, value]) => (

{key}

{formatAttributeValue(key, value)}

))}

) } [V0_FILE]typescriptreact:file="lib/trace-utils.ts" isEdit="true" isQuickEdit="true" export interface ParsedSpan { name: string spanId: string traceId: string parentId: string | null startTime: string endTime: string duration: string durationMs: string spanKind: string status: string attributes: Record } export interface ParsedTraceData { traceId: string spans: ParsedSpan[] totalDuration: string } export function parseTraceData(rawSpans: any[]): ParsedTraceData { const spans: ParsedSpan[] = rawSpans.map((span) => { const startTime = new Date(span.start_time) const endTime = new Date(span.end_time) const durationMs = endTime.getTime() - startTime.getTime() return { name: span.name, spanId: span.context.span_id, traceId: span.context.trace_id, parentId: span.parent_id, startTime: span.start_time, endTime: span.end_time, duration: formatDuration(durationMs), durationMs: durationMs.toString(), spanKind: span.attributes["openinference.span.kind"] || "UNKNOWN", status: span.status.status_code, attributes: span.attributes || {}, } }) // Calculate total duration const sortedSpans = [...spans].sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()) const traceStart = new Date(sortedSpans[0]?.startTime || 0).getTime() const traceEnd = Math.max(...spans.map((s) => new Date(s.endTime).getTime())) const totalDurationMs = traceEnd - traceStart return { traceId: spans[0]?.traceId || "", spans, totalDuration: formatDuration(totalDurationMs), } } function formatDuration(milliseconds: number): string { if (milliseconds < 1) { return `${(milliseconds * 1000).toFixed(0)}µs` } else if (milliseconds < 1000) { return `${milliseconds.toFixed(0)}ms` } else { return `${(milliseconds / 1000).toFixed(2)}s` } }