@cat-factory/app 0.304.0 → 0.306.0

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

@@ -0,0 +1,179 @@
+import { describe, expect, it } from 'vitest'
+import { GUIDED_REVIEW_POST_LEASE_MS } from '@cat-factory/contracts'
+import {
+  GUIDED_REVIEW_FAILURE_REASONS,
+  guidedReviewDroppedDraftReasonSchema,
+} from '@cat-factory/contracts'
+import en from '../../../i18n/locales/en.json'
+import {
+  NEW_THREAD_TAB,
+  draftEdit,
+  isEditableDraft,
+  postableSelection,
+  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)
+  })
+})
+
+describe('draft editing and posting', () => {
+  it('treats proposed and failed drafts as still editable', () => {
+    expect(
+      ['proposed', 'failed', 'posting', 'posted', 'discarded'].map((status) =>
+        isEditableDraft({ status: status as never }),
+      ),
+    ).toEqual([true, true, false, false, false])
+  })
+
+  it('posts only the selected drafts that are still postable, in list order', () => {
+    const drafts = [
+      { id: 'a', status: 'proposed' as const, updatedAt: 0 },
+      { id: 'b', status: 'posted' as const, updatedAt: 0 },
+      { id: 'c', status: 'failed' as const, updatedAt: 0 },
+    ]
+    expect(postableSelection(drafts, new Set(['c', 'b', 'a']), 1)).toEqual(['a', 'c'])
+  })
+
+  it('offers a posting draft again only once its claim outlives the lease', () => {
+    const stranded = [{ id: 'p', status: 'posting' as const, updatedAt: 1_000 }]
+    const selected = new Set(['p'])
+    expect(postableSelection(stranded, selected, 1_000 + GUIDED_REVIEW_POST_LEASE_MS)).toEqual([])
+    expect(postableSelection(stranded, selected, 1_001 + GUIDED_REVIEW_POST_LEASE_MS)).toEqual([
+      'p',
+    ])
+  })
+
+  it('sends only what an edit changed, and nothing for an untouched form', () => {
+    const draft = { body: 'Bound the retries.', line: 3, startLine: null, side: 'RIGHT' as const }
+    expect(draftEdit(draft, { body: ' Bound the retries. ', line: 3, side: 'RIGHT' })).toEqual({})
+    expect(draftEdit(draft, { body: 'Cap at three.', line: 4, side: 'RIGHT' })).toEqual({
+      body: 'Cap at three.',
+      line: 4,
+    })
+  })
+
+  it('drops the start of a multi-line draft only when the edit moves it', () => {
+    const span = { body: 'Span.', line: 8, startLine: 5, side: 'RIGHT' as const }
+    expect(draftEdit(span, { body: 'Reworded.', line: 8, side: 'RIGHT' })).toEqual({
+      body: 'Reworded.',
+    })
+    expect(draftEdit(span, { body: 'Span.', line: 3, side: 'RIGHT' })).toEqual({
+      line: 3,
+      startLine: null,
+    })
+    expect(draftEdit(span, { body: 'Span.', line: 8, side: 'LEFT' })).toEqual({
+      startLine: null,
+      side: 'LEFT',
+    })
+  })
+})

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

@@ -0,0 +1,146 @@
+import {
+  isPostableDraft,
+  resolvePrNumber,
+  type GuidedReviewFailureReason,
+} from '@cat-factory/contracts'
+import type {
+  GuidedReviewCommentDraft,
+  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
+}
+
+/** A draft the reviewer may still edit, discard or post: `proposed`, or a `failed` post. */
+export function isEditableDraft(draft: Pick<GuidedReviewCommentDraft, 'status'>): boolean {
+  return draft.status === 'proposed' || draft.status === 'failed'
+}
+
+/** The selected drafts a post may claim at `now`, in the order they are listed. */
+export function postableSelection(
+  drafts: Pick<GuidedReviewCommentDraft, 'id' | 'status' | 'updatedAt'>[],
+  selected: ReadonlySet<string>,
+  now: number,
+): string[] {
+  return drafts.filter((d) => selected.has(d.id) && isPostableDraft(d, now)).map((d) => d.id)
+}
+
+/**
+ * The fields an inline edit actually changed, against the draft as loaded. Empty when nothing
+ * moved, so the editor saves nothing rather than bumping the draft's revision for no change. The
+ * editor places a single line, so moving a multi-line draft drops its start: the server would
+ * otherwise keep the old start against the new line and refuse the span.
+ */
+export function draftEdit(
+  draft: Pick<GuidedReviewCommentDraft, 'body' | 'line' | 'startLine' | 'side'>,
+  form: { body: string; line: number; side: 'LEFT' | 'RIGHT' },
+): { body?: string; line?: number; startLine?: null; side?: 'LEFT' | 'RIGHT' } {
+  const moved = form.line !== draft.line || form.side !== draft.side
+  return {
+    ...(form.body.trim() !== draft.body ? { body: form.body.trim() } : {}),
+    ...(form.line !== draft.line ? { line: form.line } : {}),
+    ...(moved && draft.startLine !== null ? { startLine: null } : {}),
+    ...(form.side !== draft.side ? { side: form.side } : {}),
+  }
+}

package/app/components/guidedReview/GuidedReviewDraftCard.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// One comment draft: its anchor, body and rationale, with selection for posting and an inline
+// editor. Only a `proposed` or `failed` draft is editable, though a `posting` one whose poster died
+// can be selected for posting again; the server refuses a stale edit as
+// `draft_conflict` and a line outside the diff, both reported through the error funnel.
+import type { GuidedReviewCommentDraft } from '~/types/domain'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import {
+  draftAnchor,
+  draftEdit,
+  isEditableDraft,
+} from '~/components/guidedReview/GuidedReview.logic'
+
+const props = defineProps<{
+  sessionId: string
+  draft: GuidedReviewCommentDraft
+  selected: boolean
+  /** Whether a post may claim this draft now, including a stranded `posting` one. */
+  postable: boolean
+}>()
+const emit = defineEmits<{ 'update:selected': [value: boolean] }>()
+const { t } = useI18n()
+const store = useGuidedReviewStore()
+const { present } = usePipelineErrorToast()
+
+const editing = ref(false)
+const saving = ref(false)
+const form = reactive({ body: '', line: 1, side: 'RIGHT' as 'LEFT' | 'RIGHT' })
+const editable = computed(() => isEditableDraft(props.draft))
+const STATUS_COLOR = {
+  proposed: 'neutral',
+  posting: 'info',
+  posted: 'success',
+  failed: 'error',
+  discarded: 'neutral',
+} as const
+
+function startEdit(): void {
+  form.body = props.draft.body
+  form.line = props.draft.line
+  form.side = props.draft.side
+  editing.value = true
+}
+
+async function save(): Promise<void> {
+  const changes = draftEdit(props.draft, form)
+  if (Object.keys(changes).length === 0) {
+    editing.value = false
+    return
+  }
+  saving.value = true
+  try {
+    await store.editDraft(props.sessionId, props.draft.id, { rev: props.draft.rev, ...changes })
+    editing.value = false
+  } catch (error) {
+    present(error, 'guidedReview.errors.editDraft')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function discard(): Promise<void> {
+  saving.value = true
+  try {
+    await store.editDraft(props.sessionId, props.draft.id, { rev: props.draft.rev, discard: true })
+    emit('update:selected', false)
+  } catch (error) {
+    present(error, 'guidedReview.errors.editDraft')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="rounded-md border border-default p-2 text-sm"
+    :class="{ 'opacity-60': draft.status === 'discarded' }"
+    data-testid="guided-review-draft"
+  >
+    <div class="flex items-center gap-2">
+      <UCheckbox
+        v-if="postable"
+        :model-value="selected"
+        :aria-label="t('guidedReview.drafts.select')"
+        @update:model-value="emit('update:selected', $event === true)"
+      />
+      <p class="flex-1 text-xs text-dimmed">
+        {{ draftAnchor(draft) }} ({{ t(`guidedReview.drafts.side.${draft.side}`) }})
+      </p>
+      <UBadge size="sm" variant="subtle" :color="STATUS_COLOR[draft.status]">
+        {{ t(`guidedReview.drafts.status.${draft.status}`) }}
+      </UBadge>
+    </div>
+
+    <div v-if="editing" class="mt-2 space-y-2">
+      <UTextarea v-model="form.body" :rows="3" autoresize class="w-full" />
+      <div class="flex flex-wrap items-center gap-2">
+        <UInputNumber
+          v-model="form.line"
+          :min="1"
+          size="sm"
+          :aria-label="t('guidedReview.drafts.line')"
+        />
+        <USelect
+          v-model="form.side"
+          size="sm"
+          :items="[
+            { label: t('guidedReview.drafts.side.RIGHT'), value: 'RIGHT' },
+            { label: t('guidedReview.drafts.side.LEFT'), value: 'LEFT' },
+          ]"
+          :aria-label="t('guidedReview.drafts.sideLabel')"
+        />
+        <UButton size="sm" color="primary" :loading="saving" @click="save">
+          {{ t('guidedReview.drafts.save') }}
+        </UButton>
+        <UButton size="sm" variant="ghost" :disabled="saving" @click="editing = false">
+          {{ t('guidedReview.drafts.cancel') }}
+        </UButton>
+      </div>
+    </div>
+    <template v-else>
+      <MarkdownProse class="mt-1" :text="draft.body" />
+      <p v-if="draft.rationale" class="mt-1 text-xs text-muted">{{ draft.rationale }}</p>
+      <p v-if="draft.status === 'failed' && draft.postError" class="mt-1 text-xs text-error">
+        {{ t('guidedReview.drafts.postFailed') }}: {{ draft.postError }}
+      </p>
+      <div v-if="editable" class="mt-2 flex gap-2">
+        <UButton size="xs" variant="ghost" icon="i-lucide-pencil" @click="startEdit">
+          {{ t('guidedReview.drafts.edit') }}
+        </UButton>
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-trash-2"
+          :loading="saving"
+          @click="discard"
+        >
+          {{ t('guidedReview.drafts.discard') }}
+        </UButton>
+      </div>
+    </template>
+  </div>
+</template>

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>