@hanzo/rooms 0.1.73 → 0.1.75

package/dist/Shell.js

@@ -13,13 +13,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // holds arrangement and words and owns no pixels of its own. That is the whole
 // architecture: a stranger with `@hanzo/ui`, `@hanzo/ai` and `@hanzo/iam` can
 // assemble this room, because nothing in it is private to hanzo.ai.
-import { createContext, lazy, Suspense, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createContext, lazy, Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
-import { MessageSquare, Code2, Inbox, Bot, ListChecks, HardDrive, Settings2, UserPlus, Building2, Search, Hash, AtSign, Lock, Workflow, Plus, ArrowLeft, ArrowRight, Send, Minus, Blocks, Star, FolderOpen, Activity, BookOpen, SquareTerminal, Share2, Sparkles, PanelLeft, PanelRight, Users, Globe, Cpu, Boxes, Wallet, Video, Calendar, LayoutGrid, ArrowUpLeft, } from "lucide-react";
+import { MessageSquare, Code2, Inbox, Bot, ListChecks, HardDrive, Settings2, UserPlus, PanelLeftClose, Search, Hash, AtSign, Lock, Workflow, Plus, ArrowLeft, ArrowRight, Send, Minus, Blocks, Star, FolderOpen, Activity, BookOpen, SquareTerminal, Share2, PanelLeft, PanelRight, Users, Globe, Cpu, Boxes, Wallet, Video, Calendar, LayoutGrid, ArrowUpLeft, } from "lucide-react";
 import { AiProvider, useAgents, useInbox, useModels, usePeople, } from "@hanzo/ai/react";
 import { PINNED } from "./recent.js";
 import { ConversationMenu, ThreadRow, useThreadList } from "./thread.js";
-import { Box, XStack, YStack, Text } from "@hanzo/ui";
+import { Box, Shortcut, XStack, YStack, Text } from "@hanzo/ui";
 // THE PAPER LADDER. `sheet(n)` is a fill AND the light on it, published as a
 // pair by @hanzo/design, so a surface asks for a HEIGHT instead of composing a
 // shadow — which is the only way three panels on one screen end up lit from one
@@ -27,14 +27,17 @@ import { Box, XStack, YStack, Text } from "@hanzo/ui";
 import { scrim, sheet } from "@hanzo/ui/glass";
 import { Sidebar, SidebarIconButton, SidebarNewChat, SidebarScroll, SidebarSection, SidebarItem, SidebarFolder, } from "@hanzo/ui/chat";
 import { OrgProjectSwitcher, useIam, useOrganizations, } from "@hanzo/iam/react";
-import { Grip } from "@hanzo/build";
+import { SideProvider, useSplit } from "@hanzo/build";
+import { Grip } from "@hanzo/ui";
 import { HanzoMark, } from "@hanzogui/shell";
 import { useHydrated } from "./lib/hydrated.js";
 import { useHost } from "./lib/hostname.js";
 import { useAi } from "./lib/ai.js";
 import { useTiers, useHidden } from "./lib/tiers.js";
 import { useAccount } from "./lib/account.js";
-import { hasSession, superAdmin } from "./lib/session.js";
+import { bearer, hasSession, org as scoped, pick as choose } from "./lib/session.js";
+import { api } from "./lib/api.js";
+import { useSignOut } from "./lib/signout.js";
 import { enter, LOGIN } from "./lib/destination.js";
 import { address, sharedWithMe } from "./lib/share.js";
 import { list } from "./lib/list.js";
@@ -60,6 +63,7 @@ const FIELD = {
  *  custom properties. */
 const GUTTER_START = "calc(-1 * var(--pane-gap, 0px))";
 const GUTTER = "max(8px, var(--pane-gap, 8px))";
+const TOUCH_START = "calc(-22px - var(--pane-gap, 0px) / 2)";
 const HOME_INDICATOR = "env(safe-area-inset-bottom)";
 import { invite } from "./lib/home.js";
 import { reach } from "./lib/reach.js";
@@ -71,10 +75,9 @@ import { useTeamRooms, teamKey, roomHref } from "./rooms.js";
 import { apex, app, dev, ENTRY, room as moves, WORKSPACE } from "./lib/host.js";
 import { netKey } from "./conversations.js";
 import { FIRST, SettingsList, } from "./Settings.js";
-import { Profile } from "./Profile.js";
-import { SupportPicker } from "./Support.js";
-import { Find } from "./Find.js";
-import { Account } from "./Account.js";
+import { Me } from "./Me.js";
+import { Palette } from "./Palette.js";
+import { summons } from "./seek.js";
 import { called } from "./team.js";
 import { checkoutUrl } from './lib/pay.js';
 /** Tabs: the terminals, at their own host. */
@@ -831,14 +834,11 @@ function Bots({ show, owner, filter = "", onPick, navigate, }) {
 }
 /** A phone's tab bar: the rail along the foot, above the home indicator. */
 const TABS_HEIGHT = "calc(56px + env(safe-area-inset-bottom))";
-/** A column's width, px: the floor a drag holds, the ceiling, and the default a double-click returns to. */
+/** The sidebar's width, px: the floor a drag holds, the ceiling, and the default a double-click returns to. */
 const FLOOR = 200;
 const CEIL = 480;
 /** Per-reader, per-browser. A width that resets is a width you set every load. */
 const SPAN = "hanzo.sidebar.span";
-const BESIDE = "hanzo.aside.span";
-/** The column beside a room: its default width, px. */
-const BESIDE_WIDTH = 380;
 /** The rooms' sidebar: its default width, px. */
 const SIDEBAR_WIDTH = 244;
 /**
@@ -875,6 +875,13 @@ export function Beside({ children }) {
  * the app at `/` lay a room out with this, so a room's column is one mechanism.
  * `swap` stands in the pane in the room's place (a chosen Settings row).
  *
+ * The column is @hanzo/build's (`useSplit`), the one Dev's runs stand their
+ * panel in: its edge, the width the person drags (kept in their preferences
+ * where a `PrefsProvider` is above, as in the app), the pane hidden while the
+ * column is pulled over it until Show chat, and full screen from the panel's
+ * strip. The pane is hidden, never unmounted, so the conversation keeps its
+ * state.
+ *
  * `framed` is the app at `/`: both are panes floating on the frame's ground
  * (app/_web.tsx), filled with `--pane-fill` and cut by `pane()`, and the edge
  * that sizes the column sits in the gutter between them. In a room they lie on
@@ -884,7 +891,7 @@ export function Beside({ children }) {
  */
 export function Paned({ children, swap, framed = false, bare = false, }) {
     const { aside, showAside } = useOpen();
-    const beside = useSpan(BESIDE, BESIDE_WIDTH, FLOOR, CEIL);
+    const split = useSplit(Boolean(aside), "chat", () => showAside(null));
     // State and not a ref: a ref set during commit does not re-render, so the
     // portal would have nowhere to go on the pass that created its target.
     const [slot, setSlot] = useState(null);
@@ -896,17 +903,19 @@ export function Paned({ children, swap, framed = false, bare = false, }) {
                     ? bare
                         ? null
                         : { ...pane(), overflow: "hidden" }
-                    : { ...sheet(0), borderLeftWidth: 1, borderColor: "var(--edge, var(--white-06))" }), flex: 1, minW: 0, minH: 0, children: swap ?? (_jsx(Framed.Provider, { value: framed, children: _jsx(Slot.Provider, { value: slot, children: children }) })) }), aside ? (_jsxs(YStack, { render: "aside", "data-slot": "side", gridArea: "side", ...pane(framed ? undefined : sheet(1).backgroundColor), 
+                    : { ...sheet(0), borderLeftWidth: 1, borderColor: "var(--edge, var(--white-06))" }), ref: split.main, 
+                // inline-style: the pane hidden while the column has its room, written by a drag too (useSplit).
+                style: split.mainStyle, flex: 1, minW: 0, minH: 0, children: swap ?? (_jsx(Framed.Provider, { value: framed, children: _jsx(SideProvider, { value: split.side, children: _jsx(Slot.Provider, { value: slot, children: children }) }) })) }), aside ? (_jsxs(YStack, { render: "aside", "data-slot": "side", gridArea: "side", ...pane(framed ? undefined : sheet(1).backgroundColor), 
                 // In the frame the gutter stands between the pane and this column.
-                ml: framed ? "var(--pane-gap)" : undefined, ref: beside.ref, 
-                // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-                style: beside.style, position: "relative", width: "var(--span)", 
-                // Half the WINDOW. Half of an `auto` grid track is half of this
-                // column's own width, so the rooms' shell drew it at half its span
-                // beside an empty strip of the same size.
-                maxW: "50vw", shrink: 0, minH: 0, display: "none", $lg: { display: "flex" }, children: [_jsx(Grip, { side: "right", span: beside.span, floor: FLOOR, ceil: CEIL, reset: BESIDE_WIDTH, onSpan: beside.move, onKeep: beside.keep, onShut: () => showAside(null), label: "Resize side panel", 
+                ml: framed ? "var(--pane-gap)" : undefined, ref: split.aside, 
+                // inline-style: the width a drag rewrites on the element itself, and full screen (useSplit).
+                style: split.asideStyle, position: "relative", shrink: 0, minH: 0, display: "none", $lg: { display: "flex" }, children: [split.grip ? (_jsx(Grip, { ...split.grip, label: "Resize side panel", bar: "inline", 
+                        // The handle halfway down the edge, where a hand looks for it.
+                        justify: "center", 
                         // In the gutter the frame leaves between the panes; a room has none.
-                        l: GUTTER_START, width: GUTTER }), _jsx(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", rounded: "var(--pane-round)", ref: (el) => setSlot(el instanceof HTMLElement ? el : null) })] })) : null] }));
+                        l: GUTTER_START, width: GUTTER, 
+                        // A finger's band, centred on the gutter.
+                        $touchable: { l: TOUCH_START, width: 44 } })) : null, _jsx(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", rounded: "var(--pane-round)", ref: (el) => setSlot(el instanceof HTMLElement ? el : null) })] })) : null] }));
 }
 /**
  * THE RAIL: where you can go, as marks with their names under them. It is the
@@ -992,6 +1001,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
     // hook it no longer runs.
     const hydrated = useHydrated();
     const [finding, setFinding] = useState(false);
+    const found = useCallback(() => setFinding(false), []);
     /**
      * WHICH SETTINGS ROW IS OPEN, and null for none. ONE value, not two.
      *
@@ -1001,12 +1011,6 @@ function Frame({ mode, children, navigate, back, forward, }) {
      * act — which is why there is no second `panel` state beside this one.
      */
     const { settings: settingsPane, showSettings } = useOpen();
-    // The profile is a COLUMN, not a modal, so it is not one of the panels above:
-    // those lift off the window and dim it, this one stands in the row beside the
-    // room. It is the slot the thread view will share.
-    const [profiling, setProfiling] = useState(false);
-    // Every organization, for a SuperAdmin to step into (components/workspace/Support.tsx).
-    const [supporting, setSupporting] = useState(false);
     /**
      * The sidebar is open by default on desktop and stays open.
      *
@@ -1073,7 +1077,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
     const onPick = typeof window !== "undefined" && window.innerWidth < 1024 ? dismiss : undefined;
     useEffect(() => {
         const shortcut = (event) => {
-            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+            if (summons(event)) {
                 event.preventDefault();
                 setFinding(true);
             }
@@ -1164,9 +1168,10 @@ function Frame({ mode, children, navigate, back, forward, }) {
     /**
      * WHERE THE PALETTE CAN GO WITHOUT ASKING ANYONE.
      *
-     * The rooms this identity may open, and the surfaces above. The lists that
-     * have to be read — conversations, projects — are `Find`'s, which is why they
-     * are not here: this half is known before anyone types.
+     * The rooms this identity may open, and the surfaces above, as the palette's
+     * Actions; this Settings and Customize stand in for the palette's own. The
+     * lists that have to be read — conversations, projects, agents, skills — are
+     * the palette's, which is why they are not here.
      */
     const onApex = apex(useHost());
     const places = useMemo(() => [CHAT, ...PLACES].filter((place) => shows(place, tiers, hidden, onApex)), [tiers, hidden, onApex]);
@@ -1181,19 +1186,17 @@ function Frame({ mode, children, navigate, back, forward, }) {
             // Home's is the brand — one row reading "Hanzo" among Chat, Dev and
             // Drive names the company rather than the room.
             id: place.id,
-            title: place.label,
-            category: "Apps",
-            icon: _jsx(place.icon, { size: 15, "aria-hidden": true }),
-            href: place.route,
+            label: place.label,
+            icon: _jsx(place.icon, { size: 16, "aria-hidden": true }),
+            run: () => navigate?.(place.route),
         })),
         ...tools.map((tool) => ({
             id: tool.id,
-            title: tool.label,
-            category: "Workspace",
-            icon: _jsx(tool.icon, { size: 15, "aria-hidden": true }),
-            action: tool.go,
+            label: tool.label,
+            icon: _jsx(tool.icon, { size: 16, "aria-hidden": true }),
+            run: tool.go,
         })),
-    ], [tiers, hidden, onApex, tools]);
+    ], [tiers, hidden, onApex, tools, navigate]);
     // The org IS the workspace. Naming it twice is how the bar and the rail come
     // to disagree about which one you are standing in.
     const workspace = currentOrg?.displayName || currentOrg?.name || "Hanzo";
@@ -1208,6 +1211,20 @@ function Frame({ mode, children, navigate, back, forward, }) {
     const settled = hydrated && !isLoading;
     const { user: account } = useAccount();
     const signedIn = isAuthenticated || Boolean(user) || Boolean(account) || hasSession();
+    const logout = useSignOut();
+    const face = account?.avatar ?? user?.avatar;
+    // The account menu's reading of this host: who, in which organization, and how they leave.
+    const who = {
+        api: api(),
+        token: bearer,
+        org: scoped(),
+        person: {
+            name: account?.name || user?.displayName || user?.name || user?.email || "",
+            email: user?.email || "",
+            avatar: typeof face === "string" && face.startsWith("https://") ? face : "",
+        },
+        signOut: () => void logout(),
+    };
     const list = (_jsxs(Sidebar, { ref: side.ref, 
         // A phone's sheet is never wider than 280, whatever the laptop kept.
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
@@ -1226,16 +1243,18 @@ function Frame({ mode, children, navigate, back, forward, }) {
                                 // 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] }) }) })), 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: [_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] }));
+                        }, children: "Share Hanzo" }), _jsxs(XStack, { items: "center", gap: "$1", px: "$1.5", py: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: who, onOrg: (o) => (choose(o), window.location.reload()) }) }), _jsx(Box, { render: "button", onClick: toggle, "aria-label": "Collapse sidebar", p: "$2", rounded: "$2", hoverStyle: { bg: "$hover" }, cursor: "pointer", children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })] })] })) : null) : null] }));
     return (_jsxs(YStack, { "data-slot": "workspace", "data-hydrated": settled ? "true" : undefined, "data-sidebar": asked ? "open" : "shut", display: "grid", gridTemplateColumns: `${asked ? 0 : 64}px auto minmax(0, 1fr) auto`, gridTemplateRows: "44px minmax(0, 1fr)", gridTemplateAreas: '"rail bar bar bar" "rail list pane side"', "$max-md": {
             gridTemplateColumns: "minmax(0, 1fr)",
             gridTemplateRows: `44px minmax(0, 1fr) ${TABS_HEIGHT}`,
             gridTemplateAreas: '"bar" "pane" "rail"',
-        }, position: "relative", width: "100%", height: "100dvh", overflow: "hidden", bg: "$background", backgroundImage: "var(--pane-ground)", children: [_jsx(Rail, { mode: mode, places: places, open: asked, team: onApex ? (signedIn ? ENTRY : WORKSPACE) : undefined, navigate: navigate, onSettings: () => showSettings(FIRST), onMore: () => setFinding(true) }), _jsxs(XStack, { render: "header", "data-slot": "bar", gridArea: "bar", ...sheet(0), height: 44, shrink: 0, items: "center", px: "$3", gap: "$3", borderBottomWidth: 1, borderColor: "var(--edge, var(--white-06))", children: [_jsxs(XStack, { items: "center", gap: "$1", shrink: 0, children: [_jsx(SidebarIconButton, { ...TAP, label: shown ? "Close sidebar" : "Open sidebar", onPress: toggle, onMouseEnter: () => setPeeking(true), children: _jsx(PanelLeft, { size: 16, "aria-hidden": true }) }), back || forward ? (_jsxs(XStack, { display: "none", $md: { display: "flex" }, items: "center", gap: "$1", shrink: 0, children: [_jsx(SidebarIconButton, { ...TAP, label: "Back", onPress: () => back?.(), children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(SidebarIconButton, { ...TAP, label: "Forward", onPress: () => forward?.(), children: _jsx(ArrowRight, { size: 16, "aria-hidden": true }) })] })) : null] }), _jsx(XStack, { flex: 1, justify: "center", children: _jsx(YStack, { width: 440, maxW: "100%", position: "relative", children: _jsxs(Box, { render: "button", onClick: () => setFinding(true), display: "flex", flexDirection: "row", "data-slot": "find", items: "center", "$max-md": { justify: "center" }, gap: "$2", width: "100%", height: CONTROL, px: "$2.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(Search, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsxs(Text, { fontSize: "$1", color: "$soft", "$max-md": { display: "none" }, children: ["Search ", workspace] }), _jsx(XStack, { ml: "auto", items: "center", justify: "center", height: 18, px: "$1", rounded: "$1", bg: "$edge", "$max-md": { display: "none" }, children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "$soft", children: "\u2318K" }) })] }) }) }), _jsxs(XStack, { shrink: 0, minW: 0, justify: "flex-end", items: "center", gap: "$2", children: [settled && !signedIn ? (_jsx(Box, { ...TAP, render: "button", onClick: () => enter(LOGIN), display: "flex", items: "center", justify: "center", cursor: "pointer", children: _jsx(XStack, { items: "center", justify: "center", height: CONTROL, px: "$2.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "$ink", children: "Sign in" }) }) })) : null, _jsxs(XStack, { display: "none", $lg: { display: "flex" }, items: "center", gap: "$1", children: [_jsx(SidebarIconButton, { ...TAP, label: aside === "roster" ? "Hide directory & roster" : "Show directory & roster", onPress: () => showAside(aside === "roster" ? null : "roster"), children: _jsx(Users, { size: 16, "aria-hidden": true }) }), _jsx(SidebarIconButton, { ...TAP, label: aside === "tasks" ? "Close side panel" : "Open side panel", onPress: () => showAside(aside === "tasks" ? null : "tasks"), children: _jsx(PanelRight, { size: 16, "aria-hidden": true }) })] })] })] }), shown ? (_jsx(Box, { render: "button", "aria-label": "Close sidebar", onClick: dismiss, ...scrim, "data-slot": "scrim", position: "absolute", t: 44, r: 0, b: TABS_HEIGHT, l: 0, z: "var(--z-scrim)", $md: { display: "none" } })) : null, shown ? (_jsx(XStack, { "data-slot": "list", gridArea: "list", position: asked ? "relative" : "absolute", ...(asked ? {} : { top: 44, bottom: 0, left: 64 }), "$max-md": { position: "fixed", t: 44, r: 0, b: TABS_HEIGHT, l: 0, width: "100%" }, z: "var(--z-drawer)", bg: "$background", onMouseEnter: () => setPeeking(true), onMouseLeave: () => {
+        }, position: "relative", width: "100%", height: "100dvh", overflow: "hidden", bg: "$background", backgroundImage: "var(--pane-ground)", children: [_jsx(Rail, { mode: mode, places: places, open: asked, team: onApex ? (signedIn ? ENTRY : WORKSPACE) : undefined, navigate: navigate, onSettings: () => showSettings(FIRST), onMore: () => setFinding(true) }), _jsxs(XStack, { render: "header", "data-slot": "bar", gridArea: "bar", ...sheet(0), height: 44, shrink: 0, items: "center", px: "$3", gap: "$3", borderBottomWidth: 1, borderColor: "var(--edge, var(--white-06))", children: [_jsxs(XStack, { items: "center", gap: "$1", shrink: 0, children: [_jsx(SidebarIconButton, { ...TAP, label: shown ? "Close sidebar" : "Open sidebar", onPress: toggle, onMouseEnter: () => setPeeking(true), children: _jsx(PanelLeft, { size: 16, "aria-hidden": true }) }), back || forward ? (_jsxs(XStack, { display: "none", $md: { display: "flex" }, items: "center", gap: "$1", shrink: 0, children: [_jsx(SidebarIconButton, { ...TAP, label: "Back", onPress: () => back?.(), children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(SidebarIconButton, { ...TAP, label: "Forward", onPress: () => forward?.(), children: _jsx(ArrowRight, { size: 16, "aria-hidden": true }) })] })) : null] }), _jsx(XStack, { flex: 1, justify: "center", children: _jsx(YStack, { width: 440, maxW: "100%", position: "relative", children: _jsxs(Box, { render: "button", onClick: () => setFinding(true), display: "flex", flexDirection: "row", "data-slot": "find", items: "center", "$max-md": { justify: "center" }, gap: "$2", width: "100%", height: CONTROL, px: "$2.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(Search, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsxs(Text, { fontSize: "$1", color: "$soft", "$max-md": { display: "none" }, children: ["Search ", workspace] }), _jsx(Shortcut, { keys: ["Mod", "K"], ml: "auto", "$max-md": { display: "none" } })] }) }) }), _jsxs(XStack, { shrink: 0, minW: 0, justify: "flex-end", items: "center", gap: "$2", children: [settled && !signedIn ? (_jsx(Box, { ...TAP, render: "button", onClick: () => enter(LOGIN), display: "flex", items: "center", justify: "center", cursor: "pointer", children: _jsx(XStack, { items: "center", justify: "center", height: CONTROL, px: "$2.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "$ink", children: "Sign in" }) }) })) : null, _jsxs(XStack, { display: "none", $lg: { display: "flex" }, items: "center", gap: "$1", children: [_jsx(SidebarIconButton, { ...TAP, label: aside === "roster" ? "Hide directory & roster" : "Show directory & roster", onPress: () => showAside(aside === "roster" ? null : "roster"), children: _jsx(Users, { size: 16, "aria-hidden": true }) }), _jsx(SidebarIconButton, { ...TAP, label: aside === "tasks" ? "Close side panel" : "Open side panel", onPress: () => showAside(aside === "tasks" ? null : "tasks"), children: _jsx(PanelRight, { size: 16, "aria-hidden": true }) })] })] })] }), shown ? (_jsx(Box, { render: "button", "aria-label": "Close sidebar", onClick: dismiss, ...scrim, "data-slot": "scrim", position: "absolute", t: 44, r: 0, b: TABS_HEIGHT, l: 0, z: "var(--z-scrim)", $md: { display: "none" } })) : null, shown ? (_jsx(XStack, { "data-slot": "list", gridArea: "list", position: asked ? "relative" : "absolute", ...(asked ? {} : { top: 44, bottom: 0, left: 64 }), "$max-md": { position: "fixed", t: 44, r: 0, b: TABS_HEIGHT, l: 0, width: "100%" }, z: "var(--z-drawer)", bg: "$background", onMouseEnter: () => setPeeking(true), onMouseLeave: () => {
                     if (!asked)
                         setPeeking(false);
-                }, children: list })) : null, _jsx(Paned, { swap: settingsPane ? _jsx(Suspense, { fallback: null, children: _jsx(SettingsPane, { id: settingsPane }) }) : undefined, children: children }), _jsx(Profile, { open: profiling, onClose: () => setProfiling(false) }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null, finding ? (_jsx(Find, { doors: doors, onClose: () => setFinding(false), navigate: navigate })) : null] }));
+                }, children: list })) : null, _jsx(Paned, { swap: settingsPane ? _jsx(Suspense, { fallback: null, children: _jsx(SettingsPane, { id: settingsPane }) }) : undefined, children: children }), finding ? (_jsx(Palette, { actions: doors, onClose: found, 
+                // A chat opens in this workspace's Chat, the palette having picked it; the rest is the app's.
+                go: (to) => navigate?.(to.startsWith(CHAT.route) ? CHAT.route : site(to)) })) : null] }));
 }

package/dist/Top.d.ts

@@ -0,0 +1,17 @@
+import { type Host } from '@hanzo/build';
+import type { RailLink } from '@hanzo/ui/chat';
+import { type Place } from './lib/host.js';
+export declare function Top({ host, mode, places, go, onMenu, onChat, onDev, }: {
+    host: Host;
+    mode: Place['mode'];
+    /** The mode's places, where they are not Dev's (Studio's `nav`). */
+    places?: {
+        id: string;
+        links: RailLink[];
+    }[];
+    /** Moves the app, the drawer away first. */
+    go: (address: string) => void;
+    onMenu: () => void;
+    onChat: () => void;
+    onDev: () => void;
+}): import("react").JSX.Element;

package/dist/Top.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A phone's bar, which has neither rail nor sidebar to move the app: the
+// drawer's button at the left, Chat | Dev in the middle, and New at the right
+// (the owner's iPhone reference; LLM.md "The app is `App`").
+//
+//   (≡)        ( Chat | Dev )        (✎)
+//
+// The three are glass: the pane's material (ground.ts) cut round, its edge one
+// step stronger so a circle on the bare floor reads as one. Measured on the
+// reference at 440×956: the buttons are 44px circles 20px in from each edge,
+// the pill 158×48 with a 40px segment inside a 4px rim, its labels at 15px
+// medium, all centred on one line 48px tall under the device's top inset.
+//
+// Chat | Dev moves the app the way the rail does (`onChat`, `onDev`: where each
+// was last). In Studio neither is lit. New is Chat's New chat, and elsewhere the
+// mode's own New row (@hanzo/build's and @hanzo/studio's `nav`, `NEW`), so the
+// bar names it as the sidebar does.
+import { SquarePen } from 'lucide-react';
+import { Text, XStack } from '@hanzo/gui';
+import { nav, NEW } from '@hanzo/build';
+import { ToggleGroup, ToggleGroupItem } from '@hanzo/ui';
+import { pane } from './ground.js';
+import { empty } from './open.js';
+import { talk } from './lib/host.js';
+/** A button, px: a thumb's 44. */
+const ROUND = 44;
+/** The bar's line under the device's top inset, px: the pill's height. */
+const LINE = 48;
+/** A segment, px: the pill's 150px inside its rim, less the group's 4px gap, halved. */
+const SEGMENT = 73;
+/** The glass the three are cut from. */
+const GLASS = { ...pane(), borderColor: 'var(--border-strong)', borderRadius: 9999 };
+/** A round glass button named for what it does. */
+function Round({ label, onPress, children, ...rest }) {
+    return (_jsx(XStack, { render: "button", "aria-label": label, onPress: onPress, ...GLASS, width: ROUND, height: ROUND, items: "center", justify: "center", shrink: 0, cursor: "pointer", pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, ...rest, children: children }));
+}
+/** The drawer's mark: two strokes, the lower one shorter, 19×11 as the reference draws it. */
+function Lines() {
+    return (_jsx("svg", { width: 19, height: 11, viewBox: "0 0 19 11", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: _jsx("path", { d: "M1 1h17M1 10h10.7" }) }));
+}
+/** One side of the pill. */
+function Side({ value, children }) {
+    return (_jsx(ToggleGroupItem, { value: value, size: "lg", width: SEGMENT, rounded: 9999, bg: "transparent", borderColor: "transparent", hoverStyle: { bg: '$hover' }, activeStyle: { bg: '$raised', borderColor: 'transparent' }, children: _jsx(Text, { fontSize: "$4", fontWeight: "500", color: "$ink", numberOfLines: 1, children: children }) }));
+}
+export function Top({ host, mode, places, go, onMenu, onChat, onDev, }) {
+    const made = mode === 'chat' ? null : (places ?? nav(host, (p) => host.go(p))).flatMap((g) => g.links).find((l) => l.id === NEW);
+    const fresh = mode === 'chat'
+        ? {
+            label: 'New chat',
+            onPress: () => {
+                empty();
+                go(talk());
+            },
+        }
+        : { label: made?.label ?? 'New', onPress: made?.onPress };
+    return (_jsxs(XStack, { "data-slot": "app-bar", height: `calc(${LINE}px + var(--safe-top))`, pt: "var(--safe-top)", px: "$4.5", items: "center", justify: "space-between", shrink: 0, $md: { display: 'none' }, children: [_jsx(Round, { label: "Open sidebar", "data-slot": "bar-menu", onPress: onMenu, children: _jsx(Lines, {}) }), _jsx(XStack, { "data-slot": "bar-mode", ...GLASS, height: LINE, p: "$1", items: "center", children: _jsxs(ToggleGroup, { type: "single", "aria-label": "App", value: mode === 'studio' ? '' : mode, disableDeactivation: true, onValueChange: (v) => (v === 'chat' ? onChat() : v === 'dev' ? onDev() : undefined), children: [_jsx(Side, { value: "chat", children: "Chat" }), _jsx(Side, { value: "dev", children: "Dev" })] }) }), _jsx(Round, { label: fresh.label, "data-slot": "bar-new", onPress: fresh.onPress, children: _jsx(SquarePen, { size: 20, "aria-hidden": true }) })] }));
+}

package/dist/agents.d.ts

@@ -0,0 +1,64 @@
+export type { Link, Shelf, ShelfRow as Row } from '@hanzo/build';
+/**
+ * The model that draws an agent's face: Hanzo's own image SKU (hanzo-inc/zen
+ * catalog.yaml `zen-image`), named on every call, because the endpoint takes
+ * none by default.
+ */
+export declare const PAINTER = "zen-image";
+/** The words every drawn face is asked for after its description. */
+export declare const MEMOJI = "memoji style 3D emoji portrait, head and shoulders, centered, plain background";
+/** A core member, drawn for an org that keeps no row of its own for them. */
+export interface House {
+    id: string;
+    name: string;
+    avatar: string;
+}
+/** The default cast: the core team @hanzo/personas publishes, in the crew's order. */
+export declare const CORE: readonly House[];
+/**
+ * The org's agents with the default cast filling in any member the org keeps no
+ * row for, the cast first in its own order, then the rest as listed. With no
+ * list yet (or none at all) it is the default cast.
+ */
+export declare function ordered<T extends {
+    name: string;
+}>(agents: readonly T[] | null | undefined): (T | House)[];
+/**
+ * One figure of @hanzo/personas' roster, as assets/personas/index.json lists it
+ * (scripts/team.mjs). `called`, `about` and `based` are its PERSONA.md's
+ * `name`, `description` and `based_on`, present only where one is written.
+ */
+export interface Figure {
+    slug: string;
+    name: string;
+    category: string;
+    called?: string;
+    about?: string;
+    based?: string;
+}
+/** Where a host serves the roster: the list, and each written figure's PERSONA.md. */
+export declare const FIGURES = "/personas";
+/** The name a person reads for a figure: who it is based on, else its own name. */
+export declare const title: (f: Figure) => string;
+/** A figure's one line: its PERSONA.md's description, else what it was. */
+export declare const line: (f: Figure) => string;
+/**
+ * A name the agents API takes (cloud apps/agents `nameRE`): letters, digits, dots,
+ * dashes and underscores, from a letter or digit, up to 64. Accents are dropped
+ * and any other run becomes a dash: "Spärck Jones" is Sparck-Jones.
+ */
+export declare const handle: (name: string) => string;
+/** What the New agent sheet is filled with from a figure. */
+export interface Draft {
+    name: string;
+    /** The instructions. */
+    does: string;
+    /** The face to draw. */
+    look: string;
+}
+/**
+ * A figure as an agent: its PERSONA.md's name and its prompt word for word
+ * (the text under the front matter); a figure with none written is told who it
+ * is in one paragraph. The face is described by who it is and its one line.
+ */
+export declare function draft(f: Figure, md: string | null): Draft;

package/dist/agents.js

@@ -0,0 +1,62 @@
+// The agents a conversation can hold, and the figures a new one can start from.
+// Pure: the composer's Agents shelf (crew.tsx `useAgentShelf`), the crew strip
+// and the New agent sheet read these, and the tests run them in Node.
+import { TEAM } from './team.js';
+/**
+ * The model that draws an agent's face: Hanzo's own image SKU (hanzo-inc/zen
+ * catalog.yaml `zen-image`), named on every call, because the endpoint takes
+ * none by default.
+ */
+export const PAINTER = 'zen-image';
+/** The words every drawn face is asked for after its description. */
+export const MEMOJI = 'memoji style 3D emoji portrait, head and shoulders, centered, plain background';
+/** The default cast: the core team @hanzo/personas publishes, in the crew's order. */
+export const CORE = TEAM.map((one) => ({ id: `house-${one.id}`, name: one.name, avatar: `/agents/${one.id}.png` }));
+const RANK = new Map(TEAM.map((one, i) => [one.id, i]));
+/**
+ * The org's agents with the default cast filling in any member the org keeps no
+ * row for, the cast first in its own order, then the rest as listed. With no
+ * list yet (or none at all) it is the default cast.
+ */
+export function ordered(agents) {
+    const list = Array.isArray(agents) ? [...agents] : [];
+    const names = new Set(list.map((one) => one.name?.toLowerCase()));
+    for (const one of CORE)
+        if (!names.has(one.name.toLowerCase()))
+            list.push(one);
+    const rank = (one) => RANK.get(one.name?.toLowerCase() ?? '') ?? Infinity;
+    return list.sort((a, b) => rank(a) - rank(b));
+}
+/** Where a host serves the roster: the list, and each written figure's PERSONA.md. */
+export const FIGURES = '/personas';
+/** The name a person reads for a figure: who it is based on, else its own name. */
+export const title = (f) => f.based?.replace(/\s*\(.*\)\s*$/, '') ?? f.called ?? f.name;
+/** A figure's one line: its PERSONA.md's description, else what it was. */
+export const line = (f) => f.about ?? f.category.replace(/_/g, ' ').replace(/^./, (c) => c.toUpperCase());
+/**
+ * A name the agents API takes (cloud apps/agents `nameRE`): letters, digits, dots,
+ * dashes and underscores, from a letter or digit, up to 64. Accents are dropped
+ * and any other run becomes a dash: "Spärck Jones" is Sparck-Jones.
+ */
+export const handle = (name) => name
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .replace(/[^A-Za-z0-9._-]+/g, '-')
+    .replace(/^[^A-Za-z0-9]+/, '')
+    .slice(0, 64)
+    .replace(/-+$/, '');
+/**
+ * A figure as an agent: its PERSONA.md's name and its prompt word for word
+ * (the text under the front matter); a figure with none written is told who it
+ * is in one paragraph. The face is described by who it is and its one line.
+ */
+export function draft(f, md) {
+    const who = title(f);
+    const prompt = md?.replace(/^---\n[\s\S]*?\n---\n/, '').trim();
+    return {
+        name: handle(f.called ?? who),
+        does: prompt ||
+            `You are ${who}. Answer as ${who} would, in your own voice and from what you wrote and did. When a question is past what you could have known, say so.`,
+        look: `${who}, ${line(f).replace(/^./, (c) => c.toLowerCase())}`,
+    };
+}

package/dist/crew.d.ts

@@ -1,4 +1,5 @@
 import { useAgents } from '@hanzo/ai/react';
+import { type Shelf } from './agents.js';
 /**
  * The org's agents, read again whenever the sheet makes one. `useAgents` holds
  * one list per caller, so the strip, the chat header and the sheet each hold
@@ -7,6 +8,19 @@ import { useAgents } from '@hanzo/ai/react';
 export declare function useCrew(): ReturnType<typeof useAgents>;
 /** The house crew's names, which a reply may be split by even after one has left the room. */
 export declare const HOUSE: readonly string[];
+/** Opens the New agent sheet, blank or on its persona list; null shuts it. */
+export declare function make(how: 'new' | 'persona' | null): void;
+/**
+ * The New agent sheet, wherever the host mounts this once (beside the
+ * composer). It is drawn while `make` holds it open, and an agent it makes joins
+ * the conversation that is open.
+ */
+export declare function AgentMaker(): import("react").JSX.Element;
+/**
+ * The composer's `+` › Agents: the org's agents, the default cast first, each
+ * by its face; on is in the open conversation, and a pick toggles it there.
+ */
+export declare function useAgentShelf(): Shelf;
 /**
  * `to` is the chat a press opens, for a strip on a page that is not one. Absent,
  * the strip sits under a chat and a press changes who is in it.
@@ -20,17 +34,24 @@ export declare function Crew({ to }?: {
  * A name, a mind and a spending limit are what the agents API requires; what it
  * does becomes its instructions; the likeness is whichever the maker gives — a
  * photo uploaded onto the round picture (pressed, or dropped on), or a face
- * described and drawn by the image model. Both go through `mark`, the one crop
- * every saved face takes, so a drawn face and an uploaded one are the same kind
- * of picture. The row keeps at most one of a picture and an emoji, so choosing
- * one clears the other here too.
+ * described and drawn by Hanzo's image model (`PAINTER`), one call per press of
+ * Draw or Regenerate. An agent created with neither a picture nor an emoji has
+ * one drawn then, once, from the description or else its name. Every face goes
+ * through `mark`, the one crop every saved face takes, and is kept as the row's
+ * `avatar`. The row keeps at most one of a picture and an emoji, so choosing one
+ * clears the other here too.
+ *
+ * Start from a persona fills the name, the instructions and the face's
+ * description from a figure of @hanzo/personas' roster (agents.ts `draft`);
+ * `start` opens the sheet on that list.
  *
  * Create stays off until the required fields are filled in the API's own
  * terms, and a refusal is said in plain words under the field it concerns.
  *
  * EXPORTED, because Contacts adds agents too and there is one way to make one.
  */
-export declare function Hire({ onClose, onMade }: {
+export declare function Hire({ onClose, onMade, start }: {
     onClose: () => void;
     onMade: (name: string) => void;
+    start?: boolean;
 }): import("react").JSX.Element;