@hanzo/app 0.2.8 → 0.2.9

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/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/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 codebase 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 codebase 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/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.9",
   "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"