@cat-factory/app 0.304.0 → 0.305.0

package/app/components/guidedReview/GuidedReview.logic.spec.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest'
+import {
+  GUIDED_REVIEW_FAILURE_REASONS,
+  guidedReviewDroppedDraftReasonSchema,
+} from '@cat-factory/contracts'
+import en from '../../../i18n/locales/en.json'
+import {
+  NEW_THREAD_TAB,
+  canAsk,
+  citationLabel,
+  draftAnchor,
+  droppedAnchor,
+  failureKey,
+  keptDrafts,
+  isStale,
+  reviewTaskTarget,
+  suggestedQuestionThread,
+  threadTabs,
+} from './GuidedReview.logic'
+
+describe('citationLabel', () => {
+  it('names a span, a line, or a whole file', () => {
+    expect(citationLabel({ path: 'a.ts', startLine: 3, endLine: 9 })).toBe('a.ts:3-9')
+    expect(citationLabel({ path: 'a.ts', startLine: 3, endLine: 3 })).toBe('a.ts:3')
+    expect(citationLabel({ path: 'a.ts', startLine: 3 })).toBe('a.ts:3')
+    expect(citationLabel({ path: 'a.ts' })).toBe('a.ts')
+  })
+})
+
+describe('canAsk', () => {
+  it('waits only on a live answer in this thread', () => {
+    expect(canAsk([{ role: 'user', status: 'complete' }])).toBe(true)
+    expect(canAsk([{ role: 'assistant', status: 'pending' }])).toBe(false)
+    expect(canAsk([{ role: 'assistant', status: 'running' }])).toBe(false)
+    expect(canAsk([{ role: 'assistant', status: 'failed' }])).toBe(true)
+  })
+})
+
+describe('threadTabs', () => {
+  const view = { threads: [{ id: 't1' }, { id: 't2' }] } as never
+  it('lists threads oldest first and adds the unsaved tab only while it is open', () => {
+    expect(threadTabs(view, false)).toEqual(['t1', 't2'])
+    expect(threadTabs(view, true)).toEqual(['t1', 't2', NEW_THREAD_TAB])
+    expect(threadTabs(undefined, true)).toEqual([NEW_THREAD_TAB])
+  })
+})
+
+describe('suggestedQuestionThread', () => {
+  it('asks the suggestion in a thread of its own', () => {
+    expect(suggestedQuestionThread('Is it bounded?')).toEqual({
+      question: { content: 'Is it bounded?' },
+    })
+  })
+})
+
+describe('reviewTaskTarget', () => {
+  const repo = { owner: 'acme', name: 'shop', provider: 'gitlab' as const }
+  it('prefers the stored number and falls back to the URL', () => {
+    expect(reviewTaskTarget({ prNumber: 7 }, repo)).toEqual({
+      owner: 'acme',
+      repo: 'shop',
+      prNumber: 7,
+      provider: 'gitlab',
+    })
+    expect(
+      reviewTaskTarget({ prUrl: 'https://gitlab.example/acme/shop/-/merge_requests/42' }, repo)
+        ?.prNumber,
+    ).toBe(42)
+    expect(reviewTaskTarget({ prUrl: 'https://github.com/acme/shop/pull/5' }, repo)?.prNumber).toBe(
+      5,
+    )
+  })
+
+  it('is null without a repository or a number', () => {
+    expect(reviewTaskTarget({ prNumber: 7 }, undefined)).toBeNull()
+    expect(reviewTaskTarget({ prUrl: 'https://example.com/nothing' }, repo)).toBeNull()
+  })
+
+  it('reads the URL the way the dispatch does', () => {
+    expect(reviewTaskTarget({ prUrl: 'acme/shop#88' }, repo)?.prNumber).toBe(88)
+    expect(
+      reviewTaskTarget({ prNumber: 0, prUrl: 'https://github.com/acme/shop/pull/5' }, repo)
+        ?.prNumber,
+    ).toBe(5)
+  })
+})
+
+describe('failure and draft labels', () => {
+  it('translates each failure reason under its own key', () => {
+    expect(failureKey('budget_exhausted')).toBe('guidedReview.failure.budget_exhausted')
+  })
+
+  it('ships copy for every failure and dropped-draft reason the contract can send', () => {
+    const catalog = en.guidedReview as unknown as Record<string, Record<string, string>>
+    for (const reason of GUIDED_REVIEW_FAILURE_REASONS) {
+      expect(catalog.failure![reason], reason).toBeTruthy()
+    }
+    for (const reason of guidedReviewDroppedDraftReasonSchema.options) {
+      expect(catalog.dropped![reason], reason).toBeTruthy()
+    }
+  })
+
+  it('names where a draft sits, or would have', () => {
+    expect(droppedAnchor({ path: 'a.ts', line: 9 })).toBe('a.ts:9')
+    expect(droppedAnchor({ path: '(none)', line: null })).toBe('(none)')
+    expect(draftAnchor({ path: 'a.ts', line: 9, startLine: null })).toBe('a.ts:9')
+    expect(draftAnchor({ path: 'a.ts', line: 9, startLine: 4 })).toBe('a.ts:4-9')
+  })
+
+  it('counts the drafts one message produced', () => {
+    expect(keptDrafts([{ messageId: 'm1' }, { messageId: 'm2' }, { messageId: 'm1' }], 'm1')).toBe(
+      2,
+    )
+  })
+})
+
+describe('isStale', () => {
+  it('is stale only when a newer head is known', () => {
+    expect(isStale('a', 'b')).toBe(true)
+    expect(isStale('a', 'a')).toBe(false)
+    expect(isStale('a', null)).toBe(false)
+  })
+})

package/app/components/guidedReview/GuidedReview.logic.ts

@@ -0,0 +1,108 @@
+import { resolvePrNumber, type GuidedReviewFailureReason } from '@cat-factory/contracts'
+import type {
+  GuidedReviewMessage,
+  GuidedReviewSessionView,
+  OpenGuidedReviewInput,
+  OpenGuidedReviewThreadInput,
+} from '~/types/domain'
+
+/** A cited span as one short label: `path:12-18`, `path:12`, or the bare path. */
+export function citationLabel(anchor: {
+  path: string
+  startLine?: number
+  endLine?: number
+}): string {
+  if (anchor.startLine === undefined) return anchor.path
+  if (anchor.endLine === undefined || anchor.endLine === anchor.startLine) {
+    return `${anchor.path}:${anchor.startLine}`
+  }
+  return `${anchor.path}:${anchor.startLine}-${anchor.endLine}`
+}
+
+/** A message that is still being produced: the thread is waiting on it. */
+export function isLive(message: Pick<GuidedReviewMessage, 'status'>): boolean {
+  return message.status === 'pending' || message.status === 'running'
+}
+
+/** Whether a thread may take another question now. Other threads never affect this. */
+export function canAsk(messages: Pick<GuidedReviewMessage, 'status' | 'role'>[]): boolean {
+  return !messages.some((m) => m.role === 'assistant' && isLive(m))
+}
+
+/**
+ * The tab ids the window shows, oldest thread first, then the unsaved new-thread tab when one is
+ * open. A new thread is only created on its first question, so an empty tab never reaches the
+ * server.
+ */
+export const NEW_THREAD_TAB = '__new__'
+
+export function threadTabs(
+  view: GuidedReviewSessionView | undefined,
+  draftOpen: boolean,
+): string[] {
+  const ids = (view?.threads ?? []).map((t) => t.id)
+  return draftOpen ? [...ids, NEW_THREAD_TAB] : ids
+}
+
+/**
+ * What clicking a suggested question does: open a NEW thread asking it. A thread keeps one line
+ * of inquiry, so a suggestion never joins the context of whatever tab happens to be active, and a
+ * busy tab can never refuse it.
+ */
+export function suggestedQuestionThread(question: string): OpenGuidedReviewThreadInput {
+  return { question: { content: question } }
+}
+
+/**
+ * The pull request a `review` task targets, as a guided review opens it: its number from the
+ * task fields or its URL, and the repository of the service it sits in. Null when either is
+ * unknown.
+ */
+export function reviewTaskTarget(
+  fields: { prNumber?: number; prUrl?: string } | null | undefined,
+  repo: { owner: string; name: string; provider?: 'github' | 'gitlab' } | undefined,
+): OpenGuidedReviewInput | null {
+  if (!repo) return null
+  const prNumber = resolvePrNumber(fields)
+  if (prNumber === null) return null
+  return {
+    owner: repo.owner,
+    repo: repo.name,
+    prNumber,
+    ...(repo.provider ? { provider: repo.provider } : {}),
+  }
+}
+
+/** The catalog key a failure reason is translated under. */
+export function failureKey(reason: GuidedReviewFailureReason): string {
+  return `guidedReview.failure.${reason}`
+}
+
+/** Where a refused draft would have gone: `path:line`, or the path when it named no line. */
+export function droppedAnchor(dropped: { path: string; line: number | null }): string {
+  return dropped.line === null ? dropped.path : `${dropped.path}:${dropped.line}`
+}
+
+/** A draft's anchor: `path:line`, or `path:start-line` for a span. */
+export function draftAnchor(draft: {
+  path: string
+  line: number
+  startLine: number | null
+}): string {
+  return draft.startLine
+    ? `${draft.path}:${draft.startLine}-${draft.line}`
+    : `${draft.path}:${draft.line}`
+}
+
+/** How many drafts one comment-drafts message produced that are still listed. */
+export function keptDrafts(drafts: { messageId: string }[], messageId: string): number {
+  return drafts.filter((d) => d.messageId === messageId).length
+}
+
+/** The session is reviewing an older head than the PR's latest known one. */
+export function isStale(
+  reviewedHeadSha: string,
+  latestHeadSha: string | null | undefined,
+): boolean {
+  return !!latestHeadSha && latestHeadSha !== reviewedHeadSha
+}

package/app/components/guidedReview/GuidedReviewFailure.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// A failed overview or answer: the translated reason, with the raw cause behind a disclosure.
+import type { GuidedReviewFailure } from '~/types/domain'
+import { failureKey } from '~/components/guidedReview/GuidedReview.logic'
+
+defineProps<{ failure: GuidedReviewFailure }>()
+const { t } = useI18n()
+const expanded = ref(false)
+</script>
+
+<template>
+  <div
+    class="space-y-1 rounded-md bg-elevated/60 p-2 text-sm text-toned"
+    data-testid="guided-review-failure"
+  >
+    <p class="flex items-start gap-2">
+      <UIcon name="i-lucide-circle-alert" class="mt-0.5 h-4 w-4 shrink-0 text-error" />
+      <span>{{ t(failureKey(failure.reason)) }}</span>
+    </p>
+    <template v-if="failure.detail">
+      <UButton
+        size="xs"
+        variant="link"
+        :icon="expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        data-testid="guided-review-failure-toggle"
+        @click="expanded = !expanded"
+      >
+        {{ t('guidedReview.failure.detail') }}
+      </UButton>
+      <pre
+        v-if="expanded"
+        class="whitespace-pre-wrap break-words text-xs text-muted"
+        data-testid="guided-review-failure-detail"
+        >{{ failure.detail }}</pre>
+    </template>
+  </div>
+</template>

package/app/components/guidedReview/GuidedReviewModal.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+// Guided PR review: the overview of a pull request beside tabbed exploration threads. Opened on a
+// session, on a pull request (opening or reusing the caller's session for it), or on neither, in
+// which case it starts with a picker. Live updates arrive through the `guidedReview` event, which
+// the store follows; this window only loads what it shows.
+import type { OpenGuidedReviewInput } from '~/types/domain'
+import GuidedReviewOverview from '~/components/guidedReview/GuidedReviewOverview.vue'
+import GuidedReviewThread from '~/components/guidedReview/GuidedReviewThread.vue'
+import GuidedReviewPicker from '~/components/guidedReview/GuidedReviewPicker.vue'
+import {
+  NEW_THREAD_TAB,
+  isStale,
+  suggestedQuestionThread,
+  threadTabs,
+} from '~/components/guidedReview/GuidedReview.logic'
+
+const { t } = useI18n()
+const ui = useUiStore()
+const store = useGuidedReviewStore()
+const github = useGitHubStore()
+const { present } = usePipelineErrorToast()
+
+const open = computed({
+  get: () => ui.guidedReview !== null,
+  set: (value: boolean) => {
+    if (!value) ui.closeGuidedReview()
+  },
+})
+
+const sessionId = ref<string | null>(null)
+const opening = ref(false)
+const refreshing = ref(false)
+const asking = ref(false)
+const loadingRepos = ref(false)
+const activeTab = ref<string>(NEW_THREAD_TAB)
+const draftOpen = ref(true)
+
+const view = computed(() => (sessionId.value ? store.sessions[sessionId.value] : undefined))
+const session = computed(() => view.value?.session)
+const tabs = computed(() => threadTabs(view.value, draftOpen.value))
+const outOfDate = computed(
+  () => !!sessionId.value && store.refetchFailures[sessionId.value] !== undefined,
+)
+
+const latestHeadSha = computed(() => {
+  const s = session.value
+  if (!s) return null
+  const repo = github.repos.find((r) => String(r.githubId) === s.repoId)
+  const pull = repo ? github.pullsForRepo(repo.githubId).find((p) => p.number === s.prNumber) : null
+  return pull?.headSha ?? null
+})
+const stale = computed(
+  () => !!session.value && isStale(session.value.reviewedHeadSha, latestHeadSha.value),
+)
+
+onModalOpen(open, () => {
+  const target = ui.guidedReview
+  sessionId.value = null
+  draftOpen.value = true
+  activeTab.value = NEW_THREAD_TAB
+  void loadRepos()
+  if (target?.sessionId) void show(target.sessionId)
+  else if (target?.target) void openFor(target.target)
+})
+
+async function loadRepos(): Promise<void> {
+  loadingRepos.value = true
+  try {
+    await github.ensureLoaded()
+  } catch (error) {
+    present(error, 'guidedReview.errors.repos')
+  } finally {
+    loadingRepos.value = false
+  }
+}
+
+async function show(id: string): Promise<void> {
+  sessionId.value = id
+  try {
+    await store.loadSession(id)
+    const first = store.sessions[id]?.threads[0]
+    if (first) {
+      draftOpen.value = false
+      activeTab.value = first.id
+    }
+  } catch (error) {
+    // Back to the picker: with no session to show, the loading state would never end.
+    sessionId.value = null
+    present(error, 'guidedReview.errors.load')
+  }
+}
+
+async function openFor(target: OpenGuidedReviewInput): Promise<void> {
+  opening.value = true
+  try {
+    const opened = await store.open(target)
+    await show(opened.session.id)
+  } catch (error) {
+    present(error, 'guidedReview.errors.open')
+  } finally {
+    opening.value = false
+  }
+}
+
+watch(activeTab, (tab) => {
+  if (sessionId.value && tab !== NEW_THREAD_TAB && !store.threads[tab]) {
+    void store
+      .loadThread(sessionId.value, tab)
+      .catch((error) => present(error, 'guidedReview.errors.load'))
+  }
+})
+
+function threadTitle(id: string): string {
+  if (id === NEW_THREAD_TAB) return t('guidedReview.thread.new')
+  return view.value?.threads.find((th) => th.id === id)?.title || t('guidedReview.thread.untitled')
+}
+
+function threadBusy(id: string): boolean {
+  return !!view.value?.threads.find((th) => th.id === id)?.pendingMessageId
+}
+
+function newThread(): void {
+  draftOpen.value = true
+  activeTab.value = NEW_THREAD_TAB
+}
+
+function onCreated(threadId: string): void {
+  draftOpen.value = false
+  activeTab.value = threadId
+}
+
+async function askSuggested(question: string): Promise<void> {
+  if (!sessionId.value || asking.value) return
+  asking.value = true
+  try {
+    const created = await store.openThread(sessionId.value, suggestedQuestionThread(question))
+    onCreated(created.thread.id)
+  } catch (error) {
+    present(error, 'guidedReview.errors.ask')
+  } finally {
+    asking.value = false
+  }
+}
+
+async function refresh(): Promise<void> {
+  if (!sessionId.value) return
+  refreshing.value = true
+  try {
+    await store.refresh(sessionId.value)
+  } catch (error) {
+    present(error, 'guidedReview.errors.refresh')
+  } finally {
+    refreshing.value = false
+  }
+}
+
+const title = computed(() =>
+  session.value
+    ? t('guidedReview.titleFor', {
+        repo: `${session.value.owner}/${session.value.repo}`,
+        number: session.value.prNumber,
+        title: session.value.prTitle,
+      })
+    : t('guidedReview.title'),
+)
+</script>
+
+<template>
+  <UModal v-model:open="open" fullscreen :title="title" data-testid="guided-review-modal">
+    <template #body>
+      <GuidedReviewPicker
+        v-if="!sessionId"
+        :opening="opening"
+        :loading="loadingRepos"
+        @open="openFor"
+      />
+
+      <p v-else-if="!session" class="flex items-center gap-2 text-sm text-muted">
+        <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+        {{ t('guidedReview.loading') }}
+      </p>
+
+      <div v-else class="flex h-full min-h-0 flex-col gap-4 lg:flex-row">
+        <div class="min-h-0 space-y-3 overflow-y-auto lg:w-2/5 lg:pr-2">
+          <p
+            v-if="outOfDate"
+            class="flex items-center gap-2 text-xs text-warning"
+            data-testid="guided-review-out-of-date"
+          >
+            <UIcon name="i-lucide-triangle-alert" class="h-4 w-4 shrink-0" />
+            {{ t('guidedReview.outOfDate') }}
+          </p>
+          <GuidedReviewOverview
+            :session="session"
+            :stale="stale"
+            :refreshing="refreshing"
+            :asking="asking"
+            @ask="askSuggested"
+            @refresh="refresh"
+          />
+        </div>
+
+        <div class="flex min-h-[24rem] flex-1 flex-col gap-3 lg:min-h-0">
+          <div class="flex flex-wrap items-center gap-1" role="tablist">
+            <UButton
+              v-for="tab in tabs"
+              :key="tab"
+              role="tab"
+              size="sm"
+              :aria-selected="tab === activeTab"
+              :variant="tab === activeTab ? 'soft' : 'ghost'"
+              :color="tab === activeTab ? 'primary' : 'neutral'"
+              :icon="threadBusy(tab) ? 'i-lucide-loader-circle' : undefined"
+              :ui="{ leadingIcon: threadBusy(tab) ? 'animate-spin' : '' }"
+              :data-testid="`guided-review-tab-${tab}`"
+              @click="activeTab = tab"
+            >
+              <span class="max-w-48 truncate">{{ threadTitle(tab) }}</span>
+            </UButton>
+            <UButton
+              v-if="!draftOpen"
+              size="sm"
+              variant="ghost"
+              icon="i-lucide-plus"
+              :aria-label="t('guidedReview.thread.new')"
+              data-testid="guided-review-new-thread"
+              @click="newThread"
+            />
+          </div>
+
+          <GuidedReviewThread
+            :key="activeTab"
+            class="min-h-0 flex-1"
+            :session-id="session.id"
+            :view="activeTab === NEW_THREAD_TAB ? undefined : store.threads[activeTab]"
+            :drafts="view?.drafts.filter((d) => d.threadId === activeTab) ?? []"
+            @created="onCreated"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/guidedReview/GuidedReviewOverview.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+// The structured explanation of the PR, and the status of producing it. Suggested questions are
+// chips the window turns into new threads.
+import type { GuidedReviewSession } from '~/types/domain'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import GuidedReviewFailure from '~/components/guidedReview/GuidedReviewFailure.vue'
+import { citationLabel } from '~/components/guidedReview/GuidedReview.logic'
+
+const props = defineProps<{
+  session: GuidedReviewSession
+  stale: boolean
+  refreshing: boolean
+  /** A suggested question is opening its thread; the chips wait so one click makes one thread. */
+  asking: boolean
+}>()
+const emit = defineEmits<{ ask: [question: string]; refresh: [] }>()
+const { t } = useI18n()
+
+const overview = computed(() => props.session.overview)
+const content = computed(() => overview.value.content)
+const working = computed(
+  () => overview.value.status === 'pending' || overview.value.status === 'running',
+)
+
+const SEVERITY_COLOR = { high: 'error', medium: 'warning', low: 'neutral' } as const
+</script>
+
+<template>
+  <section class="space-y-4" data-testid="guided-review-overview">
+    <div class="flex flex-wrap items-center gap-2 text-sm">
+      <span class="font-medium text-highlighted">
+        {{ t('guidedReview.overview.title') }}
+      </span>
+      <UBadge v-if="stale" color="warning" variant="soft" data-testid="guided-review-stale">
+        {{ t('guidedReview.overview.stale') }}
+      </UBadge>
+      <span class="flex-1" />
+      <UButton
+        size="xs"
+        variant="ghost"
+        icon="i-lucide-refresh-cw"
+        :loading="refreshing"
+        data-testid="guided-review-refresh"
+        @click="emit('refresh')"
+      >
+        {{ t('guidedReview.overview.refresh') }}
+      </UButton>
+    </div>
+
+    <p
+      v-if="working"
+      class="flex items-center gap-2 text-sm text-muted"
+      data-testid="guided-review-overview-working"
+    >
+      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+      {{ t('guidedReview.overview.working') }}
+    </p>
+
+    <GuidedReviewFailure
+      v-else-if="overview.status === 'failed' && overview.failure"
+      :failure="overview.failure"
+    />
+
+    <template v-else-if="content">
+      <MarkdownProse :text="content.summary" class="text-sm" />
+      <div v-if="content.intent" class="text-sm">
+        <h4 class="mb-1 text-xs font-semibold uppercase text-dimmed">
+          {{ t('guidedReview.overview.intent') }}
+        </h4>
+        <MarkdownProse :text="content.intent" />
+      </div>
+
+      <div v-if="content.meaningfulChanges.length" class="space-y-2">
+        <h4 class="text-xs font-semibold uppercase text-dimmed">
+          {{ t('guidedReview.overview.changes') }}
+        </h4>
+        <div
+          v-for="(change, i) in content.meaningfulChanges"
+          :key="`c${i}`"
+          class="rounded-md border border-default p-2 text-sm"
+        >
+          <p class="font-medium">{{ change.title }}</p>
+          <MarkdownProse :text="change.detail" class="text-muted" />
+          <div class="mt-1 flex flex-wrap gap-1">
+            <UBadge v-for="p in change.paths" :key="p" size="sm" variant="outline" color="neutral">
+              {{ p }}
+            </UBadge>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="content.consequences.length" class="space-y-1">
+        <h4 class="text-xs font-semibold uppercase text-dimmed">
+          {{ t('guidedReview.overview.consequences') }}
+        </h4>
+        <div v-for="(c, i) in content.consequences" :key="`q${i}`" class="text-sm">
+          <span class="font-medium">{{ c.title }}</span>
+          <MarkdownProse :text="c.detail" class="text-muted" />
+        </div>
+      </div>
+
+      <div v-if="content.risks.length" class="space-y-2">
+        <h4 class="text-xs font-semibold uppercase text-dimmed">
+          {{ t('guidedReview.overview.risks') }}
+        </h4>
+        <div v-for="(risk, i) in content.risks" :key="`r${i}`" class="text-sm">
+          <div class="flex items-center gap-2">
+            <UBadge :color="SEVERITY_COLOR[risk.severity]" variant="soft" size="sm">
+              {{ t(`guidedReview.severity.${risk.severity}`) }}
+            </UBadge>
+            <span class="font-medium">{{ risk.title }}</span>
+          </div>
+          <MarkdownProse :text="risk.detail" class="text-muted" />
+        </div>
+      </div>
+
+      <div v-if="content.focusAreas.length" class="space-y-2">
+        <h4 class="text-xs font-semibold uppercase text-dimmed">
+          {{ t('guidedReview.overview.focus') }}
+        </h4>
+        <div v-for="(area, i) in content.focusAreas" :key="`f${i}`" class="text-sm">
+          <p class="font-medium">{{ area.title }}</p>
+          <MarkdownProse :text="area.why" class="text-muted" />
+          <div class="mt-1 flex flex-wrap gap-1">
+            <UBadge
+              v-for="(a, j) in area.anchors"
+              :key="j"
+              size="sm"
+              variant="outline"
+              color="neutral"
+            >
+              {{ citationLabel(a) }}
+            </UBadge>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="content.suggestedQuestions.length" class="space-y-2">
+        <h4 class="text-xs font-semibold uppercase text-dimmed">
+          {{ t('guidedReview.overview.suggested') }}
+        </h4>
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            v-for="q in content.suggestedQuestions"
+            :key="q.id"
+            size="xs"
+            variant="soft"
+            icon="i-lucide-message-circle-question"
+            class="text-start"
+            :disabled="asking"
+            :data-testid="`guided-review-suggested-${q.id}`"
+            @click="emit('ask', q.question)"
+          >
+            {{ q.question }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </section>
+</template>