@columenlabs/lumen-ui 0.1.259 → 0.1.261

package/dist/assistant/client.d.ts

@@ -1,4 +1,4 @@
-import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantOwnWay, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem, UsageHistory } from '@columenlabs/lumen-ui-types/assistant';
+import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantConnectorInput, AssistantEvent, AssistantMessage, AssistantOwnWay, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem, UsageHistory } from '@columenlabs/lumen-ui-types/assistant';
 type Test = NonNullable<KeyState['test']>;
 export interface AssistantAdapter {
     /** Names the cache its reads keep (two assistants on one page need two keys). */
@@ -31,6 +31,13 @@ export interface AssistantAdapter {
         client_secret: string;
     } | null): Promise<AssistantStatus>;
     testScrapeql(): Promise<Test>;
+    /** Admin: adds a connector (an MCP server), kept only when its test lists its tools. */
+    addConnector?(input: AssistantConnectorInput): Promise<AssistantStatus>;
+    /** Admin: changes one; left out, `headers` keeps the ones saved. */
+    saveConnector?(id: string, input: AssistantConnectorInput): Promise<AssistantStatus>;
+    removeConnector?(id: string): Promise<AssistantStatus>;
+    /** Admin: lists its tools again. */
+    testConnector?(id: string): Promise<Test>;
     chats(): Promise<AssistantChatRow[]>;
     chat(id: string): Promise<AssistantChat>;
     removeChat(id: string): Promise<void>;

package/dist/assistant/client.js

@@ -55,6 +55,10 @@ export function assistantClient(base) {
         signOut: (p) => send('DELETE', `/my-signin?provider=${p}`),
         scrapeql: (token) => token ? send('PUT', '/web/scrapeql', token) : send('DELETE', '/web/scrapeql'),
         testScrapeql: () => send('POST', '/web/test'),
+        addConnector: (input) => send('POST', '/connectors', input),
+        saveConnector: (id, input) => send('PUT', `/connectors/${encodeURIComponent(id)}`, input),
+        removeConnector: (id) => send('DELETE', `/connectors/${encodeURIComponent(id)}`),
+        testConnector: (id) => send('POST', `/connectors/${encodeURIComponent(id)}/test`),
         chats: () => get('/chats'),
         chat: (id) => get(`/chats/${encodeURIComponent(id)}`),
         removeChat: async (id) => {

package/dist/assistant/settings.d.ts

@@ -4,10 +4,12 @@ import type { AssistantAdapter } from './client.js';
  * The admin's section: the app's shared keys and each person's monthly allowance on them. Put it
  * where the app keeps its admin settings, shown only to admins.
  */
-export declare function assistantAdminSections({ client, allowance, providers, }: {
+export declare function assistantAdminSections({ client, allowance, providers, connectors, }: {
     client: AssistantAdapter;
     /** Add Allowance requests (the app set `allowance` on the server). */
     allowance?: boolean;
+    /** Add Connectors: outside MCP servers the assistant may use (the app set `connectors` on the server). */
+    connectors?: boolean;
     /** Give each provider's shared key a section of its own (listed under Allowance) instead of one
      *  Shared model keys section: the app's providers, in order. */
     providers?: {

package/dist/assistant/settings.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ChartColumnIcon, CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, Link2Icon, LogInIcon, ReceiptIcon, SendIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
+import { ChartColumnIcon, CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, Link2Icon, LogInIcon, PlugIcon, ReceiptIcon, SendIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
 import { useId, useState } from 'react';
 import { ConnectionLogo, LumenConnection, } from '../connection.js';
 import { LumenExpandList, LumenExpandRow } from '../expand-list.js';
@@ -312,6 +312,104 @@ function Web({ client }) {
     const { apply } = useApply(client);
     return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(SettingField, { label: "Read the web", info: "A plain fetch of public pages and APIs from the server, never the app's own pages.", children: _jsx(Switch, { "aria-label": "Read the web", checked: s.web.fetch, onCheckedChange: (fetch) => void apply('web', () => client.settings({ web: { fetch } })) }) }), _jsx(ScrapeqlBlock, { client: client, s: s })] })) }));
 }
+// ---------------------------------------------------------------- connectors
+const CONNECTOR_ACCESS_LABELS = [
+    { value: 'off', label: 'Off' },
+    { value: 'read', label: 'Read' },
+    { value: 'draft', label: 'Read + draft' },
+];
+/** Name, address and up to two sign-in headers; a pair left empty is not sent. */
+const headerFields = (prefix = '') => [
+    { id: `${prefix}h1`, label: 'Header', placeholder: 'CF-Access-Client-Id' },
+    { id: `${prefix}v1`, label: 'Value', secret: true },
+    { id: `${prefix}h2`, label: 'Header', placeholder: 'CF-Access-Client-Secret' },
+    { id: `${prefix}v2`, label: 'Value', secret: true },
+];
+const headersOf = (v) => {
+    const out = {};
+    for (const i of [1, 2]) {
+        const k = v[`h${i}`]?.trim();
+        const val = v[`v${i}`]?.trim();
+        if (k && val)
+            out[k] = val;
+    }
+    return out;
+};
+function ConnectorRow({ client, c }) {
+    const { apply, refresh } = useApply(client);
+    const reads = c.tools.filter((t) => t.read).length;
+    const access = (v) => apply('connector', () => client.saveConnector(c.id, {
+        name: c.name,
+        url: c.url,
+        access: v,
+    }));
+    return (_jsx(LumenConnection, { id: c.id, name: c.name, logo: _jsx(ConnectionLogo, { icon: PlugIcon }), meta: `${c.tools.length} tool${c.tools.length === 1 ? '' : 's'}${c.access === 'off' ? ' · off' : ''}`, ways: [
+            {
+                id: 'headers',
+                label: 'Sign-in headers',
+                icon: KeyRoundIcon,
+                info: 'Sent with every call to this server, such as a Cloudflare Access service token. Kept sealed on the server and never shown again.',
+                set: true,
+                ident: c.headers.length ? c.headers.join(', ') : 'None',
+                test: c.test
+                    ? {
+                        at: c.test.at,
+                        ok: c.test.ok,
+                        detail: c.test.detail,
+                        error: c.test.ok ? null : c.test.detail,
+                    }
+                    : null,
+                fields: [{ id: 'url', label: 'Address', placeholder: c.url }, ...headerFields()],
+                addLabel: 'Replace',
+                onSave: (v) => apply('connector', () => client.saveConnector(c.id, {
+                    name: c.name,
+                    url: v.url?.trim() || c.url,
+                    headers: headersOf(v),
+                }), 'Connector saved'),
+                ...(client.testConnector
+                    ? {
+                        onTest: () => client.testConnector(c.id).finally(refresh),
+                    }
+                    : {}),
+                onRemove: () => apply('connector', () => client.removeConnector(c.id), 'Connector removed'),
+                removeTitle: `Remove ${c.name}?`,
+                removeText: 'The assistant stops using its tools.',
+            },
+        ], lines: [
+            { label: 'Address', value: c.url, mono: true },
+            {
+                label: 'Tools',
+                info: 'The assistant finds these only when it needs them, so they cost nothing until used.',
+                value: c.tools.length
+                    ? `${c.tools.map((t) => t.title ?? t.name).join(', ')} (${reads} read-only)`
+                    : 'None listed',
+            },
+        ], children: _jsx(SettingField, { label: "Use", info: "Read uses the tools the server marks read-only. Read + draft also lets the others make a card the person saves or dismisses.", children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: c.access, "aria-label": `Use ${c.name}`, onValueChange: (v) => v && void access(v), children: CONNECTOR_ACCESS_LABELS.map((a) => (_jsx(ToggleGroupItem, { value: a.value, children: a.label }, a.value))) }) }) }));
+}
+/** Admin: the app's connectors, each an MCP server, and a row to add one. */
+function Connectors({ client }) {
+    const { apply } = useApply(client);
+    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs(LumenExpandList, { children: [(s.connectors ?? []).map((c) => (_jsx(ConnectorRow, { client: client, c: c }, c.id))), _jsx(LumenConnection, { id: "connector-new", name: "Add connector", logo: _jsx(ConnectionLogo, { icon: PlugIcon }), meta: "Any MCP server over HTTP", ways: [
+                        {
+                            id: 'new',
+                            label: 'MCP server',
+                            icon: PlugIcon,
+                            info: 'Its address (Streamable HTTP) and the headers it signs in with. It is tested before it is kept.',
+                            set: false,
+                            fields: [
+                                { id: 'name', label: 'Name', placeholder: 'Web search' },
+                                { id: 'url', label: 'Address', placeholder: 'https://example.com/mcp' },
+                                ...headerFields(),
+                            ],
+                            addLabel: 'Add connector',
+                            onSave: (v) => apply('connector', () => client.addConnector({
+                                name: v.name?.trim() ?? '',
+                                url: v.url?.trim() ?? '',
+                                headers: headersOf(v),
+                            }), 'Connector added'),
+                        },
+                    ] })] })) }));
+}
 // ---------------------------------------------------------------- spend
 function Spend({ client }) {
     return (_jsx(WithStatus, { client: client, children: (s) => {
@@ -414,7 +512,7 @@ function AllowanceRequests({ client }) {
  * The admin's section: the app's shared keys and each person's monthly allowance on them. Put it
  * where the app keeps its admin settings, shown only to admins.
  */
-export function assistantAdminSections({ client, allowance = false, providers, }) {
+export function assistantAdminSections({ client, allowance = false, providers, connectors = false, }) {
     const keys = providers
         ? [
             {
@@ -455,6 +553,17 @@ export function assistantAdminSections({ client, allowance = false, providers, }
                 },
             ]
             : []),
+        ...(connectors
+            ? [
+                {
+                    id: 'assistant-connectors',
+                    title: 'Connectors',
+                    icon: PlugIcon,
+                    description: 'Outside services the assistant may use',
+                    content: _jsx(Connectors, { client: client }),
+                },
+            ]
+            : []),
     ];
 }
 /**

package/dist/assistant/usage-history.d.ts

@@ -36,7 +36,7 @@ export declare function AssistantChatCost({ client, chatId, busy, }: {
     busy?: boolean;
 }): import("react").JSX.Element | null;
 /**
- * This month's use, one row a chat or run: its Type (the person's API key, their plan sign-in, or
+ * This month's use, one row a session (a chat, or every run of one task on one thing): its Type (the person's API key, their plan sign-in, or
  * the app's credits), Date, Calls and Amount, grouped by Type, Date or not at all, filtered by
  * type or name. A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the
  * same tokens at the model's API rates (the plan charges $0).

package/dist/assistant/usage-history.js

@@ -254,30 +254,59 @@ const TYPE_LABEL = {
     key: 'API key',
     plan: 'Sign-in',
     credits: 'Credits',
+    internal: 'Internal',
+};
+const TYPE_TONE = {
+    key: 'sky',
+    plan: 'amber',
+    credits: 'muted',
+    internal: 'muted',
 };
-const TYPE_TONE = { key: 'sky', plan: 'amber', credits: 'muted' };
 /** Dollars with no `<` or `≈` (the table's note says which amounts are estimates). */
 const money = (n) => (n === 0 ? '$0' : `$${n.toFixed(n < 10 ? 2 : 0)}`);
 const amountOf = (r) => r.key + r.credits + r.plan;
 const EARLIER = 'Earlier';
 /** This month's rows: every chat and run, then the spend no chat or run carries, by who paid. */
 function usageRows(h) {
-    const out = h.entries.map((e) => {
+    // One row a session: a chat, or every run of one task on one thing (each Rebuild of a part).
+    const sessions = new Map();
+    for (const e of h.entries) {
         const key = e.own_usd ?? 0;
         const plan = e.own_plan_usd ?? 0;
-        const type = plan > 0 || e.own_plan_calls ? 'plan' : key > 0 ? 'key' : 'credits';
-        return {
-            id: e.id,
+        const id = e.kind === 'chat' ? e.id : `task:${e.task ?? ''}:${e.title}`;
+        const s = sessions.get(id);
+        const planCalls = (s?.planCalls ?? 0) + (e.own_plan_calls ?? 0);
+        const row = {
+            id,
             title: e.title,
-            type,
-            at: e.at,
-            calls: e.calls,
-            tokens: { in: e.in, read: e.read, out: e.out },
-            key,
-            credits: Math.max(0, e.usd - key),
-            plan,
+            type: 'credits',
+            at: Math.max(s?.at ?? 0, e.at),
+            calls: (s?.calls ?? 0) + e.calls,
+            tokens: {
+                in: (s?.tokens?.in ?? 0) + e.in,
+                read: (s?.tokens?.read ?? 0) + e.read,
+                out: (s?.tokens?.out ?? 0) + e.out,
+            },
+            key: (s?.key ?? 0) + key,
+            credits: (s?.credits ?? 0) + Math.max(0, e.usd - key),
+            plan: (s?.plan ?? 0) + plan,
+            planCalls,
         };
-    });
+        // Its type is whoever paid most; the hover splits the rest.
+        const top = Math.max(row.key, row.credits, row.plan);
+        row.type =
+            row.plan > 0 && row.plan === top
+                ? 'plan'
+                : row.key > 0 && row.key === top
+                    ? 'key'
+                    : row.credits > 0 || !planCalls
+                        ? 'credits'
+                        : 'plan';
+        if (e.internal)
+            row.type = 'internal';
+        sessions.set(id, row);
+    }
+    const out = [...sessions.values()];
     const sum = (xs) => xs.reduce((a, n) => a + n, 0);
     const earlier = (type, title, calls, amount) => amount >= 0.01 &&
         out.push({
@@ -298,7 +327,8 @@ function usageRows(h) {
     earlier('plan', 'Earlier this month, not per chat', Math.max(0, sum(plans.map((r) => r.calls)) - sum(h.entries.map((e) => e.own_plan_calls ?? 0))), sum(plans.map((r) => r.list_usd ?? 0)) - sum(h.entries.map((e) => e.own_plan_usd ?? 0)));
     earlier('credits', 'Earlier this month, not per chat', Math.max(0, sum(app.map((r) => r.calls)) -
         sum(h.entries.filter((e) => e.usd > (e.own_usd ?? 0)).map((e) => e.calls))), sum(app.map((r) => r.usd)) - sum(h.entries.map((e) => Math.max(0, e.usd - (e.own_usd ?? 0)))));
-    return out;
+    // The app's own calls are kept (and counted above, so no Earlier row takes them) but not shown.
+    return out.filter((r) => r.type !== 'internal');
 }
 /** A row's hover: its tokens (cache reads as a share of input) and what it cost, by who paid. */
 function UsageTip({ r, children }) {
@@ -319,7 +349,7 @@ function UsageTip({ r, children }) {
             ? [['Estimate (API rates)', money(r.plan)]]
             : []),
     ];
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { className: "max-w-72", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "truncate font-medium", children: r.title }), _jsx("dl", { className: "grid grid-cols-[auto_auto] gap-x-4 gap-y-0.5", children: lines.map(([k, v]) => (_jsxs(Fragment, { children: [_jsx("dt", { className: "opacity-75", children: k }), _jsx("dd", { className: "num text-right", children: v })] }, k))) }), !t && _jsx("span", { className: "opacity-75", children: "Spent before each chat kept its own count." })] }) })] }));
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { className: "max-w-72", children: _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("span", { className: "whitespace-normal break-words font-medium", children: r.title }), _jsx("dl", { className: "grid grid-cols-[auto_auto] gap-x-4 gap-y-0.5", children: lines.map(([k, v]) => (_jsxs(Fragment, { children: [_jsx("dt", { className: "opacity-75", children: k }), _jsx("dd", { className: "num text-right", children: v })] }, k))) }), !t && _jsx("span", { className: "opacity-75", children: "Spent before each chat kept its own count." })] }) })] }));
 }
 const dayOf = (at) => at ? new Date(at).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : EARLIER;
 const USAGE_FIELDS = [
@@ -328,6 +358,9 @@ const USAGE_FIELDS = [
         label: 'Session',
         icon: MessageSquareIcon,
         format: 'text',
+        // Names run long (a chat's first line): as wide as the table leaves after its other columns
+        // (the table's box is a size container), never under the usual name column.
+        maxWidth: 'max(12rem, calc(100cqw - 22rem))',
         value: (r) => r.title,
         render: (r) => (_jsx(UsageTip, { r: r, children: _jsx("span", { 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a keyboard reaches the row's hover
@@ -398,7 +431,7 @@ const GROUPS = [
     { id: 'date', label: 'Date', field: DAY_FIELD },
 ];
 /**
- * This month's use, one row a chat or run: its Type (the person's API key, their plan sign-in, or
+ * This month's use, one row a session (a chat, or every run of one task on one thing): its Type (the person's API key, their plan sign-in, or
  * the app's credits), Date, Calls and Amount, grouped by Type, Date or not at all, filtered by
  * type or name. A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the
  * same tokens at the model's API rates (the plan charges $0).
@@ -412,5 +445,5 @@ export function AssistantUsageTable({ client }) {
         return null;
     if (!q.data)
         return (_jsx("div", { className: "flex justify-center p-4", children: q.isError ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Usage didn't load. Try again later." })) : (_jsx(Spinner, {})) }));
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenTokenizedFilter, { filter: filter, label: "Filter usage", placeholder: "Filter: type, or a session name", className: "min-w-48 flex-1", link: null }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: group, "aria-label": "Group by", onValueChange: (v) => v && setGroup(v), children: GROUPS.map((g) => (_jsx(ToggleGroupItem, { value: g.id, "aria-label": `Group by ${g.label}`, children: g.label }, g.id))) })] }), _jsx(LumenTable, { domain: USAGE_DOMAIN, rows: filter.results, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, sort: { key: 'at', desc: true }, emptyState: rows.length ? undefined : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." })), onClearFilter: filter.clear }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Sign-in amounts are estimates: your ", PLAN_NAME, " charges $0, so the amount is what the same tokens would cost at the model's API rates. Key and credit amounts are what was charged."] })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenTokenizedFilter, { filter: filter, label: "Filter usage", placeholder: "Filter: type, or a session name", className: "min-w-48 flex-1", link: null }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: group, "aria-label": "Group by", onValueChange: (v) => v && setGroup(v), children: GROUPS.map((g) => (_jsx(ToggleGroupItem, { value: g.id, "aria-label": `Group by ${g.label}`, children: g.label }, g.id))) })] }), _jsx("div", { className: "@container min-w-0", children: _jsx(LumenTable, { domain: USAGE_DOMAIN, rows: filter.results, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, sort: { key: 'at', desc: true }, emptyState: rows.length ? undefined : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." })), onClearFilter: filter.clear }) }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Sign-in amounts are estimates: your ", PLAN_NAME, " charges $0, so the amount is what the same tokens would cost at the model's API rates. Key and credit amounts are what was charged."] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.259",
+  "version": "0.1.261",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.259",
+    "@columenlabs/lumen-ui-types": "0.1.261",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",