@cat-factory/app 0.304.0 → 0.306.0

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>

package/app/components/guidedReview/GuidedReviewPicker.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+// Pick a linked repository and one of its pull requests (an open one from the synced list, or any
+// number typed in) to open a guided review on.
+import type { OpenGuidedReviewInput } from '~/types/domain'
+
+defineProps<{ opening: boolean; loading: boolean }>()
+const emit = defineEmits<{ open: [target: OpenGuidedReviewInput] }>()
+const { t } = useI18n()
+const github = useGitHubStore()
+
+const repoId = ref<number | undefined>(undefined)
+const prNumber = ref<number | undefined>(undefined)
+
+const repoItems = computed(() =>
+  github.repos.map((r) => ({ label: `${r.owner}/${r.name}`, value: r.githubId })),
+)
+const repo = computed(() => github.repos.find((r) => r.githubId === repoId.value))
+const openPulls = computed(() =>
+  repo.value ? github.pullsForRepo(repo.value.githubId).filter((p) => p.state === 'open') : [],
+)
+
+function submit(number = prNumber.value): void {
+  const r = repo.value
+  if (!r || !number) return
+  emit('open', {
+    owner: r.owner,
+    repo: r.name,
+    prNumber: number,
+    ...(r.provider ? { provider: r.provider } : {}),
+  })
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-xl space-y-4" data-testid="guided-review-picker">
+    <p class="text-sm text-muted">{{ t('guidedReview.picker.intro') }}</p>
+    <p v-if="loading" 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.picker.loading') }}
+    </p>
+    <p v-else-if="!github.repos.length" class="text-sm text-toned">
+      {{ t('guidedReview.picker.noRepos') }}
+    </p>
+    <template v-else>
+      <UFormField :label="t('guidedReview.picker.repo')">
+        <USelectMenu
+          v-model="repoId"
+          :items="repoItems"
+          value-key="value"
+          class="w-full"
+          data-testid="guided-review-picker-repo"
+        />
+      </UFormField>
+      <div v-if="openPulls.length" class="space-y-1">
+        <p class="text-xs font-semibold uppercase text-dimmed">
+          {{ t('guidedReview.picker.openPulls') }}
+        </p>
+        <UButton
+          v-for="pr in openPulls"
+          :key="pr.number"
+          block
+          size="sm"
+          variant="ghost"
+          color="neutral"
+          class="justify-start"
+          :disabled="opening"
+          :data-testid="`guided-review-picker-pr-${pr.number}`"
+          @click="submit(pr.number)"
+        >
+          <span class="truncate">#{{ pr.number }} {{ pr.title }}</span>
+        </UButton>
+      </div>
+      <div class="flex items-end gap-2">
+        <UFormField :label="t('guidedReview.picker.number')" class="flex-1">
+          <UInputNumber
+            v-model="prNumber"
+            :min="1"
+            class="w-full"
+            data-testid="guided-review-picker-number"
+          />
+        </UFormField>
+        <UButton
+          color="primary"
+          icon="i-lucide-scan-search"
+          :loading="opening"
+          :disabled="!repo || !prNumber"
+          data-testid="guided-review-picker-open"
+          @click="submit()"
+        >
+          {{ t('guidedReview.picker.open') }}
+        </UButton>
+      </div>
+    </template>
+  </div>
+</template>