spb/note-spboucher-ai

1"use client";2import { useQuery } from "@tanstack/react-query";3import { api } from "@/lib/client/api";4import { Badge } from "@/components/ui/primitives";5const DOCS = [["docs/architecture.md", "Architecture overview"], ["docs/dev-conventions.md", "Developer conventions"], ["docs/ai-routing-strategy.md", "AI routing strategy (measured)"], ["docs/ai-provider-discovery.md", "Provider discovery"], ["docs/ai-model-comparison.md", "Model comparison"], ["docs/openai-model-benchmarks.md", "OpenAI benchmarks"], ["docs/anthropic-model-benchmarks.md", "Anthropic benchmarks"]];6export function AboutSection({ version }: { version: string }) {7  const { data: health } = useQuery({ queryKey: ["health"], queryFn: () => api("/api/health"), retry: 0, staleTime: 30_000 });8  return (9    <div className="max-w-2xl space-y-6">10      <section className="rounded-xl border border-line bg-bg-elev p-4">11        <div className="flex items-center gap-3"><span className="grid size-10 place-items-center rounded-lg bg-fg text-base font-semibold text-bg">N</span><div><div className="text-[15px] font-semibold">Note SPBoucher AI</div><div className="text-[12px] text-fg-muted">Private AI-native knowledge operating system · v{version}</div></div><Badge tone={health ? "success" : "neutral"} className="ml-auto">{health ? "healthy" : "…"}</Badge></div>12        <dl className="mt-4 grid grid-cols-[120px_1fr] gap-y-1 text-[13px]"><dt className="text-fg-muted">Stack</dt><dd>Next.js 16 · React 19 · PostgreSQL 17 + pgvector · pg-boss</dd><dt className="text-fg-muted">AI</dt><dd>OpenAI + Anthropic, measured routing per task class</dd><dt className="text-fg-muted">Auth</dt><dd>Argon2id passwords, TOTP, passkeys (WebAuthn)</dd><dt className="text-fg-muted">Shortcuts</dt><dd>⌘K search · ⌘/ AI · ⌘⇧N new page · ⌘\ sidebar · ⌘. focus</dd></dl>13      </section>14      <section><h2 className="mb-2 text-[15px] font-semibold">Documentation</h2><ul className="divide-y divide-line rounded-xl border border-line bg-bg-elev">{DOCS.map(([path, label]) => <li key={path} className="flex items-center gap-3 px-3 py-2 text-[13px]"><span className="flex-1">{label}</span><code className="font-mono text-[11px] text-fg-faint">{path}</code></li>)}</ul><p className="mt-2 text-[12px] text-fg-faint">Docs live in the repository next to the code.</p></section>15    </div>16  );17}18