@columenlabs/lumen-ui 0.1.259 → 0.1.260

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.259",
+  "version": "0.1.260",
   "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.260",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",