@cat-factory/app 0.6.0 → 0.7.2

package/app/components/gates/GateResultView.vue

@@ -12,11 +12,13 @@ import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
+const ui = useUiStore()
 
 // Synchronous window: it reads its state straight off the execution step, so there's
 // nothing to fetch on open (no `onOpen` loader).
 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 instance = computed(() =>
   instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
@@ -35,6 +37,22 @@ const helperMeta = computed(() => agentKindMeta(helperKind.value))
 const failingChecks = computed(() => gate.value?.failingChecks ?? [])
 const shortSha = computed(() => (gate.value?.headSha ? gate.value.headSha.slice(0, 7) : null))
 
+// The helper-agent attempts this gate dispatched, newest first for the timeline.
+const attempts = computed(() => [...(gate.value?.attemptLog ?? [])].reverse())
+
+function formatClock(ms?: number | null): string | null {
+  return ms ? new Date(ms).toLocaleString() : null
+}
+
+// The run id (execution instance id) this gate belongs to — copyable for support /
+// log lookups, and a jump into the run's observability view.
+async function copyRunId() {
+  if (instanceId.value) await navigator.clipboard?.writeText(instanceId.value)
+}
+function openObservability() {
+  if (instanceId.value) ui.openObservability(instanceId.value)
+}
+
 /**
  * The display status — a roll-up of the persisted gate state + the run's status, so the
  * window reads as a conclusion rather than raw fields:
@@ -189,7 +207,21 @@ const conflictVerdict = computed(() => {
                     class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5"
                   >
                     <UIcon name="i-lucide-circle-x" class="h-3.5 w-3.5 shrink-0 text-rose-400" />
-                    <span class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
+                    <a
+                      v-if="c.url"
+                      :href="c.url"
+                      target="_blank"
+                      rel="noopener"
+                      class="group min-w-0 flex-1 truncate text-[13px] text-sky-300 hover:text-sky-200 hover:underline"
+                      :title="`Open ${c.name} on GitHub`"
+                    >
+                      {{ c.name }}
+                      <UIcon
+                        name="i-lucide-external-link"
+                        class="ml-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
+                      />
+                    </a>
+                    <span v-else class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
                       c.name
                     }}</span>
                     <span class="shrink-0 text-[11px] uppercase text-rose-300">
@@ -202,7 +234,7 @@ const conflictVerdict = computed(() => {
                 </p>
               </template>
 
-              <!-- Conflicts: verdict + note (no file-level detail from GitHub) -->
+              <!-- Conflicts: verdict + the resolver's account of what it left -->
               <template v-else>
                 <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                   Mergeability
@@ -217,11 +249,64 @@ const conflictVerdict = computed(() => {
                   />
                   <span class="text-[13px] text-slate-200">{{ conflictVerdict }}</span>
                 </div>
+                <!-- GitHub's API reports mergeability as a single bit (no file list), but the
+                     conflict resolver discovers the conflicting files in the container and
+                     reports them back — surface that account here. -->
+                <p
+                  v-if="gate.lastFailureSummary"
+                  class="mt-2 whitespace-pre-wrap rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] leading-relaxed text-slate-300"
+                >
+                  {{ gate.lastFailureSummary }}
+                </p>
                 <p class="mt-2 text-[11px] leading-relaxed text-slate-500">
-                  GitHub reports mergeability as a single verdict, so there's no file-level conflict
-                  list here. The conflict resolver inspects the branch directly.
+                  GitHub's API doesn't expose a file-level conflict list, so the resolver inspects
+                  the branch directly.<template v-if="prUrl">
+                    For the exact conflicting hunks, open the
+                    <a
+                      :href="prUrl"
+                      target="_blank"
+                      rel="noopener"
+                      class="text-sky-300 hover:text-sky-200 hover:underline"
+                      >pull request on GitHub</a
+                    >.</template
+                  >
                 </p>
               </template>
+
+              <!-- Attempt history (both gates): what each helper run did and how it ended. -->
+              <section v-if="attempts.length" class="mt-5">
+                <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  {{ helperMeta.label }} attempts
+                </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"
+                  >
+                    <div class="flex items-center gap-2">
+                      <span class="text-[12px] font-semibold text-slate-200"
+                        >Attempt {{ a.attempt }}</span
+                      >
+                      <UBadge
+                        :color="a.outcome === 'failed' ? 'error' : 'neutral'"
+                        variant="subtle"
+                        size="sm"
+                        >{{ a.outcome }}</UBadge
+                      >
+                      <span v-if="formatClock(a.at)" class="ml-auto text-[11px] text-slate-500">{{
+                        formatClock(a.at)
+                      }}</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>
 
@@ -270,6 +355,26 @@ const conflictVerdict = computed(() => {
               <p class="break-all text-[12px] text-slate-300">{{ step.model }}</p>
             </div>
 
+            <div v-if="instanceId">
+              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                Run
+              </h4>
+              <p
+                class="cursor-pointer break-all font-mono text-[12px] text-slate-400 hover:text-slate-200"
+                :title="`${instanceId} — click to copy`"
+                @click="copyRunId"
+              >
+                {{ instanceId }}
+              </p>
+              <button
+                class="mt-1 inline-flex items-center gap-1 text-[11px] text-sky-300 hover:text-sky-200"
+                @click="openObservability"
+              >
+                <UIcon name="i-lucide-activity" class="h-3 w-3" />
+                Open observability
+              </button>
+            </div>
+
             <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
               A gate runs a programmatic precheck and only spins up the
               {{ helperMeta.label }} when it fails — a green check advances with nothing spun up.

package/app/components/layout/SideBar.vue

@@ -262,6 +262,17 @@ watch(
         >
           Workspace settings
         </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-message-square-reply"
+          class="justify-start"
+          @click="ui.openIssueWriteback()"
+        >
+          Issue tracker writeback
+        </UButton>
         <UButton
           block
           color="primary"

package/app/components/observability/StepMetricsBar.vue

@@ -1,102 +1,102 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { StepMetrics } from '~/types/execution'
-import {
-  formatMs,
-  formatTokens,
-  headroomColor,
-  headroomRatio,
-  pct,
-  transportRatio,
-} from '~/utils/observability'
-
-// Compact, at-a-glance LLM rollup for one pipeline step: token usage, an
-// output-limit headroom bar (how close the step ran to truncation), a
-// transport-vs-execution latency split, and error/warning badges. Rendered inline
-// on the step surfaces (step detail, pipeline timeline). A no-op when there are no
-// recorded calls. Clicking anywhere emits `inspect` so a parent can open the
-// drill-down panel.
-const props = defineProps<{ metrics: StepMetrics; clickable?: boolean }>()
-defineEmits<{ inspect: [] }>()
-
-const m = computed(() => props.metrics)
-const headroom = computed(() => headroomRatio(m.value))
-const transport = computed(() => transportRatio(m.value))
-const headroomTone = computed(() => headroomColor(headroom.value, m.value.truncatedCalls > 0))
-</script>
-
-<template>
-  <div
-    v-if="m.calls > 0"
-    class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-[12px]"
-    :class="
-      clickable ? 'cursor-pointer transition hover:border-slate-700 hover:bg-slate-900/70' : ''
-    "
-    :role="clickable ? 'button' : undefined"
-    @click="clickable ? $emit('inspect') : undefined"
-  >
-    <!-- header line: call count + tokens + warning/error badges -->
-    <div class="flex items-center gap-2">
-      <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
-      <span class="text-slate-300"> {{ m.calls }} {{ m.calls === 1 ? 'call' : 'calls' }} </span>
-      <span class="text-slate-500">·</span>
-      <span class="tabular-nums text-slate-400" title="Prompt / completion tokens">
-        {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
-      </span>
-      <div class="ml-auto flex items-center gap-1">
-        <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
-          {{ m.errors }} error{{ m.errors === 1 ? '' : 's' }}
-        </UBadge>
-        <UBadge v-if="m.warnings > 0" color="warning" variant="subtle" size="sm">
-          {{ m.warnings }} warning{{ m.warnings === 1 ? '' : 's' }}
-        </UBadge>
-        <UIcon v-if="clickable" name="i-lucide-chevron-right" class="h-3.5 w-3.5 text-slate-600" />
-      </div>
-    </div>
-
-    <!-- output-limit headroom -->
-    <div v-if="headroom !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">Output limit</span>
-        <span class="tabular-nums" :class="headroomTone">
-          {{ formatTokens(m.peakCompletionTokens) }} /
-          {{ formatTokens(m.maxOutputTokens ?? 0) }} ({{ pct(headroom) }}%)
-        </span>
-      </div>
-      <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
-        <div
-          class="h-full rounded-full transition-all duration-500"
-          :class="
-            m.truncatedCalls > 0 || headroom >= 0.98
-              ? 'bg-rose-400'
-              : headroom >= 0.8
-                ? 'bg-amber-400'
-                : 'bg-emerald-400'
-          "
-          :style="{ width: `${Math.max(2, pct(headroom))}%` }"
-        />
-      </div>
-      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-rose-400">
-        {{ m.truncatedCalls }} call{{ m.truncatedCalls === 1 ? '' : 's' }} truncated at the limit
-      </p>
-    </div>
-
-    <!-- transport overhead vs model execution -->
-    <div v-if="transport !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">Transport vs execution</span>
-        <span class="tabular-nums text-slate-400">
-          {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}
-        </span>
-      </div>
-      <div class="mt-1 flex h-1 overflow-hidden rounded-full bg-slate-700/60">
-        <div
-          class="h-full bg-sky-400/80"
-          :style="{ width: `${pct(transport)}%` }"
-          title="Transport / proxy overhead"
-        />
-        <div class="h-full bg-indigo-400/80 flex-1" title="Model execution" />
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { StepMetrics } from '~/types/execution'
+import {
+  formatMs,
+  formatTokens,
+  headroomColor,
+  headroomRatio,
+  pct,
+  transportRatio,
+} from '~/utils/observability'
+
+// Compact, at-a-glance LLM rollup for one pipeline step: token usage, an
+// output-limit headroom bar (how close the step ran to truncation), a
+// transport-vs-execution latency split, and error/warning badges. Rendered inline
+// on the step surfaces (step detail, pipeline timeline). A no-op when there are no
+// recorded calls. Clicking anywhere emits `inspect` so a parent can open the
+// drill-down panel.
+const props = defineProps<{ metrics: StepMetrics; clickable?: boolean }>()
+defineEmits<{ inspect: [] }>()
+
+const m = computed(() => props.metrics)
+const headroom = computed(() => headroomRatio(m.value))
+const transport = computed(() => transportRatio(m.value))
+const headroomTone = computed(() => headroomColor(headroom.value, m.value.truncatedCalls > 0))
+</script>
+
+<template>
+  <div
+    v-if="m.calls > 0"
+    class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-[12px]"
+    :class="
+      clickable ? 'cursor-pointer transition hover:border-slate-700 hover:bg-slate-900/70' : ''
+    "
+    :role="clickable ? 'button' : undefined"
+    @click="clickable ? $emit('inspect') : undefined"
+  >
+    <!-- header line: call count + tokens + warning/error badges -->
+    <div class="flex items-center gap-2">
+      <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
+      <span class="text-slate-300"> {{ m.calls }} {{ m.calls === 1 ? 'call' : 'calls' }} </span>
+      <span class="text-slate-500">·</span>
+      <span class="tabular-nums text-slate-400" title="Prompt / completion tokens">
+        {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
+      </span>
+      <div class="ml-auto flex items-center gap-1">
+        <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
+          {{ m.errors }} error{{ m.errors === 1 ? '' : 's' }}
+        </UBadge>
+        <UBadge v-if="m.warnings > 0" color="warning" variant="subtle" size="sm">
+          {{ m.warnings }} warning{{ m.warnings === 1 ? '' : 's' }}
+        </UBadge>
+        <UIcon v-if="clickable" name="i-lucide-chevron-right" class="h-3.5 w-3.5 text-slate-600" />
+      </div>
+    </div>
+
+    <!-- output-limit headroom -->
+    <div v-if="headroom !== null" class="mt-2">
+      <div class="flex items-center justify-between text-[11px]">
+        <span class="text-slate-500">Output limit</span>
+        <span class="tabular-nums" :class="headroomTone">
+          {{ formatTokens(m.peakCompletionTokens) }} /
+          {{ formatTokens(m.maxOutputTokens ?? 0) }} ({{ pct(headroom) }}%)
+        </span>
+      </div>
+      <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full rounded-full transition-all duration-500"
+          :class="
+            m.truncatedCalls > 0 || headroom >= 0.98
+              ? 'bg-rose-400'
+              : headroom >= 0.8
+                ? 'bg-amber-400'
+                : 'bg-emerald-400'
+          "
+          :style="{ width: `${Math.max(2, pct(headroom))}%` }"
+        />
+      </div>
+      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-rose-400">
+        {{ m.truncatedCalls }} call{{ m.truncatedCalls === 1 ? '' : 's' }} truncated at the limit
+      </p>
+    </div>
+
+    <!-- transport overhead vs model execution -->
+    <div v-if="transport !== null" class="mt-2">
+      <div class="flex items-center justify-between text-[11px]">
+        <span class="text-slate-500">Transport vs execution</span>
+        <span class="tabular-nums text-slate-400">
+          {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}
+        </span>
+      </div>
+      <div class="mt-1 flex h-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full bg-sky-400/80"
+          :style="{ width: `${pct(transport)}%` }"
+          title="Transport / proxy overhead"
+        />
+        <div class="h-full bg-indigo-400/80 flex-1" title="Model execution" />
+      </div>
+    </div>
+  </div>
+</template>