@flowselections/ai-authenticatie 1.0.2

package/dist-lib/_core-safelist.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=_core-safelist.d.ts.map

package/dist-lib/_core-safelist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_core-safelist.d.ts","sourceRoot":"","sources":["../src/_core-safelist.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,CAAC"}

package/dist-lib/_core-safelist.js

@@ -0,0 +1,15 @@
+// Forceert Tailwind classes die uit @flowselections/core komen maar niet
+// voorkomen in de eigen broncode van deze module.
+// Zonder dit bestand worden deze classes weggeoptimaliseerd op de
+// Lovable productie build.
+const _safelist = [
+    // Layout — Sidebar en shell structuur
+    'h-full', 'flex-col', 'flex-1', 'min-h-screen', 'ml-64', 'pt-16',
+    'items-start', 'items-center', 'justify-between', 'border-t',
+    'w-64', 'h-screen', 'h-20', 'overflow-y-auto',
+    // Grid — InstellingenPage
+    'grid', 'lg:grid-cols-2', 'gap-6', 'p-6', 'space-y-6',
+    // Toggle/Switch — aan/uit zichtbaarheid
+    'data-[state=checked]:bg-primary', 'data-[state=unchecked]:bg-input',
+];
+export {};

package/dist-lib/components/AiAuthenticatieLogo.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+export declare function AiAuthenticatieLogo(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+//# sourceMappingURL=AiAuthenticatieLogo.d.ts.map

package/dist-lib/components/AiAuthenticatieLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiAuthenticatieLogo.d.ts","sourceRoot":"","sources":["../../src/components/AiAuthenticatieLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,+BASjE"}

package/dist-lib/components/AiAuthenticatieLogo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AiAuthenticatieLogo(props) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M12 2l2.4 5.2L20 9l-4 3.9.9 5.6L12 15.8 7.1 18.5 8 12.9 4 9l5.6-1.8L12 2z" }), _jsx("circle", { cx: "18", cy: "18", r: "3" }), _jsx("path", { d: "M18 16v2l1.5 1" })] }));
+}

package/dist-lib/components/AiAuthenticatiePage.d.ts

@@ -0,0 +1,4 @@
+export declare function AiAuthenticatiePage({ embedded }?: {
+    embedded?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AiAuthenticatiePage.d.ts.map

package/dist-lib/components/AiAuthenticatiePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiAuthenticatiePage.d.ts","sourceRoot":"","sources":["../../src/components/AiAuthenticatiePage.tsx"],"names":[],"mappings":"AA6CA,wBAAgB,mBAAmB,CAAC,EAAE,QAAgB,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,+BAiQpF"}

package/dist-lib/components/AiAuthenticatiePage.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Link } from '@tanstack/react-router';
+import { Button, Card, Skeleton, Badge, Switch, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, toast, } from '@flowselections/core';
+import { KeyRound, ChevronRight, ShieldCheck, RefreshCw, TrendingUp, AlertCircle, ExternalLink, Plus, Loader2, Sparkles, Trash2, Settings2, Boxes, Code2, } from 'lucide-react';
+import { useAiAdminData } from '../hooks/useAiAdmin';
+import { useModelPricing, providerSummaries, formatUsd, formatTokens } from '../hooks/useAiPricing';
+import { useAllProviderUsage } from '../hooks/useAiUsage';
+import { useAiModules } from '../hooks/useAiModules';
+import { useModules } from '../hooks/useModules';
+import { useAiCostOverview } from '../hooks/useAiCostOverview';
+import { periodFromPreset } from '../lib/aiPeriod';
+import { AiPeriodFilter } from './AiPeriodFilter';
+import { StatTile } from './AiStatTile';
+import { ProviderLogo } from './ProviderLogo';
+import { ProviderManageDialog } from './ProviderManageDialog';
+import { ModuleAgentsDialog } from './ModuleAgentsDialog';
+async function copyIntegrationSnippet(moduleKey) {
+    const snippet = `import { useAiForModule } from '@flowselections/ai-authenticatie';
+
+const ai = useAiForModule('${moduleKey}');
+
+const res = await ai.run([
+  { role: 'user', content: 'Jouw vraag hier' },
+]);
+if (res.ok) console.log(res.content);`;
+    try {
+        await navigator.clipboard.writeText(snippet);
+        toast.success('Integratiecode gekopieerd');
+    }
+    catch {
+        toast.error('Kopiëren is niet gelukt');
+    }
+}
+/* ─────────────────────────  Page  ───────────────────────── */
+export function AiAuthenticatiePage({ embedded = false } = {}) {
+    const { providers, models, credentials, bindings, loading, reload } = useAiAdminData();
+    const { modules, loading: modulesLoading, save: saveModule, setEnabled, remove: removeModule } = useAiModules();
+    const [period, setPeriod] = useState(() => periodFromPreset('month'));
+    const { overview, loading: overviewLoading, reload: reloadOverview } = useAiCostOverview(period.from, period.to);
+    const safeProviders = Array.isArray(providers) ? providers : [];
+    const safeModels = Array.isArray(models) ? models : [];
+    const safeCreds = Array.isArray(credentials) ? credentials : [];
+    const safeBindings = Array.isArray(bindings) ? bindings : [];
+    const safeModules = Array.isArray(modules) ? modules : [];
+    const aiModules = safeModules.filter(m => m.ai_enabled);
+    const statsByModule = useMemo(() => {
+        const rows = Array.isArray(overview?.byModule) ? overview.byModule : [];
+        return new Map(rows.map(r => [r.module_key, r]));
+    }, [overview]);
+    const [keysOpen, setKeysOpen] = useState(false);
+    const [addModuleOpen, setAddModuleOpen] = useState(false);
+    const [agentsFor, setAgentsFor] = useState(null);
+    const [manageProvider, setManageProvider] = useState(null);
+    const totals = overview?.totals;
+    const handleToggle = async (m, value) => {
+        const res = await setEnabled(m.module_key, value);
+        res.ok ? toast.success(res.message) : toast.error(res.message);
+    };
+    const handleDelete = async (m) => {
+        if (!confirm(`Module "${m.module_name}" verwijderen uit de AI-instellingen?`))
+            return;
+        const res = await removeModule(m.module_key);
+        res.ok ? toast.success(res.message) : toast.error(res.message);
+    };
+    const Wrapper = embedded ? 'div' : 'main';
+    const wrapperClass = embedded ? 'space-y-6' : 'mx-auto max-w-6xl p-6 space-y-6';
+    const SectionBox = embedded ? 'div' : Card;
+    const sectionClass = embedded
+        ? 'rounded-xl border overflow-hidden bg-background/40'
+        : 'rounded-2xl overflow-hidden p-0';
+    return (_jsxs(Wrapper, { className: wrapperClass, children: [!embedded && (_jsxs("header", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "AI-instellingen" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Beheer per module welke AI-agents gebruikt worden en bekijk de kosten." })] })), _jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("p", { className: "text-sm font-semibold", children: "Totaaloverzicht" }), _jsx(AiPeriodFilter, { period: period, onChange: setPeriod })] }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: [_jsx(StatTile, { label: "Totale AI-kosten", value: overviewLoading ? null : formatUsd(totals?.cost_usd ?? 0), sub: "Alle modules samen" }), _jsx(StatTile, { label: "Aanvragen", value: overviewLoading ? null : String(totals?.calls ?? 0), sub: `${totals?.errors ?? 0} met fout` }), _jsx(StatTile, { label: "Tokens", value: overviewLoading ? null : formatTokens(totals?.total_tokens ?? 0), sub: "In- en uitvoer" }), _jsx(StatTile, { label: "Gem. per aanvraag", value: overviewLoading ? null : formatUsd(totals?.avg_cost_per_call ?? 0), sub: "In de gekozen periode" })] }), _jsxs(SectionBox, { className: sectionClass, children: [_jsxs("div", { className: "flex items-center justify-between px-4 md:px-6 py-4 border-b bg-muted/20", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Boxes, { className: "h-4 w-4 text-primary" }), _jsx("p", { className: "text-sm font-semibold", children: "Modules met AI" })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => { reload(); void reloadOverview(); }, children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${overviewLoading ? 'animate-spin' : ''}` }) })] }), _jsxs("div", { className: "hidden md:grid grid-cols-[1.4fr_1.2fr_.7fr_.7fr_.8fr_auto] gap-4 px-6 py-3 border-b bg-muted/10 text-xs font-semibold text-muted-foreground", children: [_jsx("span", { children: "Module" }), _jsx("span", { children: "AI-agent / model" }), _jsx("span", { className: "text-right", children: "Aanvragen" }), _jsx("span", { className: "text-right", children: "Tokens" }), _jsx("span", { className: "text-right", children: "Kosten" }), _jsx("span", { className: "text-right pl-2", children: "Status & acties" })] }), loading || modulesLoading ? (_jsxs("div", { className: "p-6 space-y-3", children: [_jsx(Skeleton, { className: "h-14 w-full" }), _jsx(Skeleton, { className: "h-14 w-full" })] })) : aiModules.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-muted-foreground", children: "Er zijn nog geen modules met AI ingeschakeld. Voeg een module toe of zet AI aan bij een bestaande module." })) : (_jsx("ul", { className: "divide-y", children: aiModules.map(m => {
+                            const moduleBindings = safeBindings.filter(b => b.consumer_module_id === m.module_key);
+                            const primary = moduleBindings.find(b => b.is_default) ?? moduleBindings[0] ?? null;
+                            const primaryModel = primary ? safeModels.find(x => x.id === primary.model_id) : undefined;
+                            const primaryProvider = primaryModel ? safeProviders.find(p => p.id === primaryModel.provider_id) : undefined;
+                            const s = statsByModule.get(m.module_key);
+                            return (_jsxs("li", { className: "grid grid-cols-1 md:grid-cols-[1.4fr_1.2fr_.7fr_.7fr_.8fr_auto] gap-3 md:gap-4 items-center px-4 md:px-6 py-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold text-sm truncate", children: m.module_name }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: m.module_key })] }), _jsx("button", { type: "button", onClick: () => setAgentsFor(m), className: "text-left min-w-0 rounded-lg hover:bg-muted/40 px-2 py-1 -mx-2", children: primary ? (_jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [primaryProvider && _jsx(ProviderLogo, { slug: primaryProvider.slug, name: primaryProvider.name, className: "h-4 w-4 shrink-0" }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block text-sm truncate", children: primary.label || primaryModel?.display_name || 'Onbekend model' }), _jsxs("span", { className: "block text-xs text-muted-foreground truncate", children: [primaryProvider?.name ?? '—', moduleBindings.length > 1 && ` · +${moduleBindings.length - 1} agent${moduleBindings.length > 2 ? 's' : ''}`] })] })] })) : (_jsxs("span", { className: "text-sm text-primary inline-flex items-center gap-1", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " AI-agent koppelen"] })) }), _jsx("span", { className: "text-sm md:text-right", children: s?.calls ?? 0 }), _jsx("span", { className: "text-sm md:text-right", children: formatTokens(s?.total_tokens ?? 0) }), _jsx("span", { className: "text-sm md:text-right font-medium", children: formatUsd(s?.cost_usd ?? 0) }), _jsxs("div", { className: "flex items-center justify-end gap-2 md:pl-2", children: [_jsx(Switch, { checked: m.ai_enabled, onCheckedChange: v => handleToggle(m, v), title: "AI in-/uitschakelen" }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9", title: "Integratiecode kopi\u00EBren", onClick: () => void copyIntegrationSnippet(m.module_key), children: _jsx(Code2, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9", title: "AI-agents beheren", onClick: () => setAgentsFor(m), children: _jsx(Settings2, { className: "h-4 w-4" }) }), _jsx(Button, { asChild: true, variant: "outline", size: "icon", className: "h-9 w-9", title: "Details bekijken", children: _jsx(Link, { to: "/ai-authenticatie/$moduleKey", params: { moduleKey: m.module_key }, children: _jsx(ChevronRight, { className: "h-4 w-4" }) }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 text-muted-foreground hover:text-destructive", title: "Module verwijderen", onClick: () => handleDelete(m), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, m.id));
+                        }) })), _jsxs("div", { className: "border-t px-4 md:px-6 py-3 flex items-center justify-between gap-3 bg-muted/10", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Modules met AI uitgeschakeld worden hier niet getoond en kunnen geen AI-agent gebruiken." }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAddModuleOpen(true), children: [_jsx(Plus, { className: "h-4 w-4 mr-1.5" }), " Module toevoegen"] })] })] }), !modulesLoading && safeModules.some(m => !m.ai_enabled) && (_jsxs("div", { className: `${embedded ? 'rounded-xl border bg-background/40' : 'rounded-2xl border bg-card shadow-sm'} p-4 space-y-2`, children: [_jsx("p", { className: "text-sm font-semibold", children: "Modules zonder AI" }), _jsx("ul", { className: "divide-y", children: safeModules.filter(m => !m.ai_enabled).map(m => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm truncate", children: m.module_name }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: m.module_key })] }), _jsx(Switch, { checked: false, onCheckedChange: () => handleToggle(m, true), title: "AI inschakelen" })] }, m.id))) })] })), _jsx(ModuleDialog, { open: addModuleOpen, onOpenChange: setAddModuleOpen, existingKeys: safeModules.map(m => m.module_key), onSubmit: (key, name, enabled) => saveModule({ module_key: key, module_name: name, ai_enabled: enabled }) }), agentsFor && (_jsx(ModuleAgentsDialog, { module: agentsFor, open: !!agentsFor, onOpenChange: o => { if (!o)
+                    setAgentsFor(null); }, providers: safeProviders, models: safeModels, credentials: safeCreds, bindings: safeBindings.filter(b => b.consumer_module_id === agentsFor.module_key), onChange: reload, onOpenProvider: p => { setAgentsFor(null); setManageProvider(p); } })), _jsx("button", { onClick: () => setKeysOpen(true), className: "w-full text-left", children: _jsxs("div", { className: `${embedded ? 'rounded-xl border bg-background/40' : 'rounded-2xl border bg-card shadow-sm'} p-5 flex items-center gap-4 hover:border-primary/60 hover:bg-muted/30 transition-colors`, children: [_jsx("div", { className: "h-11 w-11 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0", children: _jsx(KeyRound, { className: "h-5 w-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-semibold text-sm", children: "API sleutels beheren" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Beheer je API sleutels voor de verschillende AI providers." })] }), _jsx(ChevronRight, { className: "h-5 w-5 text-muted-foreground shrink-0" })] }) }), _jsx(ApiKeysDialog, { open: keysOpen, onOpenChange: setKeysOpen, providers: safeProviders, models: safeModels, credentials: safeCreds, onOpenProvider: p => { setKeysOpen(false); setManageProvider(p); } }), manageProvider && (_jsx(ProviderManageDialog, { provider: manageProvider, credentials: safeCreds.filter(c => c.provider_id === manageProvider.id), open: !!manageProvider, onOpenChange: o => { if (!o) {
+                    setManageProvider(null);
+                    setKeysOpen(true);
+                } }, onChange: reload }))] }));
+}
+/* ─────────────────────────  Module toevoegen  ───────────────────────── */
+function ModuleDialog({ open, onOpenChange, onSubmit, existingKeys, }) {
+    const { registered, loading } = useModules();
+    const [selected, setSelected] = useState('');
+    const [enabled, setEnabled] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const options = (Array.isArray(registered) ? registered : [])
+        .filter(m => m.is_active && !existingKeys.includes(m.module_key));
+    const chosen = options.find(m => m.module_key === selected) ?? null;
+    const close = (v) => {
+        if (!v) {
+            setSelected('');
+            setEnabled(true);
+        }
+        onOpenChange(v);
+    };
+    const submit = async () => {
+        if (!chosen) {
+            toast.error('Kies eerst een module.');
+            return;
+        }
+        setSaving(true);
+        try {
+            const res = await onSubmit(chosen.module_key, chosen.module_name, enabled);
+            if (res.ok) {
+                toast.success(res.message);
+                close(false);
+            }
+            else
+                toast.error(res.message);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: close, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Sparkles, { className: "h-4 w-4 text-primary" }), " Module toevoegen"] }), _jsx(DialogDescription, { children: "Kies een module die op dit systeem is aangesloten. Je koppelt daarna \u00E9\u00E9n of meerdere AI-agents." })] }), _jsxs("div", { className: "space-y-4 py-2", children: [loading ? (_jsx(Skeleton, { className: "h-24 w-full rounded-xl" })) : options.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground rounded-xl border p-3", children: "Alle aangesloten modules zijn al toegevoegd." })) : (_jsx("ul", { className: "space-y-2 max-h-64 overflow-auto", children: options.map(m => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setSelected(m.module_key), className: `w-full text-left rounded-xl border p-3 transition-colors ${selected === m.module_key ? 'border-primary bg-primary/5' : 'hover:bg-muted/40'}`, children: [_jsx("p", { className: "text-sm font-medium truncate", children: m.module_name }), m.description && (_jsx("p", { className: "text-xs text-muted-foreground truncate", children: m.description }))] }) }, m.module_key))) })), _jsxs("div", { className: "flex items-center justify-between rounded-xl border p-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "AI inschakelen" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Alleen ingeschakelde modules kunnen AI gebruiken." })] }), _jsx(Switch, { checked: enabled, onCheckedChange: setEnabled })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => close(false), disabled: saving, children: "Annuleren" }), _jsxs(Button, { onClick: submit, disabled: saving || !chosen, children: [saving ? _jsx(Loader2, { className: "h-4 w-4 mr-1.5 animate-spin" }) : _jsx(Plus, { className: "h-4 w-4 mr-1.5" }), "Module toevoegen"] })] })] }) }));
+}
+/* ─────────────────────────  API keys dialog  ───────────────────────── */
+function ApiKeysDialog({ open, onOpenChange, providers, models, credentials, onOpenProvider, }) {
+    const { rows: pricingRows, loading: pricingLoading, refreshing, refresh } = useModelPricing();
+    const providerSlugs = useMemo(() => providers.map(p => p.slug.toLowerCase()), [providers]);
+    const { byProvider: usage, loading: usageLoading, reload: reloadUsage } = useAllProviderUsage(providerSlugs);
+    const summaries = useMemo(() => providerSummaries(pricingRows), [pricingRows]);
+    const totalMonth = Object.values(usage).reduce((s, u) => s + (u?.total_cost_usd ?? 0), 0);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-4xl max-h-[90vh] overflow-y-auto", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "API sleutels beheren" }), _jsx(DialogDescription, { children: "Beheer je API sleutels, bekijk actuele tarieven en het verbruik van deze maand." })] }), _jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TrendingUp, { className: "h-4 w-4 text-primary" }), _jsx("h3", { className: "text-sm font-semibold", children: "Kosten deze maand" }), !usageLoading && (_jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["Totaal: ", formatUsd(totalMonth)] }))] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: reloadUsage, disabled: usageLoading, children: [_jsx(RefreshCw, { className: `h-3.5 w-3.5 mr-1 ${usageLoading ? 'animate-spin' : ''}` }), "Vernieuwen"] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: providers.map(p => (_jsx(UsageCard, { provider: p, usage: usage[p.slug.toLowerCase()] ?? null, loading: usageLoading, onManage: () => onOpenProvider(p) }, p.id))) })] }), _jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Providers" }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => refresh(true), disabled: refreshing, children: [_jsx(RefreshCw, { className: `h-3.5 w-3.5 mr-1 ${refreshing ? 'animate-spin' : ''}` }), "Tarieven bijwerken"] })] }), _jsxs(Card, { className: "rounded-2xl overflow-hidden p-0", children: [_jsxs("div", { className: "hidden md:grid grid-cols-[1.4fr_1fr_1fr_1fr_auto] gap-4 px-5 py-3 border-b bg-muted/20 text-sm font-semibold", children: [_jsx("span", { children: "Provider" }), _jsx("span", { className: "text-center", children: "Modellen" }), _jsx("span", { className: "text-center", children: "Sleutels" }), _jsx("span", { className: "text-center", children: "Vanaf tarief" }), _jsx("span", { className: "text-right pr-1", children: "Acties" })] }), _jsx("ul", { className: "divide-y", children: providers.map(p => {
+                                        const modelCount = models.filter(m => m.provider_id === p.id && m.active).length;
+                                        const credCount = credentials.filter(c => c.provider_id === p.id && c.active).length;
+                                        const summary = summaries.get(p.slug.toLowerCase());
+                                        return (_jsxs("li", { className: "grid grid-cols-1 md:grid-cols-[1.4fr_1fr_1fr_1fr_auto] gap-3 md:gap-4 items-center px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsx(ProviderLogo, { slug: p.slug, name: p.name, className: "h-8 w-8 shrink-0" }), _jsx("span", { className: "font-semibold text-sm truncate", children: p.name })] }), _jsxs("span", { className: "text-sm text-center", children: [modelCount, " ", _jsxs("span", { className: "text-muted-foreground", children: ["model", modelCount === 1 ? '' : 'len'] })] }), _jsxs("span", { className: "text-sm text-center", children: [credCount, " ", _jsxs("span", { className: "text-muted-foreground", children: ["sleutel", credCount === 1 ? '' : 's'] })] }), _jsx("span", { className: "text-sm text-center text-muted-foreground", children: pricingLoading && !summary
+                                                        ? _jsx(Skeleton, { className: "h-3 w-16 mx-auto" })
+                                                        : summary?.min_input != null
+                                                            ? _jsxs(_Fragment, { children: ["vanaf ", _jsx("span", { className: "text-foreground font-medium", children: formatUsd(summary.min_input, 2) }), " / 1M tokens"] })
+                                                            : '—' }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenProvider(p), children: "Beheren" }) })] }, p.id));
+                                    }) })] }), _jsx("p", { className: "text-xs text-muted-foreground pl-1", children: "Tarieven van models.dev, dagelijks bijgewerkt. Getoond per 1 miljoen tokens in USD." })] }), _jsxs("div", { className: "flex items-center gap-3 rounded-xl border bg-muted/30 p-4", children: [_jsx("div", { className: "h-9 w-9 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0", children: _jsx(ShieldCheck, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold text-sm", children: "Je API sleutels zijn veilig" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "We delen geen gevoelige informatie met derden. Alles blijft binnen jouw omgeving." })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: () => onOpenChange(false), children: "Sluiten" }) })] }) }));
+}
+function UsageCard({ provider, usage, loading, onManage, }) {
+    const supported = usage?.supported ?? true;
+    const hasData = usage?.ok && usage.total_cost_usd >= 0;
+    const missingKey = usage && !usage.ok && supported;
+    return (_jsxs(Card, { className: "rounded-2xl p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ProviderLogo, { slug: provider.slug, name: provider.name, className: "h-6 w-6" }), _jsx("span", { className: "font-semibold text-sm truncate", children: provider.name })] }), loading && !usage ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-24" }), _jsx(Skeleton, { className: "h-3 w-32" })] })) : !supported ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Google biedt geen kostenoverzicht via API." }), _jsxs("a", { href: "https://console.cloud.google.com/billing", target: "_blank", rel: "noreferrer", className: "text-xs text-primary inline-flex items-center gap-1 hover:underline", children: ["Bekijk in Google Cloud ", _jsx(ExternalLink, { className: "h-3 w-3" })] })] })) : hasData ? (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-2xl font-bold tracking-tight", children: formatUsd(usage.total_cost_usd) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [formatTokens(usage.input_tokens), " in \u00B7 ", formatTokens(usage.output_tokens), " uit"] })] })) : missingKey ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5 text-amber-600 mt-0.5 shrink-0" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Admin-sleutel ontbreekt. Voeg toe om verbruik te tonen." })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: onManage, className: "h-7 text-xs", children: "Sleutel toevoegen" })] })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: "Geen gegevens beschikbaar." }))] }));
+}

package/dist-lib/components/AiModuleDetailPage.d.ts

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

package/dist-lib/components/AiModuleDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiModuleDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/AiModuleDetailPage.tsx"],"names":[],"mappings":"AAcA,wBAAgB,kBAAkB,gCAgGjC"}

package/dist-lib/components/AiModuleDetailPage.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link, useParams } from '@tanstack/react-router';
+import { useServerFn } from '@tanstack/react-start';
+import { Button, Card, Skeleton, Badge } from '@flowselections/core';
+import { ArrowLeft, RefreshCw } from 'lucide-react';
+import { getAiModuleCalls } from '../lib/aiModules.functions';
+import { useAiModules } from '../hooks/useAiModules';
+import { useAiCostOverview } from '../hooks/useAiCostOverview';
+import { periodFromPreset } from '../lib/aiPeriod';
+import { AiPeriodFilter } from './AiPeriodFilter';
+import { formatUsd, formatTokens } from '../hooks/useAiPricing';
+import { StatTile } from './AiStatTile';
+import { AiModuleTestPanel } from './AiModuleTestPanel';
+export function AiModuleDetailPage() {
+    const { moduleKey } = useParams({ strict: false });
+    const key = moduleKey ?? '';
+    const [period, setPeriod] = useState(() => periodFromPreset('month'));
+    const { modules } = useAiModules();
+    const { overview, loading: overviewLoading, reload: reloadOverview } = useAiCostOverview(period.from, period.to);
+    const module = (Array.isArray(modules) ? modules : []).find(m => m.module_key === key) ?? null;
+    const stats = (Array.isArray(overview?.byModule) ? overview.byModule : []).find(s => s.module_key === key) ?? null;
+    const callsFn = useServerFn(getAiModuleCalls);
+    const [calls, setCalls] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const loadCalls = useCallback(async () => {
+        setLoading(true);
+        try {
+            const rows = await callsFn({ data: { module_key: key, from: period.from, to: period.to, limit: 200 } });
+            setCalls(Array.isArray(rows) ? rows : []);
+        }
+        catch {
+            setCalls([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [callsFn, key, period.from, period.to]);
+    useEffect(() => { void loadCalls(); }, [loadCalls]);
+    const title = module?.module_name ?? key;
+    const safeCalls = useMemo(() => (Array.isArray(calls) ? calls : []), [calls]);
+    return (_jsxs("main", { className: "mx-auto max-w-5xl p-6 space-y-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsxs(Link, { to: "/ai-authenticatie", className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5" }), " Terug naar AI-instellingen"] }), _jsx("h1", { className: "text-2xl font-bold tracking-tight mt-1", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Alle AI-aanroepen en kosten van deze module." })] }), _jsx(AiPeriodFilter, { period: period, onChange: setPeriod })] }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: [_jsx(StatTile, { label: "Kosten", value: overviewLoading ? null : formatUsd(stats?.cost_usd ?? 0) }), _jsx(StatTile, { label: "Aanvragen", value: overviewLoading ? null : String(stats?.calls ?? 0) }), _jsx(StatTile, { label: "Tokens", value: overviewLoading ? null : formatTokens(stats?.total_tokens ?? 0) }), _jsx(StatTile, { label: "Gem. per aanvraag", value: overviewLoading ? null : formatUsd(stats && stats.calls > 0 ? stats.cost_usd / stats.calls : 0) })] }), key && _jsx(AiModuleTestPanel, { moduleKey: key }), _jsxs(Card, { className: "rounded-2xl p-0 overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b bg-muted/20", children: [_jsx("p", { className: "text-sm font-semibold", children: "AI-aanroepen" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => { void loadCalls(); void reloadOverview(); }, children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}` }) })] }), _jsxs("div", { className: "hidden md:grid grid-cols-[1.2fr_1fr_1fr_.7fr_.7fr_.7fr_.6fr] gap-3 px-5 py-2 border-b bg-muted/10 text-xs font-semibold text-muted-foreground", children: [_jsx("span", { children: "Datum/tijd" }), _jsx("span", { children: "Provider" }), _jsx("span", { children: "Model" }), _jsx("span", { className: "text-right", children: "In" }), _jsx("span", { className: "text-right", children: "Uit" }), _jsx("span", { className: "text-right", children: "Kosten" }), _jsx("span", { className: "text-right", children: "Duur" })] }), loading && safeCalls.length === 0 ? (_jsxs("div", { className: "p-5 space-y-2", children: [_jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-full" })] })) : safeCalls.length === 0 ? (_jsx("p", { className: "p-5 text-sm text-muted-foreground", children: "Geen AI-aanroepen in deze periode." })) : (_jsx("ul", { className: "divide-y", children: safeCalls.map(c => (_jsxs("li", { className: "grid grid-cols-2 md:grid-cols-[1.2fr_1fr_1fr_.7fr_.7fr_.7fr_.6fr] gap-2 md:gap-3 px-5 py-3 text-sm items-center", children: [_jsxs("span", { className: "text-xs md:text-sm", children: [new Date(c.created_at).toLocaleString('nl-NL'), c.status && c.status !== 'ok' && c.status !== 'success' && (_jsx(Badge, { variant: "destructive", className: "ml-2 text-[10px]", children: "fout" }))] }), _jsx("span", { className: "truncate", children: c.provider_slug ?? '—' }), _jsx("span", { className: "truncate", children: c.model_slug ?? '—' }), _jsx("span", { className: "text-right", children: formatTokens(c.input_tokens) }), _jsx("span", { className: "text-right", children: formatTokens(c.output_tokens) }), _jsx("span", { className: "text-right font-medium", children: formatUsd(c.cost_usd) }), _jsx("span", { className: "text-right text-muted-foreground", children: c.duration_ms != null ? `${Math.round(c.duration_ms)} ms` : '—' })] }, c.id))) }))] })] }));
+}

package/dist-lib/components/AiModuleTestPanel.d.ts

@@ -0,0 +1,4 @@
+export declare function AiModuleTestPanel({ moduleKey }: {
+    moduleKey: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AiModuleTestPanel.d.ts.map

package/dist-lib/components/AiModuleTestPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiModuleTestPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiModuleTestPanel.tsx"],"names":[],"mappings":"AAOA,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,+BA8ErE"}

package/dist-lib/components/AiModuleTestPanel.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Card, Badge, Textarea, toast } from '@flowselections/core';
+import { Play, Loader2, AlertCircle } from 'lucide-react';
+import { useAiForModule } from '../hooks/useAiForModule';
+import { formatUsd, formatTokens } from '../hooks/useAiPricing';
+export function AiModuleTestPanel({ moduleKey }) {
+    const ai = useAiForModule(moduleKey);
+    const [prompt, setPrompt] = useState('Geef een korte testreactie in het Nederlands.');
+    const [busy, setBusy] = useState(false);
+    const [result, setResult] = useState(null);
+    const send = async () => {
+        const text = prompt.trim();
+        if (!text) {
+            toast.error('Vul eerst een vraag in.');
+            return;
+        }
+        setBusy(true);
+        setResult(null);
+        try {
+            const res = await ai.run([{ role: 'user', content: text }]);
+            setResult(res ?? null);
+            if (res && !res.ok)
+                toast.error(res.message);
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : 'Onbekende fout');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(Card, { className: "rounded-2xl p-0 overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 px-5 py-3 border-b bg-muted/20", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-semibold", children: "Agent testen" }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: ai.loading
+                                    ? 'Koppeling controleren…'
+                                    : ai.ready
+                                        ? `${ai.provider?.name ?? '—'} · ${ai.model?.displayName ?? ai.model?.slug ?? '—'}`
+                                        : (ai.reason ?? 'Geen AI-agent gekoppeld aan deze module.') })] }), !ai.loading && (_jsx(Badge, { variant: ai.ready ? 'secondary' : 'destructive', className: "shrink-0", children: ai.ready ? 'Klaar voor gebruik' : 'Niet gekoppeld' }))] }), _jsxs("div", { className: "p-5 space-y-3", children: [_jsx(Textarea, { value: prompt, onChange: e => setPrompt(e.target.value), rows: 3, placeholder: "Typ een testvraag\u2026", disabled: !ai.ready || busy }), _jsx("div", { className: "flex items-center justify-end", children: _jsxs(Button, { onClick: () => void send(), disabled: !ai.ready || busy, children: [busy ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : _jsx(Play, { className: "h-4 w-4" }), _jsx("span", { className: "ml-2", children: "Versturen" })] }) }), result && result.ok && (_jsxs("div", { className: "rounded-xl border bg-muted/20 p-4 space-y-3", children: [_jsx("p", { className: "text-sm whitespace-pre-wrap", children: result.content || '(leeg antwoord)' }), _jsxs("div", { className: "flex flex-wrap gap-4 text-xs text-muted-foreground border-t pt-2", children: [_jsxs("span", { children: ["In: ", formatTokens(result.usage.inputTokens)] }), _jsxs("span", { children: ["Uit: ", formatTokens(result.usage.outputTokens)] }), _jsxs("span", { children: ["Totaal: ", formatTokens(result.usage.totalTokens)] }), _jsxs("span", { children: ["Kosten: ", formatUsd(result.costUsd ?? 0)] })] })] })), result && !result.ok && (_jsxs("div", { className: "rounded-xl border border-destructive/40 bg-destructive/5 p-4 flex gap-2 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive shrink-0 mt-0.5" }), _jsx("span", { children: result.message })] }))] })] }));
+}

package/dist-lib/components/AiPeriodFilter.d.ts

@@ -0,0 +1,7 @@
+import { type AiPeriod } from '../lib/aiPeriod';
+export declare function AiPeriodFilter({ period, onChange, className, }: {
+    period: AiPeriod;
+    onChange: (p: AiPeriod) => void;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AiPeriodFilter.d.ts.map

package/dist-lib/components/AiPeriodFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiPeriodFilter.d.ts","sourceRoot":"","sources":["../../src/components/AiPeriodFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,QAAQ,EACd,MAAM,iBAAiB,CAAC;AAEzB,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EAAE,QAAQ,EAAE,SAAc,GACjC,EAAE;IACD,MAAM,EAAE,QAAQ,CAAC;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAoDA"}

package/dist-lib/components/AiPeriodFilter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@flowselections/core';
+import { CalendarRange } from 'lucide-react';
+import { PERIOD_LABELS, fromDateInput, periodFromPreset, toDateInput, } from '../lib/aiPeriod';
+export function AiPeriodFilter({ period, onChange, className = '', }) {
+    const presets = ['today', 'week', 'month', 'year', 'custom'];
+    return (_jsxs("div", { className: `flex flex-wrap items-center gap-2 ${className}`, children: [_jsx(CalendarRange, { className: "h-4 w-4 text-muted-foreground" }), _jsxs(Select, { value: period.preset, onValueChange: (v) => {
+                    const preset = v;
+                    if (preset === 'custom')
+                        onChange({ ...period, preset });
+                    else
+                        onChange(periodFromPreset(preset));
+                }, children: [_jsx(SelectTrigger, { className: "w-[160px] h-9", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: presets.map(p => (_jsx(SelectItem, { value: p, children: PERIOD_LABELS[p] }, p))) })] }), period.preset === 'custom' && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "date", className: "h-9 w-[150px]", value: toDateInput(period.from), onChange: e => onChange({ ...period, from: fromDateInput(e.target.value) }) }), _jsx("span", { className: "text-xs text-muted-foreground", children: "t/m" }), _jsx(Input, { type: "date", className: "h-9 w-[150px]", value: toDateInput(period.to), onChange: e => onChange({ ...period, to: fromDateInput(e.target.value, true) }) })] })), _jsx(Button, { variant: "ghost", size: "sm", className: "h-9", onClick: () => onChange(periodFromPreset(period.preset === 'custom' ? 'month' : period.preset)), children: "Vernieuwen" })] }));
+}

package/dist-lib/components/AiStatTile.d.ts

@@ -0,0 +1,6 @@
+export declare function StatTile({ label, value, sub }: {
+    label: string;
+    value: string | null;
+    sub?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AiStatTile.d.ts.map

package/dist-lib/components/AiStatTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiStatTile.d.ts","sourceRoot":"","sources":["../../src/components/AiStatTile.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,+BAQpG"}

package/dist-lib/components/AiStatTile.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Skeleton } from '@flowselections/core';
+export function StatTile({ label, value, sub }) {
+    return (_jsxs(Card, { className: "rounded-2xl p-4 space-y-1", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: label }), value === null ? _jsx(Skeleton, { className: "h-7 w-20" }) : _jsx("p", { className: "text-2xl font-bold tracking-tight", children: value }), sub && _jsx("p", { className: "text-xs text-muted-foreground", children: sub })] }));
+}

package/dist-lib/components/ModuleAgentsDialog.d.ts

@@ -0,0 +1,14 @@
+import type { AiProvider, AiModel, AiCredential, AiBinding } from '../hooks/useAiAdmin';
+import type { AiModuleRow } from '../lib/aiModules.functions';
+export declare function ModuleAgentsDialog({ module, open, onOpenChange, providers, models, credentials, bindings, onChange, onOpenProvider, }: {
+    module: AiModuleRow;
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    providers: AiProvider[];
+    models: AiModel[];
+    credentials: AiCredential[];
+    bindings: AiBinding[];
+    onChange: () => void;
+    onOpenProvider: (p: AiProvider) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ModuleAgentsDialog.d.ts.map

package/dist-lib/components/ModuleAgentsDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleAgentsDialog.d.ts","sourceRoot":"","sources":["../../src/components/ModuleAgentsDialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,GAC/F,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,MAAM,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC,+BA0KA"}

package/dist-lib/components/ModuleAgentsDialog.js

@@ -0,0 +1,78 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Badge, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, supabase, toast, } from '@flowselections/core';
+import { Plus, Trash2, Star, KeyRound } from 'lucide-react';
+import { ProviderLogo } from './ProviderLogo';
+export function ModuleAgentsDialog({ module, open, onOpenChange, providers, models, credentials, bindings, onChange, onOpenProvider, }) {
+    const safeProviders = Array.isArray(providers) ? providers : [];
+    const safeModels = Array.isArray(models) ? models : [];
+    const safeCreds = Array.isArray(credentials) ? credentials : [];
+    const safeBindings = Array.isArray(bindings) ? bindings : [];
+    const [providerId, setProviderId] = useState('');
+    const [modelId, setModelId] = useState('');
+    const [label, setLabel] = useState('');
+    const [saving, setSaving] = useState(false);
+    const providerModels = safeModels.filter(m => m.provider_id === providerId && m.active);
+    const add = async () => {
+        const model = safeModels.find(m => m.id === modelId);
+        if (!model) {
+            toast.error('Kies eerst een AI-model.');
+            return;
+        }
+        const cred = safeCreds.find(c => c.provider_id === model.provider_id && c.active);
+        if (!cred) {
+            toast.error('Voeg eerst een actieve API-sleutel toe voor deze provider.');
+            return;
+        }
+        setSaving(true);
+        const { error } = await supabase.from('ai_module_bindings').insert({
+            consumer_module_id: module.module_key,
+            model_id: model.id,
+            credential_id: cred.id,
+            label: label.trim() || null,
+            is_default: safeBindings.length === 0,
+        });
+        setSaving(false);
+        if (error) {
+            toast.error(error.message.includes('duplicate') ? 'Dit model is al gekoppeld aan deze module.' : error.message);
+            return;
+        }
+        setProviderId('');
+        setModelId('');
+        setLabel('');
+        toast.success('AI-agent gekoppeld.');
+        onChange();
+    };
+    const makeDefault = async (binding) => {
+        await supabase.from('ai_module_bindings')
+            .update({ is_default: false }).eq('consumer_module_id', module.module_key);
+        const { error } = await supabase.from('ai_module_bindings')
+            .update({ is_default: true }).eq('id', binding.id);
+        if (error) {
+            toast.error(error.message);
+            return;
+        }
+        toast.success('Standaard AI-agent bijgewerkt.');
+        onChange();
+    };
+    const remove = async (binding) => {
+        const { error } = await supabase.from('ai_module_bindings').delete().eq('id', binding.id);
+        if (error) {
+            toast.error(error.message);
+            return;
+        }
+        toast.success('Koppeling verwijderd.');
+        onChange();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["AI-agents voor ", module.module_name] }), _jsx(DialogDescription, { children: "Koppel \u00E9\u00E9n of meerdere AI-agents aan deze module. De standaard agent wordt gebruikt als er geen andere wordt gekozen." })] }), _jsx("div", { className: "space-y-2", children: safeBindings.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground rounded-xl border p-4", children: "Nog geen AI-agent gekoppeld aan deze module." })) : (_jsx("ul", { className: "divide-y rounded-xl border", children: safeBindings.map(b => {
+                            const m = safeModels.find(x => x.id === b.model_id);
+                            const p = m ? safeProviders.find(x => x.id === m.provider_id) : undefined;
+                            const unsupported = !m || !m.active;
+                            return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-3", children: [p && _jsx(ProviderLogo, { slug: p.slug, name: p.name, className: "h-6 w-6 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-sm font-medium truncate", children: [b.label || m?.display_name || 'Onbekend model', b.is_default && _jsx(Badge, { variant: "secondary", className: "ml-2 text-xs", children: "Standaard" }), unsupported && _jsx(Badge, { variant: "destructive", className: "ml-2 text-xs", children: "Niet meer ondersteund" })] }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: unsupported
+                                                    ? 'Dit model wordt niet meer ondersteund — kies hieronder een ander model.'
+                                                    : `${p?.name ?? 'Onbekende provider'} · ${m?.display_name ?? '—'}` })] }), !b.is_default && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", title: "Als standaard instellen", onClick: () => makeDefault(b), children: _jsx(Star, { className: "h-4 w-4" }) })), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-muted-foreground hover:text-destructive", title: "Koppeling verwijderen", onClick: () => remove(b), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, b.id));
+                        }) })) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: "Provider" }), _jsxs(Select, { value: providerId, onValueChange: v => { setProviderId(v); setModelId(''); }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies provider" }) }), _jsx(SelectContent, { children: safeProviders.map(p => {
+                                                const linked = safeCreds.some(c => c.provider_id === p.id && c.active);
+                                                return (_jsx(SelectItem, { value: p.id, disabled: !linked, className: !linked ? 'opacity-50' : '', children: _jsxs("span", { className: "flex items-center justify-between w-full gap-3", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ProviderLogo, { slug: p.slug, name: p.name, className: "h-4 w-4" }), p.name] }), !linked && (_jsxs("button", { type: "button", onClick: e => { e.stopPropagation(); e.preventDefault(); onOpenProvider(p); }, className: "inline-flex items-center gap-1 text-xs text-primary hover:underline", children: [_jsx(KeyRound, { className: "h-3 w-3" }), " Koppel"] }))] }) }, p.id));
+                                            }) })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: "Model" }), _jsxs(Select, { value: modelId, onValueChange: setModelId, disabled: !providerId, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: providerId ? 'Kies model' : 'Kies eerst provider' }) }), _jsx(SelectContent, { children: providerModels.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "Geen modellen beschikbaar." })) : providerModels.map(m => (_jsx(SelectItem, { value: m.id, children: m.display_name }, m.id))) })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { children: ["Naam ", _jsx("span", { className: "text-muted-foreground font-normal", children: "(optioneel)" })] }), _jsx(Input, { value: label, onChange: e => setLabel(e.target.value), placeholder: "Bijv. Analyse-agent" })] }), _jsx("div", { className: "md:col-span-3 flex justify-end", children: _jsxs(Button, { onClick: add, disabled: saving || !modelId, children: [_jsx(Plus, { className: "h-4 w-4 mr-1.5" }), " AI-agent koppelen"] }) })] }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Sluiten" }) })] }) }));
+}

package/dist-lib/components/ProviderLogo.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    slug: string;
+    name?: string;
+    className?: string;
+};
+export declare function ProviderLogo({ slug, name, className }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ProviderLogo.d.ts.map

package/dist-lib/components/ProviderLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderLogo.d.ts","sourceRoot":"","sources":["../../src/components/ProviderLogo.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,+BAsB5D"}

package/dist-lib/components/ProviderLogo.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@flowselections/core';
+const LOGO_BASE = '/flowselections-assets/ai-authenticatie';
+function resolveLogo(slug) {
+    const s = (slug || '').toLowerCase();
+    if (s === 'gemini' || s === 'google' || s.includes('google') || s.includes('gemini')) {
+        return `${LOGO_BASE}/gemini.png`;
+    }
+    if (s === 'openai' || s.includes('openai') || s === 'gpt' || s.includes('gpt')) {
+        return `${LOGO_BASE}/openai.png`;
+    }
+    if (s === 'anthropic' || s.includes('claude') || s.includes('anthropic')) {
+        return `${LOGO_BASE}/claude.png`;
+    }
+    return null;
+}
+export function ProviderLogo({ slug, name, className }) {
+    const logo = resolveLogo(slug);
+    if (logo) {
+        return (_jsx("div", { className: cn('flex items-center justify-center rounded-lg bg-white border overflow-hidden', className), children: _jsx("img", { src: logo, alt: name ?? slug, className: "w-[70%] h-[70%] object-contain" }) }));
+    }
+    const letter = (name || slug || '?').trim().charAt(0).toUpperCase();
+    return (_jsx("div", { className: cn('flex items-center justify-center rounded-lg bg-gradient-to-br from-primary/80 to-primary text-primary-foreground font-semibold', className), children: letter }));
+}

package/dist-lib/components/ProviderManageDialog.d.ts

@@ -0,0 +1,11 @@
+import { type AiProvider, type AiCredential } from '../hooks/useAiAdmin';
+type Props = {
+    provider: AiProvider;
+    credentials: AiCredential[];
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onChange: () => void;
+};
+export declare function ProviderManageDialog({ provider, credentials, open, onOpenChange, onChange, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ProviderManageDialog.d.ts.map

package/dist-lib/components/ProviderManageDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderManageDialog.d.ts","sourceRoot":"","sources":["../../src/components/ProviderManageDialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAW,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMlF,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,UAAU,CAAC;IACrB,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GACpD,EAAE,KAAK,+BA4CP"}