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 { useCallback, useEffect, useState } from 'react'
|
||||||
import { ChevronLeft } from 'lucide-react'
|
import type { TreeNode, WalkSession } from '@/types/l1'
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
import { l1Api } from '@/api/l1'
|
import { l1Api } from '@/api/l1'
|
||||||
import type { WalkSession } from '@/types/l1'
|
import { WalkModals } from './WalkModals'
|
||||||
import { EscalateModal, ResolveModal } from '@/components/l1/WalkModals'
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
session: WalkSession
|
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 [showResolve, setShowResolve] = useState(false)
|
||||||
const [showEscalate, setShowEscalate] = 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
|
// Fetch the first node on mount (ai_build only).
|
||||||
// (the tree-navigation pages have their own loader). The walker shows the
|
useEffect(() => {
|
||||||
// walked-path side panel, advance buttons stubbed for now — Phase 2 wires
|
if (!isAiBuild) return
|
||||||
// the actual flow tree fetching + node advancement against tree data.
|
let cancelled = false
|
||||||
// The "Yes/No" buttons record a synthetic step so the walked_path JSONB
|
setLoading(true)
|
||||||
// grows; this gives us a functional roundtrip until Phase 2 wires the tree.
|
l1Api
|
||||||
|
.nextNode(session.id, {})
|
||||||
const handleAnswer = async (answer: 'yes' | 'no') => {
|
.then((r) => {
|
||||||
const nodeId = session.current_node_id || `step-${session.walked_path.length + 1}`
|
if (!cancelled) setNode(r.node)
|
||||||
try {
|
|
||||||
const updated = await l1Api.step(session.id, {
|
|
||||||
node_id: nodeId,
|
|
||||||
question: `Step ${session.walked_path.length + 1}`,
|
|
||||||
answer,
|
|
||||||
note: note || null,
|
|
||||||
})
|
})
|
||||||
onSessionUpdate(updated)
|
.catch(() => {
|
||||||
setNote('')
|
if (!cancelled) setError('Could not generate the next step.')
|
||||||
} catch (err) {
|
})
|
||||||
// Keep silent for v1 — Phase 2 wires real error UI
|
.finally(() => {
|
||||||
console.error('step failed', err)
|
if (!cancelled) setLoading(false)
|
||||||
|
})
|
||||||
|
return () => {
|
||||||
|
cancelled = true
|
||||||
}
|
}
|
||||||
}
|
}, [isAiBuild, session.id])
|
||||||
|
|
||||||
const lastError = (err: unknown): string => {
|
const advance = useCallback(
|
||||||
if (typeof err === 'object' && err && 'response' in err) {
|
async (body: { answer?: 'yes' | 'no'; acknowledged?: boolean }) => {
|
||||||
const detail = (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
|
if (!node) return
|
||||||
if (typeof detail === 'string') return detail
|
setLoading(true)
|
||||||
}
|
setError(null)
|
||||||
return 'Unexpected error'
|
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 (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="space-y-4">
|
||||||
{/* Header */}
|
{isAiBuild && (
|
||||||
<header className="border-b border-default px-6 py-4 flex items-center justify-between bg-sidebar">
|
<div className="rounded-md border border-warning/30 bg-warning/10 px-4 py-2 text-xs text-warning">
|
||||||
<Link to="/l1" className="flex items-center gap-2 text-muted-foreground hover:text-heading transition-colors">
|
These are high-confidence troubleshooting steps, but they come from outside
|
||||||
<ChevronLeft className="w-4 h-4" />
|
your organization’s knowledge base — review them before acting. When in
|
||||||
<span className="font-mono text-xs">#{session.id.slice(0, 8)}</span>
|
doubt, escalate early.
|
||||||
{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>
|
</div>
|
||||||
</header>
|
)}
|
||||||
|
|
||||||
{/* Two-pane body */}
|
{!isAiBuild && (
|
||||||
<div className="flex-1 flex min-h-0">
|
<div className="rounded-lg border border-default bg-card p-6">
|
||||||
<main className="flex-1 p-6 overflow-y-auto min-h-0">
|
<p className="text-sm text-muted-foreground">
|
||||||
<p className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground mb-2">
|
Walking flow <span className="font-mono">{session.flow_id}</span>
|
||||||
Step {session.walked_path.length + 1}
|
|
||||||
</p>
|
</p>
|
||||||
{session.status !== 'active' ? (
|
<p className="mt-2 text-heading">Synthetic step rendering (Phase 1 stub).</p>
|
||||||
<div className="rounded-lg border border-default bg-card p-6">
|
</div>
|
||||||
<p className="text-sm text-muted-foreground">
|
)}
|
||||||
This session is <span className="font-semibold">{session.status}</span>.
|
|
||||||
</p>
|
{isAiBuild && (
|
||||||
<button onClick={onDone} className="mt-3 rounded-md bg-accent text-white px-3 py-1.5 text-sm">
|
<div className="rounded-lg border border-default bg-card p-6 space-y-4">
|
||||||
Back to workspace
|
{loading && (
|
||||||
</button>
|
<p className="text-sm text-muted-foreground">Thinking through the next step…</p>
|
||||||
</div>
|
)}
|
||||||
) : (
|
{error && <p className="text-sm text-danger">{error}</p>}
|
||||||
<div className="rounded-lg border border-default bg-card p-6 max-w-2xl">
|
|
||||||
<p className="text-lg mb-6">Continue the walk:</p>
|
{!loading && node?.node_type === 'question' && (
|
||||||
|
<>
|
||||||
|
<p className="text-lg text-heading">{node.text}</p>
|
||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => handleAnswer('yes')}
|
onClick={() => advance({ 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"
|
className="rounded-md bg-accent px-5 py-2 text-sm text-white"
|
||||||
>
|
>
|
||||||
Yes
|
Yes
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleAnswer('no')}
|
onClick={() => advance({ answer: 'no' })}
|
||||||
className="flex-1 rounded-md border border-default py-3 text-base font-medium hover:bg-elevated min-h-[44px] transition-colors"
|
className="rounded-md border border-default px-5 py-2 text-sm"
|
||||||
>
|
>
|
||||||
No
|
No
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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 */}
|
{!loading && node?.node_type === 'instruction' && (
|
||||||
<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">
|
<p className="text-lg text-heading">{node.text}</p>
|
||||||
Walked so far
|
<button
|
||||||
</p>
|
onClick={() => advance({ acknowledged: true })}
|
||||||
{session.walked_path.length === 0 ? (
|
className="rounded-md bg-accent px-5 py-2 text-sm text-white"
|
||||||
<p className="text-xs text-muted-foreground">No steps yet.</p>
|
>
|
||||||
) : (
|
Done — next step
|
||||||
<ol className="space-y-3 text-sm">
|
</button>
|
||||||
{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>
|
|
||||||
|
{!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>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowEscalate(true)}
|
||||||
|
className="rounded-md bg-accent px-5 py-2 text-sm text-white"
|
||||||
|
>
|
||||||
|
Escalate to engineering
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Modals */}
|
<WalkModals
|
||||||
{showResolve && (
|
session={session}
|
||||||
<ResolveModal
|
showResolve={showResolve}
|
||||||
onClose={() => setShowResolve(false)}
|
showEscalate={showEscalate}
|
||||||
onConfirm={async (helpful, resolutionNotes) => {
|
onCloseResolve={() => setShowResolve(false)}
|
||||||
try {
|
onCloseEscalate={() => setShowEscalate(false)}
|
||||||
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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user