@cat-factory/app 0.29.1 → 0.30.1

package/app/components/board/BoardCanvas.vue

@@ -188,7 +188,13 @@ async function onDrop(event: DragEvent) {
 </script>
 
 <template>
-  <div ref="boardEl" class="relative h-full w-full" @drop="onDrop" @dragover="onDragOver">
+  <div
+    ref="boardEl"
+    data-testid="board-canvas"
+    class="relative h-full w-full"
+    @drop="onDrop"
+    @dragover="onDragOver"
+  >
     <VueFlow
       :id="BOARD_FLOW_ID"
       :nodes="nodes"

package/app/components/board/nodes/TaskCard.vue

@@ -173,6 +173,8 @@ function selectTask() {
   <div
     v-if="task && statusMeta"
     :data-block-id="task.id"
+    :data-status="task.status"
+    data-testid="task-card"
     class="nodrag w-full cursor-pointer rounded-lg border bg-slate-950/70 p-2 text-left transition"
     :class="[
       selected ? 'border-white' : 'border-slate-700 hover:border-slate-500',
@@ -273,6 +275,7 @@ function selectTask() {
         color="warning"
         variant="soft"
         size="xs"
+        data-testid="task-resolve"
         :icon="attention.icon"
         @click.stop="attention.open()"
       >

package/app/components/documents/DocumentImportModal.vue

@@ -17,6 +17,7 @@ const open = computed({
     if (!v) ui.closeDocumentImport()
   },
 })
+const back = useIntegrationBack(open)
 
 const targetFrameId = computed(() => ui.documentImport?.targetFrameId ?? null)
 const targetFrameTitle = computed(() =>
@@ -76,13 +77,7 @@ function preview(externalId: string) {
 <template>
   <UModal v-model:open="open" title="Import from a document source">
     <template #title>
-      <IntegrationBackTitle
-        title="Import from a document source"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="Import from a document source" @back="back" />
     </template>
     <template #body>
       <div v-if="!documents.anyConnected" class="space-y-3 text-center">

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -25,6 +25,7 @@ const open = computed({
     if (!v) ui.closeDocumentConnect()
   },
 })
+const back = useIntegrationBack(open)
 
 /** One value per credential field, reset whenever the modal (re)opens. */
 const values = ref<Record<string, string>>({})
@@ -80,13 +81,7 @@ async function disconnect() {
 <template>
   <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
     <template #title>
-      <IntegrationBackTitle
-        :title="descriptor?.label ?? 'Connect source'"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle :title="descriptor?.label ?? 'Connect source'" @back="back" />
     </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">

package/app/components/github/GitHubPanel.vue

@@ -22,6 +22,7 @@ const open = computed({
     if (!v) ui.closeGitHub()
   },
 })
+const back = useIntegrationBack(open)
 
 // On open: refresh projections when connected. The not-connected state renders
 // <GitHubConnect>, which discovers and links installations on its own.
@@ -201,13 +202,7 @@ async function merge(pr: GitHubPullRequest) {
 <template>
   <UModal v-model:open="open" title="GitHub" :ui="{ content: 'max-w-2xl' }">
     <template #title>
-      <IntegrationBackTitle
-        title="GitHub"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="GitHub" @back="back" />
     </template>
     <template #body>
       <div class="space-y-5">

package/app/components/layout/BoardToolbar.vue

@@ -108,7 +108,13 @@ const decisionItems = computed(() =>
 
     <!-- decisions queue -->
     <UDropdownMenu v-if="execution.pendingDecisionCount" :items="decisionItems">
-      <UButton color="warning" variant="soft" size="sm" icon="i-lucide-circle-help">
+      <UButton
+        color="warning"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-circle-help"
+        data-testid="decision-badge"
+      >
         {{ execution.pendingDecisionCount }} decision{{
           execution.pendingDecisionCount === 1 ? '' : 's'
         }}

package/app/components/panels/DecisionModal.vue

@@ -32,7 +32,7 @@ function choose(option: string) {
 <template>
   <UModal v-model:open="open" title="Decision required">
     <template #body>
-      <div v-if="decision && agent" class="space-y-4">
+      <div v-if="decision && agent" class="space-y-4" data-testid="decision-modal">
         <div class="flex items-center gap-2 text-sm text-slate-400">
           <div
             class="flex h-8 w-8 items-center justify-center rounded-lg"
@@ -56,6 +56,7 @@ function choose(option: string) {
             color="primary"
             variant="soft"
             block
+            data-testid="decision-option"
             class="justify-start"
             @click="choose(opt)"
           >

package/app/components/panels/ObservabilityPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
-import type { LlmCallMetric } from '~/types/execution'
+import type { AgentContextSnapshot, LlmCallMetric } from '~/types/execution'
 import { agentKindMeta } from '~/utils/catalog'
 import { formatMs, formatTokens, pct } from '~/utils/observability'
 
@@ -32,11 +32,38 @@ const error = computed(() =>
   executionId.value ? (observability.errors[executionId.value] ?? null) : null,
 )
 
-// Load (and refresh) whenever a different run's panel opens.
+// Which view is shown: the per-call model activity, or the complete provided context.
+const view = ref<'calls' | 'context'>('calls')
+
+const contextSnapshots = computed<AgentContextSnapshot[]>(() =>
+  executionId.value ? observability.contextFor(executionId.value) : [],
+)
+const contextLoading = computed(
+  () => !!executionId.value && observability.isContextLoading(executionId.value),
+)
+
+// Load (and refresh) whenever a different run's panel opens. Reset to the calls view
+// and load both the calls and the provided-context snapshots.
 watch(executionId, (id) => {
-  if (id) void observability.load(id)
+  if (id) {
+    view.value = 'calls'
+    void observability.load(id)
+    void observability.loadContext(id)
+  }
 })
 
+const expandedCtx = reactive<Record<string, boolean>>({})
+function toggleCtx(s: AgentContextSnapshot) {
+  expandedCtx[s.id] = !expandedCtx[s.id]
+}
+function prettyExtras(extras: Record<string, unknown>): string {
+  try {
+    return JSON.stringify(extras, null, 2)
+  } catch {
+    return String(extras)
+  }
+}
+
 // Run-level totals, derived from the loaded calls.
 const totals = computed(() => {
   const c = calls.value
@@ -124,7 +151,32 @@ function exportJson() {
             </p>
           </div>
           <div class="ml-auto flex items-center gap-1.5">
+            <div class="mr-1 flex rounded-lg border border-slate-800 p-0.5 text-[12px]">
+              <button
+                class="rounded-md px-2.5 py-1 transition"
+                :class="
+                  view === 'calls'
+                    ? 'bg-slate-800 text-slate-100'
+                    : 'text-slate-400 hover:text-slate-200'
+                "
+                @click="view = 'calls'"
+              >
+                Model activity
+              </button>
+              <button
+                class="rounded-md px-2.5 py-1 transition"
+                :class="
+                  view === 'context'
+                    ? 'bg-slate-800 text-slate-100'
+                    : 'text-slate-400 hover:text-slate-200'
+                "
+                @click="view = 'context'"
+              >
+                Provided context
+              </button>
+            </div>
             <UButton
+              v-if="view === 'calls'"
               icon="i-lucide-download"
               color="neutral"
               variant="soft"
@@ -148,7 +200,7 @@ function exportJson() {
         </header>
 
         <div class="flex-1 overflow-auto px-6 py-6">
-          <div class="mx-auto max-w-4xl space-y-5">
+          <div v-if="view === 'calls'" class="mx-auto max-w-4xl space-y-5">
             <!-- run-level summary -->
             <section class="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
               <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-4">
@@ -333,6 +385,126 @@ function exportJson() {
               </li>
             </ul>
           </div>
+
+          <!-- Provided context: the complete context each container agent was given. -->
+          <div v-else class="mx-auto max-w-4xl space-y-5">
+            <p
+              v-if="contextLoading && !contextSnapshots.length"
+              class="flex items-center justify-center gap-2 py-8 text-center text-sm text-slate-500"
+            >
+              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" /> Loading provided
+              context…
+            </p>
+            <p
+              v-else-if="!contextSnapshots.length"
+              class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
+            >
+              No agent context stored for this run. It is captured per dispatch when the workspace
+              has "Store full agent context" enabled.
+            </p>
+
+            <ul v-else class="space-y-2">
+              <li
+                v-for="s in contextSnapshots"
+                :key="s.id"
+                class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900/40"
+              >
+                <button
+                  class="flex w-full items-center gap-3 px-4 py-2.5 text-left transition hover:bg-slate-900/70"
+                  @click="toggleCtx(s)"
+                >
+                  <UIcon
+                    name="i-lucide-chevron-right"
+                    class="h-4 w-4 shrink-0 text-slate-500 transition-transform"
+                    :class="expandedCtx[s.id] ? 'rotate-90' : ''"
+                  />
+                  <UIcon
+                    :name="agentMeta(s.agentKind).icon"
+                    class="h-4 w-4 shrink-0"
+                    :style="{ color: agentMeta(s.agentKind).color }"
+                  />
+                  <span class="text-[13px] text-slate-200">{{ agentMeta(s.agentKind).label }}</span>
+                  <span v-if="s.model" class="hidden truncate text-[11px] text-slate-500 sm:inline">
+                    {{ s.model }}
+                  </span>
+                  <div
+                    class="ml-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
+                  >
+                    <span :title="'Injected context files'">{{ s.contextFiles.length }} files</span>
+                    <span :title="'Best-practice fragments'"
+                      >{{ s.fragments.length }} fragments</span
+                    >
+                    <span class="hidden text-slate-600 md:inline">{{ clock(s.createdAt) }}</span>
+                  </div>
+                </button>
+
+                <div v-if="expandedCtx[s.id]" class="border-t border-slate-800 px-4 py-3 space-y-3">
+                  <div>
+                    <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                      System prompt
+                    </div>
+                    <pre
+                      class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
+                      >{{ s.systemPrompt || '—' }}</pre
+                    >
+                  </div>
+                  <div>
+                    <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                      User prompt
+                    </div>
+                    <pre
+                      class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
+                      >{{ s.userPrompt || '—' }}</pre
+                    >
+                  </div>
+                  <div v-if="s.fragments.length">
+                    <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                      Best-practice fragments
+                    </div>
+                    <div
+                      v-for="f in s.fragments"
+                      :key="f.id"
+                      class="mb-2 rounded-lg bg-slate-950/70 p-3"
+                    >
+                      <div class="mb-1 text-[11px] text-slate-400">{{ f.id }}</div>
+                      <pre
+                        class="max-h-48 overflow-auto text-[11px] leading-relaxed text-slate-300"
+                        >{{ f.body }}</pre
+                      >
+                    </div>
+                  </div>
+                  <div v-if="s.contextFiles.length">
+                    <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                      Injected context files
+                    </div>
+                    <div
+                      v-for="file in s.contextFiles"
+                      :key="file.path"
+                      class="mb-2 rounded-lg bg-slate-950/70 p-3"
+                    >
+                      <div class="mb-1 text-[11px] text-slate-400">
+                        {{ file.title }}
+                        <span class="text-slate-600">· {{ file.path }}</span>
+                      </div>
+                      <pre
+                        class="max-h-72 overflow-auto text-[11px] leading-relaxed text-slate-300"
+                        >{{ file.content }}</pre
+                      >
+                    </div>
+                  </div>
+                  <div>
+                    <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                      Details
+                    </div>
+                    <pre
+                      class="max-h-48 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-400"
+                      >{{ prettyExtras(s.extras) }}</pre
+                    >
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </Transition>

package/app/components/providers/VendorCredentialsModal.vue

@@ -18,6 +18,7 @@ const open = computed({
   get: () => ui.vendorCredentialsOpen,
   set: (v: boolean) => (v ? ui.openVendorCredentials() : ui.closeVendorCredentials()),
 })
+const back = useIntegrationBack(open)
 
 // Horizontal tabs replace the old long vertical scroll: each credential kind is its own
 // section (pooled subscriptions, direct vendor keys, proxy/gateway keys, personal subs).
@@ -118,13 +119,7 @@ function vendorLabel(v: SubscriptionVendor): string {
 <template>
   <UModal v-model:open="open" title="LLM Vendors" :ui="{ content: 'max-w-2xl' }">
     <template #title>
-      <IntegrationBackTitle
-        title="LLM Vendors"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="LLM Vendors" @back="back" />
     </template>
     <template #body>
       <UTabs

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -17,6 +17,7 @@ const open = computed({
   get: () => ui.localModelsOpen,
   set: (v: boolean) => (v ? ui.openLocalModels() : ui.closeLocalModels()),
 })
+const back = useIntegrationBack(open)
 
 // Load the user's endpoints whenever the panel opens (loaded independently of the
 // workspace snapshot, like personal subscriptions).
@@ -154,13 +155,7 @@ async function remove(p: LocalRunner) {
 <template>
   <UModal v-model:open="open" title="My local runners" :ui="{ content: 'max-w-2xl' }">
     <template #title>
-      <IntegrationBackTitle
-        title="My local runners"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="My local runners" @back="back" />
     </template>
     <template #body>
       <div class="space-y-4">

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -16,6 +16,7 @@ const open = computed({
   get: () => ui.observabilityConnectionOpen,
   set: (v: boolean) => (v ? ui.openObservabilityConnection() : ui.closeObservabilityConnection()),
 })
+const back = useIntegrationBack(open)
 
 // The providers a user can connect. Datadog only today; the picker is ready for more.
 const PROVIDERS: { value: ObservabilityProviderKind; label: string }[] = [
@@ -130,13 +131,7 @@ const connectedLabel = computed(() => {
 <template>
   <UModal v-model:open="open" title="Post-release health" :ui="{ content: 'max-w-lg' }">
     <template #title>
-      <IntegrationBackTitle
-        title="Post-release health"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="Post-release health" @back="back" />
     </template>
     <template #body>
       <div class="space-y-4">

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -22,6 +22,7 @@ const open = computed({
   get: () => ui.openRouterOpen,
   set: (v: boolean) => (v ? ui.openOpenRouter() : ui.closeOpenRouter()),
 })
+const back = useIntegrationBack(open)
 
 // Popular slugs offered by "Enable recommended" — these mirror the curated `openrouter`
 // refs in the backend MODEL_CATALOG. Only the ones present in the live browse list are
@@ -195,13 +196,7 @@ function manageKeys() {
 <template>
   <UModal v-model:open="open" title="OpenRouter" :ui="{ content: 'max-w-2xl' }">
     <template #title>
-      <IntegrationBackTitle
-        title="OpenRouter"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="OpenRouter" @back="back" />
     </template>
     <template #body>
       <div class="space-y-4">

package/app/components/settings/ProviderConnectionPanel.vue

@@ -38,6 +38,7 @@ const open = computed({
     if (!v) ui.closeProviderConnection()
   },
 })
+const back = useIntegrationBack(open)
 
 const meta = computed(() => (kind.value ? META[kind.value] : null))
 const descriptor = computed(() => (kind.value ? store.descriptorFor(kind.value) : null))
@@ -224,13 +225,7 @@ function fieldHelp(key: string): string | undefined {
 <template>
   <UModal v-model:open="open" :title="meta?.title ?? 'Provider'" :ui="{ content: 'max-w-xl' }">
     <template #title>
-      <IntegrationBackTitle
-        :title="meta?.title ?? 'Provider'"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle :title="meta?.title ?? 'Provider'" @back="back" />
     </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">

package/app/components/settings/UserSecretsSection.vue

@@ -16,6 +16,7 @@ const open = computed({
   get: () => ui.userSecretsOpen,
   set: (v: boolean) => (v ? ui.openUserSecrets() : ui.closeUserSecrets()),
 })
+const back = useIntegrationBack(open)
 
 // The kind being edited (only `github_pat` today; descriptors drive the rest generically).
 const kind = ref<UserSecretKind>('github_pat')
@@ -125,13 +126,7 @@ async function remove() {
 <template>
   <UModal v-model:open="open" title="My GitHub token" :ui="{ content: 'max-w-xl' }">
     <template #title>
-      <IntegrationBackTitle
-        title="My GitHub token"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="My GitHub token" @back="back" />
     </template>
     <template #body>
       <div class="space-y-4">

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -22,6 +22,7 @@ const open = computed({
   get: () => ui.workspaceSettingsOpen,
   set: (v: boolean) => (v ? ui.openWorkspaceSettings() : ui.closeWorkspaceSettings()),
 })
+const back = useIntegrationBack(open)
 
 // Which tab is shown — driven by the ui store so other surfaces (command bar,
 // integrations) can deep-link straight to a tab.
@@ -66,6 +67,7 @@ const draft = reactive({
   taskLimitMode: 'off' as TaskLimitMode,
   taskLimitShared: 5 as number,
   perType: {} as Record<CreateTaskType, number>,
+  storeAgentContext: true,
   // Budget: empty string ⇒ "use the built-in default" (null on the wire).
   spendCurrency: '',
   spendMonthlyLimit: '',
@@ -79,6 +81,7 @@ function hydrate() {
   draft.taskLimitShared = s.taskLimitShared ?? 5
   const pt = s.taskLimitPerType ?? {}
   for (const t of TASK_TYPES) draft.perType[t] = pt[t] ?? 3
+  draft.storeAgentContext = s.storeAgentContext
   draft.spendCurrency = s.spendCurrency ?? ''
   draft.spendMonthlyLimit = s.spendMonthlyLimit == null ? '' : String(s.spendMonthlyLimit)
   draft.spendModelPrices = s.spendModelPrices ? JSON.stringify(s.spendModelPrices, null, 2) : ''
@@ -105,6 +108,7 @@ async function save() {
               {} as Record<CreateTaskType, number>,
             )
           : null,
+      storeAgentContext: draft.storeAgentContext,
     })
     toast.add({ title: 'Settings saved', icon: 'i-lucide-check', color: 'success' })
   } catch (e) {
@@ -162,13 +166,7 @@ async function saveBudget() {
 <template>
   <UModal v-model:open="open" title="Workspace settings" :ui="{ content: 'max-w-3xl' }">
     <template #title>
-      <IntegrationBackTitle
-        title="Workspace settings"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="Workspace settings" @back="back" />
     </template>
     <template #body>
       <UTabs
@@ -238,6 +236,22 @@ async function saveBudget() {
               </div>
             </section>
 
+            <!-- Agent observability -->
+            <section class="space-y-2">
+              <h3 class="text-sm font-semibold text-slate-200">Agent observability</h3>
+              <p class="text-[11px] text-slate-400">
+                Store the complete context provided to each agent — the composed prompts, the
+                best-practice fragments folded in, and the full content of the files injected into
+                its container — so it can be inspected later in the observability view. The bodies
+                are kept for the same window as the per-call LLM telemetry. Turn off to stop storing
+                it (existing snapshots are pruned by retention).
+              </p>
+              <label class="flex items-center gap-2">
+                <USwitch v-model="draft.storeAgentContext" size="sm" />
+                <span class="text-sm text-slate-200">Store full agent context</span>
+              </label>
+            </section>
+
             <div class="flex justify-end">
               <UButton
                 color="primary"

package/app/components/slack/SlackPanel.vue

@@ -17,6 +17,7 @@ const open = computed({
   get: () => ui.slackOpen,
   set: (v: boolean) => (v ? ui.openSlack() : ui.closeSlack()),
 })
+const back = useIntegrationBack(open)
 
 const ROUTABLE: { type: NotificationType; label: string }[] = [
   { type: 'merge_review', label: 'Merge review' },
@@ -143,13 +144,7 @@ async function saveMapping() {
 <template>
   <UModal v-model:open="open" title="Slack notifications" :ui="{ content: 'max-w-2xl' }">
     <template #title>
-      <IntegrationBackTitle
-        title="Slack notifications"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle title="Slack notifications" @back="back" />
     </template>
     <template #body>
       <div class="space-y-5">

package/app/components/tasks/TaskImportModal.vue

@@ -21,6 +21,7 @@ const open = computed({
     if (!v) ui.closeTaskImport()
   },
 })
+const back = useIntegrationBack(open)
 
 const source = ref<TaskSourceKind | undefined>(undefined)
 const ref_ = ref('')
@@ -197,13 +198,7 @@ async function doSpawnEpic() {
 <template>
   <UModal v-model:open="open" :title="title">
     <template #title>
-      <IntegrationBackTitle
-        :title="title"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle :title="title" @back="back" />
     </template>
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -32,6 +32,7 @@ const open = computed({
     if (!v) ui.closeTaskConnect()
   },
 })
+const back = useIntegrationBack(open)
 
 /** One value per credential field, reset whenever the modal (re)opens. */
 const values = ref<Record<string, string>>({})
@@ -107,13 +108,7 @@ async function toggleEnabled(enabled: boolean) {
 <template>
   <UModal v-model:open="open" :title="descriptor?.label ?? 'Task source'">
     <template #title>
-      <IntegrationBackTitle
-        :title="descriptor?.label ?? 'Task source'"
-        @back="
-          open = false
-          ui.openIntegrations()
-        "
-      />
+      <IntegrationBackTitle :title="descriptor?.label ?? 'Task source'" @back="back" />
     </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">

package/app/composables/api/execution.ts

@@ -1,5 +1,6 @@
 import type { Block, ExecutionInstance } from '~/types/domain'
 import type {
+  AgentContextSnapshot,
   IterationCapChoice,
   LlmCallMetric,
   LlmMetricsExport,
@@ -120,6 +121,13 @@ export function executionApi({ http, ws, pwHeaders }: ApiContext) {
         `${ws(workspaceId)}/executions/${encodeURIComponent(executionId)}/llm-metrics/export`,
       ),
 
+    // The complete provided context per container-agent dispatch (composed prompts,
+    // folded-in fragments, injected files). Empty when not wired / storing is off.
+    getAgentContext: (workspaceId: string, executionId: string) =>
+      http<{ executionId: string; snapshots: AgentContextSnapshot[] }>(
+        `${ws(workspaceId)}/executions/${encodeURIComponent(executionId)}/agent-context`,
+      ),
+
     // ---- spend safeguard --------------------------------------------------
     resumeSpend: (workspaceId: string) =>
       http<ExecutionInstance[]>(`${ws(workspaceId)}/spend/resume`, { method: 'POST' }),

package/app/composables/useIntegrationBack.ts

@@ -0,0 +1,20 @@
+import type { Ref, WritableComputedRef } from 'vue'
+
+/**
+ * The shared "back to Integrations" handler for an integration sub-panel's modal header.
+ * Every panel reached from the Integrations hub closes itself and reopens the hub when its
+ * {@link IntegrationBackTitle} Back control fires `@back`. Centralising it keeps the ~13
+ * panels from each re-implementing the two-step close-then-reopen inline — which also
+ * dodges a Vue SFC-compiler trap: a multi-statement inline template handler
+ * (`open = false` ⏎ `ui.openIntegrations()`) is rejected at build time, so callers had to
+ * resort to an obscure comma-operator expression. A named handler reads clearly instead.
+ *
+ * Pass the panel's `open` model (the writable ref/computed bound to its `UModal`).
+ */
+export function useIntegrationBack(open: Ref<boolean> | WritableComputedRef<boolean>) {
+  const ui = useUiStore()
+  return () => {
+    open.value = false
+    ui.openIntegrations()
+  }
+}

package/app/stores/observability.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { LlmCallActivity, LlmCallMetric } from '~/types/execution'
+import type { AgentContextSnapshot, LlmCallActivity, LlmCallMetric } from '~/types/execution'
 import { useWorkspaceStore } from '~/stores/workspace'
 
 /**
@@ -19,6 +19,10 @@ export const useObservabilityStore = defineStore('observability', () => {
 
   /** Per-execution-id call list (newest first). */
   const callsByExecution = ref<Record<string, LlmCallMetric[]>>({})
+  /** Per-execution-id provided-context snapshot list (newest first). */
+  const contextByExecution = ref<Record<string, AgentContextSnapshot[]>>({})
+  /** Execution ids whose context is currently loading. */
+  const contextLoading = ref<Set<string>>(new Set())
   /** Execution ids currently loading. */
   const loading = ref<Set<string>>(new Set())
   /** Execution ids currently exporting. */
@@ -109,6 +113,27 @@ export const useObservabilityStore = defineStore('observability', () => {
     callsByExecution.value = { ...callsByExecution.value, [executionId]: [row, ...existing] }
   }
 
+  function contextFor(executionId: string): AgentContextSnapshot[] {
+    return contextByExecution.value[executionId] ?? []
+  }
+  function isContextLoading(executionId: string): boolean {
+    return contextLoading.value.has(executionId)
+  }
+
+  /** Load (or refresh) the per-dispatch provided-context snapshots for a run. */
+  async function loadContext(executionId: string) {
+    if (!workspace.workspaceId) return
+    withFlag(contextLoading, executionId, true)
+    try {
+      const { snapshots } = await api.getAgentContext(workspace.requireId(), executionId)
+      contextByExecution.value = { ...contextByExecution.value, [executionId]: snapshots }
+    } catch {
+      // Best-effort: the panel shows an empty state; nothing is persisted client-side.
+    } finally {
+      withFlag(contextLoading, executionId, false)
+    }
+  }
+
   /**
    * Fetch the LLM-friendly export bundle and trigger a client-side download. The
    * events socket auths via a Bearer header (a plain `<a download>` can't), so we
@@ -140,5 +165,9 @@ export const useObservabilityStore = defineStore('observability', () => {
     load,
     appendCall,
     downloadExport,
+    contextByExecution,
+    contextFor,
+    isContextLoading,
+    loadContext,
   }
 })

package/app/stores/workspaceSettings.ts

@@ -9,6 +9,7 @@ const DEFAULTS: WorkspaceSettings = {
   taskLimitMode: 'off',
   taskLimitShared: null,
   taskLimitPerType: null,
+  storeAgentContext: true,
   spendCurrency: null,
   spendMonthlyLimit: null,
   spendModelPrices: null,

package/app/types/domain.ts

@@ -493,6 +493,8 @@ export interface WorkspaceSettings {
   taskLimitShared: number | null
   /** The per-type caps, when `taskLimitMode` is `per_type` (type → cap). */
   taskLimitPerType: Partial<Record<CreateTaskType, number>> | null
+  /** Whether to store the complete provided-context snapshot for each container agent. */
+  storeAgentContext: boolean
   /** Spend budget currency (ISO 4217). Null ⇒ the built-in default (`EUR`). */
   spendCurrency: string | null
   /** Monthly spend budget in `spendCurrency`. Null ⇒ the built-in default. */
@@ -507,6 +509,7 @@ export interface UpdateWorkspaceSettingsInput {
   taskLimitMode?: TaskLimitMode
   taskLimitShared?: number | null
   taskLimitPerType?: Partial<Record<CreateTaskType, number>> | null
+  storeAgentContext?: boolean
   spendCurrency?: string | null
   spendMonthlyLimit?: number | null
   spendModelPrices?: Record<string, { inputPerMillion: number; outputPerMillion: number }> | null

package/app/types/execution.ts

@@ -229,6 +229,42 @@ export type LlmCallActivity = Omit<
   'promptText' | 'responseText' | 'reasoningText' | 'promptPrefixCount' | 'promptHash'
 >
 
+/** One best-practice fragment folded into an agent's system prompt. */
+export interface AgentContextFragment {
+  id: string
+  body: string
+}
+
+/** One file injected into the agent's container as context, with its full body. */
+export interface AgentContextFile {
+  path: string
+  title: string
+  url: string
+  content: string
+}
+
+/**
+ * The complete, redacted context provided to one container-agent dispatch: the composed
+ * system + user prompts, the fragment bodies folded in, and the full content of the files
+ * injected into the container. Loaded on demand for the observability view. Mirrors the
+ * backend `AgentContextSnapshot` (it never carries any credential).
+ */
+export interface AgentContextSnapshot {
+  id: string
+  workspaceId: string
+  executionId: string
+  agentKind: string
+  stepIndex: number
+  createdAt: number
+  model: string | null
+  harness: string | null
+  systemPrompt: string
+  userPrompt: string
+  fragments: AgentContextFragment[]
+  contextFiles: AgentContextFile[]
+  extras: Record<string, unknown>
+}
+
 /** One per-agent-kind insight in the LLM-friendly export (rollup + derived ratios). */
 export interface LlmExportInsight extends StepMetrics {
   agentKind: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.29.1",
+  "version": "0.30.1",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",