Michael Chihlas
9c34d1e82d
Live walk defect: the builder generated alternatives questions ("Is Jane's
account a Microsoft account or a local account?") while the UI could only
offer Yes/No. Root cause: SYSTEM_PROMPT mandated a label-less
'<yes/no question>' shape with no way to express the two answers.
- SYSTEM_PROMPT: question nodes must carry yes_label/no_label — the literal
button texts; alternatives questions must use the alternatives as labels.
- validate_node: labels hard-floor-scanned, must be distinct non-empty strings.
- _ensure_labels: server defaults missing labels to Yes/No.
- advance_ai_build: records answer_label (and both labels) in walked_path,
derived from the server-held pending_node — never client-supplied.
- _build_context: LLM context shows the chosen label, not a bare yes/no
(a raw "-> yes" on an alternatives question degrades the next generation).
- normalize_walked_path: captured flywheel trees keep question labels.
- Frontend: buttons render yes_label/no_label; walk transcript and
L1EscalationsSection render answer_label.
Phase 2A backend set: 137 passed / 0 failed / 8 deselected. tsc, eslint,
vite build clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
294 lines
12 KiB
TypeScript
294 lines
12 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react'
|
||
import { ChevronLeft } from 'lucide-react'
|
||
import { Link } from 'react-router-dom'
|
||
import { l1Api } from '@/api/l1'
|
||
import type { TreeNode, 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 2A: ai_build sessions are walked node-by-node against /next-node
|
||
// (real AI-generated decision tree), not the synthetic stepping below.
|
||
const isAiBuild = session.session_kind === 'ai_build'
|
||
const [node, setNode] = useState<TreeNode | null>(null)
|
||
const [nodeLoading, setNodeLoading] = useState(false)
|
||
const [nodeError, setNodeError] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
if (!isAiBuild || session.status !== 'active') return
|
||
let cancelled = false
|
||
setNodeLoading(true)
|
||
l1Api
|
||
.nextNode(session.id, {})
|
||
.then((r) => {
|
||
if (!cancelled) setNode(r.node)
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setNodeError('Could not generate the next step.')
|
||
})
|
||
.finally(() => {
|
||
if (!cancelled) setNodeLoading(false)
|
||
})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [isAiBuild, session.id, session.status])
|
||
|
||
const advanceNode = useCallback(
|
||
async (body: { answer?: 'yes' | 'no' }) => {
|
||
if (!node) return
|
||
setNodeLoading(true)
|
||
setNodeError(null)
|
||
try {
|
||
const r = await l1Api.nextNode(session.id, {
|
||
node_id: node.id,
|
||
node_text: node.text,
|
||
...body,
|
||
})
|
||
setNode(r.node)
|
||
} catch {
|
||
setNodeError('Could not generate the next step.')
|
||
} finally {
|
||
setNodeLoading(false)
|
||
}
|
||
},
|
||
[node, session.id],
|
||
)
|
||
|
||
const isTerminalNode =
|
||
node?.node_type === 'resolved' ||
|
||
node?.node_type === 'escalate' ||
|
||
node?.node_type === 'needs_review'
|
||
|
||
// 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 { response?: { data?: { detail?: string } } }).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' || session.session_kind === 'ai_build') && (
|
||
<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">
|
||
{isAiBuild && (
|
||
<div className="mb-4 max-w-2xl rounded-md border border-warning/30 bg-warning/10 px-4 py-2 text-xs text-warning">
|
||
These are high-confidence troubleshooting steps, but they come from
|
||
outside your organization’s knowledge base — review them before acting.
|
||
When in doubt, escalate early.
|
||
</div>
|
||
)}
|
||
<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>
|
||
) : isAiBuild ? (
|
||
<div className="rounded-lg border border-default bg-card p-6 max-w-2xl space-y-4">
|
||
{nodeLoading && (
|
||
<p className="text-sm text-muted-foreground">Thinking through the next step…</p>
|
||
)}
|
||
{nodeError && <p className="text-sm text-danger">{nodeError}</p>}
|
||
|
||
{!nodeLoading && node?.node_type === 'question' && (
|
||
<>
|
||
<p className="text-lg">{node.text}</p>
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={() => advanceNode({ answer: '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"
|
||
>
|
||
{node.yes_label ?? 'Yes'}
|
||
</button>
|
||
<button
|
||
onClick={() => advanceNode({ answer: 'no' })}
|
||
className="flex-1 rounded-md border border-default py-3 text-base font-medium hover:bg-elevated min-h-[44px] transition-colors"
|
||
>
|
||
{node.no_label ?? 'No'}
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{!nodeLoading && node?.node_type === 'instruction' && (
|
||
<>
|
||
<p className="text-lg">{node.text}</p>
|
||
<button
|
||
onClick={() => advanceNode({})}
|
||
className="rounded-md bg-accent text-white px-5 py-3 text-base font-medium hover:bg-accent/90 min-h-[44px] transition-colors"
|
||
>
|
||
Done — next step
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
{!nodeLoading && isTerminalNode && node && (
|
||
<>
|
||
<p className="text-lg">{node.text}</p>
|
||
{node.node_type === 'resolved' ? (
|
||
<button
|
||
onClick={() => setShowResolve(true)}
|
||
className="rounded-md bg-accent text-white px-5 py-3 text-base font-medium hover:bg-accent/90 min-h-[44px] transition-colors"
|
||
>
|
||
Mark resolved ✓
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={() => setShowEscalate(true)}
|
||
className="rounded-md bg-warning text-white px-5 py-3 text-base font-medium hover:bg-warning/90 min-h-[44px] transition-colors"
|
||
>
|
||
Escalate to engineering
|
||
</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 ?? step.text}</span>
|
||
{step.answer && <span className="font-medium">→ {step.answer_label ?? 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>
|
||
)
|
||
}
|