@hanzo/rooms 0.1.38 → 0.1.39

package/dist/Settings.js

@@ -21,7 +21,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //
 // The panes that are not yet built say so in one sentence rather than pretending
 // to a screen. An honest empty pane is a smaller lie than an invented one.
-import { dev } from './lib/host.js';
+import { app, dev } from './lib/host.js';
 import { useMemo, useState } from 'react';
 import { ArrowLeft, ArrowUpRight, ExternalLink } from 'lucide-react';
 import { Box, Button, Separator, Text, XStack, YStack, } from '@hanzo/ui';
@@ -33,17 +33,16 @@ import { useModels } from '@hanzo/ai/react';
 import { ModelPicker } from '@hanzo/ui/models';
 import { parseModels } from '@hanzo/ui/models/catalog';
 import { UsagePanel } from '@hanzo/usage/panel';
+import { administers, Credits, label, Plan, Title, useChoice } from '@hanzo/build';
 import { Catalog } from './Directory.js';
-import { useModel } from './model.js';
-import { checkoutUrl, payPage } from './lib/pay.js';
-import { planName } from './lib/plans.js';
+import { payPage } from './lib/pay.js';
 import { api } from './lib/api.js';
 import { renewal, useSubscription, useTier } from './lib/tier.js';
-import { paidPlan, setCreditsAfterAllowance, spendShown, useLimits } from './lib/limits.js';
-import { PlanUsage } from '@hanzo/ui/product/PlanUsage';
+import { spendShown, useLimits } from './lib/limits.js';
+import { showSettings } from './open.js';
 import { Look } from './look.js';
 import { ProviderMark } from './ProviderMark.js';
-import { org, pick } from './lib/session.js';
+import { bearer, org, pick } from './lib/session.js';
 import { site } from './where.js';
 /** A choice among a few: a hairline edge and a corner. The fill and the edge's
  *  ink are the call site's, because they say which one is chosen. */
@@ -77,13 +76,15 @@ const GROUPS = [
             },
         ],
     },
+    // Plugins and skills are what an agent brings to a run, and Customize is
+    // their one home: these rows lead there rather than drawing a second list.
     {
         label: 'Customize',
         rows: [
             { id: 'apps', label: 'Apps' },
             { id: 'channels', label: 'Channels' },
-            { id: 'plugins', label: 'Plugins' },
-            { id: 'skills', label: 'Skills' },
+            { id: 'plugins', label: 'Plugins', href: site(app('-/customize/plugins')) },
+            { id: 'skills', label: 'Skills', href: site(app('-/customize')) },
             { id: 'memory', label: 'Memory', note: 'Nothing is remembered between conversations yet.' },
         ],
     },
@@ -145,9 +146,8 @@ export function SettingsPane({ id }) {
 }
 /** One pane. */
 function Pane({ id, note }) {
-    if (id === 'apps' || id === 'channels' || id === 'plugins' || id === 'skills') {
+    if (id === 'apps' || id === 'channels')
         return _jsx(Catalog, { tab: id });
-    }
     if (id === 'general')
         return _jsx(Look, {});
     if (id === 'account')
@@ -155,7 +155,7 @@ function Pane({ id, note }) {
     if (id === 'billing')
         return _jsx(Billing, {});
     if (id === 'usage')
-        return _jsx(Usage, { meters: true });
+        return _jsx(Usage, {});
     if (id === 'keys')
         return _jsx(Keys, {});
     if (id === 'model')
@@ -178,8 +178,9 @@ function Pane({ id, note }) {
 function Model() {
     const { models: served } = useModels();
     const models = useMemo(() => parseModels(served).filter((m) => m.class !== 'premium'), [served]);
-    const [model, choose] = useModel();
-    return (_jsxs(YStack, { gap: "$3", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Used for new chats. An agent with its own model keeps that choice. Premium models are picked per conversation in the composer." }), _jsx(XStack, { self: "flex-start", children: _jsx(ModelPicker, { models: models, scope: "chat", value: model, onChange: choose, size: "sm" }) })] }));
+    // The one choice Chat and Dev share (@hanzo/build): changed here, changed in both composers.
+    const [choice, choose] = useChoice();
+    return (_jsxs(YStack, { gap: "$3", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Used for new chats and new runs. An agent with its own model keeps that choice. Premium models are picked per conversation in the composer." }), _jsx(XStack, { self: "flex-start", children: _jsx(ModelPicker, { models: models, scope: "chat", value: choice.model, onChange: (id) => choose({ model: id }), size: "sm" }) })] }));
 }
 /**
  * WHAT THE GATEWAY SERVES, read from the same `/v1/models` the rooms read.
@@ -216,37 +217,50 @@ function Account() {
                         return (_jsx(Box, { render: _jsx("button", { type: "button" }), onClick: () => { pick(o.name); switchOrg(o.name); }, ...tap, children: _jsxs(XStack, { items: "center", justify: "space-between", py: "$2", width: "100%", gap: "$2", children: [_jsx(Text, { fontSize: "$3", color: here ? '$ink' : '$soft', children: o.displayName || o.name }), here && currentRole ? _jsx(Text, { fontSize: "$2", color: "$soft", children: currentRole }) : null] }) }, o.name));
                     }))] }), _jsx(Separator, {}), _jsx(XStack, { children: _jsx(Button, { size: "sm", onClick: () => logout(), children: "Sign out" }) })] }));
 }
-/** The plan, and the one control that has to leave. */
+/** Where the plan's and billing's reads go: this browser's bearer, in its organization. */
+function useTarget() {
+    const scoped = org();
+    return useMemo(() => ({ api: api(), token: bearer, org: scoped }), [scoped]);
+}
+/**
+ * The plan and its term, then the credits — @hanzo/build's `Credits`, the one
+ * view every Billing page draws: the balance, grants, auto-reload, this month's
+ * spend and its limit, said to be separate from the plan's usage. Money moves on
+ * the payment host, so adding funds and a card both open it.
+ */
 function Billing() {
     const { isAuthenticated } = useIam();
+    const t = useTarget();
     const { tier } = useTier(isAuthenticated, org());
     const sub = useSubscription(isAuthenticated, org());
-    // WHAT THE CUSTOMER BOUGHT, and its term: a plan is a subscription with usage
-    // limits, so its line is the price and the renewal, never a balance.
-    const plan = tier ? planName(tier.plan) || tier.tier.displayName || tier.tier.name : null;
-    return (_jsxs(YStack, { gap: "$4", children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "What this account is billed for, and what it has spent." }), plan ? (_jsx(Text, { fontSize: "$4", color: "$ink", children: sub ? `${plan} · ${renewal(sub)}` : plan })) : null, _jsx(Usage, { sections: { overview: true, chart: false, categories: true, breakdown: true, activity: false }, title: "Spend" }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Payment" }), _jsx(Text, { fontSize: "$3", color: "$soft", children: "A card is entered on the payment host and nowhere else, so this is the one control here that opens another surface." }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: payPage(), target: "_blank", rel: "noreferrer" }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Manage plan and payment method" }), _jsx(ExternalLink, { size: 13, "aria-hidden": true })] }) }) })] })] }));
+    if (!isAuthenticated)
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see billing." });
+    // WHAT THE CUSTOMER BOUGHT, by its family: `Max` with `20x` beside it.
+    const plan = tier ? label(tier.plan, tier.tier.name) ?? { name: 'Free', tag: '' } : null;
+    return (_jsxs(YStack, { gap: "$5", children: [plan ? (_jsxs(YStack, { gap: "$1", "data-slot": "billing-plan", children: [_jsx(Title, { label: plan, size: "$5" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: sub ? renewal(sub) : tier?.plan ? 'Your plan.' : 'No paid plan. Usage is paid from credits.' })] })) : (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading your plan\u2026" })), _jsx(Credits, { target: t, admin: administers(bearer(), org()), add: payPage() }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Payment" }), _jsx(Text, { fontSize: "$3", color: "$soft", children: "A card is entered on the payment host and nowhere else, so this is the one control here that opens another surface." }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: payPage(), target: "_blank", rel: "noreferrer" }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Manage plan, payment method and invoices" }), _jsx(ExternalLink, { size: 13, "aria-hidden": true })] }) }) })] })] }));
 }
 /**
- * The one usage panel every Hanzo product renders, reading as this account — for a
- * reader with no plan. A plan holder's usage is the plan's shares (`meters` draws
- * them, with the plan's terms and its actions, where usage is the subject), never
- * money (spendShown).
+ * Usage: @hanzo/build's `Plan`, the one view every Usage page draws — the plan's
+ * windows and each class of model's share, as shares; the free allowance on
+ * Free; the balance with no plan — and the choice of paying from credits once
+ * the allowance runs out. A reader with no paid plan also sees what was spent,
+ * over time (@hanzo/usage), because money is their meter.
  */
-function Usage({ sections, title, meters = false }) {
+function Usage() {
     const { accessToken, isAuthenticated } = useIam();
+    const t = useTarget();
     const read = useLimits(isAuthenticated, org());
     if (!isAuthenticated || !accessToken) {
         return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your usage." });
     }
-    const plan = meters && read.limits ? (_jsx(PlanUsage, { limits: read.limits, plan: planName(read.limits.plan) || undefined, notice: read.notice, onCredits: (on) => setCreditsAfterAllowance(on).then(read.reload), creditsHref: payPage(), addCreditsHref: checkoutUrl() })) : null;
-    if (paidPlan(read.limits) || !spendShown(read))
+    const plan = _jsx(Plan, { target: t, onPlans: () => window.location.assign(site('/pricing')), onBilling: () => showSettings('billing') });
+    if (!spendShown(read))
         return plan;
     // The address is read HERE rather than at import: the panel sends the bearer
     // with every read, and a credentialed read to an absolute address from a page
     // the gateway does not admit dies in preflight — which drew this panel as an
     // account that had spent nothing.
-    const spend = _jsx(UsagePanel, { baseUrl: api(), token: accessToken, sections: sections, title: title, upgrade: payPage() });
-    return plan ? (_jsxs(YStack, { gap: "$6", children: [plan, spend] })) : (spend);
+    return (_jsxs(YStack, { gap: "$6", children: [plan, _jsx(UsagePanel, { baseUrl: api(), token: accessToken, upgrade: payPage(), title: "Spend" })] }));
 }
 /** Keys are minted and revoked through the console, which holds the one issuer. */
 function Keys() {

package/dist/Shell.js

@@ -68,7 +68,7 @@ import { Face } from "./cast.js";
 import { useStarred, titleOf } from "./stars.js";
 import { roomName } from "./network.js";
 import { useTeamRooms, teamKey, roomHref } from "./rooms.js";
-import { apex, dev, ENTRY, room as moves, WORKSPACE } from "./lib/host.js";
+import { apex, app, dev, ENTRY, room as moves, WORKSPACE } from "./lib/host.js";
 import { netKey } from "./conversations.js";
 import { FIRST, SettingsList, SettingsPane, } from "./Settings.js";
 import { Profile } from "./Profile.js";
@@ -1083,33 +1083,30 @@ function Frame({ mode, children, navigate, back, forward, }) {
     /**
      * THE SURFACES THAT ARE NOT ROOMS, said once.
      *
-     * Connectors is a page, Skills and Usage are panes of Settings, Terminals is
-     * another product at its own host, Docs is a page. The column groups them
-     * under "More" — where a reader coming from hanzo.app looks — and the palette
-     * offers the same set, so this says WHAT they are and each surface says only
-     * how it draws them. Written twice they had already parted: Settings was in
-     * one list and not the other.
+     * Customize is Dev's page, Usage a pane of Settings, Terminals another
+     * product at its own host, Docs a page. The column draws each as a
+     * row of its own under the quiet label Setup, right under the rooms — nothing
+     * waits behind a More — and the palette offers the same set, so this says
+     * WHAT they are and each surface says only how it draws them. Written twice
+     * they had already parted: Settings was in one list and not the other.
      *
      * ONE VERB PER ROW, and no href beside it. A row that carried both would be
      * two ways to reach one place, and the two would answer differently the day
      * one of them learned to close the sheet behind it.
      */
     const tools = useMemo(() => [
+        // CUSTOMIZE is the one home of what an agent brings to a run — skills,
+        // connectors, plugins, agents — in Dev (@hanzo/build). One row leads
+        // there; a second list here would be the second copy that drifts.
         {
-            id: "connectors",
-            label: "Connectors",
+            id: "customize",
+            label: "Customize",
             icon: Blocks,
             go: () => {
-                navigate?.(site("/integrations"));
+                navigate?.(site(app("-/customize")));
                 dismiss();
             },
         },
-        {
-            id: "skills",
-            label: "Skills",
-            icon: Workflow,
-            go: () => showSettings("skills"),
-        },
         // TERMINALS ARE TABS, and Tabs is its own product at its own host —
         // hanzo.app's row pointed there too. A new tab for the reason that row
         // used one: a reader who follows it inside this one loses the project
@@ -1200,7 +1197,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
     // to disagree about which one you are standing in.
     const workspace = currentOrg?.displayName || currentOrg?.name || "Hanzo";
     const owner = currentOrgId ?? "";
-    // The two folders' rows, narrowed by the column's filter like every other list.
+    // The folder's rows and Setup's, narrowed by the column's filter like every other list.
     const products = CONSOLE_PRODUCTS.filter((prod) => matches(prod.label, filter));
     const more = tools.filter((tool) => matches(tool.label, filter));
     // The static export prerenders the signed-out room, so the rail's identity
@@ -1218,17 +1215,17 @@ function Frame({ mode, children, navigate, back, forward, }) {
                                     return;
                                 e.preventDefault();
                                 navigate("/");
-                            }, "aria-label": `${brand()} home`, title: "Home" }), "data-slot": "home", display: "flex", items: "center", justify: "center", width: 28, height: 28, $touchable: { width: 40, height: 40 }, color: "inherit", children: _jsx(HanzoMark, { size: 18 }) }), settled && isAuthenticated ? (_jsx(XStack, { shrink: 1, minW: 0, children: _jsx(OrgProjectSwitcher, { ...orgState, alwaysShow: true }) })) : null] }), _jsxs(YStack, { "data-slot": "places-list", px: "$2", pb: "$2", "$max-md": { display: "none" }, children: [places.filter((place) => matches(place.label, filter)).map((place) => (_jsx(SidebarItem, { icon: _jsx(place.icon, { size: 16, "aria-hidden": true }), active: place.id === mode, onPress: () => {
-                            navigate?.(place.route);
-                            onPick?.();
-                        }, children: place.label }, place.id))), matches("Settings", filter) ? (_jsx(SidebarItem, { icon: _jsx(Settings2, { size: 16, "aria-hidden": true }), onPress: () => showSettings(FIRST), children: "Settings" })) : null] }), _jsx(XStack, { px: "$3", pb: "$2", children: _jsxs(XStack, { flex: 1, height: 30, items: "center", gap: "$2", px: "$2", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 13, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: filter, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {
+                            }, "aria-label": `${brand()} home`, title: "Home" }), "data-slot": "home", display: "flex", items: "center", justify: "center", width: 28, height: 28, $touchable: { width: 40, height: 40 }, color: "inherit", children: _jsx(HanzoMark, { size: 18 }) }), settled && isAuthenticated ? (_jsx(XStack, { shrink: 1, minW: 0, children: _jsx(OrgProjectSwitcher, { ...orgState, alwaysShow: true }) })) : null] }), _jsx(YStack, { "data-slot": "places-list", px: "$2", pb: "$2", "$max-md": { display: "none" }, children: places.filter((place) => matches(place.label, filter)).map((place) => (_jsx(SidebarItem, { icon: _jsx(place.icon, { size: 16, "aria-hidden": true }), active: place.id === mode, onPress: () => {
+                        navigate?.(place.route);
+                        onPick?.();
+                    }, children: place.label }, place.id))) }), more.length ? (_jsx(YStack, { "data-slot": "setup-list", px: "$2", pb: "$2", children: _jsx(SidebarSection, { label: "Setup", children: more.map((tool) => (_jsx(SidebarItem, { icon: _jsx(tool.icon, { size: 16, "aria-hidden": true }), onPress: tool.go, children: tool.label }, tool.id))) }) })) : null, _jsx(XStack, { px: "$3", pb: "$2", children: _jsxs(XStack, { flex: 1, height: 30, items: "center", gap: "$2", px: "$2", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 13, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: filter, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {
                                     if (e.key === "Escape")
                                         setFilter("");
                                 }, 
                                 // FILTER, not Search. Two controls that both said Search did two
                                 // different things: this one narrows the list beside you, and the
                                 // bar above opens the palette that finds anything anywhere.
-                                placeholder: "Filter", "aria-label": "Filter sidebar" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }) }), settingsPane ? (_jsx(SidebarScroll, { children: _jsx(SettingsList, { active: settingsPane, filter: filter, onPick: pick, onBack: () => showSettings(null) }) })) : (_jsx(_Fragment, { children: _jsx(SidebarScroll, { children: _jsxs(_Fragment, { children: [settled ? (_jsx(Index, { mode: mode, owner: owner, filter: filter, onPick: onPick, navigate: navigate })) : null, products.length ? (_jsx(SidebarFolder, { name: "Cloud & Platform", open: filter ? true : undefined, children: products.map((prod) => (_jsx(SidebarItem, { icon: _jsx(prod.icon, { size: 13, "aria-hidden": true }), onPress: () => window.open(prod.href, "_blank", "noopener"), children: prod.label }, prod.id))) })) : null, more.length ? (_jsx(SidebarFolder, { name: "More", open: filter ? true : undefined, children: more.map((tool) => (_jsx(SidebarItem, { icon: _jsx(tool.icon, { size: 13, "aria-hidden": true }), onPress: tool.go, children: tool.label }, tool.id))) })) : null] }) }) })), settled && onApex ? _jsx(Leave, { href: signedIn ? ENTRY : WORKSPACE, children: "Workspace" }) : null, settled ? (signedIn ? (_jsxs(_Fragment, { children: [superAdmin() ? (_jsx(SidebarItem, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), onPress: () => setSupporting(true), children: "All organizations" })) : null, _jsx(SidebarItem, { icon: _jsx(UserPlus, { size: 15, "aria-hidden": true }), onPress: () => window.open(invite(), "_blank", "noopener"), children: "Invite Teammates" }), _jsx(SidebarItem, { icon: _jsx(Share2, { size: 15, "aria-hidden": true }), onPress: () => {
+                                placeholder: "Filter", "aria-label": "Filter sidebar" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }) }), settingsPane ? (_jsx(SidebarScroll, { children: _jsx(SettingsList, { active: settingsPane, filter: filter, onPick: pick, onBack: () => showSettings(null) }) })) : (_jsx(_Fragment, { children: _jsx(SidebarScroll, { children: _jsxs(_Fragment, { children: [settled ? (_jsx(Index, { mode: mode, owner: owner, filter: filter, onPick: onPick, navigate: navigate })) : null, products.length ? (_jsx(SidebarFolder, { name: "Cloud & Platform", open: filter ? true : undefined, children: products.map((prod) => (_jsx(SidebarItem, { icon: _jsx(prod.icon, { size: 13, "aria-hidden": true }), onPress: () => window.open(prod.href, "_blank", "noopener"), children: prod.label }, prod.id))) })) : null] }) }) })), settled && onApex ? _jsx(Leave, { href: signedIn ? ENTRY : WORKSPACE, children: "Workspace" }) : null, settled ? (signedIn ? (_jsxs(_Fragment, { children: [superAdmin() ? (_jsx(SidebarItem, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), onPress: () => setSupporting(true), children: "All organizations" })) : null, _jsx(SidebarItem, { icon: _jsx(UserPlus, { size: 15, "aria-hidden": true }), onPress: () => window.open(invite(), "_blank", "noopener"), children: "Invite Teammates" }), _jsx(SidebarItem, { icon: _jsx(Share2, { size: 15, "aria-hidden": true }), onPress: () => {
                             navigate?.(site("/referral"));
                             dismiss();
                         }, children: "Share Hanzo" }), _jsx(SidebarItem, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), onPress: () => window.open(BILLING, "_blank", "noopener"), children: "Upgrade" }), _jsx(Account, { onToggleCollapse: toggle, onProfile: () => setProfiling(true), onAppearance: () => showSettings("general"), onUsage: () => showSettings("usage"), onKeys: () => showSettings("keys") })] })) : null) : null] }));

package/dist/dev.js

@@ -7,13 +7,19 @@
 // to leave. The name drawn at the top left is Hanzo Dev: this host is the
 // dev agent. Chat, on the rooms shell, is Hanzo AI.
 //
-// THE ADDRESS IS THE PATH. Dev is `/dev`, and what it shows is the path under
-// it in the builder's own grammar (lib/host.ts `app`, `under`), so a run, a
-// screen, a Settings section, a Customize tab, the plans and a project all
-// survive a reload, and Back steps through them. A move is a native history
-// entry, which the Next router folds into `usePathname`, so reading the address
-// and moving it are one path.
-import { useMemo } from 'react';
+// THE ADDRESS IS A PATH. Dev is /dev, and every place the builder shows is a
+// path under it in the builder's real-path grammar (lib/host.ts `app`, `place`;
+// @hanzo/build/route `href`, `parse`): a run, a screen, a Settings section, a
+// Customize tab, the plans and a project all survive a reload, and Back steps
+// through them. The host hands the rooms the path (`<Rooms path>`); a move is a
+// native history entry, which the Next router folds into `usePathname`, so
+// reading the address and moving it are one path.
+//
+// A PANE THAT ASKS FOR SETTINGS (`showSettings`, open.ts) is answered here: the
+// rooms' shell draws its own Settings pane, and the app has none, so Chat's
+// "See usage" opens the builder's Usage — the page the account menu's Usage
+// opens — rather than nothing.
+import { useEffect, useMemo } from 'react';
 import { useLook, useRooms } from './host.js';
 import { useIam } from '@hanzo/iam/react';
 import { useSignOut } from './lib/signout.js';
@@ -21,8 +27,9 @@ import { administers, path, route } from '@hanzo/build';
 import { bearer, named, org, orgs, pick } from './lib/session.js';
 import { enter } from './lib/destination.js';
 import { api } from './lib/api.js';
-import { app, under } from './lib/host.js';
+import { app, go, place } from './lib/host.js';
 import { link } from './lib/tags.js';
+import { showSettings, useOpen } from './open.js';
 /** Where the builder links out: every one of them an address of this site. */
 const LINKS = {
     github: app('-/sync'),
@@ -32,15 +39,28 @@ const LINKS = {
 };
 /** The person's theme, when they have chosen one the builder can name. */
 const theme = (t) => (t === 'light' || t === 'dark' || t === 'system' ? t : undefined);
-/** The app address a builder path names, canonical; '' for anything that is not one. */
-const canonical = (at) => path(route(at ?? ''));
+/** The builder address a pathname names: Dev's place, or New for a path that is not Dev's. */
+const at = (pathname) => {
+    const p = pathname ? place(pathname) : null;
+    return p?.mode === 'dev' ? p.at : '';
+};
 /** The host for a signed-in reader. */
 export function useDevHost() {
     const { user, accessToken } = useIam();
     const logout = useSignOut();
     const { router, path: pathname } = useRooms();
-    const here = canonical(under(pathname));
+    const here = path(route(at(pathname)));
     const look = useLook();
+    const { settings } = useOpen();
+    // The builder names every Settings section the rooms' pane does that it has;
+    // one it does not have opens Settings itself.
+    useEffect(() => {
+        if (!settings)
+            return;
+        showSettings(null);
+        const asked = route(`-/settings/${settings}`);
+        go(app(path(asked.kind === 'settings' ? asked : { kind: 'settings', section: 'general' })));
+    }, [settings]);
     // The token's claims change only when the token does: a sign-in, a refresh.
     const memberships = useMemo(() => orgs(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
     const scoped = useMemo(() => org(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -68,19 +88,12 @@ export function useDevHost() {
         person: { name, email, avatar },
         admin: administers(bearer(), scoped),
         path: here,
-        go: (to, how) => {
-            const next = app(canonical(to));
-            if (window.location.pathname === next && !window.location.search)
-                return;
-            if (how?.replace)
-                window.history.replaceState(null, '', next);
-            else
-                window.history.pushState(null, '', next);
-        },
+        go: (to, how) => go(app(to), how?.replace),
         links: LINKS,
-        // An address of this site moves in the router; another origin is left in
-        // this tab. platform.hanzo.ai is another product, and a click that names
-        // it stays here — everything the builder had it for is in its Settings.
+        // An address of the app moves the app, another of this site moves in the
+        // router, and another origin is left in this tab. platform.hanzo.ai is
+        // another product, and a click that names it stays here — everything the
+        // builder had it for is in its Settings.
         open: (href) => {
             let url;
             try {
@@ -91,10 +104,13 @@ export function useDevHost() {
             }
             if (url.hostname === 'platform.hanzo.ai')
                 return;
-            if (url.origin === window.location.origin)
-                router.push(`${url.pathname}${url.search}${url.hash}`);
-            else
+            const to = `${url.pathname}${url.search}${url.hash}`;
+            if (url.origin !== window.location.origin)
                 window.location.assign(link(url.href));
+            else if (place(url.pathname))
+                go(to);
+            else
+                router.push(to);
         },
         signIn: () => enter(),
         signOut: () => void logout(),

package/dist/host.d.ts

@@ -7,7 +7,7 @@
  *
  *   configure({ site: 'https://hanzo.ai', home: '/', signUp: '/start' })
  *
- *   <Rooms router={useRouter()} search={useSearchParams()} path={usePathname()} route={route} Link={Link}>
+ *   <Rooms router={useRouter()} path={usePathname()} route={route} Link={Link}>
  *     <Room mode="cal" />
  *   </Rooms>
  *
@@ -17,7 +17,7 @@
  * any component and on pages the rooms never draw. So the host states them once
  * with `configure()`, in a module its root imports, before anything renders.
  *
- * The ROUTER, the query, the path and the route change as the page moves, so they ride
+ * The ROUTER, the path and the route change as the page moves, so they ride
  * React context, and a room reads them with `useRooms()`.
  */
 import { type AnchorHTMLAttributes, type ComponentType, type ReactNode } from 'react';
@@ -34,21 +34,17 @@ export interface Router {
 }
 interface Moving {
     router: Router;
-    /** The address's query, for the rooms that read one (Chat's `?chat=`). */
-    search: URLSearchParams | null;
     /** The address's path, for the rooms that read one (Dev's, under `/dev`). */
     path: string | null;
     route: string;
     Link: Link;
 }
-export interface RoomsProps extends Omit<Moving, 'search' | 'path'> {
-    /** Absent where no mounted room reads the query, so a static export needs no Suspense for it. */
-    search?: URLSearchParams | null;
+export interface RoomsProps extends Omit<Moving, 'path'> {
     /** Absent where no mounted room reads the path. */
     path?: string | null;
     children?: ReactNode;
 }
-/** The router, the query, the route and the link the host mounted the rooms with. */
+/** The router, the route and the link the host mounted the rooms with. */
 export declare const useRooms: () => Moving;
 /** The org in scope, by the id the appearance layers are keyed on. */
 export declare function useOrg(): {
@@ -76,5 +72,5 @@ export declare function useLook(): {
  * keeps their choice in step with IAM.
  */
 export declare function Look(): any;
-export declare function Rooms({ router, search, path, route, Link, children }: RoomsProps): import("react").JSX.Element;
+export declare function Rooms({ router, path, route, Link, children }: RoomsProps): import("react").JSX.Element;
 export {};

package/dist/host.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  *   configure({ site: 'https://hanzo.ai', home: '/', signUp: '/start' })
  *
- *   <Rooms router={useRouter()} search={useSearchParams()} path={usePathname()} route={route} Link={Link}>
+ *   <Rooms router={useRouter()} path={usePathname()} route={route} Link={Link}>
  *     <Room mode="cal" />
  *   </Rooms>
  *
@@ -19,7 +19,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * any component and on pages the rooms never draw. So the host states them once
  * with `configure()`, in a module its root imports, before anything renders.
  *
- * The ROUTER, the query, the path and the route change as the page moves, so they ride
+ * The ROUTER, the path and the route change as the page moves, so they ride
  * React context, and a room reads them with `useRooms()`.
  */
 import { createContext, useContext } from 'react';
@@ -34,12 +34,11 @@ const Context = createContext({
         back: () => window.history.back(),
         forward: () => window.history.forward(),
     },
-    search: null,
     path: null,
     route: '/',
     Link: Plain,
 });
-/** The router, the query, the route and the link the host mounted the rooms with. */
+/** The router, the route and the link the host mounted the rooms with. */
 export const useRooms = () => useContext(Context);
 /** The org in scope, by the id the appearance layers are keyed on. */
 export function useOrg() {
@@ -72,6 +71,6 @@ export function Look() {
     useLook();
     return null;
 }
-export function Rooms({ router, search = null, path = null, route, Link, children }) {
-    return _jsx(Context.Provider, { value: { router, search, path, route, Link }, children: children });
+export function Rooms({ router, path = null, route, Link, children }) {
+    return _jsx(Context.Provider, { value: { router, path, route, Link }, children: children });
 }

package/dist/lib/destination.d.ts

@@ -19,10 +19,10 @@
  * person who cannot be sent back to their page must still be signed in, so a
  * refusal degrades to the default and never to an exception.
  */
-/** The default on the apex: the app, which is `/` for anyone signed in
- *  (app/page.tsx). It answers the case where there is no page to go back to (a
- *  typed /login, a /signup funnel, a stranger who cleared their storage
- *  mid-flight). */
+/** The default on the apex: `/`, which takes anyone signed in to the app, in
+ *  the mode they were last in (lib/host.ts `resume`). It answers the case where
+ *  there is no page to go back to (a typed /login, a /signup funnel, a stranger
+ *  who cleared their storage mid-flight). */
 export declare const DEFAULT_DESTINATION = "/";
 /** Where a sign-in with no page to go back to lands on `hostname`: the app on
  *  the apex, and the rooms' Home everywhere else. */
@@ -47,8 +47,8 @@ export declare function door(): string;
 /**
  * Send this reader to sign in, and back to this page after.
  *
- * Every signed-out door into the app is this one call: `/` at a place in the
- * app, /dev, a room. The page is written down, and the browser goes to `to`,
+ * Every signed-out door into the app is this one call: /chat, /dev and every
+ * path under them, a room. The page is written down, and the browser goes to `to`,
  * which asks IAM for an existing session before it draws a form
  * (components/auth/panel.tsx `Gate`). On a `guest` host the same address is asked for on hanzo.ai instead. With no `to`
  * the page is `door()`'s; a control that says "Sign in" names LOGIN.

package/dist/lib/destination.js

@@ -22,10 +22,10 @@
 import { apex, guest, SIGNIN } from "./host.js";
 import { SHARED } from "./share.js";
 import { where } from "../where.js";
-/** The default on the apex: the app, which is `/` for anyone signed in
- *  (app/page.tsx). It answers the case where there is no page to go back to (a
- *  typed /login, a /signup funnel, a stranger who cleared their storage
- *  mid-flight). */
+/** The default on the apex: `/`, which takes anyone signed in to the app, in
+ *  the mode they were last in (lib/host.ts `resume`). It answers the case where
+ *  there is no page to go back to (a typed /login, a /signup funnel, a stranger
+ *  who cleared their storage mid-flight). */
 export const DEFAULT_DESTINATION = "/";
 /** Where a sign-in with no page to go back to lands on `hostname`: the app on
  *  the apex, and the rooms' Home everywhere else. */
@@ -107,8 +107,8 @@ export function door() {
 /**
  * Send this reader to sign in, and back to this page after.
  *
- * Every signed-out door into the app is this one call: `/` at a place in the
- * app, /dev, a room. The page is written down, and the browser goes to `to`,
+ * Every signed-out door into the app is this one call: /chat, /dev and every
+ * path under them, a room. The page is written down, and the browser goes to `to`,
  * which asks IAM for an existing session before it draws a form
  * (components/auth/panel.tsx `Gate`). On a `guest` host the same address is asked for on hanzo.ai instead. With no `to`
  * the page is `door()`'s; a control that says "Sign in" names LOGIN.

package/dist/lib/host.d.ts

@@ -1,12 +1,13 @@
 /**
- * Which host this export is read on, and what that host keeps.
+ * Which host this export is read on, what that host keeps, and the app's
+ * addresses — the one module that writes and reads them.
  *
  * hanzo.ai is the site for a stranger and the app for a member: the web app is
- * `/` once signed in (app/page.tsx), beside /chat. hanzo.team is the
- * workspace, its own app (hanzo-apps/team) with Home at its root. This export
- * still carries the rooms, so a room asked for on the apex is sent to the same
- * room on hanzo.team, and `output: 'export'` has no server to do that, so it is
- * decided in the browser off the hostname, here.
+ * /chat and /dev once signed in, and `/` takes a member to the mode they were
+ * last in. hanzo.team is the workspace, its own app (hanzo-apps/team) with Home
+ * at its root. This export still carries the rooms, so a room asked for on the
+ * apex is sent to the same room on hanzo.team, and `output: 'export'` has no
+ * server to do that, so it is decided in the browser off the hostname, here.
  *
  * Two predicates, one per product: `apex()` for the app, `team()` for the
  * workspace. Every host that is neither (localhost, a preview) draws the whole
@@ -30,37 +31,55 @@ export declare const ENTRY = "https://hanzo.team/?signin";
  */
 export declare const START = "https://hanzo.team/start";
 /**
- * The web app, for a signed-in reader, in two modes. Chat is the default, at
- * `/`. Dev is @hanzo/build's `<Builder>` at `/dev`, and what it shows is the
- * PATH under it, in the builder's own grammar (`route` in @hanzo/build): `/dev`
- * New, `/dev/sess_<id>` a run, `/dev/<org>/<repo>` a project,
- * `/dev/-/<screen>`, `/dev/-/settings[/<section>]`, `/dev/-/customize[/<tab>]`,
- * `/dev/<slug>` a deployed site. The export holds one page for all of them,
- * `/dev`, and the edge serves it for every path under it (hanzo.ai's
- * lib/edge.ts `APP`).
+ * THE APP'S ADDRESSES ARE PATHS, in two modes at two roots. Chat is /chat, a
+ * new conversation, and /chat/<id> one of the reader's. Dev is /dev, Dev's New,
+ * and every place of @hanzo/build's builder is a path under it, written and
+ * read by `href`/`parse` (@hanzo/build/route): /dev/run/<id>, /dev/projects,
+ * /dev/projects/<org>/<repo> a repository, /dev/projects/<slug> a deployed
+ * site, /dev/issues, /dev/artifacts, /dev/templates, /dev/automations[/<id>],
+ * /dev/machines, /dev/environments, /dev/customize[/<tab>],
+ * /dev/settings[/<section>], /dev/plans. The export holds one page per root,
+ * /chat and /dev, and the edge serves it for every path under it (hanzo.ai's
+ * lib/edge.ts `APP`), so every address reloads.
  */
+export declare const CHAT = "/chat";
 export declare const DEV = "/dev";
-/** Dev at an app address; '' is Dev's New, `/dev` itself. */
-export declare const app: (path: string) => string;
-/** The app address a pathname names under `/dev`, or null for a pathname that is not Dev's. */
-export declare const under: (pathname: string | null | undefined) => string | null;
-/**
- * Chat, the app's default mode: `/` is a new conversation and `?chat=<id>` one
- * of the reader's. So the address says which mode the app is in — a path under
- * `/dev` for Dev, anything else Chat — and a reload keeps it.
- */
-export declare const TALK = "chat";
-/** `/` in Chat, on a conversation, or `/` itself for a new one. */
+/** Chat on a conversation, or /chat itself for a new one. */
 export declare const talk: (id?: string | null) => string;
+/** Dev at a builder address (`route` in @hanzo/build); '' is New, /dev. What is not an address is New. */
+export declare const app: (at: string) => string;
+/** A place in the app: Chat on a conversation or none, or Dev at a builder address. */
+export type Place = {
+    mode: 'chat';
+    thread: string | null;
+} | {
+    mode: 'dev';
+    at: string;
+};
+/** The place a path names, or null when it names none of the app's. */
+export declare function place(pathname: string): Place | null;
+/** An address as analytics counts it: a record folded to its kind, so every conversation is one page. */
+export declare function page(pathname: string): string;
 /**
- * Dev opened on one run, project or site, from anywhere: every "Try Hanzo Dev"
- * link, a room's Dev, the console's "open in the builder". It signs a stranger
- * in on the way (app/(app)/dev/_door.tsx), and is reached through `site()`:
- * here on hanzo.ai, across to hanzo.ai from hanzo.team. Only a value that is
- * exactly a session id, a repository or a site's slug is carried; anything else
- * opens /dev itself, so no caller can make this name another address.
+ * Dev opened on one run, repository or site, from anywhere: every "Try Hanzo
+ * Dev" link, a room's Dev, the console's "open in the builder". It signs a
+ * stranger in on the way (app/(app)/dev/_door.tsx), and is reached through
+ * `site()`: here on hanzo.ai, across to hanzo.ai from hanzo.team. Only a value
+ * that is exactly a session id, a repository or a site's slug is carried;
+ * anything else opens /dev itself, so no caller can make this name another
+ * address.
  */
 export declare const dev: (ref?: string | null) => string;
+/**
+ * Move the app to an address of this page: a history entry, or in place of this
+ * one. No document load and no route change — the Next router folds a native
+ * history entry into `usePathname`, so the app follows the path it reads.
+ */
+export declare function go(address: string, replace?: boolean): void;
+/** Keep the mode the reader is in, for `resume`. */
+export declare function remember(mode: Place['mode']): void;
+/** Where `/` takes a member: the mode they were last in, Chat when none is kept. */
+export declare function resume(): string;
 /**
  * The workspace's rooms: every route under app/(app) the apex does not keep.
  *