fix(l1): actually wire Tasks 14-15 (prior commit ad9c4c8 was committed broken)

ad9c4c8 committed with TSC_EXIT=2 (I batched the commit with its own failing verification). Two regressions, now fixed and tsc -b + eslint verified (TSC=0, ESLINT=0): - L1WalkTreeVariant.tsx: the ai_build JSX branch referenced isAiBuild/node/ nodeLoading/nodeError/advanceNode/isTerminalNode that were never declared (the import + state Edits had silently failed). Add the import (useEffect/useCallback, TreeNode) and the state/effect/advanceNode/isTerminalNode block. - L1Dashboard.tsx: had reverted to the original (no dispatch). Re-add outcome dispatch as minimal edits on the real page (matched/build->walker; suggest-> use-flow/build-new; out_of_scope->escalate-without-walk). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-30 20:24:44 -04:00
parent c547d2f834
commit 076a9ec98d
2 changed files with 197 additions and 9 deletions
--- a/frontend/src/components/l1/L1WalkTreeVariant.tsx
+++ b/frontend/src/components/l1/L1WalkTreeVariant.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react'
+import { useState, useEffect, useCallback } 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 type { TreeNode, WalkSession } from '@/types/l1'
 import { EscalateModal, ResolveModal } from '@/components/l1/WalkModals'

 interface Props {
@@ -16,6 +16,59 @@ export function L1WalkTreeVariant({ session, onSessionUpdate, onDone }: Props) {
  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'; acknowledged?: boolean }) => {
+      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
--- a/frontend/src/pages/l1/L1Dashboard.tsx
+++ b/frontend/src/pages/l1/L1Dashboard.tsx
@@ -6,7 +6,7 @@ import { l1Api } from '@/api/l1'
 import { toast } from '@/lib/toast'
 import { EmptyStateCard } from '@/components/l1/EmptyStateCard'
 import { ResumeInProgress } from '@/components/l1/ResumeInProgress'
-import type { QueueRow } from '@/types/l1'
+import type { NearMiss, QueueRow } from '@/types/l1'

 export default function L1Dashboard() {
  const user = useAuthStore((s) => s.user)
@@ -17,6 +17,8 @@ export default function L1Dashboard() {
  const [submitting, setSubmitting] = useState(false)
  const [queue, setQueue] = useState<QueueRow[]>([])
  const [isEmpty, setIsEmpty] = useState(false)
+  const [suggestion, setSuggestion] = useState<NearMiss | null>(null)
+  const [outOfScope, setOutOfScope] = useState<string | null>(null)

  useEffect(() => {
    l1Api.queue('open').then(setQueue).catch(() => setQueue([]))
@@ -37,8 +39,42 @@ export default function L1Dashboard() {
    }
  }, [queue])

+  const resetPrompts = () => {
+    setSuggestion(null)
+    setOutOfScope(null)
+  }
+
  const handleStart = async () => {
    if (!problem.trim()) return
+    setSubmitting(true)
+    resetPrompts()
+    try {
+      // Phase 2A: intake dispatches via match_or_build and returns an `outcome`.
+      const response = await l1Api.intake({
+        problem_statement: problem.trim(),
+        customer_name: customerName.trim() || undefined,
+        customer_contact: customerContact.trim() || undefined,
+      })
+      if (response.outcome === 'matched' || response.outcome === 'build') {
+        navigate(`/l1/walk/${response.session_id}`)
+      } else if (response.outcome === 'suggest') {
+        setSuggestion(response.near_miss ?? null)
+      } else if (response.outcome === 'out_of_scope') {
+        setOutOfScope(response.category ?? 'unknown')
+      }
+    } catch (err) {
+      const detail = (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
+      const msg =
+        typeof detail === 'string' ? detail : 'Failed to start walk. Try again.'
+      toast.error(msg)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  // "Use this flow" — re-run intake with the same text; it matches again and
+  // returns a `matched` outcome with a started flow session (acceptable Phase 2A).
+  const useSuggestedFlow = async () => {
    setSubmitting(true)
    try {
      const response = await l1Api.intake({
@@ -46,12 +82,54 @@ export default function L1Dashboard() {
        customer_name: customerName.trim() || undefined,
        customer_contact: customerContact.trim() || undefined,
      })
-      navigate(`/l1/walk/${response.session_id}`)
-    } catch (err) {
-      const detail = (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
-      const msg =
-        typeof detail === 'string' ? detail : 'Failed to start walk. Try again.'
-      toast.error(msg)
+      if (response.session_id) navigate(`/l1/walk/${response.session_id}`)
+      else resetPrompts()
+    } catch {
+      toast.error('Could not start the matched flow. Try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  // "Build new" — skip the match pass (force_build); still gated by enabled categories.
+  const buildNew = async () => {
+    setSubmitting(true)
+    resetPrompts()
+    try {
+      const response = await l1Api.intake({
+        problem_statement: problem.trim(),
+        customer_name: customerName.trim() || undefined,
+        customer_contact: customerContact.trim() || undefined,
+        force_build: true,
+      })
+      if (response.outcome === 'build' && response.session_id) {
+        navigate(`/l1/walk/${response.session_id}`)
+      } else if (response.outcome === 'out_of_scope') {
+        setOutOfScope(response.category ?? 'unknown')
+      }
+    } catch {
+      toast.error('Failed to start walk. Try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  // out-of-scope fallback: escalate straight to engineering (no walk).
+  const escalateOutOfScope = async () => {
+    if (!problem.trim()) return
+    setSubmitting(true)
+    try {
+      const session = await l1Api.escalateWithoutWalk({
+        problem_statement: problem.trim(),
+        customer_name: customerName.trim() || undefined,
+        customer_contact: customerContact.trim() || undefined,
+        reason_category: 'out_of_scope',
+        reason: 'Problem is outside the enabled L1 AI-build categories.',
+      })
+      toast.success('Escalated to engineering.')
+      navigate(`/l1/walk/${session.id}`)
+    } catch {
+      toast.error('Could not escalate. Try again.')
    } finally {
      setSubmitting(false)
    }
@@ -160,6 +238,63 @@ export default function L1Dashboard() {
          </section>
        )}

+        {/* Suggest: near-miss flow found */}
+        {suggestion && (
+          <div className="space-y-3 rounded-lg border border-default bg-card p-4">
+            <p className="text-sm text-primary">
+              Found a similar flow: <strong>{suggestion.flow_name}</strong>. Use it, or
+              build a new troubleshooting tree for this problem?
+            </p>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={useSuggestedFlow}
+                disabled={submitting}
+                className="rounded-md bg-accent text-white px-4 py-2 text-sm font-medium hover:bg-accent/90 transition-colors disabled:opacity-50"
+              >
+                Use this flow
+              </button>
+              <button
+                type="button"
+                onClick={buildNew}
+                disabled={submitting}
+                className="rounded-md border border-default px-4 py-2 text-sm hover:bg-elevated transition-colors disabled:opacity-50"
+              >
+                Build new
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Out of scope: category disabled/unknown */}
+        {outOfScope && (
+          <div className="space-y-3 rounded-lg border border-default bg-card p-4">
+            <p className="text-sm text-primary">
+              This problem isn’t in your account’s enabled L1 categories
+              {outOfScope !== 'unknown' ? ` (${outOfScope.replace(/_/g, ' ')})` : ''}, so
+              there’s no AI-built walk for it. You can escalate it to engineering.
+            </p>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={escalateOutOfScope}
+                disabled={submitting}
+                className="rounded-md bg-accent text-white px-4 py-2 text-sm font-medium hover:bg-accent/90 transition-colors disabled:opacity-50"
+              >
+                Escalate to engineering
+              </button>
+              <button
+                type="button"
+                onClick={resetPrompts}
+                disabled={submitting}
+                className="rounded-md border border-default px-4 py-2 text-sm hover:bg-elevated transition-colors disabled:opacity-50"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
        {/* Resume in progress */}
        <ResumeInProgress />
      </div>