@cat-factory/app 0.300.1 → 0.301.0

package/README.md

@@ -263,6 +263,27 @@ The still-open remainder is the INLINE family: `error.value = e.message` rendere
 surface rather than a toast, and are tracked as G4 in
 [`error-message-coverage.md`](https://github.com/kibertoad/cat-factory/blob/main/docs/initiatives/error-message-coverage.md).
 
+### A panel that seeds state on open uses `onModalOpen`, never a bare `watch(open)`
+
+**Work done on the way IN to a modal goes through `onModalOpen(open, fn)`
+(`composables/useModalOpen.ts`).** A hand-written `watch(open, (isOpen) => { if (isOpen) … })` is
+wrong in this SPA and reads as right.
+
+`pages/index.vue` mounts most panels only WHILE their flag is set
+(`<AssistantModal v-if="ui.assistantOpen" />`), so `open` is already `true` when the component sets
+up and a change-only watcher never fires at all. Whatever the body does never happens: the picker
+keeps its unselected default, the read that fills a catalog is never issued, and the panel opens
+with a confirm button that cannot be pressed. Nothing throws and nothing warns, which is why four
+modals carried it at once and the assistant shipped with a Run button that could never submit.
+
+The helper is `{ immediate: true }` plus the open check, and it is correct for an always-mounted
+panel too: that one passes a `false` on the first run and the body is skipped. So nobody has to know
+which kind of panel they are writing, which is the point of it being shared rather than a flag
+remembered per site.
+
+A watcher acting on the CLOSE edge (emitting `close`, revoking object URLs) stays a plain `watch`:
+it has nothing to do at mount, and running it there would announce a close that never happened.
+
 ### Type a chip map with `BadgeColor`, never `string`
 
 A status → chip map feeding a `<UBadge :color="…">` types its values as `BadgeColor` (`utils/badge.ts`), which is derived from `UBadge`'s own prop type rather than restated as a literal union. Typed `string`, the binding does not compile and the reflex is `as any` at each call site: seven of them had accumulated. That cast also accepts a colour Nuxt UI does not define, which renders as an unstyled badge with nothing failing.

package/app/components/assistant/AssistantModal.logic.spec.ts

@@ -1,5 +1,18 @@
 import { describe, expect, it } from 'vitest'
-import { answerFor, revealTarget } from './AssistantModal.logic'
+import * as v from 'valibot'
+import { ASSISTANT_PROMPT_MAX, assistantTurnInputSchema } from '@cat-factory/contracts'
+import type { AssistantCapability } from '~/types/domain'
+import { answerFor, assistantSurface, revealTarget, submitGate } from './AssistantModal.logic'
+
+/** A capability that answered. The two halves are independent, so each case states both. */
+function answered(
+  available: boolean,
+  actions: AssistantCapability['actions'] = ['declare-service-dependency'],
+): AssistantCapability {
+  return { available, actions }
+}
+
+const WIRED = answered(true)
 
 describe('revealTarget', () => {
   it('reveals the CONSUMER of a declared dependency, the frame the edge was written onto', () => {
@@ -78,3 +91,118 @@ describe('answerFor', () => {
     ).toEqual({ issueUrl: 'PROJ-12', source: 'jira' })
   })
 })
+
+describe('assistantSurface', () => {
+  it('shows the BOX while the read is still in flight, rather than a spinner in its place', () => {
+    // The modal is opened from the sidebar and from the command palette, so the hands are already
+    // on the keyboard. A box that only mounts once the read lands is not focused yet, and every
+    // character typed in the gap is dropped; refusing the SUBMIT is what the unanswered read owes,
+    // not withholding the thing being typed into.
+    expect(assistantSurface('idle', null)).toBe('prompt')
+    expect(assistantSurface('loading', null)).toBe('prompt')
+  })
+
+  it('separates a FAILED read from a deployment that wired no model', () => {
+    // Retrying is the answer to one and changes nothing about the other, so they cannot share a
+    // state: neither one can submit, and that is all they have in common.
+    expect(assistantSurface('error', null)).toBe('unreadable')
+    expect(assistantSurface('ready', answered(false))).toBe('unwired')
+  })
+
+  it('withholds the box from a wired model with an EMPTY catalog', () => {
+    // `available` and `actions` are two independent facts and only the pair decides. A model with
+    // nothing to route to renders a box over an empty examples list whose every submit is refused
+    // with `assistant_no_actions`, which is the surface this exists to stop offering.
+    expect(assistantSurface('ready', answered(true, []))).toBe('no_actions')
+  })
+
+  it('offers the box once a read says a model is wired and the catalog has something in it', () => {
+    expect(assistantSurface('ready', WIRED)).toBe('prompt')
+  })
+
+  it('keeps the answer it holds while a RE-read is in flight', () => {
+    // Re-opening the modal re-reads the capability. Dropping back to a waiting state for a fact
+    // already held would replace the box with a spinner on every open, and take the focus and any
+    // half-typed request with it.
+    expect(assistantSurface('loading', WIRED)).toBe('prompt')
+    expect(assistantSurface('loading', answered(false))).toBe('unwired')
+  })
+})
+
+describe('submitGate', () => {
+  const ready = { prompt: 'the checkout service depends on payments', running: false }
+
+  it('sends a typed request against a capability that answered', () => {
+    expect(submitGate({ read: 'ready', capability: WIRED, ...ready })).toEqual({ state: 'ready' })
+  })
+
+  it('names an empty box, whitespace included, as empty rather than ready', () => {
+    expect(
+      submitGate({ read: 'ready', capability: WIRED, prompt: ' \t\n ', running: false }),
+    ).toEqual({ state: 'empty' })
+  })
+
+  it('reports a turn in flight as running, not as a request with something wrong with it', () => {
+    expect(submitGate({ read: 'ready', capability: WIRED, ...ready, running: true })).toEqual({
+      state: 'running',
+    })
+  })
+
+  it('states the WAIT while the capability read has not answered', () => {
+    // The box is offered during the read, so its Run button is disabled for a reason that is
+    // nobody's mistake and clears itself. Left unstated it reads as a button that is broken.
+    expect(submitGate({ read: 'loading', capability: null, ...ready })).toEqual({
+      state: 'checking',
+    })
+  })
+
+  it('refuses on a capability that answered it cannot submit, whichever half said so', () => {
+    // Unreachable from the modal, which renders no box for these. It is asserted because this is
+    // the submit AUTHORITY: a later caller reading only the prompt would submit into a 503.
+    expect(submitGate({ read: 'ready', capability: answered(false), ...ready })).toEqual({
+      state: 'unavailable',
+    })
+    expect(submitGate({ read: 'ready', capability: answered(true, []), ...ready })).toEqual({
+      state: 'unavailable',
+    })
+    expect(submitGate({ read: 'error', capability: null, ...ready })).toEqual({
+      state: 'unavailable',
+    })
+  })
+
+  it('refuses an over-long request with both numbers, so the reason can be stated', () => {
+    const length = ASSISTANT_PROMPT_MAX + 43
+    expect(
+      submitGate({ read: 'ready', capability: WIRED, prompt: 'x'.repeat(length), running: false }),
+    ).toEqual({ state: 'too_long', length, limit: ASSISTANT_PROMPT_MAX })
+  })
+
+  it('measures the length the WIRE caps, which is the trimmed text', () => {
+    // The schema trims before it counts, so a prompt padded to just over the cap is acceptable
+    // and refusing it would be this surface inventing a limit the backend does not hold to.
+    const padded = `  ${'x'.repeat(ASSISTANT_PROMPT_MAX)}  `
+    expect(
+      submitGate({ read: 'ready', capability: WIRED, prompt: padded, running: false }),
+    ).toEqual({ state: 'ready' })
+  })
+
+  it('refuses at exactly the length the WIRE SCHEMA refuses at', () => {
+    // The one invariant the box's whole reason for stating a number rests on, and the one a test
+    // pinning a literal cannot see: both sides are asked here, so a cap moved on either side and
+    // not the other fails rather than shipping a box that promises a limit the backend does not
+    // hold to (or refuses one it would have taken).
+    const accepted = (prompt: string) =>
+      v.safeParse(assistantTurnInputSchema, { kind: 'prompt', prompt }).success
+    const at = 'x'.repeat(ASSISTANT_PROMPT_MAX)
+    const over = 'x'.repeat(ASSISTANT_PROMPT_MAX + 1)
+
+    expect(submitGate({ read: 'ready', capability: WIRED, prompt: at, running: false })).toEqual({
+      state: 'ready',
+    })
+    expect(accepted(at)).toBe(true)
+    expect(
+      submitGate({ read: 'ready', capability: WIRED, prompt: over, running: false }).state,
+    ).toBe('too_long')
+    expect(accepted(over)).toBe(false)
+  })
+})

package/app/components/assistant/AssistantModal.logic.ts

@@ -1,4 +1,11 @@
-import type { AssistantActionResult, AssistantAnswer, AssistantOutcome } from '~/types/domain'
+import type {
+  AssistantActionResult,
+  AssistantAnswer,
+  AssistantCapability,
+  AssistantOutcome,
+} from '~/types/domain'
+import { ASSISTANT_PROMPT_MAX } from '~/types/domain'
+import type { LoadState } from '~/types/load-state'
 
 /**
  * The block a performed turn should reveal on the board.
@@ -43,3 +50,78 @@ export function answerFor(
     arguments: { ...outcome.arguments, [outcome.field]: candidate },
   }
 }
+
+/**
+ * Which panel the modal shows: the prompt box, or the reason there is none.
+ *
+ * Derived from the ANSWER rather than from the read's progress, so the states cannot collapse into
+ * each other. Three of them are reasons no box is offered, and they differ in what the person does
+ * next: `unreadable` is an outage a retry may clear, `unwired` is a deployment with no model, and
+ * `no_actions` is a deployment whose catalog is empty. The last two both look like "available is
+ * not true enough to submit" and have completely different remedies, which is why an empty catalog
+ * is not folded into `unwired`: every submit against one 503s with `assistant_no_actions`, and a
+ * box over an empty examples list is exactly the surface this is here to stop offering.
+ *
+ * A read still IN FLIGHT is not one of them. Withholding the box until the read answers would drop
+ * the characters typed in the gap: the modal is opened from the sidebar and from the command
+ * palette, where the hands are already on the keyboard, and a textarea that mounts one round trip
+ * later is not focused yet, so those keystrokes land nowhere. So an unanswered read shows the box
+ * and refuses SUBMISSION with a stated reason ({@link submitGate}), and the box is withheld only
+ * once the read has answered that it cannot be submitted.
+ */
+export type AssistantSurface = 'prompt' | 'unreadable' | 'unwired' | 'no_actions'
+
+export function assistantSurface(
+  read: LoadState,
+  capability: AssistantCapability | null,
+): AssistantSurface {
+  if (capability === null) return read === 'error' ? 'unreadable' : 'prompt'
+  if (!capability.available) return 'unwired'
+  return capability.actions.length === 0 ? 'no_actions' : 'prompt'
+}
+
+/**
+ * Whether the typed request can be sent, and when it cannot, WHY.
+ *
+ * A disabled button owes an answer, and the reasons differ in what the person does next: an empty
+ * box is answered by the placeholder and the examples under it, an over-long one has to name the
+ * numbers (nothing on screen tells you a sentence is 40 characters too long), and a request typed
+ * while the capability read is still in flight is neither of those: nothing is wrong with it and it
+ * becomes sendable on its own, which is why `checking` is stated rather than left to look like a
+ * button that does nothing.
+ *
+ * `unavailable` is the surface's own refusal, restated here rather than left implicit. It never
+ * renders, because a surface that is not the box renders no button either. It exists because this
+ * function is the submit AUTHORITY: read off the prompt and `running` alone it would answer `ready`
+ * for an unwired deployment, and the next caller (a shortcut, a command-palette entry) would
+ * inherit a submit that 503s. Deriving it from {@link assistantSurface} is what keeps the two from
+ * disagreeing about the same capability.
+ *
+ * The length is measured on the TRIMMED text because that is what the wire schema caps, and against
+ * the schema's OWN constant, so the box cannot promise a limit the backend does not hold to.
+ */
+export type SubmitGate =
+  | { state: 'ready' }
+  | { state: 'running' }
+  | { state: 'unavailable' }
+  | { state: 'checking' }
+  | { state: 'empty' }
+  | { state: 'too_long'; length: number; limit: number }
+
+export function submitGate(input: {
+  read: LoadState
+  capability: AssistantCapability | null
+  prompt: string
+  running: boolean
+}): SubmitGate {
+  const { read, capability, prompt, running } = input
+  if (running) return { state: 'running' }
+  if (assistantSurface(read, capability) !== 'prompt') return { state: 'unavailable' }
+  if (capability === null) return { state: 'checking' }
+  const length = prompt.trim().length
+  if (length === 0) return { state: 'empty' }
+  if (length > ASSISTANT_PROMPT_MAX) {
+    return { state: 'too_long', length, limit: ASSISTANT_PROMPT_MAX }
+  }
+  return { state: 'ready' }
+}

package/app/components/assistant/AssistantModal.vue

@@ -14,11 +14,14 @@
 //     the platform named, with no model call and nothing retyped.
 //   - `declined` means nothing in the catalog matches. It renders the catalog, because "I can't
 //     do that" without saying what it CAN do is the least useful answer this surface can give.
-// Everything that IS a failure (no model wired, the budget spent, an unconfigured tracker, an
-// issue already filed) arrives as an error and goes through the shared toast funnel with its
-// reason, its detail and its request id, the same path a failed button press takes.
+// Everything that IS a failure of a TURN (the budget spent, an unconfigured tracker, an issue
+// already filed) arrives as an error and goes through the shared toast funnel with its reason, its
+// detail and its request id, the same path a failed button press takes. What the CAPABILITY read
+// finds is not on that path: an unwired deployment, an empty catalog and a read that failed are
+// each a panel here, in place of the box, because that is where the person is looking and where
+// the retry belongs.
 import type { AssistantActionId, AssistantOutcome } from '~/types/domain'
-import { answerFor, revealTarget } from './AssistantModal.logic'
+import { answerFor, assistantSurface, revealTarget, submitGate } from './AssistantModal.logic'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -44,12 +47,54 @@ const examples = computed(() =>
   })),
 )
 
-// Read the capability on open rather than on mount: the modal is lazily loaded, and a deployment
-// that wires a provider while the tab is open should not have to be reloaded to offer the box.
-watch(open, (isOpen) => {
-  if (!isOpen) return
+/**
+ * Read the capability on every open, INCLUDING the render the modal mounts on.
+ *
+ * `onModalOpen` rather than a bare `watch` because the page mounts this component only while the
+ * open flag is set (`<AssistantModal v-if="ui.assistantOpen">`), so `open` is already true at
+ * setup and a change-only watcher never fires at all. Re-reading on each open is what lets a
+ * provider wired while the tab is open be picked up with no reload; the previous answer is kept
+ * while that re-read is in flight, so a second open shows the box rather than a spinner.
+ */
+onModalOpen(open, () => {
   assistant.reset()
-  void assistant.loadCapability().catch((error: unknown) => present(error, 'assistant.title'))
+  void assistant.loadCapability()
+})
+
+/**
+ * What the modal shows: the box, or the reason there is none.
+ *
+ * A read still in flight shows the BOX, disabled, rather than a spinner in its place: this modal is
+ * opened from the sidebar and from the command palette, so the hands are already on the keyboard,
+ * and a textarea that only mounts once the read lands would swallow whatever was typed in between.
+ */
+const surface = computed(() => assistantSurface(assistant.capabilityRead, assistant.capability))
+
+/** Whether the request can be sent. */
+const gate = computed(() =>
+  submitGate({
+    read: assistant.capabilityRead,
+    capability: assistant.capability,
+    prompt: prompt.value,
+    running: assistant.running,
+  }),
+)
+
+/**
+ * Why Run is disabled, where that is not already on screen.
+ *
+ * An empty box is answered by its own placeholder and the examples under it, and a turn in flight
+ * by the button's spinner. Two are stated: a refused LENGTH, because a person who pasted a page has
+ * no way to see that it is 143 characters too long, and a capability read still in flight, because
+ * a button that will start working on its own in a moment otherwise reads as one that is broken.
+ * The line is a live region tied to the button, so the reason reaches a reader that cannot see it.
+ */
+const submitReason = computed<string | null>(() => {
+  const state = gate.value
+  if (state.state === 'too_long') {
+    return t('assistant.tooLong', { length: state.length, limit: state.limit })
+  }
+  return state.state === 'checking' ? t('assistant.reading') : null
 })
 
 /** Editing the prompt clears the previous answer, so an outcome never sits under a new question. */
@@ -57,12 +102,13 @@ watch(prompt, () => {
   if (outcome.value) assistant.reset()
 })
 
-const canSubmit = computed(
-  () => assistant.available && !assistant.running && prompt.value.trim().length > 0,
-)
+/** Re-read the capability, from the retry a failed read offers. */
+function retry(): void {
+  void assistant.loadCapability()
+}
 
 async function submit(): Promise<void> {
-  if (!canSubmit.value) return
+  if (gate.value.state !== 'ready') return
   try {
     await assistant.run(prompt.value.trim())
   } catch (error) {
@@ -110,20 +156,60 @@ function reveal(blockId: string): void {
       <div class="space-y-4">
         <p class="text-sm text-slate-400">{{ t('assistant.intro') }}</p>
 
+        <!-- The read FAILED: this deployment may well have a model, and nobody can tell from here.
+             So it offers the read again instead of explaining a configuration that may be fine. -->
+        <div
+          v-if="surface === 'unreadable'"
+          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          data-testid="assistant-unreadable"
+        >
+          <UIcon name="i-lucide-unplug" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+          <div class="space-y-2">
+            <p>{{ t('assistant.unreadable') }}</p>
+            <UButton
+              size="xs"
+              variant="soft"
+              icon="i-lucide-refresh-cw"
+              data-testid="assistant-retry"
+              @click="retry"
+            >
+              {{ t('common.retry') }}
+            </UButton>
+          </div>
+        </div>
+
         <!-- No model wired: say so, rather than offering a box whose every submit would 503. -->
         <div
-          v-if="assistant.capability && !assistant.available"
+          v-else-if="surface === 'unwired'"
           class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          data-testid="assistant-unwired"
         >
           <UIcon name="i-lucide-plug" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" />
           <span>{{ t('assistant.unavailable') }}</span>
         </div>
 
+        <!-- A model, and nothing for it to do: a different deployment fault with a different fix,
+             and every submit against it would be refused with `assistant_no_actions`. -->
+        <div
+          v-else-if="surface === 'no_actions'"
+          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          data-testid="assistant-no-actions"
+        >
+          <UIcon name="i-lucide-list-x" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" />
+          <span>{{ t('assistant.noActions') }}</span>
+        </div>
+
         <template v-else>
+          <!-- Full width and roomy: a request is a sentence or three, and the box it is typed in
+               is the whole surface. `autoresize` grows it with the text up to `maxrows`, after
+               which it scrolls rather than pushing the examples and the outcome off the modal. -->
           <UTextarea
             v-model="prompt"
-            :rows="3"
+            :rows="6"
+            autoresize
+            :maxrows="14"
             autofocus
+            class="w-full"
             :disabled="assistant.running"
             :placeholder="t('assistant.placeholder')"
             data-testid="assistant-prompt"
@@ -136,13 +222,34 @@ function reveal(blockId: string): void {
               color="primary"
               icon="i-lucide-sparkles"
               :loading="assistant.running"
-              :disabled="!canSubmit"
+              :disabled="gate.state !== 'ready'"
+              aria-describedby="assistant-submit-reason"
               data-testid="assistant-submit"
               @click="submit"
             >
               {{ t('assistant.submit') }}
             </UButton>
-            <span class="text-xs text-slate-500">{{ t('assistant.submitHint') }}</span>
+            <!-- The stated reason takes the keyboard hint's place while it applies. ONE element
+                 for both, named by the button it explains and present from the first render: a
+                 disabled button is out of the tab order and announces nothing, so a reason that
+                 only appears in a span nothing points at leaves the one reader who cannot see it
+                 with a Run that does nothing and no reason given. It announces only while it is
+                 carrying a REASON; the keyboard hint is standing information, not news. -->
+            <span
+              id="assistant-submit-reason"
+              role="status"
+              :aria-live="submitReason ? 'polite' : 'off'"
+              class="flex items-center gap-1 text-xs"
+              :class="submitReason ? 'text-amber-400' : 'text-slate-500'"
+              data-testid="assistant-submit-status"
+            >
+              <UIcon
+                v-if="gate.state === 'checking'"
+                name="i-lucide-loader-circle"
+                class="h-3 w-3 shrink-0 animate-spin"
+              />
+              {{ submitReason ?? t('assistant.submitHint') }}
+            </span>
           </div>
 
           <!-- What it can do, always visible: the catalog is the affordance. -->

package/app/components/board/AddTaskModal.vue

@@ -613,8 +613,7 @@ async function resolvePendingIssueBodies() {
 
 // Reset the form whenever the modal opens for a (new) container, and refresh the
 // imported docs/issues so the quick-pick list is current.
-watch(open, (isOpen) => {
-  if (!isOpen) return
+onModalOpen(open, () => {
   title.value = ''
   description.value = ''
   saving.value = false

package/app/components/board/CreateInitiativeModal.vue

@@ -15,7 +15,7 @@
 // planning pipeline then reads: the interviewer stops asking what an attached document already
 // answers, and the analyst and planner ground the plan in it. Linking needs a block id, so picks
 // are staged and committed once the initiative exists (the add-task flow's shared orchestration).
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import {
   sanitizeInitiativePresetInputs,
   validateInitiativePresetInputs,
@@ -112,8 +112,7 @@ function selectPreset(id: string): void {
   applyPreset()
 }
 
-watch(open, (o) => {
-  if (!o) return
+onModalOpen(open, () => {
   title.value = ''
   description.value = ''
   submitting.value = false

package/app/components/board/RecurringPipelineModal.vue

@@ -228,8 +228,7 @@ const intakeIssueTypeApplies = computed(() =>
   appliesIntakePredicate(intakeSourceState.value, 'issueType'),
 )
 
-watch(open, (isOpen) => {
-  if (!isOpen) return
+onModalOpen(open, () => {
   name.value = ''
   description.value = ''
   // Default to the first schedulable pipeline, which is the ladder's own default rung. There is no

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -64,8 +64,8 @@ async function connectWithOAuth() {
   }
 }
 
-watch(open, (isOpen) => {
-  if (isOpen) values.value = {}
+onModalOpen(open, () => {
+  values.value = {}
 })
 
 const canSubmit = computed(() => {

package/app/components/documents/StartFromDesignModal.vue

@@ -52,8 +52,7 @@ const claimant = ref<DocumentSourceKind | null>(null)
  */
 const resolvedFor = ref<string | null>(null)
 
-watch(open, (isOpen) => {
-  if (!isOpen) return
+onModalOpen(open, () => {
   pasted.value = ''
   state.value = { status: 'none' }
   claimant.value = null

package/app/components/layout/CommandBar.vue

@@ -226,8 +226,7 @@ function onKeydown(event: KeyboardEvent) {
 
 // Reset the query each time the bar opens, and focus the input.
 const inputRef = ref<{ inputRef?: HTMLInputElement } | null>(null)
-watch(open, (isOpen) => {
-  if (!isOpen) return
+onModalOpen(open, () => {
   query.value = ''
   activeIndex.value = 0
   void documents.probe()

package/app/components/panels/inspector/ServiceTestingContext.logic.spec.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { rehydratedDraft } from './ServiceTestingContext.logic'
+
+const TYPED = 'Sign in as $DEMO_USER. The seeded tenant is Acme.'
+
+describe('rehydratedDraft', () => {
+  it('follows the board while the operator has typed nothing of their own', () => {
+    // A teammate saves in another tab: the live board event is the only thing that will ever tell
+    // this textarea, so an untouched draft has to take it.
+    const arrives = { draft: '', previous: '', incoming: TYPED, saving: false }
+    expect(rehydratedDraft(arrives)).toBe(TYPED)
+    expect(rehydratedDraft({ ...arrives, draft: 'old prose', previous: 'old prose' })).toBe(TYPED)
+  })
+
+  it('leaves an in-progress edit alone when someone else saves', () => {
+    expect(
+      rehydratedDraft({ draft: TYPED, previous: '', incoming: 'their prose', saving: false }),
+    ).toBe(TYPED)
+  })
+
+  it('keeps unsaved prose through the whole of a REJECTED save', () => {
+    // The sequence the board store produces for a first-time write that fails: the optimistic
+    // patch announces our own text, then the rollback announces the value we started from. The
+    // second one is the dangerous one, because by then the draft matches what the block last said
+    // and the change reads exactly like a teammate's edit. Both land while `saving`.
+    const optimistic = { draft: TYPED, previous: '', incoming: TYPED, saving: true }
+    expect(rehydratedDraft(optimistic)).toBe(TYPED)
+    const rolledBack = { draft: TYPED, previous: TYPED, incoming: '', saving: true }
+    expect(rehydratedDraft(rolledBack)).toBe(TYPED)
+  })
+
+  it('keeps keystrokes typed while a save is in flight', () => {
+    const stillTyping = `${TYPED} Never run the billing flow.`
+    expect(
+      rehydratedDraft({ draft: stillTyping, previous: '', incoming: TYPED, saving: true }),
+    ).toBe(stillTyping)
+  })
+})

package/app/components/panels/inspector/ServiceTestingContext.logic.ts

@@ -0,0 +1,37 @@
+// The pure half of ServiceTestingContext: when a testing context arriving from the board may
+// replace what the operator has typed into the textarea. Extracted for the reason every
+// `*.logic.ts` here is (a decision worth a test should not need a mounted component to reach),
+// and this one is a rule whose failure mode is silent and expensive.
+
+/** The block value moving under the textarea, plus what the textarea currently holds. */
+export interface DraftRehydration {
+  /** What the operator has in the textarea right now. */
+  draft: string
+  /** The persisted value the draft was last in step with (the watcher's previous value). */
+  previous: string
+  /** The persisted value that just arrived. */
+  incoming: string
+  /** Whether THIS panel has a save in flight. */
+  saving: boolean
+}
+
+/**
+ * The draft to hold after the block's persisted testing context moved.
+ *
+ * An UNTOUCHED draft follows the board, so a teammate's edit lands live; a touched one is left
+ * alone. "Untouched" is measured against the value the draft was last in step with rather than
+ * against a dirty flag, because during an edit both are equally "different from what is stored"
+ * and only one of them may be overwritten.
+ *
+ * WHILE THIS PANEL IS SAVING, nothing is taken at all, and that is the case worth the extra state:
+ * the board store patches the block OPTIMISTICALLY and restores the old value if the request
+ * fails, so a rejected save arrives as a value change whose `previous` is our own optimistic write,
+ * which is exactly what an untouched draft looks like. Following it would hand the operator an
+ * emptied textarea, an "update failed" toast, and no copy of what they wrote. Every value change
+ * inside that window is ours (the optimistic write, the server's echo, the rollback), so ignoring
+ * the lot also keeps the keystrokes typed while the request was in flight.
+ */
+export function rehydratedDraft(state: DraftRehydration): string {
+  if (state.saving) return state.draft
+  return state.draft === state.previous ? state.incoming : state.draft
+}