@cat-factory/app 0.42.1 → 0.44.0

package/app/components/settings/IssueTrackerPanel.vue

@@ -25,6 +25,7 @@ const toast = useToast()
 // --- filing tracker + writeback (one Save, persisted on tracker settings) -----
 const trackerKind = ref<TrackerKind | null>(null)
 const jiraProjectKey = ref('')
+const linearTeamId = ref('')
 const commentOnPrOpen = ref(false)
 const resolveOnMerge = ref(false)
 const saving = ref(false)
@@ -32,6 +33,7 @@ const saving = ref(false)
 function hydrate() {
   trackerKind.value = tracker.settings.tracker
   jiraProjectKey.value = tracker.settings.jiraProjectKey ?? ''
+  linearTeamId.value = tracker.settings.linearTeamId ?? ''
   commentOnPrOpen.value = tracker.settings.writebackCommentOnPrOpen
   resolveOnMerge.value = tracker.settings.writebackResolveOnMerge
 }
@@ -48,17 +50,22 @@ watch(() => tracker.settings, hydrate)
 // Per-source live state (available = usable now; enabled = offered to the workspace).
 const github = computed(() => tasks.descriptorFor('github'))
 const jira = computed(() => tasks.descriptorFor('jira'))
+const linear = computed(() => tasks.descriptorFor('linear'))
 
 // A tracker can only file where it can authenticate: GitHub rides the installed
-// App, Jira needs a connection. Selecting an unusable tracker is allowed (it just
-// won't file until set up), but we surface the gap inline.
+// App, Jira/Linear need a connection. Selecting an unusable tracker is allowed (it
+// just won't file until set up), but we surface the gap inline.
 const githubAvailable = computed(() => github.value?.available ?? false)
 const jiraConnected = computed(() => tasks.isConnected('jira'))
+const linearConnected = computed(() => tasks.isConnected('linear'))
 
-// Jira needs a project key to file into; block Save on an empty one when picked.
-const canSave = computed(
-  () => trackerKind.value !== 'jira' || jiraProjectKey.value.trim().length > 0,
-)
+// Jira needs a project key and Linear needs a team id to file into; block Save on
+// an empty one when that tracker is picked.
+const canSave = computed(() => {
+  if (trackerKind.value === 'jira') return jiraProjectKey.value.trim().length > 0
+  if (trackerKind.value === 'linear') return linearTeamId.value.trim().length > 0
+  return true
+})
 
 async function save() {
   if (!canSave.value) return
@@ -67,6 +74,7 @@ async function save() {
     await tracker.save({
       tracker: trackerKind.value,
       jiraProjectKey: trackerKind.value === 'jira' ? jiraProjectKey.value.trim() : null,
+      linearTeamId: trackerKind.value === 'linear' ? linearTeamId.value.trim() : null,
       writebackCommentOnPrOpen: commentOnPrOpen.value,
       writebackResolveOnMerge: resolveOnMerge.value,
     })
@@ -197,6 +205,15 @@ const STATUS_UI: Record<
         >
           Jira
         </UButton>
+        <UButton
+          icon="i-lucide-square-kanban"
+          size="sm"
+          :color="trackerKind === 'linear' ? 'primary' : 'neutral'"
+          :variant="trackerKind === 'linear' ? 'solid' : 'subtle'"
+          @click="trackerKind = 'linear'"
+        >
+          Linear
+        </UButton>
       </div>
 
       <!-- Inline readiness hints for the picked tracker. -->
@@ -210,6 +227,14 @@ const STATUS_UI: Record<
         <button class="underline" @click="ui.openTaskConnect('jira')">Connect it</button> to file
         and link issues.
       </p>
+      <p
+        v-else-if="trackerKind === 'linear' && !linearConnected"
+        class="text-[11px] text-amber-400"
+      >
+        Linear isn't connected yet.
+        <button class="underline" @click="ui.openTaskConnect('linear')">Connect it</button> to file
+        and link issues.
+      </p>
 
       <UFormField v-if="trackerKind === 'jira'" label="Jira project key" class="w-48">
         <UInput v-model="jiraProjectKey" placeholder="ENG" size="sm" class="w-full" />
@@ -217,6 +242,15 @@ const STATUS_UI: Record<
           <span class="text-[11px] text-slate-500">New tickets are filed under this project.</span>
         </template>
       </UFormField>
+
+      <UFormField v-if="trackerKind === 'linear'" label="Linear team id" class="w-64">
+        <UInput v-model="linearTeamId" placeholder="team_…" size="sm" class="w-full" />
+        <template #help>
+          <span class="text-[11px] text-slate-500">
+            New issues are created under this team (Linear requires a team to create an issue).
+          </span>
+        </template>
+      </UFormField>
     </section>
 
     <!-- 2. Linking sources ---------------------------------------------------->
@@ -344,6 +378,62 @@ const STATUS_UI: Record<
           :ui="{ description: 'text-[11px]' }"
         />
       </div>
+
+      <!-- Linear source -->
+      <div class="rounded-lg border border-slate-800 bg-slate-800/40 px-3 py-2.5">
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex min-w-0 items-center gap-2.5">
+            <UIcon name="i-lucide-square-kanban" class="h-5 w-5 shrink-0 text-slate-300" />
+            <div class="min-w-0">
+              <div class="text-sm font-medium text-slate-200">Linear</div>
+              <div class="text-[11px] text-slate-500">
+                {{ linearConnected ? 'Connected.' : 'Connect with a Linear personal API key.' }}
+              </div>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-2">
+            <UButton
+              v-if="linearConnected"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-stethoscope"
+              :loading="tasks.checking === 'linear'"
+              @click="checkSetup('linear')"
+            >
+              Check setup
+            </UButton>
+            <USwitch
+              v-if="linear?.available"
+              :model-value="linear?.enabled ?? false"
+              :loading="togglingSource === 'linear'"
+              @update:model-value="(v: boolean) => toggleSource('linear', v)"
+            />
+            <UButton
+              v-else
+              size="xs"
+              color="neutral"
+              variant="soft"
+              icon="i-lucide-plug"
+              @click="ui.openTaskConnect('linear')"
+            >
+              Connect
+            </UButton>
+          </div>
+        </div>
+        <UAlert
+          v-if="tasks.diagnostics.linear"
+          class="mt-2.5"
+          :color="STATUS_UI[tasks.diagnostics.linear.status].color"
+          variant="subtle"
+          :icon="STATUS_UI[tasks.diagnostics.linear.status].icon"
+          :description="
+            tasks.diagnostics.linear.message +
+            (tasks.diagnostics.linear.detail ? ` ${tasks.diagnostics.linear.detail}` : '')
+          "
+          :ui="{ description: 'text-[11px]' }"
+        />
+      </div>
     </section>
 
     <!-- 3. Writeback ---------------------------------------------------------->

package/app/components/testing/TestReportWindow.vue

@@ -10,13 +10,21 @@
 // from the report itself: each `tested` entry is the scenario the Tester walked, and
 // outcomes / concerns are grouped under it by name. Deeper linkage to the in-repo
 // `spec/features/*.feature` files would need a spec endpoint (a future enhancement).
-import type { TestConcern, TestOutcome, TestReport } from '~/types/domain'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import type { TestConcern, TestOutcome, TestReport, TestScreenshot } from '~/types/domain'
+import { useArtifactBlobs } from '~/composables/useArtifactBlobs'
+import { useFocusTrap } from '~/composables/useFocusTrap'
+import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
 
+// Per-window blob cache for the captured screenshots; revoked on unmount.
+const blobs = useArtifactBlobs()
+onUnmounted(() => blobs.revokeAll())
+
 // Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: this window reads
 // its report straight off the execution step, so there's nothing to fetch on open.
 const { open, blockId, instanceId, stepIndex, close } = useResultView('tester')
@@ -32,6 +40,18 @@ const step = computed(() => {
 const report = computed<TestReport | null>(() => step.value?.test?.lastReport ?? null)
 const testState = computed(() => step.value?.test ?? null)
 
+const screenshots = computed<TestScreenshot[]>(() => report.value?.screenshots ?? [])
+// Resolve each capture into an object URL for the gallery + lightbox. The shared cache
+// dedupes, so the lightbox reuses what the thumbnails fetched. (The reference design is not
+// shown in this window — that's the visual-confirmation gate's job — so we don't fetch it.)
+watch(
+  screenshots,
+  (next) => {
+    for (const s of next) void blobs.resolve(s.artifactId)
+  },
+  { immediate: true },
+)
+
 const STATUS_META: Record<TestOutcome['status'], { icon: string; text: string; label: string }> = {
   passed: { icon: 'i-lucide-circle-check', text: 'text-emerald-400', label: 'Passed' },
   failed: { icon: 'i-lucide-circle-x', text: 'text-rose-400', label: 'Failed' },
@@ -61,6 +81,7 @@ interface ScenarioGroup {
   other: boolean
   outcomes: TestOutcome[]
   concerns: TestConcern[]
+  screenshots: TestScreenshot[]
   status: 'passed' | 'failed' | 'skipped' | 'mixed' | 'empty'
 }
 
@@ -74,16 +95,18 @@ function rollUp(outcomes: TestOutcome[], concerns: TestConcern[]): ScenarioGroup
   return 'mixed'
 }
 
-// Group outcomes + concerns under the scenarios the Tester listed in `tested`. An
-// outcome/concern falls under a scenario when their names are related; anything left
-// over lands in a synthetic "Other checks" bucket so nothing is dropped.
-const groups = computed<ScenarioGroup[]>(() => {
+// Group outcomes + concerns + screenshots under the scenarios the Tester listed in
+// `tested`. An item falls under a scenario when their names are related; anything left over
+// lands in a synthetic "Other checks" bucket / the standalone gallery so nothing is dropped.
+const scenarioLayout = computed<{ groups: ScenarioGroup[]; ungrouped: TestScreenshot[] }>(() => {
   const r = report.value
-  if (!r) return []
+  if (!r) return { groups: [], ungrouped: [] }
   const outcomes = r.outcomes ?? []
   const concerns = r.concerns ?? []
+  const shots = r.screenshots ?? []
   const usedOutcome = new Set<number>()
   const usedConcern = new Set<number>()
+  const usedShot = new Set<number>()
   const out: ScenarioGroup[] = []
 
   r.tested.forEach((area, i) => {
@@ -103,12 +126,21 @@ const groups = computed<ScenarioGroup[]>(() => {
       }
       return false
     })
+    const groupShots = shots.filter((s, si) => {
+      if (usedShot.has(si)) return false
+      if (related(area, s.view) || groupOutcomes.some((o) => related(o.name, s.view))) {
+        usedShot.add(si)
+        return true
+      }
+      return false
+    })
     out.push({
       key: `s${i}`,
       title: area,
       other: false,
       outcomes: groupOutcomes,
       concerns: groupConcerns,
+      screenshots: groupShots,
       status: rollUp(groupOutcomes, groupConcerns),
     })
   })
@@ -122,11 +154,38 @@ const groups = computed<ScenarioGroup[]>(() => {
       other: true,
       outcomes: leftoverOutcomes,
       concerns: leftoverConcerns,
+      screenshots: [],
       status: rollUp(leftoverOutcomes, leftoverConcerns),
     })
   }
-  return out
+  const ungrouped = shots.filter((_, si) => !usedShot.has(si))
+  return { groups: out, ungrouped }
 })
+const groups = computed(() => scenarioLayout.value.groups)
+const ungroupedScreenshots = computed(() => scenarioLayout.value.ungrouped)
+
+// Shared lightbox over ALL captured screenshots (in report order).
+const lightboxItems = computed(() =>
+  screenshots.value.map((s) => ({
+    artifactId: s.artifactId,
+    label: s.view,
+    alt: `${s.view} (screenshot)`,
+  })),
+)
+const lightboxOpen = ref(false)
+const lightboxIndex = ref(0)
+function openShot(artifactId: string) {
+  const i = lightboxItems.value.findIndex((it) => it.artifactId === artifactId)
+  lightboxIndex.value = i < 0 ? 0 : i
+  lightboxOpen.value = true
+}
+
+// Focus management for the modal panel; hands the Tab trap off to the lightbox while it's open.
+const dialogRoot = ref<HTMLElement | null>(null)
+useFocusTrap(
+  dialogRoot,
+  computed(() => open.value && !lightboxOpen.value),
+)
 
 const sortedConcerns = computed<TestConcern[]>(() => {
   const r = report.value
@@ -175,7 +234,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
       @click.self="close"
     >
       <div
-        class="m-4 flex w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        ref="dialogRoot"
+        tabindex="-1"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Test report"
+        class="m-4 flex w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl focus:outline-none"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
@@ -272,6 +336,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     >
                       {{ g.title }}
                     </span>
+                    <UIcon
+                      v-if="g.screenshots.length"
+                      name="i-lucide-camera"
+                      class="h-3.5 w-3.5 shrink-0 text-slate-500"
+                      :title="`${g.screenshots.length} screenshot${g.screenshots.length === 1 ? '' : 's'}`"
+                    />
                     <span class="shrink-0 text-[11px] text-slate-500">
                       {{ g.outcomes.length }} check{{ g.outcomes.length === 1 ? '' : 's' }}
                       <template v-if="g.concerns.length">
@@ -329,9 +399,72 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                         </p>
                       </div>
                     </div>
+
+                    <!-- Screenshots captured for this scenario -->
+                    <div v-if="g.screenshots.length" class="mt-2 flex flex-wrap gap-2">
+                      <button
+                        v-for="(s, si) in g.screenshots"
+                        :key="`shot${si}`"
+                        class="group relative h-20 w-28 shrink-0 overflow-hidden rounded border border-slate-800 bg-slate-950/60 hover:border-slate-600"
+                        :title="s.view"
+                        @click="openShot(s.artifactId)"
+                      >
+                        <img
+                          v-if="blobs.urlFor(s.artifactId)"
+                          :src="blobs.urlFor(s.artifactId)"
+                          :alt="`${s.view} (screenshot)`"
+                          class="h-full w-full object-cover object-top"
+                        />
+                        <span
+                          v-else
+                          class="flex h-full w-full items-center justify-center text-[10px] text-slate-600"
+                        >
+                          {{ blobs.statusFor(s.artifactId) === 'error' ? 'Failed' : 'Loading…' }}
+                        </span>
+                        <span
+                          class="absolute inset-x-0 bottom-0 truncate bg-slate-950/80 px-1 py-0.5 text-[9px] text-slate-300"
+                          >{{ s.view }}</span
+                        >
+                      </button>
+                    </div>
                   </div>
                 </li>
               </ul>
+
+              <!-- Standalone gallery: any captures not mapped to a scenario above -->
+              <section v-if="ungroupedScreenshots.length" class="mt-5">
+                <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  Screenshots
+                </h3>
+                <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+                  <button
+                    v-for="(s, si) in ungroupedScreenshots"
+                    :key="`gal${si}`"
+                    class="group relative aspect-video overflow-hidden rounded-lg border border-slate-800 bg-slate-950/60 hover:border-slate-600"
+                    :title="s.view"
+                    @click="openShot(s.artifactId)"
+                  >
+                    <img
+                      v-if="blobs.urlFor(s.artifactId)"
+                      :src="blobs.urlFor(s.artifactId)"
+                      :alt="`${s.view} (screenshot)`"
+                      class="h-full w-full object-cover object-top"
+                    />
+                    <span
+                      v-else
+                      class="flex h-full w-full items-center justify-center text-[11px] text-slate-600"
+                    >
+                      {{
+                        blobs.statusFor(s.artifactId) === 'error' ? 'Failed to load' : 'Loading…'
+                      }}
+                    </span>
+                    <span
+                      class="absolute inset-x-0 bottom-0 truncate bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300"
+                      >{{ s.view }}</span
+                    >
+                  </button>
+                </div>
+              </section>
             </template>
           </div>
 
@@ -409,5 +542,13 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </div>
       </div>
     </div>
+
+    <!-- Shared zoom/pan viewer for the captured screenshots. -->
+    <ArtifactLightbox
+      v-model:open="lightboxOpen"
+      v-model:index="lightboxIndex"
+      :items="lightboxItems"
+      :blobs="blobs"
+    />
   </Teleport>
 </template>