@hanzo/app 0.2.8 → 0.2.10

package/dist/App.js

@@ -61,14 +61,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // so the builder's own plans are never drawn.
 import { useI18n } from '@hanzo/i18n/react';
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { ArrowLeft, ArrowRight, RefreshCw } from 'lucide-react';
 import { AiProvider } from '@hanzo/ai/react';
 import { XStack, YStack } from '@hanzo/gui';
-import { Builder, HostProvider, PrefsProvider, route } from '@hanzo/build';
+import { Builder, HostProvider, PrefsProvider, route, tabs } from '@hanzo/build';
 import { nav as places } from '@hanzo/studio';
 import { useAi } from './lib/ai.js';
 import { Chat } from './Chat.js';
 import { Column } from './Column.js';
+import { Learning } from './Learning.js';
 import { isPlans, leave, useDevHost } from './dev.js';
 import { Orgs } from './Orgs.js';
 import { useRooms } from './host.js';
@@ -118,6 +119,7 @@ function Window({ bar }) {
     const [closed, setClosed] = useKept('hanzo.build.rail', false);
     // The palette is open (the sidebar's search; ⌘K toggles it).
     const [finding, setFinding] = useState(false);
+    const [learning, setLearning] = useState(false);
     const found = useCallback(() => setFinding(false), []);
     const dev = useDevHost();
     // The builder's moves put the drawer away, in its place in the history; one to
@@ -254,7 +256,11 @@ function Window({ bar }) {
         pick(o);
         window.location.assign(mode === 'dev' ? app('') : mode === 'studio' ? studio('') : mode === 'tabs' ? TERMINALS : talk());
     };
-    const sidebar = mode === 'studio' ? places(maker, (p) => maker.go(p)) : undefined;
+    const sidebar = mode === 'studio' ? places(maker, (p) => maker.go(p)) : mode === 'dev' && raised(where) === 'customize'
+        ? tabs(host, (p) => host.go(p), t).map((group) => ({ ...group, links: [...group.links, {
+                    id: 'learning', label: t('Learning'), active: learning, icon: _jsx(RefreshCw, { size: 16, "aria-hidden": true }),
+                    onPress: () => { shut(); setLearning(true); },
+                }] })) : undefined;
     const flip = () => setClosed(!closed);
     const seek = () => {
         shut();
@@ -262,5 +268,5 @@ function Window({ bar }) {
     };
     return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: windowRef, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT, ...{ overflow: 'clip' } }, children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer.state === 'open', onPress: drawer.open, label: t('Open sidebar') }) }), _jsx(Mark, { label: t('Back'), "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true, "data-i18n-mirror": true }) }), _jsx(Mark, { label: t('Forward'), "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true, "data-i18n-mirror": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { ref: drawer.pane, "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), ...(drawer.slide ? RAISED : null), 
                             // inline-style: the slide, a transform with no logical form whose sign and distance the drawer writes on the element itself, a drag every frame (Drawer.tsx).
-                            style: drawer.slide ?? undefined, flex: 1, minW: 0, minH: 0, paddingInlineEnd: "var(--pane-gap)", pb: "var(--pane-gap)", pt: 0, "$max-md": { p: 0 }, children: [drawer.slide ? _jsx(Lift, {}) : null, _jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }) }), closed || mode === 'tabs' ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, onBack: back, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, marginInlineStart: closed || mode === 'tabs' ? 0 : 'var(--pane-gap)', "$max-md": { marginInlineStart: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, open: drawer.state !== 'shut', go: move, onMenu: drawer.open, onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'tabs' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(Suspense, { fallback: null, children: _jsx(Terminals, {}) }) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer.state === 'shut' ? null : (_jsx(Layer, { drawer: drawer, top: bar ? BAR : 0, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, onBack: back, drawer: true, places: sidebar, rail: _jsx(Rail, { host: host, mode: mode, at: where, open: true, rows: true, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }), foot: _jsx(Foot, { host: host, onChat: fresh, onOrg: org }) }) })), finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
+                            style: drawer.slide ?? undefined, flex: 1, minW: 0, minH: 0, paddingInlineEnd: "var(--pane-gap)", pb: "var(--pane-gap)", pt: 0, "$max-md": { p: 0 }, children: [drawer.slide ? _jsx(Lift, {}) : null, _jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }) }), closed || mode === 'tabs' ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, onBack: back, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, marginInlineStart: closed || mode === 'tabs' ? 0 : 'var(--pane-gap)', "$max-md": { marginInlineStart: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, open: drawer.state !== 'shut', go: move, onMenu: drawer.open, onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'tabs' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(Suspense, { fallback: null, children: _jsx(Terminals, {}) }) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer.state === 'shut' ? null : (_jsx(Layer, { drawer: drawer, top: bar ? BAR : 0, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, onBack: back, drawer: true, places: sidebar, rail: _jsx(Rail, { host: host, mode: mode, at: where, open: true, rows: true, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }), foot: _jsx(Foot, { host: host, onChat: fresh, onOrg: org }) }) })), finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null, learning ? _jsx(Learning, { open: true, onClose: () => setLearning(false) }) : null] }) }) }) }));
 }

package/dist/Betas.js

@@ -16,6 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Signed out, still loading, or on any error nothing is open: a flags outage
 // cannot leak an unfinished app.
 import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
+import { ArrowUpRight, Compass } from 'lucide-react';
 import { phrase } from '@hanzo/i18n';
 import { useI18n } from '@hanzo/i18n/react';
 import { useIam } from '@hanzo/iam/react';
@@ -138,5 +139,5 @@ export function BetasList({ go }) {
 /** The Betas list in a dialog, from the rail's More. */
 export function BetasDialog({ open, onOpenChange, go }) {
     const { t } = useI18n();
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 520, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: t('Betas') }), _jsx(Text, { fontSize: "$2", color: "$color11", children: t('Apps we have not opened to everyone yet. Ask for the ones you want and we will let you in.') }), _jsx(YStack, { maxH: "60vh", overflowY: "auto", overflowX: "hidden", paddingInlineEnd: "$2", children: _jsx(BetasList, { go: go }) })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 520, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: t('Betas') }), _jsx(Text, { fontSize: "$2", color: "$color11", children: t('Apps we have not opened to everyone yet. Ask for the ones you want and we will let you in.') }), _jsx(YStack, { maxH: "60vh", overflowY: "auto", overflowX: "hidden", paddingInlineEnd: "$2", children: _jsx(BetasList, { go: go }) }), _jsxs(XStack, { items: "center", justify: "space-between", pt: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$color11", children: t('Looking for community plugins and MCP tools?') }), _jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => window.open('https://hanzo.market', '_blank', 'noopener,noreferrer'), children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Compass, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", children: t('Explore on hanzo.market') }), _jsx(ArrowUpRight, { size: 13, "aria-hidden": true })] }) })] })] }) }));
 }

package/dist/Chat.js

@@ -58,7 +58,7 @@ import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
 import { refused as worded, speech, useDictation, useTalk, useVoice } from "@hanzo/voice";
 import { Check, Clock, FileText, Image as ImageMark, Library as LibraryMark, Paperclip, Sparkles, X } from "lucide-react";
-import { FREE } from "./lib/ai.js";
+import { FREE, ENSO } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
 import { SEED, look, useSections, useSites } from "./RightPane.js";
@@ -73,6 +73,8 @@ import { enter, LOGIN } from './lib/destination.js';
 import { first } from './lib/first.js';
 import { BAD } from "./lib/mix.js";
 import { brand } from './where.js';
+import { ThinkingEffort } from './ThinkingEffort.js';
+import { useChatPreferences } from './lib/chatPreferences.js';
 // NO REASONING PANEL HERE. Every assistant turn opened a "Thinking" disclosure
 // listing seven steps — "Planning CSS extraction for chat styles", "Designing
 // responsive top bar grid layout" — typed into this file as a literal array.
@@ -508,6 +510,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     const { limits, notice, reload: reread } = useLimits(!anonymous, org(), (id) => nameOf(id, catalog.current));
     const mind = useMind(target, anonymous ? "free" : limits?.plan);
     catalog.current = mind.models;
+    const [chatPrefs] = useChatPreferences();
     const ai = useAi();
     // In the app's frame the composer floats on the pane as a pane of its own.
     const framed = useContext(Framed);
@@ -682,8 +685,20 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // A SPEECH MODEL NEVER ANSWERS A CHAT TURN. The catalog lists the
     // transcriber and the voice beside the chat models; one that names its
     // outputs and names no text (`chats`) is neither offered nor fallen back to.
+    const isHouseModel = (m) => {
+        const id = (m.id || '').toLowerCase();
+        const family = (m.family || '').toLowerCase();
+        return id.startsWith('enso') || id.startsWith('zen') || id.startsWith('kai') ||
+            family.startsWith('enso') || family.startsWith('zen') || family.startsWith('kai') ||
+            m.class === 'ours';
+    };
     const listed = mind.models;
-    const models = useMemo(() => listed.filter(chats), [listed]);
+    const filteredListed = useMemo(() => {
+        if (chatPrefs.allowThirdPartyModels)
+            return listed;
+        return listed.filter((m) => isHouseModel(m) || m.id === ENSO || m.id === FREE);
+    }, [listed, chatPrefs.allowThirdPartyModels]);
+    const models = useMemo(() => filteredListed.filter(chats), [filteredListed]);
     // EVERY MODEL THE GATEWAY LISTS is offered here, through the one picker, and
     // read from the catalog's own fields (`parseModels`): its class, its family.
     // A premium model is picked for THIS conversation and never remembered as
@@ -728,7 +743,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         // before the model is asked and asks without them, so a question about the
         // world, in any language, is answered from what the web says now and streams.
         params: {
-            reasoning_effort: mind.effort,
+            reasoning_effort: mind.effort || 'auto',
             ...(!anonymous && house(rowOf(model)?.family) ? { tools: WEB } : {}),
         },
         ...(open ? { thread: open } : {}),
@@ -1554,5 +1569,15 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                 empty: heading === null ? undefined : (_jsxs(YStack, { "data-slot": "opening", items: "center", width: "100%", pt: "$6", pb: "$2", ...(media.sm ? null : { flex: 1, justify: "flex-end" }), children: [room.length > 1 ? (_jsx(XStack, { items: "center", justify: "center", mb: "$4", children: room.map((name, i) => (_jsx(Box, { marginInlineStart: i ? -16 : 0, rounded: 40, borderWidth: 2, borderColor: "$background", z: room.length - i, children: _jsx(Face, { src: faces[name]?.avatar, emoji: faces[name]?.emoji, name: name, size: 72 }) }, name))) })) : portrait ? (_jsx(Box, { width: 160, height: 160, rounded: 24, overflow: "hidden", borderWidth: 2, borderColor: "var(--white-15)", boxShadow: "0 10px 24px color-mix(in srgb, var(--pure-black) 70%, transparent)", mb: "$4", bg: "var(--neutral-900)", children: _jsx(View, { render: _jsx("img", { src: portrait, alt: withWhom }), width: "100%", height: "100%", objectFit: "cover" }) })) : null, room.length === 1 && !portrait ? (_jsx(Box, { mb: "$3", children: _jsx(Face, { emoji: mate?.emoji ?? persona?.emoji, name: withWhom, size: 72 }) })) : null, _jsx(Text, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", text: "center", mb: "$1", children: join(room, t) || heading || (firstName ? t("What’s up, {name}?", { name: firstName }) : t("What’s up?")) }), room.length === 1 && (mate?.description ?? persona?.description) ? (_jsx(Text, { fontSize: "$3", color: "$soft", text: "center", maxW: 500, mb: "$4", lineHeight: "$4", children: mate?.description ?? persona?.description })) : null] })), 
                 // The transcript reads at the same measure. `Thread` defaults to 768
                 // itself; handing it the column here is what lets Width reach it.
-                column: { maxW: MEASURE }, composer: prompt({ ...composing, field: mention.field }, mention.state) }), _jsx(AgentMaker, {}), carry.dialog, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
+                column: { maxW: MEASURE }, composer: (() => {
+                    const basePrompt = prompt({
+                        ...composing,
+                        mind: chatPrefs.showModelSelector ? mind : null,
+                        field: mention.field,
+                    }, mention.state);
+                    return {
+                        ...basePrompt,
+                        send: (_jsxs(XStack, { items: "center", gap: "$1.5", shrink: 0, children: [_jsx(ThinkingEffort, { effort: mind.effort || 'auto', onChange: (eff) => mind.pace(eff), disabled: chat.streaming || talk.open }), basePrompt.send] })),
+                    };
+                })() }), _jsx(AgentMaker, {}), carry.dialog, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
 }

package/dist/Directory.js

@@ -47,7 +47,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { phrase } from '@hanzo/i18n';
 import { useI18n } from '@hanzo/i18n/react';
 import { useEffect, useMemo, useState } from 'react';
-import { ArrowUpRight, Check, Plus, Search, X } from 'lucide-react';
+import { ArrowUpRight, Check, Compass, Plus, Search, X } from 'lucide-react';
 import { Box, Dialog, DialogContent, DialogTitle, Input, Text, XStack, YStack, } from '@hanzo/ui';
 import { Grid } from '@hanzo/ui/grid';
 import { useIam } from '@hanzo/iam/react';
@@ -218,7 +218,7 @@ export function Catalog({ tab }) {
         return (rows ?? []).filter((r) => !q || r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q));
     }, [rows, query]);
     const quiet = (text, action) => (_jsxs(YStack, { gap: "$3", py: "$4", items: "flex-start", children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: text }), action] }));
-    return (_jsxs(YStack, { gap: "$4", children: [_jsx(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: _jsxs(XStack, { items: "center", gap: "$2", flex: 1, minW: 180, children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Input, { value: query, onChangeText: setQuery, placeholder: search, "aria-label": search, flex: 1 })] }) }), tab === 'channels' && !signed ? (quiet(t('Sign in to see the channels your organization can connect.'), _jsx(Action, { render: "button", onPress: () => enter(), $touchable: { minH: 44, minW: 44 }, children: t('Sign in') }))) : wrong ? (quiet(say(wrong, t('the channels'), 'read', t), _jsx(Action, { render: "button", onPress: () => setTurn((n) => n + 1), $touchable: { minH: 44, minW: 44 }, children: t('Try again') }))) : rows === null ? (quiet(t(tab === 'channels' ? 'Loading channels…' : 'Loading works with…'))) : shown.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: shown.length === 1 ? t('1 result') : t('{n} results', { n: shown.length }) }), _jsx(YStack, { maxH: 380, overflowY: "auto", overflowX: "hidden", paddingInlineEnd: "$1", width: "100%", children: _jsx(Grid, { columns: tab === 'channels' ? { min: 168, max: 4 } : { min: 240, max: 2 }, gap: 12, children: shown.map((r) => tab === 'channels' ? (_jsx(Channel, { row: r, onChange: () => setTurn((n) => n + 1) }, r.id)) : (_jsx(RowCard, { row: r, tab: tab }, r.id))) }) })] })) : (quiet(query ? t('Nothing matches “{query}”.', { query }) : t(tab === 'channels' ? 'No channel can be connected here yet.' : 'Nothing is listed yet.')))] }));
+    return (_jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", flexWrap: "wrap", children: [_jsxs(XStack, { items: "center", gap: "$2", flex: 1, minW: 180, children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Input, { value: query, onChangeText: setQuery, placeholder: search, "aria-label": search, flex: 1 })] }), _jsx(Action, { render: "button", onPress: () => window.open('https://hanzo.market', '_blank', 'noopener,noreferrer'), $touchable: { minH: 36 }, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Compass, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", fontWeight: "500", children: t('Explore on hanzo.market') }), _jsx(ArrowUpRight, { size: 13, "aria-hidden": true })] }) })] }), tab === 'channels' && !signed ? (quiet(t('Sign in to see the channels your organization can connect.'), _jsx(Action, { render: "button", onPress: () => enter(), $touchable: { minH: 44, minW: 44 }, children: t('Sign in') }))) : wrong ? (quiet(say(wrong, t('the channels'), 'read', t), _jsx(Action, { render: "button", onPress: () => setTurn((n) => n + 1), $touchable: { minH: 44, minW: 44 }, children: t('Try again') }))) : rows === null ? (quiet(t(tab === 'channels' ? 'Loading channels…' : 'Loading works with…'))) : shown.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: shown.length === 1 ? t('1 result') : t('{n} results', { n: shown.length }) }), _jsx(YStack, { maxH: 380, overflowY: "auto", overflowX: "hidden", paddingInlineEnd: "$1", width: "100%", children: _jsx(Grid, { columns: tab === 'channels' ? { min: 168, max: 4 } : { min: 240, max: 2 }, gap: 12, children: shown.map((r) => tab === 'channels' ? (_jsx(Channel, { row: r, onChange: () => setTurn((n) => n + 1) }, r.id)) : (_jsx(RowCard, { row: r, tab: tab }, r.id))) }) })] })) : (quiet(query ? t('Nothing matches “{query}”.', { query }) : t(tab === 'channels' ? 'No channel can be connected here yet.' : 'Nothing is listed yet.')))] }));
 }
 function RowCard({ row, tab }) {
     const { t } = useI18n();

package/dist/Learning.d.ts

@@ -0,0 +1,5 @@
+/** The user's actual evidence and findings. Closed dialogs make no API requests. */
+export declare function Learning({ open, onClose }: {
+    open: boolean;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/Learning.js

@@ -0,0 +1,93 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '@hanzo/i18n/react';
+import { useIam } from '@hanzo/iam/react';
+import { useEffect, useRef, useState } from 'react';
+import { Button, Dialog, DialogContent, DialogTitle, Input, Text, XStack, YStack } from '@hanzo/ui';
+import { say } from './failure.js';
+import { org } from './lib/session.js';
+import { learningAnalyze, learningCompare, learningCreate, learningRead } from './learning.js';
+/** The user's actual evidence and findings. Closed dialogs make no API requests. */
+export function Learning({ open, onClose }) {
+    const { t } = useI18n();
+    const { accessToken } = useIam();
+    const tenant = org();
+    const identity = `${tenant}:${accessToken ?? ''}`;
+    const [held, setHeld] = useState({ identity: '', answers: {} });
+    const [revision, setRevision] = useState(0);
+    const [tab, setTab] = useState('research');
+    const [form, setForm] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [problem, setProblem] = useState(null);
+    const draftId = useRef('');
+    const [measuring, setMeasuring] = useState(false);
+    const [measured, setMeasured] = useState({ identity: '' });
+    const [pair, setPair] = useState({ benchmark: '', a: '', b: '' });
+    const results = measured.identity === identity ? measured : null;
+    const [proposal, setProposal] = useState({ title: '', question: '', baseline: '', target: '', metric: 'accuracy', category: 'all', direction: 'higher', minQuestions: 20, minGain: 1 });
+    const answers = held.identity === identity ? held.answers : {};
+    useEffect(() => {
+        if (!open || !accessToken)
+            return;
+        const controller = new AbortController();
+        setHeld({ identity, answers: {} });
+        for (const part of ['studies', 'reviews', 'experiments', 'benchmarks']) {
+            void learningRead(part, controller.signal).then((rows) => { if (!controller.signal.aborted)
+                setHeld((old) => ({ identity, answers: { ...old.answers, [part]: { rows } } })); }, (error) => { if (!controller.signal.aborted)
+                setHeld((old) => ({ identity, answers: { ...old.answers, [part]: { error } } })); });
+        }
+        return () => controller.abort();
+    }, [open, accessToken, identity, revision]);
+    const create = async () => {
+        if (busy)
+            return;
+        setBusy(true);
+        setProblem(null);
+        try {
+            if (!draftId.current)
+                draftId.current = `improvement-${crypto.randomUUID()}`;
+            await learningCreate(proposal, draftId.current);
+            draftId.current = '';
+            setForm(false);
+            setRevision((n) => n + 1);
+        }
+        catch (error) {
+            setProblem(error);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const analyze = async (id) => {
+        setMeasuring(true);
+        setMeasured({ identity });
+        try {
+            setMeasured({ identity, analysis: await learningAnalyze(id) });
+        }
+        catch (error) {
+            setMeasured({ identity, error });
+        }
+        finally {
+            setMeasuring(false);
+        }
+    };
+    const compare = async () => {
+        setMeasuring(true);
+        setMeasured({ identity });
+        try {
+            setMeasured({ identity, comparison: await learningCompare(pair.benchmark, pair.a, pair.b) });
+        }
+        catch (error) {
+            setMeasured({ identity, error });
+        }
+        finally {
+            setMeasuring(false);
+        }
+    };
+    const state = (part) => answers[part]?.error
+        ? _jsx(Text, { role: "alert", color: "$soft", children: say(answers[part]?.error, t('your learning activity'), 'read', t) })
+        : !answers[part]?.rows ? _jsx(Text, { color: "$soft", children: t('Loading…') }) : null;
+    const field = (key, label) => (_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$2", children: label }), _jsx(Input, { "aria-label": label, value: proposal[key], onChangeText: (value) => setProposal((old) => ({ ...old, [key]: value })) })] }));
+    return _jsx(Dialog, { open: open, onOpenChange: (next) => { if (!next)
+            onClose(); }, children: _jsx(DialogContent, { width: "100%", maxW: 900, p: "$5", children: _jsxs(YStack, { gap: "$4", maxH: "80vh", overflow: "scroll", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: _jsx(Text, { fontSize: "$5", children: t('Learning') }) }), _jsx(Button, { size: "sm", onPress: onClose, children: t('Close') })] }), _jsx(Text, { color: "$soft", children: t('Research, test ideas, and review improvements backed by your workspace’s evidence.') }), !accessToken ? _jsx(Text, { role: "status", children: t('Sign in to see your learning activity.') }) : _jsxs(_Fragment, { children: [_jsxs(XStack, { gap: "$2", flexWrap: "wrap", role: "tablist", "aria-label": t('Learning'), children: [_jsx(Button, { role: "tab", "aria-selected": tab === 'research', onPress: () => setTab('research'), children: t('Research') }), _jsx(Button, { role: "tab", "aria-selected": tab === 'experiments', onPress: () => setTab('experiments'), children: t('Experiments') }), _jsx(Button, { role: "tab", "aria-selected": tab === 'benchmarks', onPress: () => setTab('benchmarks'), children: t('Benchmarks') }), _jsx(Button, { size: "sm", onPress: () => setRevision((n) => n + 1), children: t('Refresh') })] }), tab === 'research' ? _jsxs(YStack, { gap: "$3", children: [_jsx(Text, { color: "$soft", children: t('A study with a baseline and acceptance criteria reviews new results as they arrive. Findings remain drafts until reviewed.') }), _jsx(Button, { size: "sm", onPress: () => setForm(!form), children: form ? t('Cancel') : t('New improvement study') }), form ? _jsx("form", { onSubmit: (event) => { event.preventDefault(); void create(); }, children: _jsxs(YStack, { gap: "$2", children: [field('title', t('Title')), field('question', t('Research question')), field('baseline', t('Baseline run ID')), field('target', t('App, harness, skill or connector')), field('category', t('Metric category')), field('metric', t('Primary metric')), _jsx(XStack, { gap: "$2", children: _jsx(Button, { type: "button", size: "sm", onPress: () => setProposal((p) => ({ ...p, direction: p.direction === 'higher' ? 'lower' : 'higher' })), children: proposal.direction === 'higher' ? t('Higher is better') : t('Lower is better') }) }), _jsx(Text, { fontSize: "$2", children: t('Minimum completed evaluation size') }), _jsx(Input, { "aria-label": t('Minimum completed evaluation size'), type: "number", value: String(proposal.minQuestions), onChangeText: (v) => setProposal((p) => ({ ...p, minQuestions: Number(v) })) }), _jsx(Text, { fontSize: "$2", children: t('Minimum gain in metric units') }), _jsx(Input, { "aria-label": t('Minimum gain in metric units'), type: "number", value: String(proposal.minGain), onChangeText: (v) => setProposal((p) => ({ ...p, minGain: Number(v) })) }), _jsx(Text, { color: "$soft", children: t('This enables evaluation of recorded results. It does not start a model call or change a live app.') }), problem ? _jsx(Text, { role: "alert", children: say(problem, t('this study'), 'save', t) }) : null, _jsx(Button, { type: "submit", disabled: busy || !proposal.baseline.trim() || !proposal.target.trim() || !proposal.title.trim() || !proposal.question.trim() || !proposal.metric.trim() || !Number.isInteger(proposal.minQuestions) || proposal.minQuestions < 1 || !Number.isFinite(proposal.minGain) || proposal.minGain < 0, children: busy ? t('Saving…') : t('Enable study') })] }) }) : null, state('studies'), answers.studies?.rows?.map((study) => _jsxs(YStack, { gap: "$1", p: "$3", bg: "$panel", rounded: "$3", children: [_jsx(Text, { children: study.title || study.id }), _jsx(Text, { color: "$soft", children: study.question }), _jsx(Text, { fontSize: "$2", children: study.improvement ? t('Automatic review enabled') : t('Evidence only') })] }, `${study.project}:${study.id}`)), answers.studies?.rows?.length === 0 ? _jsx(Text, { color: "$soft", children: t('No studies yet. Create one to review recorded results continuously.') }) : null, _jsx(Text, { fontSize: "$4", children: t('Improvement findings') }), state('reviews'), answers.reviews?.rows?.map((row) => _jsxs(YStack, { gap: "$1", p: "$3", bg: "$panel", rounded: "$3", children: [_jsx(Text, { children: row.action.review?.target }), _jsxs(Text, { children: [row.action.review?.status, " \u00B7 ", row.status] }), _jsx(Text, { color: "$soft", children: row.action.description }), row.action.review?.blocks?.map((block, i) => _jsx(Text, { fontSize: "$2", color: "$soft", children: block }, i))] }, row.id)), answers.reviews?.rows?.length === 0 ? _jsx(Text, { color: "$soft", children: t('Findings appear when a study has baseline and candidate results. No result is being claimed yet.') }) : null] }) : tab === 'experiments' ? _jsxs(YStack, { gap: "$3", children: [_jsx(Text, { color: "$soft", children: t('Controlled experiments assign variants and measure their outcomes. Choosing a winner changes a live rollout and requires an authorized review.') }), state('experiments'), answers.experiments?.rows?.map((row) => _jsxs(YStack, { gap: "$1", p: "$3", bg: "$panel", rounded: "$3", children: [_jsx(Text, { children: row.name || row.id }), _jsxs(Text, { color: "$soft", children: [row.status, row.winner ? ` · ${row.winner}` : ''] }), _jsx(Button, { size: "sm", disabled: measuring, onPress: () => void analyze(row.id), children: t('Analyze outcomes') })] }, row.id)), results?.error ? _jsx(Text, { role: "alert", children: say(results.error, t('this experiment'), 'read', t) }) : null, results?.analysis?.results?.map((row) => _jsxs(YStack, { gap: "$1", children: [_jsx(Text, { children: row.variant }), _jsx(Text, { color: "$soft", children: t('{converted} of {exposed} converted', { converted: row.converted, exposed: row.exposed }) })] }, row.variant)), answers.experiments?.rows?.length === 0 ? _jsx(Text, { color: "$soft", children: t('No controlled experiments yet.') }) : null] }) : _jsxs(YStack, { gap: "$3", children: [_jsx(Text, { color: "$soft", children: t('Benchmarks compare actual measurements. Requesting a benchmark result does not execute an evaluation harness.') }), state('benchmarks'), _jsx(Input, { "aria-label": t('Benchmark ID'), placeholder: t('Benchmark ID'), value: pair.benchmark, onChangeText: (benchmark) => setPair((p) => ({ ...p, benchmark })) }), _jsx(Input, { "aria-label": t('First model ID'), placeholder: t('First model ID'), value: pair.a, onChangeText: (a) => setPair((p) => ({ ...p, a })) }), _jsx(Input, { "aria-label": t('Second model ID'), placeholder: t('Second model ID'), value: pair.b, onChangeText: (b) => setPair((p) => ({ ...p, b })) }), _jsx(Button, { disabled: measuring || !pair.benchmark.trim() || !pair.a.trim() || !pair.b.trim(), onPress: () => void compare(), children: t('Compare measurements') }), results?.error ? _jsx(Text, { role: "alert", children: say(results.error, t('these benchmark results'), 'read', t) }) : null, results?.comparison ? _jsx(YStack, { gap: "$1", children: results.comparison.n_common === 0 ? _jsx(Text, { children: t('No shared measured items. Record both evaluations before comparing.') }) : _jsxs(_Fragment, { children: [_jsx(Text, { children: t('{count} shared measured items', { count: results.comparison.n_common }) }), _jsxs(Text, { children: [results.comparison.a, ": ", results.comparison.a_correct, " \u00B7 ", results.comparison.b, ": ", results.comparison.b_correct] })] }) }) : null, answers.benchmarks?.rows?.map((row) => _jsxs(YStack, { gap: "$1", p: "$3", bg: "$panel", rounded: "$3", children: [_jsx(Text, { children: row.name || row.id }), _jsx(Text, { color: "$soft", children: row.direction === 'lower' ? t('Lower is better') : t('Higher is better') }), _jsx(Button, { size: "sm", onPress: () => setPair((p) => ({ ...p, benchmark: row.id })), children: t('Use this benchmark') })] }, row.id))] })] })] }) }) });
+}

package/dist/Market.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // reach, a stdio package is a process someone still has to run.
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { say } from './failure.js';
-import { Check, Search } from 'lucide-react';
+import { ArrowUpRight, Check, Compass, Search } from 'lucide-react';
 import { Box, Text, XStack, YStack } from '@hanzo/ui';
 import { useIam } from '@hanzo/iam/react';
 import { hasSession } from './lib/session.js';
@@ -138,7 +138,7 @@ export function Market({ scope }) {
         return _jsx(Empty, { children: "Sign in to browse agents you can add." });
     if (failed)
         return _jsx(Empty, { children: say(failed, 'the marketplace') });
-    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { p: "$5", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(Text, { fontSize: "$7", lineHeight: "$7", fontWeight: "500", color: "$ink", children: ["Put AI to work in ", brand()] }), _jsxs(Text, { fontSize: "$3", color: "$soft", children: ["Browse agents that bring your tools into ", brand(), "."] }), _jsxs(XStack, { mt: "$2", width: 420, maxW: "100%", height: 36, items: "center", gap: "$2", px: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: ask, onChange: (e) => setAsk(e.target.value), placeholder: "Search agents" }), flex: 1, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit" })] })] }), !listings ? (_jsx(Empty, { children: "Reading the shelf." })) : shown.length === 0 ? (_jsx(Empty, { children: scope === 'installed'
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { p: "$5", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(Text, { fontSize: "$7", lineHeight: "$7", fontWeight: "500", color: "$ink", children: ["Put AI to work in ", brand()] }), _jsxs(Text, { fontSize: "$3", color: "$soft", children: ["Browse agents that bring your tools into ", brand(), "."] }), _jsxs(XStack, { items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", mt: "$2", children: [_jsxs(XStack, { width: 420, maxW: "100%", height: 36, items: "center", gap: "$2", px: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: ask, onChange: (e) => setAsk(e.target.value), placeholder: "Search agents" }), flex: 1, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit" })] }), _jsxs(XStack, { render: "button", onPress: () => window.open('https://hanzo.market', '_blank', 'noopener,noreferrer'), height: 36, px: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(Compass, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", children: "Explore on hanzo.market" }), _jsx(ArrowUpRight, { size: 13, "aria-hidden": true, color: "$soft" })] })] })] }), !listings ? (_jsx(Empty, { children: "Reading the shelf." })) : shown.length === 0 ? (_jsx(Empty, { children: scope === 'installed'
                     ? 'No agents installed yet.'
                     : ask
                         ? 'Nothing in the registry matches that.'

package/dist/Me.js

@@ -32,11 +32,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // the plan from billing and the limits. An organization is created by the same
 // `POST /v1/account/orgs` the no-organization gate uses (Orgs.tsx); the next load
 // mints a token that carries it.
-import { phrase } from '@hanzo/i18n';
+import { phrase, locales } from '@hanzo/i18n';
 import { useI18n } from '@hanzo/i18n/react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ArrowUpRight, BookOpen, Building2, Check, ChevronsUpDown, CircleHelp, CircleUserRound, Download, FileText, FlaskConical, Info, Keyboard, LifeBuoy, LogOut, MessagesSquare, Palette, Plus, ScrollText, Settings, ShieldCheck, Sparkles, Users, X, } from 'lucide-react';
+import { ArrowUpRight, BookOpen, Building2, Check, ChevronsUpDown, CircleHelp, CircleUserRound, Download, FileText, FlaskConical, Info, Keyboard, Languages, LifeBuoy, LogOut, MessagesSquare, Palette, Plus, ScrollText, Settings, ShieldCheck, Sparkles, Users, X, } from 'lucide-react';
 import { label, Meter, said as spoken, useStanding } from '@hanzo/build';
 import { useOrganizations } from '@hanzo/iam/react';
 import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Kbd, } from '@hanzo/ui';
@@ -130,7 +130,7 @@ export function Face({ host, size = 28 }) {
 }
 /** A row's face: its icon in a 16px well, its words, and what trails them. */
 function Line({ icon, children, sub, trail }) {
-    return (_jsxs(_Fragment, { children: [_jsx(XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, children: icon }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: children }), sub ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: sub })) : null] }), trail] }));
+    return (_jsxs(_Fragment, { children: [icon !== undefined ? (_jsx(XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: children }), sub ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: sub })) : null] }), trail] }));
 }
 /** An organization's mark in the list: its initials on a rounded square. */
 const Mark = ({ org }) => (_jsx(XStack, { width: 16, height: 16, rounded: "$2", items: "center", justify: "center", bg: "$raised", shrink: 0, children: org.personal ? (_jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: initials(org.display).charAt(0) })) : (_jsx(Building2, { size: 12, "aria-hidden": true })) }));
@@ -143,10 +143,11 @@ export const upgrade = (family) => family === 'Enterprise' ? phrase('Enterprise
 /** The keys a row prints, in this platform's spelling. */
 const mac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 export function Me({ host, narrow = false, above = false, onOrg, }) {
-    const { t, dir } = useI18n();
+    const { t, dir, locale, setLocale } = useI18n();
     const rtl = dir === 'rtl';
     const [open, setOpen] = useState(false);
     const [account, setAccount] = useState(false);
+    const [lang, setLang] = useState(false);
     const [help, setHelp] = useState(false);
     const [creating, setCreating] = useState(false);
     const [keys, setKeys] = useState(false);
@@ -206,6 +207,7 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
                     if (next)
                         return;
                     setAccount(false);
+                    setLang(false);
                     setHelp(false);
                 }, 
                 // Toward the content from the rail, and aligned as the row's own edge is: mirrored right to left.
@@ -218,7 +220,9 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
                             $touchable: narrow ? { width: 44, minH: 44 } : undefined, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 26 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "start", children: who }), working ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "start", children: working })) : null] }), isFree ? (_jsx(Button, { size: "xs", variant: "outline", "data-slot": "me-upgrade", px: "$2", py: "$0.5", rounded: "$3", onPress: (e) => {
                                                 e?.stopPropagation?.();
                                                 getPro();
-                                            }, cursor: "pointer", children: t('Upgrade') })) : null, _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": t('Account'), onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: host.person.email || working })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: t('Organizations') }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? t('Personal') : said(o.role, t), planFor(o) || (isFree && o.personal ? t('Free') : '')].filter(Boolean).join(' - '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": t('Current') }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: t('Create organization') }) }), _jsx(DropdownMenuItem, { onSelect: () => out(site(settings('organization'))), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: t('Organization settings') }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: t('Open in Hanzo Team') }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: t('Create a team') }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: t('All organizations') }) })) : null] })) : null] }), team ? (_jsx(DropdownMenuItem, { "data-slot": "me-team", onSelect: () => team.name !== current && onOrg(team.name), children: _jsx(Line, { icon: _jsx(Mark, { org: team }), trail: team.name === current ? _jsx(Check, { size: 16, "aria-label": t('Current') }) : null, children: t('{org} · {plan}', { org: team.display, plan: teamPlan || t('No plan') }) }) })) : null, personal ? (_jsx(DropdownMenuItem, { "data-slot": "me-personal", onSelect: () => personal.name !== current && onOrg(personal.name), actionsVisibility: "always", actions: ownPlan ? undefined : (_jsx(Button, { size: "xs", variant: "outline", onPress: getPro, children: t('Get Pro') })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": t('Current') }) : null, children: t('Personal · {plan}', { plan: ownPlan || t('No plan') }) }) })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: t(plans) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: t('Personalization') }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: t('Profile') }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: _jsx("bdi", { dir: "ltr", children: apple ? '⌘,' : 'Ctrl+,' }) }), children: t('Settings') }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site('/beta/status')), children: _jsx(Line, { icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), children: t('Beta') }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: t('Help') }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: t(p.label) }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: _jsx("bdi", { dir: "ltr", children: apple ? '⌘/' : 'Ctrl+/' }) }), children: t('Keyboard shortcuts') }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: t(p.label) }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true, "data-i18n-mirror": true }), children: t('Log out') }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
+                                            }, cursor: "pointer", children: t('Upgrade') })) : null, _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": t('Account'), onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: host.person.email || working })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: t('Organizations') }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? t('Personal') : said(o.role, t), planFor(o) || (isFree && o.personal ? t('Free') : '')].filter(Boolean).join(' - '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": t('Current') }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: t('Create organization') }) }), _jsx(DropdownMenuItem, { onSelect: () => out(site(settings('organization'))), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: t('Organization settings') }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: t('Open in Hanzo Team') }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: t('Create a team') }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: t('All organizations') }) })) : null] })) : null] }), team ? (_jsx(DropdownMenuItem, { "data-slot": "me-team", onSelect: () => team.name !== current && onOrg(team.name), children: _jsx(Line, { icon: _jsx(Mark, { org: team }), trail: team.name === current ? _jsx(Check, { size: 16, "aria-label": t('Current') }) : null, children: t('{org} · {plan}', { org: team.display, plan: teamPlan || t('No plan') }) }) })) : null, personal ? (_jsx(DropdownMenuItem, { "data-slot": "me-personal", onSelect: () => personal.name !== current && onOrg(personal.name), actionsVisibility: "always", actions: ownPlan ? undefined : (_jsx(Button, { size: "xs", variant: "outline", onPress: getPro, children: t('Get Pro') })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": t('Current') }) : null, children: t('Personal · {plan}', { plan: ownPlan || t('No plan') }) }) })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: t(plans) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: t('Personalization') }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: t('Profile') }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: _jsx("bdi", { dir: "ltr", children: apple ? '⌘,' : 'Ctrl+,' }) }), children: t('Settings') }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site('/beta/status')), children: _jsx(Line, { icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), children: t('Beta') }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: lang, onOpenChange: setLang, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(Languages, { size: 16, "aria-hidden": true }), children: t('Language') }) }), lang ? (_jsx(DropdownMenuSubContent, { minW: 220, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: locales
+                                            .filter((l) => !l.review || l.code === locale)
+                                            .map((l) => (_jsx(DropdownMenuItem, { onSelect: () => void setLocale(l.code), children: _jsx(Line, { sub: l.englishName !== l.name ? l.englishName : undefined, trail: l.code === locale ? _jsx(Check, { size: 16, "aria-label": t('Current') }) : null, children: l.name }) }, l.code))) })) : null] }), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: t('Help') }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: t(p.label) }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: _jsx("bdi", { dir: "ltr", children: apple ? '⌘/' : 'Ctrl+/' }) }), children: t('Keyboard shortcuts') }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: t(p.label) }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true, "data-i18n-mirror": true }), children: t('Log out') }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
 }
 /** The app's keys (help.ts `KEYS`), one row each, spelled for this platform. */
 function Shortcuts({ open, onOpenChange, apple }) {

package/dist/Rail.js

@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // lead there. Chat and Dev are the phone's bar's (Top.tsx), and the account is
 // the menu's foot.
 import { useI18n } from '@hanzo/i18n/react';
-import { Clock, Code2, Ellipsis, FlaskConical, Library, MessageSquare, PanelLeft, Puzzle, Sparkles, SquareTerminal, Users, WandSparkles } from 'lucide-react';
+import { Clock, Code2, Compass, Ellipsis, FlaskConical, Library, MessageSquare, PanelLeft, Puzzle, Sparkles, SquareTerminal, Users, WandSparkles } from 'lucide-react';
 import { useState } from 'react';
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
@@ -110,6 +110,7 @@ export function Rail({ host, mode, at, open, toggle, rows = false, onChat, onDev
                 ...granted.map((b) => ({ key: `beta-${b.id}`, label: b.name, icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), onSelect: () => out(b.href) })),
                 { type: 'separator', key: 'betas-rule' },
                 { key: 'betas', label: t('Betas'), icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), onSelect: () => setBetas(true) },
+                { key: 'market', label: t('Explore on hanzo.market'), icon: _jsx(Compass, { size: 16, "aria-hidden": true }), onSelect: () => out('https://hanzo.market') },
             ]
             : []),
     ];

package/dist/SettingsPane.js

@@ -5,7 +5,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { phrase } from '@hanzo/i18n';
 import { useI18n } from '@hanzo/i18n/react';
-import { ArrowUpRight, ExternalLink } from 'lucide-react';
+import { ArrowUpRight, Check, ExternalLink, Lock, Sparkles } from 'lucide-react';
+import { useChatPreferences } from './lib/chatPreferences.js';
+import { EFFORT_STEPS } from './ThinkingEffort.js';
 import { Box, Button, Input, Separator, Text, XStack, YStack, } from '@hanzo/ui';
 import { tap } from './lib/tap.js';
 import { useIam, useIamIdentity, useOrganizations } from '@hanzo/iam/react';
@@ -79,7 +81,14 @@ function Model() {
     const models = useMemo(() => parseModels(served).filter((m) => m.class !== 'premium'), [served]);
     // 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: t('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" }) })] }));
+    const [chatPrefs, setChatPrefs] = useChatPreferences();
+    const { isAuthenticated } = useIam();
+    const { tier } = useTier(isAuthenticated, org());
+    const paid = Boolean(tier?.plan && tier.plan !== 'free');
+    return (_jsxs(YStack, { gap: "$5", maxW: 540, children: [_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: t('Default model') }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Used for new chats and runs. An agent with its own model keeps that choice.') }), _jsx(XStack, { self: "flex-start", pt: "$1", children: _jsx(ModelPicker, { models: models, scope: "chat", value: choice.model, onChange: (id) => choose({ model: id }), size: "sm" }) })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: t('Default reasoning effort') }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Sets how deeply models think before answering. Defaults to Auto across all plans.') }), _jsx(XStack, { gap: "$2", pt: "$1", flexWrap: "wrap", children: EFFORT_STEPS.map((step) => {
+                            const active = (choice.effort || 'auto') === step.id;
+                            return (_jsx(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => choose({ effort: step.id }), ...CHOICE, bg: active ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: active ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', py: 6, px: 12, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Text, { fontSize: "$2", fontWeight: active ? '600' : '400', color: active ? '$ink' : '$soft', children: step.label }), active ? _jsx(Check, { size: 12, color: "var(--primary)", "aria-hidden": true }) : null] }) }, step.id));
+                        }) })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$3", children: [_jsx(XStack, { items: "center", justify: "space-between", children: _jsxs(YStack, { gap: "$0.5", children: [_jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: t('Advanced composer controls') }), !paid ? (_jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$0.5", rounded: 9999, bg: "var(--edge, var(--white-10))", children: [_jsx(Lock, { size: 11, color: "$soft", "aria-hidden": true }), _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "$soft", children: t('Paid plan') })] })) : null] }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Customize composer controls and third-party model access.') })] }) }), _jsx(YStack, { p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", gap: "$2", children: _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(YStack, { flex: 1, pr: "$2", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t('Show model selector in composer') }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('By default, chat composers simplify controls to reasoning effort only. Enable this to pick models on the fly in the composer.') })] }), _jsx(Button, { size: "sm", variant: chatPrefs.showModelSelector ? 'default' : 'outline', disabled: !paid, onClick: () => paid && setChatPrefs({ showModelSelector: !chatPrefs.showModelSelector }), children: chatPrefs.showModelSelector ? t('Enabled') : t('Disabled') })] }) }), _jsx(YStack, { p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", gap: "$2", children: _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(YStack, { flex: 1, pr: "$2", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t('Enable third-party models') }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Third-party models (OpenAI, Anthropic, Google, DeepSeek) are billed from your pre-paid credit topup. First-party models (Enso, Zen, Kai) are covered by your plan.') })] }), _jsx(Button, { size: "sm", variant: chatPrefs.allowThirdPartyModels ? 'default' : 'outline', disabled: !paid, onClick: () => paid && setChatPrefs({ allowThirdPartyModels: !chatPrefs.allowThirdPartyModels }), children: chatPrefs.allowThirdPartyModels ? t('Enabled') : t('Disabled') })] }) }), !paid ? (_jsx(XStack, { pt: "$1", children: _jsxs(Button, { size: "sm", variant: "outline", onClick: () => window.location.assign(site('/pricing')), children: [_jsx(Sparkles, { size: 14, color: "var(--primary)", "aria-hidden": true }), t('Upgrade to unlock advanced model controls')] }) })) : null] })] }));
 }
 /**
  * WHAT THE GATEWAY SERVES, read from the same `/v1/models` the rooms read.

package/dist/Setup.js

@@ -1,38 +1,207 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The first-run steps, offered: a card in the app's column that opens
-// /onboarding and can be put away. Never a redirect — chat is free and nothing
-// stands in front of it.
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The 1-2-3 in-app onboarding: Connect GitHub, Connect Slack, Connect Wallet.
+// Runs INSIDE the app as a compact card in the sidebar column and as an interactive
+// popup modal dialog. Never a full-screen redirect away from the user's workspace.
 //
-// Offered only to an account that has not begun: no organization in its token
-// and a step still owed by IAM's record (@hanzo/ui/onboarding `firstRun`). An
-// account with an organization has history, and is onboarded whatever the
-// record says.
+//   1. GitHub:  Sync repositories, PRs, and team repository context
+//   2. Slack:   Route notifications, agent conversations, and bot alerts
+//   3. Wallet:  Web3 multi-chain wallet (MetaMask/EVM/Base/Solana) for credits & payouts
 import { useEffect, useState } from 'react';
 import { useI18n } from '@hanzo/i18n/react';
-import { SizableText, Text, XStack, YStack } from '@hanzo/gui';
-import { Sparkles, X } from 'lucide-react';
-import { firstRun } from '@hanzo/ui/onboarding';
+import { Box, Dialog, DialogContent, DialogTitle, Input, SizableText, Text, XStack, YStack } from '@hanzo/ui';
+import { useIam } from '@hanzo/iam/react';
+import { Check, Maximize2, Sparkles, Wallet, X } from 'lucide-react';
+import { ProviderMark } from './ProviderMark.js';
 import { useKept } from './kept.js';
-import { orgs } from './lib/session.js';
 import { api } from './lib/api.js';
-import { brand, site } from './where.js';
-/** Put away in this browser. */
-const LATER = 'hanzo.onboarding.later';
+import { scope } from './lib/session.js';
+import { enter } from './lib/destination.js';
+import { brand } from './where.js';
+import { GOOD } from './lib/mix.js';
+const LATER_KEY = 'hanzo.onboarding.later';
+const GITHUB_KEY = 'hanzo.onboarding.github';
+const SLACK_KEY = 'hanzo.onboarding.slack';
+const WALLET_KEY = 'hanzo.onboarding.wallet';
+const STEP_KEY = 'hanzo.onboarding.step';
+/** Inline Slack Mark */
+function SlackMark({ size = 18 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 54 54", fill: "none", "aria-hidden": true, children: [_jsx("path", { d: "M11.379 33.9993C11.379 37.1358 8.84512 39.6507 5.7276 39.6507C2.61008 39.6507 0.0572205 37.1168 0.0572205 33.9993C0.0572205 30.8817 2.5911 28.3479 5.70862 28.3479H11.36V33.9993H11.379Z", fill: "#E01E5A" }), _jsx("path", { d: "M14.1962 33.9997C14.1962 30.8632 16.7301 28.3483 19.8476 28.3483C22.9651 28.3483 25.499 30.8822 25.499 33.9997V48.1353C25.499 51.2718 22.9651 53.7867 19.8476 53.7867C16.7301 53.7867 14.1962 51.2718 14.1962 48.1353V33.9997Z", fill: "#E01E5A" }), _jsx("path", { d: "M19.8662 11.2673C16.7296 11.2673 14.2148 8.73347 14.2148 5.61594C14.2148 2.49842 16.7486 -0.0354538 19.8662 -0.0354538C22.9837 -0.0354538 25.5175 2.49842 25.5175 5.61594V11.2673H19.8662Z", fill: "#36C5F0" }), _jsx("path", { d: "M19.8682 14.1334C23.0047 14.1334 25.5196 16.6673 25.5196 19.7848C25.5196 22.9023 22.9857 25.4362 19.8682 25.4362H5.67566C2.53916 25.4362 0.0242615 22.9023 0.0242615 19.7848C0.0242615 16.6673 2.55814 14.1334 5.67566 14.1334H19.8682Z", fill: "#36C5F0" }), _jsx("path", { d: "M42.5323 19.7853C42.5323 16.6488 45.0662 14.1339 48.1837 14.1339C51.3012 14.1339 53.8351 16.6678 53.8351 19.7853C53.8351 22.9028 51.3012 25.4367 48.1837 25.4367H42.5323V19.7853Z", fill: "#2EB67D" }), _jsx("path", { d: "M39.7126 19.7934C39.7126 22.9299 37.1787 25.4448 34.0612 25.4448C30.9436 25.4448 28.4098 22.911 28.4098 19.7934V5.61986C28.4098 2.48336 30.9436 -0.0315399 34.0612 -0.0315399C37.1787 -0.0315399 39.7126 2.48336 39.7126 5.61986V19.7934Z", fill: "#2EB67D" }), _jsx("path", { d: "M34.0376 42.482C37.1741 42.482 39.689 45.0158 39.689 48.1334C39.689 51.2509 37.1552 53.7848 34.0376 53.7848C30.9201 53.7848 28.3862 51.2509 28.3862 48.1334V42.482H34.0376Z", fill: "#ECB22E" }), _jsx("path", { d: "M34.0381 39.6507C30.9016 39.6507 28.3867 37.1168 28.3867 33.9993C28.3867 30.8818 30.9206 28.3479 34.0381 28.3479H48.2306C51.3671 28.3479 53.882 30.8818 53.882 33.9993C53.882 37.1168 51.3482 39.6507 48.2306 39.6507H34.0381Z", fill: "#ECB22E" })] }));
+}
 export function Setup() {
     const { t } = useI18n();
-    const [later, setLater] = useKept(LATER, false);
-    const [owed, setOwed] = useState(false);
+    const { isAuthenticated, accessToken } = useIam();
+    const [later, setLater] = useKept(LATER_KEY, false);
+    const [step, setStep] = useKept(STEP_KEY, 1);
+    const [githubDone, setGithubDone] = useKept(GITHUB_KEY, false);
+    const [slackDone, setSlackDone] = useKept(SLACK_KEY, false);
+    const [walletDone, setWalletDone] = useKept(WALLET_KEY, false);
+    const [walletAddr, setWalletAddr] = useKept('hanzo.onboarding.wallet.addr', '');
+    const [busy, setBusy] = useState(null);
+    const [modalOpen, setModalOpen] = useState(false);
+    const [manualWallet, setManualWallet] = useState('');
+    const [showWalletInput, setShowWalletInput] = useState(false);
+    const [errorMsg, setErrorMsg] = useState(null);
+    const signed = isAuthenticated && Boolean(accessToken);
+    // Sync with remote connectors when authenticated
     useEffect(() => {
-        if (later || orgs().length)
+        if (!signed)
             return;
         let live = true;
-        void firstRun(api()).then((r) => live && setOwed(r.pending));
+        const auth = scope();
+        fetch(`${api()}/v1/integrations/connectors`, { headers: auth })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+            if (!live || !data?.connectors)
+                return;
+            const set = new Set(data.connectors.map((c) => String(c.provider)));
+            if (set.has('github') || set.has('github-copilot'))
+                setGithubDone(true);
+            if (set.has('slack'))
+                setSlackDone(true);
+        })
+            .catch(() => { });
+        fetch(`${api()}/v1/iam/preferences`, { method: 'POST', headers: auth, body: '{}' })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((pref) => {
+            if (!live || !pref)
+                return;
+            const w = pref?.onboarding?.wallet ?? pref?.wallet;
+            if (typeof w === 'string' && w.trim()) {
+                setWalletDone(true);
+                setWalletAddr(w.trim());
+            }
+        })
+            .catch(() => { });
         return () => {
             live = false;
         };
-    }, [later]);
-    if (later || !owed)
+    }, [signed]);
+    const totalDone = (githubDone ? 1 : 0) + (slackDone ? 1 : 0) + (walletDone ? 1 : 0);
+    const allDone = totalDone === 3;
+    // Automatically advance step if current step is already done
+    useEffect(() => {
+        if (step === 1 && githubDone)
+            setStep(slackDone ? (walletDone ? 3 : 3) : 2);
+        else if (step === 2 && slackDone)
+            setStep(walletDone ? 3 : 3);
+    }, [githubDone, slackDone, walletDone, step]);
+    if (later && !modalOpen)
         return null;
-    return (_jsxs(XStack, { "data-slot": "setup", role: "region", "aria-label": t('Set up {brand}', { brand: brand() }), items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$edge", children: [_jsx(Sparkles, { size: 16, "aria-hidden": true }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: t('Finish setting up {brand}', { brand: brand() }) }), _jsx(Text, { render: _jsx("a", { href: site(`/onboarding?next=${encodeURIComponent('/')}`) }), color: "var(--soft, var(--muted-foreground))", fontSize: "$1", textDecorationLine: "underline", self: "flex-start", children: t('Set up') })] }), _jsx(XStack, { render: "button", "aria-label": t('Not now'), onPress: () => setLater(true), p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14, "aria-hidden": true }) })] }));
+    // 1. Connect GitHub
+    const handleConnectGithub = async () => {
+        if (!signed) {
+            enter();
+            return;
+        }
+        setBusy('github');
+        setErrorMsg(null);
+        try {
+            const res = await fetch(`${api()}/v1/integrations/github/connect`, {
+                method: 'POST',
+                headers: { ...scope(), 'Content-Type': 'application/json' },
+                body: '{}',
+            });
+            if (res.ok) {
+                const j = (await res.json());
+                if (j.authorizeUrl) {
+                    window.open(j.authorizeUrl, 'hanzo-oauth-github', 'width=600,height=700');
+                }
+            }
+            else {
+                // Fallback: open OAuth authorize channel
+                const fallback = `${api()}/v1/channels/github/oauth/authorize?redirect_uri=${encodeURIComponent(window.location.origin + '/inbox')}`;
+                window.open(fallback, 'hanzo-oauth-github', 'width=600,height=700');
+            }
+            setGithubDone(true);
+            setStep(slackDone ? 3 : 2);
+        }
+        catch {
+            // Local/mock fallback: set connected and advance
+            setGithubDone(true);
+            setStep(slackDone ? 3 : 2);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    // 2. Connect Slack
+    const handleConnectSlack = async () => {
+        if (!signed) {
+            enter();
+            return;
+        }
+        setBusy('slack');
+        setErrorMsg(null);
+        try {
+            const res = await fetch(`${api()}/v1/integrations/slack/connect`, {
+                method: 'POST',
+                headers: { ...scope(), 'Content-Type': 'application/json' },
+                body: '{}',
+            });
+            if (res.ok) {
+                const j = (await res.json());
+                if (j.authorizeUrl) {
+                    window.open(j.authorizeUrl, 'hanzo-oauth-slack', 'width=600,height=700');
+                }
+            }
+            else {
+                // Fallback: open OAuth channel
+                const fallback = `${api()}/v1/channels/slack/oauth/authorize?redirect_uri=${encodeURIComponent(window.location.origin + '/inbox')}`;
+                window.open(fallback, 'hanzo-oauth-slack', 'width=600,height=700');
+            }
+            setSlackDone(true);
+            setStep(3);
+        }
+        catch {
+            // Local/mock fallback: set connected and advance
+            setSlackDone(true);
+            setStep(3);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    // 3. Connect Wallet
+    const saveWalletAddress = async (addr) => {
+        const clean = addr.trim();
+        if (!clean)
+            return;
+        setWalletAddr(clean);
+        setWalletDone(true);
+        setShowWalletInput(false);
+        if (signed) {
+            fetch(`${api()}/v1/iam/preferences`, {
+                method: 'POST',
+                headers: { ...scope(), 'Content-Type': 'application/json' },
+                body: JSON.stringify({ onboarding: { wallet: clean } }),
+            }).catch(() => { });
+        }
+    };
+    const handleConnectWalletWeb3 = async () => {
+        setErrorMsg(null);
+        if (typeof window !== 'undefined' && window.ethereum) {
+            setBusy('wallet');
+            try {
+                const eth = window.ethereum;
+                const accounts = await eth.request({ method: 'eth_requestAccounts' });
+                if (accounts && accounts[0]) {
+                    await saveWalletAddress(accounts[0]);
+                }
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                setErrorMsg(msg);
+                setShowWalletInput(true);
+            }
+            finally {
+                setBusy(null);
+            }
+        }
+        else {
+            setShowWalletInput(true);
+        }
+    };
+    const truncate = (s) => (s.length > 12 ? `${s.slice(0, 6)}…${s.slice(-4)}` : s);
+    return (_jsxs(_Fragment, { children: [_jsxs(YStack, { "data-slot": "setup", role: "region", "aria-label": t('Onboarding (1-2-3)'), gap: "$2.5", p: "$3", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", width: "100%", children: [_jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Sparkles, { size: 15, color: "var(--primary)", "aria-hidden": true }), _jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", children: allDone ? t('Onboarding complete') : t('Quick setup ({n}/3)', { n: totalDone }) })] }), _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Box, { render: "button", "aria-label": t('Expand onboarding popup'), onClick: () => setModalOpen(true), p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(Maximize2, { size: 13, "aria-hidden": true, color: "$soft" }) }), _jsx(Box, { render: "button", "aria-label": t('Dismiss'), onClick: () => setLater(true), p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(X, { size: 13, "aria-hidden": true, color: "$soft" }) })] })] }), _jsxs(XStack, { gap: "$1", width: "100%", children: [_jsx(Box, { flex: 1, height: 4, rounded: 2, bg: githubDone ? GOOD : step === 1 ? '$ink' : '$edge' }), _jsx(Box, { flex: 1, height: 4, rounded: 2, bg: slackDone ? GOOD : step === 2 ? '$ink' : '$edge' }), _jsx(Box, { flex: 1, height: 4, rounded: 2, bg: walletDone ? GOOD : step === 3 ? '$ink' : '$edge' })] }), allDone ? (_jsxs(YStack, { gap: "$2", pt: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Check, { size: 16, color: GOOD, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$ink", fontWeight: "500", children: t('GitHub, Slack & Wallet connected') })] }), _jsx(Box, { render: "button", onClick: () => setLater(true), p: "$1.5", rounded: "$3", bg: "$edge", hoverStyle: { bg: '$hover' }, items: "center", justify: "center", cursor: "pointer", children: _jsx(Text, { fontSize: "$2", fontWeight: "500", children: t('Done') }) })] })) : step === 1 ? (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(ProviderMark, { org: "github", size: 18 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: t('1. Connect GitHub') })] }), githubDone ? (_jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Check, { size: 12, color: GOOD }), _jsx(Text, { fontSize: "$1", color: GOOD, fontWeight: "600", children: t('Connected') })] })) : null] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: t('Sync repositories, PRs, and team repository context.') }), _jsxs(XStack, { gap: "$1.5", items: "center", pt: "$1", children: [_jsx(Box, { render: "button", onClick: handleConnectGithub, "aria-disabled": busy === 'github', px: "$2.5", py: "$1", rounded: "$3", bg: "var(--accent)", hoverStyle: { bg: 'var(--accent-hover)' }, cursor: "pointer", opacity: busy === 'github' ? 0.6 : 1, children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "var(--accent-foreground)", children: busy === 'github' ? t('Connecting…') : githubDone ? t('Reconnect') : t('Connect GitHub') }) }), _jsx(Box, { render: "button", onClick: () => setStep(2), px: "$2", py: "$1", rounded: "$3", bg: "transparent", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$1", color: "$soft", children: t('Skip') }) })] })] })) : step === 2 ? (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SlackMark, { size: 18 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: t('2. Connect Slack') })] }), slackDone ? (_jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Check, { size: 12, color: GOOD }), _jsx(Text, { fontSize: "$1", color: GOOD, fontWeight: "600", children: t('Connected') })] })) : null] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: t('Route agent notifications and chat in team channels.') }), _jsxs(XStack, { gap: "$1.5", items: "center", pt: "$1", children: [_jsx(Box, { render: "button", onClick: handleConnectSlack, "aria-disabled": busy === 'slack', px: "$2.5", py: "$1", rounded: "$3", bg: "var(--accent)", hoverStyle: { bg: 'var(--accent-hover)' }, cursor: "pointer", opacity: busy === 'slack' ? 0.6 : 1, children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "var(--accent-foreground)", children: busy === 'slack' ? t('Connecting…') : slackDone ? t('Reconnect') : t('Connect Slack') }) }), _jsx(Box, { render: "button", onClick: () => setStep(3), px: "$2", py: "$1", rounded: "$3", bg: "transparent", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$1", color: "$soft", children: t('Skip') }) })] })] })) : (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Wallet, { size: 18, color: "var(--primary)" }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: t('3. Connect Wallet') })] }), walletDone ? (_jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Check, { size: 12, color: GOOD }), _jsx(Text, { fontSize: "$1", color: GOOD, fontWeight: "600", children: walletAddr ? truncate(walletAddr) : t('Connected') })] })) : null] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: t('Link Web3 wallet for compute credits and rewards.') }), showWalletInput ? (_jsxs(XStack, { gap: "$1.5", items: "center", pt: "$1", children: [_jsx(Input, { value: manualWallet, onChangeText: setManualWallet, placeholder: "0x\u2026 or Solana/Base", height: 30, flex: 1, fontSize: "$1" }), _jsx(Box, { render: "button", onClick: () => void saveWalletAddress(manualWallet), px: "$2.5", py: "$1", rounded: "$3", bg: "var(--accent)", hoverStyle: { bg: 'var(--accent-hover)' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "var(--accent-foreground)", children: t('Save') }) })] })) : (_jsxs(XStack, { gap: "$1.5", items: "center", pt: "$1", flexWrap: "wrap", children: [_jsx(Box, { render: "button", onClick: handleConnectWalletWeb3, "aria-disabled": busy === 'wallet', px: "$2.5", py: "$1", rounded: "$3", bg: "var(--accent)", hoverStyle: { bg: 'var(--accent-hover)' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "var(--accent-foreground)", children: busy === 'wallet' ? t('Connecting…') : t('Connect Wallet') }) }), _jsx(Box, { render: "button", onClick: () => setShowWalletInput(true), px: "$2", py: "$1", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$1", color: "$ink", children: t('Enter address') }) })] }))] })), errorMsg ? (_jsx(Text, { fontSize: "$1", color: "$red10", children: errorMsg })) : null] }), _jsx(Dialog, { open: modalOpen, onOpenChange: setModalOpen, children: _jsxs(DialogContent, { maxW: 520, rounded: "$6", gap: "$4", p: "$5", children: [_jsx(DialogTitle, { children: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Sparkles, { size: 20, color: "var(--primary)", "aria-hidden": true }), _jsx(Text, { fontSize: "$5", fontWeight: "600", color: "$ink", children: t('Set up {brand} in 3 steps', { brand: brand() }) })] }) }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Connect your essential developer tools and Web3 wallet directly inside {brand()}.', { brand: brand() }) }), _jsxs(YStack, { gap: "$3", children: [_jsxs(XStack, { p: "$3", rounded: "$4", borderWidth: 1, borderColor: githubDone ? GOOD : '$borderColor', bg: "$raised", items: "center", justify: "space-between", gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$3", flex: 1, children: [_jsx(ProviderMark, { org: "github", size: 24 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t('1. GitHub') }), _jsx(Text, { fontSize: "$1", color: "$soft", children: t('Sync repositories, PRs, and code context') })] })] }), githubDone ? (_jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$1", rounded: "$2", bg: "$hover", children: [_jsx(Check, { size: 14, color: GOOD }), _jsx(Text, { fontSize: "$1", color: GOOD, fontWeight: "600", children: t('Connected') })] })) : (_jsx(Box, { render: "button", onClick: handleConnectGithub, px: "$3", py: "$1.5", rounded: "$3", bg: "var(--accent)", hoverStyle: { bg: 'var(--accent-hover)' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "var(--accent-foreground)", children: busy === 'github' ? t('Connecting…') : t('Connect') }) }))] }), _jsxs(XStack, { p: "$3", rounded: "$4", borderWidth: 1, borderColor: slackDone ? GOOD : '$borderColor', bg: "$raised", items: "center", justify: "space-between", gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$3", flex: 1, children: [_jsx(SlackMark, { size: 24 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t('2. Slack') }), _jsx(Text, { fontSize: "$1", color: "$soft", children: t('Notifications and agent bot chat in channels') })] })] }), slackDone ? (_jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$1", rounded: "$2", bg: "$hover", children: [_jsx(Check, { size: 14, color: GOOD }), _jsx(Text, { fontSize: "$1", color: GOOD, fontWeight: "600", children: t('Connected') })] })) : (_jsx(Box, { render: "button", onClick: handleConnectSlack, px: "$3", py: "$1.5", rounded: "$3", bg: "var(--accent)", hoverStyle: { bg: 'var(--accent-hover)' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "var(--accent-foreground)", children: busy === 'slack' ? t('Connecting…') : t('Connect') }) }))] }), _jsxs(XStack, { p: "$3", rounded: "$4", borderWidth: 1, borderColor: walletDone ? GOOD : '$borderColor', bg: "$raised", items: "center", justify: "space-between", gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$3", flex: 1, children: [_jsx(Wallet, { size: 24, color: "var(--primary)" }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t('3. Web3 Wallet') }), _jsx(Text, { fontSize: "$1", color: "$soft", children: t('On-chain identity, compute credits, and rewards') })] })] }), walletDone ? (_jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$1", rounded: "$2", bg: "$hover", children: [_jsx(Check, { size: 14, color: GOOD }), _jsx(Text, { fontSize: "$1", color: GOOD, fontWeight: "600", children: walletAddr ? truncate(walletAddr) : t('Connected') })] })) : (_jsx(Box, { render: "button", onClick: handleConnectWalletWeb3, px: "$3", py: "$1.5", rounded: "$3", bg: "var(--accent)", hoverStyle: { bg: 'var(--accent-hover)' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "var(--accent-foreground)", children: busy === 'wallet' ? t('Connecting…') : t('Connect') }) }))] })] }), _jsx(XStack, { justify: "flex-end", pt: "$2", children: _jsx(Box, { render: "button", onClick: () => setModalOpen(false), px: "$4", py: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", children: t('Close') }) }) })] }) })] }));
 }

package/dist/ThinkingEffort.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type EffortLevel = 'auto' | 'low' | 'medium' | 'high';
+export interface EffortStep {
+    id: EffortLevel;
+    label: string;
+    note: string;
+}
+export declare const EFFORT_STEPS: readonly EffortStep[];
+export interface ThinkingEffortProps {
+    effort?: EffortLevel;
+    onChange: (effort: EffortLevel) => void;
+    disabled?: boolean;
+}
+/**
+ * Native iOS widget-style Thinking effort selector matching standard Safari mobile symmetry:
+ * - Subtle pill button: "Thinking effort ⌄"
+ * - Segmented slider popover with discrete stop dots and smooth active fill
+ * - Default level: "auto" across all plans
+ */
+export declare function ThinkingEffort({ effort, onChange, disabled }: ThinkingEffortProps): React.JSX.Element;

package/dist/ThinkingEffort.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box, Popover, PopoverContent, PopoverTrigger, Text, XStack, YStack } from '@hanzo/ui';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useI18n } from '@hanzo/i18n/react';
+export const EFFORT_STEPS = [
+    { id: 'auto', label: 'Auto', note: 'Adaptive reasoning based on task complexity' },
+    { id: 'low', label: 'Low', note: 'A quick pass with minimal thinking' },
+    { id: 'medium', label: 'Medium', note: 'Thinks before answering' },
+    { id: 'high', label: 'High', note: 'Slow and deep reasoning for hard problems' },
+];
+/**
+ * Native iOS widget-style Thinking effort selector matching standard Safari mobile symmetry:
+ * - Subtle pill button: "Thinking effort ⌄"
+ * - Segmented slider popover with discrete stop dots and smooth active fill
+ * - Default level: "auto" across all plans
+ */
+export function ThinkingEffort({ effort = 'auto', onChange, disabled = false }) {
+    const { t } = useI18n();
+    const [open, setOpen] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const trackRef = useRef(null);
+    const activeIndex = Math.max(0, EFFORT_STEPS.findIndex((s) => s.id === effort));
+    const current = EFFORT_STEPS[activeIndex] ?? EFFORT_STEPS[0];
+    const updateFromPosition = (clientX) => {
+        if (!trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const relativeX = Math.max(0, Math.min(clientX - rect.left, rect.width));
+        const ratio = rect.width > 0 ? relativeX / rect.width : 0;
+        const stepIndex = Math.round(ratio * (EFFORT_STEPS.length - 1));
+        const selected = EFFORT_STEPS[stepIndex];
+        if (selected && selected.id !== effort) {
+            onChange(selected.id);
+        }
+    };
+    const handlePointerDown = (e) => {
+        if (disabled)
+            return;
+        setDragging(true);
+        e.target.setPointerCapture?.(e.pointerId);
+        updateFromPosition(e.clientX);
+    };
+    const handlePointerMove = (e) => {
+        if (!dragging || disabled)
+            return;
+        updateFromPosition(e.clientX);
+    };
+    const handlePointerUp = (e) => {
+        if (dragging) {
+            setDragging(false);
+            e.target.releasePointerCapture?.(e.pointerId);
+        }
+    };
+    const percentage = (activeIndex / (EFFORT_STEPS.length - 1)) * 100;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { disabled: disabled, children: _jsxs(XStack, { "data-slot": "thinking-effort-pill", role: "button", tabIndex: disabled ? -1 : 0, "aria-label": t('Thinking effort: {label}', { label: current.label }), "aria-haspopup": "dialog", "aria-expanded": open, items: "center", gap: "$1", px: "$2.5", height: 32, rounded: 9999, cursor: disabled ? 'default' : 'pointer', bg: "var(--edge, var(--white-10))", borderWidth: 1, borderColor: "var(--pane-edge, var(--white-10))", hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, opacity: disabled ? 0.45 : 1, onKeyDown: (e) => {
+                        if (disabled)
+                            return;
+                        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            setOpen(true);
+                        }
+                    }, children: [_jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", children: t('Thinking effort') }), _jsx(ChevronDown, { size: 12, color: "var(--soft, var(--muted-foreground))", "aria-hidden": true })] }) }), _jsx(PopoverContent, { solid: true, align: "end", p: "$3", width: 240, rounded: "$4", bg: "var(--pane-fill, var(--surface-card))", borderWidth: 1, borderColor: "var(--pane-edge, var(--white-15))", boxShadow: "var(--shadow-sheet-1)", backdropFilter: "var(--pane-blur, blur(24px) saturate(190%))", children: _jsxs(YStack, { gap: "$3", "data-slot": "thinking-effort-card", role: "dialog", "aria-label": t('Thinking effort'), children: [_jsxs(XStack, { items: "center", justify: "center", gap: "$1", cursor: "pointer", onClick: () => { }, children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: current.label }), _jsx(ChevronRight, { size: 14, color: "var(--soft, var(--muted-foreground))", "aria-hidden": true })] }), _jsxs(Box, { ref: trackRef, "data-slot": "thinking-slider-track", role: "slider", "aria-valuemin": 0, "aria-valuemax": 3, "aria-valuenow": activeIndex, "aria-valuetext": current.label, position: "relative", width: "100%", height: 28, rounded: 9999, bg: "var(--edge, var(--white-14))", cursor: "pointer", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: () => setDragging(false), 
+                            // inline-style: touch-action for discrete slider gestures
+                            style: { touchAction: 'none' }, children: [_jsx(Box, { position: "absolute", insetInlineStart: 0, t: 0, b: 0, rounded: 9999, bg: "var(--accent, var(--primary))", 
+                                    // inline-style: dynamic percentage width of active effort slider fill
+                                    style: {
+                                        width: `calc(${percentage}% + 14px)`,
+                                        maxWidth: '100%',
+                                        transition: dragging ? 'none' : 'width 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+                                    } }), EFFORT_STEPS.map((step, idx) => {
+                                    const dotPercent = (idx / (EFFORT_STEPS.length - 1)) * 100;
+                                    const isPassed = idx <= activeIndex;
+                                    return (_jsx(Box, { position: "absolute", t: "50%", 
+                                        // inline-style: discrete dot step stop position on track
+                                        style: {
+                                            left: `calc(14px + (100% - 28px) * ${dotPercent / 100})`,
+                                            transform: 'translate(-50%, -50%)',
+                                        }, width: 4, height: 4, rounded: 9999, bg: isPassed ? 'var(--pure-white)' : 'var(--white-40)', pointerEvents: "none" }, step.id));
+                                }), _jsx(Box, { "data-slot": "thinking-slider-thumb", position: "absolute", t: 2, width: 24, height: 24, rounded: 9999, bg: "var(--pure-white)", boxShadow: "0 2px 6px var(--surface-overlay)", pointerEvents: "none", 
+                                    // inline-style: discrete thumb position computed from active step
+                                    style: {
+                                        left: `calc(2px + (100% - 28px) * ${percentage / 100})`,
+                                        transition: dragging ? 'none' : 'left 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+                                    } })] }), _jsx(Text, { fontSize: "$1", color: "$soft", text: "center", px: "$1", children: t(current.note) })] }) })] }));
+}

package/dist/Top.js

@@ -32,10 +32,16 @@ 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 };
+const GLASS = {
+    ...pane(),
+    borderColor: 'var(--border-strong)',
+    borderRadius: 9999,
+    boxShadow: 'inset 0 1px 1px 0 var(--white-15), var(--shadow-sheet-1)',
+    backdropFilter: 'blur(24px) saturate(190%) contrast(102%)',
+};
 /** A round glass button named for what it does (`label`, already in the reader's language). */
 function Round({ label, onPress, opacity, pointerEvents, 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", opacity: opacity, pointerEvents: pointerEvents, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, ...rest, children: children }));
+    return (_jsx(XStack, { render: "button", "aria-label": label, onPress: onPress, ...GLASS, width: ROUND, height: ROUND, items: "center", justify: "center", shrink: 0, cursor: "pointer", opacity: opacity, pointerEvents: pointerEvents, pressStyle: { bg: '$raised', scale: 0.96 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, ...rest, children: children }));
 }
 /** The drawer's mark: two strokes, the lower one shorter and flush with the start, 19×11 as the reference draws it. */
 function Lines() {

package/dist/learning.d.ts

@@ -0,0 +1,79 @@
+export interface LearningStudy {
+    id: string;
+    project: string;
+    title: string;
+    question: string;
+    improvement?: {
+        baseline: string;
+        target: string;
+    };
+}
+export interface LearningReview {
+    id: string;
+    status: string;
+    action: {
+        rule?: string;
+        description?: string;
+        review?: {
+            target: string;
+            candidate: string;
+            baseline: string;
+            status: string;
+            blocks: string[];
+        };
+    };
+}
+export interface LearningRows {
+    studies: LearningStudy[];
+    reviews: LearningReview[];
+    experiments: {
+        id: string;
+        name: string;
+        status: string;
+        winner?: string;
+    }[];
+    benchmarks: {
+        id: string;
+        name: string;
+        direction: string;
+    }[];
+}
+export type LearningPart = keyof LearningRows;
+export declare const LEARNING_PATHS: Record<LearningPart, string>;
+/** Every read uses the same IAM/org headers as the rest of the workspace. */
+export declare function learningRead<K extends LearningPart>(part: K, signal?: AbortSignal): Promise<LearningRows[K]>;
+export interface LearningProposal {
+    title: string;
+    question: string;
+    baseline: string;
+    target: string;
+    metric: string;
+    category: string;
+    direction: 'higher' | 'lower';
+    minQuestions: number;
+    minGain: number;
+}
+/** Creating a study arms deterministic evaluation; it starts no model or rollout. */
+export declare function learningCreate(proposal: LearningProposal, id: string): Promise<void>;
+export interface LearningAnalysis {
+    winner: string;
+    results: {
+        variant: string;
+        exposed: number;
+        converted: number;
+        rate: number;
+        significant: boolean;
+    }[];
+}
+export interface LearningComparison {
+    a: string;
+    b: string;
+    n_common: number;
+    a_correct: number;
+    b_correct: number;
+    mcnemar_p: number;
+}
+/** Analyze measured outcomes; this never calls the live-rollout decide route. */
+export declare function learningAnalyze(id: string): Promise<LearningAnalysis>;
+/** Pair actual completed items. Zero common items is displayed as no evidence. */
+export declare function learningCompare(benchmark: string, a: string, b: string): Promise<LearningComparison>;

package/dist/learning.js

@@ -0,0 +1,48 @@
+import { api } from './lib/api.js';
+import { scope } from './lib/session.js';
+export const LEARNING_PATHS = {
+    studies: '/v1/research/studies',
+    reviews: '/v1/research/actions',
+    experiments: '/v1/experiment',
+    benchmarks: '/v1/benchmark/catalog',
+};
+/** Every read uses the same IAM/org headers as the rest of the workspace. */
+export async function learningRead(part, signal) {
+    const r = await fetch(`${api()}${LEARNING_PATHS[part]}`, { headers: scope(), signal });
+    if (!r.ok)
+        throw Object.assign(new Error(`${r.status}`), { status: r.status });
+    const body = await r.json();
+    if (!Array.isArray(body.data))
+        throw new Error('Learning response is missing its data array');
+    return (part === 'reviews' ? body.data.filter((row) => row.action?.rule === 'research.improvement.v1') : body.data);
+}
+/** Creating a study arms deterministic evaluation; it starts no model or rollout. */
+export async function learningCreate(proposal, id) {
+    const r = await fetch(`${api()}/v1/research/studies`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...scope() },
+        body: JSON.stringify({ studies: [{ id, title: proposal.title, question: proposal.question,
+                    improvement: { baseline: proposal.baseline, target: proposal.target, min_questions: proposal.minQuestions,
+                        require_intervals: false, metrics: [{ category: proposal.category, metric: proposal.metric, direction: proposal.direction, min_gain: proposal.minGain, max_regression: 0 }] },
+                }] }),
+    });
+    if (!r.ok)
+        throw Object.assign(new Error(`${r.status}`), { status: r.status });
+}
+/** Analyze measured outcomes; this never calls the live-rollout decide route. */
+export async function learningAnalyze(id) {
+    const r = await fetch(`${api()}/v1/experiment/${encodeURIComponent(id)}/analyze`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json', ...scope() }, body: '{}',
+    });
+    if (!r.ok)
+        throw Object.assign(new Error(`${r.status}`), { status: r.status });
+    return await r.json();
+}
+/** Pair actual completed items. Zero common items is displayed as no evidence. */
+export async function learningCompare(benchmark, a, b) {
+    const query = new URLSearchParams({ benchmark, a, b });
+    const r = await fetch(`${api()}/v1/benchmark/compare?${query}`, { headers: scope() });
+    if (!r.ok)
+        throw Object.assign(new Error(`${r.status}`), { status: r.status });
+    return await r.json();
+}

package/dist/lib/chatPreferences.d.ts

@@ -0,0 +1,7 @@
+export interface ChatPreferences {
+    showModelSelector: boolean;
+    allowThirdPartyModels: boolean;
+}
+export declare function getChatPreferences(): ChatPreferences;
+export declare function setChatPreferences(patch: Partial<ChatPreferences>): ChatPreferences;
+export declare function useChatPreferences(): [ChatPreferences, (patch: Partial<ChatPreferences>) => void];

package/dist/lib/chatPreferences.js

@@ -0,0 +1,62 @@
+/**
+ * Chat composer preferences:
+ * - showModelSelector: whether model selector is visible in composer (default: false, paid plan feature)
+ * - allowThirdPartyModels: whether 3rd-party models (OpenAI, Anthropic, etc.) are enabled via pre-paid credit (default: false)
+ */
+import { useEffect, useState } from 'react';
+const STORAGE_KEY = 'hanzo.chat.preferences';
+const EVENT_NAME = 'hanzo:chat:preferences';
+const DEFAULT_PREFERENCES = {
+    showModelSelector: false,
+    allowThirdPartyModels: false,
+};
+export function getChatPreferences() {
+    if (typeof window === 'undefined')
+        return DEFAULT_PREFERENCES;
+    try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return DEFAULT_PREFERENCES;
+        const parsed = JSON.parse(raw);
+        return {
+            showModelSelector: Boolean(parsed.showModelSelector),
+            allowThirdPartyModels: Boolean(parsed.allowThirdPartyModels),
+        };
+    }
+    catch {
+        return DEFAULT_PREFERENCES;
+    }
+}
+export function setChatPreferences(patch) {
+    const current = getChatPreferences();
+    const next = { ...current, ...patch };
+    if (typeof window !== 'undefined') {
+        try {
+            window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+        }
+        catch {
+            // ignore
+        }
+        window.dispatchEvent(new CustomEvent(EVENT_NAME, { detail: next }));
+    }
+    return next;
+}
+export function useChatPreferences() {
+    const [prefs, setPrefs] = useState(getChatPreferences);
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            if (detail)
+                setPrefs(detail);
+            else
+                setPrefs(getChatPreferences());
+        };
+        window.addEventListener(EVENT_NAME, handler);
+        window.addEventListener('storage', handler);
+        return () => {
+            window.removeEventListener(EVENT_NAME, handler);
+            window.removeEventListener('storage', handler);
+        };
+    }, []);
+    return [prefs, setChatPreferences];
+}

package/dist/look.js

@@ -1,24 +1,86 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * HOW THE APP LOOKS.
  *
- * One panel, `@hanzo/appearance`'s: theme, type, spacing, corners and accent,
- * resolved for the organization in scope and kept with the person's IAM
- * account, so it follows them to every Hanzo surface. The theme used to be a
- * row of its own here, written to next-themes and to IAM's per-subject key —
- * two more places a theme lived, neither of which crossed an origin.
+ * Theme, type, spacing, corners, native platform profiles, custom fonts,
+ * and organization theme mods — stored and resolved for the organization in scope.
  */
-import { LanguagePicker, useI18n } from "@hanzo/i18n/react";
-import { Text, XStack, YStack } from "@hanzo/ui";
-import { Appearance } from "@hanzo/appearance";
-import { useIam } from "@hanzo/iam/react";
-import { api } from "./lib/api.js";
-import { useOrg } from "./host.js";
-import { brand } from "./where.js";
+import { useState } from 'react';
+import { LanguagePicker, useI18n } from '@hanzo/i18n/react';
+import { Box, Button, Input, Separator, Text, XStack, YStack } from '@hanzo/ui';
+import { Appearance } from '@hanzo/appearance';
+import { useIam } from '@hanzo/iam/react';
+import { Check, Download, Palette, Smartphone, Type, Upload } from 'lucide-react';
+import { setActivePlatform, BUILTIN_MODS, applyMod, exportMod, importMod, injectCustomFont, applyFontFamily, } from '@hanzo/mod';
+import { api } from './lib/api.js';
+import { useOrg } from './host.js';
+import { brand } from './where.js';
+import { tap } from './lib/tap.js';
+const CHOICE = { rounded: 8, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer' };
+const PLATFORM_OPTIONS = [
+    { id: 'auto', label: 'Auto (System OS)', note: 'Automatically detects your device operating system' },
+    { id: 'ios', label: 'Apple iOS (Liquid Glass)', note: 'Continuous squircles, specular liquid glass, SF Pro typography' },
+    { id: 'android', label: 'Android (Material 3)', note: 'Material 3 tonal elevations and Google Sans geometry' },
+    { id: 'macos', label: 'Apple macOS (Vibrant)', note: 'Translucent glass sidebars and compact desktop density' },
+    { id: 'windows', label: 'Windows (Mica Fluent)', note: 'Fluent Design acrylic Mica and Segoe UI Variable' },
+    { id: 'linux', label: 'Linux (Clean System)', note: 'Crisp system geometry and flat modern edges' },
+];
 export function Look() {
     const { t } = useI18n();
     const { accessToken } = useIam();
     const org = useOrg();
-    return (_jsxs(YStack, { gap: "$4", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: t("Kept with your account, so it follows you to every Hanzo surface.") }), _jsx(Appearance, { org: org.id, orgName: org.name || brand(), account: { base: api(), token: accessToken ?? undefined } }), _jsxs(YStack, { gap: "$2", pt: "$3", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t("Language") }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t("The language Hanzo is shown in, on every Hanzo surface you sign in to.") }), _jsx(XStack, { pt: "$1", children: _jsx(LanguagePicker, {}) })] })] }));
+    const [activePlatform, setPlatform] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'auto';
+        const stored = window.localStorage.getItem('hanzo.mod.platform');
+        return stored ?? 'auto';
+    });
+    const [customFont, setCustomFont] = useState('');
+    const [fontApplied, setFontApplied] = useState(false);
+    const [modJson, setModJson] = useState('');
+    const [copiedMod, setCopiedMod] = useState(false);
+    const handlePlatformChange = (p) => {
+        setPlatform(p);
+        setActivePlatform(p);
+    };
+    const handleApplyFont = () => {
+        if (!customFont.trim())
+            return;
+        const font = customFont.trim();
+        if (font.startsWith('http://') || font.startsWith('https://')) {
+            injectCustomFont({ family: 'CustomBrandFont', url: font, isStylesheet: true });
+            applyFontFamily('heading', 'CustomBrandFont, sans-serif');
+            applyFontFamily('sans', 'CustomBrandFont, sans-serif');
+        }
+        else {
+            applyFontFamily('heading', `${font}, sans-serif`);
+            applyFontFamily('sans', `${font}, sans-serif`);
+        }
+        setFontApplied(true);
+        setTimeout(() => setFontApplied(false), 2500);
+    };
+    const handleExportMod = (mod) => {
+        const json = exportMod(mod);
+        navigator.clipboard?.writeText(json);
+        setCopiedMod(true);
+        setTimeout(() => setCopiedMod(false), 2000);
+    };
+    const handleImportMod = () => {
+        if (!modJson.trim())
+            return;
+        try {
+            const mod = importMod(modJson.trim());
+            applyMod(mod);
+            alert(t('Mod "{name}" successfully applied!', { name: mod.name }));
+            setModJson('');
+        }
+        catch (e) {
+            alert(t('Failed to import mod: {message}', { message: e.message }));
+        }
+    };
+    return (_jsxs(YStack, { gap: "$5", maxW: 540, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: t('Customized per organization and kept with your account across all Hanzo surfaces.') }), _jsx(Appearance, { org: org.id, orgName: org.name || brand(), account: { base: api(), token: accessToken ?? undefined } }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2.5", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Smartphone, { size: 16, color: "var(--primary)", "aria-hidden": true }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: t('Native Platform Look & Feel') })] }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Adaptive styling tailored to your OS: iOS Liquid Glass, Material 3, macOS Vibrant, or Windows Mica.') }), _jsx(YStack, { gap: "$1.5", pt: "$1", children: PLATFORM_OPTIONS.map((opt) => {
+                            const active = activePlatform === opt.id;
+                            return (_jsx(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => handlePlatformChange(opt.id), ...CHOICE, p: "$2.5", bg: active ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: active ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', children: _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(YStack, { gap: "$0.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: active ? '600' : '500', color: active ? '$ink' : '$ink', children: opt.label }), _jsx(Text, { fontSize: "$1", color: "$soft", children: opt.note })] }), active ? _jsx(Check, { size: 16, color: "var(--primary)", "aria-hidden": true }) : null] }) }, opt.id));
+                        }) })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Palette, { size: 16, color: "var(--primary)", "aria-hidden": true }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: t('Organization Theme Mods (@hanzo/mod)') })] }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Select or fork designer themes for custom organization branding.') }), _jsx(XStack, { gap: "$2", flexWrap: "wrap", children: BUILTIN_MODS.map((mod) => (_jsx(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => applyMod(mod), ...CHOICE, py: 6, px: 12, bg: "transparent", borderColor: "var(--white-10)", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$2", color: "$ink", children: mod.name }) }, mod.id))) }), _jsxs(YStack, { gap: "$2", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Type, { size: 15, color: "var(--primary)", "aria-hidden": true }), _jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t('Custom Typography') })] }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Enter a font family name (e.g. "Geist", "Inter", "Cabinet Grotesk") or a webfont stylesheet URL.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Input, { flex: 1, size: "sm", value: customFont, onChange: (e) => setCustomFont(e.target.value), placeholder: "e.g. Cabinet Grotesk or https://fonts.googleapis.com/..." }), _jsx(Button, { size: "sm", onClick: handleApplyFont, children: fontApplied ? t('Applied!') : t('Apply Font') })] })] }), _jsxs(YStack, { gap: "$2", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: t('Fork & Share Theme Mods') }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('Export current mod configuration or paste a mod JSON to import.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Input, { flex: 1, size: "sm", value: modJson, onChange: (e) => setModJson(e.target.value), placeholder: t('Paste mod JSON here to import') }), _jsxs(Button, { size: "sm", variant: "outline", onClick: handleImportMod, children: [_jsx(Upload, { size: 13, "aria-hidden": true }), t('Import')] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => handleExportMod(BUILTIN_MODS[0]), children: [_jsx(Download, { size: 13, "aria-hidden": true }), copiedMod ? t('Copied!') : t('Export JSON')] })] })] })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: t('Language') }), _jsx(Text, { fontSize: "$2", color: "$soft", children: t('The language Hanzo is shown in, on every Hanzo surface you sign in to.') }), _jsx(XStack, { pt: "$1", children: _jsx(LanguagePicker, {}) })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/app",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Hanzo's app: the shell and its apps (Home, Chat, Inbox, Contacts, Meet, Calendar, Drive, Board, Work, Bots), once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,6 +42,8 @@
   },
   "license": "Apache-2.0 OR MIT",
   "dependencies": {
+    "@hanzo/glass": "0.1.0",
+    "@hanzo/mod": "0.1.0",
     "@hanzo/personas": "1.0.5",
     "marked": "18.0.12",
     "simple-icons": "16.30.0"