@cat-factory/app 0.185.0 → 0.187.0

package/README.md

@@ -142,7 +142,10 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
   the board.
 - **Inspector** (`components/panels` + `panels/inspector`) — per-block tabs:
   structure, dependencies, model + fragment picker, live execution, and linked
-  docs/issues/scenarios. Decisions resolve via `DecisionModal`.
+  docs/issues/scenarios. Decisions resolve via `DecisionModal`. A `review` task
+  additionally leads with `TaskReviewTarget`, linking the pull request it reviews —
+  distinct from the execution panel's link to the PR a run PRODUCED, which a review
+  task never has.
 - **Pipeline builder** (`components/pipeline`) — assemble/edit agent chains and
   watch `PipelineProgress`. `PipelinePicker` (+ its `PipelinePreview` pane) is the
   single way a pipeline is chosen anywhere — add-task, run settings, the recurring

package/app/assets/css/main.css

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @import '@nuxt/ui';
+/* The shared rendered-markdown reader presentation (see prose.css). */
+@import './prose.css';
 
 /* Toast text should be selectable. Reka UI sets `user-select: none` inline on
  * the toast root (to support swipe-to-dismiss); since `user-select` is

package/app/assets/css/prose.css

@@ -0,0 +1,135 @@
+/*
+ * The rendered-markdown reader's presentation, shared by EVERY surface that reviews an agent's
+ * prose: the step-detail overlay (`AgentStepDetail`), the initiative tracker's plan-approval
+ * rail, and the clarity / requirements / brainstorm review windows. Global rather than scoped
+ * because the markup is injected with `v-html`, so a scoped sheet would need `:deep()` in each
+ * consumer — which is exactly what those windows each used to carry, five near-identical copies
+ * diverging a property at a time. "Consistent in look and feel across review surfaces" is the
+ * whole point, so the copy lives here once and a new reader adds `.reader-prose` and nothing else.
+ *
+ * `.reader-prose` styles the document; `.review-mode` turns each source-mapped block into a
+ * comment target (hover highlight + a "+" gutter affordance, GitHub-review style); `.cf-commented`
+ * / `.cf-selected` are the persistent markers `useProseComments` toggles.
+ */
+
+/* Approval mode: each source-mapped block becomes a comment target — a hover
+   highlight + a "+" gutter affordance, GitHub-review style. */
+.reader-prose.review-mode [data-src-start] {
+  position: relative;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: background 0.12s ease;
+}
+.reader-prose.review-mode [data-src-start]:hover {
+  background: rgb(99 102 241 / 0.08);
+  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.5);
+}
+.reader-prose.review-mode [data-src-start]::before {
+  content: '+';
+  position: absolute;
+  left: -1.4rem;
+  top: 0.1rem;
+  display: none;
+  height: 1.1rem;
+  width: 1.1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  background: rgb(99 102 241);
+  color: white;
+  font-size: 0.8rem;
+  line-height: 1;
+}
+.reader-prose.review-mode [data-src-start]:hover::before {
+  display: flex;
+}
+/* Persistent markers: amber for a block that already has a comment, indigo for
+   the block whose composer is currently open. */
+.reader-prose .cf-commented {
+  background: rgb(234 179 8 / 0.1);
+  box-shadow: inset 2px 0 0 rgb(234 179 8 / 0.6);
+}
+.reader-prose .cf-selected {
+  background: rgb(99 102 241 / 0.12);
+  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.8);
+}
+
+/* Styling for the markdown HTML injected via v-html (out of scoped reach without
+   :deep), kept close to the inspector's existing prose styling. */
+.reader-prose p {
+  margin: 0.5rem 0;
+}
+.reader-prose ul,
+.reader-prose ol {
+  margin: 0.5rem 0;
+  padding-left: 1.25rem;
+}
+.reader-prose ul {
+  list-style: disc;
+}
+.reader-prose ol {
+  list-style: decimal;
+}
+.reader-prose li {
+  margin: 0.2rem 0;
+}
+.reader-prose strong {
+  font-weight: 600;
+  color: rgb(226 232 240);
+}
+.reader-prose em {
+  font-style: italic;
+}
+.reader-prose code {
+  border-radius: 0.25rem;
+  background: rgb(30 41 59 / 0.8);
+  padding: 0.1rem 0.3rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+  color: rgb(199 210 254);
+}
+.reader-prose pre {
+  margin: 0.6rem 0;
+  overflow: auto;
+  border-radius: 0.5rem;
+  background: rgb(2 6 23 / 0.6);
+  padding: 0.75rem 0.9rem;
+}
+.reader-prose pre code {
+  background: transparent;
+  padding: 0;
+  color: rgb(203 213 225);
+}
+.reader-prose blockquote {
+  margin: 0.6rem 0;
+  border-left: 3px solid rgb(99 102 241 / 0.5);
+  padding-left: 0.75rem;
+  color: rgb(148 163 184);
+}
+.reader-prose table {
+  margin: 0.6rem 0;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+.reader-prose th,
+.reader-prose td {
+  border: 1px solid rgb(51 65 85);
+  padding: 0.3rem 0.6rem;
+}
+.reader-prose th {
+  background: rgb(30 41 59 / 0.6);
+  font-weight: 600;
+}
+.reader-prose hr {
+  margin: 1rem 0;
+  border: none;
+  border-top: 1px solid rgb(51 65 85);
+}
+.reader-prose h1,
+.reader-prose h2,
+.reader-prose h3,
+.reader-prose h4 {
+  margin: 0.6rem 0 0.3rem;
+  font-weight: 600;
+  color: rgb(226 232 240);
+}

package/app/components/board/AddTaskModal.vue

@@ -28,6 +28,8 @@ import ContextAttachmentFields from '~/components/context/ContextAttachmentField
 import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import { parseConflict } from '~/composables/usePipelineErrorToast'
+import { apiErrorEnvelope } from '~/composables/api/errors'
+import type { ReviewTargetReason } from '@cat-factory/contracts'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 
 const ui = useUiStore()
@@ -680,7 +682,7 @@ async function submitCreate(acknowledgeReviewDebt: boolean) {
     }
     toast.add({
       title: t('board.addTask.addFailedTitle'),
-      description: e instanceof Error ? e.message : String(e),
+      description: reviewTargetMessage(e) ?? (e instanceof Error ? e.message : String(e)),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
     })
@@ -689,6 +691,34 @@ async function submitCreate(acknowledgeReviewDebt: boolean) {
   }
 }
 
+// The backend validates a review task's target PR against the service's repo before creating
+// anything, and refuses with a machine-readable reason. Map it to translated copy here (the
+// backend does not localize prose); an unrecognised failure keeps the raw message.
+// Exhaustive over the closed union, so a new reason fails the typecheck rather than silently
+// falling through to an English sentence from the server.
+// Each message names what the user got wrong, so a detail the backend didn't send would leave a
+// hole in the sentence: those cases return null and the server's own prose is shown instead.
+const REVIEW_TARGET_MESSAGES: Record<
+  ReviewTargetReason,
+  (details: Record<string, unknown>) => string | null
+> = {
+  review_pr_not_found: (d) =>
+    typeof d.prNumber === 'number'
+      ? t('board.addTask.review.prNotFound', { number: d.prNumber })
+      : null,
+  review_pr_repo_mismatch: (d) =>
+    typeof d.expected === 'string'
+      ? t('board.addTask.review.prRepoMismatch', { repo: d.expected })
+      : null,
+}
+
+function reviewTargetMessage(error: unknown): string | null {
+  const details = (apiErrorEnvelope(error)?.details ?? {}) as Record<string, unknown>
+  const reason = details.reason
+  if (typeof reason !== 'string') return null
+  return REVIEW_TARGET_MESSAGES[reason as ReviewTargetReason]?.(details) ?? null
+}
+
 /** Turn a parsed review-debt friction 409 into the dialog context (see ReviewFrictionDialog.vue). */
 function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseConflict>>) {
   const details = conflict.details

package/app/components/brainstorm/BrainstormWindow.vue

@@ -610,41 +610,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 .pl-5\.5 {
   padding-left: 1.375rem;
 }
-/* Minimal CommonMark styling for the converged-direction reader (mirrors the prose
-   review window's reader-prose). */
-.reader-prose :deep(p) {
-  margin: 0.4rem 0;
-}
-.reader-prose :deep(ul),
-.reader-prose :deep(ol) {
-  margin: 0.4rem 0;
-  padding-left: 1.25rem;
-  list-style: revert;
-}
-.reader-prose :deep(li) {
-  margin: 0.2rem 0;
-}
-.reader-prose :deep(strong) {
-  color: rgb(226 232 240);
-  font-weight: 600;
-}
-.reader-prose :deep(code) {
-  border-radius: 0.25rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.05rem 0.3rem;
-  font-size: 0.85em;
-}
-.reader-prose :deep(pre) {
-  margin: 0.5rem 0;
-  overflow-x: auto;
-  border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.75rem;
-}
-.reader-prose :deep(blockquote) {
-  margin: 0.5rem 0;
-  border-left: 2px solid rgb(51 65 85);
-  padding-left: 0.75rem;
-  color: rgb(148 163 184);
-}
+/* The rendered-markdown presentation is the SHARED global `.reader-prose` sheet
+   (`assets/css/prose.css`), not a local copy: this reader shows the same agent-authored
+   markdown the step reader does, and a per-window duplicate is how the review surfaces
+   drift apart one property at a time. */
 </style>

package/app/components/clarity/ClarityReviewWindow.vue

@@ -658,41 +658,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 .pl-5\.5 {
   padding-left: 1.375rem;
 }
-/* Minimal CommonMark styling for the clarified bug-report reader (mirrors the
-   prose review window's reader-prose). */
-.reader-prose :deep(p) {
-  margin: 0.4rem 0;
-}
-.reader-prose :deep(ul),
-.reader-prose :deep(ol) {
-  margin: 0.4rem 0;
-  padding-left: 1.25rem;
-  list-style: revert;
-}
-.reader-prose :deep(li) {
-  margin: 0.2rem 0;
-}
-.reader-prose :deep(strong) {
-  color: rgb(226 232 240);
-  font-weight: 600;
-}
-.reader-prose :deep(code) {
-  border-radius: 0.25rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.05rem 0.3rem;
-  font-size: 0.85em;
-}
-.reader-prose :deep(pre) {
-  margin: 0.5rem 0;
-  overflow-x: auto;
-  border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.75rem;
-}
-.reader-prose :deep(blockquote) {
-  margin: 0.5rem 0;
-  border-left: 2px solid rgb(51 65 85);
-  padding-left: 0.75rem;
-  color: rgb(148 163 184);
-}
+/* The rendered-markdown presentation is the SHARED global `.reader-prose` sheet
+   (`assets/css/prose.css`), not a local copy: this reader shows the same agent-authored
+   markdown the step reader does, and a per-window duplicate is how the review surfaces
+   drift apart one property at a time. */
 </style>

package/app/components/fragments/FragmentLibraryManager.vue

@@ -14,6 +14,7 @@ import type {
   ResolvedFragment,
 } from '~/types/domain'
 import { useFragmentLibrary, useFragmentLibraryStore } from '~/stores/fragmentLibrary'
+import { showOverrideField } from '~/utils/uiMode'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import GitHubDocUrlImport from '~/components/fragments/GitHubDocUrlImport.vue'
@@ -131,7 +132,7 @@ const linkingDoc = ref(false)
 const linkingSource = ref(false)
 
 // ---- create a hand-authored fragment --------------------------------------
-const draft = ref({ title: '', summary: '', body: '', tags: '' })
+const draft = ref({ title: '', summary: '', body: '', brief: '', tags: '' })
 const draftValid = computed(
   () => draft.value.title.trim() && draft.value.summary.trim() && draft.value.body.trim(),
 )
@@ -167,6 +168,7 @@ const editDraft = ref<{
   title: string
   summary: string
   body: string
+  brief: string
   tags: string
 } | null>(null)
 function startEdit(f: (typeof library.fragments)[number]) {
@@ -175,8 +177,10 @@ function startEdit(f: (typeof library.fragments)[number]) {
     title: f.title,
     summary: f.summary,
     body: f.body,
+    brief: f.brief ?? '',
     tags: (f.tags ?? []).join(', '),
   }
+  showEditBrief.value = showOverrideField(uiMode.isAdvanced, f.brief ?? null)
 }
 function cancelEdit() {
   editDraft.value = null
@@ -188,6 +192,19 @@ const editValid = computed(
     !!editDraft.value.summary.trim() &&
     !!editDraft.value.body.trim(),
 )
+// The linked SHORT VERSION is an OVERRIDE of what the platform does by default (condense a
+// long standard automatically, fold a short one in full), so it follows the override rule:
+// hidden in basic mode while unset, revealed as soon as the fragment carries one — a
+// basic-mode curator is never left unable to see or clear a brief a teammate linked.
+//
+// Both flags are LATCHED at the moment the form opens rather than tracking the live draft.
+// Recomputing per keystroke makes the control delete itself the instant a basic-mode curator
+// empties it — mid-edit, under the cursor, on the one interaction (clearing, to hand the
+// standard back to auto-generation) the rule exists to keep reachable.
+const uiMode = useUiModeStore()
+const showEditBrief = ref(false)
+const showDraftBrief = computed(() => showOverrideField(uiMode.isAdvanced, null))
+
 async function saveEdit() {
   const d = editDraft.value
   if (!d || !editValid.value) return
@@ -197,6 +214,9 @@ async function saveEdit() {
         title: d.title.trim(),
         summary: d.summary.trim(),
         body: d.body.trim(),
+        // Always sent, so clearing the box UNLINKS the short version and hands the
+        // standard back to auto-generation (an omitted key would leave the old one).
+        brief: d.brief.trim(),
         tags: d.tags
           .split(',')
           .map((t) => t.trim())
@@ -218,12 +238,13 @@ async function createFragment() {
       title: draft.value.title.trim(),
       summary: draft.value.summary.trim(),
       body: draft.value.body.trim(),
+      brief: draft.value.brief.trim() || undefined,
       tags: draft.value.tags
         .split(',')
         .map((t) => t.trim())
         .filter(Boolean),
     })
-    draft.value = { title: '', summary: '', body: '', tags: '' }
+    draft.value = { title: '', summary: '', body: '', brief: '', tags: '' }
     toast.add({ title: t('fragments.toast.added'), icon: 'i-lucide-check' })
   } catch (e) {
     notifyError(t('fragments.toast.addFailed'), e)
@@ -701,6 +722,14 @@ async function unlinkSource(id: string) {
               :placeholder="t('fragments.authored.bodyPlaceholder')"
               :rows="4"
             />
+            <div v-if="showEditBrief" class="flex flex-col gap-1">
+              <UTextarea
+                v-model="editDraft.brief"
+                :placeholder="t('fragments.authored.briefPlaceholder')"
+                :rows="2"
+              />
+              <p class="text-xs text-slate-500">{{ t('fragments.authored.briefHint') }}</p>
+            </div>
             <UInput
               v-model="editDraft.tags"
               :placeholder="t('fragments.authored.tagsPlaceholder')"
@@ -799,6 +828,14 @@ async function unlinkSource(id: string) {
               :placeholder="t('fragments.authored.bodyPlaceholder')"
               :rows="4"
             />
+            <div v-if="showDraftBrief" class="flex flex-col gap-1">
+              <UTextarea
+                v-model="draft.brief"
+                :placeholder="t('fragments.authored.briefPlaceholder')"
+                :rows="2"
+              />
+              <p class="text-xs text-slate-500">{{ t('fragments.authored.briefHint') }}</p>
+            </div>
             <UInput v-model="draft.tags" :placeholder="t('fragments.authored.tagsPlaceholder')" />
             <UButton
               icon="i-lucide-plus"