feat: MCP server, API keys, OAuth, and KPI dashboard (#72)

* fix: prevent Chrome auto-translate from crashing React during onboarding

Chrome auto-translate modifies DOM text nodes when it detects a Swedish
page (lang="sv") in a browser set to English. React does not expect
external DOM mutations and throws, crashing the entire component tree
into global-error.tsx on every step transition.

Add translate="no" and <meta name="google" content="notranslate"> to
suppress browser translation. Also fix timezone-unsafe date parsing in
fiscal period validation (new Date("YYYY-MM-DD") + getDate() returns
local-timezone values, shifting dates by -1 day in Western timezones).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: add notranslate meta tag to global-error.tsx for consistency

Per review feedback — global-error.tsx renders its own <html> document,
so it needs the same <meta name="google" content="notranslate"> tag as
layout.tsx to fully suppress Chrome translation on error pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: add MCP server extension with OAuth, API keys, and KPI dashboard

Let users do bookkeeping through Claude Desktop, Claude Code, or any
MCP-compatible client. "Show my uncategorized transactions." "Book that
as office supplies." "Invoice Acme for 15,000 kr."

MCP server (extension):
- 10 tools: transactions, categorization, customers, invoices,
  trial balance, VAT report, KPI report, income statement
- JSON-RPC 2.0 protocol (no SDK dependency, works in serverless)
- Tool annotations, pagination, input validation per MCP best practices
- Same engine as web UI (VAT rules, exchange rates, event emission)

API key infrastructure (core):
- api_keys table with RLS, rate limiting (100 RPM), scopes column
- Atomic rate limit via DB RPC (validate_and_increment_api_key)
- Key management API routes + settings UI panel

OAuth 2.1 for Claude Desktop connectors:
- .well-known/oauth-protected-resource + oauth-authorization-server
- Authorization endpoint with consent page
- Token endpoint with PKCE verification
- Stateless encrypted auth codes (AES-256-GCM, no DB storage)
- Dynamic client registration

KPI dashboard:
- /nyckeltal page with hero cards, operational grid, trend chart
- GET /api/reports/kpi endpoint
- Gross margin, cash position, expense ratio, avg payment days,
  VAT liability, revenue/expense trend

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address OAuth security vulnerabilities from code review

Critical fixes:
- Auth code replay: Track used codes in oauth_used_codes table with
  unique constraint. Codes are single-use per OAuth 2.1 §4.1.2.
- Open redirect: Validate redirect_uri against hardcoded allowlist
  of known Claude callback URLs + localhost for dev.

P1 fixes:
- Move API key creation from /authorize to /token endpoint. Keys are
  only created after PKCE verification, preventing orphaned keys on
  abandoned OAuth flows.
- Add ensureInitialized() to MCP server so event handlers load and
  transaction.categorized events reach extensions.

P2 fixes:
- Remove 'plain' from PKCE methods — only S256 is advertised and
  accepted.
- Fix extension count in sectors test (10 → 11 for mcp-server).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: remove duplicate ensureInitialized() that caused circular import

The extension router (ext/[...path]/route.ts) already calls
ensureInitialized() before dispatching to handlers. The duplicate
call in server.ts created a circular import that Turbopack couldn't
resolve, breaking the Vercel build.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

components/kpi/KPIHeroCards.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/card'
+import { formatCurrency } from '@/lib/utils'
+import type { KPIReport } from '@/types'
+
+interface KPIHeroCardsProps {
+  report: KPIReport
+}
+
+export function KPIHeroCards({ report }: KPIHeroCardsProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {/* Gross margin */}
+      <Card>
+        <CardContent className="p-5">
+          <p className="text-xs text-muted-foreground mb-1">Bruttomarginal</p>
+          <p className="font-display text-xl tabular-nums tracking-tight">
+            {report.grossMargin !== null ? `${report.grossMargin}%` : '—'}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">av intäkter</p>
+        </CardContent>
+      </Card>
+
+      {/* Net result */}
+      <Card>
+        <CardContent className="p-5">
+          <p className="text-xs text-muted-foreground mb-1">Resultat</p>
+          <p className={`font-display text-xl tabular-nums tracking-tight ${
+            report.netResult >= 0 ? 'text-[hsl(var(--chart-1))]' : 'text-[hsl(var(--chart-2))]'
+          }`}>
+            {formatCurrency(report.netResult)}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">netto</p>
+        </CardContent>
+      </Card>
+
+      {/* Cash position */}
+      <Card>
+        <CardContent className="p-5">
+          <p className="text-xs text-muted-foreground mb-1">Kassa</p>
+          <p className={`font-display text-xl tabular-nums tracking-tight ${
+            report.cashPosition > 0 ? 'text-[hsl(var(--chart-1))]' : 'text-[hsl(var(--chart-2))]'
+          }`}>
+            {formatCurrency(report.cashPosition)}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">likvida medel</p>
+        </CardContent>
+      </Card>
+
+      {/* Outstanding receivables */}
+      <Card>
+        <CardContent className="p-5">
+          <p className="text-xs text-muted-foreground mb-1">Kundfordringar</p>
+          <p className="font-display text-xl tabular-nums tracking-tight">
+            {formatCurrency(report.outstandingReceivables)}
+          </p>
+          {report.overdueReceivables > 0 ? (
+            <p className="text-xs text-[hsl(var(--chart-2))] mt-1">
+              varav förfallet: {formatCurrency(report.overdueReceivables)}
+            </p>
+          ) : (
+            <p className="text-xs text-muted-foreground mt-1">utestående</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

components/kpi/KPIOperationalGrid.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/card'
+import { TrendingUp, TrendingDown, Info } from 'lucide-react'
+import { formatCurrency } from '@/lib/utils'
+import type { KPIReport } from '@/types'
+
+interface KPIOperationalGridProps {
+  report: KPIReport
+}
+
+export function KPIOperationalGrid({ report }: KPIOperationalGridProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      {/* Revenue growth */}
+      <Card>
+        <CardContent className="p-5">
+          <p className="text-xs text-muted-foreground mb-1">Intäktstillväxt</p>
+          {!report.periodComplete ? (
+            <p className="text-sm text-muted-foreground">Välj ett avslutat räkenskapsår</p>
+          ) : report.revenueGrowth !== null ? (
+            <div className="flex items-center gap-2">
+              {report.revenueGrowth >= 0 ? (
+                <TrendingUp className="h-4 w-4 text-[hsl(var(--chart-1))]" />
+              ) : (
+                <TrendingDown className="h-4 w-4 text-[hsl(var(--chart-2))]" />
+              )}
+              <p className={`font-display text-xl tabular-nums tracking-tight ${
+                report.revenueGrowth >= 0 ? 'text-[hsl(var(--chart-1))]' : 'text-[hsl(var(--chart-2))]'
+              }`}>
+                {report.revenueGrowth > 0 ? '+' : ''}{report.revenueGrowth}%
+              </p>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">Första räkenskapsåret</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Expense ratio */}
+      <Card>
+        <CardContent className="p-5">
+          <p className="text-xs text-muted-foreground mb-1">Kostnadsandel</p>
+          {report.expenseRatio !== null ? (
+            <>
+              <p className="font-display text-xl tabular-nums tracking-tight">
+                {report.expenseRatio}%
+              </p>
+              <div className="mt-2 h-1.5 rounded-full bg-muted overflow-hidden">
+                <div
+                  className="h-full rounded-full bg-[hsl(var(--chart-2))]/60 transition-all"
+                  style={{ width: `${Math.min(report.expenseRatio, 100)}%` }}
+                />
+              </div>
+            </>
+          ) : (
+            <p className="text-sm text-muted-foreground">Inga intäkter</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Avg payment days */}
+      <Card>
+        <CardContent className="p-5">
+          <div className="flex items-center gap-1.5 mb-1">
+            <p className="text-xs text-muted-foreground">Snittbetaltid</p>
+            {report.avgPaymentDays === null && (
+              <span title="Kräver minst 5 betalda fakturor med betalningsdatum. Sätts via fakturering i gnubok eller bankmatchning.">
+                <Info className="h-3 w-3 text-muted-foreground/60" />
+              </span>
+            )}
+          </div>
+          {report.avgPaymentDays !== null ? (
+            <p className="font-display text-xl tabular-nums tracking-tight">
+              {report.avgPaymentDays} <span className="text-sm font-normal text-muted-foreground">dagar</span>
+            </p>
+          ) : (
+            <p className="text-sm text-muted-foreground">Inte tillräckligt med data</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* VAT liability */}
+      <Card>
+        <CardContent className="p-5">
+          <p className="text-xs text-muted-foreground mb-1">Momsskuld</p>
+          <p className={`font-display text-xl tabular-nums tracking-tight ${
+            report.vatLiability > 0 ? 'text-[hsl(var(--chart-2))]' : 'text-[hsl(var(--chart-1))]'
+          }`}>
+            {formatCurrency(Math.abs(report.vatLiability))}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">
+            {report.vatLiability > 0 ? 'Att betala' : report.vatLiability < 0 ? 'Att återfå' : 'Jämnt'}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

components/kpi/KPITrendChart.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import {
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Line,
+  ComposedChart,
+} from 'recharts'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { formatCurrency } from '@/lib/utils'
+
+interface KPITrendChartProps {
+  months: { label: string; income: number; expenses: number; net: number }[]
+}
+
+export function KPITrendChart({ months }: KPITrendChartProps) {
+  if (months.length === 0) return null
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base">Intäkter, kostnader & resultat per månad</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <ComposedChart
+            data={months}
+            margin={{ top: 5, right: 10, left: 10, bottom: 5 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis dataKey="label" tick={{ fontSize: 12 }} />
+            <YAxis
+              tickFormatter={(v) =>
+                new Intl.NumberFormat('sv-SE', { notation: 'compact' }).format(v)
+              }
+              tick={{ fontSize: 11 }}
+            />
+            <Tooltip
+              formatter={(value, name) => [
+                formatCurrency(Number(value)),
+                name === 'income'
+                  ? 'Intäkter'
+                  : name === 'expenses'
+                    ? 'Kostnader'
+                    : 'Resultat',
+              ]}
+              contentStyle={{
+                fontSize: '12px',
+                borderRadius: '8px',
+                border: '1px solid hsl(var(--border))',
+                backgroundColor: 'hsl(var(--card))',
+              }}
+            />
+            <Legend
+              formatter={(value: string) =>
+                value === 'income'
+                  ? 'Intäkter'
+                  : value === 'expenses'
+                    ? 'Kostnader'
+                    : 'Resultat'
+              }
+            />
+            <Area
+              type="monotone"
+              dataKey="income"
+              fill="hsl(var(--chart-1))"
+              fillOpacity={0.15}
+              stroke="hsl(var(--chart-1))"
+              strokeWidth={1.5}
+            />
+            <Area
+              type="monotone"
+              dataKey="expenses"
+              fill="hsl(var(--chart-2))"
+              fillOpacity={0.15}
+              stroke="hsl(var(--chart-2))"
+              strokeWidth={1.5}
+            />
+            <Line
+              type="monotone"
+              dataKey="net"
+              stroke="hsl(var(--chart-3))"
+              strokeWidth={2}
+              dot={false}
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  )
+}