Chaim
fb1f73fa25
Port the remaining read views from the vanilla UI to Next.js:
- /diagnostics — system health snapshot (DB connected, table counts,
active tasks, failed and stuck documents). Uses the existing
/api/system/diagnostics payload with a 10s refetchInterval so the
page self-updates while the user watches.
- /skills — Paperclip skill inventory with sync status (DB-only,
disk-only, synced, not-synced) as a card grid driven by
/api/admin/skills.
- /training — Dafna's style portrait as three tabs on one page:
* Report: corpus KPIs + CSS conic-gradient subject donut
(SubjectDonut ported from index.html renderHero) + horizontal
anatomy bars + top-12 signature phrases.
* Corpus: TanStack Table of style_corpus rows with an inline
delete mutation (useDeleteCorpusEntry invalidates both the
corpus list and the style report so KPIs update).
* Compare: two-decision selector backed by /api/training/compare,
side-by-side panels plus shared / only-A / only-B pattern
lists.
New API modules: lib/api/system.ts, lib/api/skills.ts,
lib/api/training.ts. All three use TanStack Query with staleTime
profiles tuned per endpoint (10s for diagnostics, 30s for skills,
60s for training reports).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { AppShell } from "@/components/app-shell";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { StyleReportPanel } from "@/components/training/style-report-panel";
|
||
import { CorpusPanel } from "@/components/training/corpus-panel";
|
||
import { ComparePanel } from "@/components/training/compare-panel";
|
||
|
||
export default function TrainingPage() {
|
||
return (
|
||
<AppShell>
|
||
<section className="space-y-6">
|
||
<header>
|
||
<nav className="text-[0.78rem] text-ink-muted mb-1">
|
||
<Link href="/" className="hover:text-gold-deep">בית</Link>
|
||
<span aria-hidden> · </span>
|
||
<span className="text-navy">אימון סגנון</span>
|
||
</nav>
|
||
<h1 className="text-navy mb-0">הפורטרט הסגנוני של דפנה</h1>
|
||
<p className="text-ink-muted text-sm mt-1 max-w-2xl">
|
||
לוח בקרה של קורפוס האימון — סטטיסטיקות, אנטומיית החלטה ממוצעת,
|
||
ביטויי חתימה, וכלי השוואה בין שתי החלטות.
|
||
</p>
|
||
</header>
|
||
|
||
<div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
|
||
|
||
<Card className="bg-surface border-rule shadow-sm">
|
||
<CardContent className="px-6 py-5">
|
||
<Tabs defaultValue="report" dir="rtl">
|
||
<TabsList className="bg-rule-soft/60">
|
||
<TabsTrigger value="report">פורטרט סגנון</TabsTrigger>
|
||
<TabsTrigger value="corpus">קורפוס</TabsTrigger>
|
||
<TabsTrigger value="compare">השוואה</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="report" className="mt-5">
|
||
<StyleReportPanel />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="corpus" className="mt-5">
|
||
<CorpusPanel />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="compare" className="mt-5">
|
||
<ComparePanel />
|
||
</TabsContent>
|
||
</Tabs>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
</AppShell>
|
||
);
|
||
}
|