@hanzo/build 0.2.33 → 0.2.35

package/README.md

@@ -79,6 +79,12 @@ import { Builder, DevSection } from '@hanzo/build'
 <Builder host={host} rail={false} />
 ```
 
+A run draws its own panes — the transcript, the side pane a gutter beside it
+with the resize edge in that gutter, and each composer — from @hanzo/design's
+pane tokens: `--pane-fill`, `--pane-round`, `--pane-edge`, `--pane-blur`,
+`--pane-gap`, and `--shadow-sheet-2` for the drop. A host retunes the tokens;
+it writes no rule against the builder's slots.
+
 `DevSection` is rows of `@hanzo/ui/chat`'s Sidebar; `useSessions(host)` is its
 data — the org's coding runs, kept live by the org's feed — for a host that
 draws the rows itself. `administers(token, org)` reads the org-admin bit off a
@@ -260,6 +266,7 @@ src/
   transcript.tsx  a run's transcript, as cards
   prose.tsx     markdown, drawn as text (markdown.ts reads it)
   desk.tsx      the pane beside a run
+  pane.ts       how a pane is cut, from the --pane-* tokens
   door.tsx      a run's desktop or shell, framed
   git.tsx       what a run pushed
   files.tsx     a run's files and artifacts

package/lib/api/github.d.ts

@@ -4,7 +4,8 @@
  *   GET  /v1/provider/github/repos?q=&owner=&limit=&after=           most recently pushed first
  *   GET  /v1/provider/github/repos/{owner}/{repo}/branches?q=&limit=&after=   default first
  *   GET  /v1/provider/github/user              the person's own connection
- *   POST /v1/provider/github/user/connect      → {authorizeUrl}
+ *   POST /v1/provider/github/user/connect      {return} → {authorizeUrl}
+ *   POST /v1/provider/github/user/complete     {grant} → the connection
  *   POST /v1/provider/github/user/disconnect
  *   GET  /v1/provider/github/installations     the accounts this org has bound the App on
  *
@@ -14,8 +15,9 @@
  *
  * `connected` false with repositories is an org admin seeing the org's
  * installations; false with none is the cue to connect. GitHub returns a
- * connecting person to the console's /connectors?complete=github&grant=<id>,
- * which completes it.
+ * connecting person to the page the connect named as its return (a Hanzo app
+ * page; the console's /connectors otherwise) with `?complete=github&grant=<id>`,
+ * and that page completes it (`complete`, and `landed` in ../back.ts).
  */
 import { type Target } from './call.ts';
 export interface Repo {
@@ -74,8 +76,14 @@ export interface BranchQuery {
 }
 export declare function branches(t: Target, owner: string, name: string, p?: BranchQuery, signal?: AbortSignal): Promise<Branches>;
 export declare function connection(t: Target): Promise<Connection>;
-/** Where to send the person to authorize the platform's GitHub App — github.com only. */
-export declare function connect(t: Target): Promise<string>;
+/**
+ * Where to send the person to authorize the platform's GitHub App — github.com
+ * only. `back` is the page GitHub's return lands on; the platform keeps it only
+ * when it is a Hanzo app page.
+ */
+export declare function connect(t: Target, back?: string): Promise<string>;
+/** Finish the connect GitHub's return handed this page as `grant`. */
+export declare function complete(t: Target, grant: string): Promise<Connection>;
 export declare function disconnect(t: Target): Promise<void>;
 /** A GitHub account the platform's App is installed on, as this org sees it. */
 export interface Installation {

package/lib/api/github.js

@@ -4,7 +4,8 @@
  *   GET  /v1/provider/github/repos?q=&owner=&limit=&after=           most recently pushed first
  *   GET  /v1/provider/github/repos/{owner}/{repo}/branches?q=&limit=&after=   default first
  *   GET  /v1/provider/github/user              the person's own connection
- *   POST /v1/provider/github/user/connect      → {authorizeUrl}
+ *   POST /v1/provider/github/user/connect      {return} → {authorizeUrl}
+ *   POST /v1/provider/github/user/complete     {grant} → the connection
  *   POST /v1/provider/github/user/disconnect
  *   GET  /v1/provider/github/installations     the accounts this org has bound the App on
  *
@@ -14,8 +15,9 @@
  *
  * `connected` false with repositories is an org admin seeing the org's
  * installations; false with none is the cue to connect. GitHub returns a
- * connecting person to the console's /connectors?complete=github&grant=<id>,
- * which completes it.
+ * connecting person to the page the connect named as its return (a Hanzo app
+ * page; the console's /connectors otherwise) with `?complete=github&grant=<id>`,
+ * and that page completes it (`complete`, and `landed` in ../back.ts).
  */
 import { call, query, seg } from './call.js';
 const str = (v) => (typeof v === 'string' ? v : '');
@@ -57,18 +59,29 @@ export async function branches(t, owner, name, p = {}, signal) {
         total: num(raw.total),
     };
 }
+function own(raw) {
+    const c = obj(raw);
+    return { configured: c.configured === true, connected: c.connected === true, login: str(c.login) };
+}
 export async function connection(t) {
-    const raw = obj(await call(t, 'GET', '/v1/provider/github/user'));
-    return { configured: raw.configured === true, connected: raw.connected === true, login: str(raw.login) };
+    return own(await call(t, 'GET', '/v1/provider/github/user'));
 }
-/** Where to send the person to authorize the platform's GitHub App — github.com only. */
-export async function connect(t) {
-    const raw = obj(await call(t, 'POST', '/v1/provider/github/user/connect'));
+/**
+ * Where to send the person to authorize the platform's GitHub App — github.com
+ * only. `back` is the page GitHub's return lands on; the platform keeps it only
+ * when it is a Hanzo app page.
+ */
+export async function connect(t, back) {
+    const raw = obj(await call(t, 'POST', '/v1/provider/github/user/connect', back ? { return: back } : undefined));
     const url = str(raw.authorizeUrl);
     if (!/^https:\/\/github\.com\//.test(url))
         throw new Error('The platform did not name a GitHub address to connect at');
     return url;
 }
+/** Finish the connect GitHub's return handed this page as `grant`. */
+export async function complete(t, grant) {
+    return own(await call(t, 'POST', '/v1/provider/github/user/complete', { grant }));
+}
 export async function disconnect(t) {
     await call(t, 'POST', '/v1/provider/github/user/disconnect');
 }

package/lib/api/provider.d.ts

@@ -3,7 +3,7 @@
  * platform's GitHub App is installed on.
  *
  *   GET  /v1/provider/{id}              one connector and this org's connection to it
- *   POST /v1/provider/{id}/connect      {} → {authorizeUrl}: the provider's own consent page (org admin)
+ *   POST /v1/provider/{id}/connect      {return} → {authorizeUrl}: the provider's own consent page (org admin)
  *   POST /v1/provider/{id}/disconnect   forget the org's connection (org admin)
  *   GET  /v1/provider/slack/channels    the connected workspace's channels, a page at a time
  *
@@ -25,8 +25,8 @@ export interface Connector {
 }
 export declare function connector(raw: unknown, id?: string): Connector;
 export declare function read(t: Target, id: string): Promise<Connector>;
-/** The provider's consent page for this org. */
-export declare function authorize(t: Target, id: string): Promise<string>;
+/** The provider's consent page for this org; its return lands on `back` when that is a Hanzo app page. */
+export declare function authorize(t: Target, id: string, back?: string): Promise<string>;
 export declare function disconnect(t: Target, id: string): Promise<void>;
 export interface Channel {
     id: string;

package/lib/api/provider.js

@@ -3,7 +3,7 @@
  * platform's GitHub App is installed on.
  *
  *   GET  /v1/provider/{id}              one connector and this org's connection to it
- *   POST /v1/provider/{id}/connect      {} → {authorizeUrl}: the provider's own consent page (org admin)
+ *   POST /v1/provider/{id}/connect      {return} → {authorizeUrl}: the provider's own consent page (org admin)
  *   POST /v1/provider/{id}/disconnect   forget the org's connection (org admin)
  *   GET  /v1/provider/slack/channels    the connected workspace's channels, a page at a time
  *
@@ -35,9 +35,9 @@ const CONSENT = {
     slack: /^https:\/\/slack\.com\//,
     github: /^https:\/\/github\.com\//,
 };
-/** The provider's consent page for this org. */
-export async function authorize(t, id) {
-    const url = str(obj(await call(t, 'POST', `/v1/provider/${seg(id)}/connect`, {})).authorizeUrl);
+/** The provider's consent page for this org; its return lands on `back` when that is a Hanzo app page. */
+export async function authorize(t, id, back) {
+    const url = str(obj(await call(t, 'POST', `/v1/provider/${seg(id)}/connect`, back ? { return: back } : {})).authorizeUrl);
     const host = CONSENT[id];
     if (!host || !host.test(url))
         throw new Error(`The platform did not name a ${id} address to connect at`);

package/lib/back.d.ts

@@ -0,0 +1,29 @@
+import type { Target } from './api/call.ts';
+/** The query keys a return carries its answer in. */
+export declare const ANSWER: readonly ['complete', 'grant', 'connected', 'account', 'error', 'reason'];
+export type Landing = {
+    kind: 'grant';
+    provider: string;
+    grant: string;
+} | {
+    kind: 'connected';
+    provider: string;
+    account: string;
+} | {
+    kind: 'error';
+    provider: string;
+    reason: string;
+};
+/** The answer a return carried in `search`, or null when it carried none. */
+export declare function landed(search: string): Landing | null;
+/** `href` without the answer keys; `href` itself when it carries none. */
+export declare function clean(href: string): string;
+/** This page's address, as a connect's return. */
+export declare function here(): string;
+/** A provider id as people write it. */
+export declare const named: (id: string) => string;
+/**
+ * Finish what a return carried, once a person is signed in: `say` gets the
+ * sentence, and `after` runs once something was connected.
+ */
+export declare function useBack(t: Target, signed: boolean, say: (note: string) => void, after: () => void): void;

package/lib/back.js

@@ -0,0 +1,82 @@
+/**
+ * Coming back from a provider's consent page.
+ *
+ * A connect names the page it starts on as its return (`here`). The platform
+ * keeps that address when it is a Hanzo app page, and its callback lands the
+ * person back on it with the answer in the query:
+ *
+ *   ?complete=github&grant=<id>         a GitHub connect to finish (POST /v1/provider/github/user/complete)
+ *   ?connected=<provider>&account=<n>   an organization's connector, connected
+ *   ?error=<provider>&reason=<why>      either, refused
+ *
+ * `useBack` reads that answer once, takes it off the address so a reload does
+ * not replay it, finishes a GitHub grant, and says what happened.
+ */
+import { useEffect } from 'react';
+import { complete } from './api/github.js';
+/** The query keys a return carries its answer in. */
+export const ANSWER = ['complete', 'grant', 'connected', 'account', 'error', 'reason'];
+/** The answer a return carried in `search`, or null when it carried none. */
+export function landed(search) {
+    const q = new URLSearchParams(search);
+    const error = q.get('error');
+    if (error)
+        return { kind: 'error', provider: error, reason: q.get('reason') ?? '' };
+    const grant = q.get('grant');
+    const done = q.get('complete');
+    if (done && grant)
+        return { kind: 'grant', provider: done, grant };
+    const connected = q.get('connected');
+    if (connected)
+        return { kind: 'connected', provider: connected, account: q.get('account') ?? '' };
+    return null;
+}
+/** `href` without the answer keys; `href` itself when it carries none. */
+export function clean(href) {
+    const url = new URL(href);
+    if (!ANSWER.some((k) => url.searchParams.has(k)))
+        return href;
+    for (const k of ANSWER)
+        url.searchParams.delete(k);
+    return url.href;
+}
+/** This page's address, as a connect's return. */
+export function here() {
+    return clean(window.location.href);
+}
+const NAMES = { github: 'GitHub', slack: 'Slack' };
+/** A provider id as people write it. */
+export const named = (id) => NAMES[id] ?? (id ? id[0].toUpperCase() + id.slice(1) : 'The connection');
+/**
+ * Finish what a return carried, once a person is signed in: `say` gets the
+ * sentence, and `after` runs once something was connected.
+ */
+export function useBack(t, signed, say, after) {
+    useEffect(() => {
+        if (!signed)
+            return;
+        const l = landed(window.location.search);
+        if (!l)
+            return;
+        // Off the address first: a grant completes once, and a reload must not try again.
+        const next = clean(window.location.href);
+        window.history.replaceState(window.history.state, '', next);
+        if (l.kind === 'error') {
+            say(`${named(l.provider)}: ${l.reason || 'not connected'}`);
+            return;
+        }
+        if (l.kind === 'connected') {
+            say(`${named(l.provider)} is connected${l.account ? ` as ${l.account}` : ''}`);
+            after();
+            return;
+        }
+        if (l.provider !== 'github')
+            return;
+        complete(t, l.grant).then((c) => {
+            say(c.connected ? `Connected as @${c.login}` : 'GitHub did not connect; connect again');
+            after();
+        }, (e) => say(e.message));
+        // Once per landing: the address is clean after the first run.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [signed]);
+}

package/lib/desk.js

@@ -39,7 +39,7 @@ export function Desk({ id, repo, branch, base, environment, mode, pr, title, pro
     const box = useBox(sandbox);
     // Nothing is said of the sandbox until it has been read.
     const held = box.value?.state ?? '';
-    return (_jsxs(YStack, { role: "complementary", "aria-label": "Run details", flex: 1, minW: 0, minH: 0, borderLeftWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { px: "$2", py: "$2", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [_jsxs(XStack, { flex: 1, minW: 0, gap: "$1", overflow: "scroll", children: [_jsx(TabButton, { id: "browser", tab: tab, onPick: setTab, children: "Browser" }), _jsx(TabButton, { id: "desktop", tab: tab, onPick: setTab, children: "Desktop" }), _jsx(TabButton, { id: "terminal", tab: tab, onPick: setTab, children: "Terminal" }), _jsx(TabButton, { id: "artifacts", tab: tab, onPick: setTab, children: "Artifacts" }), _jsx(TabButton, { id: "files", tab: tab, onPick: setTab, children: "Files" }), _jsx(TabButton, { id: "git", tab: tab, onPick: setTab, children: "Git" }), _jsx(TabButton, { id: "environment", tab: tab, onPick: setTab, children: "Environment" })] }), _jsx(XStack, { render: "button", "aria-label": "Hide the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onHide, children: _jsx(PanelRightClose, { size: 16 }) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: () => setTab('environment') }] })] }), sandbox ? _jsx(Held, { box: box, live: live }) : null, _jsxs(YStack, { flex: 1, minH: 0, overflow: bleed ? 'hidden' : 'scroll', px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: [tab === 'environment' ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: "This run" }), _jsx(Fact, { label: "Run", value: id }), _jsx(Fact, { label: "Repository", value: name || '—' }), _jsx(Fact, { label: "Branch", value: branch || '—' }), _jsx(Fact, { label: "Base", value: base || '—' }), _jsx(Fact, { label: "Runs on", value: environment || 'sandbox' }), _jsx(Fact, { label: "Sandbox", value: sandbox || '—' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })) : null, tab === 'browser' ? _jsx(Browser, { sandbox: sandbox, held: held, site: site, live: live }, published) : null, tab === 'git' ? _jsx(Git, { session: id, title: title, live: live }) : null, tab === 'desktop' ? _jsx(Door, { which: "screen", sandbox: sandbox, held: held, session: id }) : null, tab === 'terminal' ? (_jsx(Terminal, { id: id, sandbox: sandbox, held: held, lines: lines, live: live, failed: failed, refused: refused, retry: retry, onRetry: onRetry })) : null, tab === 'artifacts' ? (_jsx(Artifacts, { session: id, sandbox: sandbox, repo: repo, branch: branch, mode: mode, project: project, site: site, pr: pr, onEnvironment: () => setTab('environment') })) : null, tab === 'files' ? _jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: held === 'running' }) : null] })] }));
+    return (_jsxs(YStack, { role: "complementary", "aria-label": "Run details", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { px: "$2", py: "$2", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [_jsxs(XStack, { flex: 1, minW: 0, gap: "$1", overflow: "scroll", children: [_jsx(TabButton, { id: "browser", tab: tab, onPick: setTab, children: "Browser" }), _jsx(TabButton, { id: "desktop", tab: tab, onPick: setTab, children: "Desktop" }), _jsx(TabButton, { id: "terminal", tab: tab, onPick: setTab, children: "Terminal" }), _jsx(TabButton, { id: "artifacts", tab: tab, onPick: setTab, children: "Artifacts" }), _jsx(TabButton, { id: "files", tab: tab, onPick: setTab, children: "Files" }), _jsx(TabButton, { id: "git", tab: tab, onPick: setTab, children: "Git" }), _jsx(TabButton, { id: "environment", tab: tab, onPick: setTab, children: "Environment" })] }), _jsx(XStack, { render: "button", "aria-label": "Hide the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onHide, children: _jsx(PanelRightClose, { size: 16 }) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: () => setTab('environment') }] })] }), sandbox ? _jsx(Held, { box: box, live: live }) : null, _jsxs(YStack, { flex: 1, minH: 0, overflow: bleed ? 'hidden' : 'scroll', px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: [tab === 'environment' ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: "This run" }), _jsx(Fact, { label: "Run", value: id }), _jsx(Fact, { label: "Repository", value: name || '—' }), _jsx(Fact, { label: "Branch", value: branch || '—' }), _jsx(Fact, { label: "Base", value: base || '—' }), _jsx(Fact, { label: "Runs on", value: environment || 'sandbox' }), _jsx(Fact, { label: "Sandbox", value: sandbox || '—' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })) : null, tab === 'browser' ? _jsx(Browser, { sandbox: sandbox, held: held, site: site, live: live }, published) : null, tab === 'git' ? _jsx(Git, { session: id, title: title, live: live }) : null, tab === 'desktop' ? _jsx(Door, { which: "screen", sandbox: sandbox, held: held, session: id }) : null, tab === 'terminal' ? (_jsx(Terminal, { id: id, sandbox: sandbox, held: held, lines: lines, live: live, failed: failed, refused: refused, retry: retry, onRetry: onRetry })) : null, tab === 'artifacts' ? (_jsx(Artifacts, { session: id, sandbox: sandbox, repo: repo, branch: branch, mode: mode, project: project, site: site, pr: pr, onEnvironment: () => setTab('environment') })) : null, tab === 'files' ? _jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: held === 'running' }) : null] })] }));
 }
 /**
  * The run's sandbox as it stands, and what moves it. It is read while the pane is

package/lib/foot.js

@@ -15,7 +15,7 @@ import { path } from './route.js';
 export const DOCS = 'https://docs.hanzo.ai/docs/dev';
 /** Hanzo in Slack is set up under Settings; the card goes there, and once dismissed stays gone. */
 export function Slack({ onOpen, onDismiss }) {
-    return (_jsxs(XStack, { items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", children: [_jsx(Mark, { size: 16 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: "Try Hanzo in Slack" }), _jsx(XStack, { render: "button", "aria-label": "Set up Hanzo in Slack", onPress: onOpen, cursor: "pointer", children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Set up" }) })] }), _jsx(XStack, { render: "button", "aria-label": "Dismiss", onPress: onDismiss, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14 }) })] }));
+    return (_jsxs(XStack, { items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "var(--radius-lg)", borderWidth: 1, borderColor: "$borderColor", bg: "var(--glass)", children: [_jsx(Mark, { size: 16 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: "Try Hanzo in Slack" }), _jsx(XStack, { render: "button", "aria-label": "Set up Hanzo in Slack", onPress: onOpen, cursor: "pointer", children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Set up" }) })] }), _jsx(XStack, { render: "button", "aria-label": "Dismiss", onPress: onDismiss, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14 }) })] }));
 }
 /**
  * The account menu's open state, for whatever row opens it.

package/lib/landing.js

@@ -29,6 +29,7 @@ import { ready, SANDBOX } from './api/places.js';
 import { isForge } from './choice.js';
 import { useKept, usePlaces, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
+import { pane } from './pane.js';
 import { usePrefs } from './prefs.js';
 import { Publish } from './publish.js';
 import { path } from './route.js';
@@ -211,7 +212,7 @@ export function Landing({ onStarted }) {
     const foot = (_jsxs(XStack, { flex: 1, items: "center", gap: "$2", flexWrap: "wrap", rowGap: "$1", children: [_jsx(Attach, { files: files, onFiles: setFiles, onNote: setNote }), _jsx(Dictate, { onText: (said) => setDraft((d) => (d ? `${d} ${said}` : said)), onNote: setNote }), _jsx(ModeSelect, { modes: MODES, value: kept.mode, onChange: (m) => set({ mode: m }), bg: "transparent", minH: 24, px: "$1.5", self: "center" }), _jsx(XStack, { flex: 1 }), _jsx(ChipSelect, { quiet: true, name: "Model", label: catalog.value.find((m) => m.id === kept.model)?.label ?? 'Enso', chosen: catalog.value.find((m) => m.id === kept.model) ?? null, items: catalog.value, footer: _jsx(Access, { items: catalog.value }), onChange: (m) => set({ model: m.id }), placeholder: "Search models\u2026", placement: "top-end", loading: catalog.loading, error: catalog.error?.message ?? null }), _jsx(ChipSelect, { quiet: true, name: "Effort", label: EFFORTS.find((e) => e.id === kept.effort)?.label ?? 'Medium', chosen: EFFORTS.find((e) => e.id === kept.effort) ?? null, items: EFFORTS, onChange: (e) => set({ effort: e.id }), placement: "top-end", width: 180 })] }));
     return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", justify: "center", px: "$4", pb: "$10", overflow: "scroll", children: [_jsxs(YStack, { width: "100%", maxW: COLUMN, gap: "$5", children: [_jsxs(XStack, { role: "heading", "aria-level": 1, justify: "center", items: "center", gap: "$3", flexWrap: "wrap", children: [_jsx(HanzoMark, { size: 26 }), _jsx(SizableText, { size: "$8", color: "$ink", style: { textAlign: 'center' }, children: prefs.callName ? `What’s up next, ${prefs.callName}?` : 'What’s up next?' })] }), _jsxs(YStack, { gap: "$2", children: [env.value && env.value.state !== 'ready' && !place.id ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: env.value.state === 'proposed'
                                             ? `A proposed environment for ${codebase} is waiting for review.`
-                                            : `${codebase} has no environment yet, so every run starts it bare.` }), env.value.state === 'proposed' && env.value.session ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(env.value.session), children: "Review" })) : (_jsx(Button, { size: "sm", onPress: () => setOffering(true), children: "Set up environment" }))] })) : null, note || unhonoured(kept.mode, place.id) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(kept.mode, place.id) })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, placeholder: "Describe a task or ask a question", label: "Describe a task or ask a question", head: head, foot: foot })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) }), codebase ? (_jsx(SetupDialog, { repo: codebase, open: offering, onOpenChange: setOffering, onStart: setup, onSaved: () => {
+                                            : `${codebase} has no environment yet, so every run starts it bare.` }), env.value.state === 'proposed' && env.value.session ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(env.value.session), children: "Review" })) : (_jsx(Button, { size: "sm", onPress: () => setOffering(true), children: "Set up environment" }))] })) : null, note || unhonoured(kept.mode, place.id) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(kept.mode, place.id) })) : null, _jsx(Composer, { inline: true, ...pane, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, placeholder: "Describe a task or ask a question", label: "Describe a task or ask a question", head: head, foot: foot })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) }), codebase ? (_jsx(SetupDialog, { repo: codebase, open: offering, onOpenChange: setOffering, onStart: setup, onSaved: () => {
                     setOffering(false);
                     env.reload();
                 } })) : null] }));

package/lib/pane.d.ts

@@ -0,0 +1,17 @@
+/**
+ * How a pane is cut: a card floating on the host's ground, read from
+ * @hanzo/design's `--pane-*` tokens. Each falls back to the design value the
+ * token names, so a host that sets none still draws a pane.
+ *
+ *   pane   fill, corner, edge, lens and drop, as gui props
+ *   gap    the gutter between two panes, and the width of the edge in it
+ */
+export declare const pane: {
+    readonly bg: 'var(--pane-fill, var(--sheet-1))';
+    readonly rounded: 'var(--pane-round, var(--radius-xl))';
+    readonly borderWidth: 1;
+    readonly borderColor: 'var(--pane-edge, var(--white-08))';
+    readonly backdropFilter: 'var(--pane-blur, blur(20px) saturate(1.8))';
+    readonly boxShadow: 'var(--shadow-sheet-2)';
+};
+export declare const gap = "var(--pane-gap, var(--space-2))";

package/lib/pane.js

@@ -0,0 +1,17 @@
+/**
+ * How a pane is cut: a card floating on the host's ground, read from
+ * @hanzo/design's `--pane-*` tokens. Each falls back to the design value the
+ * token names, so a host that sets none still draws a pane.
+ *
+ *   pane   fill, corner, edge, lens and drop, as gui props
+ *   gap    the gutter between two panes, and the width of the edge in it
+ */
+export const pane = {
+    bg: 'var(--pane-fill, var(--sheet-1))',
+    rounded: 'var(--pane-round, var(--radius-xl))',
+    borderWidth: 1,
+    borderColor: 'var(--pane-edge, var(--white-08))',
+    backdropFilter: 'var(--pane-blur, blur(20px) saturate(1.8))',
+    boxShadow: 'var(--shadow-sheet-2)',
+};
+export const gap = 'var(--pane-gap, var(--space-2))';

package/lib/project.js

@@ -51,6 +51,7 @@ import { Grip } from './grip.js';
 import { useHost, useTarget } from './host.js';
 import { MODES } from './landing.js';
 import { Out } from './out.js';
+import { pane as cut } from './pane.js';
 import { Publish } from './publish.js';
 import { Attach, compose, Dictate, Files } from './tools.js';
 const LIVE = new Set(['running', 'paused']);
@@ -319,7 +320,7 @@ export function Project({ slug }) {
                                     ? `${project?.name} is loaded — the preview shows the ${starter.title} starter until your copy is published. Say what to change and it gets built.`
                                     : project
                                         ? `${project.name} is loaded and nothing is published yet. Say what to change and it gets built.`
-                                        : `${slug} is loaded. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { px: "$3", pb: "$3", gap: "$2", children: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsxs(Composer, { value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
+                                        : `${slug} is loaded. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { px: "$3", pb: "$3", gap: "$2", children: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsxs(Composer, { ...cut, value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
                             ? () => void stop(t, current).then(() => setNote('Stop requested — the run keeps its work on its branch'), (e) => setNote(e.message))
                             : undefined, busy: busy || (running && !draft.trim()), rows: 3, placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", children: [_jsx(Attach, { files: attached, onFiles: setAttached, onNote: setNote }), _jsx(XStack, { flex: 1 }), _jsx(ModeSelect, { modes: MODES, value: mode, onChange: (m) => setMode(m), self: "center" }), _jsx(Dictate, { onText: (said) => setDraft((d) => (d ? `${d} ${said}` : said)), onNote: setNote })] })] }), wide && !collapsed ? (_jsx(Grip, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: "Resize the chat", r: -GUTTER, width: GUTTER })) : null] }));
     // The preview stays loaded while another view is open, so coming back to it

package/lib/run.js

@@ -42,6 +42,7 @@ import { Grip } from './grip.js';
 import { useHost, useTarget } from './host.js';
 import { EFFORTS } from './landing.js';
 import { Out } from './out.js';
+import { gap, pane } from './pane.js';
 import { usePrefs } from './prefs.js';
 import { Transcript } from './transcript.js';
 const LIVE = new Set(['running', 'paused', '']);
@@ -323,7 +324,7 @@ export function Run({ id }) {
                         : 'Reading this run…';
     // What a new run from here is made with; words that steer this run use neither.
     const tuning = signed && !steering ? (_jsxs(XStack, { flex: 1, items: "center", gap: "$2", justify: "flex-end", flexWrap: "wrap", rowGap: "$1", children: [_jsx(ChipSelect, { quiet: true, name: "Model", label: catalog.value.find((m) => m.id === model)?.label ?? named(model), chosen: catalog.value.find((m) => m.id === model) ?? null, items: catalog.value, footer: _jsx(Access, { items: catalog.value }), onChange: (m) => choose({ ...chose, model: m.id }), placeholder: "Search models\u2026", placement: "top-end", loading: catalog.loading, error: catalog.error?.message ?? null }), _jsx(ChipSelect, { quiet: true, name: "Effort", label: pace.label, chosen: pace, items: EFFORTS, onChange: (e) => choose({ ...chose, effort: e.id }), placement: "top-end", width: 180 })] })) : undefined;
-    return (_jsxs(XStack, { ref: measure, "data-slot": "run-split", flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsxs(YStack, { "data-slot": "run", flex: 1, minH: 0, minW: 0, width: "100%", px: "$6", "$max-md": { px: '$4' }, children: [_jsxs(XStack, { pt: "$3", pb: "$2", gap: "$3", items: "center", minH: 44, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Manage this run", items: "center", gap: "$1.5", maxW: "100%", px: "$1.5", mx: "$-1.5", py: "$0.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { render: "h1", size: "$5", color: "$ink", numberOfLines: 1, minW: 0, children: title }), _jsx(ChevronDown, { size: 14 })] }), items: manage }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, maxW: "100%", children: [state || (detail.loading ? 'reading' : ''), record?.repo, record?.branch, record?.published ? 'shared' : ''].filter(Boolean).join(' · ') })] }), desk ? null : (_jsx(XStack, { render: "button", "aria-label": "Show the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: () => setDesk(true), "$max-md": { display: 'none' }, children: _jsx(PanelRight, { size: 16 }) })), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(GitPullRequest, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: pr.label }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })) : null, sharing.length ? (_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Share", items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(Share, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Share" })] }), items: sharing })) : null] }), _jsx(Transcript, { cards: shown, 
+    return (_jsxs(XStack, { ref: measure, "data-slot": "run-split", flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsxs(YStack, { "data-slot": "run", ...pane, flex: 1, minH: 0, minW: 0, width: "100%", px: "$6", "$max-md": { px: '$4' }, children: [_jsxs(XStack, { pt: "$3", pb: "$2", gap: "$3", items: "center", minH: 44, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Manage this run", items: "center", gap: "$1.5", maxW: "100%", px: "$1.5", mx: "$-1.5", py: "$0.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { render: "h1", size: "$5", color: "$ink", numberOfLines: 1, minW: 0, children: title }), _jsx(ChevronDown, { size: 14 })] }), items: manage }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, maxW: "100%", children: [state || (detail.loading ? 'reading' : ''), record?.repo, record?.branch, record?.published ? 'shared' : ''].filter(Boolean).join(' · ') })] }), desk ? null : (_jsx(XStack, { render: "button", "aria-label": "Show the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: () => setDesk(true), "$max-md": { display: 'none' }, children: _jsx(PanelRight, { size: 16 }) })), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(GitPullRequest, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: pr.label }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })) : null, sharing.length ? (_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Share", items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(Share, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Share" })] }), items: sharing })) : null] }), _jsx(Transcript, { cards: shown, 
                         // A paused run's agent was stopped where it stood; what it was running is cut off.
                         live: running && !paused, header: hidden ? (_jsx(SizableText, { size: "$1", color: "$soft", children: `${hidden} earlier ${hidden === 1 ? 'turn is' : 'turns are'} not shown. The run’s Git tab has everything it pushed.` })) : null, onApprove: planned && earlier ? (p) => void act(() => carry(p, 'approve')) : undefined, approving: busy, onVerdict: (v) => verdict(t, id, record?.project ?? '', v), empty: signed ? (_jsx(SizableText, { size: "$2", color: "$soft", children: detail.error
                                 ? detail.error.message
@@ -349,9 +350,13 @@ export function Run({ id }) {
                                                 : 'This run is still working.' }), _jsx(Steer, { onCommand: command, withhold: [
                                             ...(paused ? ['pause'] : ['resume']),
                                             ...(busy || waiting ? ['pause', 'resume', 'stop'] : []),
-                                        ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: send, disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', foot: tuning }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'center' }, children: "Hanzo is AI and can make mistakes." })] })] }), desk ? (_jsxs(YStack, { "data-slot": "desk", ref: (el) => {
+                                        ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null, _jsx(Composer, { inline: true, ...pane, value: draft, onChange: setDraft, onSend: send, disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', foot: tuning }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'center' }, children: "Hanzo is AI and can make mistakes." })] })] }), desk ? (_jsxs(YStack, { "data-slot": "desk", ref: (el) => {
                     deskBox.current = el instanceof HTMLElement ? el : null;
-                }, position: "relative", shrink: 0, minH: 0, display: "none", $md: { display: 'flex' }, style: { width: across, maxWidth: `calc(100% - ${TALK_FLOOR}px)`, minWidth: DESK_FLOOR }, children: [_jsx(Grip, { side: "right", span: across, floor: DESK_FLOOR, ceil: most, reset: Math.min(most, DESK_WIDTH), onSpan: (n) => deskBox.current?.style.setProperty('width', `${n}px`), onKeep: setSide, onShut: () => setDesk(false), label: "Resize the side pane" }), _jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: mode, pr: pr, title: title, project: record?.project ?? '', sandbox: record?.sandbox ?? '', site: site, published: end.published, events: events, live: running, menu: [...manage, ...sharing], refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), onHide: () => setDesk(false) })] })) : null, _jsx(Dialog, { open: naming, onOpenChange: setNaming, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Rename this run" }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "The run\u2019s name", maxLength: 512, onKeyDown: (e) => {
+                }, ...pane, 
+                // A pane of its own beside the run's, the gutter between them.
+                ml: gap, position: "relative", shrink: 0, minH: 0, display: "none", $md: { display: 'flex' }, style: { width: across, maxWidth: `calc(100% - ${TALK_FLOOR}px)`, minWidth: DESK_FLOOR }, children: [_jsx(Grip, { side: "right", span: across, floor: DESK_FLOOR, ceil: most, reset: Math.min(most, DESK_WIDTH), onSpan: (n) => deskBox.current?.style.setProperty('width', `${n}px`), onKeep: setSide, onShut: () => setDesk(false), label: "Resize the side pane", 
+                        // In the gutter between the two panes; `left` is measured inside the pane's 1px edge.
+                        l: `calc(-1 * ${gap} - ${pane.borderWidth}px)`, width: gap }), _jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: mode, pr: pr, title: title, project: record?.project ?? '', sandbox: record?.sandbox ?? '', site: site, published: end.published, events: events, live: running, menu: [...manage, ...sharing], refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), onHide: () => setDesk(false) })] })) : null, _jsx(Dialog, { open: naming, onOpenChange: setNaming, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Rename this run" }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "The run\u2019s name", maxLength: 512, onKeyDown: (e) => {
                                 if (e.key === 'Enter')
                                     save();
                             } }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => setNaming(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || !name.trim(), onPress: save, children: "Save" })] })] }) })] }));

package/lib/settings/integrations.js

@@ -3,9 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Integrations: your own GitHub connection, the GitHub accounts the
  * organization has installed the platform's App on, and its Slack workspace.
  *
- * Connecting leaves this page once, for GitHub's or Slack's own consent screen.
- * Anyone connects their own GitHub; installing the App and connecting Slack are
- * an org admin's, which is the platform's rule.
+ * Connecting leaves this page once, for GitHub's or Slack's own consent screen,
+ * and the platform's callback brings the person back here with the answer
+ * (../back.ts), which this page finishes and reports. Anyone connects their own
+ * GitHub; installing the App and connecting Slack are an org admin's, which is
+ * the platform's rule.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Github, Hash, Lock, Slack } from '@hanzogui/lucide-icons-2';
@@ -13,6 +15,7 @@ import { Button } from '@hanzo/ui';
 import { useState } from 'react';
 import { connect, connection, disconnect as unlinkGithub, installations } from '../api/github.js';
 import { authorize, channels, disconnect, read } from '../api/provider.js';
+import { here, useBack } from '../back.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
@@ -27,6 +30,11 @@ export function Integrations() {
     const rooms = useRead(signed && joined ? () => channels(t) : null, { channels: [], next: '' }, [t, signed, joined]);
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
+    useBack(t, signed, setNote, () => {
+        mine.reload();
+        installed.reload();
+        slack.reload();
+    });
     if (!signed) {
         return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Integrations" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s integrations." })] }));
     }
@@ -67,7 +75,7 @@ export function Integrations() {
                                             ? 'This deployment cannot connect GitHub yet.'
                                             : me.connected
                                                 ? `Connected as @${me.login}`
-                                                : 'Not connected', trailing: me?.configured ? (me.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => unlinkGithub(t), 'Your GitHub is disconnected', mine.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => connect(t)), children: "Connect" }))) : null }), installed.error ? (_jsx(Row, { title: "App installations", detail: installed.error.message })) : (installed.value.map((i) => (_jsx(Row, { leading: _jsx(Github, { size: 16 }), title: i.login, detail: [i.type, i.grant === 'all' ? 'every repository' : i.grant === 'selected' ? 'selected repositories' : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: i.connected ? '$ink' : '$soft', children: i.connected ? 'Installed' : 'Removed on GitHub' }) }, i.login)))), !installed.error && !installed.loading && installed.value.length === 0 ? (_jsx(Row, { title: "No GitHub accounts installed", detail: "Install the App on a GitHub account to bring its repositories here." })) : null] }), host.admin ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'github')), children: "Install on a GitHub account" }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin installs the App on a GitHub account." }))] }), _jsxs(Group, { title: "Slack", detail: "Talk to Hanzo from your workspace\u2019s channels.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Slack, { size: 16 }), title: s?.connected && s.account ? s.account : 'Slack', detail: slack.error
+                                                : 'Not connected', trailing: me?.configured ? (me.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => unlinkGithub(t), 'Your GitHub is disconnected', mine.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => connect(t, here())), children: "Connect" }))) : null }), installed.error ? (_jsx(Row, { title: "App installations", detail: installed.error.message })) : (installed.value.map((i) => (_jsx(Row, { leading: _jsx(Github, { size: 16 }), title: i.login, detail: [i.type, i.grant === 'all' ? 'every repository' : i.grant === 'selected' ? 'selected repositories' : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: i.connected ? '$ink' : '$soft', children: i.connected ? 'Installed' : 'Removed on GitHub' }) }, i.login)))), !installed.error && !installed.loading && installed.value.length === 0 ? (_jsx(Row, { title: "No GitHub accounts installed", detail: "Install the App on a GitHub account to bring its repositories here." })) : null] }), host.admin ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'github', here())), children: "Install on a GitHub account" }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin installs the App on a GitHub account." }))] }), _jsxs(Group, { title: "Slack", detail: "Talk to Hanzo from your workspace\u2019s channels.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Slack, { size: 16 }), title: s?.connected && s.account ? s.account : 'Slack', detail: slack.error
                                     ? slack.error.message
                                     : !s
                                         ? 'Reading…'
@@ -75,7 +83,7 @@ export function Integrations() {
                                             ? `Connected${s.since ? ` since ${day(s.since)}` : ''}`
                                             : s.available
                                                 ? 'Not connected'
-                                                : s.note || 'This deployment cannot connect Slack yet.', trailing: host.admin && s && (s.connected || s.available) ? (s.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(t, 'slack'), 'Slack is disconnected', slack.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'slack')), children: "Connect" }))) : null }), joined && rooms.error ? _jsx(Row, { title: "Channels", detail: rooms.error.message }) : null, joined
+                                                : s.note || 'This deployment cannot connect Slack yet.', trailing: host.admin && s && (s.connected || s.available) ? (s.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(t, 'slack'), 'Slack is disconnected', slack.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'slack', here())), children: "Connect" }))) : null }), joined && rooms.error ? _jsx(Row, { title: "Channels", detail: rooms.error.message }) : null, joined
                                 ? rooms.value.channels.map((c) => (_jsx(Row, { leading: c.private ? _jsx(Lock, { size: 14 }) : _jsx(Hash, { size: 14 }), title: c.name || c.id, trailing: _jsx(SizableText, { size: "$1", color: c.member ? '$ink' : '$soft', children: c.member ? 'Joined' : 'Not joined' }) }, c.id)))
                                 : null] }), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin connects the Slack workspace." })) : null] }), _jsx(Note, { children: note })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.33",
+  "version": "0.2.35",
   "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 component, mounted by the Hanzo app at hanzo.ai.",