@cat-factory/app 0.228.0 → 0.229.0

package/app/components/board/AddTaskModal.vue

@@ -59,12 +59,7 @@ const { t } = useI18n()
 
 const { linkPending, presentLinkFailures } = useContextLinking()
 
-const open = computed({
-  get: () => ui.addTaskContainerId !== null,
-  set: (v: boolean) => {
-    if (!v) void requestClose()
-  },
-})
+const open = computed(() => ui.addTaskContainerId !== null)
 
 const container = computed(() =>
   ui.addTaskContainerId ? board.getBlock(ui.addTaskContainerId) : undefined,
@@ -591,6 +586,15 @@ const { requestClose } = useUnsavedGuard({
   }),
 })
 
+// The template's v-model binding: dismissal (Escape / backdrop) routes through the guard.
+// Declared after the guard so the setter's `requestClose` reference is never in its TDZ.
+const modalOpen = computed({
+  get: () => open.value,
+  set: (v: boolean) => {
+    if (!v) void requestClose()
+  },
+})
+
 // A recurring task only needs a target frame (its details are filled in the schedule
 // modal); every other type needs a title. A review task additionally needs a target PR.
 // The Ralph loop's completion criterion (its `ralph.validationCommand` agent-config id). The
@@ -757,7 +761,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('board.addTask.title')">
+  <UModal v-model:open="modalOpen" :title="t('board.addTask.title')">
     <template #body>
       <div class="space-y-4" data-testid="add-task-modal">
         <p v-if="container" class="text-xs text-slate-400">

package/app/components/board/RecurringPipelineModal.vue

@@ -22,12 +22,7 @@ const toast = useToast()
 const access = useWorkspaceAccess()
 const { t, te } = useI18n()
 
-const open = computed({
-  get: () => ui.addRecurringFrameId !== null,
-  set: (v: boolean) => {
-    if (!v) void requestClose()
-  },
-})
+const open = computed(() => ui.addRecurringFrameId !== null)
 
 const frame = computed(() =>
   ui.addRecurringFrameId ? board.getBlock(ui.addRecurringFrameId) : undefined,
@@ -240,6 +235,15 @@ const { requestClose } = useUnsavedGuard({
   }),
 })
 
+// The template's v-model binding: dismissal (Escape / backdrop) routes through the guard.
+// Declared after the guard so the setter's `requestClose` reference is never in its TDZ.
+const modalOpen = computed({
+  get: () => open.value,
+  set: (v: boolean) => {
+    if (!v) void requestClose()
+  },
+})
+
 // The board field required for the picked source must be filled before a bug-intake schedule saves.
 const intakeReady = computed(() => {
   if (!showIntake.value) return true
@@ -339,7 +343,7 @@ async function add() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('board.recurring.title')">
+  <UModal v-model:open="modalOpen" :title="t('board.recurring.title')">
     <template #body>
       <div class="space-y-4">
         <p v-if="frame" class="text-xs text-slate-400">

package/app/components/bootstrap/BootstrapModal.vue

@@ -18,12 +18,7 @@ const { freeFramePosition, focusFrame } = useFramePlacement()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 
-const open = computed({
-  get: () => ui.bootstrapOpen,
-  set: (v: boolean) => {
-    if (!v) void requestClose()
-  },
-})
+const open = computed(() => ui.bootstrapOpen)
 
 // Load the workspace's reference architectures + recent jobs, plus (best-effort)
 // the GitHub repos the user can access so the base form can pick from them.
@@ -100,6 +95,15 @@ const { requestClose } = useUnsavedGuard({
   }),
 })
 
+// The template's v-model binding: dismissal (Escape / backdrop) routes through the guard.
+// Declared after the guard so the setter's `requestClose` reference is never in its TDZ.
+const modalOpen = computed({
+  get: () => open.value,
+  set: (v: boolean) => {
+    if (!v) void requestClose()
+  },
+})
+
 // Mirror of the backend `slugField` rule (@cat-factory/contracts bootstrap
 // schema): the new repo name is a SINGLE GitHub name segment — no "owner/"
 // prefix — so reject a bad value inline before we hit the API. Kept in sync with
@@ -420,7 +424,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('bootstrap.title')" :ui="{ content: 'max-w-2xl' }">
+  <UModal v-model:open="modalOpen" :title="t('bootstrap.title')" :ui="{ content: 'max-w-2xl' }">
     <template #body>
       <div class="space-y-6">
         <!-- Three states, because each promises the user something different about the repo.

package/app/components/documents/RepoContextDocPicker.vue

@@ -75,6 +75,10 @@ watch(selectedRepoId, (id) => {
   if (found) selectedRepo.value = found
 })
 
+// The file-search query (its matches live in the file-selection section below). Declared
+// above `clearRepo` and the repo-switch watcher, which both reset it.
+const fileQuery = ref('')
+
 function clearRepo() {
   selectedRepoId.value = undefined
   selectedRepo.value = undefined
@@ -127,7 +131,6 @@ watch(selectedRepoId, (id) => {
   if (id !== undefined) void ensureFilesLoaded()
 })
 
-const fileQuery = ref('')
 // Matches are computed client-side from the cached tree (no per-keystroke server call).
 // A query is required so a large repo never renders thousands of rows at once; results
 // are capped for the same reason.

package/app/components/fragments/FragmentLibraryManager.vue

@@ -171,6 +171,19 @@ const editDraft = ref<{
   brief: string
   tags: string
 } | null>(null)
+// The linked SHORT VERSION is an OVERRIDE of what the platform does by default (condense a
+// long standard automatically, fold a short one in full), so it follows the override rule:
+// hidden in basic mode while unset, revealed as soon as the fragment carries one — a
+// basic-mode curator is never left unable to see or clear a brief a teammate linked.
+//
+// Both flags are LATCHED at the moment the form opens rather than tracking the live draft.
+// Recomputing per keystroke makes the control delete itself the instant a basic-mode curator
+// empties it — mid-edit, under the cursor, on the one interaction (clearing, to hand the
+// standard back to auto-generation) the rule exists to keep reachable.
+const uiMode = useUiModeStore()
+const showEditBrief = ref(false)
+const showDraftBrief = computed(() => showOverrideField(uiMode.isAdvanced, null))
+
 function startEdit(f: (typeof library.fragments)[number]) {
   editDraft.value = {
     id: f.id,
@@ -192,19 +205,6 @@ const editValid = computed(
     !!editDraft.value.summary.trim() &&
     !!editDraft.value.body.trim(),
 )
-// The linked SHORT VERSION is an OVERRIDE of what the platform does by default (condense a
-// long standard automatically, fold a short one in full), so it follows the override rule:
-// hidden in basic mode while unset, revealed as soon as the fragment carries one — a
-// basic-mode curator is never left unable to see or clear a brief a teammate linked.
-//
-// Both flags are LATCHED at the moment the form opens rather than tracking the live draft.
-// Recomputing per keystroke makes the control delete itself the instant a basic-mode curator
-// empties it — mid-edit, under the cursor, on the one interaction (clearing, to hand the
-// standard back to auto-generation) the rule exists to keep reachable.
-const uiMode = useUiModeStore()
-const showEditBrief = ref(false)
-const showDraftBrief = computed(() => showOverrideField(uiMode.isAdvanced, null))
-
 async function saveEdit() {
   const d = editDraft.value
   if (!d || !editValid.value) return
@@ -277,11 +277,6 @@ async function removeFragment(id: string) {
 // Link a Confluence/Notion page or GitHub file as a fragment that is re-resolved
 // from the source at run time (a living source of truth, not a frozen snapshot).
 const docDraft = ref({ source: '' as DocumentSourceKind | '', ref: '', tags: '' })
-const docDraftValid = computed(() => {
-  if (docLinkDisabled.value || !docDraft.value.source) return false
-  // The GitHub picker validates on staged files; every other path on the free-text ref.
-  return usingDocPicker.value ? docFilePaths.value.length > 0 : !!docDraft.value.ref.trim()
-})
 
 // ---- GitHub file picker (documents tab) -----------------------------------
 // For a GitHub source, let the user search a repo + browse to one or MORE files
@@ -364,6 +359,12 @@ const stagedDocRefs = computed(() =>
 /** When the rich picker drives the ref(s); otherwise the free-text field does. */
 const usingDocPicker = computed(() => showGithubDocPicker.value)
 
+const docDraftValid = computed(() => {
+  if (docLinkDisabled.value || !docDraft.value.source) return false
+  // The GitHub picker validates on staged files; every other path on the free-text ref.
+  return usingDocPicker.value ? docFilePaths.value.length > 0 : !!docDraft.value.ref.trim()
+})
+
 /**
  * A pasted GitHub file/directory URL resolved to a repo + location: select the repo
  * (through the same refs the search select drives), then stage the file or jump the

package/app/components/gates/GateResultView.vue

@@ -25,9 +25,6 @@ const access = useWorkspaceAccess()
 const { open, blockId, instanceId, stepIndex, close } = useResultView('gate')
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const prUrl = computed(() => block.value?.pullRequest?.url ?? null)
-const headerTitle = computed(
-  () => `${meta.value.label}${block.value ? ` — ${block.value.title}` : ''}`,
-)
 
 const instance = computed(() =>
   instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
@@ -42,6 +39,9 @@ const isCi = computed(() => step.value?.agentKind === 'ci')
 const isHumanReview = computed(() => step.value?.agentKind === 'human-review')
 const isDocQuality = computed(() => step.value?.agentKind === 'doc-quality')
 const meta = computed(() => agentKindMeta(step.value?.agentKind ?? 'ci'))
+const headerTitle = computed(
+  () => `${meta.value.label}${block.value ? ` — ${block.value.title}` : ''}`,
+)
 const helperKind = computed(() =>
   isHumanReview.value
     ? 'fixer'

package/app/components/github/AddServiceFromRepoModal.vue

@@ -189,6 +189,16 @@ function removeSelected(path: string) {
   if (i >= 0) selectedDirectories.value.splice(i, 1)
 }
 
+// The just-added whole-repo service, kept on the board store so the user can configure it
+// (test infra + fragments) right here — the same controls as the inspector. Only the
+// whole-repo flow surfaces this inline configure step; a monorepo adds several services at
+// once and they're configured later in the inspector. Declared above the watcher and
+// `resetSelection` below, both of which clear it.
+const configuredBlockId = ref<string | undefined>(undefined)
+const configuredBlock = computed(() =>
+  configuredBlockId.value ? board.getBlock(configuredBlockId.value) : undefined,
+)
+
 // On repo change, capture the picked repo (from the volatile loaded list, before a later
 // search replaces it), seed the monorepo toggle from its persisted flag, and clear the rest.
 watch(selectedRepoId, (id) => {
@@ -227,15 +237,6 @@ function openManageInstall() {
   if (manageInstallUrl.value) window.open(manageInstallUrl.value, '_blank', 'noopener')
 }
 
-// The just-added whole-repo service, kept on the board store so the user can configure it
-// (test infra + fragments) right here — the same controls as the inspector. Only the
-// whole-repo flow surfaces this inline configure step; a monorepo adds several services at
-// once and they're configured later in the inspector.
-const configuredBlockId = ref<string | undefined>(undefined)
-const configuredBlock = computed(() =>
-  configuredBlockId.value ? board.getBlock(configuredBlockId.value) : undefined,
-)
-
 // On open: ensure we know the connection + which repos the App can access, and
 // the workspace's already-tracked repos (to flag ones already on the board).
 // Declared after every ref resetSelection() touches so the `immediate` run

package/app/components/panels/AgentStepDetail.vue

@@ -200,15 +200,10 @@ function openDedicatedWindow() {
   else if (park === 'fork-decision') ui.openForkDecision(c.instanceId, c.stepIndex)
 }
 
-function close() {
-  // Reset the approval-mode sub-states so reopening the same step is clean
-  // (the step-change watch only fires when the step key actually changes).
-  approval.resetForClose()
-  ui.closeStepDetail()
-}
-
 // The GitHub-style approval/review state machine for a pending gate step. A park a
 // dedicated window owns is NOT reviewable here, so it doesn't count as pending.
+// (`close` is passed by hoisted function reference; it's declared below `approval`,
+// which it resets.)
 const approval = useStepApproval({
   step: () => step.value,
   scrollEl: () => scrollEl.value,
@@ -246,6 +241,13 @@ const {
   reject,
 } = approval
 
+function close() {
+  // Reset the approval-mode sub-states so reopening the same step is clean
+  // (the step-change watch only fires when the step key actually changes).
+  approval.resetForClose()
+  ui.closeStepDetail()
+}
+
 /**
  * Why the gate refuses this viewer, worded for them. An exhaustive Record over the shared refusal
  * vocabulary with LITERAL keys, so the typed-message-key check sees them and a new refusal reason

package/app/components/panels/InspectorPanel.vue

@@ -20,10 +20,6 @@ const requirements = useRequirementsStore()
 const access = useWorkspaceAccess()
 const { t } = useI18n()
 
-// When the selected task block backs a recurring pipeline, the inspector shows the
-// schedule controls + history, and "Delete" removes the schedule (block + history).
-const schedule = computed(() => (block.value ? recurring.byBlock(block.value.id) : undefined))
-
 onMounted(() => {
   fragments.ensureLoaded()
   github.ensureLoaded()
@@ -32,6 +28,10 @@ onMounted(() => {
 const block = computed<Block | undefined>(() =>
   ui.selectedBlockId ? board.getBlock(ui.selectedBlockId) : undefined,
 )
+
+// When the selected task block backs a recurring pipeline, the inspector shows the
+// schedule controls + history, and "Delete" removes the schedule (block + history).
+const schedule = computed(() => (block.value ? recurring.byBlock(block.value.id) : undefined))
 const level = computed(() => block.value?.level ?? 'frame')
 const isFrame = computed(() => level.value === 'frame')
 

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -190,6 +190,18 @@ function rootUnderDirectory(directory: string | null | undefined, path: string):
   return segs.join('/')
 }
 
+// The repo + service subdirectory backing this frame (the manifest prefills, the fixer
+// run, and the compose-file browser all root paths under it). A monorepo service isn't
+// on the `github_repos` blockId link (that stays null), so fall back to the service
+// catalog mapping, which carries the repo + directory.
+const repoContext = computed<{ githubId: number; directory?: string | null } | undefined>(() => {
+  if (props.repo) return props.repo
+  const svc = services.serviceByFrameBlock[props.block.id]
+  if (svc?.repoGithubId != null) return { githubId: svc.repoGithubId, directory: svc.directory }
+  const r = github.repoForBlock(props.block.id)
+  return r ? { githubId: r.githubId } : undefined
+})
+
 function setCustomManifestId(value: string) {
   // Prefill the manifest path with the selected type's default, rooted under the service subtree
   // (repo-root-relative, editable afterwards) so a monorepo service targets the right location
@@ -366,17 +378,6 @@ async function stopEnvTest() {
 // ephemeral-environment provisioner, not commonly tuned — keep them collapsed by default.
 const showProvisioning = ref(false)
 
-// The repo + service subdirectory backing this frame, for the compose-file browser.
-// A monorepo service isn't on the `github_repos` blockId link (that stays null), so
-// fall back to the service catalog mapping, which carries the repo + directory.
-const repoContext = computed<{ githubId: number; directory?: string | null } | undefined>(() => {
-  if (props.repo) return props.repo
-  const svc = services.serviceByFrameBlock[props.block.id]
-  if (svc?.repoGithubId != null) return { githubId: svc.repoGithubId, directory: svc.directory }
-  const r = github.repoForBlock(props.block.id)
-  return r ? { githubId: r.githubId } : undefined
-})
-
 // Repo-path picker, shared by the compose file (`docker compose -f <path>`) and the
 // kubernetes colocated manifests path. The stored path is relative to the repo root (the
 // browser starts inside the service's subdirectory for convenience).

package/app/components/panels/inspector/TaskExecution.vue

@@ -56,6 +56,13 @@ const instance = computed(() => execution.getInstance(props.block.executionId))
 // is that nothing will merge, and WHY is answered by the run's own notes and the merge decision.
 const sandboxed = computed(() => isDryRun(instance.value?.mode))
 
+// A failed pipeline run surfaces the shared failure banner + retry — the
+// execution failure surface that the old `pr_ready` flip used to hide.
+const failedRun = computed(() => {
+  const run = agentRuns.byBlock[props.block.id]
+  return run && run.status === 'failed' ? run : null
+})
+
 // Nothing to show yet: no run, no failed run, no PR, and not awaiting a merge — render an
 // empty state instead of a blank gap so the section reads as "no runs yet" rather than broken.
 const isEmpty = computed(
@@ -77,13 +84,6 @@ const runFailed = computed(() => instance.value?.status === 'failed')
  */
 const inputGateNotice = computed(() => inputGateNoticeFor(instance.value))
 
-// A failed pipeline run surfaces the shared failure banner + retry — the
-// execution failure surface that the old `pr_ready` flip used to hide.
-const failedRun = computed(() => {
-  const run = agentRuns.byBlock[props.block.id]
-  return run && run.status === 'failed' ? run : null
-})
-
 // Failures from prior attempts, preserved across retries — shown regardless of the run's
 // CURRENT status, so the error trail stays viewable after a restart clears the top banner.
 const failureHistory = computed(() => agentRuns.byBlock[props.block.id]?.failureHistory ?? [])

package/app/components/pipeline/PipelineProgress.vue

@@ -160,6 +160,11 @@ const STATUS_META = computed<Record<ExecutionInstance['status'], { label: string
 const steps = computed(() => props.instance.steps)
 const total = computed(() => steps.value.length)
 
+// A failed run is no longer executing: a step left mid-flight (state still `working`,
+// its container caught mid cold-boot) must stop looking live — no spinner, no pulse,
+// no "spinning up container" phase.
+const runFailed = computed(() => props.instance.status === 'failed')
+
 // A shared 1s tick drives every step's live elapsed clock, so a step that hasn't yet
 // emitted subtask counts still shows it is progressing rather than reading as hung.
 const nowTick = useNowTick()
@@ -172,10 +177,6 @@ function stepElapsed(s: PipelineStep): string | null {
 // human can see at a glance whether the fixer ran or was skipped.
 const companionByStep = computed(() => steps.value.map((s) => gateCompanionFor(s, runFailed.value)))
 
-// A failed run is no longer executing: a step left mid-flight (state still `working`,
-// its container caught mid cold-boot) must stop looking live — no spinner, no pulse,
-// no "spinning up container" phase.
-const runFailed = computed(() => props.instance.status === 'failed')
 /**
  * A reviewer gate (requirements-review / clarity-review) folding the answers or
  * re-reviewing in the durable driver: the step parks in `waiting_decision` but is actively

package/app/components/providers/ApiKeysSection.vue

@@ -33,6 +33,9 @@ const { confirmAction, toastDone } = useConfirmAction()
 /** Account-wide mode (single account scope) vs the default workspace/user toggle. */
 const isAccount = computed(() => !!props.accountId)
 
+/** Which store the form writes to: the shared workspace keys or the user's own. */
+const scope = ref<'workspace' | 'user'>('workspace')
+
 // "My keys" (user scope) are stored per-user, so they need a signed-in user. Block just
 // that scope when there's none (a deployment without sign-in); workspace/account keys are
 // unaffected. The scope toggle stays enabled so the user can switch back to a shared scope.
@@ -136,7 +139,6 @@ const PROVIDERS = computed(() =>
 )
 const ALL_PROVIDERS = computed(() => [...DIRECT_PROVIDERS.value, ...PROXY_PROVIDERS.value])
 
-const scope = ref<'workspace' | 'user'>('workspace')
 const provider = ref<ApiKeyProvider>(props.category === 'proxy' ? 'openrouter' : 'openai')
 const label = ref('')
 const key = ref('')

package/app/components/ralph/RalphLoopResultView.vue

@@ -19,9 +19,6 @@ const { t, d } = useI18n()
 // overlay behaviour.
 const { open, blockId, instanceId, stepIndex, close } = useResultView('ralph-loop')
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
-const headerTitle = computed(
-  () => `${meta.value.label}${block.value ? ` — ${block.value.title}` : ''}`,
-)
 const prUrl = computed(() => block.value?.pullRequest?.url ?? null)
 
 const instance = computed(() =>
@@ -33,6 +30,9 @@ const step = computed(() => {
 })
 const ralph = computed<RalphStepState | null>(() => step.value?.ralph ?? null)
 const meta = computed(() => agentKindMeta('ralph'))
+const headerTitle = computed(
+  () => `${meta.value.label}${block.value ? ` — ${block.value.title}` : ''}`,
+)
 
 // Iterations, newest-first for the timeline.
 const attempts = computed(() => [...(ralph.value?.attemptLog ?? [])].reverse())

package/app/components/settings/McpOAuthCallbackScreen.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+// Where a vendor's authorization server sends the operator's browser back to after they approve a
+// remote MCP tool server (`/mcp-oauth-callback?code=…&state=…`).
+//
+// A page in the APP rather than a route on the backend, which is the security shape of this flow
+// rather than a routing preference: a redirect is a third-party navigation carrying no bearer
+// token, so a backend receiver could never tell WHO was completing the grant. This page re-presents
+// the two values over the authenticated API, where the session, the "same user who started it"
+// binding and the `secrets.manage` re-check all actually run.
+//
+// It is NOT a public route (unlike the password reset beside it): an expired session renders the
+// login screen on this same URL, and once the operator signs in the query string is still here and
+// the grant completes. That is the correct behaviour, not a gap.
+
+const api = useApi()
+const { t } = useI18n()
+
+const state = ref<'working' | 'done' | 'failed'>('working')
+const detail = ref<string | null>(null)
+const serverId = ref<string | null>(null)
+
+function query(name: string): string {
+  if (typeof window === 'undefined') return ''
+  return new URLSearchParams(window.location.search).get(name) ?? ''
+}
+
+onMounted(async () => {
+  // An authorization server that REFUSED reports it here rather than on the token endpoint, so the
+  // operator's own "Deny" and a misconfigured client both arrive as this. Named rather than folded
+  // into "no code": one is nothing to fix and the other is the client registration.
+  const denied = query('error')
+  if (denied) {
+    state.value = 'failed'
+    detail.value = query('error_description') || denied
+    return
+  }
+  const code = query('code')
+  const sealed = query('state')
+  if (!code || !sealed) {
+    state.value = 'failed'
+    detail.value = t('settings.toolServers.oauth.callback.missingParams')
+    return
+  }
+  try {
+    const result = await api.completeToolServerOAuth({ code, state: sealed })
+    serverId.value = result.serverId
+    state.value = 'done'
+  } catch (e) {
+    state.value = 'failed'
+    detail.value =
+      (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
+      t('settings.toolServers.oauth.callback.failed')
+  }
+})
+
+function backToApp() {
+  if (typeof window !== 'undefined') window.location.assign('/')
+}
+</script>
+
+<template>
+  <div
+    class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100"
+    data-testid="mcp-oauth-callback"
+  >
+    <div
+      class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/80 p-8 text-center backdrop-blur"
+    >
+      <template v-if="state === 'working'">
+        <UIcon name="i-lucide-loader" class="mx-auto mb-3 h-10 w-10 animate-spin text-indigo-400" />
+        <h1 class="mb-1 text-lg font-semibold text-white">
+          {{ t('settings.toolServers.oauth.callback.working') }}
+        </h1>
+      </template>
+
+      <template v-else-if="state === 'done'">
+        <UIcon name="i-lucide-check-circle" class="mx-auto mb-3 h-10 w-10 text-emerald-400" />
+        <h1 class="mb-1 text-lg font-semibold text-white" data-testid="mcp-oauth-callback-done">
+          {{ t('settings.toolServers.oauth.callback.done', { server: serverId }) }}
+        </h1>
+        <p class="mb-6 text-sm text-slate-400">
+          {{ t('settings.toolServers.oauth.callback.doneHint') }}
+        </p>
+        <UButton block color="primary" @click="backToApp">
+          {{ t('settings.toolServers.oauth.callback.back') }}
+        </UButton>
+      </template>
+
+      <template v-else>
+        <UIcon name="i-lucide-alert-triangle" class="mx-auto mb-3 h-10 w-10 text-red-400" />
+        <h1 class="mb-1 text-lg font-semibold text-white" data-testid="mcp-oauth-callback-failed">
+          {{ t('settings.toolServers.oauth.callback.failedTitle') }}
+        </h1>
+        <p class="mb-6 text-sm break-words text-slate-400">{{ detail }}</p>
+        <UButton block color="neutral" variant="subtle" @click="backToApp">
+          {{ t('settings.toolServers.oauth.callback.back') }}
+        </UButton>
+      </template>
+    </div>
+  </div>
+</template>