From c0bddc289e2a0bf3e75817b05cb26f5fcd795af3 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@resolutionflow.com>
Date: Thu, 28 May 2026 14:17:02 -0400
Subject: [PATCH] feat(l1): L1WalkPage tree variant with Resolve/Escalate
 modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/components/l1/L1WalkTreeVariant.tsx   | 173 ++++++++++++++++++
 frontend/src/components/l1/WalkModals.tsx     | 121 ++++++++++++
 frontend/src/pages/l1/L1WalkPage.tsx          |  69 ++++++-
 3 files changed, 356 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/l1/L1WalkTreeVariant.tsx
 create mode 100644 frontend/src/components/l1/WalkModals.tsx

diff --git a/frontend/src/components/l1/L1WalkTreeVariant.tsx b/frontend/src/components/l1/L1WalkTreeVariant.tsx
new file mode 100644
index 00000000..eaebcf3a
--- /dev/null
+++ b/frontend/src/components/l1/L1WalkTreeVariant.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react'
+import { ChevronLeft } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { l1Api } from '@/api/l1'
+import type { WalkSession } from '@/types/l1'
+import { EscalateModal, ResolveModal } from '@/components/l1/WalkModals'
+
+interface Props {
+  session: WalkSession
+  onSessionUpdate: (s: WalkSession) => void
+  onDone: () => void
+}
+
+export function L1WalkTreeVariant({ session, onSessionUpdate, onDone }: Props) {
+  const [showResolve, setShowResolve] = useState(false)
+  const [showEscalate, setShowEscalate] = useState(false)
+  const [note, setNote] = useState('')
+
+  // Phase 1: we don't have the live flow-tree fetch wired up here yet
+  // (the tree-navigation pages have their own loader). The walker shows the
+  // walked-path side panel, advance buttons stubbed for now — Phase 2 wires
+  // the actual flow tree fetching + node advancement against tree data.
+  // The "Yes/No" buttons record a synthetic step so the walked_path JSONB
+  // grows; this gives us a functional roundtrip until Phase 2 wires the tree.
+
+  const handleAnswer = async (answer: 'yes' | 'no') => {
+    const nodeId = session.current_node_id || `step-${session.walked_path.length + 1}`
+    try {
+      const updated = await l1Api.step(session.id, {
+        node_id: nodeId,
+        question: `Step ${session.walked_path.length + 1}`,
+        answer,
+        note: note || null,
+      })
+      onSessionUpdate(updated)
+      setNote('')
+    } catch (err) {
+      // Keep silent for v1 — Phase 2 wires real error UI
+      console.error('step failed', err)
+    }
+  }
+
+  const lastError = (err: unknown): string => {
+    if (typeof err === 'object' && err && 'response' in err) {
+      const detail = (err as any).response?.data?.detail
+      if (typeof detail === 'string') return detail
+    }
+    return 'Unexpected error'
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <header className="border-b border-default px-6 py-4 flex items-center justify-between bg-sidebar">
+        <Link to="/l1" className="flex items-center gap-2 text-muted-foreground hover:text-heading transition-colors">
+          <ChevronLeft className="w-4 h-4" />
+          <span className="font-mono text-xs">#{session.id.slice(0, 8)}</span>
+          {session.session_kind === 'proposal' && (
+            <span className="ml-2 text-xs bg-accent/10 text-accent px-2 py-0.5 rounded">AI-built</span>
+          )}
+        </Link>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowEscalate(true)}
+            className="rounded-md border border-default px-3 py-1.5 text-sm hover:bg-elevated transition-colors"
+            disabled={session.status !== 'active'}
+          >
+            Escalate
+          </button>
+          <button
+            onClick={() => setShowResolve(true)}
+            className="rounded-md bg-accent text-white px-3 py-1.5 text-sm hover:bg-accent/90 transition-colors disabled:opacity-50"
+            disabled={session.status !== 'active'}
+          >
+            Resolve ✓
+          </button>
+        </div>
+      </header>
+
+      {/* Two-pane body */}
+      <div className="flex-1 flex min-h-0">
+        <main className="flex-1 p-6 overflow-y-auto min-h-0">
+          <p className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground mb-2">
+            Step {session.walked_path.length + 1}
+          </p>
+          {session.status !== 'active' ? (
+            <div className="rounded-lg border border-default bg-card p-6">
+              <p className="text-sm text-muted-foreground">
+                This session is <span className="font-semibold">{session.status}</span>.
+              </p>
+              <button onClick={onDone} className="mt-3 rounded-md bg-accent text-white px-3 py-1.5 text-sm">
+                Back to workspace
+              </button>
+            </div>
+          ) : (
+            <div className="rounded-lg border border-default bg-card p-6 max-w-2xl">
+              <p className="text-lg mb-6">Continue the walk:</p>
+              <div className="flex gap-3">
+                <button
+                  onClick={() => handleAnswer('yes')}
+                  className="flex-1 rounded-md bg-accent text-white py-3 text-base font-medium hover:bg-accent/90 min-h-[44px] transition-colors"
+                >
+                  Yes
+                </button>
+                <button
+                  onClick={() => handleAnswer('no')}
+                  className="flex-1 rounded-md border border-default py-3 text-base font-medium hover:bg-elevated min-h-[44px] transition-colors"
+                >
+                  No
+                </button>
+              </div>
+              <textarea
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+                placeholder="Optional note for this step…"
+                rows={2}
+                className="mt-4 w-full bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
+              />
+            </div>
+          )}
+        </main>
+
+        {/* Right pane: transcript */}
+        <aside className="w-80 border-l border-default bg-page p-4 overflow-y-auto">
+          <p className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground mb-3">
+            Walked so far
+          </p>
+          {session.walked_path.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No steps yet.</p>
+          ) : (
+            <ol className="space-y-3 text-sm">
+              {session.walked_path.map((step, i) => (
+                <li key={i} className="flex flex-col">
+                  <span className="text-muted-foreground text-xs">{step.question}</span>
+                  <span className="font-medium">→ {step.answer}</span>
+                  {step.l1_note && <span className="text-muted-foreground text-xs italic mt-0.5">{step.l1_note}</span>}
+                </li>
+              ))}
+            </ol>
+          )}
+        </aside>
+      </div>
+
+      {/* Modals */}
+      {showResolve && (
+        <ResolveModal
+          onClose={() => setShowResolve(false)}
+          onConfirm={async (helpful, resolutionNotes) => {
+            try {
+              await l1Api.resolve(session.id, { helpful, resolution_notes: resolutionNotes })
+              onDone()
+            } catch (err) {
+              console.error('resolve failed:', lastError(err))
+            }
+          }}
+        />
+      )}
+      {showEscalate && (
+        <EscalateModal
+          onClose={() => setShowEscalate(false)}
+          onConfirm={async (category, reason) => {
+            try {
+              await l1Api.escalate(session.id, { reason, reason_category: category })
+              onDone()
+            } catch (err) {
+              console.error('escalate failed:', lastError(err))
+            }
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/l1/WalkModals.tsx b/frontend/src/components/l1/WalkModals.tsx
new file mode 100644
index 00000000..f51033ad
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/frontend/src/pages/l1/L1WalkPage.tsx b/frontend/src/pages/l1/L1WalkPage.tsx
index 24007ec7..3144f230 100644
--- a/frontend/src/pages/l1/L1WalkPage.tsx
+++ b/frontend/src/pages/l1/L1WalkPage.tsx
@@ -1,13 +1,68 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
 import { PageMeta } from '@/components/common/PageMeta'
+import { l1Api } from '@/api/l1'
+import { L1WalkTreeVariant } from '@/components/l1/L1WalkTreeVariant'
+import type { WalkSession } from '@/types/l1'
 
 export default function L1WalkPage() {
-  return (
-    <div className="overflow-y-auto h-full">
-      <PageMeta title="L1 Walk" />
-      <div className="max-w-4xl mx-auto px-6 pt-12 pb-12">
-        <h1 className="font-heading text-2xl font-bold">L1 Walk</h1>
-        <p className="text-muted-foreground mt-2">Loading…</p>
+  const { sessionId } = useParams<{ sessionId: string }>()
+  const navigate = useNavigate()
+  const [session, setSession] = useState<WalkSession | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!sessionId) return
+    l1Api.getSession(sessionId)
+      .then(setSession)
+      .catch((err) => {
+        const msg = err?.response?.data?.detail || err?.message || 'Failed to load session'
+        setError(typeof msg === 'string' ? msg : 'Failed to load session')
+      })
+  }, [sessionId])
+
+  if (error) {
+    return (
+      <div className="overflow-y-auto h-full">
+        <PageMeta title="L1 Walk" />
+        <div className="max-w-4xl mx-auto px-6 pt-12 text-muted-foreground">
+          {error}
+        </div>
       </div>
-    </div>
+    )
+  }
+  if (!session) {
+    return (
+      <div className="overflow-y-auto h-full">
+        <PageMeta title="L1 Walk" />
+        <div className="max-w-4xl mx-auto px-6 pt-12 text-muted-foreground">Loading…</div>
+      </div>
+    )
+  }
+
+  const handleDone = () => navigate('/l1')
+
+  // Phase 1: adhoc variant (T23) handles session_kind='adhoc'. Tree variant handles flow/proposal.
+  // For T22, only the tree variant is implemented. Adhoc sessions render a placeholder until T23 lands.
+  if (session.session_kind === 'adhoc') {
+    return (
+      <div className="overflow-y-auto h-full">
+        <PageMeta title="L1 Walk" />
+        <div className="max-w-4xl mx-auto px-6 pt-12 text-muted-foreground">
+          Ad-hoc walker pending (T23).
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <PageMeta title="L1 Walk" />
+      <L1WalkTreeVariant
+        session={session}
+        onSessionUpdate={setSession}
+        onDone={handleDone}
+      />
+    </>
   )
 }