Invocation
AgentInvocation turns append-only observations into a coding-session thread. Assistant prose stays unlabelled, user prompts remain visually distinct, and commands, reasoning, tool activity, and file changes expand in place.
<script setup lang="ts">
import type { AgentInvocationView } from "@vite-hub/ui";
const invocation: AgentInvocationView = {
agentName: "reviewer",
annotations: {
"github.pullRequest": 1011,
"github.repository": "vite-hub/vitehub",
},
configuration: {
agent: { name: "reviewer", version: "1.0.0" },
capabilities: [{ id: "workspace-shell" }, { id: "pull-request" }],
driver: { kind: "provider", provider: "codex" },
instructions: ["Fix the reported issue, verify it, and update the pull request."],
runtime: { name: "node" },
tools: [{ name: "exec_command" }, { name: "apply_patch" }],
workspace: { mode: "write", name: "vitehub", sources: ["repository"] },
},
completedAt: "2026-08-23T09:04:12.000Z",
createdAt: "2026-08-23T09:00:00.000Z",
id: "ainv_docs_preview",
observations: [
{
attributes: {
"message.role": "assistant",
"result.text": "I found the fixed-height virtual row and updated its offsets.",
},
name: "agent.message.recorded",
sequence: 1,
timestamp: "2026-08-23T09:00:10.000Z",
trace: { id: "trace_docs_preview" },
type: "run",
},
{
attributes: {
"tool.id": "tool-1",
"tool.name": "Ran command",
"tool.output": {
item: {
aggregatedOutput: "10 tests passed\n",
command: "pnpm test invocation-ui",
cwd: "/workspace/vitehub",
exitCode: 0,
},
},
},
name: "agent.tool.finish",
sequence: 2,
timestamp: "2026-08-23T09:03:30.000Z",
trace: { id: "trace_docs_preview" },
type: "run",
},
{
attributes: { "usage.totalTokens": 12_400 },
name: "agent.usage.recorded",
sequence: 3,
timestamp: "2026-08-23T09:04:00.000Z",
trace: { id: "trace_docs_preview" },
type: "run",
},
],
startedAt: "2026-08-23T09:00:00.000Z",
status: "completed",
title: "Fix invocation list overflow",
traceId: "trace_docs_preview",
updatedAt: "2026-08-23T09:04:12.000Z",
};
</script>
<template>
<div class="h-[34rem] min-w-0 bg-default">
<AgentInvocation :invocation="invocation" class="h-full" />
</div>
</template>
Usage
<AgentInvocation :invocation="record" @inspect="openInspector($event)">
<template #actions>
<InvocationActions :invocation="record" />
</template>
</AgentInvocation>
Set header to false when the host already renders repository and session navigation above the thread.
Props and events
| Contract | Type | Purpose |
|---|---|---|
invocation | AgentInvocationView | Authorized invocation state and observations. |
header | boolean, default true | Shows the project and session breadcrumb. |
inspect | 'agent' | 'workspace' | Requests host-owned inspection for a selected target. |
The title, actions, and footer slots add host controls without changing the transcript renderer.
Trace content
Rich replay requires a trace log created with { content: "content" }. The default metadata-only policy records activity milestones but strips prompts, message text, tool input, and tool output.
Enable full-content traces only when the store and current viewer may retain and inspect that session content. Agent Invocation journals bound each content string to 64 KiB, each metadata string to 512 characters, collections to 32 items, nesting to four levels, and observations to 256 per invocation.
Data ownership
The component receives already-authorized data. The application owns loading, polling, realtime updates, replay policy, and authorization.