feat(l1): real L1 dashboard with empty-state + resume widget
Replaces the T20 stub. L1 dashboard renders greeting, "Describe the problem" intake card (autofocus textarea, optional customer fields, primary "Start walk" CTA), open-tickets queue (Phase 1: display-only), and a "Resume in progress" widget listing the L1's active sessions ordered by last_step_at DESC. Empty-state card shows on accounts with no queue + no active sessions (first-run nudge to upload KB or auth flows). Adds /api/l1.ts (full L1 API client surface) and /types/l1.ts. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
64
frontend/src/api/l1.ts
Normal file
64
frontend/src/api/l1.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { apiClient } from './client'
|
||||
import type {
|
||||
IntakeRequest,
|
||||
IntakeResponse,
|
||||
QueueRow,
|
||||
WalkSession,
|
||||
AdhocNote,
|
||||
} from '@/types/l1'
|
||||
|
||||
export const l1Api = {
|
||||
intake: (body: IntakeRequest) =>
|
||||
apiClient.post<IntakeResponse>('/l1/intake', body).then(r => r.data),
|
||||
|
||||
queue: (statusFilter?: string) =>
|
||||
apiClient.get<QueueRow[]>('/l1/queue', {
|
||||
params: statusFilter ? { status_filter: statusFilter } : {},
|
||||
}).then(r => r.data),
|
||||
|
||||
listActiveSessions: () =>
|
||||
apiClient.get<WalkSession[]>('/l1/sessions/active').then(r => r.data),
|
||||
|
||||
getSession: (sessionId: string) =>
|
||||
apiClient.get<WalkSession>(`/l1/sessions/${sessionId}`).then(r => r.data),
|
||||
|
||||
step: (
|
||||
sessionId: string,
|
||||
step: { node_id: string; question: string; answer: string; note?: string | null },
|
||||
) =>
|
||||
apiClient
|
||||
.post<WalkSession>(`/l1/sessions/${sessionId}/step`, step)
|
||||
.then(r => r.data),
|
||||
|
||||
notes: (sessionId: string, notes: AdhocNote[]) =>
|
||||
apiClient
|
||||
.post<WalkSession>(`/l1/sessions/${sessionId}/notes`, { notes })
|
||||
.then(r => r.data),
|
||||
|
||||
resolve: (
|
||||
sessionId: string,
|
||||
body: { helpful: boolean; resolution_notes: string },
|
||||
) =>
|
||||
apiClient
|
||||
.post<WalkSession>(`/l1/sessions/${sessionId}/resolve`, body)
|
||||
.then(r => r.data),
|
||||
|
||||
escalate: (
|
||||
sessionId: string,
|
||||
body: { reason: string; reason_category: string },
|
||||
) =>
|
||||
apiClient
|
||||
.post<WalkSession>(`/l1/sessions/${sessionId}/escalate`, body)
|
||||
.then(r => r.data),
|
||||
|
||||
escalateWithoutWalk: (body: {
|
||||
problem_statement: string
|
||||
customer_name?: string
|
||||
customer_contact?: string
|
||||
reason_category: string
|
||||
reason?: string
|
||||
}) =>
|
||||
apiClient
|
||||
.post<WalkSession>('/l1/escalate-without-walk', body)
|
||||
.then(r => r.data),
|
||||
}
|
||||
35
frontend/src/components/l1/EmptyStateCard.tsx
Normal file
35
frontend/src/components/l1/EmptyStateCard.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
|
||||
interface Props {
|
||||
onUploadClick?: () => void
|
||||
}
|
||||
|
||||
export function EmptyStateCard({ onUploadClick }: Props) {
|
||||
const { canCoverL1 } = usePermissions()
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-default bg-card p-6">
|
||||
<h2 className="font-heading text-xl font-bold text-heading mb-2">
|
||||
Your knowledge base is empty
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
L1 Workspace works best when your account has KB content or authored flows.
|
||||
Right now there's nothing to match against — calls will start as ad-hoc walks.
|
||||
</p>
|
||||
{canCoverL1 && onUploadClick ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onUploadClick}
|
||||
className="rounded-md bg-accent text-white px-4 py-2 text-sm font-medium hover:bg-accent/90 transition-colors"
|
||||
>
|
||||
Upload KB content
|
||||
</button>
|
||||
) : (
|
||||
<ul className="text-sm text-muted-foreground space-y-1 ml-4 list-disc">
|
||||
<li>Ask your admin to upload KB documents</li>
|
||||
<li>Or ask them to author a flow in the Flows library</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
49
frontend/src/components/l1/ResumeInProgress.tsx
Normal file
49
frontend/src/components/l1/ResumeInProgress.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { l1Api } from '@/api/l1'
|
||||
import type { WalkSession } from '@/types/l1'
|
||||
|
||||
export function ResumeInProgress() {
|
||||
const [sessions, setSessions] = useState<WalkSession[] | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
l1Api
|
||||
.listActiveSessions()
|
||||
.then(setSessions)
|
||||
.catch(() => setSessions([]))
|
||||
}, [])
|
||||
|
||||
if (!sessions || sessions.length === 0) return null
|
||||
|
||||
return (
|
||||
<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">
|
||||
Resume in progress · {sessions.length}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
<div className="rounded-lg border border-default bg-card overflow-hidden">
|
||||
{sessions.map((s) => (
|
||||
<Link
|
||||
key={s.id}
|
||||
to={`/l1/walk/${s.id}`}
|
||||
className="flex items-center justify-between px-4 py-3 hover:bg-elevated transition-colors border-b border-default last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-mono text-xs text-muted-foreground">#{s.id.slice(0, 8)}</span>
|
||||
<span className="text-sm">
|
||||
{s.session_kind === 'adhoc'
|
||||
? `Ad-hoc · ${s.walk_notes.length} notes`
|
||||
: `Step ${s.walked_path.length}`}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(s.last_step_at).toLocaleTimeString()}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,12 +1,161 @@
|
||||
import { useEffect, 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 { EmptyStateCard } from '@/components/l1/EmptyStateCard'
|
||||
import { ResumeInProgress } from '@/components/l1/ResumeInProgress'
|
||||
import type { QueueRow } 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)
|
||||
|
||||
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)
|
||||
}
|
||||
}, [queue])
|
||||
|
||||
const handleStart = async () => {
|
||||
if (!problem.trim()) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const response = await l1Api.intake({
|
||||
problem_statement: problem.trim(),
|
||||
customer_name: customerName.trim() || undefined,
|
||||
customer_contact: customerContact.trim() || undefined,
|
||||
})
|
||||
navigate(`/l1/walk/${response.session_id}`)
|
||||
} 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'
|
||||
|
||||
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">
|
||||
<h1 className="font-heading text-2xl font-bold">L1 Workspace</h1>
|
||||
<p className="text-muted-foreground mt-2">Loading…</p>
|
||||
<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',
|
||||
})}
|
||||
</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">
|
||||
<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"
|
||||
>
|
||||
{submitting ? 'Starting…' : 'Start walk →'}
|
||||
</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 />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
52
frontend/src/types/l1.ts
Normal file
52
frontend/src/types/l1.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
export type SessionKind = 'flow' | 'proposal' | 'adhoc'
|
||||
export type SessionStatus = 'active' | 'resolved' | 'escalated' | 'abandoned'
|
||||
export type TicketKind = 'psa' | 'internal'
|
||||
|
||||
export interface WalkStep {
|
||||
node_id: string
|
||||
question: string
|
||||
answer: string
|
||||
l1_note: string | null
|
||||
}
|
||||
|
||||
export interface AdhocNote {
|
||||
timestamp: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export interface WalkSession {
|
||||
id: string
|
||||
session_kind: SessionKind
|
||||
flow_id: string | null
|
||||
flow_proposal_id: string | null
|
||||
current_node_id: string | null
|
||||
walked_path: WalkStep[]
|
||||
walk_notes: AdhocNote[]
|
||||
status: SessionStatus
|
||||
started_at: string
|
||||
last_step_at: string
|
||||
resolved_at: string | null
|
||||
}
|
||||
|
||||
export interface QueueRow {
|
||||
ticket_id: string
|
||||
ticket_kind: TicketKind
|
||||
problem_statement: string | null
|
||||
customer_name: string | null
|
||||
status: string
|
||||
created_at: string | null
|
||||
}
|
||||
|
||||
export interface IntakeRequest {
|
||||
problem_statement: string
|
||||
customer_name?: string
|
||||
customer_contact?: string
|
||||
flow_id?: string
|
||||
}
|
||||
|
||||
export interface IntakeResponse {
|
||||
session_id: string
|
||||
session_kind: SessionKind
|
||||
ticket_id: string
|
||||
ticket_kind: TicketKind
|
||||
}
|
||||
Reference in New Issue
Block a user