Invocation Inspector
AgentInvocationInspector presents the configuration captured for one Agent Invocation. Its narrow layout works in a splitter, drawer, or standalone details panel.
<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", metadata: { access: "write", sandbox: "workspace" } },
{ id: "pull-request" },
],
driver: { kind: "provider", model: { id: "gpt-5.6", 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": "The layout fix is tested and ready for review.",
},
name: "agent.message.recorded",
sequence: 1,
timestamp: "2026-08-23T09:00:10.000Z",
trace: { id: "trace_docs_preview" },
type: "run",
},
{
attributes: { "usage.totalTokens": 12_400 },
name: "agent.usage.recorded",
sequence: 2,
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="mx-auto h-[36rem] max-w-md bg-default">
<AgentInvocationInspector :invocation="invocation" class="h-full border-x border-default" />
</div>
</template>
Usage
<AgentInvocationInspector :invocation="record">
<template #actions="{ invocation }">
<UButton icon="i-lucide-x" aria-label="Close details" @click="close(invocation.id)" />
</template>
<template #metadata="{ invocation }">
<DeploymentMetadata :invocation="invocation" />
</template>
</AgentInvocationInspector>
The inspector keeps the outcome visible, summarizes the run, and groups the captured Agent setup below it. Sources and tools stay compact, while Capability metadata and instructions expand in place. Terminal errors appear with the exact invocation status. Identifiers remain hidden until copied.
Captured configuration
Pass the sanitized configuration stored with the invocation:
const invocation = {
...record,
configuration: {
agent: { name: "review", version: "1.0.0" },
capabilities: [{ id: "workspace-shell" }],
driver: { kind: "provider", provider: "codex" },
instructions: [resolvedInstructions],
runtime: { name: "node" },
tools: [{ name: "exec_command" }],
workspace: { mode: "write", name: "review", sources: ["repository"] },
},
};
Do not reconstruct configuration from the current Agent Definition. Dynamic Capabilities, instructions, Workspace bindings, Sources, driver, and runtime may have changed since the invocation ran.
Only include instruction content when the current viewer may inspect it. The component does not fetch missing configuration or authorize access.