@hanzo/rooms 0.1.38 → 0.1.39

package/dist/Column.js

@@ -4,17 +4,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // New, Dev's places, the Recents of the mode it is in, and at the foot the
 // account (components/workspace/Me.tsx).
 //
+// Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
+// row of its own under a quiet group label: nothing waits behind a More.
+//
 // It is a pane on the frame's ground (app/_web.tsx), sized by the edge in the
 // gutter to its right: dragged, keyed or double-clicked back (@hanzo/build's
 // `Grip`), kept per browser. Pulled in past its floor it collapses to a rail of
 // marks, kept under the key the builder's rail kept it under, so a reader's
 // choice outlives the move.
 import { Text, XStack, YStack } from '@hanzo/gui';
-import { ChevronDown, ChevronUp, PanelLeft, Plus, Search } from 'lucide-react';
-import { Grip, nav, route } from '@hanzo/build';
+import { PanelLeft, Plus, Search } from 'lucide-react';
+import { Grip, nav, NEW } from '@hanzo/build';
 import { Sidebar, SidebarIconButton, SidebarItem } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzogui/shell';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { ModeMark } from './ModeMark.js';
 import { useKept } from './kept.js';
 import { Made, Me } from './Me.js';
@@ -49,22 +52,20 @@ const keys = (press) => ({
         press();
     },
 });
-/** A row of the column: a pill, lit where the reader is. */
-const ROW = { rounded: '$4', minH: 34 };
+/** A row of the column: a pill, lit where the reader is. Compact, so every place fits a laptop's height with Recents under them. */
+const ROW = { rounded: '$4', minH: 30, py: 0 };
 export function Column({ host, mode, thread, onChat, onDev, go, drawer = false, }) {
     const [kept, setCollapsed] = useKept('hanzo.build.rail', false);
     const collapsed = kept && !drawer;
-    const [unfolded, setUnfolded] = useState(false);
     const [words, setWords] = useState('');
+    // The desktop column and a phone's drawer can both be in the page: each names its own group labels.
+    const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
-    const r = route(host.path);
-    const fresh = mode === 'chat' ? !thread : r.kind === 'new';
-    const { links, more } = nav(host, dev);
+    const groups = nav(host, dev);
     const open = (row) => (row.kind === 'chat' ? go(talk(row.id)) : dev(row.id));
+    // Chat's New; Dev's is the first of its places.
     const create = () => {
-        if (mode === 'dev')
-            return dev('');
         empty();
         go(talk());
     };
@@ -74,15 +75,15 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
         window.location.assign(mode === 'dev' ? app('') : talk());
     };
     if (collapsed)
-        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'New chat' : 'New run', onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
+        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), mode === 'chat' ? (_jsx(SidebarIconButton, { label: "New chat", onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) })) : (
+                    // Every place, as its mark: collapsed is narrower, never shorter of a destination.
+                    groups.map((g) => (_jsx(YStack, { role: "group", "aria-label": g.label, items: "center", gap: 2, pt: "$1", children: g.links.map((link) => (_jsx(SidebarIconButton, { label: link.label, onPress: () => link.onPress?.(), width: 36, height: 32, rounded: 999, "aria-current": link.active ? 'page' : undefined, children: link.icon }, link.id))) }, g.id)))), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
         style: drawer ? undefined : span.style, position: "relative", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
                                             setWords('');
-                                    }, placeholder: "Filter", "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), _jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: fresh, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: mode === 'chat' ? 'New chat' : 'New run' }) }), mode === 'dev'
-                                ? links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id)))
-                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
+                                    }, placeholder: mode === 'chat' ? 'Filter chats' : 'Filter runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), mode === 'chat' ? (_jsx(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: "New chat" }) }) })) : (_jsx(YStack, { "data-slot": "app-places", mt: "$1.5", shrink: 0, children: groups.map((g) => (_jsxs(YStack, { pt: "$1.5", children: [_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: g.label }), _jsx(YStack, { role: "list", "aria-labelledby": `${uid}-${g.id}`, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })] }, g.id))) })), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
                 // In the gutter between the column and the pane, not over the column's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Directory.d.ts

@@ -1,14 +1,9 @@
 /**
- * The four ways this experience is customized, and the whole taxonomy.
- *
- * APPS are connected services — the thing that used to be called Connectors,
- * which named the wire rather than what a reader installs. CHANNELS are
- * transports: where a conversation reaches you. PLUGINS extend the client.
- * SKILLS extend what an agent knows how to do.
- *
- * Order is the ruling's: Apps, Channels, Plugins, Skills.
+ * What this directory lists. APPS are what Hanzo works with — the public
+ * catalog, each row a page. CHANNELS are transports: where a conversation
+ * reaches you. Skills and plugins are Customize's (Settings links there).
  */
-export type Tab = 'apps' | 'channels' | 'plugins' | 'skills';
+export type Tab = 'apps' | 'channels';
 export declare function Directory({ open, onClose, tab: first, }: {
     open: boolean;
     onClose: () => void;

package/dist/Directory.js

@@ -20,11 +20,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // row shown as a small badge, never a section boundary and never a second
 // install flow — one `+` everywhere, branching internally.
 //
-// FOUR TABS, and the channels are tiles. A channel is a provider the org can
+// TWO TABS, and the channels are tiles. A channel is a provider the org can
 // hold an account with, read from `/v1/integrations` — which says whether this
 // deployment can open a connection and whether this org has one — and every
 // tile's button is a call to that registry. The Inbox's "Connect an app" opens
-// this same directory on this tab; there is no second grid.
+// this same directory on this tab; there is no second grid. Skills, plugins and
+// connectors are what an agent brings to a run, and they have one home, Dev's
+// Customize (@hanzo/build); Settings links there rather than drawing a copy.
 //
 // COUNTS ARE DERIVED. The catalog is counted, never typed. None of these
 // registries serves a download figure, so no card draws one: the rows carried
@@ -33,12 +35,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // deleted a "600+ integrations" claim for the same reason.
 //
 // SIGNED IN, EACH TAB READS ITS OWN REGISTRY. Apps is this site's public catalog
-// AND the org's connected accounts; Channels, Plugins and Skills are the org's
-// own lists at `/v1/channels`, `/v1/tools/plugins`, `/v1/tools/skills`. Those
-// three need the bearer, so signed-out asks the reader to sign in rather than
-// drawing a catalogue nobody can install from, and a registry that cannot be
-// reached says so and points at the console rather than claiming the list is
-// empty. `null` is unknown; it never means zero.
+// AND the org's connected accounts; Channels is the org's own list at
+// `/v1/integrations`. That one needs the bearer, so signed-out asks the reader to
+// sign in rather than drawing a catalogue nobody can connect from, and a
+// registry that cannot be reached says so rather than claiming the list is
+// empty. Nothing stands in for an answer: no row is drawn that the registry did
+// not send, and none is marked Connected that it did not mark.
 import { useEffect, useMemo, useState } from 'react';
 import { ArrowUpRight, Check, Plus, Search, X } from 'lucide-react';
 import { Box, Dialog, DialogContent, DialogTitle, Input, Text, XStack, YStack, } from '@hanzo/ui';
@@ -53,31 +55,12 @@ import { Action } from '@hanzo/ui/marketing';
 import { tap } from './lib/tap.js';
 import { GOOD } from './lib/mix.js';
 import { site } from './where.js';
-/**
- * The console, which is a PRODUCT ADDRESS rather than an environment.
- *
- * The gateway is `api()` because it moves — a local cloud, the dev server's own
- * proxy — and nine modules got that wrong by freezing it into a const. This one
- * does not move: `platform.hanzo.ai` is written as a literal in
- * `lib/constants/products-metadata.ts`, `lib/data/oss-catalog.ts` and
- * `pricing.json`, no env names it, and `e2e/directory.spec.ts` asserts this
- * exact origin on the links below.
- */
-const CONSOLE = 'https://platform.hanzo.ai';
 const TABS = [
     { id: 'apps', label: 'Works with' },
     { id: 'channels', label: 'Channels' },
-    { id: 'plugins', label: 'Plugins' },
-    { id: 'skills', label: 'Skills' },
 ];
-/** The org registry each non-apps tab reads, once there is a bearer to read it with. */
-const ENDPOINT = {
-    // The org-plane catalogue: every provider the platform can connect an account
-    // to, with THIS org's connection and whether the deployment can open one.
-    channels: '/v1/integrations',
-    plugins: '/v1/tools/plugins',
-    skills: '/v1/tools/skills',
-};
+/** The org-plane catalogue: every provider the platform can connect an account to, with THIS org's connection and whether the deployment can open one. */
+const CHANNELS = '/v1/integrations';
 /**
  * The channels a reader reaches for first, in the order they were asked for.
  * The rest of the registry follows in its own order. A rank, not a filter: a
@@ -100,99 +83,33 @@ const apps = () => (listing ??= import('./lib/integrations.js')
     kind: 'native',
 })))
     .catch(() => []));
-const CHANNELS_CATALOG = [
-    { id: 'slack', name: 'Slack', publisher: 'Hanzo Auto', description: 'Bidirectional sync with FoundationDAO & workspace Slack channels and threads.', kind: 'native', available: true, connected: true },
-    { id: 'discord', name: 'Discord', publisher: 'Hanzo Auto', description: 'Bot and webhook integration for community server announcements and chat.', kind: 'native', available: true, connected: true },
-    { id: 'telegram', name: 'Telegram', publisher: 'Hanzo Auto', description: 'Direct messaging bot with instant agent responses and notifications.', kind: 'native', available: true, connected: true },
-    { id: 'teams', name: 'Microsoft Teams', publisher: 'Hanzo Auto', description: 'Enterprise collaboration connector for channels, meetings, and team chats.', kind: 'native', available: true, connected: false },
-    { id: 'whatsapp', name: 'WhatsApp Business', publisher: 'Hanzo Auto', description: 'Conversational agent support over official WhatsApp Business API.', kind: 'native', available: true, connected: false },
-    { id: 'email', name: 'Email (SMTP/IMAP)', publisher: 'Hanzo Auto', description: 'Inbound conversation routing and outbound transactional dispatch.', kind: 'native', available: true, connected: false },
-    { id: 'webhooks', name: 'Webhooks', publisher: 'Hanzo Core', description: 'Custom HTTP payload delivery for real-time external event ingest.', kind: 'native', available: true, connected: true },
-    { id: 'sms', name: 'SMS (Twilio)', publisher: 'Hanzo Auto', description: 'Two-way text message delivery and conversational verification.', kind: 'native', available: true, connected: false },
-    { id: 'x', name: 'X / Twitter', publisher: 'Hanzo Auto', description: 'Direct messages, mentions, and timeline thread monitoring.', kind: 'native', available: true, connected: false },
-    { id: 'linkedin', name: 'LinkedIn', publisher: 'Hanzo Auto', description: 'Company page updates, comments, and direct message handling.', kind: 'native', available: true, connected: false },
-];
-const PLUGINS_CATALOG = [
-    { id: 'mcp-filesystem', name: 'Filesystem MCP', publisher: 'Model Context Protocol', description: 'Secure local and virtual file access, directory reading, and atomic edits.', kind: 'MCP', connected: true },
-    { id: 'mcp-git', name: 'Git MCP', publisher: 'Model Context Protocol', description: 'Repository inspection, branch management, commit diffing, and git blame.', kind: 'MCP', connected: true },
-    { id: 'mcp-code', name: 'Code & LSP MCP', publisher: 'Hanzo AI', description: 'Language server protocol diagnostics, symbol jump, and semantic search.', kind: 'MCP', connected: true },
-    { id: 'mcp-memory', name: 'Memory & Knowledge Graph MCP', publisher: 'Hanzo AI', description: 'Persistent entity memory, semantic vector store, and recall graph.', kind: 'MCP', connected: true },
-    { id: 'mcp-zen', name: 'Zen Architecture & Review MCP', publisher: 'Hanzo AI', description: 'Frontier reasoning engine, architecture planning, and rigorous code reviews.', kind: 'MCP', connected: true },
-    { id: 'mcp-browser', name: 'Browser & CDP MCP', publisher: 'Hanzo AI', description: 'Headless Chrome DevTools Protocol automation and interactive web tasks.', kind: 'MCP', connected: true },
-    { id: 'mcp-terminal', name: 'Terminal & PTY MCP', publisher: 'Hanzo AI', description: 'Safe shell execution, sandbox command runner, and real-time streaming.', kind: 'MCP', connected: true },
-    { id: 'mcp-playwright', name: 'Playwright MCP', publisher: 'Microsoft', description: 'End-to-end browser automation, screenshots, and visual regression testing.', kind: 'MCP', connected: true },
-    { id: 'mcp-fetch', name: 'Fetch & Curl MCP', publisher: 'Hanzo AI', description: 'Fast HTTP/HTTPS content extraction and markdown web page synthesis.', kind: 'MCP', connected: true },
-    { id: 'mcp-datastore', name: 'Datastore MCP', publisher: 'Hanzo Datastore', description: 'ClickHouse high-performance analytical queries and telemetry exploration.', kind: 'MCP', connected: true },
-];
-const SKILLS_CATALOG = [
-    { id: 'skill-code-search', name: 'Codebase Search & Navigation', publisher: 'Hanzo Core', description: 'Deep semantic search, rip-grep, and symbol indexing across all project repositories.', kind: 'native', connected: true },
-    { id: 'skill-data-analysis', name: 'Data Science & Statistical Analysis', publisher: 'Hanzo Core', description: 'Automated data exploration, tabular summaries, charting, and statistical tests.', kind: 'native', connected: true },
-    { id: 'skill-git-ops', name: 'Git Workflow & Release Management', publisher: 'Hanzo Core', description: 'Branch creation, conventional commits, PR generation, and release drafting.', kind: 'native', connected: true },
-    { id: 'skill-swarm', name: 'Autonomous Agent Swarm Orchestration', publisher: 'Hanzo Core', description: 'Divide complex tasks across specialized subagents with asynchronous coordination.', kind: 'native', connected: true },
-    { id: 'skill-web-research', name: 'Web Research & Academic Synthesis', publisher: 'Hanzo Core', description: 'Multi-source fact-checking, literature review, and technical paper extraction.', kind: 'native', connected: true },
-    { id: 'skill-sandbox', name: 'Python Sandbox Execution', publisher: 'Hanzo Core', description: 'Isolated execution of Python scripts with visualization and data artifact export.', kind: 'native', connected: true },
-    { id: 'skill-media', name: 'Image & Media Generation', publisher: 'Hanzo Core', description: 'Diffusion generation, UI mockup creation, and media asset transformations.', kind: 'native', connected: true },
-    { id: 'skill-web3', name: 'Smart Contract & EVM Interaction', publisher: 'Hanzo', description: 'Solidity compilation, ABI inspection, EVM deployment, and chain reads.', kind: 'native', connected: true },
-];
-function catalogFor(tab) {
-    switch (tab) {
-        case 'apps':
-            return [];
-        case 'channels':
-            return CHANNELS_CATALOG;
-        case 'plugins':
-            return PLUGINS_CATALOG;
-        case 'skills':
-            return SKILLS_CATALOG;
-    }
-}
-/** One title-cased word from a channel/plugin id. */
+/** One title-cased word from a channel id. */
 const title = (s) => s.charAt(0).toUpperCase() + s.slice(1);
-/** Map each org registry's own shape onto the one Row the card renders. */
-function rowsFor(tab, j) {
+/** The channel registry's own shape, as the one Row the card renders. */
+function channelsOf(j) {
     const o = (j ?? {});
-    if (tab === 'channels') {
-        const rank = (id) => {
-            const i = LEAD.indexOf(id);
-            return i < 0 ? LEAD.length : i;
-        };
-        return (o.providers ?? [])
-            .map((p) => {
-            const link = (p.connection ?? {});
-            const account = String(link.account ?? link.label ?? '');
-            return {
-                id: String(p.id),
-                name: String(p.name ?? title(String(p.id))),
-                // What the registry knows, in the reader's order of interest: who is
-                // connected, else whether a connection can be opened here at all.
-                publisher: p.connected ? account || 'Connected' : p.available ? String(p.category ?? '') : 'Needs app credentials',
-                description: String(p.description ?? ''),
-                kind: 'native',
-                connected: Boolean(p.connected),
-                available: Boolean(p.available),
-                account,
-            };
-        })
-            .sort((a, b) => rank(a.id) - rank(b.id));
-    }
-    if (tab === 'plugins') {
-        return (o.plugins ?? []).map((p) => ({
-            id: String(p.name),
-            name: title(String(p.name)),
-            publisher: 'Hanzo',
-            description: `Serves ${(p.prefixes ?? []).join(', ') || 'this workspace'}.`,
+    const rank = (id) => {
+        const i = LEAD.indexOf(id);
+        return i < 0 ? LEAD.length : i;
+    };
+    return (o.providers ?? [])
+        .map((p) => {
+        const link = (p.connection ?? {});
+        const account = String(link.account ?? link.label ?? '');
+        return {
+            id: String(p.id),
+            name: String(p.name ?? title(String(p.id))),
+            // What the registry knows, in the reader's order of interest: who is
+            // connected, else whether a connection can be opened here at all.
+            publisher: p.connected ? account || 'Connected' : p.available ? String(p.category ?? '') : 'Needs app credentials',
+            description: String(p.description ?? ''),
             kind: 'native',
-            connected: p.enabled !== false,
-        }));
-    }
-    // skills: the tools list, whichever key the source used.
-    return (o.tools ?? o.skills ?? []).map((t) => ({
-        id: String(t.id ?? t.name),
-        name: String(t.name ?? t.id),
-        publisher: String(t.publisher ?? t.author ?? 'You'),
-        description: String(t.description ?? t.summary ?? 'A skill your agents can reach for.'),
-        kind: (t.kind === 'MCP' ? 'MCP' : 'native'),
-    }));
+            connected: Boolean(p.connected),
+            available: Boolean(p.available),
+            account,
+        };
+    })
+        .sort((a, b) => rank(a.id) - rank(b.id));
 }
 /**
  * A rejection `say()` can read.
@@ -218,18 +135,21 @@ export function Directory({ open, onClose, tab: first = 'apps', }) {
  * why it is exported and takes the tab as a prop.
  */
 export function Catalog({ tab }) {
-    const { isAuthenticated, login, accessToken } = useIam();
+    const { isAuthenticated, accessToken } = useIam();
     const [query, setQuery] = useState('');
-    const [rows, setRows] = useState(() => catalogFor(tab));
-    // Bumped when a card changed a connection, so the registry is read again and
-    // the card shows what the registry now holds rather than what the press hoped.
+    // null until the list is read: unknown is never drawn as empty.
+    const [rows, setRows] = useState(null);
+    const [wrong, setWrong] = useState(null);
+    // Bumped when a card changed a connection, or a failed read is asked again,
+    // so the registry is read again and the card shows what it now holds.
     const [turn, setTurn] = useState(0);
     const label = TABS.find((t) => t.id === tab)?.label ?? tab;
+    const signed = isAuthenticated && Boolean(accessToken);
     useEffect(() => {
         let live = true;
-        const fallback = catalogFor(tab);
-        setRows(fallback);
-        const auth = isAuthenticated && accessToken ? scope() : null;
+        setRows(null);
+        setWrong(null);
+        const auth = signed ? scope() : null;
         // Apps is this site's own public catalog — real for everyone. Signed in, we
         // also mark which providers the org has actually connected, from the one
         // read that names them.
@@ -257,28 +177,18 @@ export function Catalog({ tab }) {
         }
         if (!auth)
             return;
-        fetch(`${api()}${ENDPOINT[tab]}`, { headers: auth })
-            .then((r) => (r.ok ? r.json() : null))
-            .then((j) => {
-            if (!live || !j)
-                return;
-            const liveRows = rowsFor(tab, j);
-            if (liveRows && liveRows.length > 0) {
-                const map = new Map();
-                for (const r of fallback)
-                    map.set(r.id, r);
-                for (const r of liveRows)
-                    map.set(r.id, { ...(map.get(r.id) || {}), ...r });
-                setRows(Array.from(map.values()));
-            }
+        fetch(`${api()}${CHANNELS}`, { headers: auth })
+            .then((r) => {
+            if (!r.ok)
+                throw refusal(r);
+            return r.json();
         })
-            .catch(() => {
-            // Degrades gracefully to fallback catalog
-        });
+            .then((j) => live && setRows(channelsOf(j)))
+            .catch((e) => live && setWrong(e));
         return () => {
             live = false;
         };
-    }, [tab, isAuthenticated, accessToken, turn]);
+    }, [tab, signed, turn]); // eslint-disable-line react-hooks/exhaustive-deps -- scope() reads the same token
     // A connection finishes in the provider's own tab. Coming back to this one is
     // the moment to ask the registry again.
     useEffect(() => {
@@ -293,14 +203,10 @@ export function Catalog({ tab }) {
     }, [tab]);
     const shown = useMemo(() => {
         const q = query.trim().toLowerCase();
-        const list = Array.isArray(rows) ? rows : [];
-        return list.filter((r) => {
-            if (!q)
-                return true;
-            return r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q);
-        });
+        return (rows ?? []).filter((r) => !q || r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q));
     }, [rows, query]);
-    return (_jsxs(YStack, { gap: "$4", children: [_jsx(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: _jsxs(XStack, { items: "center", gap: "$2", flex: 1, minW: 180, children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Input, { value: query, onChangeText: setQuery, placeholder: `Search ${tab}`, "aria-label": `Search ${tab}`, flex: 1 })] }) }), shown.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { fontSize: "$3", color: "$soft", children: [shown.length, " ", shown.length === 1 ? 'result' : 'results'] }), _jsx(YStack, { maxH: 380, overflowY: "auto", overflowX: "hidden", pr: "$1", width: "100%", children: _jsx(Grid, { columns: tab === 'channels' ? { min: 168, max: 4 } : { min: 240, max: 2 }, gap: 12, children: shown.map((r) => tab === 'channels' ? (_jsx(Channel, { row: r, onChange: () => setTurn((n) => n + 1) }, r.id)) : (_jsx(RowCard, { row: r, tab: tab }, r.id))) }) })] })) : (_jsxs(YStack, { gap: "$3", py: "$4", children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: query ? `Nothing matches “${query}”.` : `No ${label.toLowerCase()} here yet.` }), !query ? (_jsx(Action, { href: `${CONSOLE}/${tab}`, target: "_blank", rel: "noreferrer", $touchable: { minH: 44, minW: 44 }, children: "Add in console" })) : null] }))] }));
+    const quiet = (text, action) => (_jsxs(YStack, { gap: "$3", py: "$4", items: "flex-start", children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: text }), action] }));
+    return (_jsxs(YStack, { gap: "$4", children: [_jsx(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: _jsxs(XStack, { items: "center", gap: "$2", flex: 1, minW: 180, children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Input, { value: query, onChangeText: setQuery, placeholder: `Search ${label.toLowerCase()}`, "aria-label": `Search ${label.toLowerCase()}`, flex: 1 })] }) }), tab === 'channels' && !signed ? (quiet('Sign in to see the channels your organization can connect.', _jsx(Action, { render: "button", onPress: () => enter(), $touchable: { minH: 44, minW: 44 }, children: "Sign in" }))) : wrong ? (quiet(say(wrong, 'the channels'), _jsx(Action, { render: "button", onPress: () => setTurn((n) => n + 1), $touchable: { minH: 44, minW: 44 }, children: "Try again" }))) : rows === null ? (quiet(`Loading ${label.toLowerCase()}…`)) : shown.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { fontSize: "$3", color: "$soft", children: [shown.length, " ", shown.length === 1 ? 'result' : 'results'] }), _jsx(YStack, { maxH: 380, overflowY: "auto", overflowX: "hidden", pr: "$1", width: "100%", children: _jsx(Grid, { columns: tab === 'channels' ? { min: 168, max: 4 } : { min: 240, max: 2 }, gap: 12, children: shown.map((r) => tab === 'channels' ? (_jsx(Channel, { row: r, onChange: () => setTurn((n) => n + 1) }, r.id)) : (_jsx(RowCard, { row: r, tab: tab }, r.id))) }) })] })) : (quiet(query ? `Nothing matches “${query}”.` : tab === 'channels' ? 'No channel can be connected here yet.' : 'Nothing is listed yet.'))] }));
 }
 function RowCard({ row, tab }) {
     const { isAuthenticated } = useIam();
@@ -315,10 +221,9 @@ function RowCard({ row, tab }) {
         const back = encodeURIComponent(`${window.location.origin}/inbox`);
         window.open(`${api()}/v1/channels/${encodeURIComponent(row.id)}/oauth/authorize?redirect_uri=${back}`, '_blank', 'noopener,noreferrer');
     };
-    // Apps open the page this site serves; a plugin or a skill is installed in
-    // the console, which is where its registry is. Only a channel has a flow of
-    // its own, and only that one is a button.
-    const href = tab === 'apps' ? site(`/integrations/${row.id}`) : `${CONSOLE}/${tab}`;
+    // Apps open the page this site serves. Only a channel has a flow of its own,
+    // and only that one is a button.
+    const href = site(`/integrations/${row.id}`);
     return (_jsxs(YStack, { gap: "$2", p: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", height: "100%", bg: "$raised", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(ProviderMark, { org: row.id.replace(/-sdk$/, ''), size: 20 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: row.name }), _jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: row.publisher })] }), row.connected ? (_jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$1", rounded: "$2", bg: "$hover", children: [_jsx(Check, { size: 12, color: GOOD, "aria-hidden": true }), _jsx(Text, { fontSize: "$1", color: GOOD, fontWeight: "600", children: "Connected" })] })) : tab === 'channels' ? (_jsx(Box, { render: "button", onClick: connect, "aria-label": `Connect ${row.name}`, px: "$2", py: "$1", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", bg: "var(--white-05)", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$1", color: "$color", fontWeight: "600", children: "Connect" }) })) : (_jsx(Box, { render: _jsx("a", { href: href, target: tab === 'apps' ? undefined : '_blank', rel: "noreferrer", "aria-label": `Open ${row.name}` }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$1", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", bg: "var(--white-05)", hoverStyle: { bg: '$hover' }, children: [_jsx(Text, { fontSize: "$1", color: "$color", fontWeight: "600", children: tab === 'apps' ? 'Docs' : 'Install' }), _jsx(ArrowUpRight, { size: 11, "aria-hidden": true })] }) }))] }), _jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 2, flex: 1, children: row.description }), _jsx(XStack, { items: "center", pt: "$1", children: _jsx(Text, { fontFamily: "$mono", fontVariant: ['tabular-nums'], fontSize: "$1", color: "$soft", children: row.kind }) })] }));
 }
 /**

package/dist/Me.js

@@ -6,31 +6,34 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // name, and their role in the organization they work in. The menu lists every
 // organization the token names — the personal one first, with its plan — and
 // switches with `pick()` (lib/auth/session.ts), the one switch the app has.
+//
+// THE PLAN LEADS: @hanzo/build's `Meter`, the block every account menu opens
+// with — the plan by its family (`Max` with `20x` beside it) and, on a plan, its
+// windows as shares; the free allowance left today on Free; the balance only
+// for an account with no plan, whose meter it is. Credits are Billing's, so a
+// plan never sits beside a balance here.
+//
 // Under the list: Create organization, Organization settings, and Hanzo Team —
 // opened in the same organization for a team, offered as "Create a team" for a
-// personal one. Then the balance with Add funds, Settings, Usage, API keys, the
-// plans, help and Log out. A SuperAdmin also gets All organizations (support mode).
+// personal one. Then Settings, Usage, Billing, API keys, the plans, help and Log
+// out. A SuperAdmin also gets All organizations (support mode).
 //
 // IAM is the source of every fact here: names and roles from the token's `orgs`
 // claim, display names and which org is personal from `GET /v1/iam/organizations`,
-// the plan and balance from billing. An organization is created by the same
+// the plan from billing and the limits. An organization is created by the same
 // `POST /v1/account/orgs` the no-organization gate uses (components/workspace/
 // Orgs.tsx); the next load mints a token that carries it.
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Popover, SizableText, View, XStack, YStack } from '@hanzo/gui';
-import { Building2, ChevronsUpDown, ExternalLink, Gauge, KeyRound, LifeBuoy, LogOut, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
-import { path, useWho } from '@hanzo/build';
+import { Building2, ChevronsUpDown, CreditCard, ExternalLink, Gauge, KeyRound, LifeBuoy, LogOut, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
+import { label, Meter, path, said as spoken, useStanding, useWho } from '@hanzo/build';
 import { useOrganizations } from '@hanzo/iam/react';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
 import { glass } from '@hanzo/ui/glass';
-import { formatCents } from '@hanzo/usage';
 import { api } from './lib/api.js';
 import { createOrg, say } from './lib/org.js';
-import { useTier } from './lib/tier.js';
 import { list } from './lib/list.js';
 import { org as current, orgs, pick, renew, scope, superAdmin } from './lib/session.js';
-import { payPage } from './lib/pay.js';
-import { planName } from './lib/plans.js';
 import { ENTRY } from './lib/host.js';
 import { where } from './where.js';
 import { SupportPicker } from './Support.js';
@@ -52,8 +55,8 @@ export const initials = (name) => name
     .slice(0, 2)
     .map((w) => w.charAt(0).toUpperCase())
     .join('') || '?';
-/** The plan's name as billing sells it. */
-const planOf = (tier) => (tier ? planName(tier.plan) || tier.tier?.displayName || tier.tier?.name || '' : '');
+/** The plan by its family, `Max 20x`, from a tier answer; '' with no plan. */
+const planOf = (tier) => (tier ? spoken(label(tier.plan, tier.tier?.name)) : '');
 /**
  * The token's organizations with IAM's rows beside them: display name, and which
  * one is the person's own. The personal organization leads, then the token's order.
@@ -139,9 +142,10 @@ export function Me({ host, narrow = false, onOrg, }) {
     const all = useOrgs(current);
     const here = all.find((o) => o.name === current) ?? null;
     const personal = all.find((o) => o.personal) ?? null;
-    const { tier } = useTier(menu.open, current);
+    const target = useMemo(() => ({ api: host.api, token: host.token, org: host.org }), [host.api, host.token, host.org]);
+    const read = useStanding(target, menu.open);
     const other = usePlan(personal && personal.name !== current ? personal.name : null, menu.open);
-    const planFor = (o) => (o.name === current ? planOf(tier) : o.personal ? other : '');
+    const planFor = (o) => (o.name === current ? spoken(read.value?.label ?? null) : o.personal ? other : '');
     const who = host.person?.name || host.person?.email || '';
     const standing = [said(here?.role ?? ''), here?.display ?? current].filter(Boolean).join(' · ');
     // The organization in use takes focus once the menu is drawn — after the
@@ -164,11 +168,11 @@ export function Me({ host, narrow = false, onOrg, }) {
         return null;
     return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: menu.open, onOpenChange: menu.onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 8, children: [_jsx(Popover.Anchor, { width: "100%", children: _jsxs(XStack, { ref: (el) => {
                                 row.current = el instanceof HTMLElement ? el : null;
-                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, "aria-haspopup": "menu", "aria-expanded": menu.open, onPress: menu.toggle, width: narrow ? 40 : '100%', minH: narrow ? 40 : 48, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 30 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), standing ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: standing })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsx(Popover.Content, { ...glass(2), items: "stretch", borderWidth: 1, rounded: "$6", p: "$1.5", width: 288, maxW: "calc(100vw - 16px)", maxH: "calc(100dvh - 32px)", overflowY: "auto", overflowX: "hidden", children: _jsx(View, { render: _jsx("div", { ref: land, role: "menu", "aria-label": "Account", onKeyDown: (e) => rove(e, close) }), self: "stretch", minW: 0, children: _jsxs(YStack, { gap: 2, children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person.email || who }), _jsx(Rule, {}), _jsx(Label, { children: "Organizations" }), _jsx(YStack, { role: "group", "aria-label": "Organizations", gap: 2, children: all.map((o) => (_jsx(Item, { icon: _jsx(Mark, { org: o }), label: o.display, sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), checked: o.name === current, onPress: () => {
+                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, "aria-haspopup": "menu", "aria-expanded": menu.open, onPress: menu.toggle, width: narrow ? 40 : '100%', minH: narrow ? 40 : 48, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 30 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), standing ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: standing })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsx(Popover.Content, { ...glass(2), items: "stretch", borderWidth: 1, rounded: "$6", p: "$1.5", width: 288, maxW: "calc(100vw - 16px)", maxH: "calc(100dvh - 32px)", overflowY: "auto", overflowX: "hidden", children: _jsx(View, { render: _jsx("div", { ref: land, role: "menu", "aria-label": "Account", onKeyDown: (e) => rove(e, close) }), self: "stretch", minW: 0, children: _jsxs(YStack, { gap: 2, children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person.email || who }), _jsx(Rule, {}), _jsx(Meter, { read: read, onPlans: () => go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Rule, {}), _jsx(Label, { children: "Organizations" }), _jsx(YStack, { role: "group", "aria-label": "Organizations", gap: 2, children: all.map((o) => (_jsx(Item, { icon: _jsx(Mark, { org: o }), label: o.display, sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), checked: o.name === current, onPress: () => {
                                                 menu.onOpenChange(false);
                                                 if (o.name !== current)
                                                     onOrg(o.name);
-                                            } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(ORG_SETTINGS)) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null, _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "Add funds", sub: typeof tier?.balance?.effectiveAvailable === 'number' ? `Credits ${formatCents(tier.balance.effectiveAvailable)}` : 'Credits', onPress: () => (menu.onOpenChange(false), window.open(payPage(), '_blank', 'noopener')), trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), label: "API keys", onPress: () => (menu.onOpenChange(false), window.location.assign(KEYS)) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "View all plans", onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(Rule, {}), _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) })] })) : null] }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
+                                            } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(ORG_SETTINGS)) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null, _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(CreditCard, { size: 15, "aria-hidden": true }), label: "Billing", onPress: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Item, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), label: "API keys", onPress: () => (menu.onOpenChange(false), window.location.assign(KEYS)) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "View all plans", onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(Rule, {}), _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) })] })) : null] }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
 }
 /**
  * The sheet that creates an organization: a name, then `POST /v1/account/orgs`,

package/dist/Prose.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Anchor, Text, View, XStack, YStack } from '@hanzo/gui';
+import { Code } from '@hanzo/ui/chat';
 import { destination, read } from './lib/prose.js';
 const INK = 'var(--foreground)';
 const QUIET = 'var(--muted-foreground)';
@@ -86,11 +87,11 @@ function blocks(tokens, tone) {
                 return _jsx(List, { list: t, tone: tone }, i);
             case 'table':
                 return _jsx(Table, { table: t, tone: tone }, i);
-            // A fenced block scrolls SIDEWAYS on its own: wrapping code changes what
-            // it says, and letting it push the message wider drags the whole
-            // transcript into a horizontal scroll.
+            // A fenced block is @hanzo/ui's `Code`, the frame Dev's answers draw:
+            // its language, a copy control, and a body that scrolls SIDEWAYS on its
+            // own, because wrapping code changes what it says.
             case 'code':
-                return (_jsx(View, { render: "pre", m: 0, overflowX: "auto", px: "$3.5", py: "$3", rounded: "$3", bg: GROUND, children: _jsx(Text, { render: "code", color: tone, fontFamily: "$mono", fontSize: "$1", lineHeight: "$2", whiteSpace: "pre", children: t.text }) }, i));
+                return (_jsx(Code, { language: t.lang || 'text', value: t.text, children: t.text }, i));
             case 'blockquote':
                 return (_jsx(YStack, { render: "blockquote", m: 0, pl: "$3", gap: "$2", borderWidth: 0, borderLeftWidth: 2, borderStyle: "solid", borderColor: EDGE, children: blocks(t.tokens, QUIET) }, i));
             case 'hr':