1import { Link } from "react-router";2import type { Overview as O } from "../api";3import { useFetch, ago, fmtDate } from "../hooks";4import { Badge, Empty, ErrorBox, Loading, Td } from "../components/ui";5import { Breakdown, DailyBars } from "../components/charts";67const TILES: [string, string][] = [["apis", "APIs"], ["endpoints", "Endpoints"], ["packages", "Knowledge packages"], ["executions", "Executions"], ["executions_24h", "Executions (24 h)"], ["datasets", "Datasets"], ["verified_datasets", "Verified datasets"], ["open_debt", "Open debt"], ["critical_debt", "Critical debt"], ["credentials", "Credentials"], ["projects", "Projects"], ["agents", "Agents"]];8const SEV: Record<string, string> = { critical: "critical", high: "serious", medium: "warn", low: "" };910export default function Overview() {11 const { data, error, loading } = useFetch<O>("overview");12 if (loading) return <Loading what="Loading overview" />;13 if (error) return <ErrorBox error={error} />;14 if (!data) return null;15 const c = data.counts;16 return (17 <div>18 <div className="row between"><h1>Overview</h1><span className="hint">AKOS {data.version}</span></div>19 <div className="tiles" style={{ marginBottom: 14 }}>{TILES.map(([k, l]) => <div className="tile" key={k}><div className="k">{l}</div><div className="v">{(c[k] ?? 0).toLocaleString()}</div></div>)}</div>20 <div className="grid c2">21 <div className="card"><h3>Executions per day (14 d)</h3><DailyBars data={data.daily} /></div>22 <div className="card"><h3>Workers & queue</h3>23 {data.workers.length === 0 ? <div className="alert error">No live worker — jobs will not run. Check Operations.</div> : data.workers.map((w) => <div key={w.name} className="row between" style={{ fontSize: 13 }}><span><Badge v="online" /> {w.name} <span className="hint">v{w.version}</span></span><span className="hint">{w.current_job ? `job ${w.current_job.slice(0, 8)}` : "idle"} · seen {ago(w.last_seen)}</span></div>)}24 <div className="row" style={{ marginTop: 10 }}><span className="badge">queued {data.jobs.queued}</span><span className="badge warn">running {data.jobs.running}</span><span className={`badge ${data.jobs.dead ? "critical" : ""}`}>dead {data.jobs.dead}</span>{data.jobs.oldest_queued && <span className="hint">oldest queued {ago(data.jobs.oldest_queued)}</span>}</div>25 <h3>Executions by state (7 d)</h3><Breakdown items={data.execution_states_7d.map((s) => ({ label: s.state, n: s.n }))} />26 </div>27 <div className="card"><h3>API lifecycle</h3><Breakdown items={data.lifecycle.map((s) => ({ label: s.lifecycle, n: s.n }))} /><h3>Package knowledge state</h3><Breakdown items={data.knowledge_states.map((s) => ({ label: s.knowledge_state, n: s.n }))} color="var(--s3)" /></div>28 <div className="card"><h3>Open knowledge debt by severity</h3>{data.debt.length ? <Breakdown items={["critical", "high", "medium", "low"].filter((s) => data.debt.some((d) => d.severity === s)).map((s) => ({ label: s, n: data.debt.find((d) => d.severity === s)!.n, tone: SEV[s] || "s1" }))} /> : <Empty>No open debt.</Empty>}<p><Link to="/debt">Open Knowledge Debt →</Link></p></div>29 </div>30 <div className="card"><div className="row between"><h3>Recent executions</h3><Link to="/executions">all →</Link></div>31 {data.recent_executions.length === 0 ? <Empty>No executions yet. Use the MCP tool <code>execute_api</code> or the CLI.</Empty> : (32 <table className="tbl"><thead><tr><th>When</th><th>State</th><th>API</th><th>Request</th><th>Status</th><th>ms</th></tr></thead><tbody>33 {data.recent_executions.map((e) => <tr key={e.id}><Td l="when"><Link to={`/executions/${e.id}`}>{fmtDate(e.created_at)}</Link></Td><Td l="state"><Badge v={e.state} /></Td><Td l="api">{e.api_name ?? <span className="hint">unregistered</span>}</Td><Td l="request" wide><span className="truncate mono">{e.method} {e.url}</span></Td><Td l="status">{e.status_code ?? "—"}</Td><Td l="ms" className="num">{e.duration_ms ?? "—"}</Td></tr>)}34 </tbody></table>)}35 </div>36 </div>37 );38}39