diff --git a/frontend/src/components/l1/L1WalkTreeVariant.tsx b/frontend/src/components/l1/L1WalkTreeVariant.tsx
index da9a12cb..8b00d8e2 100644
--- a/frontend/src/components/l1/L1WalkTreeVariant.tsx
+++ b/frontend/src/components/l1/L1WalkTreeVariant.tsx
@@ -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}
+      {!isAiBuild && (
+        <div className="rounded-lg border border-default bg-card p-6">
+          <p className="text-sm text-muted-foreground">
+            Walking flow <span className="font-mono">{session.flow_id}</span>
           </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>
+          <p className="mt-2 text-heading">Synthetic step rendering (Phase 1 stub).</p>
+        </div>
+      )}
+
+      {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>
-          ) : (
-            <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>
+          {!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>
+            </>
           )}
-        </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>
 
-      {/* 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))
-            }
-          }}
-        />
-      )}
+      <WalkModals
+        session={session}
+        showResolve={showResolve}
+        showEscalate={showEscalate}
+        onCloseResolve={() => setShowResolve(false)}
+        onCloseEscalate={() => setShowEscalate(false)}
+      />
     </div>
   )
 }