@hanzo/rooms 0.1.0

package/dist/Settings.d.ts

@@ -0,0 +1,46 @@
+export type Row = {
+    id: string;
+    label: string;
+    /**
+     * Where the row GOES, for one that leaves this list for the page that owns it.
+     *
+     * The row is still a button and not an anchor: the rail's contract is one verb
+     * per row, and the shell is the only thing that knows how this host moves. So
+     * this states the destination and `onPick` performs it.
+     */
+    href?: string;
+    /** One sentence, for a pane we have not built a screen for yet. */
+    note?: string;
+};
+/** The row Settings opens on when nothing has asked for another. */
+export declare const FIRST: string;
+/**
+ * The rail's second level: every settings row, grouped.
+ *
+ * It renders `SidebarItem` rather than a shape of its own so a settings row and
+ * a room row are the same row — the list under it changes, the column does not.
+ *
+ * `aria-current="true"` is stated rather than left to `active`, which publishes
+ * `page`. A settings row is the current item in a set, not the current page;
+ * the address never moves.
+ */
+export declare function SettingsList({ active, filter, onPick, onBack, }: {
+    /** The open row's id. */
+    active: string;
+    /** The rail's own filter, narrowing these rows the way it narrows the rooms. */
+    filter: string;
+    /** Chosen. The shell decides what a row with an `href` does. */
+    onPick: (row: Row) => void;
+    /** Back to the rooms. */
+    onBack: () => void;
+}): import("react").JSX.Element;
+/**
+ * The room, while a settings row is open.
+ *
+ * It scrolls itself, the way the column beside a room does: `main` gives its
+ * child a floor and no overflow, so a pane that did not would push the whole
+ * shell down the page.
+ */
+export declare function SettingsPane({ id }: {
+    id: string;
+}): import("react").JSX.Element;

package/dist/Settings.js

@@ -0,0 +1,321 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Settings: the sidebar's second level, and the pane it opens in the room.
+//
+// TWO PARTS, ONE TAXONOMY. `SettingsList` is the rail's list — the shell swaps
+// its own rows for these and back. `SettingsPane` is what fills the room while
+// a row is chosen. Both read `GROUPS`, so the list can only offer a row the
+// pane can draw.
+//
+// Which row is open is the shell's `showSettings` value and nothing here: a
+// pane deep in the tree asks for Channels through the same store, and the rail
+// and the room read that one answer.
+//
+// Every section that has a screen RENDERS IT HERE. Account, billing and usage
+// are not links out to hanzo.id, billing.hanzo.ai and platform.hanzo.ai, because
+// the surface is already packaged — @hanzo/usage carries the one usage panel
+// every Hanzo product renders, @hanzo/iam carries the identity, and lib/plans
+// carries the ladder. A row leaves this surface only when what it opens
+// genuinely is not here: a legal document, another product's page, or a card
+// form, which belongs to the payment host and nowhere else.
+//
+// The panes that are not yet built say so in one sentence rather than pretending
+// to a screen. An honest empty pane is a smaller lie than an invented one.
+import { dev } from './lib/host.js';
+import { useMemo, useState } from 'react';
+import { ArrowLeft, ArrowUpRight, ExternalLink } from 'lucide-react';
+import { Box, Button, Separator, Text, XStack, YStack, } from '@hanzo/ui';
+import { SidebarItem, SidebarSection } from '@hanzo/ui/chat';
+import { tap } from './lib/tap.js';
+import { useIam, useIamIdentity, useOrganizations } from '@hanzo/iam/react';
+import { useSignOut } from './lib/signout.js';
+import { useModels } from '@hanzo/ai/react';
+import { ModelSelector, RESEARCH } from '@hanzo/ui/models';
+import { UsagePanel } from '@hanzo/usage/panel';
+import { Catalog } from './Directory.js';
+import { useModel } from './model.js';
+import { payPage, planName } from './lib/plans.js';
+import { api } from './lib/api.js';
+import { renewal, useSubscription, useTier } from './lib/tier.js';
+import { sku, spendShown, useLimits } from './lib/limits.js';
+import { Meters } from './meters.js';
+import { Look } from './look.js';
+import { ProviderMark } from './ProviderMark.js';
+import { org, pick } from './lib/session.js';
+import { site } from './where.js';
+/** A choice among a few: a hairline edge and a corner. The fill and the edge's
+ *  ink are the call site's, because they say which one is chosen. */
+const CHOICE = { rounded: 8, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer' };
+const GROUPS = [
+    {
+        label: 'Settings',
+        rows: [
+            { id: 'general', label: 'General' },
+            { id: 'account', label: 'Account' },
+            { id: 'billing', label: 'Billing' },
+            { id: 'usage', label: 'Usage' },
+            { id: 'capabilities', label: 'Capabilities', note: 'What a model may reach for on your behalf.' },
+            { id: 'privacy', label: 'Privacy', href: site('/legal/privacy') },
+            { id: 'dev', label: 'Hanzo Dev', href: dev() },
+            { id: 'browser', label: 'Hanzo Browser', href: site('/extension') },
+        ],
+    },
+    {
+        label: 'Preferences',
+        rows: [
+            // DEFAULT MODEL, and the word matters beside Platform's Models: this row
+            // chooses which one answers, that one says which ones are served.
+            { id: 'model', label: 'Default model' },
+            {
+                id: 'agent',
+                label: 'Personal agent',
+                note: 'The agent that answers as you — its capabilities, its modes, and what it is allowed ' +
+                    'to do on your behalf. Nothing is bound to this surface yet, so there is nothing here ' +
+                    'to change; it is listed because this is where it will live.',
+            },
+        ],
+    },
+    {
+        label: 'Customize',
+        rows: [
+            { id: 'apps', label: 'Apps' },
+            { id: 'channels', label: 'Channels' },
+            { id: 'plugins', label: 'Plugins' },
+            { id: 'skills', label: 'Skills' },
+            { id: 'memory', label: 'Memory', note: 'Nothing is remembered between conversations yet.' },
+        ],
+    },
+    /**
+     * THE PLATFORM, from the workspace.
+     *
+     * Models draws here because `/v1/models` is a call this app already makes, so
+     * the pane can state what is actually served rather than describe it. Base,
+     * Functions and Realtime have no read this app makes, so each row goes to the
+     * page that already documents the product — a row that led to an invented
+     * screen would be worse than one that leaves.
+     */
+    {
+        label: 'Platform',
+        rows: [
+            { id: 'models', label: 'Models' },
+            { id: 'base', label: 'Base', href: site('/base') },
+            { id: 'functions', label: 'Functions', href: site('/functions') },
+            { id: 'realtime', label: 'Realtime', href: site('/realtime') },
+            { id: 'keys', label: 'API keys' },
+        ],
+    },
+];
+/** Every row, flat — what the pane looks a chosen id up in. */
+const ROWS = GROUPS.flatMap((g) => g.rows);
+/** The row Settings opens on when nothing has asked for another. */
+export const FIRST = ROWS[0].id;
+/**
+ * The rail's second level: every settings row, grouped.
+ *
+ * It renders `SidebarItem` rather than a shape of its own so a settings row and
+ * a room row are the same row — the list under it changes, the column does not.
+ *
+ * `aria-current="true"` is stated rather than left to `active`, which publishes
+ * `page`. A settings row is the current item in a set, not the current page;
+ * the address never moves.
+ */
+export function SettingsList({ active, filter, onPick, onBack, }) {
+    const q = filter.trim().toLowerCase();
+    const groups = q
+        ? GROUPS.map((g) => ({ ...g, rows: g.rows.filter((r) => r.label.toLowerCase().includes(q)) })).filter((g) => g.rows.length > 0)
+        : GROUPS;
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarItem, { icon: _jsx(ArrowLeft, { size: 15, "aria-hidden": true }), onPress: onBack, children: "Workspace" }), q && groups.length === 0 ? (_jsxs(Text, { px: "$3", py: "$2", fontSize: "$2", color: "$quiet", children: ["No matches for \u201C", filter.trim(), "\u201D."] })) : null, groups.map((g) => (_jsx(SidebarSection, { label: g.label, children: g.rows.map((r) => (_jsx(SidebarItem, { 
+                    // The arrow says this row LEAVES. Without it a row that navigates
+                    // away and one that draws a pane in place look identical until
+                    // pressed.
+                    icon: r.href ? _jsx(ArrowUpRight, { size: 13, "aria-hidden": true }) : undefined, active: r.id === active, "aria-current": r.id === active ? 'true' : undefined, onPress: () => onPick(r), children: r.label }, r.id))) }, g.label)))] }));
+}
+/**
+ * The room, while a settings row is open.
+ *
+ * It scrolls itself, the way the column beside a room does: `main` gives its
+ * child a floor and no overflow, so a pane that did not would push the whole
+ * shell down the page.
+ */
+export function SettingsPane({ id }) {
+    const row = ROWS.find((r) => r.id === id);
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", children: _jsxs(YStack, { p: "$5", gap: "$4", maxW: 860, children: [_jsx(Text, { fontSize: "$6", fontWeight: "600", color: "$ink", children: row?.label ?? 'Settings' }), _jsx(Pane, { id: id, note: row?.note })] }) }));
+}
+/** One pane. */
+function Pane({ id, note }) {
+    if (id === 'apps' || id === 'channels' || id === 'plugins' || id === 'skills') {
+        return _jsx(Catalog, { tab: id });
+    }
+    if (id === 'general')
+        return _jsx(Look, {});
+    if (id === 'account')
+        return _jsx(Account, {});
+    if (id === 'billing')
+        return _jsx(Billing, {});
+    if (id === 'usage')
+        return _jsx(Usage, { meters: true });
+    if (id === 'keys')
+        return _jsx(Keys, {});
+    if (id === 'model')
+        return _jsx(Model, {});
+    if (id === 'models')
+        return _jsx(Served, {});
+    if (id === 'agent')
+        return _jsx(AgentSettings, {});
+    if (id === 'capabilities')
+        return _jsx(Capabilities, {});
+    if (id === 'memory')
+        return _jsx(MemorySettings, {});
+    return (_jsx(Text, { fontSize: "$3", color: "$soft", children: note ?? 'Nothing to configure here yet.' }));
+}
+/** One default in one place; agents may still bring their own model. */
+function Model() {
+    const { models: served } = useModels();
+    // Hanzo models alone, as the composer's picker offers them (`sku`).
+    const models = useMemo(() => served.filter((m) => sku(m.id)), [served]);
+    const [model, choose] = useModel();
+    return (_jsxs(YStack, { gap: "$3", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Used for new chats. An agent with its own model keeps that choice." }), _jsx(XStack, { self: "flex-start", children: _jsx(ModelSelector, { models: [...models, ...RESEARCH], value: model, onChange: choose, size: "sm" }) }), _jsx(YStack, { gap: "$2", mt: "$2", children: models
+                    .filter((m) => !m.id.includes('openrouter'))
+                    .slice(0, 8)
+                    .map((m) => {
+                    const isSel = model === m.id;
+                    const p = m.id.startsWith('zen') ? 'zen' : 'enso';
+                    return (_jsx(Box, { render: "button", onClick: () => choose(m.id), px: "$3", py: "$2", rounded: "$2", borderWidth: 1, borderColor: isSel ? '$ink' : '$borderColor', bg: isSel ? '$raised' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(ProviderMark, { provider: p, size: 16 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", flex: 1, children: m.id }), isSel ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "Active" })) : null] }) }, m.id));
+                }) })] }));
+}
+/**
+ * WHAT THE GATEWAY SERVES, read from the same `/v1/models` the rooms read.
+ *
+ * Counted, never typed: the catalog moves without this file, so a number written
+ * here is wrong by the next deploy. An empty answer says the account reaches
+ * nothing rather than drawing a zero, and the mark comes from the model's own
+ * id so a family wears the logo of the lab that makes it.
+ */
+function Served() {
+    const { models, loading, error } = useModels();
+    if (loading) {
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the catalog." });
+    }
+    if (error) {
+        return _jsxs(Text, { fontSize: "$3", color: "$soft", children: ["The catalog did not answer: ", error.message] });
+    }
+    if (models.length === 0) {
+        return (_jsx(Text, { fontSize: "$3", color: "$soft", children: "No model answers on this account. Sign in to reach the ones your org opens." }));
+    }
+    return (_jsxs(YStack, { gap: "$3", children: [_jsxs(Text, { fontSize: "$3", color: "$soft", children: [models.length, " models answer at /v1/models on this account."] }), _jsx(YStack, { children: models.map((m) => (_jsxs(XStack, { items: "center", gap: "$2.5", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(ProviderMark, { model: m.id, org: m.owned_by, size: 16, ink: true }), _jsx(Text, { fontSize: "$2", color: "$ink", flex: 1, children: m.id }), m.owned_by ? _jsx(Text, { fontSize: "$1", color: "$soft", children: m.owned_by }) : null] }, m.id))) }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: site('/models') }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Browse the model catalog" }), _jsx(ArrowUpRight, { size: 13, "aria-hidden": true })] }) }) })] }));
+}
+/** Who is signed in, and where they can act. */
+function Account() {
+    const identity = useIamIdentity();
+    const { isAuthenticated } = useIam();
+    const logout = useSignOut();
+    const { organizations, currentOrgId, currentRole, switchOrg } = useOrganizations();
+    if (!isAuthenticated || !identity) {
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your account." });
+    }
+    return (_jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(YStack, { width: 44, height: 44, rounded: 22, bg: "$borderColor", items: "center", justify: "center", children: _jsx(Text, { fontSize: "$3", color: "$ink", children: identity.initials }) }), _jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$4", color: "$ink", children: identity.name }), identity.email ? _jsx(Text, { fontSize: "$2", color: "$soft", children: identity.email }) : null] })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Organizations" }), organizations.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "You are not a member of an organization." })) : (organizations.map((o) => {
+                        const here = o.name === currentOrgId;
+                        return (_jsx(Box, { render: _jsx("button", { type: "button" }), onClick: () => { pick(o.name); switchOrg(o.name); }, ...tap, children: _jsxs(XStack, { items: "center", justify: "space-between", py: "$2", width: "100%", gap: "$2", children: [_jsx(Text, { fontSize: "$3", color: here ? '$ink' : '$soft', children: o.displayName || o.name }), here && currentRole ? _jsx(Text, { fontSize: "$2", color: "$soft", children: currentRole }) : null] }) }, o.name));
+                    }))] }), _jsx(Separator, {}), _jsx(XStack, { children: _jsx(Button, { size: "sm", onClick: () => logout(), children: "Sign out" }) })] }));
+}
+/** The plan, and the one control that has to leave. */
+function Billing() {
+    const { isAuthenticated } = useIam();
+    const { tier } = useTier(isAuthenticated, org());
+    const sub = useSubscription(isAuthenticated, org());
+    // WHAT THE CUSTOMER BOUGHT, and its term: a plan is a subscription with usage
+    // limits, so its line is the price and the renewal, never a balance.
+    const plan = tier ? planName(tier.plan) || tier.tier.displayName || tier.tier.name : null;
+    return (_jsxs(YStack, { gap: "$4", children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "What this account is billed for, and what it has spent." }), plan ? (_jsx(Text, { fontSize: "$4", color: "$ink", children: sub ? `${plan} · ${renewal(sub)}` : plan })) : null, _jsx(Usage, { sections: { overview: true, chart: false, categories: true, breakdown: true, activity: false }, title: "Spend" }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Payment" }), _jsx(Text, { fontSize: "$3", color: "$soft", children: "A card is entered on the payment host and nowhere else, so this is the one control here that opens another surface." }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: payPage(), target: "_blank", rel: "noreferrer" }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Manage plan and payment method" }), _jsx(ExternalLink, { size: 13, "aria-hidden": true })] }) }) })] })] }));
+}
+/**
+ * The one usage panel every Hanzo product renders, reading as this account — for a
+ * reader with no plan. A plan holder's usage is the plan's shares (`meters` draws
+ * them where usage is the subject), never money (spendShown).
+ */
+function Usage({ sections, title, meters = false }) {
+    const { accessToken, isAuthenticated } = useIam();
+    const read = useLimits(isAuthenticated, org());
+    if (!isAuthenticated || !accessToken) {
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your usage." });
+    }
+    if (read.limits?.plan)
+        return meters ? _jsx(Meters, { limits: read.limits, large: true }) : null;
+    if (!spendShown(read))
+        return null;
+    // The address is read HERE rather than at import: the panel sends the bearer
+    // with every read, and a credentialed read to an absolute address from a page
+    // the gateway does not admit dies in preflight — which drew this panel as an
+    // account that had spent nothing.
+    return _jsx(UsagePanel, { baseUrl: api(), token: accessToken, sections: sections, title: title, upgrade: payPage() });
+}
+/** Keys are minted and revoked through the console, which holds the one issuer. */
+function Keys() {
+    return (_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "A key is shown once, at the moment it is minted. That happens where the issuer lives." }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: "https://platform.hanzo.ai/api-keys", target: "_blank", rel: "noreferrer" }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Manage API keys" }), _jsx(ExternalLink, { size: 13, "aria-hidden": true })] }) }) })] }));
+}
+const HISTORICAL_PERSONAS = [
+    { id: 'architect', name: 'Software Architect', role: 'Full-stack & systems design' },
+    { id: 'satoshi', name: 'Satoshi Nakamoto', role: 'Distributed cryptography & consensus' },
+    { id: 'turing', name: 'Alan Turing', role: 'Algorithmic logic & formal verification' },
+    { id: 'ada', name: 'Ada Lovelace', role: 'Computational precision & analysis' },
+    { id: 'davinci', name: 'Leonardo da Vinci', role: 'Polymathic engineering & design' },
+];
+function AgentSettings() {
+    const [instructions, setInstructions] = useState(() => {
+        if (typeof window === 'undefined')
+            return '';
+        return localStorage.getItem('hanzo.agent.instructions') || 'You are an autonomous AI software engineer at Hanzo. Think step-by-step and write robust code.';
+    });
+    const [persona, setPersona] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'architect';
+        return localStorage.getItem('hanzo.agent.persona') || 'architect';
+    });
+    const [autonomy, setAutonomy] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'autonomous';
+        return localStorage.getItem('hanzo.agent.autonomy') || 'autonomous';
+    });
+    const [saved, setSaved] = useState(false);
+    const save = () => {
+        localStorage.setItem('hanzo.agent.instructions', instructions);
+        localStorage.setItem('hanzo.agent.persona', persona);
+        localStorage.setItem('hanzo.agent.autonomy', autonomy);
+        setSaved(true);
+        setTimeout(() => setSaved(false), 2000);
+    };
+    return (_jsxs(YStack, { gap: "$4", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing is bound to this surface yet \u2014 when you bind a personal agent, its persona, tools and memory live here rather than in a shared team." }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Persona & Historical Character" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Pick an intellectual archetype for agent reasoning and tone." }), _jsx(XStack, { flexWrap: "wrap", gap: "$2", pt: "$1", children: HISTORICAL_PERSONAS.map((p) => {
+                            const active = persona === p.id;
+                            return (_jsx(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setPersona(p.id), ...CHOICE, bg: active ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: active ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', py: 6, px: 12, children: _jsx(Text, { fontSize: "$2", fontWeight: active ? '600' : '400', color: active ? '$ink' : '$soft', children: p.name }) }, p.id));
+                        }) })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "System Prompt Instructions" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Custom system directions prepended to all coding and research runs." }), _jsx(Text, { render: _jsx("textarea", { value: instructions, onChange: (e) => setInstructions(e.target.value), rows: 4 }), width: "100%", bg: "var(--panel, color-mix(in srgb, var(--pure-black) 30%, transparent))", color: "inherit", borderWidth: 1, borderColor: "var(--borderColor, var(--white-15))", rounded: 8, p: 10, fontSize: "$2", fontFamily: "$mono" })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Autonomy & Permissions" }), _jsxs(XStack, { gap: "$2", children: [_jsxs(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setAutonomy('autonomous'), ...CHOICE, flex: 1, p: 10, bg: autonomy === 'autonomous' ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: autonomy === 'autonomous' ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Autonomous" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Executes tools & writes code without interrupting." })] }), _jsxs(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setAutonomy('supervised'), ...CHOICE, flex: 1, p: 10, bg: autonomy === 'supervised' ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: autonomy === 'supervised' ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Supervised" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Requests confirmation before file writes and commands." })] })] })] }), _jsx(XStack, { self: "flex-start", pt: "$2", children: _jsx(Button, { size: "sm", onClick: save, children: saved ? 'Saved' : 'Save agent preferences' }) })] }));
+}
+/**
+ * WHAT A RUN MAY REACH FOR — the four capabilities, described and not measured.
+ *
+ * Each row used to carry a badge reading "Enabled", and the MCP row read
+ * "Active (:8080/mcp)". Nothing asked. No call stands behind any of the four,
+ * so the badges said "on" for a reader whose run had none of it, and the port
+ * was one developer's machine printed on everybody's settings pane. A green
+ * light nobody wired is worse than no light: it is read as a check that passed.
+ *
+ * These are facts about the PRODUCT — what a run is allowed to do — which is
+ * what this pane is for. Whether a given run got them is a fact about that run,
+ * and the run is where it belongs.
+ */
+function Capabilities() {
+    return (_jsxs(YStack, { gap: "$3", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "What models and agent swarms are granted access to during tasks." }), _jsx(YStack, { gap: "$2", pt: "$1", children: [
+                    { title: 'Filesystem (Read / Write)', desc: 'Create, modify, and delete workspace files in the target repository.' },
+                    { title: 'Shell & Terminal Exec', desc: 'Execute build, test, and shell commands in isolated sandbox VMs.' },
+                    { title: 'Live Web & Search', desc: 'Query internet search APIs and fetch web documentation.' },
+                    { title: 'MCP Protocol Server', desc: 'Expose local and remote tools via Model Context Protocol at /mcp.' },
+                ].map((cap) => (_jsxs(YStack, { gap: "$0.5", p: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: cap.title }), _jsx(Text, { fontSize: "$2", color: "$soft", children: cap.desc })] }, cap.title))) })] }));
+}
+function MemorySettings() {
+    const [cleared, setCleared] = useState(false);
+    const clearMemory = () => {
+        localStorage.removeItem('hanzo.chat.history');
+        setCleared(true);
+        setTimeout(() => setCleared(false), 2000);
+    };
+    return (_jsxs(YStack, { gap: "$3", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Semantic memory and conversation recall across sessions." }), _jsxs(YStack, { gap: "$0.5", p: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Semantic Vector Index" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Automatically indexes past workspace sessions into vector memory." })] }), _jsx(XStack, { self: "flex-start", pt: "$2", children: _jsx(Button, { size: "sm", variant: "outline", onClick: clearMemory, children: cleared ? 'Memory cleared' : 'Clear local memory cache' }) })] }));
+}

package/dist/Setup.d.ts

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

package/dist/Setup.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The first-run steps, offered: a card in the app's column that opens
+// /onboarding and can be put away. Never a redirect — chat is free and nothing
+// stands in front of it.
+//
+// Offered only to an account that has not begun: no organization in its token
+// and a step still owed by IAM's record (@hanzo/ui/onboarding `firstRun`). An
+// account with an organization has history, and is onboarded whatever the
+// record says.
+import { useEffect, useState } from 'react';
+import { SizableText, Text, XStack, YStack } from '@hanzo/gui';
+import { Sparkles, X } from 'lucide-react';
+import { firstRun } from '@hanzo/ui/onboarding';
+import { useKept } from './kept.js';
+import { orgs } from './lib/session.js';
+import { api } from './lib/api.js';
+import { site } from './where.js';
+/** Put away in this browser. */
+const LATER = 'hanzo.onboarding.later';
+export function Setup() {
+    const [later, setLater] = useKept(LATER, false);
+    const [owed, setOwed] = useState(false);
+    useEffect(() => {
+        if (later || orgs().length)
+            return;
+        let live = true;
+        void firstRun(api()).then((r) => live && setOwed(r.pending));
+        return () => {
+            live = false;
+        };
+    }, [later]);
+    if (later || !owed)
+        return null;
+    return (_jsxs(XStack, { "data-slot": "setup", role: "region", "aria-label": "Set up Hanzo", items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$edge", children: [_jsx(Sparkles, { size: 16, "aria-hidden": true }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: "Finish setting up Hanzo" }), _jsx(Text, { render: _jsx("a", { href: site(`/onboarding?next=${encodeURIComponent('/')}`) }), color: "var(--soft, var(--muted-foreground))", fontSize: "$1", textDecorationLine: "underline", self: "flex-start", children: "Set up" })] }), _jsx(XStack, { render: "button", "aria-label": "Not now", onPress: () => setLater(true), p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14, "aria-hidden": true }) })] }));
+}

package/dist/Share.d.ts

@@ -0,0 +1,3 @@
+export declare function Share({ thread }: {
+    thread: string;
+}): import("react").JSX.Element;

package/dist/Share.js

@@ -0,0 +1,130 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The conversation header's Share control and the panel it opens.
+//
+// A link opens this ONE conversation, read only, as it stands when the link is
+// made (lib/share.ts), to the people who open it signed in. The panel copies
+// it, lists every live link with the people who opened it, removes any one of
+// them, and revokes a link, which ends it for all of them. Recipients read and
+// do not reply: a conversation belongs to the member who started it.
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { Check, Link2, Share2 } from 'lucide-react';
+import { Box, Button, Text, XStack, YStack } from '@hanzo/ui';
+import { hold, heldToken, link, Refused, shares } from './lib/share.js';
+import { BAD } from './lib/mix.js';
+/** How long "Link copied" stays. The same 1400 ms `Take` confirms for. */
+const CONFIRM = 1400;
+/** A date as the panel says it: "Sep 29, 2026". */
+const day = (iso) => {
+    const d = new Date(iso);
+    return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+};
+const said = (e) => (e instanceof Refused || e instanceof Error ? e.message : 'That did not work. Try again.');
+export function Share({ thread }) {
+    const [open, setOpen] = useState(false);
+    const button = useRef(null);
+    const close = useCallback(() => {
+        setOpen(false);
+        button.current?.focus();
+    }, []);
+    return (_jsxs(Box, { position: "relative", children: [_jsx(Box, { ref: button, render: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": "Share this conversation", borderWidth: 0, bg: "transparent", p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Share2, { size: 13, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$ink", children: "Share" })] }) }), open ? _jsx(Panel, { thread: thread, onClose: close }) : null] }));
+}
+function Panel({ thread, onClose }) {
+    const heading = useId();
+    const box = useRef(null);
+    const [live, setLive] = useState(null);
+    const [busy, setBusy] = useState(null);
+    const [wrong, setWrong] = useState(null);
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        let on = true;
+        shares
+            .list(thread)
+            .then((rows) => on && setLive(rows))
+            .catch((e) => {
+            if (!on)
+                return;
+            setLive([]);
+            setWrong(said(e));
+        });
+        return () => {
+            on = false;
+        };
+    }, [thread]);
+    // Escape closes; a press outside closes; focus starts inside.
+    useEffect(() => {
+        box.current?.querySelector('button')?.focus();
+        const key = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        const press = (e) => {
+            if (box.current && !box.current.contains(e.target) && !e.target?.closest?.('[aria-haspopup="dialog"]'))
+                onClose();
+        };
+        document.addEventListener('keydown', key);
+        document.addEventListener('mousedown', press);
+        return () => {
+            document.removeEventListener('keydown', key);
+            document.removeEventListener('mousedown', press);
+        };
+    }, [onClose]);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const t = setTimeout(() => setCopied(false), CONFIRM);
+        return () => clearTimeout(t);
+    }, [copied]);
+    const copy = async () => {
+        setBusy('copy');
+        setWrong(null);
+        try {
+            let got = heldToken(thread, live ?? []);
+            if (!got) {
+                const made = await shares.make(thread);
+                got = { id: made.share.id, token: made.token };
+                hold(thread, got);
+                setLive((rows) => [...(rows ?? []), made.share]);
+            }
+            await navigator.clipboard.writeText(link(got.token));
+            setCopied(true);
+        }
+        catch (e) {
+            setWrong(e instanceof DOMException ? 'The browser would not copy. Select the link and copy it by hand.' : said(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const unview = async (row, viewer) => {
+        setBusy(viewer.id);
+        setWrong(null);
+        try {
+            await shares.unview(thread, row.id, viewer.id);
+            setLive((rows) => (rows ?? []).map((r) => (r.id === row.id ? { ...r, viewers: r.viewers.filter((v) => v.id !== viewer.id) } : r)));
+        }
+        catch (e) {
+            setWrong(said(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const revoke = async (id) => {
+        setBusy(id);
+        setWrong(null);
+        try {
+            await shares.revoke(thread, id);
+            if (heldToken(thread, live ?? [])?.id === id)
+                hold(thread, null);
+            setLive((rows) => (rows ?? []).filter((r) => r.id !== id));
+        }
+        catch (e) {
+            setWrong(said(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    return (_jsxs(YStack, { ref: box, role: "dialog", "aria-labelledby": heading, position: "absolute", r: 0, t: "100%", mt: "$2", z: "var(--z-dropdown)", width: 360, maxW: "calc(100vw - 32px)", p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$background", boxShadow: "0 16px 36px color-mix(in srgb, var(--pure-black) 30%, transparent)", children: [_jsx(Text, { id: heading, render: "h2", fontSize: "$4", fontWeight: "600", color: "$ink", children: "Share this chat" }), _jsx(Text, { fontSize: "$2", color: "$soft", lineHeight: "$3", children: "People who open the link signed in can read this chat as it is now, and you see who they are below. They cannot reply, and messages you send later are not shared." }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Button, { size: "sm", onClick: () => void copy(), disabled: busy !== null || live === null, "aria-describedby": `${heading}-said`, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [copied ? _jsx(Check, { size: 14, "aria-hidden": true }) : _jsx(Link2, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "inherit", children: copied ? 'Link copied' : busy === 'copy' ? 'Making a link…' : 'Copy link' })] }) }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Read only" })] }), _jsx(Text, { id: `${heading}-said`, "aria-live": "polite", fontSize: "$1", color: "$soft", minH: 16, children: copied ? 'The link is on your clipboard.' : '' }), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Who has access" }), _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: "You" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Owner" })] }), live === null ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "Reading links." })) : live.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "No links yet. Copy link makes one." })) : (_jsx(YStack, { render: "ul", gap: "$2", m: 0, p: 0, "aria-label": "Live links", children: live.map((row) => (_jsxs(YStack, { render: "li", gap: "$1.5", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(YStack, { minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: "Link" }), _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read only", day(row.createdAt) ? ` · made ${day(row.createdAt)}` : ''] })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void revoke(row.id), disabled: busy !== null, "aria-label": `Revoke the link made ${day(row.createdAt) || 'earlier'}`, children: busy === row.id ? 'Revoking…' : 'Revoke' })] }), (row.viewers ?? []).length === 0 ? (_jsx(Text, { fontSize: "$1", color: "$soft", pl: "$3", children: "Nobody has opened it yet." })) : (_jsx(YStack, { render: "ul", gap: "$1", m: 0, pl: "$3", "aria-label": "Opened by", children: row.viewers.map((v) => (_jsxs(XStack, { render: "li", items: "center", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: v.name || 'Someone signed in' }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void unview(row, v), disabled: busy !== null, "aria-label": `Remove ${v.name || 'this reader'}`, children: busy === v.id ? 'Removing…' : 'Remove' })] }, v.id))) }))] }, row.id))) }))] }), wrong ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: wrong })) : null] }));
+}

package/dist/Shared.d.ts

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