@hanzo/rooms 0.1.0

package/dist/Inbox.js

@@ -0,0 +1,193 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The inbox: what arrived, on whichever network carried it.
+//
+// IT READS LIKE MAIL, because that is what it is. The list stands beside what is
+// open rather than being replaced by it: picking a message used to swap the
+// whole pane, so choosing the next one meant going back first, and the list —
+// the thing that tells you which to read — was never on screen while you read.
+// Two columns is how every mail client has answered this, and the reason is the
+// same here.
+//
+// ONE READING, MANY TRANSPORTS. `channel` is measured by the server, so the
+// mark beside each face is a fact about the message. Nothing here enumerates
+// the networks; `network.tsx` names the ones it can draw and falls back for the
+// rest, so a fifth transport appears the day the platform reports one.
+//
+// IT HOLDS WHAT OTHER NETWORKS CARRY IN, and only that. The rooms this org
+// talks in are places on this platform, read and answered on /home
+// (`rooms.ts`); an arrival is a thread you REPLY to on the transport it came
+// in on, and `conversations.ts` keys the two apart so one selection slot never
+// holds two id spaces.
+//
+// IT IS TWO-WAY NOW, and the note that said otherwise had outlived the route it
+// described. `@hanzo/ai`'s channels client still opens "INBOUND ONLY … a client
+// that offered send() would be inventing a route", and the platform publishes
+// `POST /v1/channels/{channel}/send` — measured on api.hanzo.ai, with the
+// envelope's outbound projection spelled in its own description. So the reply
+// goes through `client.http` here rather than through a client method that does
+// not exist yet; when the SDK gains one, this call site is the only thing that
+// moves.
+//
+// A reply box that cannot reply is still worse than none, which is why this one
+// is drawn only where there is a room id to address.
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { ChannelHeader } from '@hanzo/ui/agents';
+import { Composer } from '@hanzo/ui/chat';
+import { Box, Text, XStack, YStack } from '@hanzo/ui';
+import { useIam } from '@hanzo/iam/react';
+import { Plus } from 'lucide-react';
+import { useAi } from './lib/ai.js';
+import { useOpen } from './open.js';
+import { Face } from './cast.js';
+import { plainly } from './failure.js';
+import { Network, of, roomName, speaker } from './network.js';
+import { conversationOf, useConversations, } from './conversations.js';
+import { Directory } from './Directory.js';
+import { BAD } from './lib/mix.js';
+/** Unix SECONDS, which is what the platform sends. Milliseconds here read as 1970. */
+const when = (seconds) => new Date(seconds * 1000).toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+});
+/** Today says the time; anything older says the day. A list scans on the part
+ *  that differs, and for mail from this morning that is the clock. */
+function stamp(seconds) {
+    const then = new Date(seconds * 1000);
+    const now = new Date();
+    const sameDay = then.getFullYear() === now.getFullYear() &&
+        then.getMonth() === now.getMonth() &&
+        then.getDate() === now.getDate();
+    return then.toLocaleString(undefined, sameDay ? { hour: 'numeric', minute: '2-digit' } : { month: 'short', day: 'numeric' });
+}
+/**
+ * WHO WROTE, AND FROM WHERE — one mark.
+ *
+ * The face is a disc and the network is a square tucked into its corner,
+ * because they answer two different questions and a reader should not have to
+ * tell two circles apart. The disc draws neither picture nor initials: the
+ * platform sends no likeness, and there is no name to reduce to letters — it
+ * drew the head of the platform's id, which on Slack is the same letter for
+ * everybody, so it told nobody apart while looking like somebody's initials.
+ * A disc with nothing to say says '?', which is what it means.
+ */
+function Sender({ channel, size = 36 }) {
+    return (_jsxs(YStack, { width: size, height: size, shrink: 0, position: "relative", children: [_jsx(Face, { size: size }), _jsx(YStack, { position: "absolute", b: -2, r: -2, children: _jsx(Network, { channel: channel, size: Math.round(size * 0.46) }) })] }));
+}
+/** Where a network is connected. Opens My Channels modal. */
+function Connect() {
+    const [modalOpen, setModalOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { render: "button", onClick: () => setModalOpen(true), px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Plus, { size: 13, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$ink", children: "Connect an app" })] }) }), _jsx(Directory, { open: modalOpen, onClose: () => setModalOpen(false), tab: "channels" })] }));
+}
+function Empty({ children, offer }) {
+    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$6", gap: "$3", children: [_jsx(Text, { render: "h1", fontSize: "$4", fontWeight: "600", color: "$ink", children: "Inbox" }), _jsx(Text, { fontSize: "$3", color: "$soft", text: "center", maxW: 420, children: children }), offer ? _jsx(Connect, {}) : null] }));
+}
+/** The list, which stays on screen while you read down it. */
+function Arrivals({ rooms, open, onPick, }) {
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack, { height: 48, shrink: 0, items: "center", px: "$3", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { flex: 1, fontSize: "$3", fontWeight: "600", color: "$ink", children: "Inbox" }), _jsx(Connect, {})] }), _jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", children: rooms.map((one) => (_jsx(Box, { render: "button", onClick: () => onPick(one.key), "aria-current": one.key === open, display: "block", width: "100%", cursor: "pointer", borderBottomWidth: 1, borderColor: "var(--borderColor, var(--white-08))", bg: one.key === open ? 'var(--raised, var(--white-06))' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { gap: "$3", items: "center", p: "$3", children: [_jsx(Sender, { channel: one.channel }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", items: "flex-start", children: [_jsxs(XStack, { width: "100%", items: "baseline", gap: "$2", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, flex: 1, text: "left", children: one.title }), one.lastAt ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: stamp(one.lastAt / 1000) })) : null] }), one.preview ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: one.preview })) : null] })] }) }, one.key))) })] }));
+}
+/** What is open, beside the list rather than instead of it. */
+function Reading({ room, reload, }) {
+    const { client } = useAi();
+    const [draft, setDraft] = useState('');
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(null);
+    /**
+     * Say it back, on the transport it arrived on.
+     *
+     * IDENTITY IS NOT A FIELD: the channel is the path segment and the sender is
+     * the caller's validated org, and the route refuses a body carrying `sender`,
+     * `account` or `channel` with a 400 rather than dropping it quietly. So the
+     * body is the room and the words, and nothing else.
+     *
+     * The room's own refusals are the reader's situation and are shown as the
+     * platform words them — a room this org has not bound is 403, and one whose
+     * route the bot has never learned is 409, which means somebody has to message
+     * it there first. `plainly` keeps those and answers for the estate's own.
+     *
+     * The list is re-read rather than appended to: what the transport accepted is
+     * what it assigned an id and a landing second to, and inventing a local row
+     * would put a message on screen that may not have gone.
+     */
+    const send = useCallback(async () => {
+        const text = draft.trim();
+        if (!client || !text || sending || !room.roomId)
+            return;
+        setSending(true);
+        setFailed(null);
+        try {
+            await client.http.json({
+                method: 'POST',
+                path: `/v1/channels/${encodeURIComponent(room.channel)}/send`,
+                body: { room: { id: room.roomId }, text },
+            });
+            setDraft('');
+            reload();
+        }
+        catch (e) {
+            setFailed(plainly(e, 'this room'));
+        }
+        finally {
+            setSending(false);
+        }
+    }, [client, draft, sending, room.channel, room.roomId, reload]);
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsx(ChannelHeader, { name: roomName(room), children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Network, { channel: room.channel, size: 14 }), _jsx(Text, { fontSize: "$2", color: "$soft", children: of(room.channel).name })] }) }), _jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", p: "$4", gap: "$3", children: [...room.messages]
+                    .sort((a, b) => a.createdAt - b.createdAt)
+                    .map((message) => (_jsxs(XStack, { gap: "$3", items: "flex-start", children: [_jsx(Sender, { channel: room.channel, size: 32 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsxs(XStack, { gap: "$2", items: "baseline", children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", children: speaker(room.channel, message.sender) }), _jsx(Text, { fontSize: "$1", color: "$soft", children: when(message.createdAt) })] }), _jsx(Text, { fontSize: "$3", color: "$ink", children: message.text })] })] }, message.id))) }), _jsx(YStack, { p: "$3", gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: room.roomId ? (_jsxs(_Fragment, { children: [_jsx(Composer, { value: draft, onChange: setDraft, onSend: () => void send(), busy: sending, placeholder: `Reply on ${of(room.channel).name}`, label: `Reply on ${of(room.channel).name}` }), failed ? (_jsx(Text, { fontSize: "$2", color: BAD, children: failed })) : null] })) : (_jsx(Text, { fontSize: "$2", color: "$soft", children: "This message names no room to answer in." })) })] }));
+}
+function InboxGrip({ span, onSpan, }) {
+    const held = useRef(0);
+    return (_jsx(Box, { render: "div", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize inbox channel list", "aria-valuenow": span, tabIndex: 0, position: "absolute", t: 0, b: 0, r: -3, width: 6, z: 10, cursor: "col-resize", hoverStyle: { bg: '$borderColor' }, onPointerDown: (e) => {
+            e.currentTarget.setPointerCapture(e.pointerId);
+            held.current = e.clientX - span;
+        }, onPointerMove: (e) => {
+            if (!e.currentTarget.hasPointerCapture(e.pointerId))
+                return;
+            const want = e.clientX - held.current;
+            const clamped = Math.min(540, Math.max(220, want));
+            onSpan(clamped);
+        }, onPointerUp: () => {
+            try {
+                localStorage.setItem('hanzo.inbox.span', String(span));
+            }
+            catch { }
+        } }));
+}
+function ReadingInbox() {
+    const { room, openRoom } = useOpen();
+    const { conversations, loading, reload } = useConversations();
+    const [listSpan, setListSpan] = useState(() => {
+        if (typeof window === 'undefined')
+            return 320;
+        try {
+            const stored = localStorage.getItem('hanzo.inbox.span');
+            return stored ? Math.max(220, Math.min(540, parseInt(stored, 10))) : 320;
+        }
+        catch {
+            return 320;
+        }
+    });
+    const open = useMemo(() => conversationOf(conversations, room), [conversations, room]);
+    if (loading && conversations.length === 0)
+        return _jsx(Empty, { children: "Reading your messages." });
+    if (conversations.length === 0) {
+        return (_jsx(Empty, { offer: true, children: "Nothing has arrived yet. Connect an app and the messages it carries land here \u2014 mail, chat, and the networks your work already happens on." }));
+    }
+    return (_jsxs(XStack, { flex: 1, minH: 0, position: "relative", children: [_jsxs(YStack, { display: open ? 'none' : 'flex', $md: { display: 'flex', width: listSpan, shrink: 0, borderRightWidth: 1 }, flex: 1, minH: 0, borderColor: "$borderColor", position: "relative", children: [_jsx(Arrivals, { rooms: conversations, open: room, onPick: openRoom }), _jsx(InboxGrip, { span: listSpan, onSpan: setListSpan })] }), open ? (_jsx(YStack, { flex: 1, minW: 0, minH: 0, children: _jsx(Reading, { room: open.arrival, reload: reload }) })) : (_jsx(YStack, { display: "none", $md: { display: 'flex' }, flex: 1, minW: 0, children: _jsx(Empty, { children: "Pick a conversation to read it." }) }))] }));
+}
+/**
+ * The pane, and the session its reads need.
+ *
+ * SPLIT so the hooks below never run for a reader with none: every route this
+ * pane reads is org-scoped and answers 403 without one, and a hook cannot be
+ * called conditionally — so the condition is a component boundary rather than
+ * an `if` the rules forbid.
+ */
+export function Inbox() {
+    const { isLoading } = useIam();
+    if (isLoading)
+        return _jsx(Empty, { children: "\u00A0" });
+    return _jsx(ReadingInbox, {});
+}

package/dist/Market.d.ts

@@ -0,0 +1,3 @@
+export declare function Market({ scope }: {
+    scope: 'all' | 'installed';
+}): import("react").JSX.Element;

package/dist/Market.js

@@ -0,0 +1,149 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The shelf: agents an org can bring into Hanzo, and the ones it already has.
+//
+// EVERY ROW IS REAL. The listings come from the platform's canonical copy of
+// registry.modelcontextprotocol.io — tens of thousands of published servers —
+// so this file names no vendor and hardcodes no catalogue. A brand appears here
+// the day its publisher pushes an MCP server, and disappears when they pull it,
+// without this surface being edited.
+//
+// INSTALL IS THE PLATFORM'S ONE INSTALL. `POST /v1/tools/mcp/servers` with a
+// listing id creates the SAME MCPServer row that typing a URL by hand creates,
+// so an org has one place its servers live however they got there.
+//
+// A STDIO-ONLY LISTING CANNOT BE INSTALLED HERE and the card says so rather
+// than offering a button that fails: a remote endpoint is something this app can
+// reach, a stdio package is a process someone still has to run.
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { say } from './failure.js';
+import { Check, Search } from 'lucide-react';
+import { Box, Text, XStack, YStack } from '@hanzo/ui';
+import { useIam } from '@hanzo/iam/react';
+import { hasSession } from './lib/session.js';
+import { useAi } from './lib/ai.js';
+/** A listing reachable over HTTP is one this app can connect on its own. */
+const reachable = (listing) => (listing.transports ?? []).includes('streamable-http');
+/** Labels a namespace carries that name no brand: `com.cloudflare.mcp` is
+ *  Cloudflare, and `io.sanity.www` is Sanity. */
+const PLUMBING = new Set(['mcp', 'www', 'api', 'app', 'cloud', 'io', 'server']);
+const label = (listing) => {
+    if (listing.title)
+        return listing.title;
+    // A listing without a title still has a publisher, and a reverse-DNS vendor
+    // names it — but the LAST label is not always the brand: `com.cloudflare.mcp`
+    // ends in the word every entry here would end in. So read from the right and
+    // take the first label that is a name rather than plumbing.
+    const brand = (listing.vendor ?? '')
+        .split('.')
+        .reverse()
+        .find((part) => part && !PLUMBING.has(part));
+    if (brand)
+        return brand.charAt(0).toUpperCase() + brand.slice(1);
+    return listing.name?.split('/').pop() || listing.id;
+};
+function Empty({ children }) {
+    return (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$6", children: _jsx(Text, { fontSize: "$3", color: "$soft", text: "center", children: children }) }));
+}
+/** The publisher's mark, or its initial. Never a generated face for a brand. */
+function Mark({ listing }) {
+    return (_jsx(YStack, { width: 40, height: 40, shrink: 0, rounded: "$3", bg: "$panel", items: "center", justify: "center", overflow: "hidden", children: listing.logo ? (_jsx("img", { src: listing.logo, alt: "", width: 40, height: 40 })) : (_jsx(Text, { fontSize: "$4", fontWeight: "500", color: "$soft", children: label(listing).slice(0, 1).toUpperCase() })) }));
+}
+function Card({ listing, installed, onInstall, busy, }) {
+    const canInstall = reachable(listing);
+    return (_jsxs(YStack, { width: 300, gap: "$3", p: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", children: [_jsxs(XStack, { gap: "$3", items: "flex-start", children: [_jsx(Mark, { listing: listing }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: label(listing) }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: listing.vendor ?? '' })] })] }), _jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 3, children: listing.description || 'No description published.' }), installed ? (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Check, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Installed" })] })) : canInstall ? (_jsx(Box, { render: "button", onClick: onInstall, self: "flex-start", px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$2", color: "$ink", children: busy ? 'Installing' : 'Install' }) })) : (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Ships as a ", (listing.packages ?? [])[0]?.registry ?? 'stdio', " package \u2014 needs a runner before it can be connected."] }))] }));
+}
+export function Market({ scope }) {
+    const { client } = useAi();
+    // SIGNED IN IS THE CREDENTIAL, NOT THE PROFILE. This gated on `user`, which is
+    // the answer to a userinfo REQUEST — and `IamProvider` swallows that request's
+    // failure, so a blip or a slow reply left `isAuthenticated` true and `user`
+    // null, and this pane told somebody holding a perfectly good token to sign in.
+    // The token is what the API accepts; the profile is decoration on top of it.
+    const { isAuthenticated, isLoading } = useIam();
+    const [ask, setAsk] = useState('');
+    const [listings, setListings] = useState(null);
+    const [mine, setMine] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [busy, setBusy] = useState(null);
+    const [failed, setFailed] = useState(null);
+    // The shelf is org-scoped, so a signed-out reader has none to read. Asking
+    // anyway answers 403 and the SDK's sentence is written for whoever wired the
+    // client, not for a reader.
+    const ready = Boolean(client && isAuthenticated);
+    const reload = useCallback(() => {
+        if (!ready || !client)
+            return;
+        client.tools
+            .mcp()
+            .then(setMine)
+            .catch(() => setMine([]));
+    }, [client, ready]);
+    useEffect(reload, [reload]);
+    useEffect(() => {
+        if (!ready || !client)
+            return;
+        let live = true;
+        // The catalog is the one paginated surface here, so it is read whole and
+        // the page size is stated rather than left to the default.
+        client.tools
+            // BROWSING SHOWS THE SHELF; SEARCHING SHOWS THE WAREHOUSE.
+            //
+            // The registry holds tens of thousands of servers, and a grid of all of
+            // them is a directory listing rather than a storefront — the first screen
+            // would be whatever sorts first alphabetically. So an empty box asks for
+            // the curated ones and typing asks the whole catalog: same route, one
+            // parameter, and the count below says which shelf you are looking at.
+            .catalog({ q: ask || undefined, featured: ask ? undefined : true, limit: 60 })
+            .then((page) => {
+            if (!live)
+                return;
+            setListings(page.catalog ?? []);
+            setTotal(page.total ?? 0);
+        })
+            .catch((e) => live && setFailed(e.message));
+        return () => {
+            live = false;
+        };
+    }, [client, ready, ask]);
+    const installed = useMemo(() => new Set(mine.map((server) => server.listing).filter(Boolean)), [mine]);
+    const install = useCallback(async (listing) => {
+        if (!client)
+            return;
+        setBusy(listing.id);
+        try {
+            await client.http.json({
+                method: 'POST',
+                path: '/v1/tools/mcp/servers',
+                body: { listing: listing.id },
+            });
+            reload();
+        }
+        catch (e) {
+            setFailed(e.message);
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [client, reload]);
+    const shown = useMemo(() => {
+        const all = listings ?? [];
+        return scope === 'installed' ? all.filter((l) => installed.has(l.id)) : all;
+    }, [listings, installed, scope]);
+    const signedIn = isAuthenticated || hasSession();
+    if (isLoading)
+        return _jsx(Empty, { children: "\u00A0" });
+    if (!signedIn)
+        return _jsx(Empty, { children: "Sign in to browse agents you can add." });
+    if (failed)
+        return _jsx(Empty, { children: say(failed, 'the marketplace') });
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { p: "$5", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$7", lineHeight: "$7", fontWeight: "500", color: "$ink", children: "Put AI to work in Hanzo" }), _jsx(Text, { fontSize: "$3", color: "$soft", children: "Browse agents that bring your tools into Hanzo." }), _jsxs(XStack, { mt: "$2", width: 420, maxW: "100%", height: 36, items: "center", gap: "$2", px: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: ask, onChange: (e) => setAsk(e.target.value), placeholder: "Search agents" }), flex: 1, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit" })] })] }), !listings ? (_jsx(Empty, { children: "Reading the shelf." })) : shown.length === 0 ? (_jsx(Empty, { children: scope === 'installed'
+                    ? 'No agents installed yet.'
+                    : ask
+                        ? 'Nothing in the registry matches that.'
+                        : 'The shelf is empty — the catalog has not been synced yet.' })) : (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", p: "$5", gap: "$3", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: scope === 'installed'
+                            ? `${shown.length} installed`
+                            : ask
+                                ? `${shown.length} of ${total} matching`
+                                : `${shown.length} featured` }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: shown.map((listing) => (_jsx(Card, { listing: listing, installed: installed.has(listing.id), busy: busy === listing.id, onInstall: () => void install(listing) }, listing.id))) })] }))] }));
+}

package/dist/Me.d.ts

@@ -0,0 +1,27 @@
+import { type Host } from '@hanzo/build';
+/** One organization as the menu draws it. */
+export interface Org {
+    name: string;
+    display: string;
+    personal: boolean;
+    role: string;
+}
+/** The first letters of a name, at most two: Antje Worring → AW. */
+export declare const initials: (name: string) => string;
+/** The person's picture, or their initials. */
+export declare function Face({ host, size }: {
+    host: Host;
+    size?: number;
+}): import("react").JSX.Element;
+export declare function Me({ host, narrow, onOrg, }: {
+    host: Host;
+    /** The collapsed rail's: the face alone, the menu opening beside it. */
+    narrow?: boolean;
+    /** Work in another organization: picked, then the app opened in it. */
+    onOrg: (org: string) => void;
+}): import("react").JSX.Element;
+/**
+ * What became of an organization this tab created: nothing to say once the token
+ * carries it (the app is already in it), and a plain line while it does not.
+ */
+export declare function Made(): import("react").JSX.Element;

package/dist/Me.js

@@ -0,0 +1,251 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The account row at the foot of the app's column, and the menu it opens.
+//
+// The row says who is signed in and where: the person's face or initials, their
+// 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.
+// 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, 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
+// `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 { Popover, SizableText, View, XStack, YStack } from '@hanzo/gui';
+import { Building2, ChevronsUpDown, ExternalLink, Gauge, LifeBuoy, LogOut, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
+import { path, 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, planName } from './lib/plans.js';
+import { ENTRY } from './lib/host.js';
+import { SupportPicker } from './Support.js';
+import { BAD } from './lib/mix.js';
+/** The documentation Get help opens. */
+const DOCS = 'https://docs.hanzo.ai/docs/dev';
+/** Where an organization's own settings live. */
+const ORG_SETTINGS = '/settings/organization';
+/** An organization this tab created, until the token carries it. */
+const MADE = 'hanzo:org:made';
+/** A role as a person reads it: `owner` → Owner. */
+const said = (role) => (role ? role.charAt(0).toUpperCase() + role.slice(1) : '');
+/** The first letters of a name, at most two: Antje Worring → AW. */
+export const initials = (name) => name
+    .split(/[\s@._-]+/)
+    .filter(Boolean)
+    .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 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.
+ */
+function useOrgs(current) {
+    const { roles } = useOrganizations();
+    const names = orgs();
+    const [rows, setRows] = useState([]);
+    const key = names.join(',');
+    useEffect(() => {
+        if (!key)
+            return;
+        const stop = new AbortController();
+        fetch(`${api()}/v1/iam/organizations?limit=100`, { headers: scope(), signal: stop.signal })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((body) => {
+            if (!stop.signal.aborted)
+                setRows(list(body?.organizations));
+        })
+            .catch(() => { });
+        return () => stop.abort();
+    }, [key, current]);
+    const drawn = names.map((name) => {
+        const row = rows.find((r) => r?.name === name);
+        return { name, display: row?.displayName || name, personal: Boolean(row?.isPersonal), role: roles?.[name] ?? '' };
+    });
+    return [...drawn.filter((o) => o.personal), ...drawn.filter((o) => !o.personal)];
+}
+/** The plan of an organization other than the current one: billing, asked in its name. */
+function usePlan(org, enabled) {
+    const [plan, setPlan] = useState('');
+    useEffect(() => {
+        if (!enabled || !org)
+            return;
+        const stop = new AbortController();
+        fetch(`${api()}/v1/billing/tier`, { headers: { ...scope(), 'X-Org-Id': org }, signal: stop.signal })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((t) => {
+            if (!stop.signal.aborted)
+                setPlan(planOf(t));
+        })
+            .catch(() => { });
+        return () => stop.abort();
+    }, [org, enabled]);
+    return plan;
+}
+/** The person's picture, or their initials. */
+export function Face({ host, size = 28 }) {
+    const p = host.person;
+    return (_jsx(XStack, { width: size, height: size, rounded: 9999, items: "center", justify: "center", bg: "$raised", overflow: "hidden", shrink: 0, borderWidth: 1, borderColor: "$borderColor", children: p?.avatar ? (_jsx("img", { src: p.avatar, alt: "", width: size, height: size })) : (_jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: initials(p?.name || p?.email || '') })) }));
+}
+/** One row of the menu: a real button, so Enter, Space and focus are the browser's. */
+function Item({ icon, label, sub, checked, onPress, trail, }) {
+    const radio = checked !== undefined;
+    return (_jsxs(XStack, { render: "button", ...{ role: radio ? 'menuitemradio' : 'menuitem' }, "aria-checked": radio ? checked : undefined, "data-item": "", onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 36, py: "$1.5", rounded: "$4", bg: checked ? '$edge' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { bg: '$hover', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", width: "100%", children: [icon ? (_jsx(XStack, { width: 20, justify: "center", shrink: 0, opacity: 0.8, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, text: "left", children: label }), sub ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: sub })) : null] }), trail] }));
+}
+const Rule = () => _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1", mx: "$1" });
+const Label = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pt: "$1.5", pb: "$1", children: children }));
+/** An organization's mark in the list: its initials on a rounded square. */
+const Mark = ({ org }) => (_jsx(XStack, { width: 20, height: 20, rounded: "$2", items: "center", justify: "center", bg: "$raised", shrink: 0, children: org.personal ? (_jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: initials(org.display) })) : (_jsx(Building2, { size: 12, "aria-hidden": true })) }));
+/** Arrows, Home and End move between the menu's rows; Escape closes it. */
+function rove(e, close) {
+    const rows = [...e.currentTarget.querySelectorAll('[data-item]')];
+    const at = rows.indexOf(document.activeElement);
+    const to = e.key === 'ArrowDown' ? (at + 1) % rows.length : e.key === 'ArrowUp' ? (at - 1 + rows.length) % rows.length : e.key === 'Home' ? 0 : e.key === 'End' ? rows.length - 1 : -2;
+    if (e.key === 'Escape') {
+        e.preventDefault();
+        close();
+        return;
+    }
+    if (to === -2 || !rows.length)
+        return;
+    e.preventDefault();
+    rows[to]?.focus();
+}
+export function Me({ host, narrow = false, onOrg, }) {
+    const menu = useWho();
+    const [creating, setCreating] = useState(false);
+    const [supporting, setSupporting] = useState(false);
+    const row = useRef(null);
+    const content = useRef(null);
+    const current = host.org;
+    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 other = usePlan(personal && personal.name !== current ? personal.name : null, menu.open);
+    const planFor = (o) => (o.name === current ? planOf(tier) : o.personal ? other : '');
+    const who = host.person?.name || host.person?.email || '';
+    const where = [said(here?.role ?? ''), here?.display ?? current].filter(Boolean).join(' · ');
+    // The organization in use takes focus once the menu is drawn — after the
+    // popover has placed its own focus — so the keys reach the rows at once.
+    const land = (node) => {
+        content.current = node;
+        if (!node)
+            return;
+        requestAnimationFrame(() => requestAnimationFrame(() => (node.querySelector('[data-item][aria-checked="true"]') ?? node.querySelector('[data-item]'))?.focus()));
+    };
+    const close = () => {
+        menu.onOpenChange(false);
+        row.current?.focus();
+    };
+    const go = (p) => {
+        menu.onOpenChange(false);
+        host.go(p);
+    };
+    if (!host.person)
+        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 }), where ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: where })) : 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)", overflow: "scroll", 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: () => {
+                                                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)) }), 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(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`,
+ * the creator's own. The token in hand predates it, so it is renewed and the app
+ * reloads in the new organization; `Made` says so if the new token does not carry
+ * it yet.
+ */
+function Create({ open, onOpenChange }) {
+    const [name, setName] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [refused, setRefused] = useState('');
+    useEffect(() => {
+        if (open) {
+            setName('');
+            setRefused('');
+        }
+    }, [open]);
+    const submit = async () => {
+        const words = name.trim();
+        if (!words)
+            return setRefused('Give it a name.');
+        if (busy)
+            return;
+        setBusy(true);
+        setRefused('');
+        try {
+            const org = await createOrg(words);
+            try {
+                sessionStorage.setItem(MADE, JSON.stringify({ org, name: words, from: current() }));
+            }
+            catch {
+                /* the next load simply says nothing */
+            }
+            pick(org);
+            renew();
+            window.location.assign('/');
+        }
+        catch (e) {
+            setRefused(say(e));
+            setBusy(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Create organization" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "You own it. Agents, credits and members belong to it, and you switch to it from this menu." }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "Organization name", placeholder: "Acme", maxLength: 80, onKeyDown: (e) => {
+                        if (e.key === 'Enter')
+                            void submit();
+                    } }), refused ? (_jsx(SizableText, { size: "$1", color: BAD, role: "alert", children: refused })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", rounded: 999, disabled: busy || !name.trim(), onPress: () => void submit(), children: busy ? 'Creating…' : 'Create' })] })] }) }));
+}
+/**
+ * What became of an organization this tab created: nothing to say once the token
+ * carries it (the app is already in it), and a plain line while it does not.
+ */
+export function Made() {
+    const [made, setMade] = useState(null);
+    useEffect(() => {
+        try {
+            const kept = JSON.parse(sessionStorage.getItem(MADE) || 'null');
+            if (!kept?.org)
+                return;
+            if (orgs().includes(kept.org))
+                return sessionStorage.removeItem(MADE);
+            // Still out of the token: go on working where the person was.
+            if (kept.from && current() !== kept.from && orgs().includes(kept.from)) {
+                pick(kept.from);
+                return window.location.reload();
+            }
+            setMade({ org: kept.org, name: kept.name || kept.org });
+        }
+        catch {
+            /* nothing kept */
+        }
+    }, []);
+    if (!made)
+        return null;
+    const dismiss = () => {
+        try {
+            sessionStorage.removeItem(MADE);
+        }
+        catch {
+            /* gone with the tab */
+        }
+        setMade(null);
+    };
+    return (_jsxs(XStack, { "data-slot": "made", role: "status", items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$edge", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$ink", children: `${made.name} was created, and your sign-in does not include it yet, so you are still in this organization. It appears here once IAM adds you to it.` }), _jsx(XStack, { render: "button", "aria-label": "Dismiss", onPress: dismiss, p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 13, "aria-hidden": true }) })] }));
+}