@hanzo/build 0.2.15 → 0.2.16

package/lib/builder.js

@@ -28,7 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * left column, never two.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, Menu, SlidersHorizontal, Workflow } from '@hanzogui/lucide-icons-2';
+import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, Menu, Search, SlidersHorizontal, Workflow } from '@hanzogui/lucide-icons-2';
 import { Button } from '@hanzo/ui';
 import { SessionRail } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzo/ui/product';
@@ -49,7 +49,6 @@ import { Artifacts, Templates } from './shelf.js';
 import { Find } from './find.js';
 import { DOCS, Slack, Who } from './foot.js';
 import { Settings } from './settings/index.js';
-import { Where } from './switch.js';
 function Shell() {
     const host = useHost();
     const t = useTarget();
@@ -72,10 +71,10 @@ function Shell() {
         return list;
     }, [recents.value, order]);
     const screen = r.kind === 'screen' ? r.screen : '';
-    // The top left: the builder's name, which leads to New, and under it the
-    // organization switcher once there is an org to switch. Beside the rail from md
-    // up, beside the drawer's button below it — one place at a time.
-    const switcher = Boolean(host.person && (host.org || (host.memberships?.length ?? 0) > 0));
+    // The top left, as on claude.ai: the builder's name, which leads to New, and under
+    // it the search that finds a run. The organization is the account's, so it is
+    // switched from the account menu at the foot. Beside the rail from md up, beside
+    // the drawer's button below it — one place at a time.
     const name = (_jsx(XStack, { render: "button", "aria-label": "Hanzo Build", items: "center", onPress: () => go(''), children: _jsx(SizableText, { size: "$5", fontWeight: "600", color: "$ink", numberOfLines: 1, children: "Hanzo Build" }) }));
     const links = [
         { id: 'projects', label: 'Projects', icon: _jsx(Kanban, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'projects' })), active: screen === 'projects' },
@@ -107,13 +106,14 @@ function Shell() {
     ];
     return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, bg: "$background", children: [_jsxs(YStack, { position: "relative", shrink: 0, children: [_jsx(SessionRail, { onNew: () => go(''), fresh: r.kind === 'new', links: links, more: more, recents: rows, active: r.kind === 'run' ? r.id : null, onOpen: (id) => go(id), onSort: () => setOrder(order === 'newest' ? 'running' : 'newest'), sortLabel: order === 'newest' ? 'Show running first' : 'Show newest first', empty: _jsx(SizableText, { size: "$1", color: "$soft", px: "$2", children: !host.person ? 'Sign in to see your runs.' : recents.error ? recents.error.message : recents.loading ? 'Reading…' : 'No runs yet.' }), notice: host.person && !slack ? (_jsx(Slack, { onOpen: () => go(path({ kind: 'settings', section: 'integrations' })), onDismiss: () => setSlack(true) })) : undefined, account: host.person
                             ? {
-                                name: host.person.email || host.person.name,
+                                // Who, and in which organization, as claude.ai says who and on which plan.
+                                name: [host.person.name || host.person.email, host.org].filter(Boolean).join(' · '),
                                 onPress: () => {
                                     setDrawer(false);
                                     setMenu(true);
                                 },
                             }
-                            : { name: 'Sign in', onPress: () => host.signIn?.() }, onSettings: () => go(path({ kind: 'settings', section: 'general' })), onSearch: () => setFinding(true), collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : switcher ? 92 : 48, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsxs(YStack, { position: "absolute", t: 10, l: 12, r: 8, z: 2, gap: "$2", "$max-md": { display: 'none' }, children: [name, switcher ? _jsx(Where, {}) : null] })), host.person ? _jsx(Who, { open: menu, onOpenChange: setMenu, narrow: collapsed }) : null] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 44, px: "$2", gap: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }), name, _jsx(XStack, { flex: 1 }), switcher ? _jsx(Where, {}) : null] }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
+                            : { name: 'Sign in', onPress: () => host.signIn?.() }, collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : 92, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsxs(YStack, { position: "absolute", t: 10, l: 8, r: 8, z: 2, gap: "$2.5", "$max-md": { display: 'none' }, children: [_jsx(XStack, { px: "$2.5", children: name }), _jsxs(XStack, { render: "button", "aria-label": "Search runs", onPress: () => setFinding(true), items: "center", gap: "$2", px: "$2.5", height: 34, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: { bg: '$hover' }, children: [_jsx(Search, { size: 15, color: "$soft" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Search" })] })] })), host.person ? _jsx(Who, { open: menu, onOpenChange: setMenu, narrow: collapsed }) : null] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 44, px: "$2", gap: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }), name, _jsx(XStack, { flex: 1 }), _jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setFinding(true), "aria-label": "Search runs", children: _jsx(Search, { size: 18 }) })] }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
 }
 /** Whichever pane the address names, beside a rail — the builder's or the host's. */
 function Pane({ onStarted }) {

package/lib/foot.js

@@ -1,13 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The rail's foot: the card that offers Hanzo in Slack, and the menu the account
- * row opens — who is signed in, Settings, Usage, the plans, help and logging out.
+ * row opens — who is signed in, the organization they act in, Settings, Usage,
+ * the plans, help and logging out.
  * Everything it opens is an address of this page, but help, which is the
  * documentation.
  */
 import { Popover, SizableText, XStack, YStack } from '@hanzo/gui';
 import { Gauge, LifeBuoy, LogOut, Settings, Slack as Mark, Sparkles, X } from '@hanzogui/lucide-icons-2';
-import { MenuRow, MenuRule } from '@hanzo/ui/product';
+import { MenuLabel, MenuRow, MenuRule } from '@hanzo/ui/product';
 import { useHost } from './host.js';
 import { path } from './route.js';
 export const DOCS = 'https://docs.hanzo.ai/docs/dev';
@@ -22,11 +23,17 @@ export function Slack({ onOpen, onDismiss }) {
  */
 export function Who({ open, onOpenChange, narrow }) {
     const host = useHost();
+    // The organizations this person acts in; choosing one reloads the page scoped to it.
+    const orgs = host.memberships ?? (host.org ? [host.org] : []);
     const go = (p) => {
         onOpenChange(false);
         host.go(p);
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 6, children: [_jsx(Popover.Anchor, { position: "absolute", l: 8, b: 8, width: narrow ? 48 : 256, height: 36, pointerEvents: "none" }), _jsx(Popover.Content, { role: "menu", "aria-label": "Account", items: "stretch", borderWidth: 1, elevation: "$2", px: "$1", py: "$1", width: 260, bg: "$panel", borderColor: "$borderColor", children: _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person?.email || host.person?.name || '' }), _jsx(MenuRule, {}), _jsx(MenuRow, { label: "Settings", icon: _jsx(Settings, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(MenuRow, { label: "Usage", icon: _jsx(Gauge, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(MenuRow, { label: "View all plans", icon: _jsx(Sparkles, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(MenuRow, { label: "Get help", icon: _jsx(LifeBuoy, { size: 16 }), onPress: () => {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 6, children: [_jsx(Popover.Anchor, { position: "absolute", l: 8, b: 8, width: narrow ? 48 : 256, height: 36, pointerEvents: "none" }), _jsx(Popover.Content, { role: "menu", "aria-label": "Account", items: "stretch", borderWidth: 1, elevation: "$2", px: "$1", py: "$1", width: 260, bg: "$panel", borderColor: "$borderColor", children: _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person?.email || host.person?.name || '' }), orgs.length ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuLabel, { children: "Organization" }), _jsx(YStack, { role: "radiogroup", "aria-label": "Organizations", gap: "$1", children: orgs.map((o) => (_jsx(MenuRow, { label: o, active: o === host.org, onPress: () => {
+                                            onOpenChange(false);
+                                            if (o !== host.org)
+                                                host.chooseOrg?.(o);
+                                        } }, o))) })] })) : null, _jsx(MenuRule, {}), _jsx(MenuRow, { label: "Settings", icon: _jsx(Settings, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(MenuRow, { label: "Usage", icon: _jsx(Gauge, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(MenuRow, { label: "View all plans", icon: _jsx(Sparkles, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(MenuRow, { label: "Get help", icon: _jsx(LifeBuoy, { size: 16 }), onPress: () => {
                                 onOpenChange(false);
                                 window.open(DOCS, '_blank', 'noopener,noreferrer');
                             } }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuRow, { label: "Log out", icon: _jsx(LogOut, { size: 16 }), onPress: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a page (hanzo.build) and as a component (hanzo.ai/dev).",

package/lib/switch.d.ts

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

package/lib/switch.js

@@ -1,39 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The rail's top left: the organization, and the projects under it.
- *
- * The account stays at the foot of the rail. Settings opens that account on
- * this page. Choosing an organization reloads this origin so every read is
- * scoped to it.
- */
-import { YStack } from '@hanzo/gui';
-import { MenuLabel, MenuRow, MenuRule, OrgSwitcher } from '@hanzo/ui/product';
-import { projects } from './api/projects.js';
-import { useRead } from './data.js';
-import { useHost, useTarget } from './host.js';
-import { route } from './route.js';
-export function Where() {
-    const host = useHost();
-    const t = useTarget();
-    const signed = Boolean(host.person);
-    const list = useRead(signed ? () => projects(t) : null, [], [t, signed]);
-    const here = route(host.path);
-    const current = host.org || '';
-    const scope = {
-        currentOrg: () => current,
-        setCurrentOrg: (next) => host.chooseOrg?.(next),
-        isScopedAway: () => false,
-        hasSelectedOrg: () => Boolean(current),
-        enterOrg: (next) => host.chooseOrg?.(next),
-        leaveOrg: () => undefined,
-        switchOrg: (next) => host.chooseOrg?.(next),
-    };
-    const rows = () => Promise.resolve((host.memberships ?? (current ? [current] : [])).map((name) => ({ name, displayName: name })));
-    return (_jsx(OrgSwitcher, { scope: scope, orgs: (page) => (page === 0 ? rows() : Promise.resolve([])), pageSize: 50, search: false, heading: "Organization", lead: true, sub: here.kind === 'project' ? here.slug : undefined, current: current ? { name: current, displayName: current } : undefined, aria: current ? `Organization ${current}` : 'Organization', footer: (close) => (_jsxs(YStack, { gap: "$1", children: [list.value.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuLabel, { children: "Project" }), _jsx(YStack, { role: "radiogroup", "aria-label": "Projects", gap: "$1", children: list.value.slice(0, 12).map((p) => (_jsx(MenuRow, { label: p.name || p.slug, active: here.kind === 'project' && here.slug === p.slug, onPress: () => {
-                                    close();
-                                    host.go(p.slug);
-                                } }, p.slug))) })] })) : null, _jsx(MenuRule, {}), _jsx(MenuRow, { label: "Settings", onPress: () => {
-                        close();
-                        host.go('-/settings');
-                    } })] })) }));
-}