ViteHub is still experimental. Expect bugs and breaking changes.
Trace
Render a derived runtime trace run and its timed steps.
Use AgentTrace when the application already called deriveTraceRuns() and wants a compact disclosure for one derived run.
Preview
TraceExample.vue
<script setup lang="ts">
import type { AgentTrace as AgentTraceComponent } from "@vite-hub/ui";
type TraceRun = InstanceType<typeof AgentTraceComponent>["$props"]["run"];
const run: TraceRun = {
durationMs: 2_840,
endTime: "2026-08-23T09:04:12.840Z",
events: [],
id: "run_docs_preview",
startTime: "2026-08-23T09:04:10.000Z",
status: "completed",
steps: [
{
attributes: { agent: "reviewer", provider: "codex" },
durationMs: 320,
endTime: "2026-08-23T09:04:10.320Z",
events: [],
id: "step_prepare",
name: "Prepare Agent invocation",
startTime: "2026-08-23T09:04:10.000Z",
status: "completed",
type: "run",
},
{
attributes: { command: "pnpm test invocation-ui", exitCode: 0 },
durationMs: 2_520,
endTime: "2026-08-23T09:04:12.840Z",
events: [],
id: "step_verify",
name: "Run focused tests",
startTime: "2026-08-23T09:04:10.320Z",
status: "completed",
type: "run",
},
],
};
</script>
<template>
<AgentTrace :run="run" default-open>
<template #title>
Verification run
</template>
</AgentTrace>
</template>
Usage
<AgentTrace v-for="run in runs" :key="run.id" :run="run" :default-open="run.status === 'failed'" />
Props
| Prop | Type | Default | Purpose |
|---|---|---|---|
run | TraceRunView | Derived run status, duration, and steps. | |
defaultOpen | boolean | false | Opens the run disclosure on initial render. |
Use the title slot to replace the run identifier. Use step when a known trace schema deserves a richer presentation than the default step name, duration, and attributes.
Ownership
ViteHub Runtime derives TraceRunView records. The UI component only renders the run it receives. Loading, filtering, authorization, and retention stay in the application.