feat(l1): dashboard intake dispatch on match_or_build outcome

handleStart dispatches on outcome: matched/build → walker; suggest → inline
'use this flow / build new' prompt; out_of_scope → escalate-to-engineering prompt
(via escalate-without-walk, since intake no longer yields adhoc directly). buildNew
re-runs intake with force_build. tsc -b + eslint clean.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/pages/l1/L1Dashboard.tsx

@@ -1,168 +1,169 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { PageMeta } from '@/components/common/PageMeta'
-import { useAuthStore } from '@/store/authStore'
 import { l1Api } from '@/api/l1'
 import { toast } from '@/lib/toast'
-import { EmptyStateCard } from '@/components/l1/EmptyStateCard'
+import { StartWalkPanel } from '@/components/l1/EmptyStateCard'
 import { ResumeInProgress } from '@/components/l1/ResumeInProgress'
-import type { QueueRow } from '@/types/l1'
+import { L1CoverageBanner } from '@/components/l1/L1CoverageBanner'
+import type { NearMiss } from '@/types/l1'
 
 export default function L1Dashboard() {
-  const user = useAuthStore((s) => s.user)
   const navigate = useNavigate()
   const [problem, setProblem] = useState('')
   const [customerName, setCustomerName] = useState('')
-  const [customerContact, setCustomerContact] = useState('')
   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([]))
-    // Phase 1: emptiness detection is just "is the queue empty AND no resumable sessions" —
-    // we conservatively show the empty-state card on accounts with literally no L1 activity yet.
-    // (A stricter KB-empty detection arrives in Phase 2 when the kb_documents table exists.)
-  }, [])
-
-  useEffect(() => {
-    // Show empty-state ONLY for first-run state — no queue items and no active sessions
-    if (queue.length === 0) {
-      l1Api
-        .listActiveSessions()
-        .then((active) => setIsEmpty(active.length === 0))
-        .catch(() => setIsEmpty(false))
-    } else {
-      setIsEmpty(false)
+  const reset = () => {
+    setSuggestion(null)
+    setOutOfScope(null)
   }
-  }, [queue])
 
   const handleStart = async () => {
     if (!problem.trim()) return
     setSubmitting(true)
+    reset()
     try {
-      const response = await l1Api.intake({
+      const res = await l1Api.intake({
         problem_statement: problem.trim(),
         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 (res.outcome === 'matched' || res.outcome === 'build') {
+        navigate(`/l1/walk/${res.session_id}`)
+      } else if (res.outcome === 'suggest') {
+        setSuggestion(res.near_miss ?? null)
+      } else if (res.outcome === 'out_of_scope') {
+        setOutOfScope(res.category ?? 'unknown')
+      }
+    } catch {
+      toast.error('Failed to start session. Please try again.')
     } finally {
       setSubmitting(false)
     }
   }
 
-  const now = new Date()
-  const greeting =
-    now.getHours() < 12 ? 'morning' : now.getHours() < 18 ? 'afternoon' : 'evening'
-  const firstName = user?.name?.split(' ')[0] || 'there'
+  // "Use this flow" — re-run intake with the same text; it matches again and
+  // returns a `matched` outcome with a started flow session (Phase 2A approach).
+  const useSuggestedFlow = async () => {
+    setSubmitting(true)
+    try {
+      const res = await l1Api.intake({ problem_statement: problem.trim() })
+      if (res.session_id) navigate(`/l1/walk/${res.session_id}`)
+      else reset()
+    } catch {
+      toast.error('Could not start the matched flow. Please try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  // "Build new" — skip the match pass; still gated by enabled categories.
+  const buildNew = async () => {
+    setSubmitting(true)
+    reset()
+    try {
+      const res = await l1Api.intake({
+        problem_statement: problem.trim(),
+        customer_name: customerName.trim() || undefined,
+        force_build: true,
+      })
+      if (res.outcome === 'build' && res.session_id) {
+        navigate(`/l1/walk/${res.session_id}`)
+      } else if (res.outcome === 'out_of_scope') {
+        setOutOfScope(res.category ?? 'unknown')
+      }
+    } catch {
+      toast.error('Failed to start session. Please 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,
+        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. Please try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
 
   return (
-    <div className="overflow-y-auto h-full">
-      <PageMeta title="L1 Workspace" />
-      <div className="max-w-4xl mx-auto px-6 pt-12 pb-12 space-y-8">
-        {/* Greeting */}
-        <div>
-          <p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
-            {now.toLocaleDateString('en-US', {
-              weekday: 'long',
-              month: 'long',
-              day: 'numeric',
-            })}
+    <div className="space-y-6">
+      <L1CoverageBanner />
+      <StartWalkPanel
+        problem={problem}
+        onProblemChange={setProblem}
+        customerName={customerName}
+        onCustomerNameChange={setCustomerName}
+        onStart={handleStart}
+        submitting={submitting}
+      />
+
+      {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>
-          <h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-heading leading-tight">
-            Good {greeting}, {firstName}.
-          </h1>
-        </div>
-
-        {/* Empty state (first-run) */}
-        {isEmpty && <EmptyStateCard />}
-
-        {/* Describe the problem */}
-        <section>
-          <div className="flex items-center gap-3 mb-3">
-            <span className="w-1 h-4 bg-accent rounded-sm" />
-            <span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
-              Describe the problem
-            </span>
-          </div>
-          <div className="rounded-lg border border-default bg-card p-4 space-y-3">
-            <textarea
-              value={problem}
-              onChange={(e) => setProblem(e.target.value)}
-              placeholder="What's the user calling about?"
-              autoFocus
-              rows={3}
-              className="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 className="grid grid-cols-2 gap-3">
-              <input
-                value={customerName}
-                onChange={(e) => setCustomerName(e.target.value)}
-                placeholder="Customer name (optional)"
-                className="bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
-              />
-              <input
-                value={customerContact}
-                onChange={(e) => setCustomerContact(e.target.value)}
-                placeholder="Email or phone (optional)"
-                className="bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
-              />
-            </div>
-            <div className="flex justify-end">
+          <div className="flex gap-2">
             <button
-                type="button"
-                onClick={handleStart}
-                disabled={!problem.trim() || submitting}
-                className="rounded-md bg-accent text-white px-5 py-2 text-sm font-medium hover:bg-accent/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={useSuggestedFlow}
+              disabled={submitting}
+              className="rounded-md bg-accent px-4 py-2 text-sm text-white disabled:opacity-50"
             >
-                {submitting ? 'Starting…' : 'Start walk →'}
+              Use this flow
+            </button>
+            <button
+              onClick={buildNew}
+              disabled={submitting}
+              className="rounded-md border border-default px-4 py-2 text-sm disabled:opacity-50"
+            >
+              Build new
             </button>
           </div>
         </div>
-        </section>
-
-        {/* Open tickets */}
-        {queue.length > 0 && (
-          <section>
-            <div className="flex items-center gap-3 mb-3">
-              <span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
-                Open tickets · {queue.length}
-              </span>
-              <div className="flex-1 h-px bg-border" />
-            </div>
-            <div className="rounded-lg border border-default bg-card overflow-hidden">
-              {queue.map((row) => (
-                /* Phase 1: display-only rows. Phase 2 makes them clickable to claim. */
-                <div
-                  key={row.ticket_id}
-                  className="px-4 py-3 border-b border-default last:border-b-0"
-                >
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <span className="font-mono text-xs text-muted-foreground mr-2">
-                        #{row.ticket_id.slice(0, 8)}
-                      </span>
-                      <span className="text-sm">{row.problem_statement}</span>
-                    </div>
-                    <span className="text-xs px-2 py-0.5 rounded bg-elevated text-muted-foreground">
-                      {row.ticket_kind === 'psa' ? 'PSA' : 'Internal'}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
       )}
 
-        {/* Resume in progress */}
-        <ResumeInProgress />
+      {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
+              onClick={escalateOutOfScope}
+              disabled={submitting}
+              className="rounded-md bg-accent px-4 py-2 text-sm text-white disabled:opacity-50"
+            >
+              Escalate to engineering
+            </button>
+            <button
+              onClick={reset}
+              disabled={submitting}
+              className="rounded-md border border-default px-4 py-2 text-sm disabled:opacity-50"
+            >
+              Cancel
+            </button>
           </div>
         </div>
+      )}
+
+      <ResumeInProgress />
+    </div>
   )
 }