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>
This commit is contained in:
173
frontend/src/components/l1/L1WalkTreeVariant.tsx
Normal file
173
frontend/src/components/l1/L1WalkTreeVariant.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
121
frontend/src/components/l1/WalkModals.tsx
Normal file
121
frontend/src/components/l1/WalkModals.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user