@cat-factory/app 0.137.2 → 0.138.0

package/app/components/panels/GenericStructuredResultView.vue

@@ -8,7 +8,7 @@
 // the same seam the requirements / tester windows use.
 import { computed } from 'vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
-import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 
@@ -17,9 +17,12 @@ const execution = useExecutionStore()
 const agents = useAgentsStore()
 const { t } = useI18n()
 
-// Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: this window reads
-// its data straight off the execution step, so there's nothing to fetch on open.
-const { open, blockId, instanceId, stepIndex, close } = useResultView('generic-structured')
+// Shared seam contract (open/blockId/close). No `onOpen` loader: this window reads its data
+// straight off the execution step, so there's nothing to fetch on open. `manageEscape: false`
+// — `ResultWindowShell` owns Escape (and focus trap + scroll lock + stacking).
+const { open, blockId, instanceId, stepIndex, close } = useResultView('generic-structured', {
+  manageEscape: false,
+})
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 
 const instance = computed(() =>
@@ -54,94 +57,63 @@ const customJson = computed<string | null>(() => {
 </script>
 
 <template>
-  <Teleport to="body">
-    <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
-      @click.self="close"
-    >
-      <div
-        class="m-4 flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
-        role="dialog"
-        aria-modal="true"
-      >
-        <!-- Header -->
-        <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
-          <span
-            class="flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-500/15 text-cyan-300"
-          >
-            <UIcon :name="meta?.icon ?? 'i-lucide-braces'" class="h-4 w-4" />
-          </span>
-          <div class="min-w-0 flex-1">
-            <h2 class="truncate text-sm font-semibold text-slate-100">
-              {{ headerTitle }}
-            </h2>
-            <p class="truncate text-[11px] text-slate-400">
-              {{ meta?.description ?? t('panels.structuredResult.fallbackDescription') }}
-            </p>
-          </div>
-          <StepRestartControl
-            :instance-id="instanceId"
-            :step-index="stepIndex"
-            @restarted="close"
-          />
-          <button
-            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-            @click="close"
-          >
-            <UIcon name="i-lucide-x" class="h-4 w-4" />
-          </button>
-        </header>
-
-        <div class="flex min-h-0 flex-1">
-          <!-- Main: prose summary + structured JSON -->
-          <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-            <MarkdownProse
-              v-if="step?.output"
-              :text="step.output"
-              class="mb-4 text-[13px] leading-relaxed text-slate-300"
-            />
+  <ResultWindowShell
+    :open="open"
+    :icon="meta?.icon ?? 'i-lucide-braces'"
+    icon-class="bg-cyan-500/15 text-cyan-300"
+    :title="headerTitle"
+    :subtitle="meta?.description ?? t('panels.structuredResult.fallbackDescription')"
+    :step-ref="{ instanceId, stepIndex }"
+    width="4xl"
+    @close="close"
+  >
+    <div class="flex min-h-0 flex-1">
+      <!-- Main: prose summary + structured JSON -->
+      <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
+        <MarkdownProse
+          v-if="step?.output"
+          :text="step.output"
+          class="mb-4 text-[13px] leading-relaxed text-slate-300"
+        />
 
-            <template v-if="customJson">
-              <div class="mb-2 flex items-center gap-2">
-                <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                  {{ t('panels.structuredResult.structuredOutput') }}
-                </h3>
-                <CopyButton :text="customJson" class="-my-1" />
-              </div>
-              <pre
-                class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-[12px] leading-relaxed text-slate-200"
-              ><code>{{ customJson }}</code></pre>
-            </template>
-
-            <div
-              v-else-if="!step?.output"
-              class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
-            >
-              <UIcon name="i-lucide-braces" class="h-8 w-8 opacity-40" />
-              <p class="text-sm">{{ t('panels.structuredResult.noResult') }}</p>
-              <p class="max-w-sm text-[11px] text-slate-500">
-                {{ t('panels.structuredResult.noResultHint') }}
-              </p>
-            </div>
+        <template v-if="customJson">
+          <div class="mb-2 flex items-center gap-2">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+              {{ t('panels.structuredResult.structuredOutput') }}
+            </h3>
+            <CopyButton :text="customJson" class="-my-1" />
           </div>
+          <pre
+            class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-[12px] leading-relaxed text-slate-200"
+          ><code>{{ customJson }}</code></pre>
+        </template>
 
-          <!-- Sidebar: shared run metadata + observability rollup -->
-          <aside
-            class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
-          >
-            <StepRunMeta
-              v-if="step"
-              :step="step"
-              :instance-id="instanceId ?? undefined"
-              :step-number="stepIndex === null ? undefined : stepIndex + 1"
-              :total-steps="instance?.steps.length"
-              :run-failed="instance?.status === 'failed'"
-              :failure-at="instance?.failure?.occurredAt"
-            />
-          </aside>
+        <div
+          v-else-if="!step?.output"
+          class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+        >
+          <UIcon name="i-lucide-braces" class="h-8 w-8 opacity-40" />
+          <p class="text-sm">{{ t('panels.structuredResult.noResult') }}</p>
+          <p class="max-w-sm text-[11px] text-slate-500">
+            {{ t('panels.structuredResult.noResultHint') }}
+          </p>
         </div>
       </div>
+
+      <!-- Sidebar: shared run metadata + observability rollup -->
+      <aside
+        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+      >
+        <StepRunMeta
+          v-if="step"
+          :step="step"
+          :instance-id="instanceId ?? undefined"
+          :step-number="stepIndex === null ? undefined : stepIndex + 1"
+          :total-steps="instance?.steps.length"
+          :run-failed="instance?.status === 'failed'"
+          :failure-at="instance?.failure?.occurredAt"
+        />
+      </aside>
     </div>
-  </Teleport>
+  </ResultWindowShell>
 </template>

package/app/components/ralph/RalphLoopResultView.vue

@@ -7,7 +7,7 @@
 import { computed } from 'vue'
 import { agentKindMeta } from '~/utils/catalog'
 import type { RalphStepState } from '~/types/execution'
-import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 
@@ -15,8 +15,15 @@ const board = useBoardStore()
 const execution = useExecutionStore()
 const { t, d } = useI18n()
 
-const { open, blockId, instanceId, stepIndex, close } = useResultView('ralph-loop')
+// `manageEscape: false` — `ResultWindowShell` owns Escape (and focus trap + scroll lock +
+// stacking) via the shared overlay behaviour.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('ralph-loop', {
+  manageEscape: false,
+})
 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(() =>
@@ -88,185 +95,157 @@ const STATUS_META = computed<
 </script>
 
 <template>
-  <Teleport to="body">
-    <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
-      @click.self="close"
-    >
-      <div
-        class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
-        role="dialog"
-        aria-modal="true"
-        data-testid="ralph-loop-window"
+  <ResultWindowShell
+    :open="open"
+    :icon="meta.icon"
+    icon-class="bg-violet-500/15 text-violet-300"
+    :title="headerTitle"
+    :subtitle="t('ralph.subtitle')"
+    :step-ref="{ instanceId, stepIndex }"
+    width="3xl"
+    testid="ralph-loop-window"
+    @close="close"
+  >
+    <template #header-extras>
+      <UBadge
+        :color="STATUS_META[status].badge"
+        variant="subtle"
+        size="sm"
+        data-testid="ralph-status"
       >
-        <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
-          <span
-            class="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500/15 text-violet-300"
-          >
-            <UIcon :name="meta.icon" class="h-4 w-4" />
-          </span>
-          <div class="min-w-0 flex-1">
-            <h2 class="truncate text-sm font-semibold text-slate-100">
-              {{ meta.label }}{{ block ? ` — ${block.title}` : '' }}
-            </h2>
-            <p class="truncate text-[11px] text-slate-400">{{ t('ralph.subtitle') }}</p>
+        {{ STATUS_META[status].label }}
+      </UBadge>
+    </template>
+    <div class="flex min-h-0 flex-1">
+      <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
+        <div
+          v-if="!ralph"
+          class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+        >
+          <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
+          <p class="text-sm">{{ t('ralph.noActivity') }}</p>
+        </div>
+
+        <template v-else>
+          <!-- The completion criterion. -->
+          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            {{ t('ralph.validationCommand') }}
+          </h3>
+          <div class="relative rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2">
+            <CopyButton :text="ralph.validationCommand" class="absolute end-1 top-1" />
+            <code class="block whitespace-pre-wrap pe-8 font-mono text-[12px] text-slate-200">{{
+              ralph.validationCommand
+            }}</code>
           </div>
-          <UBadge
-            :color="STATUS_META[status].badge"
-            variant="subtle"
-            size="sm"
-            data-testid="ralph-status"
-          >
-            {{ STATUS_META[status].label }}
-          </UBadge>
-          <StepRestartControl
-            :instance-id="instanceId"
-            :step-index="stepIndex"
-            @restarted="close"
-          />
-          <button
-            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-            @click="close"
-          >
-            <UIcon name="i-lucide-x" class="h-4 w-4" />
-          </button>
-        </header>
 
-        <div class="flex min-h-0 flex-1">
-          <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-            <div
-              v-if="!ralph"
-              class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+          <!-- The most recent validation output. -->
+          <template v-if="ralph.lastValidationTail">
+            <h3
+              class="mb-1.5 mt-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
             >
-              <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
-              <p class="text-sm">{{ t('ralph.noActivity') }}</p>
+              {{ t('ralph.lastOutput', { exit: ralph.lastExitCode ?? '?' }) }}
+            </h3>
+            <div class="relative rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2">
+              <CopyButton :text="ralph.lastValidationTail" class="absolute end-1 top-1" />
+              <pre
+                class="whitespace-pre-wrap pe-8 font-mono text-[11px] leading-relaxed text-slate-400"
+                >{{ ralph.lastValidationTail }}</pre
+              >
             </div>
+          </template>
 
-            <template v-else>
-              <!-- The completion criterion. -->
-              <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                {{ t('ralph.validationCommand') }}
-              </h3>
-              <div class="relative rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2">
-                <CopyButton :text="ralph.validationCommand" class="absolute end-1 top-1" />
-                <code class="block whitespace-pre-wrap pe-8 font-mono text-[12px] text-slate-200">{{
-                  ralph.validationCommand
-                }}</code>
-              </div>
-
-              <!-- The most recent validation output. -->
-              <template v-if="ralph.lastValidationTail">
-                <h3
-                  class="mb-1.5 mt-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
-                >
-                  {{ t('ralph.lastOutput', { exit: ralph.lastExitCode ?? '?' }) }}
-                </h3>
-                <div class="relative rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2">
-                  <CopyButton :text="ralph.lastValidationTail" class="absolute end-1 top-1" />
-                  <pre
-                    class="whitespace-pre-wrap pe-8 font-mono text-[11px] leading-relaxed text-slate-400"
-                    >{{ ralph.lastValidationTail }}</pre
-                  >
-                </div>
-              </template>
+          <a
+            v-if="prUrl"
+            :href="prUrl"
+            target="_blank"
+            rel="noopener"
+            class="mt-3 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200 hover:underline"
+          >
+            {{ t('ralph.viewPr') }}
+            <UIcon name="i-lucide-external-link" class="h-3 w-3" />
+          </a>
 
-              <a
-                v-if="prUrl"
-                :href="prUrl"
-                target="_blank"
-                rel="noopener"
-                class="mt-3 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200 hover:underline"
+          <!-- Iteration history: what each pass produced and whether its validation passed. -->
+          <section v-if="attempts.length" class="mt-5">
+            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+              {{ t('ralph.iterationsHeading') }}
+            </h3>
+            <ol class="space-y-2">
+              <li
+                v-for="a in attempts"
+                :key="a.attempt"
+                class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+                data-testid="ralph-iteration"
               >
-                {{ t('ralph.viewPr') }}
-                <UIcon name="i-lucide-external-link" class="h-3 w-3" />
-              </a>
-
-              <!-- Iteration history: what each pass produced and whether its validation passed. -->
-              <section v-if="attempts.length" class="mt-5">
-                <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                  {{ t('ralph.iterationsHeading') }}
-                </h3>
-                <ol class="space-y-2">
-                  <li
-                    v-for="a in attempts"
-                    :key="a.attempt"
-                    class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
-                    data-testid="ralph-iteration"
-                  >
-                    <div class="flex items-center gap-2">
-                      <UIcon
-                        :name="a.validationPassed ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
-                        class="h-3.5 w-3.5"
-                        :class="a.validationPassed ? 'text-emerald-400' : 'text-rose-400'"
-                      />
-                      <span class="text-[12px] font-medium text-slate-200">
-                        {{ t('ralph.iteration', { number: a.attempt }) }}
-                      </span>
-                      <span class="text-[11px] text-slate-500">
-                        {{
-                          a.validationPassed
-                            ? t('ralph.iterationPassed')
-                            : t('ralph.iterationFailed', { exit: a.exitCode ?? '?' })
-                        }}
-                      </span>
-                      <span class="ms-auto text-[10px] text-slate-600">{{
-                        d(new Date(a.at), 'long')
-                      }}</span>
-                    </div>
-                    <p
-                      v-if="a.summary"
-                      class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
-                    >
-                      {{ a.summary }}
-                    </p>
-                  </li>
-                </ol>
-              </section>
-            </template>
-          </div>
+                <div class="flex items-center gap-2">
+                  <UIcon
+                    :name="a.validationPassed ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
+                    class="h-3.5 w-3.5"
+                    :class="a.validationPassed ? 'text-emerald-400' : 'text-rose-400'"
+                  />
+                  <span class="text-[12px] font-medium text-slate-200">
+                    {{ t('ralph.iteration', { number: a.attempt }) }}
+                  </span>
+                  <span class="text-[11px] text-slate-500">
+                    {{
+                      a.validationPassed
+                        ? t('ralph.iterationPassed')
+                        : t('ralph.iterationFailed', { exit: a.exitCode ?? '?' })
+                    }}
+                  </span>
+                  <span class="ms-auto text-[10px] text-slate-600">{{
+                    d(new Date(a.at), 'long')
+                  }}</span>
+                </div>
+                <p
+                  v-if="a.summary"
+                  class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
+                >
+                  {{ a.summary }}
+                </p>
+              </li>
+            </ol>
+          </section>
+        </template>
+      </div>
 
-          <aside
-            class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
-          >
-            <div v-if="ralph">
-              <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                {{ t('ralph.sidebar.state') }}
-              </h4>
-              <div class="flex items-center gap-2 text-[13px]">
-                <UIcon
-                  :name="STATUS_META[status].icon"
-                  class="h-4 w-4"
-                  :class="STATUS_META[status].text"
-                />
-                <span :class="STATUS_META[status].text">{{ STATUS_META[status].label }}</span>
-              </div>
-            </div>
-            <div v-if="ralph">
-              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                {{ t('ralph.sidebar.iterations') }}
-              </h4>
-              <p class="text-[12px] text-slate-300" data-testid="ralph-iteration-count">
-                {{
-                  t('ralph.sidebar.count', { attempts: ralph.attempts, max: ralph.maxIterations })
-                }}
-              </p>
-            </div>
-            <StepRunMeta
-              v-if="step"
-              :step="step"
-              :instance-id="instanceId ?? undefined"
-              :step-number="stepIndex === null ? undefined : stepIndex + 1"
-              :total-steps="instance?.steps.length"
-              :run-failed="instance?.status === 'failed'"
-              :failure-at="instance?.failure?.occurredAt"
+      <aside
+        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+      >
+        <div v-if="ralph">
+          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            {{ t('ralph.sidebar.state') }}
+          </h4>
+          <div class="flex items-center gap-2 text-[13px]">
+            <UIcon
+              :name="STATUS_META[status].icon"
+              class="h-4 w-4"
+              :class="STATUS_META[status].text"
             />
-            <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
-              {{ t('ralph.sidebar.footer') }}
-            </p>
-          </aside>
+            <span :class="STATUS_META[status].text">{{ STATUS_META[status].label }}</span>
+          </div>
         </div>
-      </div>
+        <div v-if="ralph">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            {{ t('ralph.sidebar.iterations') }}
+          </h4>
+          <p class="text-[12px] text-slate-300" data-testid="ralph-iteration-count">
+            {{ t('ralph.sidebar.count', { attempts: ralph.attempts, max: ralph.maxIterations }) }}
+          </p>
+        </div>
+        <StepRunMeta
+          v-if="step"
+          :step="step"
+          :instance-id="instanceId ?? undefined"
+          :step-number="stepIndex === null ? undefined : stepIndex + 1"
+          :total-steps="instance?.steps.length"
+          :run-failed="instance?.status === 'failed'"
+          :failure-at="instance?.failure?.occurredAt"
+        />
+        <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
+          {{ t('ralph.sidebar.footer') }}
+        </p>
+      </aside>
     </div>
-  </Teleport>
+  </ResultWindowShell>
 </template>