@hanzo/rooms 0.1.0

package/dist/Start.d.ts

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

package/dist/Start.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Starting a run from here — the composer /dev's empty state promised and did
+// not have.
+//
+// The pane already said "Describe it. Ship it." over "in your terminal, your
+// editor, or right here", and `right here` was the one of the three with nothing
+// behind it: the idle state drew install cards and no way to send. The comment
+// that stood in for it said "there is no create-a-run route to offer: a run
+// begins on a machine". THAT IS NO LONGER TRUE — `POST /v1/agents/coding` starts
+// one and answers the session to watch it in, which is the row the working view
+// already renders.
+//
+// WHERE IT RUNS IS THE ONE CHOICE, and it is a field rather than a fork:
+//
+//   no target   the cloud's own sandbox — what a browser gets, because a
+//               browser has no machine to offer
+//   a target    a machine this org has claimed, routed by id
+//
+// Nothing here reads the user agent to decide. The web sends no target because
+// it HAS none; a surface running on a claimed machine sends that machine's id.
+// One endpoint, one field, and the answer comes back rather than being assumed —
+// `routed` says whether a machine actually took it, so asking for one and being
+// given a sandbox is reported instead of drawn as success.
+import { useCallback, useEffect, useState } from 'react';
+import { Text, XStack, YStack } from '@hanzo/ui';
+import { Composer } from '@hanzo/ui/chat';
+import { useOpen } from './open.js';
+import { CodingRefusal, dispatchable, listTargets, startCoding, } from './lib/coding.js';
+import { BAD } from './lib/mix.js';
+/** A field of the start row: 32px, outlined, in the row's own ink. */
+const FIELD = {
+    height: 32,
+    rounded: 8,
+    borderWidth: 1,
+    borderColor: 'var(--white-10)',
+    bg: 'transparent',
+    color: 'inherit',
+    fontSize: '$2',
+};
+const SOFT = '$soft';
+/** The sandbox is a destination like any other, and it is the default one. */
+const SANDBOX = '';
+export function Start() {
+    const { openSession } = useOpen();
+    const [prompt, setPrompt] = useState('');
+    const [repo, setRepo] = useState('');
+    const [where, setWhere] = useState(SANDBOX);
+    const [targets, setTargets] = useState([]);
+    const [busy, setBusy] = useState(false);
+    const [tool, setTool] = useState('dev');
+    const [err, setErr] = useState(null);
+    // The machines this org has claimed. An empty list is an ANSWER — every run
+    // goes to a sandbox — so it is not an error and draws no warning. Only a
+    // refusal is reported, and even then the composer stays usable: a sandbox run
+    // needs no target, so being unable to list machines must not stop a send.
+    useEffect(() => {
+        let live = true;
+        listTargets()
+            .then((t) => live && setTargets(t.filter(dispatchable)))
+            .catch(() => {
+            /* Listing is an enhancement here; the sandbox needs nothing from it. */
+        });
+        return () => {
+            live = false;
+        };
+    }, []);
+    const send = useCallback(async () => {
+        const task = prompt.trim();
+        if (!task || busy)
+            return;
+        setBusy(true);
+        setErr(null);
+        try {
+            const run = await startCoding({
+                prompt: task,
+                repo: repo.trim() || undefined,
+                tool: tool || 'dev',
+                targetId: where || undefined,
+            });
+            setPrompt('');
+            // The run is ACCEPTED, not finished. Opening its session is what puts the
+            // reader where it narrates itself, which is the view this pane replaces.
+            openSession(run.sessionId);
+        }
+        catch (e) {
+            setErr(e instanceof CodingRefusal ? e.message : 'Could not start the run');
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [prompt, repo, tool, where, busy, openSession]);
+    return (_jsxs(YStack, { width: "100%", gap: "$2", children: [_jsx(Composer, { value: prompt, onChange: setPrompt, onSend: () => void send(), busy: busy, placeholder: "Describe what to build\u2026", label: "Describe what to build" }), _jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsxs(Text, { render: _jsx("select", { value: tool, onChange: (e) => setTool(e.currentTarget.value), "aria-label": "Agent Harness" }), ...FIELD, px: 8, children: [_jsx("option", { value: "dev", children: "Dev" }), _jsx("option", { value: "claude", children: "Claude" }), _jsx("option", { value: "codex", children: "Codex" }), _jsx("option", { value: "python", children: "Python" })] }), _jsx(Text, { render: _jsx("input", { value: repo, onChange: (e) => setRepo(e.currentTarget.value), placeholder: "owner/repo (optional)", "aria-label": "Repository" }), ...FIELD, flex: 1, minW: 160, px: 10, outlineStyle: "none" }), targets.length > 0 ? (_jsxs(Text, { render: _jsx("select", { value: where, onChange: (e) => setWhere(e.currentTarget.value), "aria-label": "Where to run" }), ...FIELD, px: 8, children: [_jsx("option", { value: SANDBOX, children: "Sandbox" }), targets.map((t) => (_jsxs("option", { value: t.id, children: [t.label || t.host || t.id, t.capacity ? ` — ${t.capacity}` : ''] }, t.id)))] })) : null] }), err ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: err })) : (_jsx(Text, { fontSize: "$2", color: SOFT, children: targets.length > 0 && where !== SANDBOX
+                    ? 'Runs on your machine.'
+                    : 'Runs in an isolated sandbox with Free AI / Enso.' }))] }));
+}

package/dist/Support.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The strip across the top of every page while a SuperAdmin is inside an
+ * organization that is not theirs: which one, as whom, and the way out. It reads
+ * the token's `assumed` claim, so it is there exactly as long as IAM's re-scoped
+ * token is.
+ */
+export declare function SupportBanner(): import("react").JSX.Element;
+/**
+ * Every organization, for a SuperAdmin to step into. The list and the search are
+ * IAM's, a page at a time; picking one asks IAM to step in.
+ */
+export declare function SupportPicker({ onClose }: {
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/Support.js

@@ -0,0 +1,122 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Support mode: a SuperAdmin steps into any organization to see what it sees.
+//
+// Everything here is IAM's. The list is IAM's organization list, which answers a
+// SuperAdmin every organization and anyone else only their own; the step in and
+// the step out are IAM's `assume` and `release`, which answer the operator's own
+// token re-scoped and record each step in the organization's audit log
+// (lib/auth/session.ts `support`). This file only draws them, and only for the
+// person IAM signs as a SuperAdmin (`superAdmin`); nothing here decides who may.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Text, View, XStack, YStack } from '@hanzo/gui';
+import { Button } from '@hanzo/ui';
+import { X } from 'lucide-react';
+import { useHydrated } from './lib/hydrated.js';
+import { api } from './lib/api.js';
+import { abandon, assumed, bearer, named, support } from './lib/session.js';
+import { BAD, mix } from './lib/mix.js';
+/** The banner rides above the room's sheets, the picker between them. gui carries a `calc()` to the page unchanged;
+ *  its types only name custom properties. */
+const BANNER = 'calc(var(--z-modal) + 30)';
+const DIALOG = 'calc(var(--z-modal) + 20)';
+const SCRIM = mix('var(--pure-black)', 28, 'srgb');
+const muted = 'var(--muted-foreground)';
+/** A page of IAM's organization list: `q` narrows it, `cursor` continues it. */
+async function page(q, cursor) {
+    const query = new URLSearchParams({ limit: '20' });
+    if (q.trim())
+        query.set('q', q.trim());
+    if (cursor)
+        query.set('cursor', cursor);
+    const res = await fetch(`${api()}/v1/iam/organizations?${query}`, {
+        headers: { Authorization: `Bearer ${bearer() ?? ''}` },
+    });
+    if (!res.ok)
+        throw new Error(`IAM answered ${res.status}.`);
+    return (await res.json());
+}
+/**
+ * The strip across the top of every page while a SuperAdmin is inside an
+ * organization that is not theirs: which one, as whom, and the way out. It reads
+ * the token's `assumed` claim, so it is there exactly as long as IAM's re-scoped
+ * token is.
+ */
+export function SupportBanner() {
+    const hydrated = useHydrated();
+    const [org, setOrg] = useState(null);
+    const [who, setWho] = useState('');
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (!hydrated)
+            return;
+        setOrg(assumed());
+        setWho(named()?.email || named()?.name || '');
+    }, [hydrated]);
+    if (!org)
+        return null;
+    // Leaving asks IAM to release. When IAM cannot answer, the way out is the
+    // person's own session: the SDK's next refresh assumes nothing.
+    const leave = () => {
+        setBusy(true);
+        support(null).catch(() => abandon());
+    };
+    return (_jsxs(XStack, { role: "status", "aria-label": "Support mode", position: "fixed", t: 52, l: "50%", x: "-50%", maxW: "calc(100vw - 32px)", z: BANNER, items: "center", justify: "center", gap: 12, flexWrap: "wrap", pt: 6, pr: 8, pb: 6, pl: 16, rounded: 999, bg: "var(--foreground)", children: [_jsxs(Text, { fontSize: "$2", color: "var(--background)", children: ["Support mode: you are in ", _jsx("strong", { children: org }), who ? ` as ${who}` : '', ". IAM records it under your name."] }), _jsx(Button, { size: "sm", onClick: leave, disabled: busy, children: busy ? 'Leaving' : 'Leave' })] }));
+}
+/**
+ * Every organization, for a SuperAdmin to step into. The list and the search are
+ * IAM's, a page at a time; picking one asks IAM to step in.
+ */
+export function SupportPicker({ onClose }) {
+    const [q, setQ] = useState('');
+    const [rows, setRows] = useState([]);
+    const [cursor, setCursor] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [refused, setRefused] = useState(null);
+    const [stepping, setStepping] = useState(null);
+    // Only the newest read lands: a search typed while a page is in flight
+    // supersedes it, so a slow answer to an old query never overwrites the new one.
+    const asked = useRef(0);
+    const load = useCallback(async (query, from) => {
+        const mine = ++asked.current;
+        setLoading(true);
+        setRefused(null);
+        try {
+            const next = await page(query, from);
+            if (mine !== asked.current)
+                return;
+            setRows((had) => {
+                // IAM's cursor is a position, so an org created mid-walk can shift a row
+                // across a page edge; each org is kept once.
+                const all = from ? [...had, ...(next.organizations ?? [])] : next.organizations ?? [];
+                return all.filter((o, i) => all.findIndex((x) => x.name === o.name) === i);
+            });
+            setCursor(next.cursor ?? '');
+        }
+        catch (e) {
+            if (mine === asked.current)
+                setRefused(e instanceof Error ? e.message : 'The list did not load.');
+        }
+        finally {
+            if (mine === asked.current)
+                setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        const id = setTimeout(() => void load(q, ''), 250);
+        return () => clearTimeout(id);
+    }, [q, load]);
+    const enter = (org) => {
+        setStepping(org);
+        setRefused(null);
+        support(org).catch((e) => {
+            setRefused(e instanceof Error ? e.message : 'IAM did not step in.');
+            setStepping(null);
+        });
+    };
+    return (_jsx(YStack, { role: "dialog", "aria-modal": true, "aria-label": "All organizations", onKeyDown: (e) => {
+            // gui types the native event; on the web it is the DOM's, which carries the key.
+            if ('key' in e && e.key === 'Escape')
+                onClose();
+        }, position: "fixed", inset: 0, z: DIALOG, bg: SCRIM, overflowY: "auto", py: "6vh", px: 16, onClick: onClose, children: _jsxs(YStack, { onClick: (e) => e.stopPropagation(), width: "100%", maxW: 560, mx: "auto", bg: "var(--background)", rounded: 16, pt: 24, px: 24, pb: 16, children: [_jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 12, children: [_jsxs(YStack, { shrink: 1, minW: "auto", children: [_jsx(Text, { render: "h2", fontSize: "$7", fontWeight: "500", color: "var(--text-primary)", children: "All organizations" }), _jsx(Text, { render: "p", mt: 6, fontSize: "$3", color: muted, lineHeight: 21, children: "Support mode. Step into any organization to see its chats, agents and billing as it does. IAM records every step under your name." })] }), _jsx(Button, { variant: "ghost", size: "icon-sm", mr: -8, onClick: onClose, "aria-label": "Close", children: _jsx(X, { size: 16, "aria-hidden": true }) })] }), _jsx(Text, { render: _jsx("input", { value: q, onChange: (e) => setQ(e.target.value), placeholder: "Find an organization", "aria-label": "Find an organization", autoFocus: true }), width: "100%", mt: 16, fontSize: "$3", px: 12, py: 10, rounded: 10, borderWidth: 1, borderColor: "var(--border)", bg: "var(--background)", color: "var(--foreground)" }), _jsxs(View, { role: "list", "aria-label": "Organizations", mt: 10, display: "grid", gap: 2, children: [rows.map((o) => (_jsxs(XStack, { render: "button", role: "listitem", onClick: () => enter(o.name), disabled: stepping !== null, items: "baseline", justify: "space-between", gap: 12, width: "100%", px: 12, py: 10, rounded: 10, borderWidth: 0, bg: "transparent", cursor: "pointer", children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "var(--foreground)", text: "left", children: o.displayName || o.name }), _jsx(Text, { fontSize: "$2", color: muted, text: "left", children: stepping === o.name ? 'Stepping in' : o.name })] }, o.name))), !loading && rows.length === 0 && !refused ? (_jsx(Text, { render: "p", mx: 12, my: 8, fontSize: "$3", color: muted, children: "No organization matches." })) : null] }), refused ? (_jsx(Text, { render: "p", mx: 12, my: 8, fontSize: "$3", color: BAD, children: refused })) : null, cursor ? (_jsx(Button, { self: "flex-start", mt: 8, onClick: () => void load(q, cursor), disabled: loading, children: loading ? 'Loading' : 'More' })) : null] }) }));
+}

package/dist/Talk.d.ts

@@ -0,0 +1,4 @@
+import { type TeamRoom } from './rooms.js';
+export declare function Talk({ room }: {
+    room: TeamRoom;
+}): import("react").JSX.Element;

package/dist/Talk.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A room, read and answered.
+//
+// The org's rooms live on /home: the rail lists them, this pane reads one, and
+// the composer answers in it. It draws the same three parts every other room on
+// this site draws — the header, the transcript, the one composer — from the
+// same components, so a room is not a second design.
+//
+// WHO SAID IT is the roster's answer (`roster.ts`). A message carries the
+// account that wrote it, and the name and face beside each row are looked up
+// there, once, for people and agents alike; an account the roster lacks is
+// printed as the id it is. The transcript is polled by `rooms.ts`, so an answer
+// — a teammate's or an agent's — lands without a reload.
+//
+// WHAT YOU SAY IS DRAWN AT ONCE, in the quiet ink and without a stamp, and it
+// stays only if the platform keeps it: the accepted row replaces it, a refusal
+// drops it and hands the words back to the field. Nothing the platform did not
+// accept is on screen for longer than one round trip.
+import { 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 { Users } from 'lucide-react';
+import { useIam } from '@hanzo/iam/react';
+import { Face } from './cast.js';
+import { SpeakButton } from './speech.js';
+import { say } from './failure.js';
+import { useOpen } from './open.js';
+import { Beside } from './Shell.js';
+import { memberOf, useMe, useRoster } from './roster.js';
+import { useRoomMessages } from './rooms.js';
+import { BAD } from './lib/mix.js';
+/** The clock a transcript reads by: the time for today, the date before that. */
+function when(ms) {
+    const then = new Date(ms);
+    const sameDay = new Date().toDateString() === then.toDateString();
+    return then.toLocaleString(undefined, sameDay ? { hour: 'numeric', minute: '2-digit' } : { month: 'short', day: 'numeric' });
+}
+/**
+ * WHAT A ROOM IS CALLED. A channel carries a name; a direct message does not —
+ * its members are its name — so one falls back to the other rather than drawing
+ * an empty header. The sigil is how a client DRAWS a room and is not stored, so
+ * it is added here and only where there is a name to put it on.
+ */
+const titleOf = (room) => room.name ? `#${room.name}` : room.direct ? 'Direct message' : 'Room';
+/** Adds `@name ` to a draft, after a space where the draft needs one. */
+const mention = (draft, name) => `${draft && !/\s$/.test(draft) ? `${draft} ` : draft}@${name} `;
+export function Talk({ room }) {
+    const { messages, failed, send } = useRoomMessages(room.id, room.space);
+    const { members, wrong } = useRoster();
+    const me = useMe();
+    const { aside, showAside } = useOpen();
+    const [draft, setDraft] = useState('');
+    const [pending, setPending] = useState([]);
+    const [refused, setRefused] = useState(null);
+    const minted = useRef(0);
+    const agents = (members ?? []).filter((one) => one.agent);
+    const mine = me ? memberOf(members, me) : undefined;
+    const speak = async () => {
+        const text = draft.trim();
+        if (!text)
+            return;
+        const key = ++minted.current;
+        setDraft('');
+        setRefused(null);
+        setPending((held) => [...held, { key, text }]);
+        try {
+            await send(text);
+        }
+        catch (e) {
+            setDraft(text);
+            setRefused(say(e, 'this room', 'save'));
+        }
+        finally {
+            setPending((held) => held.filter((one) => one.key !== key));
+        }
+    };
+    const name = (of) => setDraft((held) => mention(held, of));
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(ChannelHeader, { name: titleOf(room), children: [room.topic ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: room.topic })) : null, _jsx(Box, { render: "button", "aria-label": aside === 'roster' ? 'Hide directory & roster' : 'Show directory & roster', "aria-pressed": aside === 'roster', onClick: () => showAside(aside === 'roster' ? null : 'roster'), ml: "auto", p: "$2", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(Users, { size: 16, "aria-hidden": true }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", p: "$4", gap: "$3", children: [failed ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: say(failed, 'this room') })) : messages === null ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the room." })) : messages.length === 0 && pending.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing has been said here yet." })) : (messages.map((one) => (_jsx(Line, { member: memberOf(members, one.author), fallback: one.author, stamp: when(one.createdOn), text: one.text }, one.id)))), pending
+                        .filter((one) => !messages?.some((said) => said.author === me && said.text === one.text))
+                        .map((one) => (_jsx(Line, { member: mine, fallback: "You", text: one.text, soft: true }, `pending-${one.key}`)))] }), _jsxs(YStack, { p: "$3", gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Composer, { value: draft, onChange: setDraft, onSend: () => void speak(), placeholder: `Message ${titleOf(room)}`, label: `Message ${titleOf(room)}`, hint: agents.length ? 'Mention an agent with @name and it answers.' : undefined, children: agents.length ? (_jsx(XStack, { gap: "$1", flexWrap: "wrap", shrink: 1, minW: 0, children: agents.map((one) => (_jsx(Box, { render: "button", "aria-label": `Mention ${one.name}`, onClick: () => name(one.name), px: "$2", py: "$1", rounded: "$10", hoverStyle: { bg: '$hover' }, children: _jsxs(Text, { fontSize: "$2", color: "$soft", children: ["@", one.name] }) }, one.id))) })) : null }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] }), _jsx(Beside, { children: aside === 'roster' ? _jsx(Roster, { members: members, wrong: wrong, onMention: name }) : null })] }));
+}
+/** One thing said: a face, a name, the stamp where the platform gave one. */
+function Line({ member, fallback, stamp, text, soft, }) {
+    const ink = soft ? '$soft' : '$ink';
+    return (_jsxs(XStack, { gap: "$3", items: "flex-start", children: [_jsx(Face, { src: member?.avatar, name: member?.name ?? fallback, size: 32, person: true }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsxs(XStack, { gap: "$2", items: "baseline", children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: ink, numberOfLines: 1, children: member?.name ?? fallback }), member?.agent ? (_jsx(Box, { px: "$1.5", py: "$0.5", rounded: "$2", bg: "$hover", children: _jsx(Text, { fontSize: "$1", color: "$soft", fontWeight: "600", children: "Agent" }) })) : null, stamp ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: stamp })) : null] }), _jsx(Text, { fontSize: "$3", color: ink, children: text }), _jsx(XStack, { mt: "$1", children: _jsx(SpeakButton, { text: text, agentName: member?.name ?? fallback, compact: true }) })] })] }));
+}
+/**
+ * Who is here, beside the room. An agent is pressable — pressing it names it in
+ * the draft, which is how it is asked something — and a person is a person:
+ * IAM publishes no route that messages one, so the row identifies rather than
+ * opens.
+ */
+function Roster({ members, wrong, onMention, }) {
+    const { isAuthenticated } = useIam();
+    const line = !isAuthenticated
+        ? 'Sign in to see who is here.'
+        : wrong
+            ? say(wrong, "this org's roster")
+            : members === null
+                ? 'Reading the roster.'
+                : members.length < 2
+                    ? 'Just you.'
+                    : null;
+    return (_jsxs(YStack, { children: [_jsx(XStack, { height: 48, shrink: 0, items: "center", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: _jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Roster" }) }), line ? (_jsx(Text, { p: "$3", fontSize: "$2", color: "$soft", children: line })) : (_jsx(YStack, { p: "$2", gap: "$0.5", children: (members ?? []).map((one) => (_jsx(Box, { render: one.agent ? 'button' : 'div', onClick: one.agent ? () => onMention(one.name) : undefined, "aria-label": one.agent ? `Mention ${one.name}` : undefined, width: "100%", minW: 0, items: "flex-start", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: one.agent ? { bg: '$hover' } : undefined, children: _jsxs(XStack, { items: "center", gap: "$2", width: "100%", children: [_jsx(Face, { src: one.avatar, name: one.name, size: 24, person: true }), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, flex: 1, minW: 0, text: "left", children: one.name }), one.agent ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "agent" })) : null] }) }, one.id))) }))] }));
+}

package/dist/Upgrade.d.ts

@@ -0,0 +1,11 @@
+/** What the reader reached for: a model by its name, and the checkout a refusal named. */
+export interface Ask {
+    model?: string;
+    href?: string;
+}
+/** Whether a signed-in reader's organization is on the Free plan. A tier not yet read, or refused, is not Free. */
+export declare function useFree(signedIn: boolean): boolean;
+export declare function Upgrade({ ask, onClose }: {
+    ask: Ask | null;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/Upgrade.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The ask to upgrade, for a reader on the Free plan.
+//
+// A Free reader who reaches for something Free does not include is shown the
+// first personal plan that charges (`usePlan('personal')`), priced by the
+// catalog for a month or for a year, with checkout at hanzo.ai/pay. `useFree`
+// says who is on Free; `Upgrade` draws the ask it is handed and nothing when it
+// is handed none. A refusal's ask is read by `planRequired` in `failure.ts`.
+import { useEffect, useState } from 'react';
+import { Blocks, Brain, Gauge, ListChecks, Sparkles, X } from 'lucide-react';
+import { Anchor, Box, Dialog, DialogContent, DialogTitle, Text, ToggleGroup, ToggleGroupItem, XStack, YStack } from '@hanzo/ui';
+import { track } from './lib/tags.js';
+import { org } from './lib/session.js';
+import { useTier } from './lib/tier.js';
+import { charge, planCheckoutUrl, quote, saving, term, usePlan } from './lib/plans.js';
+import { site } from './where.js';
+/** The free rung's name in the billing catalog. */
+const FREE = 'free';
+/** Whether a signed-in reader's organization is on the Free plan. A tier not yet read, or refused, is not Free. */
+export function useFree(signedIn) {
+    const { tier } = useTier(signedIn, org());
+    return signedIn && tier?.tier?.name === FREE;
+}
+const ROWS = [
+    [Gauge, 'Higher usage limits'],
+    [Sparkles, 'Access to all Hanzo models'],
+    [Brain, 'Memory that carries across conversations'],
+    [Blocks, 'Build and prototype with Hanzo Studio'],
+    [ListChecks, 'Power through tasks with Hanzo Team'],
+];
+/** The page checkout returns to: this one, query and all. */
+function here() {
+    if (typeof window === 'undefined')
+        return undefined;
+    const { origin, pathname, search } = window.location;
+    return `${origin}${pathname}${search}`;
+}
+export function Upgrade({ ask, onClose }) {
+    const { plan } = usePlan('personal');
+    const [cycle, setCycle] = useState('month');
+    const shown = ask !== null && plan !== null;
+    // The plan is shown to a reader who reached for it: GA4's view_item.
+    useEffect(() => {
+        if (shown && plan)
+            track('product_viewed', {
+                currency: 'USD',
+                value: charge(plan, 'month'),
+                items: [{ item_id: plan.id, item_name: plan.name }],
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown]);
+    if (!plan)
+        return null;
+    const save = saving(plan);
+    const interval = save === null ? 'month' : cycle;
+    const label = `Upgrade to ${plan.name} for ${quote(plan, interval)}`;
+    const href = term(ask?.href ?? planCheckoutUrl(plan, here()), interval);
+    const buy = () => {
+        const items = [{ item_id: plan.id, item_name: plan.name }];
+        track('plan_clicked', { plan: plan.id, interval, cta: label, items });
+        track('checkout_started', { currency: 'USD', value: charge(plan, interval), items, interval });
+    };
+    return (_jsx(Dialog, { open: ask !== null, onOpenChange: (open) => (open ? undefined : onClose()), children: _jsxs(DialogContent, { showCloseButton: false, width: "calc(100vw - 32px)", maxW: 440, bg: "var(--popover)", rounded: "$9", p: "$5", gap: "$5", $sm: { p: '$6' }, children: [_jsx(Box, { render: "button", "aria-label": "Close", onClick: onClose, position: "absolute", t: "$4", r: "$4", p: "$1.5", rounded: "$2", bg: "transparent", borderWidth: 0, cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 18, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }) }), _jsx(DialogTitle
+                // inline-style: design's serif face. gui names Zen and Zen Mono only; a family it cannot name resets the rung to 15px.
+                , { 
+                    // inline-style: design's serif face. gui names Zen and Zen Mono only; a family it cannot name resets the rung to 15px.
+                    style: { fontFamily: 'var(--font-serif)' }, fontSize: "$8", lineHeight: "$9", fontWeight: "400", color: "$ink", pr: "$6", children: ask?.model ? `Use ${ask.model} with Hanzo ${plan.name}` : `Upgrade to Hanzo ${plan.name}` }), _jsx(YStack, { render: "ul", gap: "$3.5", m: 0, p: 0, children: ROWS.map(([Icon, line]) => (_jsxs(XStack, { render: "li", items: "center", gap: "$3", children: [_jsx(Icon, { size: 18, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { fontSize: "$4", color: "$ink", children: line })] }, line))) }), save === null ? null : (_jsx(ToggleGroup, { type: "single", value: cycle, onValueChange: (v) => {
+                        if (v === 'month' || v === 'year')
+                            setCycle(v);
+                    }, disableDeactivation: true, "aria-label": "Billing term", ...{ width: '100%', p: 4, rounded: 9999, bg: 'var(--surface-2)' }, children: [
+                        ['month', 'Monthly'],
+                        ['year', `Yearly · Save ${save}%`],
+                    ].map(([value, name]) => (_jsx(ToggleGroupItem, { value: value, variant: "outline", flex: 1, rounded: "$10", borderColor: "transparent", children: name }, value))) })), _jsxs(YStack, { gap: "$3", children: [_jsx(Anchor, { href: href, onPress: buy, "data-ga": true, bg: "var(--primary)", color: "var(--primary-foreground)", rounded: "$4", py: "$3", px: "$4", fontSize: "$4", fontWeight: "500", text: "center", textDecorationLine: "none", hoverStyle: { bg: 'var(--primary-hover)' }, children: label }), _jsxs(XStack, { justify: "center", gap: "$5", children: [_jsx(Anchor, { href: site("/pricing"), fontSize: "$3", color: "$soft", hoverStyle: { color: '$ink' }, children: "See all plans" }), _jsx(Box, { render: "button", onClick: onClose, bg: "transparent", borderWidth: 0, p: 0, cursor: "pointer", children: _jsx(Text, { fontSize: "$3", color: "$soft", hoverStyle: { color: '$ink' }, children: "Not now" }) })] })] }), _jsx(Text, { fontSize: "$1", color: "$soft", text: "center", children: "Prices and plans are subject to change at Hanzo's discretion." })] }) }));
+}

package/dist/Usage.d.ts

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

package/dist/Usage.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// Free's usage, said where it is spent. Free is limited, and what it spends
+// comes from one pool every free user shares, so the line says both, and what
+// is left of today's when billing states a day window for the plan (the tier's
+// `windows`, lib/hanzo/tier.ts). It renders nothing for any other plan, or
+// while the plan is unread.
+import { useIam } from '@hanzo/iam/react';
+import { Text } from '@hanzo/ui';
+import { org } from './lib/session.js';
+import { useTier } from './lib/tier.js';
+/** The free rung's name in the billing catalog. */
+const FREE = 'free';
+export function Usage() {
+    const { isAuthenticated } = useIam();
+    const { tier } = useTier(isAuthenticated, org());
+    if (tier?.tier?.name !== FREE)
+        return null;
+    const today = tier.windows?.find((w) => /day/i.test(w.span));
+    return (_jsxs(Text, { role: "status", fontSize: "$1", color: "$soft", text: "center", children: ["Free \u00B7 limited, shared pool", today ? ` · ${today.remaining} of ${today.limit} left today` : ''] }));
+}

package/dist/Vibe.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function VibeWorkspace(): React.JSX.Element;