@flowselections/ai-authenticatie 1.0.2

package/dist-lib/components/ProviderManageDialog.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Button, Input, Label, Badge, Separator, Switch, Skeleton, supabase, toast, } from '@flowselections/core';
+import { useServerFn } from '@tanstack/react-start';
+import { Plus, Trash2, Eye, EyeOff, Zap, Loader2, ShieldCheck, TrendingUp, ExternalLink } from 'lucide-react';
+import { ProviderLogo } from './ProviderLogo';
+import { maskKey } from '../hooks/useAiAdmin';
+import { testAiCredential, syncAiCredentialModels } from '../lib/aiCredentialTest.functions';
+import { useModelPricing, pricingByModelSlug, formatUsd, formatTokens } from '../hooks/useAiPricing';
+import { useProviderUsage } from '../hooks/useAiUsage';
+import { useAdminCredentials, findAdminCred } from '../hooks/useAdminCredentials';
+export function ProviderManageDialog({ provider, credentials, open, onOpenChange, onChange, }) {
+    const safeCreds = Array.isArray(credentials) ? credentials : [];
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [_jsx(DialogHeader, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ProviderLogo, { slug: provider.slug, name: provider.name, className: "h-10 w-10" }), _jsxs("div", { children: [_jsx(DialogTitle, { children: provider.name }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Beheer sleutels, bekijk tarieven en actueel verbruik." })] })] }) }), _jsxs("div", { className: "mt-2 space-y-6", children: [_jsx(UsageSection, { provider: provider }), _jsx(AdminKeySection, { provider: provider }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold mb-2", children: "API-sleutels" }), _jsx(CredentialList, { provider: provider, credentials: safeCreds, onChange: onChange })] }), _jsx(PricingSection, { provider: provider }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border bg-muted/40 p-3", children: [_jsx(ShieldCheck, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Alle sleutels worden veilig en versleuteld opgeslagen. Admin-sleutels worden alleen server-side gebruikt om kosten op te halen." })] })] })] }) }));
+}
+/* ─────────────────────────  Verbruik  ───────────────────────── */
+function UsageSection({ provider }) {
+    const { data, loading } = useProviderUsage(provider.slug.toLowerCase());
+    return (_jsxs("section", { className: "rounded-xl border bg-muted/20 p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TrendingUp, { className: "h-4 w-4 text-primary" }), _jsx("h4", { className: "text-sm font-semibold", children: "Verbruik deze maand" })] }), loading && !data ? (_jsx(Skeleton, { className: "h-16 w-full" })) : data?.supported === false ? (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Google biedt geen kosten via API.", ' ', _jsxs("a", { href: "https://console.cloud.google.com/billing", target: "_blank", rel: "noreferrer", className: "text-primary inline-flex items-center gap-1 hover:underline", children: ["Bekijk in Google Cloud ", _jsx(ExternalLink, { className: "h-3 w-3" })] })] })) : data?.ok ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-baseline gap-4", children: [_jsx("p", { className: "text-3xl font-bold tracking-tight", children: formatUsd(data.total_cost_usd) }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsxs("p", { children: [formatTokens(data.input_tokens), " tokens in"] }), _jsxs("p", { children: [formatTokens(data.output_tokens), " tokens uit"] })] })] }), data.lines.length > 0 && (_jsxs("div", { className: "pt-2 border-t space-y-1.5", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Per model" }), data.lines.slice(0, 6).map(l => (_jsxs("div", { className: "flex items-center justify-between text-xs", children: [_jsx("span", { className: "truncate mr-3", children: l.model }), _jsx("span", { className: "font-medium", children: formatUsd(l.cost_usd, 4) })] }, l.model)))] }))] })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: data?.message ?? 'Nog geen admin-sleutel opgegeven — voeg toe hieronder.' }))] }));
+}
+/* ─────────────────────────  Admin-key  ───────────────────────── */
+function AdminKeySection({ provider }) {
+    const { rows, loading, reload } = useAdminCredentials();
+    const existing = findAdminCred(rows, provider.id);
+    const [editing, setEditing] = useState(false);
+    const [reveal, setReveal] = useState(false);
+    const [label, setLabel] = useState('');
+    const [key, setKey] = useState('');
+    const [saving, setSaving] = useState(false);
+    const isGemini = provider.slug.toLowerCase().includes('gemini') || provider.slug.toLowerCase().includes('google');
+    if (isGemini) {
+        return (_jsxs("section", { className: "rounded-xl border p-4 space-y-2", children: [_jsx("h4", { className: "text-sm font-semibold", children: "Admin-sleutel voor kosten" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Google biedt geen kosten-API \u2014 verbruik is niet beschikbaar in deze module." })] }));
+    }
+    const save = async () => {
+        if (!label.trim() || !key.trim())
+            return;
+        setSaving(true);
+        try {
+            if (existing) {
+                const { error } = await supabase.from('ai_admin_credentials').update({
+                    label: label.trim(), admin_key: key.trim(), active: true,
+                }).eq('id', existing.id);
+                if (error) {
+                    toast.error(error.message);
+                    return;
+                }
+            }
+            else {
+                const { error } = await supabase.from('ai_admin_credentials').insert({
+                    provider_id: provider.id, label: label.trim(), admin_key: key.trim(),
+                });
+                if (error) {
+                    toast.error(error.message);
+                    return;
+                }
+            }
+            toast.success('Admin-sleutel opgeslagen');
+            setEditing(false);
+            setLabel('');
+            setKey('');
+            await reload();
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const remove = async (row) => {
+        if (!confirm('Admin-sleutel verwijderen?'))
+            return;
+        const { error } = await supabase.from('ai_admin_credentials').delete().eq('id', row.id);
+        if (error) {
+            toast.error(error.message);
+            return;
+        }
+        toast.success('Verwijderd');
+        await reload();
+    };
+    return (_jsxs("section", { className: "rounded-xl border p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold", children: "Admin-sleutel voor kosten" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Aparte sleutel met alleen leesrechten voor verbruik. Wordt server-side bewaard." })] }), existing && !editing && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => { setEditing(true); setLabel(existing.label); setKey(''); }, children: "Wijzigen" }))] }), loading ? (_jsx(Skeleton, { className: "h-10 w-full" })) : existing && !editing ? (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border p-2.5", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-sm", children: existing.label }), _jsx(Badge, { variant: "secondary", className: "text-xs", children: "Actief" })] }), _jsx("p", { className: "text-xs text-muted-foreground font-mono truncate mt-0.5", children: reveal ? existing.admin_key : maskKey(existing.admin_key) })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setReveal(r => !r), children: reveal ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => remove(existing), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })) : editing || !existing ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Label" }), _jsx(Input, { value: label, onChange: e => setLabel(e.target.value), placeholder: "Bijv. Kosten-uitlezer", className: "mt-1" })] }), _jsxs("div", { children: [_jsxs(Label, { className: "text-xs", children: ["Admin-sleutel", provider.slug.toLowerCase().includes('openai') && ' (sk-admin-…)', provider.slug.toLowerCase().includes('anthropic') && ' (sk-ant-admin-…)'] }), _jsx(Input, { type: "password", value: key, onChange: e => setKey(e.target.value), placeholder: "Plak hier de admin-sleutel", className: "mt-1" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { size: "sm", onClick: save, disabled: saving || !label || !key, children: [saving ? _jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" }) : _jsx(Plus, { className: "h-4 w-4 mr-1" }), "Opslaan"] }), editing && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => { setEditing(false); setLabel(''); setKey(''); }, children: "Annuleren" }))] })] })) : null] }));
+}
+/* ─────────────────────────  Tarieven per model  ───────────────────────── */
+function PricingSection({ provider }) {
+    const { rows, loading } = useModelPricing();
+    const byModel = useMemo(() => pricingByModelSlug(rows), [rows]);
+    const providerRows = useMemo(() => rows.filter(r => r.provider_slug === provider.slug.toLowerCase())
+        .sort((a, b) => (a.input_per_mtok ?? 0) - (b.input_per_mtok ?? 0)), [rows, provider.slug]);
+    return (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h4", { className: "text-sm font-semibold", children: "Tarieven per model" }), providerRows[0]?.fetched_at && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Bijgewerkt ", new Date(providerRows[0].fetched_at).toLocaleDateString('nl-NL')] }))] }), loading && providerRows.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-8 w-full" })] })) : providerRows.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Nog geen tarieven bekend voor deze provider." })) : (_jsxs("div", { className: "rounded-lg border overflow-hidden", children: [_jsxs("div", { className: "grid grid-cols-[1fr_auto_auto] gap-3 px-3 py-2 bg-muted/30 text-xs font-medium border-b", children: [_jsx("span", { children: "Model" }), _jsx("span", { className: "text-right w-24", children: "Input / 1M" }), _jsx("span", { className: "text-right w-24", children: "Output / 1M" })] }), _jsx("ul", { className: "divide-y max-h-64 overflow-y-auto", children: providerRows.map(r => (_jsxs("li", { className: "grid grid-cols-[1fr_auto_auto] gap-3 px-3 py-2 text-sm items-center", children: [_jsx("span", { className: "font-mono text-xs truncate", children: r.model_slug }), _jsx("span", { className: "text-right w-24 tabular-nums", children: formatUsd(r.input_per_mtok, 2) }), _jsx("span", { className: "text-right w-24 tabular-nums", children: formatUsd(r.output_per_mtok, 2) })] }, r.model_slug))) })] })), _jsx("p", { className: "text-xs text-muted-foreground mt-2", children: "Bron: models.dev \u2014 bedragen in USD per 1 miljoen tokens." }), _jsx("span", { className: "hidden", children: byModel.size })] }));
+}
+/* ─────────────────────────  API-sleutels  ───────────────────────── */
+function CredentialList({ provider, credentials, onChange, }) {
+    const [label, setLabel] = useState('');
+    const [key, setKey] = useState('');
+    const [reveal, setReveal] = useState({});
+    const [testing, setTesting] = useState({});
+    const runTest = useServerFn(testAiCredential);
+    const runSync = useServerFn(syncAiCredentialModels);
+    const syncModelsSilently = async (credentialId) => {
+        try {
+            const res = await runSync({ data: { credentialId } });
+            if (!res.ok)
+                return res.message;
+            return `${res.synced} modellen beschikbaar.`;
+        }
+        catch (e) {
+            return e instanceof Error ? e.message : 'Modellen synchroniseren mislukt.';
+        }
+    };
+    const add = async () => {
+        if (!label.trim() || !key.trim())
+            return;
+        const { data: inserted, error } = await supabase
+            .from('ai_credentials')
+            .insert({ provider_id: provider.id, label: label.trim(), api_key: key.trim() })
+            .select('id')
+            .maybeSingle();
+        if (error || !inserted) {
+            toast.error(error?.message ?? 'Opslaan mislukt');
+            return;
+        }
+        setLabel('');
+        setKey('');
+        toast.success('API-sleutel opgeslagen');
+        onChange();
+        // Direct modellen ophalen zodat het model-dropdown gevuld is.
+        const syncMsg = await syncModelsSilently(inserted.id);
+        if (syncMsg)
+            toast.info(syncMsg);
+        onChange();
+    };
+    const toggle = async (c) => {
+        const { error } = await supabase.from('ai_credentials').update({ active: !c.active }).eq('id', c.id);
+        if (error)
+            toast.error(error.message);
+        else
+            onChange();
+    };
+    const remove = async (id) => {
+        if (!confirm('Deze API-sleutel verwijderen?'))
+            return;
+        const { error } = await supabase.from('ai_credentials').delete().eq('id', id);
+        if (error)
+            toast.error(error.message);
+        else
+            onChange();
+    };
+    const test = async (id) => {
+        setTesting(t => ({ ...t, [id]: true }));
+        try {
+            const res = await runTest({ data: { credentialId: id } });
+            if (res.ok) {
+                toast.success(res.message);
+                // Modellen ook meteen opnieuw synchroniseren als de key werkt.
+                const syncMsg = await syncModelsSilently(id);
+                if (syncMsg)
+                    toast.info(syncMsg);
+                onChange();
+            }
+            else {
+                toast.error(res.message);
+            }
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : 'Test mislukt');
+        }
+        finally {
+            setTesting(t => ({ ...t, [id]: false }));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [credentials.length === 0 && (_jsx("div", { className: "rounded-lg border border-dashed py-6 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen API-sleutels toegevoegd." }) })), credentials.map(c => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border p-3 hover:bg-muted/50 transition-colors", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-sm truncate", children: c.label }), c.active
+                                                ? _jsx(Badge, { variant: "secondary", className: "text-xs", children: "Actief" })
+                                                : _jsx(Badge, { variant: "outline", className: "text-xs", children: "Uit" })] }), _jsx("p", { className: "text-xs text-muted-foreground font-mono truncate mt-0.5", children: reveal[c.id] ? c.api_key : maskKey(c.api_key) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setReveal(r => ({ ...r, [c.id]: !r[c.id] })), title: reveal[c.id] ? 'Verbergen' : 'Tonen', children: reveal[c.id] ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => test(c.id), disabled: testing[c.id], children: [testing[c.id]
+                                                ? _jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })
+                                                : _jsx(Zap, { className: "h-4 w-4 mr-1" }), "Testen"] }), _jsx(Switch, { checked: c.active, onCheckedChange: () => toggle(c) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => remove(c.id), title: "Verwijderen", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, c.id)))] }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Nieuwe API-sleutel" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Label" }), _jsx(Input, { value: label, onChange: e => setLabel(e.target.value), placeholder: "Bijv. Productie", className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "API-sleutel" }), _jsx(Input, { type: "password", value: key, onChange: e => setKey(e.target.value), placeholder: "sk-\u2026", className: "mt-1" })] })] }), _jsxs(Button, { onClick: add, size: "sm", disabled: !label || !key, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), " Sleutel toevoegen"] })] })] }));
+}

package/dist-lib/components/settings/AiAuthenticatieSettingsCard.d.ts

@@ -0,0 +1,2 @@
+export declare function AiAuthenticatieSettingsCard(): import("react").JSX.Element;
+//# sourceMappingURL=AiAuthenticatieSettingsCard.d.ts.map

package/dist-lib/components/settings/AiAuthenticatieSettingsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiAuthenticatieSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/AiAuthenticatieSettingsCard.tsx"],"names":[],"mappings":"AAIA,wBAAgB,2BAA2B,gCAkB1C"}

package/dist-lib/components/settings/AiAuthenticatieSettingsCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@flowselections/core';
+import { KeyRound } from 'lucide-react';
+import { AiAuthenticatiePage } from '../AiAuthenticatiePage';
+export function AiAuthenticatieSettingsCard() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(KeyRound, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "AI-Authenticatie" })] }), _jsx(CardDescription, { children: "Beheer per module welke AI-agents gebruikt worden, bekijk kosten en API sleutels." })] }), _jsx(CardContent, { children: _jsx(AiAuthenticatiePage, { embedded: true }) })] }));
+}

package/dist-lib/components/settings/MijnModuleSettingsCard.d.ts

@@ -0,0 +1,2 @@
+export declare function MijnModuleSettingsCard(): import("react").JSX.Element;
+//# sourceMappingURL=MijnModuleSettingsCard.d.ts.map

package/dist-lib/components/settings/MijnModuleSettingsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MijnModuleSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/MijnModuleSettingsCard.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,sBAAsB,gCA+CrC"}

package/dist-lib/components/settings/MijnModuleSettingsCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/settings/MijnModuleSettingsCard.tsx — EXAMPLE SETTINGS CARD
+// ============================================================================
+// This is an example of a settings card for your module.
+// It appears on the main settings page when registered in src/index.ts.
+//
+// RULES:
+//   - Must return a <Card> as its root element
+//   - Handles its own data fetching — no props are passed by the core
+//   - Use the same Card primitives from @flowselections/core
+//
+// WHAT TO DO:
+//   - Rename this file to match your card's purpose
+//   - Add your real settings UI
+//   - Register it in src/index.ts under settingsCards
+//   - Delete this file entirely if your module has no settings
+// ============================================================================
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Input, Label, toast, } from "@flowselections/core";
+import { Settings2 } from "lucide-react";
+export function MijnModuleSettingsCard() {
+    // Replace with your real settings state
+    const [setting, setSetting] = useState("");
+    const [saving, setSaving] = useState(false);
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            // Example: save to a table — replace with your real query
+            // const { error } = await supabase.from("my_settings").upsert({ ... });
+            // if (error) throw error;
+            toast.success("Instellingen opgeslagen");
+        }
+        catch {
+            toast.error("Fout bij het opslaan");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Module Instellingen" }), " "] }), _jsx(CardDescription, { children: "Beheer de instellingen voor deze module " })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "setting", children: "Instelling" }), _jsx(Input, { id: "setting", value: setting, onChange: (e) => setSetting(e.target.value), placeholder: "Waarde..." })] }), _jsx(Button, { onClick: handleSave, disabled: saving, children: saving ? "Opslaan..." : "Opslaan" })] })] }));
+}

package/dist-lib/hooks/useAdminCredentials.d.ts

@@ -0,0 +1,14 @@
+export type AiAdminCredential = {
+    id: string;
+    provider_id: string;
+    label: string;
+    admin_key: string;
+    active: boolean;
+};
+export declare function useAdminCredentials(): {
+    rows: AiAdminCredential[];
+    loading: boolean;
+    reload: () => Promise<void>;
+};
+export declare function findAdminCred(rows: AiAdminCredential[], providerId: string): AiAdminCredential | undefined;
+//# sourceMappingURL=useAdminCredentials.d.ts.map

package/dist-lib/hooks/useAdminCredentials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAdminCredentials.d.ts","sourceRoot":"","sources":["../../src/hooks/useAdminCredentials.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,mBAAmB;;;;EAalC;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,iBAAiB,EAAE,EAAE,UAAU,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS,CAE1G"}

package/dist-lib/hooks/useAdminCredentials.js

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useState } from 'react';
+import { supabase } from '@flowselections/core';
+export function useAdminCredentials() {
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const reload = useCallback(async () => {
+        setLoading(true);
+        const { data } = await supabase.from('ai_admin_credentials').select('*');
+        setRows(Array.isArray(data) ? data : []);
+        setLoading(false);
+    }, []);
+    useEffect(() => { void reload(); }, [reload]);
+    return { rows, loading, reload };
+}
+export function findAdminCred(rows, providerId) {
+    return rows.find(r => r.provider_id === providerId);
+}

package/dist-lib/hooks/useAiAdmin.d.ts

@@ -0,0 +1,44 @@
+export type AiProvider = {
+    id: string;
+    slug: string;
+    name: string;
+    base_url: string | null;
+    auth_type: string;
+    active: boolean;
+};
+export type AiModel = {
+    id: string;
+    provider_id: string;
+    slug: string;
+    display_name: string;
+    modality: string;
+    context_window: number | null;
+    active: boolean;
+    is_default: boolean;
+};
+export type AiCredential = {
+    id: string;
+    provider_id: string;
+    label: string;
+    api_key: string;
+    active: boolean;
+};
+export type AiBinding = {
+    id: string;
+    consumer_module_id: string;
+    model_id: string;
+    credential_id: string;
+    notes: string | null;
+    label?: string | null;
+    is_default?: boolean;
+};
+export declare function useAiAdminData(): {
+    providers: AiProvider[];
+    models: AiModel[];
+    credentials: AiCredential[];
+    bindings: AiBinding[];
+    loading: boolean;
+    reload: () => Promise<void>;
+};
+export declare function maskKey(key: string): string;
+//# sourceMappingURL=useAiAdmin.d.ts.map

package/dist-lib/hooks/useAiAdmin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiAdmin.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiAdmin.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAGF,wBAAgB,cAAc;;;;;;;EAyB7B;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI3C"}

package/dist-lib/hooks/useAiAdmin.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useState } from 'react';
+import { supabase } from '@flowselections/core';
+export function useAiAdminData() {
+    const [providers, setProviders] = useState([]);
+    const [models, setModels] = useState([]);
+    const [credentials, setCredentials] = useState([]);
+    const [bindings, setBindings] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const reload = useCallback(async () => {
+        setLoading(true);
+        const [pRes, mRes, cRes, bRes] = await Promise.all([
+            supabase.from('ai_providers').select('*').order('name'),
+            supabase.from('ai_models').select('*').order('display_name'),
+            supabase.from('ai_credentials').select('*').order('label'),
+            supabase.from('ai_module_bindings').select('*').order('consumer_module_id'),
+        ]);
+        setProviders(Array.isArray(pRes.data) ? pRes.data : []);
+        setModels(Array.isArray(mRes.data) ? mRes.data : []);
+        setCredentials(Array.isArray(cRes.data) ? cRes.data : []);
+        setBindings(Array.isArray(bRes.data) ? bRes.data : []);
+        setLoading(false);
+    }, []);
+    useEffect(() => { reload(); }, [reload]);
+    return { providers, models, credentials, bindings, loading, reload };
+}
+export function maskKey(key) {
+    if (!key)
+        return '';
+    if (key.length <= 8)
+        return '••••';
+    return key.slice(0, 4) + '••••' + key.slice(-4);
+}

package/dist-lib/hooks/useAiCostOverview.d.ts

@@ -0,0 +1,7 @@
+import { type AiCostOverview } from '../lib/aiModules.functions';
+export declare function useAiCostOverview(from: string, to: string): {
+    overview: AiCostOverview;
+    loading: boolean;
+    reload: () => Promise<void>;
+};
+//# sourceMappingURL=useAiCostOverview.d.ts.map

package/dist-lib/hooks/useAiCostOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiCostOverview.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiCostOverview.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAQpF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM;;;;EAiBzD"}

package/dist-lib/hooks/useAiCostOverview.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useServerFn } from '@tanstack/react-start';
+import { getAiCostOverview } from '../lib/aiModules.functions';
+const EMPTY = {
+    from: '', to: '',
+    totals: { calls: 0, errors: 0, input_tokens: 0, output_tokens: 0, total_tokens: 0, cost_usd: 0, avg_cost_per_call: 0 },
+    byModule: [],
+};
+export function useAiCostOverview(from, to) {
+    const fn = useServerFn(getAiCostOverview);
+    const [overview, setOverview] = useState(EMPTY);
+    const [loading, setLoading] = useState(true);
+    const reload = useCallback(async () => {
+        setLoading(true);
+        try {
+            const res = await fn({ data: { from, to } });
+            setOverview(res && Array.isArray(res.byModule) ? res : EMPTY);
+        }
+        catch {
+            setOverview(EMPTY);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [fn, from, to]);
+    useEffect(() => { void reload(); }, [reload]);
+    return { overview, loading, reload };
+}

package/dist-lib/hooks/useAiForGoal.d.ts

@@ -0,0 +1,21 @@
+import { type AiStreamHandlers } from '../lib/aiChat.stream';
+import type { AiChatBindingInfo, AiChatMessage, AiChatOptions, AiChatResult } from '../lib/aiChat.types';
+export type UseAiForGoalReturn = {
+    ready: boolean;
+    loading: boolean;
+    provider: AiChatBindingInfo['provider'];
+    model: AiChatBindingInfo['model'];
+    reason?: string;
+    reload: () => Promise<void>;
+    run: (messages: AiChatMessage[], options?: AiChatOptions) => Promise<AiChatResult>;
+    stream: (messages: AiChatMessage[], handlers: AiStreamHandlers, options?: AiChatOptions) => Promise<{
+        ok: boolean;
+        text: string;
+    }>;
+};
+/**
+ * Consumer-hook: geeft de AI-agent terug die aan een module is gekoppeld.
+ * `consumerModuleId` is de `module_key` uit de AI-instellingen.
+ */
+export declare function useAiForGoal(consumerModuleId: string): UseAiForGoalReturn;
+//# sourceMappingURL=useAiForGoal.d.ts.map

package/dist-lib/hooks/useAiForGoal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiForGoal.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiForGoal.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEzG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,GAAG,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;IACnF,MAAM,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpI,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,EAAE,MAAM,GAAG,kBAAkB,CA4CzE"}

package/dist-lib/hooks/useAiForGoal.js

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useServerFn } from '@tanstack/react-start';
+import { runAiChat, describeAiBinding } from '../lib/aiChat.functions';
+import { streamAiChat } from '../lib/aiChat.stream';
+/**
+ * Consumer-hook: geeft de AI-agent terug die aan een module is gekoppeld.
+ * `consumerModuleId` is de `module_key` uit de AI-instellingen.
+ */
+export function useAiForGoal(consumerModuleId) {
+    const describe = useServerFn(describeAiBinding);
+    const chat = useServerFn(runAiChat);
+    const [info, setInfo] = useState({ ready: false, provider: null, model: null });
+    const [loading, setLoading] = useState(true);
+    const reload = useCallback(async () => {
+        setLoading(true);
+        try {
+            const res = await describe({ data: { consumerModuleId } });
+            setInfo(res ?? { ready: false, provider: null, model: null });
+        }
+        catch (e) {
+            setInfo({ ready: false, provider: null, model: null, reason: e instanceof Error ? e.message : 'onbekende fout' });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [describe, consumerModuleId]);
+    useEffect(() => { void reload(); }, [reload]);
+    const run = useCallback((messages, options) => chat({ data: { consumerModuleId, messages, options } }), [chat, consumerModuleId]);
+    const stream = useCallback((messages, handlers, options) => streamAiChat({ consumerModuleId, messages, options, ...handlers }), [consumerModuleId]);
+    return {
+        ready: info.ready,
+        loading,
+        provider: info.provider,
+        model: info.model,
+        reason: info.reason,
+        reload,
+        run,
+        stream,
+    };
+}

package/dist-lib/hooks/useAiForModule.d.ts

@@ -0,0 +1,11 @@
+import { type UseAiForGoalReturn } from './useAiForGoal';
+export type UseAiForModuleReturn = UseAiForGoalReturn;
+/**
+ * Consumer-hook voor andere modules.
+ * Geeft de AI-agent terug die in AI-instellingen aan deze `module_key` is gekoppeld.
+ *
+ *   const ai = useAiForModule('mailbox-bestellingen');
+ *   const res = await ai.run([{ role: 'user', content: 'Hallo' }]);
+ */
+export declare function useAiForModule(moduleKey: string): UseAiForModuleReturn;
+//# sourceMappingURL=useAiForModule.d.ts.map

package/dist-lib/hooks/useAiForModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiForModule.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiForModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,kBAAkB,CAAC;AAEtD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,oBAAoB,CAEtE"}

package/dist-lib/hooks/useAiForModule.js

@@ -0,0 +1,11 @@
+import { useAiForGoal } from './useAiForGoal';
+/**
+ * Consumer-hook voor andere modules.
+ * Geeft de AI-agent terug die in AI-instellingen aan deze `module_key` is gekoppeld.
+ *
+ *   const ai = useAiForModule('mailbox-bestellingen');
+ *   const res = await ai.run([{ role: 'user', content: 'Hallo' }]);
+ */
+export function useAiForModule(moduleKey) {
+    return useAiForGoal(moduleKey);
+}

package/dist-lib/hooks/useAiGoals.d.ts

@@ -0,0 +1,8 @@
+import { type AiGoal } from '../lib/aiGoals.functions';
+export type { AiGoal };
+export declare function useAiGoals(): {
+    goals: AiGoal[];
+    loading: boolean;
+    reload: () => Promise<void>;
+};
+//# sourceMappingURL=useAiGoals.d.ts.map

package/dist-lib/hooks/useAiGoals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiGoals.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiGoals.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAEpE,YAAY,EAAE,MAAM,EAAE,CAAC;AAEvB,wBAAgB,UAAU;;;;EAczB"}

package/dist-lib/hooks/useAiGoals.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useServerFn } from '@tanstack/react-start';
+import { listAiGoals } from '../lib/aiGoals.functions';
+export function useAiGoals() {
+    const fn = useServerFn(listAiGoals);
+    const [goals, setGoals] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const reload = useCallback(async () => {
+        setLoading(true);
+        try {
+            setGoals(await fn());
+        }
+        catch {
+            setGoals([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [fn]);
+    useEffect(() => { void reload(); }, [reload]);
+    return { goals, loading, reload };
+}

package/dist-lib/hooks/useAiModules.d.ts

@@ -0,0 +1,15 @@
+import { type AiModuleRow, type AiMutationResult } from '../lib/aiModules.functions';
+export type { AiModuleRow };
+export declare function useAiModules(): {
+    modules: AiModuleRow[];
+    loading: boolean;
+    reload: () => Promise<void>;
+    save: (input: {
+        module_key?: string;
+        module_name: string;
+        ai_enabled: boolean;
+    }) => Promise<AiMutationResult>;
+    setEnabled: (module_key: string, ai_enabled: boolean) => Promise<AiMutationResult>;
+    remove: (module_key: string) => Promise<AiMutationResult>;
+};
+//# sourceMappingURL=useAiModules.d.ts.map

package/dist-lib/hooks/useAiModules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiModules.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiModules.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,WAAW,EAAE,KAAK,gBAAgB,EACxC,MAAM,4BAA4B,CAAC;AAEpC,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,wBAAgB,YAAY;;;;kBAmBjB;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KACvE,OAAO,CAAC,gBAAgB,CAAC;6BAUsB,MAAM,cAAc,OAAO,KAAG,OAAO,CAAC,gBAAgB,CAAC;yBAU3D,MAAM,KAAG,OAAO,CAAC,gBAAgB,CAAC;EAWjF"}

package/dist-lib/hooks/useAiModules.js

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useServerFn } from '@tanstack/react-start';
+import { listAiModules, saveAiModule, setAiModuleEnabled, deleteAiModule, } from '../lib/aiModules.functions';
+export function useAiModules() {
+    const listFn = useServerFn(listAiModules);
+    const saveFn = useServerFn(saveAiModule);
+    const toggleFn = useServerFn(setAiModuleEnabled);
+    const deleteFn = useServerFn(deleteAiModule);
+    const [modules, setModules] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const reload = useCallback(async () => {
+        setLoading(true);
+        try {
+            const rows = await listFn();
+            setModules(Array.isArray(rows) ? rows : []);
+        }
+        catch {
+            setModules([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [listFn]);
+    useEffect(() => { void reload(); }, [reload]);
+    const save = useCallback(async (input) => {
+        try {
+            const res = await saveFn({ data: input });
+            if (res?.ok)
+                await reload();
+            return res ?? { ok: false, message: 'Opslaan mislukt.' };
+        }
+        catch (e) {
+            return { ok: false, message: e instanceof Error ? e.message : 'Opslaan mislukt.' };
+        }
+    }, [saveFn, reload]);
+    const setEnabled = useCallback(async (module_key, ai_enabled) => {
+        try {
+            const res = await toggleFn({ data: { module_key, ai_enabled } });
+            if (res?.ok)
+                await reload();
+            return res ?? { ok: false, message: 'Opslaan mislukt.' };
+        }
+        catch (e) {
+            return { ok: false, message: e instanceof Error ? e.message : 'Opslaan mislukt.' };
+        }
+    }, [toggleFn, reload]);
+    const remove = useCallback(async (module_key) => {
+        try {
+            const res = await deleteFn({ data: { module_key } });
+            if (res?.ok)
+                await reload();
+            return res ?? { ok: false, message: 'Verwijderen mislukt.' };
+        }
+        catch (e) {
+            return { ok: false, message: e instanceof Error ? e.message : 'Verwijderen mislukt.' };
+        }
+    }, [deleteFn, reload]);
+    return { modules, loading, reload, save, setEnabled, remove };
+}