From 923b94302c775127a5a903e6bde80c65bfa8bb07 Mon Sep 17 00:00:00 2001
From: Amit Kumar <ak.nitrr13@gmail.com>
Date: Sat, 16 May 2026 09:05:33 +0000
Subject: [PATCH 1/4] fix(web): exclude e2e specs from vitest + default E2E
 base to localhost
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- web/vitest.config.ts: add tests/e2e/** to exclude list so vitest no
  longer tries to evaluate the Playwright spec (was failing with
  "two different versions of @playwright/test" error).
- web/tests/e2e/new-session.live.spec.ts: default E2E_BASE_URL to
  http://localhost:5173 (was a remote deploy URL) so the loop and
  CI can run against locally-served stack.

Verified: npm run test:unit → 39 files, 156 passed.
---
 web/tests/e2e/new-session.live.spec.ts | 2 +-
 web/vitest.config.ts                   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/tests/e2e/new-session.live.spec.ts b/web/tests/e2e/new-session.live.spec.ts
index 3987f33..864d0fa 100644
--- a/web/tests/e2e/new-session.live.spec.ts
+++ b/web/tests/e2e/new-session.live.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-const BASE = process.env.E2E_BASE_URL ?? 'https://clm.randomcodespace.dev';
+const BASE = process.env.E2E_BASE_URL ?? 'http://localhost:5173';
 
 test('shell renders + New Session creates a INC- id and opens canvas', async ({ page }) => {
   test.setTimeout(60_000);
diff --git a/web/vitest.config.ts b/web/vitest.config.ts
index b1e5163..ef60235 100644
--- a/web/vitest.config.ts
+++ b/web/vitest.config.ts
@@ -1,5 +1,5 @@
 // web/vitest.config.ts
-import { defineConfig } from 'vitest/config';
+import { defineConfig, configDefaults } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import { fileURLToPath } from 'node:url';
 
@@ -15,6 +15,7 @@ export default defineConfig({
     setupFiles: ['./tests/setup.ts'],
     globals: true,
     css: false,
+    exclude: [...configDefaults.exclude, 'tests/e2e/**'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'lcov'],

From 6e96ce26505741431830a441988a4e6633ecbf55 Mon Sep 17 00:00:00 2001
From: Amit Kumar <ak.nitrr13@gmail.com>
Date: Sat, 16 May 2026 09:11:19 +0000
Subject: [PATCH 2/4] feat(web): Task 52 ApproveRationaleModal + SessionCanvas
 HITL wiring

- web/src/modals/ApproveRationaleModal.tsx: Modal with rationale
  textarea + optional templates row + error envelope; POSTs to
  /api/v1/sessions/{sid}/approvals/{tool_call_id} with
  { decision: 'approve', approver, rationale }.
- web/src/canvas/SessionCanvas.tsx: derives hitlContext from
  state.toolCalls (finds first pending_approval); wires plain
  onApprove (direct POST, rationale=null), onApproveWithRationale
  (opens modal). Reject + Stop still no-ops, picked up by Task 53.
- web/tests/component/ApproveRationaleModal.test.tsx: 6 tests
  covering disabled state, submit, template chips, error envelope.

Verified: typecheck clean; vitest 40 files / 162 tests pass; build 308 kB / 94 kB gzip.
---
 web/src/canvas/SessionCanvas.tsx              |  69 +++++++-
 web/src/modals/ApproveRationaleModal.tsx      | 163 ++++++++++++++++++
 .../component/ApproveRationaleModal.test.tsx  | 115 ++++++++++++
 3 files changed, 341 insertions(+), 6 deletions(-)
 create mode 100644 web/src/modals/ApproveRationaleModal.tsx
 create mode 100644 web/tests/component/ApproveRationaleModal.test.tsx

diff --git a/web/src/canvas/SessionCanvas.tsx b/web/src/canvas/SessionCanvas.tsx
index 9648a4d..7b6ffe3 100644
--- a/web/src/canvas/SessionCanvas.tsx
+++ b/web/src/canvas/SessionCanvas.tsx
@@ -1,8 +1,13 @@
+import { useState, useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import { useSessionFull } from '@/state/useSessionFull';
 import { useSetSelected } from '@/state/selectedRef';
+import { useUiHints } from '@/state/useUiHints';
 import { CanvasHead } from './CanvasHead';
-import { Transcript } from './Transcript';
+import { Transcript, type HITLContext } from './Transcript';
+import { ApproveRationaleModal } from '@/modals/ApproveRationaleModal';
+import { apiFetch } from '@/api/client';
+import { questionFromToolCall } from '@/lib/hitl/questionFromToolCall';
 import type { ToolCall } from '@/api/types';
 
 interface SessionCanvasProps {
@@ -40,9 +45,21 @@ function extraNum(extras: Record<string, unknown>, key: string, fallback: number
   return fallback;
 }
 
+function findPendingApproval(toolCalls: ToolCall[]): { toolCall: ToolCall; idx: number } | null {
+  for (let i = 0; i < toolCalls.length; i++) {
+    const tc = toolCalls[i];
+    if (tc && tc.status === 'pending_approval') return { toolCall: tc, idx: i };
+  }
+  return null;
+}
+
 export function SessionCanvas({ activeSid }: SessionCanvasProps) {
   const { state, isLoading, error, refresh } = useSessionFull(activeSid);
   const setSelected = useSetSelected();
+  const uiHints = useUiHints();
+  const [rationaleOpen, setRationaleOpen] = useState(false);
+
+  const pending = useMemo(() => findPendingApproval(state.toolCalls), [state.toolCalls]);
 
   if (activeSid === null) {
     return (
@@ -105,6 +122,36 @@ export function SessionCanvas({ activeSid }: SessionCanvasProps) {
     setSelected({ kind: 'tool_call', id: `${tc.tool}@${tc.ts}` });
   };
 
+  const hitlContext: HITLContext | null = pending
+    ? {
+        toolCall: pending.toolCall,
+        waitedSeconds: Math.max(
+          0,
+          Math.round((Date.now() - new Date(pending.toolCall.ts).getTime()) / 1000),
+        ),
+        question: questionFromToolCall(
+          pending.toolCall,
+          uiHints.data?.hitl_question_templates ?? {},
+        ),
+        confidence: state.agentsRun.at(-1)?.confidence ?? null,
+        turn: state.agentsRun.length || 1,
+        requestedBy: pending.toolCall.agent,
+        policy: pending.toolCall.risk
+          ? `risk=${pending.toolCall.risk}`
+          : 'risk=unknown',
+      }
+    : null;
+
+  const sessId = sess.id;
+  async function handleApprove() {
+    if (!pending) return;
+    await apiFetch(`/sessions/${sessId}/approvals/${pending.idx}`, {
+      method: 'POST',
+      json: { decision: 'approve', approver: 'operator', rationale: null },
+    });
+    refresh();
+  }
+
   return (
     <div style={wrap}>
       <CanvasHead
@@ -119,19 +166,29 @@ export function SessionCanvas({ activeSid }: SessionCanvasProps) {
         toolCount={state.toolCalls.length}
         agentsActive={state.agentsRun.length}
         agentsTotal={Object.keys(state.agentDefinitions).length || state.agentsRun.length}
-        onStop={() => { /* Phase 6: confirm modal */ }}
+        onStop={() => { /* Phase 6 / Task 53 confirm modal */ }}
         onRetry={refresh}
       />
       <Transcript
         agentsRun={state.agentsRun}
         toolCalls={state.toolCalls}
         activeAgent={null}
-        hitlContext={null}
+        hitlContext={hitlContext}
         onSelectTool={onSelectTool}
-        onApprove={() => { /* Phase 6 */ }}
-        onReject={() => { /* Phase 6 */ }}
-        onApproveWithRationale={() => { /* Phase 6 */ }}
+        onApprove={() => { void handleApprove(); }}
+        onReject={() => { /* Task 53: confirm modal */ }}
+        onApproveWithRationale={() => { if (pending) setRationaleOpen(true); }}
       />
+      {pending && (
+        <ApproveRationaleModal
+          open={rationaleOpen}
+          onOpenChange={setRationaleOpen}
+          sessionId={sess.id}
+          toolCallId={String(pending.idx)}
+          templates={uiHints.data?.approval_rationale_templates ?? []}
+          onApproved={refresh}
+        />
+      )}
     </div>
   );
 }
diff --git a/web/src/modals/ApproveRationaleModal.tsx b/web/src/modals/ApproveRationaleModal.tsx
new file mode 100644
index 0000000..120f0ca
--- /dev/null
+++ b/web/src/modals/ApproveRationaleModal.tsx
@@ -0,0 +1,163 @@
+import { useState, useEffect } from 'react';
+import type { CSSProperties } from 'react';
+import { Modal } from '@/components/Modal';
+import { apiFetch, ApiClientError } from '@/api/client';
+
+interface ApproveRationaleModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  sessionId: string;
+  toolCallId: string;
+  approver?: string;
+  templates?: string[];
+  onApproved: () => void;
+}
+
+const labelStyle: CSSProperties = {
+  display: 'block',
+  fontFamily: 'var(--ff-mono)',
+  fontSize: 10,
+  color: 'var(--ink-3)',
+  letterSpacing: '0.14em',
+  textTransform: 'uppercase',
+  marginBottom: 4,
+};
+
+const fieldWrap: CSSProperties = { marginBottom: 16 };
+
+const inputStyle: CSSProperties = {
+  width: '100%',
+  height: 32,
+  padding: '0 10px',
+  fontFamily: 'var(--ff-sans)',
+  fontSize: 13,
+  color: 'var(--ink-1)',
+  background: 'var(--bg-elev)',
+  border: '1px solid var(--hair)',
+  borderRadius: 0,
+  outline: 'none',
+  boxSizing: 'border-box',
+};
+
+const textareaStyle: CSSProperties = {
+  ...inputStyle,
+  height: 'auto',
+  minHeight: 96,
+  padding: '8px 10px',
+  resize: 'vertical',
+  lineHeight: 1.5,
+};
+
+const templateChip: CSSProperties = {
+  padding: '4px 8px',
+  fontFamily: 'var(--ff-mono)',
+  fontSize: 11,
+  color: 'var(--ink-2)',
+  background: 'var(--bg-subtle)',
+  border: '1px solid var(--hair)',
+  borderRadius: 0,
+  cursor: 'pointer',
+};
+
+export function ApproveRationaleModal({
+  open,
+  onOpenChange,
+  sessionId,
+  toolCallId,
+  approver = 'operator',
+  templates = [],
+  onApproved,
+}: ApproveRationaleModalProps) {
+  const [rationale, setRationale] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setRationale('');
+      setError(null);
+      setSubmitting(false);
+    }
+  }, [open]);
+
+  const canSubmit = rationale.trim().length > 0 && !submitting;
+
+  async function handleSubmit() {
+    if (!canSubmit) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await apiFetch(`/sessions/${sessionId}/approvals/${toolCallId}`, {
+        method: 'POST',
+        json: { decision: 'approve', approver, rationale: rationale.trim() },
+      });
+      onApproved();
+      onOpenChange(false);
+    } catch (e) {
+      if (e instanceof ApiClientError) {
+        setError(`${e.code}: ${e.message}`);
+      } else {
+        setError(String(e));
+      }
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      eyebrow="APPROVE WITH RATIONALE"
+      title="Approve this tool call"
+      primaryAction={{
+        label: submitting ? 'Approving…' : 'Approve',
+        onClick: () => { void handleSubmit(); },
+        disabled: !canSubmit,
+      }}
+    >
+      <div style={fieldWrap}>
+        <label style={labelStyle} htmlFor="ar-rationale">Rationale</label>
+        <textarea
+          id="ar-rationale"
+          autoFocus
+          placeholder="Why are you approving this call?"
+          value={rationale}
+          onChange={(e) => setRationale(e.target.value)}
+          style={textareaStyle}
+          disabled={submitting}
+        />
+      </div>
+      {templates.length > 0 && (
+        <div style={{ ...fieldWrap, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+          {templates.map((t) => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setRationale(t)}
+              style={templateChip}
+              disabled={submitting}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+      )}
+      {error && (
+        <div
+          role="alert"
+          style={{
+            marginTop: 12,
+            padding: '8px 10px',
+            fontFamily: 'var(--ff-mono)',
+            fontSize: 11,
+            color: 'var(--danger)',
+            background: 'var(--danger-bg)',
+            border: '1px solid var(--danger)',
+          }}
+        >
+          {error}
+        </div>
+      )}
+    </Modal>
+  );
+}
diff --git a/web/tests/component/ApproveRationaleModal.test.tsx b/web/tests/component/ApproveRationaleModal.test.tsx
new file mode 100644
index 0000000..05a4cc6
--- /dev/null
+++ b/web/tests/component/ApproveRationaleModal.test.tsx
@@ -0,0 +1,115 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '../_helpers/render';
+import { ApproveRationaleModal } from '@/modals/ApproveRationaleModal';
+
+const ORIGINAL_FETCH = globalThis.fetch;
+
+function makeFetch(response: { ok: boolean; status?: number; body?: unknown }) {
+  return vi.fn((_input: RequestInfo | URL, _init?: RequestInit) => Promise.resolve({
+    ok: response.ok,
+    status: response.status ?? (response.ok ? 200 : 400),
+    statusText: response.ok ? 'OK' : 'Bad Request',
+    clone() { return this; },
+    json: () => Promise.resolve(response.body ?? {}),
+  } as unknown as Response));
+}
+
+describe('<ApproveRationaleModal>', () => {
+  beforeEach(() => { globalThis.fetch = makeFetch({ ok: true, body: { ok: true } }); });
+  afterEach(() => { globalThis.fetch = ORIGINAL_FETCH; });
+
+  it('does not render when open=false', () => {
+    render(
+      <ApproveRationaleModal
+        open={false} onOpenChange={() => {}}
+        sessionId="SES-1" toolCallId="0" onApproved={() => {}}
+      />,
+    );
+    expect(screen.queryByText(/approve this tool call/i)).not.toBeInTheDocument();
+  });
+
+  it('renders title, rationale textarea, and disabled approve button initially', () => {
+    render(
+      <ApproveRationaleModal
+        open onOpenChange={() => {}}
+        sessionId="SES-1" toolCallId="0" onApproved={() => {}}
+      />,
+    );
+    expect(screen.getByText(/approve this tool call/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/rationale/i)).toBeInTheDocument();
+    const approve = screen.getByRole('button', { name: 'Approve' });
+    expect(approve).toBeDisabled();
+  });
+
+  it('enables Approve once rationale has content', () => {
+    render(
+      <ApproveRationaleModal
+        open onOpenChange={() => {}}
+        sessionId="SES-1" toolCallId="0" onApproved={() => {}}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText(/rationale/i), { target: { value: 'looks safe' } });
+    expect(screen.getByRole('button', { name: 'Approve' })).toBeEnabled();
+  });
+
+  it('POSTs decision=approve with rationale on submit, then calls onApproved + close', async () => {
+    const fetchMock = makeFetch({ ok: true, body: { session_id: 'SES-1' } });
+    globalThis.fetch = fetchMock;
+    const onApproved = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <ApproveRationaleModal
+        open onOpenChange={onOpenChange}
+        sessionId="SES-1" toolCallId="3"
+        approver="alice" onApproved={onApproved}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText(/rationale/i), { target: { value: 'low risk; previously reviewed' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Approve' }));
+    await waitFor(() => expect(onApproved).toHaveBeenCalledTimes(1));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const call = fetchMock.mock.calls[0];
+    if (!call) throw new Error('expected fetch call');
+    const [url, init] = call;
+    expect(url).toBe('/api/v1/sessions/SES-1/approvals/3');
+    expect(init?.method).toBe('POST');
+    expect(JSON.parse((init as RequestInit).body as string)).toEqual({
+      decision: 'approve',
+      approver: 'alice',
+      rationale: 'low risk; previously reviewed',
+    });
+  });
+
+  it('renders rationale templates as clickable chips that fill the textarea', () => {
+    render(
+      <ApproveRationaleModal
+        open onOpenChange={() => {}}
+        sessionId="SES-1" toolCallId="0"
+        templates={['Low risk', 'Pre-approved by oncall']}
+        onApproved={() => {}}
+      />,
+    );
+    const chip = screen.getByRole('button', { name: 'Pre-approved by oncall' });
+    fireEvent.click(chip);
+    expect(screen.getByLabelText(/rationale/i)).toHaveValue('Pre-approved by oncall');
+  });
+
+  it('shows error envelope when API rejects', async () => {
+    globalThis.fetch = makeFetch({
+      ok: false,
+      status: 409,
+      body: { error: { code: 'session_closed', message: 'already closed', details: {} } },
+    });
+    render(
+      <ApproveRationaleModal
+        open onOpenChange={() => {}}
+        sessionId="SES-1" toolCallId="0" onApproved={() => {}}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText(/rationale/i), { target: { value: 'go' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Approve' }));
+    await waitFor(() => expect(screen.getByRole('alert')).toBeInTheDocument());
+    expect(screen.getByRole('alert')).toHaveTextContent(/session_closed: already closed/);
+  });
+});

From 8af343ed6629fc5cbfbcdc08562d846e08551475 Mon Sep 17 00:00:00 2001
From: Amit Kumar <ak.nitrr13@gmail.com>
Date: Sat, 16 May 2026 09:13:03 +0000
Subject: [PATCH 3/4] feat(web): Task 53 ConfirmModal + wire Stop/Reject in
 SessionCanvas

- web/src/modals/ConfirmModal.tsx: generic confirm dialog with
  { title, body, confirmLabel, destructive, onConfirm }. Destructive
  variant flips primary button to --danger and stamps a
  data-destructive='true' attribute for test selection.
- web/src/components/Modal.tsx: PrimaryAction.destructive flag.
- web/src/canvas/SessionCanvas.tsx: wire HITLBand onReject -> reject
  ConfirmModal (POST decision=reject); CanvasHead onStop -> stop
  ConfirmModal (DELETE /sessions/{sid}).
- web/tests/component/ConfirmModal.test.tsx: 6 tests covering open,
  destructive eyebrow + data-destructive attr, confirm, async error,
  custom eyebrow.

Verified: typecheck clean; vitest 41 files / 168 tests pass.
---
 web/src/canvas/SessionCanvas.tsx          | 63 ++++++++++++++---
 web/src/components/Modal.tsx              |  8 ++-
 web/src/modals/ConfirmModal.tsx           | 83 +++++++++++++++++++++++
 web/tests/component/ConfirmModal.test.tsx | 80 ++++++++++++++++++++++
 4 files changed, 221 insertions(+), 13 deletions(-)
 create mode 100644 web/src/modals/ConfirmModal.tsx
 create mode 100644 web/tests/component/ConfirmModal.test.tsx

diff --git a/web/src/canvas/SessionCanvas.tsx b/web/src/canvas/SessionCanvas.tsx
index 7b6ffe3..34f5476 100644
--- a/web/src/canvas/SessionCanvas.tsx
+++ b/web/src/canvas/SessionCanvas.tsx
@@ -6,6 +6,7 @@ import { useUiHints } from '@/state/useUiHints';
 import { CanvasHead } from './CanvasHead';
 import { Transcript, type HITLContext } from './Transcript';
 import { ApproveRationaleModal } from '@/modals/ApproveRationaleModal';
+import { ConfirmModal } from '@/modals/ConfirmModal';
 import { apiFetch } from '@/api/client';
 import { questionFromToolCall } from '@/lib/hitl/questionFromToolCall';
 import type { ToolCall } from '@/api/types';
@@ -58,6 +59,8 @@ export function SessionCanvas({ activeSid }: SessionCanvasProps) {
   const setSelected = useSetSelected();
   const uiHints = useUiHints();
   const [rationaleOpen, setRationaleOpen] = useState(false);
+  const [rejectOpen, setRejectOpen] = useState(false);
+  const [stopOpen, setStopOpen] = useState(false);
 
   const pending = useMemo(() => findPendingApproval(state.toolCalls), [state.toolCalls]);
 
@@ -151,6 +154,18 @@ export function SessionCanvas({ activeSid }: SessionCanvasProps) {
     });
     refresh();
   }
+  async function handleReject() {
+    if (!pending) return;
+    await apiFetch(`/sessions/${sessId}/approvals/${pending.idx}`, {
+      method: 'POST',
+      json: { decision: 'reject', approver: 'operator', rationale: null },
+    });
+    refresh();
+  }
+  async function handleStop() {
+    await apiFetch(`/sessions/${sessId}`, { method: 'DELETE' });
+    refresh();
+  }
 
   return (
     <div style={wrap}>
@@ -166,7 +181,7 @@ export function SessionCanvas({ activeSid }: SessionCanvasProps) {
         toolCount={state.toolCalls.length}
         agentsActive={state.agentsRun.length}
         agentsTotal={Object.keys(state.agentDefinitions).length || state.agentsRun.length}
-        onStop={() => { /* Phase 6 / Task 53 confirm modal */ }}
+        onStop={() => setStopOpen(true)}
         onRetry={refresh}
       />
       <Transcript
@@ -176,19 +191,47 @@ export function SessionCanvas({ activeSid }: SessionCanvasProps) {
         hitlContext={hitlContext}
         onSelectTool={onSelectTool}
         onApprove={() => { void handleApprove(); }}
-        onReject={() => { /* Task 53: confirm modal */ }}
+        onReject={() => { if (pending) setRejectOpen(true); }}
         onApproveWithRationale={() => { if (pending) setRationaleOpen(true); }}
       />
       {pending && (
-        <ApproveRationaleModal
-          open={rationaleOpen}
-          onOpenChange={setRationaleOpen}
-          sessionId={sess.id}
-          toolCallId={String(pending.idx)}
-          templates={uiHints.data?.approval_rationale_templates ?? []}
-          onApproved={refresh}
-        />
+        <>
+          <ApproveRationaleModal
+            open={rationaleOpen}
+            onOpenChange={setRationaleOpen}
+            sessionId={sess.id}
+            toolCallId={String(pending.idx)}
+            templates={uiHints.data?.approval_rationale_templates ?? []}
+            onApproved={refresh}
+          />
+          <ConfirmModal
+            open={rejectOpen}
+            onOpenChange={setRejectOpen}
+            eyebrow="REJECT TOOL CALL"
+            title="Reject this tool call?"
+            body={
+              <>
+                <code>{pending.toolCall.tool}</code> requested by{' '}
+                <code>{pending.toolCall.agent}</code> will be skipped and
+                the session resumes without it.
+              </>
+            }
+            confirmLabel="Reject"
+            destructive
+            onConfirm={handleReject}
+          />
+        </>
       )}
+      <ConfirmModal
+        open={stopOpen}
+        onOpenChange={setStopOpen}
+        eyebrow="STOP SESSION"
+        title="Stop this session?"
+        body="The session will be cancelled and any in-flight tool calls will be aborted. This cannot be undone."
+        confirmLabel="Stop session"
+        destructive
+        onConfirm={handleStop}
+      />
     </div>
   );
 }
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 994c2f3..7f6bdbd 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -5,6 +5,7 @@ interface PrimaryAction {
   label: string;
   onClick: () => void;
   disabled?: boolean;
+  destructive?: boolean;
 }
 
 interface ModalProps {
@@ -169,15 +170,16 @@ export function Modal({
                 type="button"
                 onClick={primaryAction.onClick}
                 disabled={primaryAction.disabled}
+                data-destructive={primaryAction.destructive ? 'true' : undefined}
                 style={{
                   height: 28,
                   padding: '0 14px',
                   fontFamily: 'var(--ff-sans)',
                   fontSize: 'var(--t-body)',
                   fontWeight: 500,
-                  color: 'var(--bg-elev)',
-                  background: 'var(--ink-1)',
-                  border: '1px solid var(--ink-1)',
+                  color: primaryAction.destructive ? 'var(--bg-elev)' : 'var(--bg-elev)',
+                  background: primaryAction.destructive ? 'var(--danger)' : 'var(--ink-1)',
+                  border: `1px solid ${primaryAction.destructive ? 'var(--danger)' : 'var(--ink-1)'}`,
                   borderRadius: 0,
                   cursor: primaryAction.disabled ? 'not-allowed' : 'pointer',
                   opacity: primaryAction.disabled ? 0.5 : 1,
diff --git a/web/src/modals/ConfirmModal.tsx b/web/src/modals/ConfirmModal.tsx
new file mode 100644
index 0000000..a218d94
--- /dev/null
+++ b/web/src/modals/ConfirmModal.tsx
@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { Modal } from '@/components/Modal';
+
+interface ConfirmModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  eyebrow?: string;
+  body: ReactNode;
+  confirmLabel?: string;
+  destructive?: boolean;
+  onConfirm: () => void | Promise<void>;
+}
+
+const bodyStyle: CSSProperties = {
+  fontFamily: 'var(--ff-sans)',
+  fontSize: 13,
+  color: 'var(--ink-1)',
+  lineHeight: 1.55,
+};
+
+const errorBox: CSSProperties = {
+  marginTop: 12,
+  padding: '8px 10px',
+  fontFamily: 'var(--ff-mono)',
+  fontSize: 11,
+  color: 'var(--danger)',
+  background: 'var(--danger-bg)',
+  border: '1px solid var(--danger)',
+};
+
+export function ConfirmModal({
+  open,
+  onOpenChange,
+  title,
+  eyebrow,
+  body,
+  confirmLabel = 'Confirm',
+  destructive = false,
+  onConfirm,
+}: ConfirmModalProps) {
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setSubmitting(false);
+      setError(null);
+    }
+  }, [open]);
+
+  async function handleConfirm() {
+    if (submitting) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      eyebrow={eyebrow ?? (destructive ? 'CONFIRM (DESTRUCTIVE)' : 'CONFIRM')}
+      title={title}
+      primaryAction={{
+        label: submitting ? `${confirmLabel}…` : confirmLabel,
+        onClick: () => { void handleConfirm(); },
+        disabled: submitting,
+        destructive,
+      }}
+    >
+      <div style={bodyStyle}>{body}</div>
+      {error && <div role="alert" style={errorBox}>{error}</div>}
+    </Modal>
+  );
+}
diff --git a/web/tests/component/ConfirmModal.test.tsx b/web/tests/component/ConfirmModal.test.tsx
new file mode 100644
index 0000000..7fd5c66
--- /dev/null
+++ b/web/tests/component/ConfirmModal.test.tsx
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '../_helpers/render';
+import { ConfirmModal } from '@/modals/ConfirmModal';
+
+describe('<ConfirmModal>', () => {
+  it('does not render when closed', () => {
+    render(
+      <ConfirmModal
+        open={false} onOpenChange={() => {}}
+        title="T" body="b" onConfirm={() => {}}
+      />,
+    );
+    expect(screen.queryByText('T')).not.toBeInTheDocument();
+  });
+
+  it('renders title + body + default eyebrow', () => {
+    render(
+      <ConfirmModal
+        open onOpenChange={() => {}}
+        title="Stop session?" body="The session will be cancelled."
+        onConfirm={() => {}}
+      />,
+    );
+    expect(screen.getByText('Stop session?')).toBeInTheDocument();
+    expect(screen.getByText(/the session will be cancelled/i)).toBeInTheDocument();
+    expect(screen.getByText('CONFIRM')).toBeInTheDocument();
+  });
+
+  it('uses destructive eyebrow + destructive button styling when destructive', () => {
+    render(
+      <ConfirmModal
+        open onOpenChange={() => {}}
+        title="Drop table?" body="bye" destructive
+        confirmLabel="Drop"
+        onConfirm={() => {}}
+      />,
+    );
+    expect(screen.getByText(/CONFIRM \(DESTRUCTIVE\)/)).toBeInTheDocument();
+    const btn = screen.getByRole('button', { name: 'Drop' });
+    expect(btn).toHaveAttribute('data-destructive', 'true');
+  });
+
+  it('calls onConfirm + closes on confirm click', async () => {
+    const onConfirm = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <ConfirmModal
+        open onOpenChange={onOpenChange}
+        title="T" body="b" confirmLabel="Yes" onConfirm={onConfirm}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Yes' }));
+    await waitFor(() => expect(onConfirm).toHaveBeenCalled());
+    await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false));
+  });
+
+  it('shows error from rejected onConfirm and keeps modal open', async () => {
+    const onConfirm = vi.fn(() => Promise.reject(new Error('boom')));
+    const onOpenChange = vi.fn();
+    render(
+      <ConfirmModal
+        open onOpenChange={onOpenChange}
+        title="T" body="b" confirmLabel="Go" onConfirm={onConfirm}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Go' }));
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('boom'));
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+
+  it('honours custom eyebrow when supplied', () => {
+    render(
+      <ConfirmModal
+        open onOpenChange={() => {}}
+        title="T" eyebrow="REJECT TOOL CALL" body="b" onConfirm={() => {}}
+      />,
+    );
+    expect(screen.getByText('REJECT TOOL CALL')).toBeInTheDocument();
+  });
+});

From c74739a1f7a7c410c57b58be05802e8e0caf224b Mon Sep 17 00:00:00 2001
From: Amit Kumar <ak.nitrr13@gmail.com>
Date: Sat, 16 May 2026 09:32:49 +0000
Subject: [PATCH 4/4] test(web): Tasks 55+56 Playwright E2E hitl-approve +
 retry-after-error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- web/tests/e2e/hitl-approve.live.spec.ts: creates a session via API,
  polls for status=awaiting_input (60s timeout), opens the SPA on the
  paused session, clicks Approve in HITLBand, asserts the band hides
  and the backend status moves past awaiting_input. Soft-skips when
  the backend never reaches awaiting_input (config-dependent gating).
- web/tests/e2e/retry-after-error.live.spec.ts: end-to-end Stop +
  retry flow — creates a session via the New Session modal (so the
  canvas auto-selects it), clicks Stop, confirms the destructive
  ConfirmModal, asserts the session reaches a terminal state, then
  re-creates with the same query and verifies a fresh sid.

Local verification against uvicorn:8000:
  new-session.live: PASS
  hitl-approve.live: SKIPPED (no HITL pause in smoke config)
  retry-after-error.live: PASS
---
 web/tests/e2e/hitl-approve.live.spec.ts      | 83 ++++++++++++++++++++
 web/tests/e2e/retry-after-error.live.spec.ts | 69 ++++++++++++++++
 2 files changed, 152 insertions(+)
 create mode 100644 web/tests/e2e/hitl-approve.live.spec.ts
 create mode 100644 web/tests/e2e/retry-after-error.live.spec.ts

diff --git a/web/tests/e2e/hitl-approve.live.spec.ts b/web/tests/e2e/hitl-approve.live.spec.ts
new file mode 100644
index 0000000..fcb7d50
--- /dev/null
+++ b/web/tests/e2e/hitl-approve.live.spec.ts
@@ -0,0 +1,83 @@
+import { test, expect } from '@playwright/test';
+
+const BASE = process.env.E2E_BASE_URL ?? 'http://localhost:8000';
+
+// Best-effort live E2E for the HITL approve path.
+// Preconditions for a green run:
+//   - Backend up at BASE (uvicorn runtime.api:get_app).
+//   - The configured app (incident_management) gates at least one
+//     tool call so the session pauses with `status=awaiting_input`
+//     within HITL_TIMEOUT_MS.
+// If the session never reaches awaiting_input within the timeout the
+// test soft-skips with a descriptive reason — we still want the wiring
+// to be exercised by CI, but the underlying gating is config-dependent
+// and out of scope for this spec.
+
+const HITL_TIMEOUT_MS = 60_000;
+
+test('hitl approve: pause → click Approve → session resumes', async ({ page, request }) => {
+  test.setTimeout(120_000);
+
+  page.on('console', (m) => { if (m.type() === 'error') console.log('[browser-err]', m.text()); });
+  page.on('pageerror', (e) => console.log('[page-err]', e.message));
+
+  // 1. Create a session via the API (faster than the modal path).
+  const created = await request.post(`${BASE}/api/v1/sessions`, {
+    data: {
+      query: `hitl smoke ${Date.now()}: prod payments-svc 5xx surge`,
+      environment: 'prod',
+      submitter: { id: 'e2e-operator' },
+    },
+  });
+  expect(created.ok()).toBeTruthy();
+  const { session_id: sid } = await created.json();
+  expect(sid).toMatch(/(INC|SES)-\d{4,}/);
+
+  // 2. Poll the backend for awaiting_input or terminal state.
+  const start = Date.now();
+  let status = '';
+  while (Date.now() - start < HITL_TIMEOUT_MS) {
+    const res = await request.get(`${BASE}/api/v1/sessions/${sid}`);
+    if (res.ok()) {
+      const body = await res.json();
+      status = body.status;
+      if (status === 'awaiting_input') break;
+      if (['resolved', 'escalated', 'stopped', 'error'].includes(status)) {
+        test.skip(true, `session reached terminal ${status} without HITL pause (config-dependent)`);
+        return;
+      }
+    }
+    await page.waitForTimeout(750);
+  }
+  if (status !== 'awaiting_input') {
+    test.skip(true, `no HITL pause within ${HITL_TIMEOUT_MS}ms (got status=${status || 'unknown'})`);
+    return;
+  }
+
+  // 3. Open the SPA on the paused session.
+  await page.goto(`${BASE}/?sid=${sid}`);
+  await expect(page.getByText(/Sessions/i).first()).toBeVisible({ timeout: 15_000 });
+
+  // The session may not be auto-selected from the URL today (SessionsRail
+  // selection is in-memory). Click it in the rail so the canvas mounts.
+  const rowMatch = page.getByText(new RegExp(sid));
+  if (await rowMatch.count() > 0) {
+    await rowMatch.first().click();
+  }
+
+  // 4. Wait for the HITLBand to render in the canvas.
+  await expect(
+    page.getByRole('button', { name: /^Approve$/ }),
+  ).toBeVisible({ timeout: 20_000 });
+
+  // 5. Approve and verify the band goes away (session resumes).
+  await page.getByRole('button', { name: /^Approve$/ }).click();
+  await expect(
+    page.getByRole('button', { name: /^Approve$/ }),
+  ).toBeHidden({ timeout: 30_000 });
+
+  // 6. Confirm backend status moved past awaiting_input.
+  const after = await request.get(`${BASE}/api/v1/sessions/${sid}`);
+  const afterBody = await after.json();
+  expect(['in_progress', 'matched', 'resolved', 'escalated']).toContain(afterBody.status);
+});
diff --git a/web/tests/e2e/retry-after-error.live.spec.ts b/web/tests/e2e/retry-after-error.live.spec.ts
new file mode 100644
index 0000000..1d568be
--- /dev/null
+++ b/web/tests/e2e/retry-after-error.live.spec.ts
@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test';
+
+const BASE = process.env.E2E_BASE_URL ?? 'http://localhost:8000';
+
+// Stop + retry flow:
+//   1. Create a session.
+//   2. Click Stop in the CanvasHead, confirm in the ConfirmModal.
+//   3. Verify backend returns status='stopped'.
+//   4. Create a new session with the same query (the "retry" semantic
+//      until the framework grows a first-class retry endpoint), and
+//      verify a fresh id comes back.
+//
+// The framework retries via "create another session with the same
+// query" today, so we exercise that path directly. Once a /retry
+// endpoint lands the spec will be updated to drive it.
+
+test('stop + retry: confirm stop, then new session', async ({ page, request }) => {
+  test.setTimeout(120_000);
+
+  page.on('console', (m) => { if (m.type() === 'error') console.log('[browser-err]', m.text()); });
+  page.on('pageerror', (e) => console.log('[page-err]', e.message));
+
+  const query = `retry smoke ${Date.now()}: api auth degraded`;
+
+  // 1. Create the first session via the New Session modal (same path as
+  //    new-session.live.spec.ts so the canvas auto-selects the new sid).
+  await page.goto(`${BASE}/`);
+  await expect(page.getByText(/Sessions/i).first()).toBeVisible({ timeout: 15_000 });
+  await page.getByRole('button', { name: /New Session/i }).click();
+  await expect(page.getByText(/Start a new session/i)).toBeVisible();
+  await page.locator('#ns-query').fill(query);
+  await page.getByRole('button', { name: /Create session/i }).click();
+  await expect(page.getByText(/Start a new session/i)).toBeHidden({ timeout: 30_000 });
+
+  // 2. CanvasHead with Stop button should now be visible.
+  await expect(page.getByRole('button', { name: /^Stop$/ })).toBeVisible({ timeout: 30_000 });
+
+  // 3. Capture the displayed session id before stop (DELETE may 404 the read).
+  const sidLocator = page.getByText(/(INC|SES)-\d{4,}/).first();
+  await expect(sidLocator).toBeVisible({ timeout: 10_000 });
+  const sid1 = ((await sidLocator.textContent()) ?? '').trim().match(/(INC|SES)-\d+/)?.[0] ?? '';
+  expect(sid1).toMatch(/(INC|SES)-\d+/);
+
+  // 4. Click Stop, confirm in the destructive ConfirmModal.
+  await page.getByRole('button', { name: /^Stop$/ }).click();
+  await expect(page.getByText(/stop this session\?/i)).toBeVisible({ timeout: 10_000 });
+  await page.getByRole('button', { name: /^Stop session$/ }).click();
+  await expect(page.getByText(/stop this session\?/i)).toBeHidden({ timeout: 15_000 });
+
+  // 5. Verify backend state — stopped, error, or 404 (evicted) are all
+  //    acceptable terminal outcomes for the stop path.
+  const afterStop = await request.get(`${BASE}/api/v1/sessions/${sid1}`);
+  if (afterStop.ok()) {
+    const body = await afterStop.json();
+    expect(['stopped', 'error', 'resolved', 'escalated']).toContain(body.status);
+  } else {
+    expect([404, 501]).toContain(afterStop.status());
+  }
+
+  // 6. Retry semantics: create another session with the same query and
+  //    verify a fresh id comes back.
+  const retry = await request.post(`${BASE}/api/v1/sessions`, {
+    data: { query, environment: 'prod', submitter: { id: 'e2e-operator' } },
+  });
+  expect(retry.ok()).toBeTruthy();
+  const { session_id: sid2 } = await retry.json();
+  expect(sid2).not.toBe(sid1);
+  expect(sid2).toMatch(/(INC|SES)-\d{4,}/);
+});