Praxis CI
d39bd1423a
TASK-09-01: client/package.json — add react-router-dom@^7 (no chart lib). TASK-09-02: client/src/main.tsx (BrowserRouter wrapper) + App.tsx (Routes switch: / → VoiceSession, /operator/login → Login, /operator/dashboard → Dashboard, * → VoiceSession fallback). R-DASH-05: voice UI at / unchanged. Extracted VoiceSession.tsx from App.tsx to preserve the existing UI. TASK-09-03: client/src/operator/Login.tsx — login form (POST /api/operator/login, navigate to dashboard, 401/429/503 error states, keyboard-accessible). TASK-09-04: client/src/operator/Dashboard.tsx — auth gate (GET /me on mount, redirect to /operator/login on 401), operator name, 3 view tabs, freshness indicator, logout button. TASK-09-05: client/src/operator/Sparkline.tsx — inline SVG sparkline (~50 LOC, zero deps, handles empty/single/all-same, stroke=currentColor). TASK-09-06: 3 view components (PracticeVolume, MasteryProgression, FailurePatterns) — fetch /api/operator/<view>, read-only tables + sparklines, suppressed cells → '— (<10 learners)', loading/error/no-data states. TASK-09-07: client/src/operator/__tests__/Dashboard.test.tsx (17 tests via vitest + @testing-library/react) — auth gate, login, suppressedLabel, sparkline, formatFreshness, no PII in DOM. vitest.config.ts + test-setup.ts + devDeps (vitest, testing-library, jsdom). npm run build + typecheck + test all pass. ---ci--- project: praxis phase: 2 milestone: v0.4 status: execute persona: frontend-engineer task: 09-01..09-07 requirements: covered: [REQ-DASH-01, REQ-NFR-DASH-01] ---/ci---
94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
/**
|
|
* Failure Patterns view (SLICE-09 TASK-09-06, D-053, REQ-NFR-DASH-01).
|
|
*
|
|
* Top failure_modes by frequency (sorted table), rubric criteria with
|
|
* mean < 3.0 (highlighted weak-spots), branch outcome distribution.
|
|
* Suppressed cells → "— (<10 learners)".
|
|
*/
|
|
import { useEffect, useState } from 'react'
|
|
import { fetchView, formatFreshness, suppressedLabel } from './_viewCommon'
|
|
import type { ViewResponse } from './_viewCommon'
|
|
|
|
export default function FailurePatterns() {
|
|
const [data, setData] = useState<ViewResponse | null>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
;(async () => {
|
|
try {
|
|
const r = await fetchView('/api/operator/failure-patterns')
|
|
if (!cancelled) setData(r)
|
|
} catch (e) {
|
|
if (!cancelled) setError(String(e))
|
|
} finally {
|
|
if (!cancelled) setLoading(false)
|
|
}
|
|
})()
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [])
|
|
|
|
if (loading) return <p className="muted">Loading failure patterns…</p>
|
|
if (error) return <div className="error">Failed to load: {error}</div>
|
|
if (!data || data.views.length === 0) {
|
|
return (
|
|
<div className="view view--failure">
|
|
<p className="muted">No failure-pattern data available yet.</p>
|
|
<p className="muted">Last updated: {formatFreshness(data?.last_updated ?? null)}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="view view--failure">
|
|
<p className="muted">Last updated: {formatFreshness(data.last_updated)}</p>
|
|
{data.views.map((v) => {
|
|
const modes = v.metrics
|
|
.filter((c) => c.metric.startsWith('failure_mode:'))
|
|
.sort((a, b) => (b.value ?? 0) - (a.value ?? 0))
|
|
const branches = v.metrics.filter((c) => c.metric.startsWith('branch:'))
|
|
return (
|
|
<div key={v.path} className="cohort-section">
|
|
<h3>{v.path}</h3>
|
|
<h4>Failure modes by frequency</h4>
|
|
<table className="cohort-table">
|
|
<thead><tr><th>Mode</th><th>Frequency</th></tr></thead>
|
|
<tbody>
|
|
{modes.length === 0 ? (
|
|
<tr><td colSpan={2} className="muted">No failure modes recorded.</td></tr>
|
|
) : (
|
|
modes.map((c) => (
|
|
<tr key={c.metric}>
|
|
<td>{c.metric.replace('failure_mode:', '')}</td>
|
|
<td>{suppressedLabel(c)}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
|
|
<h4>Branch outcome distribution</h4>
|
|
<table className="cohort-table">
|
|
<thead><tr><th>Branch</th><th>Count</th></tr></thead>
|
|
<tbody>
|
|
{branches.length === 0 ? (
|
|
<tr><td colSpan={2} className="muted">No branch data recorded.</td></tr>
|
|
) : (
|
|
branches.map((c) => (
|
|
<tr key={c.metric}>
|
|
<td>{c.metric.replace('branch:', '')}</td>
|
|
<td>{suppressedLabel(c)}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
} |