@hanzo/build 0.2.10 → 0.2.12

package/lib/settings/integrations.d.ts

@@ -0,0 +1 @@
+export declare function Integrations(): import("react").JSX.Element;

package/lib/settings/integrations.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Integrations: your own GitHub connection, the GitHub accounts the
+ * organization has installed the platform's App on, and its Slack workspace.
+ *
+ * Connecting leaves this page once, for GitHub's or Slack's own consent screen.
+ * Anyone connects their own GitHub; installing the App and connecting Slack are
+ * an org admin's, which is the platform's rule.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Github, Hash, Lock, Slack } from '@hanzogui/lucide-icons-2';
+import { Button } from '@hanzo/ui';
+import { useState } from 'react';
+import { connect, connection, disconnect as unlinkGithub, installations } from '../api/github.js';
+import { authorize, channels, disconnect, read } from '../api/provider.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
+export function Integrations() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const mine = useRead(signed ? () => connection(t) : null, null, [t, signed]);
+    const installed = useRead(signed ? () => installations(t) : null, [], [t, signed]);
+    const slack = useRead(signed ? () => read(t, 'slack') : null, null, [t, signed]);
+    const joined = slack.value?.connected ?? false;
+    const rooms = useRead(signed && joined ? () => channels(t) : null, { channels: [], next: '' }, [t, signed, joined]);
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Integrations" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s integrations." })] }));
+    }
+    const act = async (what, done, after) => {
+        setWorking(true);
+        setNote('');
+        try {
+            await what();
+            after();
+            setNote(done);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    /** Off to the provider's consent page; it is the one hop away from this page. */
+    const away = async (where) => {
+        setWorking(true);
+        setNote('');
+        try {
+            host.open(await where());
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The connection did not start');
+            setWorking(false);
+        }
+    };
+    const me = mine.value;
+    const s = slack.value;
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Integrations", detail: `What ${host.org ?? 'this organization'} and you have connected.` }), _jsxs(Group, { title: "GitHub", detail: "Your connection brings your repositories; the App brings an account\u2019s to the organization.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Github, { size: 16 }), title: "Your GitHub", detail: mine.error
+                                    ? mine.error.message
+                                    : !me
+                                        ? 'Reading…'
+                                        : !me.configured
+                                            ? 'This deployment cannot connect GitHub yet.'
+                                            : me.connected
+                                                ? `Connected as @${me.login}`
+                                                : 'Not connected', trailing: me?.configured ? (me.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => unlinkGithub(t), 'Your GitHub is disconnected', mine.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => connect(t)), children: "Connect" }))) : null }), installed.error ? (_jsx(Row, { title: "App installations", detail: installed.error.message })) : (installed.value.map((i) => (_jsx(Row, { leading: _jsx(Github, { size: 16 }), title: i.login, detail: [i.type, i.grant === 'all' ? 'every repository' : i.grant === 'selected' ? 'selected repositories' : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: i.connected ? '$ink' : '$soft', children: i.connected ? 'Installed' : 'Removed on GitHub' }) }, i.login)))), !installed.error && !installed.loading && installed.value.length === 0 ? (_jsx(Row, { title: "No GitHub accounts installed", detail: "Install the App on a GitHub account to bring its repositories here." })) : null] }), host.admin ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'github')), children: "Install on a GitHub account" }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin installs the App on a GitHub account." }))] }), _jsxs(Group, { title: "Slack", detail: "Talk to Hanzo from your workspace\u2019s channels.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Slack, { size: 16 }), title: s?.connected && s.account ? s.account : 'Slack', detail: slack.error
+                                    ? slack.error.message
+                                    : !s
+                                        ? 'Reading…'
+                                        : s.connected
+                                            ? `Connected${s.since ? ` since ${day(s.since)}` : ''}`
+                                            : s.available
+                                                ? 'Not connected'
+                                                : s.note || 'This deployment cannot connect Slack yet.', trailing: host.admin && s && (s.connected || s.available) ? (s.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(t, 'slack'), 'Slack is disconnected', slack.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'slack')), children: "Connect" }))) : null }), joined && rooms.error ? _jsx(Row, { title: "Channels", detail: rooms.error.message }) : null, joined
+                                ? rooms.value.channels.map((c) => (_jsx(Row, { leading: c.private ? _jsx(Lock, { size: 14 }) : _jsx(Hash, { size: 14 }), title: c.name || c.id, trailing: _jsx(SizableText, { size: "$1", color: c.member ? '$ink' : '$soft', children: c.member ? 'Joined' : 'Not joined' }) }, c.id)))
+                                : null] }), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin connects the Slack workspace." })) : null] }), _jsx(Note, { children: note })] }));
+}

package/lib/settings/keys.d.ts

@@ -0,0 +1 @@
+export declare function Keys(): import("react").JSX.Element;

package/lib/settings/keys.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * API keys: your own keys for calling the Hanzo API from code — one secret key
+ * for a server, one publishable key for a page's source. Creating one ends the
+ * one before it, and a secret key is shown once, when it is made. A limit
+ * narrows what a key reaches; it never reaches further than you do.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
+import { CopyButton } from '@hanzo/ui/product';
+import { useState } from 'react';
+import { keys, KINDS, limits, mint, revoke } from '../api/keys.js';
+import { Confirm } from '../ask.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, Field, Heading, Note, Once, Row, Soft } from './ui.js';
+const NAME = { secret: 'Secret key', publishable: 'Publishable key' };
+const FOR = {
+    secret: 'For a server. It acts as you, so it never goes in a page.',
+    publishable: 'Safe in a page’s source.',
+};
+/** The line under a key: what it is for, how it starts, what it reaches, when it was made. */
+function about(type, k) {
+    if (!k)
+        return `${FOR[type]} None yet.`;
+    const when = k.created ? new Date(k.created) : null;
+    return [
+        type === 'secret' && k.prefix ? `${k.prefix}…` : '',
+        k.limit.length ? `Reaches ${k.limit.join(', ')}` : 'Unrestricted',
+        when && !Number.isNaN(when.getTime()) ? `Created ${when.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}` : '',
+    ]
+        .filter(Boolean)
+        .join(' · ');
+}
+export function Keys() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(signed ? () => keys(t) : null, [], [t, signed]);
+    const [making, setMaking] = useState(null);
+    const [revoking, setRevoking] = useState(null);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "API keys" }), _jsx(Soft, { children: "Sign in to see your API keys." })] }));
+    }
+    const held = (type) => list.value.find((k) => k.type === type);
+    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "API keys", detail: "Your own keys for calling api.hanzo.ai from code. You hold one of each; creating one ends the one before it." }), list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && list.value.length === 0 ? (_jsx(Soft, { children: "Reading your keys\u2026" })) : (_jsx(Card, { children: KINDS.map((type, i) => {
+                    const k = held(type);
+                    return (_jsxs(YStack, { borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Row, { first: true, title: NAME[type], detail: about(type, k), trailing: _jsxs(XStack, { gap: "$1.5", shrink: 0, children: [k ? (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Revoke the ${type} key`, onPress: () => setRevoking(type), children: "Revoke" })) : null, _jsx(Button, { size: "sm", variant: "outline", "aria-label": `${k ? 'Rotate' : 'Create'} the ${type} key`, onPress: () => setMaking(type), children: k ? 'Rotate' : 'Create' })] }) }), type === 'publishable' && k?.key ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", pb: "$2.5", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, "aria-label": "Publishable key", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: k.key }), _jsx(CopyButton, { value: k.key, label: "Copy publishable key" })] })) : null] }, type));
+                }) })), _jsx(Note, { children: note }), _jsx(Making, { type: making, rotating: making ? Boolean(held(making)) : false, onClose: () => setMaking(null), onMade: (m) => {
+                    setNote(`${NAME[m.type]} created`);
+                    list.reload();
+                } }), _jsx(Confirm, { open: revoking !== null, onOpenChange: (o) => !o && setRevoking(null), title: `Revoke your ${revoking ?? 'secret'} key?`, says: "It stops working within a minute, and anything using it is refused until it has a new one.", act: "Revoke", run: async () => {
+                    if (!revoking)
+                        return;
+                    await revoke(t, revoking);
+                    setNote(`${NAME[revoking]} revoked`);
+                    list.reload();
+                } })] }));
+}
+/** Creating or rotating one key: an optional limit, then the key itself, once. */
+function Making({ type, rotating, onClose, onMade }) {
+    const t = useTarget();
+    const [limit, setLimit] = useState('');
+    const [made, setMade] = useState(null);
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const close = () => {
+        if (working)
+            return;
+        setLimit('');
+        setMade(null);
+        setNote('');
+        onClose();
+    };
+    const go = async () => {
+        if (!type)
+            return;
+        setNote('');
+        let list;
+        try {
+            list = limits(limit);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That is not a limit');
+            return;
+        }
+        setWorking(true);
+        try {
+            const m = await mint(t, type, list);
+            setMade(m);
+            onMade(m);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    return (_jsx(Dialog, { open: type !== null, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsx(DialogTitle, { children: made ? `Your new ${made.type} key` : `${rotating ? 'Rotate' : 'Create'} your ${type ?? ''} key` }), made ? (_jsxs(YStack, { gap: "$3", children: [made.type === 'secret' ? (_jsx(Once, { value: made.key, label: "Secret key" })) : (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)', wordBreak: 'break-all' }, children: made.key }), _jsx(CopyButton, { value: made.key, label: "Copy publishable key" })] })), made.limit.length ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["It reaches ", made.limit.join(', '), " and nothing else."] })) : null, _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", onPress: close, children: "Done" }) })] })) : (_jsxs(YStack, { gap: "$3", children: [rotating ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: ["The ", type, " key you have now stops working."] })) : null, _jsx(Field, { label: "Limit", hint: "Optional. What it may reach, as kind:name \u2014 model:zen5, project:acme, product:commerce. Empty reaches whatever you do.", children: _jsx(Input, { value: limit, onChangeText: setLimit, placeholder: "model:zen5, project:acme", "aria-label": "Limit", autoCapitalize: "none" }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void go(), children: rotating ? 'Rotate' : 'Create' })] })] }))] }) }));
+}

package/lib/settings/machines.d.ts

@@ -0,0 +1 @@
+export declare function Machines(): import("react").JSX.Element;

package/lib/settings/machines.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Machines: the organization's own computers a run can be sent to, beside the
+ * Hanzo sandbox. `hanzo link` run on a machine registers it under its hostname
+ * and keeps it online while it runs; one can also be registered here by hand.
+ * The member who linked a machine, or an org admin, renames it, drains it,
+ * mints its claim key or removes it.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { MoreHorizontal, Plus } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
+import { CopyButton } from '@hanzo/ui/product';
+import { useState } from 'react';
+import { add, change, KINDS, key, machines, remove } from '../api/machines.js';
+import { Confirm, Rename } from '../ask.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, Field, Group, Heading, Note, Once, Row, Soft } from './ui.js';
+const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
+/** What `hanzo link` needs, in the order it is typed on the machine. */
+const LINK = ['hanzo login', 'hanzo link'].join('\n');
+/** The line under a machine: what it is, where, how big, and what it is doing. */
+function about(m) {
+    const load = m.running ? `${m.running} running` : m.sessions ? `${m.sessions} runs` : '';
+    return [m.status || 'unknown', m.kind, m.host && m.host !== m.label ? m.host : '', m.capacity, load].filter(Boolean).join(' · ');
+}
+function Dot({ status }) {
+    const on = status === 'online';
+    return (_jsx(YStack, { width: 8, height: 8, rounded: 999, shrink: 0, bg: on ? '$green10' : 'transparent', borderWidth: on ? 0 : 1, borderColor: status === 'draining' ? '$yellow10' : '$soft', "aria-hidden": true }));
+}
+export function Machines() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(signed ? () => machines(t) : null, [], [t, signed]);
+    const [adding, setAdding] = useState(false);
+    const [renaming, setRenaming] = useState(null);
+    const [removing, setRemoving] = useState(null);
+    const [keying, setKeying] = useState(null);
+    const [minted, setMinted] = useState(null);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Machines" }), _jsx(Soft, { children: "Sign in to see your organization\u2019s machines." })] }));
+    }
+    const drain = async (m, status) => {
+        setNote('');
+        try {
+            await change(t, m.id, { status });
+            setNote(status === 'draining' ? `${m.label} takes no new runs` : `${m.label} takes runs again`);
+            list.reload();
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+    };
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Machines", detail: "Your organization\u2019s own computers. A run sent to one runs there instead of in the Hanzo sandbox." }), _jsxs(Group, { title: "Link a machine", detail: "Run these on it. It registers under its hostname, and stays online while hanzo link runs.", children: [_jsxs(XStack, { items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": "Link commands", style: { ...mono, whiteSpace: 'pre-wrap' }, children: LINK }), _jsx(CopyButton, { value: LINK, label: "Copy the commands" })] }), _jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }) })] }), _jsx(Group, { title: "Linked", children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && list.value.length === 0 ? (_jsx(Soft, { children: "Reading machines\u2026" })) : list.value.length === 0 ? (_jsx(Soft, { children: "No machine is linked yet." })) : (_jsx(Card, { children: list.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(Dot, { status: m.status }), title: m.label, detail: about(m), trailing: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${m.label}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
+                                { key: 'rename', label: 'Rename', onSelect: () => setRenaming(m) },
+                                m.status === 'draining'
+                                    ? { key: 'online', label: 'Take runs again', onSelect: () => void drain(m, 'online') }
+                                    : { key: 'drain', label: 'Drain', description: 'Finish what it has, take nothing new', onSelect: () => void drain(m, 'draining') },
+                                { key: 'key', label: 'Claim key', onSelect: () => setKeying(m) },
+                                { type: 'separator' },
+                                { key: 'remove', label: 'Remove', destructive: true, onSelect: () => setRemoving(m) },
+                            ] }) }, m.id))) })) }), _jsx(Note, { children: note }), _jsx(Adding, { open: adding, onOpenChange: setAdding, onAdded: (m) => {
+                    setNote(`${m.label} is registered`);
+                    list.reload();
+                } }), _jsx(Rename, { open: renaming !== null, onOpenChange: (o) => !o && setRenaming(null), title: "Rename machine", name: renaming?.label ?? '', run: async (label) => {
+                    if (!renaming)
+                        return;
+                    await change(t, renaming.id, { label });
+                    setNote(`Renamed to ${label}`);
+                    list.reload();
+                } }), _jsx(Confirm, { open: removing !== null, onOpenChange: (o) => !o && setRemoving(null), title: `Remove ${removing?.label ?? 'this machine'}?`, says: "Runs can no longer be sent to it, and its claim key stops working. Linking it again registers it anew.", act: "Remove", run: async () => {
+                    if (!removing)
+                        return;
+                    await remove(t, removing.id);
+                    setNote(`${removing.label} is removed`);
+                    list.reload();
+                } }), _jsx(Confirm, { open: keying !== null, onOpenChange: (o) => !o && setKeying(null), title: `Mint a claim key for ${keying?.label ?? 'this machine'}?`, says: "A key it had before stops working, so a runner using it stops getting runs until it has the new one. The new key is shown once.", act: "Mint key", run: async () => {
+                    if (!keying)
+                        return;
+                    const k = await key(t, keying.id);
+                    setMinted({ machine: keying, key: k });
+                } }), _jsx(Dialog, { open: minted !== null, onOpenChange: (o) => !o && setMinted(null), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(DialogTitle, { children: ["Claim key for ", minted?.machine.label ?? ''] }), minted ? (_jsx(Once, { value: minted.key, label: "Claim key", children: _jsxs(SizableText, { size: "$1", color: "$soft", children: ["A runner on this machine sends it as X-Target-Key when it claims the runs sent here, at POST /v1/agent/targets/", minted.machine.id, "/claim."] }) })) : null, _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", onPress: () => setMinted(null), children: "Done" }) })] }) })] }));
+}
+/** Registering a machine by hand: its name, what it is, and the hostname its runs report. */
+function Adding({ open, onOpenChange, onAdded }) {
+    const t = useTarget();
+    const [label, setLabel] = useState('');
+    const [kind, setKind] = useState('machine');
+    const [hostname, setHostname] = useState('');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const close = () => {
+        if (working)
+            return;
+        setLabel('');
+        setKind('machine');
+        setHostname('');
+        setNote('');
+        onOpenChange(false);
+    };
+    const save = async () => {
+        setWorking(true);
+        setNote('');
+        try {
+            const m = await add(t, { label, kind, host: hostname });
+            setWorking(false);
+            onAdded(m);
+            close();
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+            setWorking(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 440, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Register a machine" }), _jsxs(YStack, { gap: "$3", children: [_jsx(Field, { label: "Name", children: _jsx(Input, { value: label, onChangeText: setLabel, placeholder: "workshop", "aria-label": "Machine name", autoFocus: true }) }), _jsx(Field, { label: "Kind", children: _jsx(XStack, { flexWrap: "wrap", gap: "$1.5", role: "radiogroup", "aria-label": "Kind", children: KINDS.map((k) => (_jsx(XStack, { render: "button", role: "radio", "aria-checked": k === kind, "aria-label": k, onPress: () => setKind(k), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: k === kind ? '$ink' : '$borderColor', children: _jsx(SizableText, { size: "$1", color: k === kind ? '$ink' : '$soft', children: k }) }, k))) }) }), _jsx(Field, { label: "Hostname", hint: "Optional. What its runs report. hanzo link, signed in as you on a machine with this hostname, takes this row over.", children: _jsx(Input, { value: hostname, onChangeText: setHostname, placeholder: "gpu-01", "aria-label": "Hostname", autoCapitalize: "none" }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Register" })] })] })] }) }));
+}

package/lib/settings/members.d.ts

@@ -0,0 +1 @@
+export declare function Members(): import("react").JSX.Element;

package/lib/settings/members.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Members: who is in the organization and in what role, and — for an org admin —
+ * who has been invited, inviting someone by email, and withdrawing an invitation.
+ * IAM holds both lists and decides who may read and write them.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { UserPlus } from '@hanzogui/lucide-icons-2';
+import { Button, Input } from '@hanzo/ui';
+import { useState } from 'react';
+import { EMAIL, invitations, invite, revoke, roster } from '../api/members.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
+const ROLE = { owner: 'Owner', admin: 'Admin', member: 'Member' };
+function Initial({ name }) {
+    return (_jsx(YStack, { width: 28, height: 28, rounded: 999, bg: "$raised", items: "center", justify: "center", shrink: 0, children: _jsx(SizableText, { size: "$2", color: "$ink", children: (name || '?').charAt(0).toUpperCase() }) }));
+}
+export function Members() {
+    const host = useHost();
+    const t = useTarget();
+    const org = host.org ?? '';
+    const signed = Boolean(host.person && org);
+    const people = useRead(signed ? () => roster(t, org) : null, [], [t, org, signed]);
+    const asked = useRead(signed && host.admin ? () => invitations(t, org) : null, [], [t, org, signed, host.admin]);
+    const [email, setEmail] = useState('');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Members" }), _jsx(Soft, { children: host.person ? 'Choose an organization to see its members.' : 'Sign in to see this organization’s members.' })] }));
+    }
+    const act = async (what, done, after) => {
+        setWorking(true);
+        setNote('');
+        try {
+            await what();
+            after();
+            setNote(done);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    const send = () => {
+        const address = email.trim();
+        if (!EMAIL.test(address)) {
+            setNote(`${address || 'That'} is not an email address`);
+            return;
+        }
+        void act(() => invite(t, org, address), `${address} is invited. IAM sends no email: share the code with them.`, () => {
+            setEmail('');
+            asked.reload();
+        });
+    };
+    const open = asked.value.filter((i) => i.state === 'Active' && i.used < i.seats);
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Members", detail: `The people who can act in ${org}, and the role each one holds.` }), _jsx(Group, { title: "Members", detail: people.value.length ? `${people.value.length} in ${org}` : undefined, children: people.error ? (_jsx(Soft, { children: people.error.message })) : people.loading && !people.value.length ? (_jsx(Soft, { children: "Reading members\u2026" })) : people.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No one is on this organization\u2019s roster yet." }) })) : (_jsx(Card, { children: people.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(Initial, { name: m.name }), title: m.name, detail: [m.user, m.since ? `since ${day(m.since)}` : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: m.role === 'member' ? '$soft' : '$ink', children: ROLE[m.role] }) }, m.user))) })) }), host.admin ? (_jsxs(Group, { title: "Invitations", detail: "An invitation is a one-seat code for one address, redeemed when that person signs up.", children: [_jsxs(Card, { children: [_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", flexWrap: "wrap", children: [_jsx(YStack, { flex: 1, minW: 200, children: _jsx(Input, { value: email, onChangeText: setEmail, placeholder: "name@company.com", "aria-label": "Email to invite", inputMode: "email", autoCapitalize: "none" }) }), _jsxs(Button, { size: "sm", disabled: working || !email.trim(), onPress: send, children: [_jsx(UserPlus, { size: 14 }), " Invite"] })] }), asked.error ? (_jsx(YStack, { borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Soft, { children: asked.error.message }) })) : null, asked.value.map((i) => (_jsx(Row, { title: i.email || i.name, mono: !i.email, detail: [
+                                    i.code ? `Code ${i.code}` : '',
+                                    `${i.used} of ${i.seats} joined`,
+                                    i.state !== 'Active' ? i.state.toLowerCase() || 'not redeemable' : '',
+                                    day(i.created) ? `invited ${day(i.created)}` : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' · '), trailing: _jsx(Button, { size: "sm", variant: "ghost", disabled: working, "aria-label": `Revoke the invitation for ${i.email || i.name}`, onPress: () => void act(() => revoke(t, i), 'The invitation is withdrawn', asked.reload), children: "Revoke" }) }, i.name)))] }), !asked.loading && !asked.error && asked.value.length > 0 && open.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Every invitation has been used or stopped." })) : null] })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin invites people and sees the open invitations." })), _jsx(Note, { children: note })] }));
+}

package/lib/settings/memory.d.ts

@@ -0,0 +1 @@
+export declare function Memory(): import("react").JSX.Element;

package/lib/settings/memory.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Memory: what Hanzo remembers about the person in this organization, newest
+ * first. Each can be forgotten, and anything said in the box is remembered as
+ * written. The memories are the person's own; nobody else in the organization
+ * reads them.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Trash2 } from '@hanzogui/lucide-icons-2';
+import { Button, Input } from '@hanzo/ui';
+import { useState } from 'react';
+import { forget, memories, remember } from '../api/memory.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, Group, Heading, Note, Soft } from './ui.js';
+/** A platform time as a date, or '' when it is not one. */
+const day = (at) => {
+    const d = new Date(at);
+    return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+};
+export function Memory() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(signed ? () => memories(t) : null, [], [t, signed]);
+    const [said, setSaid] = useState('');
+    const [busy, setBusy] = useState('');
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Memory" }), _jsx(Soft, { children: "Sign in to see what Hanzo remembers." })] }));
+    }
+    const act = async (what, run, done) => {
+        setBusy(what);
+        setNote('');
+        try {
+            await run();
+            list.reload();
+            setNote(done);
+            return true;
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+            return false;
+        }
+        finally {
+            setBusy('');
+        }
+    };
+    const keep = () => {
+        const words = said.trim();
+        if (!words)
+            return;
+        void act('remember', () => remember(t, words), 'Remembered').then((took) => took && setSaid(''));
+    };
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Memory", detail: "What Hanzo remembers about you here, to carry from one run to the next. Only you see it." }), _jsx(Group, { title: "Tell Hanzo what to remember or change", children: _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: said, onChangeText: setSaid, onSubmitEditing: keep, "aria-label": "Tell Hanzo what to remember or change", placeholder: "I prefer small pull requests, one change each." }) }), _jsx(Button, { size: "sm", disabled: !said.trim() || busy !== '', onPress: keep, children: "Remember" })] }) }), _jsx(Group, { title: "What Hanzo remembers", detail: list.value.length ? `${list.value.length} ${list.value.length === 1 ? 'memory' : 'memories'}, newest first.` : undefined, children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Soft, { children: "Reading memories\u2026" })) : !list.value.length ? (_jsx(Soft, { children: "Nothing yet. What you tell Hanzo to remember shows here." })) : (_jsx(Card, { children: list.value.map((m, i) => (_jsxs(XStack, { items: "flex-start", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: m.content }), _jsx(SizableText, { size: "$1", color: "$soft", children: [m.kind, day(m.updated)].filter(Boolean).join(' · ') })] }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": `Forget ${m.content.slice(0, 60)}`, disabled: busy !== '', onPress: () => void act(m.id, () => forget(t, m.id), 'Forgotten'), children: _jsx(Trash2, { size: 14 }) })] }, m.id))) })) }), _jsx(Note, { children: note })] }));
+}

package/lib/settings/notifications.d.ts

@@ -0,0 +1 @@
+export declare function Notifications(): import("react").JSX.Element;

package/lib/settings/notifications.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Notifications: the organization's webhooks. Each is an https address that
+ * every matching event is POSTed to, signed with a secret shown once, when the
+ * webhook is added. A test sends one signed event now; the log says what each
+ * delivery got back.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Copy, Plus, Webhook, X } from '@hanzogui/lucide-icons-2';
+import { Button, Input } from '@hanzo/ui';
+import { useState } from 'react';
+import { add, deliveries, endpoints, patterns, refuse, remove, test } from '../api/webhooks.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, day, Field, Group, Heading, Note, Row, Soft } from './ui.js';
+const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
+export function Notifications() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(signed ? () => endpoints(t) : null, [], [t, signed]);
+    const [adding, setAdding] = useState(false);
+    const [url, setUrl] = useState('');
+    const [events, setEvents] = useState('');
+    const [description, setDescription] = useState('');
+    const [secret, setSecret] = useState('');
+    const [log, setLog] = useState(null);
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Notifications" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s webhooks." })] }));
+    }
+    const act = async (what) => {
+        setWorking(true);
+        setNote('');
+        try {
+            setNote(await what());
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    const create = () => {
+        const draft = { url, events: patterns(events), description };
+        const why = refuse(draft);
+        if (why) {
+            setNote(why);
+            return;
+        }
+        void act(async () => {
+            const e = await add(t, draft);
+            setSecret(e.secret);
+            setAdding(false);
+            setUrl('');
+            setEvents('');
+            setDescription('');
+            list.reload();
+            return `${e.url} is added`;
+        });
+    };
+    const trial = (e) => void act(async () => {
+        const r = await test(t, e.id);
+        if (log?.id === e.id)
+            setLog({ id: e.id, rows: await deliveries(t, e.id) });
+        return r.delivered
+            ? `The test reached ${e.url}: ${r.status} in ${r.ms} ms`
+            : `The test did not reach ${e.url}: ${r.error || (r.status ? `it answered ${r.status}` : 'no answer')}`;
+    });
+    const drop = (e) => void act(async () => {
+        await remove(t, e.id);
+        if (log?.id === e.id)
+            setLog(null);
+        list.reload();
+        return `${e.url} is deleted`;
+    });
+    const show = (e) => {
+        if (log?.id === e.id) {
+            setLog(null);
+            return;
+        }
+        void act(async () => {
+            setLog({ id: e.id, rows: await deliveries(t, e.id) });
+            return '';
+        });
+    };
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Notifications", detail: `Webhooks: events in ${host.org ?? 'this organization'}, POSTed and signed to an address you run.`, action: adding || !host.admin ? undefined : (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Add webhook"] })) }), adding ? (_jsxs(YStack, { gap: "$3", p: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: [_jsx(Field, { label: "Endpoint URL", hint: "https only.", children: _jsx(Input, { value: url, onChangeText: setUrl, placeholder: "https://example.com/hooks/hanzo", "aria-label": "Endpoint URL", autoCapitalize: "none", inputMode: "url" }) }), _jsx(Field, { label: "Events", hint: "Subject patterns, comma separated, such as commerce.order.> \u2014 leave empty for every event.", children: _jsx(Input, { value: events, onChangeText: setEvents, placeholder: "commerce.order.>, event.>", "aria-label": "Events", autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "What this endpoint is for", "aria-label": "Description" }) }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working || !url.trim(), onPress: create, children: "Add webhook" })] })] })) : null, secret ? (_jsxs(YStack, { gap: "$2", p: "$4", borderWidth: 1, borderColor: "$ink", rounded: "$3", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Signing secret" }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Shown this once. Keep it where your endpoint checks each delivery\u2019s signature." }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", style: { ...mono, wordBreak: 'break-all' }, "aria-label": "Signing secret", children: secret }), _jsxs(Button, { size: "sm", variant: "outline", onPress: () => void navigator.clipboard?.writeText(secret).then(() => setNote('The secret is copied')), children: [_jsx(Copy, { size: 14 }), " Copy"] }), _jsx(XStack, { render: "button", "aria-label": "Hide the secret", p: "$1", onPress: () => setSecret(''), children: _jsx(X, { size: 14 }) })] })] })) : null, _jsx(Group, { title: "Webhooks", children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Soft, { children: "Reading webhooks\u2026" })) : list.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No webhooks yet." }) })) : (_jsx(Card, { children: list.value.map((e, i) => (_jsxs(YStack, { borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Row, { first: true, mono: true, leading: _jsx(Webhook, { size: 16 }), title: e.url, detail: [
+                                    e.description,
+                                    e.events.length ? e.events.join(', ') : 'every event',
+                                    e.status === 'disabled' ? 'disabled' : '',
+                                    `${e.deliveries} delivered, ${e.failures} failed this week`,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' · '), trailing: host.admin ? (_jsx(XStack, { render: "button", "aria-label": `Delete ${e.url}`, p: "$1", onPress: () => drop(e), children: _jsx(X, { size: 14 }) })) : undefined }), _jsxs(XStack, { gap: "$2", px: "$3", pb: "$2.5", flexWrap: "wrap", children: [host.admin ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, "aria-label": `Send a test to ${e.url}`, onPress: () => trial(e), children: "Send test" })) : null, _jsx(Button, { size: "sm", variant: "ghost", disabled: working, "aria-label": `Deliveries to ${e.url}`, onPress: () => show(e), children: log?.id === e.id ? 'Hide deliveries' : 'Deliveries' })] }), log?.id === e.id ? (_jsx(YStack, { px: "$3", pb: "$3", gap: "$1.5", children: log.rows.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Nothing delivered yet." })) : (log.rows.map((a, n) => (_jsxs(XStack, { gap: "$3", items: "baseline", children: [_jsx(SizableText, { size: "$1", color: a.status === 'ok' ? '$ink' : '$soft', width: 64, children: a.status === 'ok' ? 'OK' : a.status === 'failed' ? 'Failed' : 'Retrying' }), _jsx(SizableText, { flex: 1, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: `${a.subject}${a.code ? ` → ${a.code}` : ''}${a.error ? ` · ${a.error}` : ''}` }), _jsx(SizableText, { size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: day(a.at) })] }, `${a.at}-${n}`)))) })) : null] }, e.id))) })) }), _jsx(Note, { children: note })] }));
+}

package/lib/settings/privacy.d.ts

@@ -0,0 +1 @@
+export declare function Privacy(): import("react").JSX.Element;