@columenlabs/lumen-ui 0.1.82 → 0.1.84

package/dist/assistant/client.d.ts

@@ -1,4 +1,4 @@
-import type { AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem } from '@columenlabs/lumen-ui-types/assistant';
+import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem } 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). */
@@ -36,6 +36,12 @@ export interface AssistantAdapter {
     settleDraft(chatId: string, draftId: string, action: 'save' | 'dismiss'): Promise<DraftItem>;
     /** Takes back a change the assistant made at once. */
     undoWrite(chatId: string, stepId: string): Promise<StepItem>;
+    /** Asks for more allowance on the shared keys (an app with `allowance`). */
+    requestMore?(amount: number, why: string): Promise<AssistantStatus>;
+    /** Approvers: every request, newest first. */
+    allowanceRequests?(): Promise<AllowanceRequest[]>;
+    /** Approvers: grants (the asked amount unless `amount` says) or declines a request. */
+    decideRequest?(id: string, action: 'grant' | 'decline', amount?: number): Promise<AllowanceRequest>;
 }
 /** The adapter over `assistantRoutes` mounted at `base` (`/api/assistant`). */
 export declare function assistantClient(base: string): AssistantAdapter;

package/dist/assistant/client.js

@@ -63,6 +63,12 @@ export function assistantClient(base) {
             action,
         }),
         undoWrite: (chatId, stepId) => send('POST', `/chats/${encodeURIComponent(chatId)}/writes/${encodeURIComponent(stepId)}/undo`),
+        requestMore: (amount, why) => send('POST', '/allowance/request', { amount, why }),
+        allowanceRequests: () => get('/allowance/requests'),
+        decideRequest: (id, action, amount) => send('POST', `/allowance/requests/${encodeURIComponent(id)}`, {
+            action,
+            ...(amount !== undefined ? { amount } : {}),
+        }),
         async send(msg, onEvent, signal) {
             const url = `${root}/chat`;
             const res = await fetch(url, {

package/dist/assistant/lumen-assistant.d.ts

@@ -1,4 +1,4 @@
-import type { AssistantMessage, AssistantRefNote, AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import type { AllowanceUnit, AssistantMessage, AssistantRefNote, AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
 import { type LumenOption } from '../lumen-selector.js';
 import type { AssistantAdapter } from './client.js';
 import { type AssistantSource } from './sources.js';
@@ -42,6 +42,8 @@ export interface AssistantCommand {
 }
 /** The assistant's chat: header, messages and composer. */
 export declare function LumenAssistant({ client, context, onSettings, keepDays, onClose, chat: outside, commands, sources, }: LumenAssistantProps): import("react").JSX.Element;
+/** An allowance in its unit: `$4.20`, or `350 credits`. */
+export declare const allowanceAmount: (u: AllowanceUnit, n: number) => string;
 /** What the composer sends with the text: the tier picked with `@` and the things pointed at with `#`. */
 export interface ComposerExtra {
     tier?: string;

package/dist/assistant/lumen-assistant.js

@@ -9,6 +9,7 @@ import { errorText } from '../integrations.js';
 import { cn } from '../lib/utils.js';
 import { LumenSelector, LumenSelectorList, } from '../lumen-selector.js';
 import { lumenToast } from '../lumen-toast.js';
+import { useOpenSettings } from '../shell.js';
 import { cardsOnScreen, kindName, pointAt, sectionsOnScreen, targetEl, textOf, } from '../spotlight.js';
 import { Alert, AlertDescription } from '../ui/alert.js';
 import { Button } from '../ui/button.js';
@@ -148,7 +149,18 @@ function Messages({ chat, status, onSettings, }) {
     useEffect(() => {
         end.current?.scrollIntoView({ block: 'end' });
     }, [count]);
-    return (_jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 py-3", children: [status?.wait && (_jsxs(Alert, { className: "mb-3", children: [_jsx(CircleAlertIcon, {}), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [WAIT[status.wait](status.admin, status.providers.find((p) => p.id === status.wait_provider)?.label ?? 'API'), onSettings && (_jsx(Button, { size: "sm", variant: "outline", onClick: onSettings, children: "Open Settings" }))] })] })), chat.loading ? (_jsxs("p", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Loading the chat\u2026"] })) : chat.items.length === 0 && !status?.wait ? (_jsxs("p", { className: "pt-8 text-center text-muted-foreground text-sm", children: ["Ask ", status?.name ?? 'the assistant', " anything."] })) : (_jsx(TierNames.Provider, { value: (id) => status?.tiers.find((t) => t.id === id)?.label ?? id, children: _jsx(UndoWrite.Provider, { value: chat.undo, children: _jsx(Items, { items: chat.items, onSettle: chat.settle, busy: chat.busy, turns: true }) }) })), chat.busy && !chat.items.some(isLive) && (_jsxs("p", { className: "flex items-center gap-2 py-1 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Thinking\u2026"] })), _jsx("div", { ref: end })] }));
+    // The app's own link to Settings, else the shell's, at the section that answers the wait.
+    const shellSettings = useOpenSettings();
+    const settings = onSettings ? (_section) => onSettings() : shellSettings;
+    return (_jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 py-3", children: [status?.wait && (_jsxs(Alert, { className: "mb-3", children: [_jsx(CircleAlertIcon, {}), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [status.wait === 'app_cap' && status.allowance
+                                ? allowanceWait(status.allowance)
+                                : WAIT[status.wait](status.admin, status.providers.find((p) => p.id === status.wait_provider)?.label ?? 'API'), settings && (_jsx(Button, { size: "sm", variant: "outline", onClick: () => settings(status.wait === 'app_cap' && status.allowance
+                                    ? 'assistant-allowance'
+                                    : 'assistant-providers'), children: status.wait === 'app_cap' &&
+                                    status.allowance &&
+                                    status.allowance.request?.status !== 'open'
+                                    ? 'Request more'
+                                    : 'Open Settings' }))] })] })), chat.loading ? (_jsxs("p", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Loading the chat\u2026"] })) : chat.items.length === 0 && !status?.wait ? (_jsxs("p", { className: "pt-8 text-center text-muted-foreground text-sm", children: ["Ask ", status?.name ?? 'the assistant', " anything."] })) : (_jsx(TierNames.Provider, { value: (id) => status?.tiers.find((t) => t.id === id)?.label ?? id, children: _jsx(UndoWrite.Provider, { value: chat.undo, children: _jsx(Items, { items: chat.items, onSettle: chat.settle, busy: chat.busy, turns: true }) }) })), chat.busy && !chat.items.some(isLive) && (_jsxs("p", { className: "flex items-center gap-2 py-1 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Thinking\u2026"] })), _jsx("div", { ref: end })] }));
 }
 const isLive = (i) => !!i.live || (i.kind === 'handoff' && i.items.some(isLive));
 const WAIT = {
@@ -158,6 +170,17 @@ const WAIT = {
     app_cap: () => "You reached this month's cap on the shared keys. Add your own key, or wait for next month.",
     own_cap: () => 'Your own keys reached their monthly cap. Raise it in Settings ▸ Model providers.',
 };
+/** An allowance in its unit: `$4.20`, or `350 credits`. */
+export const allowanceAmount = (u, n) => u.usd === 1 && u.many === 'dollars'
+    ? usd(n)
+    : `${n.toLocaleString()} ${n === 1 ? u.one : u.many}`;
+function allowanceWait(a) {
+    if (a.request?.status === 'open')
+        return `You used your allowance on the shared keys. Your request for ${allowanceAmount(a.unit, a.request.amount)} is waiting, or add your own key.`;
+    return a.period === 'once'
+        ? 'You used your allowance on the shared keys. Request more, or add your own key.'
+        : "You used this month's allowance on the shared keys. Request more, or add your own key.";
+}
 /** The assistant's name, for a copied turn's headings. */
 const AssistantName = createContext('Assistant');
 /** A tier's name for a message's `@` chip. */

package/dist/assistant/settings.d.ts

@@ -4,17 +4,21 @@ 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, }: {
+export declare function assistantAdminSections({ client, allowance, }: {
     client: AssistantAdapter;
+    /** Add Allowance requests (the app set `allowance` on the server). */
+    allowance?: boolean;
 }): SettingsSectionDef[];
 /**
  * The assistant's Settings sections: the assistant, then Model providers, Models, Tools, Web and
  * Spend under it. Pass them to LumenShell's `shared` (or an app's own `settings`).
  */
-export declare function assistantSettingsSections({ client, name, web, }: {
+export declare function assistantSettingsSections({ client, name, web, allowance, }: {
     client: AssistantAdapter;
     /** The assistant's name, the parent section's title. */
     name: string;
     /** Show the Web section (the app set up `web` on the server). */
     web?: boolean;
+    /** Show Allowance: what is left on the shared keys, and Request more (`allowance` on the server). */
+    allowance?: boolean;
 }): SettingsSectionDef[];

package/dist/assistant/settings.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useQueryClient } from '@tanstack/react-query';
-import { CheckIcon, ExternalLinkIcon, GlobeIcon, KeyRoundIcon, LayersIcon, ReceiptIcon, SparklesIcon, Trash2Icon, WrenchIcon, } from 'lucide-react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { CheckIcon, CoinsIcon, ExternalLinkIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, ReceiptIcon, SparklesIcon, Trash2Icon, WrenchIcon, } from 'lucide-react';
 import { useId, useState } from 'react';
+import { LumenChatgptSignin } from '../chatgpt-signin.js';
 import { LumenExpandList, LumenExpandRow } from '../expand-list.js';
 import { SaveButton } from '../form-issues.js';
 import { IconButton } from '../icon-button.js';
@@ -9,12 +10,14 @@ import { InfoLabel } from '../info-tip.js';
 import { KeyTestLine, TestBadge, errorText } from '../integrations.js';
 import { LumenSelector } from '../lumen-selector.js';
 import { lumenToast } from '../lumen-toast.js';
+import { ShareMeter } from '../share-meter.js';
 import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
 import { Input } from '../ui/input.js';
 import { Label } from '../ui/label.js';
 import { Switch } from '../ui/switch.js';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
-import { assistantStatusKey, usd, useAssistantStatus } from './lumen-assistant.js';
+import { allowanceAmount, assistantStatusKey, usd, useAssistantStatus } from './lumen-assistant.js';
 const EFFORTS = [
     { value: 'default', label: 'Model default' },
     { value: 'low', label: 'Low' },
@@ -128,50 +131,10 @@ function CapInput({ label, value, onSave, }) {
     };
     return (_jsxs("div", { className: "flex items-center gap-1 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "$" }), _jsx(Input, { "aria-label": label, inputMode: "decimal", className: "h-8 w-20 text-right tabular-nums", value: text, onChange: (e) => setText(e.target.value), onBlur: commit, onKeyDown: (e) => e.key === 'Enter' && commit() }), _jsx("span", { className: "text-muted-foreground", children: "/ month" })] }));
 }
-/** A person's ChatGPT plan sign-in: opens in a new tab, finished by pasting back where it ended. */
+/** A person's ChatGPT plan sign-in, on the assistant's own routes. */
 function ChatgptSignin({ client, p }) {
     const { apply, refresh } = useApply(client);
-    const id = useId();
-    const [started, setStarted] = useState(null);
-    const [pasted, setPasted] = useState('');
-    const [busy, setBusy] = useState(false);
-    const signedIn = p.own.via === 'chatgpt';
-    const start = async () => {
-        // Open the tab inside the click, or the browser blocks it; point it once the address is known.
-        const tab = window.open('about:blank', '_blank');
-        if (tab)
-            tab.opener = null;
-        try {
-            const { url, redirect } = await client.startSignin(p.id);
-            if (tab)
-                tab.location.href = url;
-            else
-                window.open(url, '_blank', 'noopener');
-            setStarted(redirect);
-        }
-        catch (e) {
-            tab?.close();
-            lumenToast.error(errorText(e));
-        }
-    };
-    const finish = async () => {
-        setBusy(true);
-        if (await apply(`signin:${p.id}`, () => client.finishSignin(p.id, pasted.trim()), 'Signed in')) {
-            setPasted('');
-            setStarted(null);
-        }
-        setBusy(false);
-    };
-    const issues = [];
-    if (pasted.trim() && started && !pasted.trim().startsWith(started.split('/auth')[0] ?? ''))
-        issues.push({ where: 'Address', message: `It starts with ${started}`, target: id });
-    if (signedIn)
-        return (_jsxs("div", { className: "flex flex-col gap-3 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 font-medium text-sm", children: "Your ChatGPT plan" }), _jsx("span", { className: "text-muted-foreground text-xs", children: p.own.hint }), p.own.test && _jsx(TestBadge, { test: p.own.test })] }), _jsx(KeyTestLine, { test: testOf(p.own), run: () => client.testOwnKey(p.id).finally(refresh) }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(IconButton, { icon: Trash2Icon, label: "Sign out of ChatGPT", variant: "outline", onClick: () => void apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Signed out') }), _jsx(SaveButton, { issues: [], icon: KeyRoundIcon, label: "Sign in again", onSave: start })] }), started && (_jsx(SigninPaste, { id: id, redirect: started, pasted: pasted, setPasted: setPasted, issues: issues, busy: busy, finish: finish }))] }));
-    return (_jsxs("div", { className: "flex flex-col gap-3 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(InfoLabel, { className: "flex-1 font-medium text-sm", info: "Run OpenAI models on your own ChatGPT plan instead of an API key.", children: "Your ChatGPT plan" }), _jsx(Badge, { variant: "outline", children: "Not signed in" })] }), _jsx("div", { className: "flex justify-end", children: _jsx(SaveButton, { issues: [], icon: ExternalLinkIcon, label: started ? 'Open the sign-in again' : 'Sign in with ChatGPT', onSave: start }) }), started && (_jsx(SigninPaste, { id: id, redirect: started, pasted: pasted, setPasted: setPasted, issues: issues, busy: busy, finish: finish }))] }));
-}
-/** Where the sign-in tab ends, and the box its address is pasted into. */
-function SigninPaste({ id, redirect, pasted, setPasted, issues, busy, finish, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: id, children: _jsx(InfoLabel, { info: `The sign-in ends on ${redirect}, a page that does not load. That is expected: copy the whole address from that tab's address bar.`, children: "Paste the address the sign-in ended on" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: id, autoComplete: "off", placeholder: `${redirect}?code=…`, className: "font-code text-xs", value: pasted, onChange: (e) => setPasted(e.target.value) }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !pasted.trim(), label: "Finish", onSave: finish })] })] }));
+    return (_jsx(LumenChatgptSignin, { state: p.own, start: () => client.startSignin(p.id), finish: (url) => apply(`signin:${p.id}`, () => client.finishSignin(p.id, url), 'Signed in'), signOut: () => apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Signed out'), test: () => client.testOwnKey(p.id).finally(refresh) }));
 }
 const ready = (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Ready"] }));
 const notSet = _jsx(Badge, { variant: "outline", children: "Not set" });
@@ -197,7 +160,7 @@ function SharedProviderKey({ client, p }) {
 /** Admins only: the app's shared keys and what each person may spend on them. */
 function SharedKeys({ client }) {
     const { apply } = useApply(client);
-    return (_jsx(WithStatus, { client: client, children: (s) => s.admin ? (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(SharedProviderKey, { client: client, p: p }, p.id))) }), _jsx(Row, { label: "Each person may spend", info: "A month on the shared keys, every provider together. Past it, a person's own key pays.", children: _jsx(CapInput, { label: "Allowance per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) })] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Only an admin can change these." })) }));
+    return (_jsx(WithStatus, { client: client, children: (s) => s.admin ? (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(SharedProviderKey, { client: client, p: p }, p.id))) }), s.allowance?.period !== 'once' && (_jsx(Row, { label: "Each person may spend", info: "A month on the shared keys, every provider together. Past it, a person's own key pays.", children: _jsx(CapInput, { label: "Allowance per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) }))] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Only an admin can change these." })) }));
 }
 // ---------------------------------------------------------------- models
 function Models({ client }) {
@@ -264,11 +227,97 @@ function Spend({ client }) {
                                         ` · ${usd(sp.cap)} cap on ${sp.payer === 'app' ? 'the app key' : 'your key'}`] })] }), sp.rows.length ? (_jsx("div", { className: "flex flex-col text-sm", children: sp.rows.map((r) => (_jsxs("div", { className: "flex items-center gap-2 border-b py-2 last:border-b-0", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: r.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: r.payer === 'app' ? 'Shared key' : 'Your key' }), _jsxs("span", { className: "w-16 text-right text-muted-foreground text-xs tabular-nums", children: [r.calls, " calls"] }), _jsx("span", { className: "w-16 text-right tabular-nums", children: usd(r.usd) })] }, `${r.label}:${r.payer}`))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing spent this month." }))] }));
         } }));
 }
+// ---------------------------------------------------------------- allowance
+const day = (at) => new Date(at).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+function RequestBadge({ r }) {
+    if (r.status === 'open')
+        return _jsx(Badge, { variant: "outline", children: "Waiting" });
+    if (r.status === 'granted')
+        return _jsx(Badge, { variant: "secondary", children: "Granted" });
+    return _jsx(Badge, { variant: "outline", children: "Declined" });
+}
+/** A person's allowance on the shared keys, their newest request and Request more. */
+function Allowance({ client }) {
+    const { apply, busy } = useApply(client);
+    const [amount, setAmount] = useState('');
+    const [why, setWhy] = useState('');
+    const whyId = useId();
+    return (_jsx(WithStatus, { client: client, children: (s) => {
+            const a = s.allowance;
+            const requestMore = client.requestMore;
+            if (!a || !requestMore)
+                return _jsx("p", { className: "text-muted-foreground text-sm", children: "This app sets no allowance." });
+            const n = (x) => allowanceAmount(a.unit, x);
+            const r = a.request;
+            const pick = amount || String(a.amounts[0] ?? '');
+            const issues = [
+                ...(pick ? [] : [{ where: 'Amount', message: 'Pick how much to ask for' }]),
+                ...(why.trim()
+                    ? []
+                    : [{ where: 'What for', message: 'Say what it is for', target: whyId }]),
+            ];
+            const ask = () => void apply('request', () => requestMore(Number(pick), why.trim()), 'Request sent').then((ok) => ok && setWhy(''));
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-2 border-b pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-semibold text-2xl tabular-nums", children: n(a.left) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: ["left of ", n(a.total), a.period === 'month' ? ' this month' : ''] })] }), _jsx(ShareMeter, { value: a.total > 0 ? a.used / a.total : 1, wide: true })] }), r && (_jsx(Row, { label: `Asked for ${n(r.amount)} · ${day(r.at)}`, info: r.why || undefined, children: _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [r.status === 'granted' && r.granted !== undefined && (_jsxs("span", { className: "tabular-nums", children: ["+", n(r.granted)] })), _jsx(RequestBadge, { r: r })] }) })), r?.status === 'open' ? (_jsx("p", { className: "pt-3 text-muted-foreground text-sm", children: "You can ask again once this one is decided." })) : (_jsxs("div", { className: "flex flex-col gap-2 pt-3", children: [_jsx(Input, { id: whyId, "aria-label": "What for", placeholder: "What it is for", className: "h-8 w-full", maxLength: 500, value: why, onChange: (e) => setWhy(e.target.value) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenSelector, { label: "Amount", size: "sm", className: "w-40", value: pick, options: a.amounts.map((x) => ({ value: String(x), label: n(x) })), onChange: (v) => setAmount(v) }), _jsx(SaveButton, { issues: issues, label: "Request more", icon: null, busy: busy === 'request', onSave: ask })] })] }))] }));
+        } }));
+}
+/** One request, opened in place to grant (any amount) or decline. */
+function RequestRow({ client, r, n, onDone, }) {
+    const [text, setText] = useState(String(r.amount));
+    const [busy, setBusy] = useState(null);
+    const amountId = useId();
+    const value = Number(text);
+    const decide = async (action) => {
+        if (!client.decideRequest)
+            return;
+        setBusy(action);
+        try {
+            await client.decideRequest(r.id, action, action === 'grant' ? value : undefined);
+            lumenToast.success(action === 'grant' ? `Granted ${n(value)}` : 'Declined');
+            onDone();
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const issues = Number.isFinite(value) && value > 0
+        ? []
+        : [{ where: 'Grant', message: 'Grant more than 0', target: amountId }];
+    return (_jsx(LumenExpandRow, { id: r.id, name: r.who, meta: `${n(r.amount)} · ${day(r.at)}`, badge: _jsx(RequestBadge, { r: r }), children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsx("p", { className: "whitespace-pre-wrap", children: r.why || 'No reason given.' }), r.status === 'open' ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Input, { id: amountId, "aria-label": "Grant", inputMode: "decimal", className: "h-8 w-24 text-right tabular-nums", value: text, onChange: (e) => setText(e.target.value) }), _jsx(SaveButton, { issues: issues, label: "Grant", busy: busy === 'grant', onSave: () => void decide('grant') }), _jsx(Button, { size: "sm", variant: "outline", disabled: !!busy, onClick: () => void decide('decline'), children: "Decline" })] })) : (_jsxs("p", { className: "text-muted-foreground", children: [r.status === 'granted' ? `Granted ${n(r.granted ?? r.amount)}` : 'Declined', r.decided_by ? ` by ${r.decided_by}` : '', r.decided_at ? ` · ${day(r.decided_at)}` : ''] }))] }) }));
+}
+/** Approvers: every request for more allowance, open ones first. */
+function AllowanceRequests({ client }) {
+    const qc = useQueryClient();
+    const key = [...assistantStatusKey(client), 'allowance-requests'];
+    const q = useQuery({
+        queryKey: key,
+        queryFn: () => client.allowanceRequests?.() ?? Promise.resolve([]),
+        enabled: !!client.allowanceRequests,
+    });
+    return (_jsx(WithStatus, { client: client, children: (s) => {
+            const a = s.allowance;
+            if (!a || !client.allowanceRequests)
+                return _jsx("p", { className: "text-muted-foreground text-sm", children: "This app sets no allowance." });
+            if (!a.approver)
+                return _jsx("p", { className: "text-muted-foreground text-sm", children: "Only an approver can see these." });
+            if (!q.data)
+                return (_jsx("p", { className: "text-muted-foreground text-sm", children: q.isError ? errorText(q.error) : 'Loading…' }));
+            if (!q.data.length)
+                return _jsx("p", { className: "text-muted-foreground text-sm", children: "No requests yet." });
+            const rows = [...q.data].sort((x, y) => Number(y.status === 'open') - Number(x.status === 'open') || y.at - x.at);
+            const done = () => {
+                void qc.invalidateQueries({ queryKey: assistantStatusKey(client) });
+            };
+            return (_jsx(LumenExpandList, { children: rows.map((r) => (_jsx(RequestRow, { client: client, r: r, n: (x) => allowanceAmount(a.unit, x), onDone: done }, r.id))) }));
+        } }));
+}
 /**
  * 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, }) {
+export function assistantAdminSections({ client, allowance = false, }) {
     return [
         {
             id: 'assistant-shared-keys',
@@ -277,13 +326,24 @@ export function assistantAdminSections({ client, }) {
             description: "Keys everyone's answers run on, and the allowance",
             content: _jsx(SharedKeys, { client: client }),
         },
+        ...(allowance
+            ? [
+                {
+                    id: 'assistant-allowance-requests',
+                    title: 'Allowance requests',
+                    icon: InboxIcon,
+                    description: 'Grant or decline asks for more allowance',
+                    content: _jsx(AllowanceRequests, { client: client }),
+                },
+            ]
+            : []),
     ];
 }
 /**
  * The assistant's Settings sections: the assistant, then Model providers, Models, Tools, Web and
  * Spend under it. Pass them to LumenShell's `shared` (or an app's own `settings`).
  */
-export function assistantSettingsSections({ client, name, web = true, }) {
+export function assistantSettingsSections({ client, name, web = true, allowance = false, }) {
     return [
         {
             id: 'assistant',
@@ -336,5 +396,17 @@ export function assistantSettingsSections({ client, name, web = true, }) {
             description: 'What answers cost this month',
             content: _jsx(Spend, { client: client }),
         },
+        ...(allowance
+            ? [
+                {
+                    id: 'assistant-allowance',
+                    title: 'Allowance',
+                    icon: CoinsIcon,
+                    sub: true,
+                    description: 'What is left on the shared keys, and Request more',
+                    content: _jsx(Allowance, { client: client }),
+                },
+            ]
+            : []),
     ];
 }

package/dist/chatgpt-signin.d.ts

@@ -0,0 +1,18 @@
+import type { KeyState } from '@columenlabs/lumen-ui-types/assistant';
+export interface LumenChatgptSigninProps {
+    /** The person's key state: signed in when `via` is `chatgpt`, `hint` the account's email. */
+    state: KeyState;
+    /** Starts a sign-in on the server: the address to open and the one it ends on. */
+    start: () => Promise<{
+        url: string;
+        redirect: string;
+    }>;
+    /** Finishes it from the pasted address; true once kept (the app says why when it is not). */
+    finish: (url: string) => Promise<boolean>;
+    /** Signs out (drops the sealed tokens). */
+    signOut: () => Promise<unknown>;
+    /** One free call that says whether the sign-in still works; the app refreshes its data after. */
+    test: () => Promise<unknown>;
+}
+/** Sign in with ChatGPT: opens in a new tab, finished by pasting back where it ended. */
+export declare function LumenChatgptSignin({ state, start, finish, signOut, test, }: LumenChatgptSigninProps): import("react").JSX.Element;

package/dist/chatgpt-signin.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon, KeyRoundIcon, Trash2Icon } from 'lucide-react';
+import { useId, useState } from 'react';
+import { SaveButton } from './form-issues.js';
+import { IconButton } from './icon-button.js';
+import { InfoLabel } from './info-tip.js';
+import { KeyTestLine, TestBadge, errorText } from './integrations.js';
+import { lumenToast } from './lumen-toast.js';
+import { Badge } from './ui/badge.js';
+import { Input } from './ui/input.js';
+import { Label } from './ui/label.js';
+const testOf = (k) => k.test
+    ? {
+        at: new Date(k.test.at).toISOString(),
+        ok: k.test.ok,
+        detail: k.test.detail,
+        error: k.test.ok ? null : k.test.detail,
+    }
+    : null;
+/** Sign in with ChatGPT: opens in a new tab, finished by pasting back where it ended. */
+export function LumenChatgptSignin({ state, start, finish, signOut, test, }) {
+    const id = useId();
+    const [started, setStarted] = useState(null);
+    const [pasted, setPasted] = useState('');
+    const [busy, setBusy] = useState(false);
+    const signedIn = state.via === 'chatgpt';
+    const open = async () => {
+        // Open the tab inside the click, or the browser blocks it; point it once the address is known.
+        const tab = window.open('about:blank', '_blank');
+        if (tab)
+            tab.opener = null;
+        try {
+            const { url, redirect } = await start();
+            if (tab)
+                tab.location.href = url;
+            else
+                window.open(url, '_blank', 'noopener');
+            setStarted(redirect);
+        }
+        catch (e) {
+            tab?.close();
+            lumenToast.error(errorText(e));
+        }
+    };
+    const done = async () => {
+        setBusy(true);
+        if (await finish(pasted.trim())) {
+            setPasted('');
+            setStarted(null);
+        }
+        setBusy(false);
+    };
+    const issues = [];
+    if (pasted.trim() && started && !pasted.trim().startsWith(started.split('/auth')[0] ?? ''))
+        issues.push({ where: 'Address', message: `It starts with ${started}`, target: id });
+    const paste = started && (_jsx(SigninPaste, { id: id, redirect: started, pasted: pasted, setPasted: setPasted, issues: issues, busy: busy, finish: done }));
+    if (signedIn)
+        return (_jsxs("div", { className: "flex flex-col gap-3 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 font-medium text-sm", children: "Your ChatGPT plan" }), _jsx("span", { className: "text-muted-foreground text-xs", children: state.hint }), state.test && _jsx(TestBadge, { test: state.test })] }), _jsx(KeyTestLine, { test: testOf(state), run: test }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(IconButton, { icon: Trash2Icon, label: "Sign out of ChatGPT", variant: "outline", onClick: () => void signOut() }), _jsx(SaveButton, { issues: [], icon: KeyRoundIcon, label: "Sign in again", onSave: open })] }), paste] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(InfoLabel, { className: "flex-1 font-medium text-sm", info: "Run OpenAI models on your own ChatGPT plan instead of an API key.", children: "Your ChatGPT plan" }), _jsx(Badge, { variant: "outline", children: "Not signed in" })] }), _jsx("div", { className: "flex justify-end", children: _jsx(SaveButton, { issues: [], icon: ExternalLinkIcon, label: started ? 'Open the sign-in again' : 'Sign in with ChatGPT', onSave: open }) }), paste] }));
+}
+/** Where the sign-in tab ends, and the box its address is pasted into. */
+function SigninPaste({ id, redirect, pasted, setPasted, issues, busy, finish, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: id, children: _jsx(InfoLabel, { info: `The sign-in ends on ${redirect}, a page that does not load. That is expected: copy the whole address from that tab's address bar.`, children: "Paste the address the sign-in ended on" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: id, autoComplete: "off", placeholder: `${redirect}?code=…`, className: "font-code text-xs", value: pasted, onChange: (e) => setPasted(e.target.value) }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !pasted.trim(), label: "Finish", onSave: finish })] })] }));
+}

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { type Crumb, IconButton, type IconButtonProps, Page, PageBody, PageHeade
 export { DEFAULT_PREFS, deviceTimeZone, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, type KitConfig, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestResult, TestBadge, errorText, useClock, } from './integrations.js';
+export { LumenChatgptSignin, type LumenChatgptSigninProps } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';

package/dist/index.js

@@ -56,6 +56,7 @@ export { IconButton, Page, PageBody, PageHeader, } from './page.js';
 export { DEFAULT_PREFS, deviceTimeZone, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, errorText, useClock, } from './integrations.js';
+export { LumenChatgptSignin } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';

package/dist/shell.d.ts

@@ -21,6 +21,8 @@ interface ShellContext {
     headerActions: ReactNode;
 }
 export declare function useShell(): ShellContext;
+/** Opens Settings at a section, or null outside a shell (a preview). */
+export declare function useOpenSettings(): ShellContext['openSettings'] | null;
 /** The app this page renders in, or null outside a shell (a preview). */
 export declare function useApp(): {
     id: string;

package/dist/shell.js

@@ -27,6 +27,10 @@ export function useShell() {
         throw new Error('useShell must be used inside <LumenShell>.');
     return c;
 }
+/** Opens Settings at a section, or null outside a shell (a preview). */
+export function useOpenSettings() {
+    return useContext(Ctx)?.openSettings ?? null;
+}
 /** The app this page renders in, or null outside a shell (a preview). */
 export function useApp() {
     const c = useContext(Ctx);

package/package.json

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