refactor(chat): route browser chat through one runtime (P3 Slice-Zero Task 5) (#1172)

Co-authored-by: shaggy <[email protected]>

apps/web/src/spa/pages/chat.spec.tsx

@@ -108,6 +108,58 @@ async function flushAsync(times = 5): Promise<void> {
   }
 }
 
+/** Deterministic idempotency key for the Task Five red-first page send test. */
+const PAGE_UUID = 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb';
+
+/** Install a controllable `crypto.randomUUID` and return a restore fn. Uses
+ * defineProperty on the crypto instance so it works whether or not the native
+ * method is configurable (it lives on the prototype; an own property shadows it). */
+function installRandomUUID(fn: () => string): () => void {
+  const g = globalThis as { crypto?: { randomUUID?: () => string } };
+  if (!g.crypto) {
+    Object.defineProperty(g, 'crypto', { configurable: true, writable: true, value: {} });
+  }
+  const cryptoObj = g.crypto as { randomUUID?: () => string };
+  const original = Object.getOwnPropertyDescriptor(cryptoObj, 'randomUUID');
+  Object.defineProperty(cryptoObj, 'randomUUID', {
+    configurable: true,
+    writable: true,
+    value: fn,
+  });
+  return () => {
+    if (original) {
+      Object.defineProperty(cryptoObj, 'randomUUID', original);
+    } else {
+      Reflect.deleteProperty(cryptoObj, 'randomUUID');
+    }
+  };
+}
+
+/**
+ * Task Five MAJOR-1: the send path is PROTOCOL-driven — the browser may send only
+ * as the server advertised, once per connection, over the server-to-client-only
+ * `chat:send-capability`. Model that advertisement for THIS connection id so the
+ * page send tests take the intended branch. `legacy-message` is the default
+ * (advertised in `beforeEach`/`remountWithFetch`); the pi turn-runtime tests
+ * reset the generation and re-advertise `turn-send` via the helper below.
+ */
+function advertiseSendCapability(protocol: 'legacy-message' | 'turn-send' | 'unavailable'): void {
+  fake.serverEmit('chat:send-capability', { protocol, connectionId: fake.socket.id });
+}
+
+/** Reset the negotiated protocol to a fresh, unlocked generation (clearing the
+ * default `legacy-message` advertisement + first-wins lock), then advertise the
+ * pi turn-runtime `turn:send` protocol for this connection. The per-test override
+ * for the page send tests that route through `turn:send`. */
+async function advertiseTurnSendGeneration(): Promise<void> {
+  await act(async () => {
+    fake.simulateReconnect();
+  });
+  await act(async () => {
+    advertiseSendCapability('turn-send');
+  });
+}
+
 let fake: ReturnType<typeof createFakeChatSocket>;
 let root: Root | null;
 let container: HTMLElement;
@@ -137,6 +189,12 @@ beforeEach(async () => {
   // Settle the selection hook's mount fetches so the default in-catalog tuple
   // persists and `canSend` is true for the existing send-path tests.
   await flushAsync();
+  // Model the server's post-auth send-capability advertisement (MAJOR-1). Most
+  // page send tests exercise the legacy `message` branch; the pi turn-runtime
+  // tests override to `turn-send` via advertiseTurnSendGeneration().
+  await act(async () => {
+    advertiseSendCapability('legacy-message');
+  });
 });
 
 afterEach(async () => {
@@ -159,6 +217,11 @@ async function remountWithFetch(fetchImpl: typeof fetch): Promise<void> {
     root?.render(<ChatPage />);
   });
   await flushAsync();
+  // Re-advertise on the remounted connection — the prior generation's capability
+  // does not carry across a remount (fresh hook instance, unadvertised protocol).
+  await act(async () => {
+    advertiseSendCapability('legacy-message');
+  });
 }
 
 describe('ChatPage', () => {
@@ -571,6 +634,156 @@ describe('ChatPage', () => {
     expect(fake.emitted).toContainEqual({ event: 'abort', payload: { conversationId: 'c1' } });
   });
 
+  it('emits turn:send with the nested persisted selection tuple and a UUID idempotency key (never the legacy message event)', async () => {
+    await advertiseTurnSendGeneration();
+    const restore = installRandomUUID(() => PAGE_UUID);
+    try {
+      // Send is disabled without an active conversation — establish one first.
+      await act(async () => {
+        fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      });
+
+      const textarea = container.querySelector(
+        'textarea[aria-label="Message"]',
+      ) as HTMLTextAreaElement;
+      await act(async () => {
+        setValue(textarea, 'hello there');
+      });
+      await act(async () => {
+        textarea.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+        );
+      });
+    } finally {
+      restore();
+    }
+
+    const sends = fake.emitted.filter((e) => e.event === 'turn:send');
+    expect(sends).toHaveLength(1);
+    expect(sends[0]?.payload).toEqual({
+      conversationId: 'c1',
+      content: 'hello there',
+      selection: { harnessId: 'pi', providerId: 'openai', modelId: 'gpt-5' },
+      idempotencyKey: PAGE_UUID,
+    });
+    // The pi-rpc page send must not emit the embedded `message` event, and must
+    // never send a flat {provider, modelId} that drops the harnessId.
+    expect(fake.emitted.some((e) => e.event === 'message')).toBe(false);
+  });
+
+  it('keeps the composer content and emits nothing when the send cannot mint an idempotency key, so the user can retry (composer clears only on success) — Task Five group 5', async () => {
+    await advertiseTurnSendGeneration();
+    const failing = installRandomUUID(() => {
+      throw new Error('secure random unavailable');
+    });
+    try {
+      await act(async () => {
+        fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      });
+      const textarea = container.querySelector(
+        'textarea[aria-label="Message"]',
+      ) as HTMLTextAreaElement;
+      await act(async () => {
+        setValue(textarea, 'keep me');
+      });
+      await act(async () => {
+        textarea.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+        );
+      });
+
+      // No wire traffic: neither the harness turn nor the legacy message.
+      expect(fake.emitted.some((e) => e.event === 'turn:send')).toBe(false);
+      expect(fake.emitted.some((e) => e.event === 'message')).toBe(false);
+      // The composer retained its content — it clears ONLY on a successful send,
+      // so the user can retry without retyping.
+      expect(textarea.value).toBe('keep me');
+      // A visible, safe notice explains why nothing was sent.
+      expect(container.querySelector('[role="alert"]')).toBeTruthy();
+    } finally {
+      failing();
+    }
+  });
+
+  it('clears the composer after a successful turn:send and never falls back to the legacy message event — Task Five group 5', async () => {
+    await advertiseTurnSendGeneration();
+    const restore = installRandomUUID(() => PAGE_UUID);
+    try {
+      await act(async () => {
+        fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      });
+      const textarea = container.querySelector(
+        'textarea[aria-label="Message"]',
+      ) as HTMLTextAreaElement;
+      await act(async () => {
+        setValue(textarea, 'ship it');
+      });
+      await act(async () => {
+        textarea.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+        );
+      });
+
+      const sends = fake.emitted.filter((e) => e.event === 'turn:send');
+      expect(sends).toHaveLength(1);
+      expect(fake.emitted.some((e) => e.event === 'message')).toBe(false);
+      // On a successful send the composer clears.
+      expect(textarea.value).toBe('');
+    } finally {
+      restore();
+    }
+  });
+
+  it('sends the freshly persisted selection as a nested turn:send tuple after the user changes provider/model — never a stale default or flat fields — Task Five group 5', async () => {
+    await advertiseTurnSendGeneration();
+    const restore = installRandomUUID(() => PAGE_UUID);
+    try {
+      // Change the selection away from the mount default and let it persist.
+      const providerSelect = container.querySelector(
+        'select[aria-label="Provider"]',
+      ) as HTMLSelectElement;
+      await act(async () => {
+        selectValue(providerSelect, 'anthropic');
+      });
+      const modelSelect = container.querySelector(
+        'select[aria-label="Model"]',
+      ) as HTMLSelectElement;
+      await act(async () => {
+        selectValue(modelSelect, 'anthropic:claude');
+      });
+      await flushAsync();
+
+      await act(async () => {
+        fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      });
+      const textarea = container.querySelector(
+        'textarea[aria-label="Message"]',
+      ) as HTMLTextAreaElement;
+      await act(async () => {
+        setValue(textarea, 'routed');
+      });
+      await act(async () => {
+        textarea.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+        );
+      });
+
+      const sends = fake.emitted.filter((e) => e.event === 'turn:send');
+      expect(sends).toHaveLength(1);
+      // The nested tuple reflects the CURRENTLY persisted selection, not the
+      // mount default {openai, gpt-5}, and never flat provider/model fields.
+      expect(sends[0]?.payload).toEqual({
+        conversationId: 'c1',
+        content: 'routed',
+        selection: { harnessId: 'pi', providerId: 'anthropic', modelId: 'claude' },
+        idempotencyKey: PAGE_UUID,
+      });
+      expect(fake.emitted.some((e) => e.event === 'message')).toBe(false);
+    } finally {
+      restore();
+    }
+  });
+
   it('disables send until a selection has persisted — no send with an unset selection', async () => {
     await remountWithFetch(harnessFetch(null));