@hanzo/build 0.2.5 → 0.2.7

package/README.md

@@ -5,7 +5,9 @@ the database, the sign-in and the storage already there.
 
 The builder is one component, `<Builder host={…} />` from `@hanzo/build`, with
 three hosts: this page (hanzo.build), and the Dev section of the Hanzo app at
-hanzo.ai/dev and hanzo.app/dev. None of them forks it.
+hanzo.ai/dev and hanzo.app/dev. None of them forks it. hanzo.build is this
+frontend. A click stays on this origin — sign-in returns to `/auth/callback`
+here — and github.com is opened only for the repository grant.
 
 ```
 pnpm install
@@ -68,6 +70,7 @@ hanzo.id token for `Host.admin`. One left column, never two.
 | `''` | New — the empty state and the composer |
 | `sess_<32 hex>` | one run, live |
 | `-/automations` | repeating work, read from `/v1/auto/flows` |
+| `-/mcp` | the fleet's native MCP servers, from `POST /v1/mcp` `tools/list` |
 | `-/codebases` | the forge's repositories |
 | `-/sync` | bring granted repositories onto the forge |
 | `-/projects` | the forge's boards |
@@ -82,10 +85,13 @@ collide.
 ## What is on the screen
 
 **The rail** (hanzo.build). New, then Automations, then the forge — Codebase, Projects, Issues —
-then Artifacts, Customize (the platform's plugins), More (Templates, Machines,
-Docs), then the org's coding runs newest first with a live status dot, and the
-account. Collapse is an explicit toggle kept in this browser. A host with its
-own rail draws `DevSection` there instead.
+then MCP, Artifacts, More (Templates, Machines, Docs), then the org's coding
+runs newest first with a live status dot, and the account. Collapse is an
+explicit toggle kept in this browser. A host with its own rail draws
+`DevSection` there instead.
+
+**MCP.** The native servers `POST /v1/mcp` lists, each with the operations it
+names. A run starts a server when it calls it, and the server stays up afterwards.
 
 **New.** "What's up next?", and at the foot the composer: where the run runs
 (Default is the platform's sandbox; the org's machines follow), the codebase
@@ -121,6 +127,7 @@ picker and open-in-tab; Share and Publish; the console dock under it.
 | `GET /v1/projects` · `POST /v1/projects/fork` · `GET /v1/templates` | artifacts, templates |
 | `GET /v1/git/repos/{name}/tree` · `/blob` | Files and Code |
 | `POST /v1/platform/apps` · `GET /v1/platform/builds` | Add to project, Publish |
+| `POST /v1/mcp` | the native MCP servers, `tools/list` |
 | `GET /v1/models` · `POST /v1/event` | the model list, a verdict |
 
 `mode`, `model` and `effort` are sent with a run as asked; the platform

package/lib/account.d.ts

@@ -1,4 +1,7 @@
 import type { RailSession } from '@hanzo/ui/chat';
+/** The builder listens, so a settings control on this page opens the account dialog. */
+export declare function onAccount(fn: () => void): () => void;
+export declare function revealAccount(): void;
 export declare function Account({ open, onOpenChange }: {
     open: boolean;
     onOpenChange: (o: boolean) => void;

package/lib/account.js

@@ -8,10 +8,33 @@ import { LogOut, Settings } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
 import { useMemo, useState } from 'react';
 import { useHost } from './host.js';
+let reveal = null;
+/** The builder listens, so a settings control on this page opens the account dialog. */
+export function onAccount(fn) {
+    reveal = fn;
+    return () => {
+        if (reveal === fn)
+            reveal = null;
+    };
+}
+export function revealAccount() {
+    reveal?.();
+}
+/** A settings address on another host. This page's own account is the dialog itself. */
+function accountSettings(href) {
+    if (typeof window === 'undefined')
+        return false;
+    try {
+        return new URL(href, window.location.origin).origin !== window.location.origin;
+    }
+    catch {
+        return false;
+    }
+}
 export function Account({ open, onOpenChange }) {
     const host = useHost();
     const who = host.person;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 360, children: [_jsx(DialogTitle, { children: "Account" }), _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: who?.name || who?.email || 'Signed out' }), who?.email && who.name ? (_jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email })) : null, host.org ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Organization: ", host.org] })) : null] }), _jsxs(XStack, { gap: "$2", justify: "flex-end", flexWrap: "wrap", children: [_jsxs(Button, { variant: "outline", size: "sm", onPress: () => host.open(host.links.settings), children: [_jsx(Settings, { size: 14 }), " Settings"] }), host.signOut ? (_jsxs(Button, { variant: "outline", size: "sm", onPress: () => host.signOut?.(), children: [_jsx(LogOut, { size: 14 }), " Sign out"] })) : null] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 360, children: [_jsx(DialogTitle, { children: "Account" }), _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: who?.name || who?.email || 'Signed out' }), who?.email && who.name ? (_jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email })) : null, host.org ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Organization: ", host.org] })) : null] }), _jsxs(XStack, { gap: "$2", justify: "flex-end", flexWrap: "wrap", children: [accountSettings(host.links.settings) ? (_jsxs(Button, { variant: "outline", size: "sm", onPress: () => host.open(host.links.settings), children: [_jsx(Settings, { size: 14 }), " Settings"] })) : null, host.signOut ? (_jsxs(Button, { variant: "outline", size: "sm", onPress: () => host.signOut?.(), children: [_jsx(LogOut, { size: 14 }), " Sign out"] })) : null] })] }) }));
 }
 export function Find({ open, onOpenChange, recents, onOpen, }) {
     const [q, setQ] = useState('');

package/lib/api/mcp.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The fleet's native MCP servers, as the MCP server itself lists them.
+ *
+ *   POST /v1/mcp  {"method":"tools/list"} → {result:{tools:[…]}}
+ *
+ * One tool is one native server. Its operations are the names in `op`. A run
+ * starts a server the first time it calls it; the server stays up afterwards.
+ * `describe` is how a caller reads one operation's schema, so it is not a server.
+ */
+import { type Target } from './call.ts';
+export interface Native {
+    name: string;
+    description: string;
+    ops: string[];
+}
+/** The servers in one tools/list answer. A missing tool array is a refusal. */
+export declare function nativesOf(body: unknown): Native[];
+/** Every native server the fleet MCP server is serving. */
+export declare function natives(t: Target): Promise<Native[]>;

package/lib/api/mcp.js

@@ -0,0 +1,46 @@
+/**
+ * The fleet's native MCP servers, as the MCP server itself lists them.
+ *
+ *   POST /v1/mcp  {"method":"tools/list"} → {result:{tools:[…]}}
+ *
+ * One tool is one native server. Its operations are the names in `op`. A run
+ * starts a server the first time it calls it; the server stays up afterwards.
+ * `describe` is how a caller reads one operation's schema, so it is not a server.
+ */
+import { call, Refusal } from './call.js';
+const words = (v) => (Array.isArray(v) ? v.filter((x) => typeof x === 'string' && x !== '') : []);
+/** The servers in one tools/list answer. A missing tool array is a refusal. */
+export function nativesOf(body) {
+    const root = body && typeof body === 'object' ? body : {};
+    const err = root.error;
+    if (err && typeof err === 'object') {
+        const message = err.message;
+        throw new Refusal(200, typeof message === 'string' && message ? message : 'The MCP server refused the list');
+    }
+    const result = root.result && typeof root.result === 'object' ? root.result : null;
+    const tools = result && Array.isArray(result.tools) ? result.tools : null;
+    if (!tools)
+        throw new Refusal(502, 'The MCP server did not list its tools');
+    const out = [];
+    for (const raw of tools) {
+        if (!raw || typeof raw !== 'object')
+            continue;
+        const t = raw;
+        const name = typeof t.name === 'string' ? t.name : '';
+        if (!name || name === 'describe')
+            continue;
+        const schema = t.inputSchema && typeof t.inputSchema === 'object' ? t.inputSchema : {};
+        const props = schema.properties && typeof schema.properties === 'object' ? schema.properties : {};
+        const op = props.op && typeof props.op === 'object' ? props.op : {};
+        out.push({
+            name,
+            description: typeof t.description === 'string' ? t.description : '',
+            ops: words(op.enum),
+        });
+    }
+    return out;
+}
+/** Every native server the fleet MCP server is serving. */
+export async function natives(t) {
+    return nativesOf(await call(t, 'POST', '/v1/mcp', { jsonrpc: '2.0', id: 1, method: 'tools/list' }));
+}

package/lib/builder.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   /-/issues    the forge's issues
  *   /-/artifacts what this org has built
  *   /-/templates the public starters
+ *   /-/mcp       the fleet's native MCP servers
  *   /<slug>      a deployed project's workspace, in this same window
  *
  * The rail is the sessions rail every Hanzo surface shares: New, the builder's
@@ -29,7 +30,7 @@ import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, M
 import { Button } from '@hanzo/ui';
 import { SessionRail } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzo/ui/product';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { pinBoard } from './choice.js';
 import { useKept, useRecents } from './data.js';
 import { Forge } from './forge.js';
@@ -40,7 +41,7 @@ import { path, route } from './route.js';
 import { Run } from './run.js';
 import { DOTS } from './section.js';
 import { Artifacts, Templates } from './shelf.js';
-import { Account, Find } from './account.js';
+import { Account, Find, onAccount } from './account.js';
 function Shell() {
     const host = useHost();
     const t = useTarget();
@@ -51,6 +52,7 @@ function Shell() {
     const [order, setOrder] = useState('newest');
     const [account, setAccount] = useState(false);
     const [finding, setFinding] = useState(false);
+    useEffect(() => onAccount(() => setAccount(true)), []);
     const go = (p) => {
         setDrawer(false);
         host.go(p);
@@ -77,16 +79,45 @@ function Shell() {
             active: screen === 'issues',
         },
         { id: 'artifacts', label: 'Artifacts', icon: _jsx(Blocks, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
-        { id: 'customize', label: 'Customize', icon: _jsx(Puzzle, { size: 16 }), onPress: () => host.open(host.links.customize) },
+        { id: 'mcp', label: 'MCP', icon: _jsx(Puzzle, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'mcp' })), active: screen === 'mcp' },
     ];
     const more = [
         { id: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'templates' })), active: screen === 'templates' },
-        { id: 'machines', label: 'Machines', icon: _jsx(Cpu, { size: 16 }), onPress: () => host.open(`${host.links.home.replace(/\/+$/, '')}/platform/computers`) },
+        {
+            id: 'machines',
+            label: 'Machines',
+            icon: _jsx(Cpu, { size: 16 }),
+            onPress: () => {
+                const home = host.links.home.replace(/\/+$/, '');
+                const computers = `${home}/platform/computers`;
+                try {
+                    if (new URL(computers, window.location.origin).origin === window.location.origin) {
+                        host.go('');
+                        return;
+                    }
+                }
+                catch {
+                    return;
+                }
+                host.open(computers);
+            },
+        },
         { id: 'docs', label: 'Docs', icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open('https://docs.hanzo.ai/docs/dev', '_blank', 'noopener,noreferrer') },
     ];
     return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, bg: "$background", children: [_jsxs(YStack, { position: "relative", shrink: 0, children: [_jsx(SessionRail, { onNew: () => go(''), fresh: r.kind === 'new', links: links, more: more, recents: rows, active: r.kind === 'run' ? r.id : null, onOpen: (id) => go(id), onSort: () => setOrder(order === 'newest' ? 'running' : 'newest'), sortLabel: order === 'newest' ? 'Show running first' : 'Show newest first', empty: _jsx(SizableText, { size: "$1", color: "$soft", px: "$2", children: !host.person ? 'Sign in to see your runs.' : recents.error ? recents.error.message : recents.loading ? 'Reading…' : 'No runs yet.' }), account: host.person
                             ? { name: host.person.email || host.person.name, onPress: () => setAccount(true) }
-                            : { name: 'Sign in', onPress: () => host.signIn?.() }, onSettings: () => host.open(host.links.settings), onSearch: () => setFinding(true), collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : 44, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsxs(XStack, { position: "absolute", t: 8, l: 8, r: 8, z: 2, items: "center", gap: "$2", render: "button", "aria-label": host.org ? `Organization ${host.org}` : 'Hanzo', onPress: () => go(''), children: [_jsx(Brand, { org: host.org }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: host.org || 'Hanzo' })] }))] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsx(XStack, { height: 44, px: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }) }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Account, { open: account, onOpenChange: setAccount }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
+                            : { name: 'Sign in', onPress: () => host.signIn?.() }, onSettings: () => {
+                            try {
+                                if (new URL(host.links.settings, window.location.origin).origin === window.location.origin) {
+                                    setAccount(true);
+                                    return;
+                                }
+                            }
+                            catch {
+                                return;
+                            }
+                            host.open(host.links.settings);
+                        }, onSearch: () => setFinding(true), collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : 44, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsxs(XStack, { position: "absolute", t: 8, l: 8, r: 8, z: 2, items: "center", gap: "$2", render: "button", "aria-label": host.org ? `Organization ${host.org}` : 'Hanzo', onPress: () => go(''), children: [_jsx(Brand, { org: host.org }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: host.org || 'Hanzo' })] }))] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsx(XStack, { height: 44, px: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }) }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Account, { open: account, onOpenChange: setAccount }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
 }
 /** Whichever pane the address names, beside a rail — the builder's or the host's. */
 function Pane({ onStarted }) {

package/lib/forge.js

@@ -10,6 +10,7 @@ import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { ChevronDown, GitBranch, Plus, Settings, Workflow } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
+import { revealAccount } from './account.js';
 import { add, arm, flows } from './api/auto.js';
 import { codebases, create } from './api/codebases.js';
 import { boards, issues } from './api/work.js';
@@ -17,6 +18,7 @@ import { boardKey, pinBoard, pinCodebase, readPending, writePending } from './ch
 import { useKept, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
 import { path } from './route.js';
+import { Servers } from './mcp.js';
 import { Sync } from './sync.js';
 import { grants } from './api/github.js';
 function Head({ title, says }) {
@@ -40,6 +42,8 @@ export function Forge({ screen }) {
         return _jsx(Automations, {});
     if (screen === 'sync')
         return _jsx(Sync, {});
+    if (screen === 'mcp')
+        return _jsx(Servers, {});
     if (screen === 'codebases')
         return _jsx(Codebases, {});
     if (screen === 'projects')
@@ -169,7 +173,18 @@ function Codebases() {
         pinCodebase(host.org, c);
         host.go('');
     };
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$6", fontWeight: "500", color: "$ink", children: host.org || 'Forge' }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Create and browse this organization\u2019s repositories." })] }), _jsxs(XStack, { render: "button", "aria-label": "Settings", items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: '$hover' }, onPress: () => host.open(host.links.settings), children: [_jsx(Settings, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Settings" })] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$2", color: "$ink", children: "All repos" }) }), _jsx(YStack, { flex: 1 }), _jsx(YStack, { width: 240, minW: 0, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find repo\u2026", "aria-label": "Find a repository", disabled: !signed }) }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync" }), _jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New"] })] }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's repositories." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : shown.length === 0 ? (_jsx(Note, { children: list.value.length === 0 ? 'No repositories yet.' : 'Nothing matches.' })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", children: [_jsxs(XStack, { flex: 1, render: "button", "aria-label": "Sort by name", items: "center", gap: "$1", onPress: () => setSort('name'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Name" }), sort === 'name' ? _jsx(ChevronDown, { size: 12 }) : null] }), _jsxs(XStack, { render: "button", "aria-label": "Sort by last updated", items: "center", justify: "flex-end", gap: "$1", width: 140, onPress: () => setSort('updated'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Last updated" }), sort === 'updated' ? _jsx(ChevronDown, { size: 12 }) : null] })] }), slice.map((c) => (_jsxs(XStack, { render: "button", "aria-label": `Work on ${c.name}`, onPress: () => open(c), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(GitBranch, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: c.name }), _jsx(SizableText, { size: "$1", color: "$soft", width: 140, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : when(c.updated) })] }, `${c.org}/${c.name}`))), _jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: `Showing ${from}–${to} of ${shown.length}` }), _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Previous page", disabled: safePage === 0, onPress: () => setPage(safePage - 1), children: _jsx(SizableText, { size: "$1", color: safePage === 0 ? '$soft' : '$ink', children: "Prev" }) }), _jsx(SizableText, { size: "$1", color: "$soft", children: `${safePage + 1} / ${pages}` }), _jsx(XStack, { render: "button", "aria-label": "Next page", disabled: safePage >= pages - 1, onPress: () => setPage(safePage + 1), children: _jsx(SizableText, { size: "$1", color: safePage >= pages - 1 ? '$soft' : '$ink', children: "Next" }) })] })] })] }))] }), _jsx(NewRepo, { open: making, onOpenChange: setMaking, onCreate: async (name, description) => {
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$6", fontWeight: "500", color: "$ink", children: host.org || 'Forge' }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Create and browse this organization\u2019s repositories." })] }), _jsxs(XStack, { render: "button", "aria-label": "Settings", items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: '$hover' }, onPress: () => {
+                                    try {
+                                        if (new URL(host.links.settings, window.location.origin).origin === window.location.origin) {
+                                            revealAccount();
+                                            return;
+                                        }
+                                    }
+                                    catch {
+                                        return;
+                                    }
+                                    host.open(host.links.settings);
+                                }, children: [_jsx(Settings, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Settings" })] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$2", color: "$ink", children: "All repos" }) }), _jsx(YStack, { flex: 1 }), _jsx(YStack, { width: 240, minW: 0, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find repo\u2026", "aria-label": "Find a repository", disabled: !signed }) }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync" }), _jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New"] })] }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's repositories." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : shown.length === 0 ? (_jsx(Note, { children: list.value.length === 0 ? 'No repositories yet.' : 'Nothing matches.' })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", children: [_jsxs(XStack, { flex: 1, render: "button", "aria-label": "Sort by name", items: "center", gap: "$1", onPress: () => setSort('name'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Name" }), sort === 'name' ? _jsx(ChevronDown, { size: 12 }) : null] }), _jsxs(XStack, { render: "button", "aria-label": "Sort by last updated", items: "center", justify: "flex-end", gap: "$1", width: 140, onPress: () => setSort('updated'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Last updated" }), sort === 'updated' ? _jsx(ChevronDown, { size: 12 }) : null] })] }), slice.map((c) => (_jsxs(XStack, { render: "button", "aria-label": `Work on ${c.name}`, onPress: () => open(c), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(GitBranch, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: c.name }), _jsx(SizableText, { size: "$1", color: "$soft", width: 140, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : when(c.updated) })] }, `${c.org}/${c.name}`))), _jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: `Showing ${from}–${to} of ${shown.length}` }), _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Previous page", disabled: safePage === 0, onPress: () => setPage(safePage - 1), children: _jsx(SizableText, { size: "$1", color: safePage === 0 ? '$soft' : '$ink', children: "Prev" }) }), _jsx(SizableText, { size: "$1", color: "$soft", children: `${safePage + 1} / ${pages}` }), _jsx(XStack, { render: "button", "aria-label": "Next page", disabled: safePage >= pages - 1, onPress: () => setPage(safePage + 1), children: _jsx(SizableText, { size: "$1", color: safePage >= pages - 1 ? '$soft' : '$ink', children: "Next" }) })] })] })] }))] }), _jsx(NewRepo, { open: making, onOpenChange: setMaking, onCreate: async (name, description) => {
                     const row = await create(t, name, description);
                     pinCodebase(host.org, row);
                     setMaking(false);

package/lib/host.d.ts

@@ -32,18 +32,18 @@ export interface Host {
     go: (path: string, how?: {
         replace?: boolean;
     }) => void;
-    /** Where the builder links out to. Same-window addresses on the host, or https. */
+    /** Where the builder links out. On hanzo.build these are addresses of this page. */
     links: {
-        /** Troubleshoot GitHub connection: the GitHub pane of the platform's plugins. */
+        /** GitHub for this page: bringing repositories onto the forge. */
         github: string;
-        /** Customize: the platform's plugins (skills, MCP, connectors). */
+        /** Customize, an address of this host. */
         customize: string;
-        /** Account settings. */
+        /** Account settings, an address of this host. */
         settings: string;
-        /** The platform itself, where the mark leads. */
+        /** This host's home. On hanzo.build it is the page itself. */
         home: string;
     };
-    /** Leave the builder for a host address, same window. */
+    /** Open a host address in this window. hanzo.build keeps the window on its own origin. */
     open: (href: string) => void;
     signIn?: () => void;
     signOut?: () => void;

package/lib/mcp.d.ts

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

package/lib/mcp.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The fleet's native MCP servers.
+ *
+ * The list is the MCP server's own tools/list. A server starts when a run
+ * calls it and stays up afterwards, so this pane lists them rather than
+ * starting them.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronDown } from '@hanzogui/lucide-icons-2';
+import { Input } from '@hanzo/ui';
+import { useState } from 'react';
+import { natives } from './api/mcp.js';
+import { useRead } from './data.js';
+import { useTarget } from './host.js';
+export function Servers() {
+    const t = useTarget();
+    const list = useRead(() => natives(t), [], [t]);
+    const [q, setQ] = useState('');
+    const [open, setOpen] = useState(null);
+    const needle = q.trim().toLowerCase();
+    const shown = list.value.filter((s) => !needle || s.name.toLowerCase().includes(needle) || s.ops.some((op) => op.toLowerCase().includes(needle)));
+    const ops = shown.reduce((n, s) => n + s.ops.length, 0);
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: _jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: "MCP" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Native servers. A run starts one when it calls it, and the server stays up afterwards." })] }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find a server or an operation\u2026", "aria-label": "Find a server" }), list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading the servers\u2026" })) : list.error && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : shown.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.value.length === 0 ? 'The MCP server listed no native servers.' : 'No server matches.' })) : (_jsxs(YStack, { gap: "$1", children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [shown.length, " servers \u00B7 ", ops, " operations"] }), shown.map((s) => {
+                            const on = open === s.name;
+                            return (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { render: "button", "aria-expanded": on, "aria-label": s.name, items: "center", gap: "$3", px: "$3", py: "$2.5", hoverStyle: { bg: '$hover' }, onPress: () => setOpen(on ? null : s.name), children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: s.name }), s.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: on ? undefined : 2, children: s.description })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", children: s.ops.length }), _jsx(ChevronDown, { size: 14, style: { transform: on ? 'rotate(180deg)' : undefined } })] }), on ? (_jsx(YStack, { px: "$3", py: "$2", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: s.ops.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "This server named no operations." })) : (s.ops.map((op) => (_jsx(SizableText, { size: "$1", color: "$ink", children: op }, op)))) })) : null] }, s.name));
+                        })] }))] }) }));
+}

package/lib/route.d.ts

@@ -10,7 +10,7 @@
  * so it can hold neither the `_` a session id carries nor start with `-`.
  * Anything else is not an address here and reads as the empty state.
  */
-export type Screen = 'artifacts' | 'templates' | 'codebases' | 'projects' | 'issues' | 'automations' | 'sync';
+export type Screen = 'artifacts' | 'templates' | 'codebases' | 'projects' | 'issues' | 'automations' | 'sync' | 'mcp';
 export type Route = {
     kind: 'new';
 } | {

package/lib/route.js

@@ -1,6 +1,6 @@
 export const SESSION = /^sess_[0-9a-f]{32}$/;
 export const SLUG = /^[a-z0-9]([a-z0-9-]{0,38}[a-z0-9])?$/;
-const SCREENS = ['artifacts', 'templates', 'codebases', 'projects', 'issues', 'automations', 'sync'];
+const SCREENS = ['artifacts', 'templates', 'codebases', 'projects', 'issues', 'automations', 'sync', 'mcp'];
 export function route(path) {
     const p = path.replace(/^\/+|\/+$/g, '');
     if (SESSION.test(p))

package/lib/section.js

@@ -11,7 +11,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * host's own `go`.
  */
 import { SizableText } from '@hanzo/gui';
-import { Blocks, CircleDot, FolderGit2, Kanban, LayoutTemplate, SquarePen, Workflow } from '@hanzogui/lucide-icons-2';
+import { Blocks, CircleDot, FolderGit2, Kanban, LayoutTemplate, Puzzle, SquarePen, Workflow } from '@hanzogui/lucide-icons-2';
 import { SidebarItem, SidebarSection, StatusDot } from '@hanzo/ui/chat';
 import { useMemo } from 'react';
 import { pinBoard } from './choice.js';
@@ -48,5 +48,5 @@ export function DevSection({ host, onPick, label = 'Runs', children, }) {
     return (_jsxs(_Fragment, { children: [_jsx(SidebarItem, { icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), active: r.kind === 'new', onPress: () => go(''), children: "New run" }), _jsx(SidebarItem, { icon: _jsx(Workflow, { size: 16, "aria-hidden": true }), active: screen === 'automations', onPress: () => go(path({ kind: 'screen', screen: 'automations' })), children: "Automations" }), _jsx(SidebarItem, { icon: _jsx(FolderGit2, { size: 16, "aria-hidden": true }), active: screen === 'codebases', onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), children: "Codebase" }), _jsx(SidebarItem, { icon: _jsx(Kanban, { size: 16, "aria-hidden": true }), active: screen === 'projects', onPress: () => go(path({ kind: 'screen', screen: 'projects' })), children: "Projects" }), _jsx(SidebarItem, { icon: _jsx(CircleDot, { size: 16, "aria-hidden": true }), active: screen === 'issues', onPress: () => {
                     pinBoard(host.org, '');
                     go(path({ kind: 'screen', screen: 'issues' }));
-                }, children: "Issues" }), _jsx(SidebarItem, { icon: _jsx(Blocks, { size: 16, "aria-hidden": true }), active: screen === 'artifacts', onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), children: "Artifacts" }), _jsx(SidebarItem, { icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), active: screen === 'templates', onPress: () => go(path({ kind: 'screen', screen: 'templates' })), children: "Templates" }), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: () => go(s.id), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
+                }, children: "Issues" }), _jsx(SidebarItem, { icon: _jsx(Puzzle, { size: 16, "aria-hidden": true }), active: screen === 'mcp', onPress: () => go(path({ kind: 'screen', screen: 'mcp' })), children: "MCP" }), _jsx(SidebarItem, { icon: _jsx(Blocks, { size: 16, "aria-hidden": true }), active: screen === 'artifacts', onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), children: "Artifacts" }), _jsx(SidebarItem, { icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), active: screen === 'templates', onPress: () => go(path({ kind: 'screen', screen: 'templates' })), children: "Templates" }), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: () => go(s.id), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
 }

package/package.json

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