feat(l1): L1WalkPage tree variant with Resolve/Escalate modals

Replaces the T20 stub. WalkPage dispatches by session_kind:
- 'flow' / 'proposal' → L1WalkTreeVariant (this commit)
- 'adhoc' → placeholder until T23

L1WalkTreeVariant: sticky header with back link + AI-built badge +
persistent Escalate/Resolve buttons; two-pane body (current step
yes/no card on left, walked-path transcript on right). ResolveModal
and EscalateModal extracted to shared WalkModals.tsx (T23 reuses).

Phase 1 caveat: this surface isn't reached by user-driven intake
(which creates adhoc sessions only). It's exercised via direct URL
or integration tests until Phase 2 wires match_or_build.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/l1/WalkModals.tsx

@@ -0,0 +1,121 @@
+import { useState } from 'react'
+
+export interface ResolveModalProps {
+  defaultNotes?: string
+  onClose: () => void
+  onConfirm: (helpful: boolean, notes: string) => Promise<void>
+}
+
+export function ResolveModal({ defaultNotes = '', onClose, onConfirm }: ResolveModalProps) {
+  const [helpful, setHelpful] = useState<boolean | null>(null)
+  const [notes, setNotes] = useState(defaultNotes)
+  const [submitting, setSubmitting] = useState(false)
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+      <div className="bg-card border border-default rounded-lg p-6 max-w-md w-full">
+        <h3 className="font-heading text-lg font-bold mb-4">Did this resolve it?</h3>
+        <div className="flex gap-3 mb-4">
+          <button
+            onClick={() => setHelpful(true)}
+            className={`flex-1 py-2 rounded-md transition-colors ${helpful === true ? 'bg-accent text-white' : 'border border-default hover:bg-elevated'}`}
+          >
+            Yes
+          </button>
+          <button
+            onClick={() => setHelpful(false)}
+            className={`flex-1 py-2 rounded-md transition-colors ${helpful === false ? 'bg-warning text-white' : 'border border-default hover:bg-elevated'}`}
+          >
+            No
+          </button>
+        </div>
+        <textarea
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+          rows={3}
+          placeholder="Resolution notes…"
+          className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-accent/40"
+        />
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="rounded-md border border-default px-4 py-2 text-sm hover:bg-elevated transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            disabled={helpful === null || submitting}
+            onClick={async () => {
+              setSubmitting(true)
+              try { await onConfirm(helpful!, notes) } finally { setSubmitting(false) }
+            }}
+            className="rounded-md bg-accent text-white px-4 py-2 text-sm disabled:opacity-50 hover:bg-accent/90 transition-colors"
+          >
+            {submitting ? 'Saving…' : 'Confirm'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export interface EscalateModalProps {
+  onClose: () => void
+  onConfirm: (category: string, reason: string) => Promise<void>
+}
+
+const REASON_CATEGORIES = [
+  'Out of L1 scope',
+  'Customer demanding senior',
+  'Tree dead-ended',
+  'AI tree wrong',
+  'No KB available',
+  'Other',
+] as const
+
+export function EscalateModal({ onClose, onConfirm }: EscalateModalProps) {
+  const [category, setCategory] = useState<string>(REASON_CATEGORIES[0])
+  const [reason, setReason] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+      <div className="bg-card border border-default rounded-lg p-6 max-w-md w-full">
+        <h3 className="font-heading text-lg font-bold mb-4">Escalate to engineering</h3>
+        <label className="block text-xs uppercase tracking-wider text-muted-foreground mb-1">Reason</label>
+        <select
+          value={category}
+          onChange={(e) => setCategory(e.target.value)}
+          className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-accent/40"
+        >
+          {REASON_CATEGORIES.map((c) => (<option key={c}>{c}</option>))}
+        </select>
+        <textarea
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          rows={3}
+          placeholder="Details (optional)…"
+          className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-accent/40"
+        />
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="rounded-md border border-default px-4 py-2 text-sm hover:bg-elevated transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            disabled={submitting}
+            onClick={async () => {
+              setSubmitting(true)
+              try { await onConfirm(category, reason) } finally { setSubmitting(false) }
+            }}
+            className="rounded-md bg-warning text-white px-4 py-2 text-sm disabled:opacity-50 hover:bg-warning/90 transition-colors"
+          >
+            {submitting ? 'Escalating…' : 'Confirm escalate'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}