feat(l1): walker renders AI-built nodes via next-node + disclaimer banner
L1WalkTreeVariant drives ai_build sessions node-by-node through POST /next-node: fetch first node on mount, render question (yes/no) / instruction (acknowledge), pass node_text on each advance; terminal nodes (resolved/escalate/needs_review) hand off to the existing Resolve/Escalate modals. Standing AI disclaimer banner on ai_build walks. L1WalkPage routes ai_build to the tree variant. Published flow/ proposal keep the Phase-1 stub. tsc -b + eslint clean. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,173 +1,183 @@
|
||||
import { useState } from 'react'
|
||||
import { ChevronLeft } from 'lucide-react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import type { TreeNode, WalkSession } from '@/types/l1'
|
||||
import { l1Api } from '@/api/l1'
|
||||
import type { WalkSession } from '@/types/l1'
|
||||
import { EscalateModal, ResolveModal } from '@/components/l1/WalkModals'
|
||||
import { WalkModals } from './WalkModals'
|
||||
|
||||
interface Props {
|
||||
session: WalkSession
|
||||
onSessionUpdate: (s: WalkSession) => void
|
||||
onDone: () => void
|
||||
}
|
||||
|
||||
export function L1WalkTreeVariant({ session, onSessionUpdate, onDone }: Props) {
|
||||
/**
|
||||
* L1WalkTreeVariant — renders a decision-tree walk.
|
||||
*
|
||||
* For `ai_build` sessions it drives real, node-by-node generation via
|
||||
* POST /l1/sessions/{id}/next-node: fetch the first node on mount, then on each
|
||||
* answer/acknowledge POST the current node id (+ its text, so the walked path and
|
||||
* captured tree stay legible) and render the returned node. Terminal nodes
|
||||
* (resolved / escalate / needs_review) hand off to the existing Resolve/Escalate
|
||||
* modals. Published `flow` / `proposal` walks keep the Phase-1 stub for now.
|
||||
*/
|
||||
export function L1WalkTreeVariant({ session }: Props) {
|
||||
const isAiBuild = session.session_kind === 'ai_build'
|
||||
const [showResolve, setShowResolve] = useState(false)
|
||||
const [showEscalate, setShowEscalate] = useState(false)
|
||||
const [note, setNote] = useState('')
|
||||
const [node, setNode] = useState<TreeNode | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// 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,
|
||||
// Fetch the first node on mount (ai_build only).
|
||||
useEffect(() => {
|
||||
if (!isAiBuild) return
|
||||
let cancelled = false
|
||||
setLoading(true)
|
||||
l1Api
|
||||
.nextNode(session.id, {})
|
||||
.then((r) => {
|
||||
if (!cancelled) setNode(r.node)
|
||||
})
|
||||
onSessionUpdate(updated)
|
||||
setNote('')
|
||||
} catch (err) {
|
||||
// Keep silent for v1 — Phase 2 wires real error UI
|
||||
console.error('step failed', err)
|
||||
}
|
||||
.catch(() => {
|
||||
if (!cancelled) setError('Could not generate the next step.')
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false)
|
||||
})
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [isAiBuild, session.id])
|
||||
|
||||
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'
|
||||
const advance = useCallback(
|
||||
async (body: { answer?: 'yes' | 'no'; acknowledged?: boolean }) => {
|
||||
if (!node) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const r = await l1Api.nextNode(session.id, {
|
||||
node_id: node.id,
|
||||
node_text: node.text,
|
||||
...body,
|
||||
})
|
||||
setNode(r.node)
|
||||
} catch {
|
||||
setError('Could not generate the next step.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
},
|
||||
[node, session.id],
|
||||
)
|
||||
|
||||
const isTerminal =
|
||||
node?.node_type === 'resolved' ||
|
||||
node?.node_type === 'escalate' ||
|
||||
node?.node_type === 'needs_review'
|
||||
|
||||
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 className="space-y-4">
|
||||
{isAiBuild && (
|
||||
<div className="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>
|
||||
</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' ? (
|
||||
{!isAiBuild && (
|
||||
<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>.
|
||||
Walking flow <span className="font-mono">{session.flow_id}</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>
|
||||
<p className="mt-2 text-heading">Synthetic step rendering (Phase 1 stub).</p>
|
||||
</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>
|
||||
)}
|
||||
|
||||
{isAiBuild && (
|
||||
<div className="rounded-lg border border-default bg-card p-6 space-y-4">
|
||||
{loading && (
|
||||
<p className="text-sm text-muted-foreground">Thinking through the next step…</p>
|
||||
)}
|
||||
{error && <p className="text-sm text-danger">{error}</p>}
|
||||
|
||||
{!loading && node?.node_type === 'question' && (
|
||||
<>
|
||||
<p className="text-lg text-heading">{node.text}</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"
|
||||
onClick={() => advance({ answer: 'yes' })}
|
||||
className="rounded-md bg-accent px-5 py-2 text-sm text-white"
|
||||
>
|
||||
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"
|
||||
onClick={() => advance({ answer: 'no' })}
|
||||
className="rounded-md border border-default px-5 py-2 text-sm"
|
||||
>
|
||||
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>
|
||||
{!loading && node?.node_type === 'instruction' && (
|
||||
<>
|
||||
<p className="text-lg text-heading">{node.text}</p>
|
||||
<button
|
||||
onClick={() => advance({ acknowledged: true })}
|
||||
className="rounded-md bg-accent px-5 py-2 text-sm text-white"
|
||||
>
|
||||
Done — next step
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!loading && isTerminal && node && (
|
||||
<>
|
||||
<p className="text-lg text-heading">{node.text}</p>
|
||||
<div className="flex gap-3">
|
||||
{node.node_type === 'resolved' ? (
|
||||
<button
|
||||
onClick={() => setShowResolve(true)}
|
||||
className="rounded-md bg-accent px-5 py-2 text-sm text-white"
|
||||
>
|
||||
Mark resolved
|
||||
</button>
|
||||
) : (
|
||||
<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>
|
||||
<button
|
||||
onClick={() => setShowEscalate(true)}
|
||||
className="rounded-md bg-accent px-5 py-2 text-sm text-white"
|
||||
>
|
||||
Escalate to engineering
|
||||
</button>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Resolve / Escalate are always reachable during a walk. */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowResolve(true)}
|
||||
className="rounded-md border border-default px-4 py-2 text-sm"
|
||||
>
|
||||
Resolve
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowEscalate(true)}
|
||||
className="rounded-md border border-default px-4 py-2 text-sm"
|
||||
>
|
||||
Escalate
|
||||
</button>
|
||||
</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))
|
||||
}
|
||||
}}
|
||||
<WalkModals
|
||||
session={session}
|
||||
showResolve={showResolve}
|
||||
showEscalate={showEscalate}
|
||||
onCloseResolve={() => setShowResolve(false)}
|
||||
onCloseEscalate={() => setShowEscalate(false)}
|
||||
/>
|
||||
)}
|
||||
{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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user