@hanzo/build 0.2.3 → 0.2.5

package/lib/builder.js

@@ -2,11 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The builder: the rail, and whichever pane the address names.
  *
- *   /            New — the empty state, a composer over the repo it works on
+ *   /            New — the empty state, a composer over the codebase it works on
  *   /sess_…      one run, live
+ *   /-/automations repeating work
+   /-/codebases the forge's repositories
+ *   /-/sync      bring granted repositories onto the forge
+ *   /-/projects  the forge's boards
+ *   /-/issues    the forge's issues
  *   /-/artifacts what this org has built
  *   /-/templates the public starters
- *   /<slug>      a project's workspace, in this same window
+ *   /<slug>      a deployed project's workspace, in this same window
  *
  * The rail is the sessions rail every Hanzo surface shares: New, the builder's
  * places, the org's coding runs newest first with a live status dot, and the
@@ -20,12 +25,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * left column, never two.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Blocks, BookOpen, Cpu, LayoutTemplate, Menu, Puzzle } from '@hanzogui/lucide-icons-2';
+import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, Menu, Puzzle, Workflow } from '@hanzogui/lucide-icons-2';
 import { Button } from '@hanzo/ui';
 import { SessionRail } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzo/ui/product';
 import { useMemo, useState } from 'react';
+import { pinBoard } from './choice.js';
 import { useKept, useRecents } from './data.js';
+import { Forge } from './forge.js';
 import { HostProvider, useHost, useTarget } from './host.js';
 import { Landing } from './landing.js';
 import { Project } from './project.js';
@@ -56,6 +63,19 @@ function Shell() {
     }, [recents.value, order]);
     const screen = r.kind === 'screen' ? r.screen : '';
     const links = [
+        { id: 'automations', label: 'Automations', icon: _jsx(Workflow, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' },
+        { id: 'codebases', label: 'Codebase', icon: _jsx(FolderGit2, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), active: screen === 'codebases' },
+        { id: 'projects', label: 'Projects', icon: _jsx(Kanban, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'projects' })), active: screen === 'projects' },
+        {
+            id: 'issues',
+            label: 'Issues',
+            icon: _jsx(CircleDot, { size: 16 }),
+            onPress: () => {
+                pinBoard(host.org, '');
+                go(path({ kind: 'screen', screen: 'issues' }));
+            },
+            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) },
     ];
@@ -64,9 +84,9 @@ function Shell() {
         { id: 'machines', label: 'Machines', icon: _jsx(Cpu, { size: 16 }), onPress: () => host.open(`${host.links.home.replace(/\/+$/, '')}/platform/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: [_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(HanzoMark, { size: 18 }), open: drawer, onOpenChange: setDrawer, label: "Runs" }), _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); } })] }));
+    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); } })] }));
 }
 /** Whichever pane the address names, beside a rail — the builder's or the host's. */
 function Pane({ onStarted }) {
@@ -74,13 +94,25 @@ function Pane({ onStarted }) {
     const r = route(host.path);
     if (r.kind === 'run')
         return _jsx(Run, { id: r.id }, r.id);
-    if (r.kind === 'screen')
-        return r.screen === 'artifacts' ? _jsx(Artifacts, {}) : _jsx(Templates, {});
+    if (r.kind === 'screen') {
+        if (r.screen === 'artifacts')
+            return _jsx(Artifacts, {});
+        if (r.screen === 'templates')
+            return _jsx(Templates, {});
+        return _jsx(Forge, { screen: r.screen }, r.screen);
+    }
     return (_jsx(Landing, { onStarted: (id) => {
             onStarted?.(id);
             host.go(id);
         } }));
 }
+/** The Hanzo mark on a personal account. An organization shows its own initial. */
+function Brand({ org }) {
+    if (!org || org === 'hanzo')
+        return _jsx(HanzoMark, { size: 18 });
+    const letter = org.trim().charAt(0).toUpperCase() || 'H';
+    return (_jsx(XStack, { width: 18, height: 18, rounded: "$1", items: "center", justify: "center", bg: "$raised", "aria-hidden": true, children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: letter }) }));
+}
 function Screens({ rail }) {
     const host = useHost();
     const r = route(host.path);

package/lib/choice.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The choice New starts from, kept in this browser so a codebase or an issue
+ * opened from its own screen is what the composer is holding when it mounts.
+ *
+ * The key is the one `useKept` in New writes. A merge keeps the mode, the
+ * model and the machine; it only replaces the fields the caller names.
+ */
+import { type Codebase, type ForgeRepo } from './api/codebases.ts';
+export interface Choice {
+    repo: ForgeRepo | null;
+    branch: string;
+    place: string;
+    mode: string;
+    model: string;
+    effort: string;
+    /** A draft handed over by another screen. New copies it once and clears it. */
+    ask: string;
+}
+export declare const boardKey: (org: string | null) => string;
+/** Point New at a forge codebase, and optionally a first draft. */
+export declare function pinCodebase(org: string | null, c: Codebase, ask?: string): void;
+/** Which board Issues is showing. '' is every board. */
+export declare function pinBoard(org: string | null, key: string): void;
+export declare const isForge: (repo: {
+    forge?: boolean;
+    name?: string;
+} | null) => repo is ForgeRepo;
+/** A repository queued onto the forge and not reported landed yet. */
+export interface Pending {
+    fullName: string;
+    name: string;
+}
+export declare function readPending(org: string | null): Pending[];
+export declare function writePending(org: string | null, rows: Pending[]): void;

package/lib/choice.js

@@ -0,0 +1,68 @@
+/**
+ * The choice New starts from, kept in this browser so a codebase or an issue
+ * opened from its own screen is what the composer is holding when it mounts.
+ *
+ * The key is the one `useKept` in New writes. A merge keeps the mode, the
+ * model and the machine; it only replaces the fields the caller names.
+ */
+import { asRepo } from './api/codebases.js';
+const KEY = (org) => `hanzo.build.new.${org ?? 'none'}`;
+export const boardKey = (org) => `hanzo.build.board.${org ?? 'none'}`;
+function read(org) {
+    try {
+        const raw = window.localStorage.getItem(KEY(org));
+        const v = raw ? JSON.parse(raw) : null;
+        return v && typeof v === 'object' ? v : {};
+    }
+    catch {
+        return {};
+    }
+}
+function write(org, value) {
+    try {
+        window.localStorage.setItem(KEY(org), JSON.stringify(value));
+    }
+    catch {
+        /* the next New starts empty */
+    }
+}
+/** Point New at a forge codebase, and optionally a first draft. */
+export function pinCodebase(org, c, ask = '') {
+    const repo = asRepo(c);
+    write(org, { ...read(org), repo, branch: repo.default_branch || 'main', ask });
+}
+/** Which board Issues is showing. '' is every board. */
+export function pinBoard(org, key) {
+    try {
+        window.localStorage.setItem(boardKey(org), JSON.stringify(key));
+    }
+    catch {
+        /* Issues then shows every board */
+    }
+    window.dispatchEvent(new Event('hanzo-board'));
+}
+export const isForge = (repo) => Boolean(repo && repo.forge === true && repo.name);
+const syncingKey = (org) => `hanzo.build.sync.${org ?? 'none'}`;
+export function readPending(org) {
+    try {
+        const raw = window.sessionStorage.getItem(syncingKey(org));
+        const v = raw ? JSON.parse(raw) : [];
+        if (!Array.isArray(v))
+            return [];
+        return v.filter((p) => Boolean(p) && typeof p === 'object' && typeof p.fullName === 'string' && p.fullName !== '' && typeof p.name === 'string' && p.name !== '');
+    }
+    catch {
+        return [];
+    }
+}
+export function writePending(org, rows) {
+    try {
+        if (rows.length === 0)
+            window.sessionStorage.removeItem(syncingKey(org));
+        else
+            window.sessionStorage.setItem(syncingKey(org), JSON.stringify(rows));
+    }
+    catch {
+        /* the table then omits the in-flight rows */
+    }
+}

package/lib/data.js

@@ -172,6 +172,7 @@ export function useRun(t, id) {
             title: pushed.title || base.title,
             branch: pushed.branch || base.branch,
             pr: pushed.pr || base.pr,
+            mode: pushed.mode || base.mode,
         };
     }, [read, frame]);
     return { detail, record, events, status: record?.status ?? '', refused };

package/lib/desk.d.ts

@@ -0,0 +1,18 @@
+import type { Event } from './api/sessions.ts';
+export declare function Desk({ id, repo, branch, base, environment, mode, pr, events, live, refused, onRetry, onHide, }: {
+    id: string;
+    repo: string;
+    branch: string;
+    base: string;
+    environment: string;
+    mode: string;
+    pr: {
+        href: string;
+        label: string;
+    };
+    events: Event[];
+    live: boolean;
+    refused: string;
+    onRetry: () => void;
+    onHide?: () => void;
+}): import("react").JSX.Element;

package/lib/desk.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The pane beside a run's transcript: the machine it runs on, the branch it
+ * writes, the commands it ran, and the files on that branch.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Copy, File, Folder, MoreHorizontal, PanelRightClose } from '@hanzogui/lucide-icons-2';
+import { Button, DropdownMenu } from '@hanzo/ui';
+import { useState } from 'react';
+import { blob, tree } from './api/git.js';
+import { shell } from './api/turn.js';
+import { useRead } from './data.js';
+import { useTarget } from './host.js';
+import { Out } from './out.js';
+export function Desk({ id, repo, branch, base, environment, mode, pr, events, live, refused, onRetry, onHide, }) {
+    const [tab, setTab] = useState('terminal');
+    const [copied, setCopied] = useState(false);
+    const name = repo.split('/').filter(Boolean).pop() || repo;
+    const ref = branch || base || 'main';
+    const lines = shell(events);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(id);
+            setCopied(true);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    return (_jsxs(YStack, { flex: 1, minW: 0, minH: 0, borderLeftWidth: 1, borderColor: "$borderColor", display: "none", $md: { display: 'flex' }, children: [_jsxs(XStack, { px: "$2", pt: "$2", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [_jsx(TabButton, { id: "environment", tab: tab, onPick: setTab, children: "Environment" }), _jsx(TabButton, { id: "git", tab: tab, onPick: setTab, children: "Git" }), _jsx(TabButton, { id: "terminal", tab: tab, onPick: setTab, children: "Terminal" }), _jsx(TabButton, { id: "files", tab: tab, onPick: setTab, children: "Files" }), _jsx(TabButton, { id: "subscriptions", tab: tab, onPick: setTab, children: "Subscriptions" }), _jsx(XStack, { flex: 1 }), onHide ? (_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 }) })) : null, _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: [
+                            { key: 'copy', label: copied ? 'Copied' : 'Copy run id', icon: _jsx(Copy, { size: 16 }), description: id, onSelect: () => void copy() },
+                            { key: 'details', label: 'Details', onSelect: () => setTab('environment') },
+                        ] })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: tab === 'terminal' ? 'hidden' : 'scroll', p: tab === 'terminal' ? 0 : undefined, px: tab === 'terminal' ? 0 : '$3', py: tab === 'terminal' ? 0 : '$3', children: [tab === 'environment' ? (_jsxs(YStack, { gap: "$2", children: [_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: "Mode", value: mode || 'build' })] })) : null, tab === 'git' ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Fact, { label: "Writing", value: branch || '—' }), _jsx(Fact, { label: "From", value: base || '—' }), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Pull request ", pr.label] }) })) : (_jsx(Fact, { label: "Pull request", value: "None yet" }))] })) : null, tab === 'terminal' ? (_jsx(Terminal, { lines: lines, live: live, refused: refused, onRetry: onRetry })) : null, tab === 'files' ? _jsx(Files, { repo: name, refName: ref }) : null, tab === 'subscriptions' ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", px: "$6", children: _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center', maxWidth: 320 }, children: "Ask an agent to subscribe to a Slack channel or thread, a pull request, or a timer." }) })) : null] })] }));
+}
+function TabButton({ id, tab, onPick, children }) {
+    const on = tab === id;
+    return (_jsx(XStack, { render: "button", "aria-label": children, onPress: () => onPick(id), px: "$2", py: "$2", borderBottomWidth: 2, borderColor: on ? '$ink' : 'transparent', children: _jsx(SizableText, { size: "$2", color: on ? '$ink' : '$soft', children: children }) }));
+}
+function Fact({ label, value }) {
+    return (_jsxs(XStack, { gap: "$3", items: "baseline", children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 96, children: label }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 2, children: value })] }));
+}
+const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)', whiteSpace: 'pre' };
+function Terminal({ lines, live, refused, onRetry, }) {
+    const prompt = 'workspace';
+    const idle = lines.length === 0 && !live;
+    return (_jsxs(YStack, { flex: 1, minH: 0, bg: "$background", children: [_jsx(XStack, { px: "$3", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Terminal 1" }) }), _jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$3", gap: "$1", children: [idle ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", py: "$8", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: refused || 'This run finished without writing a command.' }), refused ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: "Retry" })) : null] })) : (lines.map((line, i) => line.role === 'cmd' ? (_jsxs(XStack, { gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(SizableText, { flex: 1, size: "$1", color: "$ink", style: mono, children: line.text })] }, i)) : (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: line.text }, i)))), live ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(YStack, { width: 7, height: 14, bg: "$ink" })] })) : null] }), _jsx(XStack, { px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Commands appear here as the run writes them." }) })] }));
+}
+function Files({ repo, refName }) {
+    const t = useTarget();
+    const [dir, setDir] = useState('');
+    const [file, setFile] = useState('');
+    const list = useRead(repo ? () => tree(t, repo, refName, dir) : null, [], [t, repo, refName, dir]);
+    const body = useRead(file ? () => blob(t, repo, refName, file) : null, null, [t, repo, refName, file]);
+    const parent = dir.includes('/') ? dir.slice(0, dir.lastIndexOf('/')) : '';
+    return (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", children: [dir ? (_jsx(XStack, { render: "button", "aria-label": "Up one directory", onPress: () => { setDir(parent); setFile(''); }, px: "$1", py: "$1", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Up" }) })) : null, _jsxs(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [repo, refName ? `@${refName}` : '', dir ? `/${dir}` : ''] })] }), list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading the branch\u2026" })) : !repo ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "This run has no repository yet." })) : list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "This directory is empty." })) : (list.value.map((e) => (_jsxs(XStack, { render: "button", "aria-label": e.dir ? `Open ${e.name}` : `Read ${e.name}`, onPress: () => (e.dir ? (setDir(e.path), setFile('')) : setFile(e.path)), items: "center", gap: "$2", py: "$1", hoverStyle: { bg: '$hover' }, children: [e.dir ? _jsx(Folder, { size: 14 }) : _jsx(File, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: e.name })] }, e.path)))), file && body.value ? (_jsxs(YStack, { gap: "$1", pt: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: file }), _jsx(SizableText, { size: "$1", color: "$ink", style: { whiteSpace: 'pre-wrap', fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: body.value.binary ? 'Binary file' : body.value.truncated ? 'Too large to show' : body.value.text || 'Empty file' })] })) : null, file && body.error ? (_jsx(SizableText, { size: "$1", color: "$soft", children: body.error.message })) : null] }));
+}

package/lib/forge.d.ts

@@ -0,0 +1,4 @@
+import type { Screen } from './route.ts';
+export declare function Forge({ screen }: {
+    screen: Exclude<Screen, 'artifacts' | 'templates'>;
+}): import("react").JSX.Element;

package/lib/forge.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Codebases, projects and issues, read from the forge and opened in this window.
+ *
+ * A codebase is a repository. Choosing one is choosing what the next run works
+ * on. A project is a board of issues on one of those repositories. Choosing an
+ * issue opens New with that codebase and the issue as the ask.
+ */
+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 { add, arm, flows } from './api/auto.js';
+import { codebases, create } from './api/codebases.js';
+import { boards, issues } from './api/work.js';
+import { boardKey, pinBoard, pinCodebase, readPending, writePending } from './choice.js';
+import { useKept, useRead } from './data.js';
+import { useHost, useTarget } from './host.js';
+import { path } from './route.js';
+import { Sync } from './sync.js';
+import { grants } from './api/github.js';
+function Head({ title, says }) {
+    return (_jsxs(YStack, { gap: "$1", pb: "$4", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", children: says })] }));
+}
+function Row({ label, onPress, children }) {
+    return (_jsx(XStack, { render: "button", onPress: onPress, "aria-label": label, items: "center", gap: "$3", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: { borderColor: '$edge', bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: children }));
+}
+function Note({ children }) {
+    return (_jsx(SizableText, { size: "$2", color: "$soft", children: children }));
+}
+const STATUS = {
+    backlog: 'Backlog',
+    todo: 'To do',
+    in_progress: 'In progress',
+    done: 'Done',
+    canceled: 'Canceled',
+};
+export function Forge({ screen }) {
+    if (screen === 'automations')
+        return _jsx(Automations, {});
+    if (screen === 'sync')
+        return _jsx(Sync, {});
+    if (screen === 'codebases')
+        return _jsx(Codebases, {});
+    if (screen === 'projects')
+        return _jsx(Projects, {});
+    return _jsx(Issues, {});
+}
+function Automations() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const [q, setQ] = useState('');
+    const [making, setMaking] = useState(false);
+    const [tick, setTick] = useState(0);
+    const [problem, setProblem] = useState('');
+    const list = useRead(signed ? () => flows(t) : null, [], [t, signed, tick]);
+    const needle = q.trim().toLowerCase();
+    const shown = list.value.filter((a) => !needle || a.name.toLowerCase().includes(needle));
+    const flip = async (a) => {
+        setProblem('');
+        try {
+            await arm(t, a.id, a.status !== 'ENABLED');
+            setTick((n) => n + 1);
+        }
+        catch (e) {
+            setProblem(e instanceof Error ? e.message : 'Could not change that automation');
+        }
+    };
+    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: "Automations" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Repeating work for this organization. A new one starts off, so you can name it before it runs." })] }), _jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New automation"] })] }), _jsx(XStack, { justify: "flex-end", children: _jsx(YStack, { width: 240, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search\u2026", "aria-label": "Search automations", disabled: !signed }) }) }), problem ? _jsx(Note, { children: problem }) : null, list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Empty, { says: "Sign in to see this organization's automations." })) : list.loading && list.value.length === 0 ? (_jsx(Empty, { says: "Reading automations\u2026" })) : shown.length === 0 ? (_jsx(Empty, { says: list.value.length === 0 ? 'No automations yet.' : 'Nothing matches.', children: list.value.length === 0 ? (_jsx(Button, { size: "sm", onPress: () => setMaking(true), children: "New automation" })) : null })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", children: [_jsx(SizableText, { flex: 1, size: "$1", color: "$soft", children: "Name" }), _jsx(SizableText, { size: "$1", color: "$soft", width: 80, style: { textAlign: 'right' }, children: "Status" }), _jsx(SizableText, { size: "$1", color: "$soft", width: 120, style: { textAlign: 'right' }, children: "Updated" })] }), shown.map((a) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Workflow, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: a.name }), _jsx(XStack, { render: "button", "aria-label": a.status === 'ENABLED' ? `Turn off ${a.name}` : `Turn on ${a.name}`, onPress: () => void flip(a), width: 80, justify: "flex-end", children: _jsx(SizableText, { size: "$1", color: "$ink", children: a.status === 'ENABLED' ? 'On' : 'Off' }) }), _jsx(SizableText, { size: "$1", color: "$soft", width: 120, style: { textAlign: 'right' }, children: a.updated ? when(new Date(a.updated).toISOString()) : '—' })] }, a.id)))] }))] }), _jsx(NewAutomation, { open: making, onOpenChange: setMaking, onCreate: async (name) => {
+                    await add(t, name);
+                    setMaking(false);
+                    setTick((n) => n + 1);
+                } })] }));
+}
+function Empty({ says, children }) {
+    return (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", px: "$4", py: "$8", gap: "$3", items: "center", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: says }), children] }));
+}
+function NewAutomation({ open, onOpenChange, onCreate, }) {
+    const [name, setName] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const submit = async () => {
+        setBusy(true);
+        setError('');
+        try {
+            await onCreate(name);
+            setName('');
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'Could not create that automation');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "New automation" }), _jsxs(YStack, { gap: "$3", pt: "$3", children: [_jsx(Input, { value: name, onChangeText: setName, placeholder: "Name", "aria-label": "Automation name" }), error ? _jsx(Note, { children: error }) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || !name.trim(), onPress: () => void submit(), children: busy ? 'Creating…' : 'Create' })] })] })] }) }));
+}
+const PAGE = 25;
+function Codebases() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const [q, setQ] = useState('');
+    const [making, setMaking] = useState(false);
+    const [sort, setSort] = useState('name');
+    const [page, setPage] = useState(0);
+    const [landed, setLanded] = useState(0);
+    useEffect(() => {
+        setPage(0);
+    }, [q, sort]);
+    const list = useRead(signed ? () => codebases(t) : null, [], [t, signed, making, landed]);
+    const needle = q.trim().toLowerCase();
+    const pending = readPending(host.org);
+    const pendingKey = pending.map((p) => p.fullName).join('\n');
+    const syncing = new Set(pending.map((p) => p.name));
+    useEffect(() => {
+        const waiting = readPending(host.org);
+        if (!signed || waiting.length === 0)
+            return;
+        let stop = false;
+        grants(t)
+            .then((g) => {
+            if (stop)
+                return;
+            const done = new Set(g.repos.filter((r) => r.imported).map((r) => r.fullName));
+            const left = waiting.filter((p) => !done.has(p.fullName));
+            if (left.length !== waiting.length) {
+                writePending(host.org, left);
+                setLanded((n) => n + 1);
+            }
+        })
+            .catch(() => { });
+        return () => {
+            stop = true;
+        };
+    }, [signed, t, host.org, pendingKey]);
+    const shown = [
+        ...list.value,
+        ...pending
+            .filter((p) => !list.value.some((c) => c.name === p.name))
+            .map((p) => ({
+            org: host.org ?? '',
+            name: p.name,
+            description: '',
+            branch: 'main',
+            public: false,
+            clone: '',
+            updated: '',
+            branches: ['main'],
+        })),
+    ]
+        .filter((c) => !needle || `${c.org}/${c.name} ${c.description}`.toLowerCase().includes(needle))
+        .slice()
+        .sort((a, b) => {
+        if (sort === 'updated') {
+            const d = Date.parse(b.updated) - Date.parse(a.updated);
+            if (Number.isFinite(d) && d !== 0)
+                return d;
+        }
+        return a.name.localeCompare(b.name);
+    });
+    const pages = Math.max(1, Math.ceil(shown.length / PAGE));
+    const safePage = Math.min(page, pages - 1);
+    const slice = shown.slice(safePage * PAGE, safePage * PAGE + PAGE);
+    const from = shown.length === 0 ? 0 : safePage * PAGE + 1;
+    const to = safePage * PAGE + slice.length;
+    const open = (c) => {
+        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) => {
+                    const row = await create(t, name, description);
+                    pinCodebase(host.org, row);
+                    setMaking(false);
+                    host.go('');
+                } })] }));
+}
+function NewRepo({ open, onOpenChange, onCreate, }) {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const submit = async () => {
+        setBusy(true);
+        setError('');
+        try {
+            await onCreate(name, description);
+            setName('');
+            setDescription('');
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'Could not create that repository');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "New repository" }), _jsxs(YStack, { gap: "$3", pt: "$3", children: [_jsx(Input, { value: name, onChangeText: setName, placeholder: "Name", "aria-label": "Repository name" }), _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "Description", "aria-label": "Description" }), error ? _jsx(Note, { children: error }) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || !name.trim(), onPress: () => void submit(), children: busy ? 'Creating…' : 'Create' })] })] })] }) }));
+}
+function when(iso) {
+    const t = Date.parse(iso);
+    if (!Number.isFinite(t))
+        return '—';
+    const minutes = Math.round((Date.now() - t) / 60000);
+    if (minutes < 1)
+        return 'just now';
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.round(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.round(hours / 24);
+    if (days < 30)
+        return `${days}d ago`;
+    return new Date(t).toLocaleDateString();
+}
+function Projects() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(signed ? () => boards(t) : null, [], [t, signed]);
+    const open = (b) => {
+        pinBoard(host.org, b.key);
+        host.go(path({ kind: 'screen', screen: 'issues' }));
+    };
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 720, gap: "$3", children: [_jsx(Head, { title: "Projects", says: "Boards on the forge. A board is a repository that has work on it." }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's boards." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : list.value.length === 0 ? (_jsx(Note, { children: "No boards yet. A repository shows up here once it has an issue." })) : (_jsx(YStack, { gap: "$2", children: list.value.map((b) => (_jsx(Row, { label: `Open ${b.name}`, onPress: () => open(b), children: _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: b.name }), b.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: b.description })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: b.key }))] }) }, b.key))) }))] }) }));
+}
+function Issues() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const [board, setBoard] = useKept(boardKey(host.org), '');
+    const list = useRead(signed ? () => issues(t, board) : null, [], [t, signed, board]);
+    useEffect(() => {
+        const on = () => {
+            try {
+                const raw = window.localStorage.getItem(boardKey(host.org));
+                const next = raw === null ? '' : JSON.parse(raw);
+                setBoard(typeof next === 'string' ? next : '');
+            }
+            catch {
+                setBoard('');
+            }
+        };
+        window.addEventListener('hanzo-board', on);
+        return () => window.removeEventListener('hanzo-board', on);
+    }, [host.org, setBoard]);
+    const open = (w) => {
+        const name = w.repo || w.project;
+        if (name) {
+            pinCodebase(host.org, {
+                org: host.org ?? '',
+                name,
+                description: '',
+                branch: 'main',
+                public: false,
+                clone: '',
+                updated: '',
+                branches: ['main'],
+            }, `${w.identifier ? `${w.identifier} ` : ''}${w.title}`.trim());
+        }
+        host.go('');
+    };
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 720, gap: "$3", children: [_jsx(Head, { title: "Issues", says: board ? `Open work on ${board}. Choosing one starts the next run on that codebase.` : 'Open work across every board. Choosing one starts the next run on that codebase.' }), board ? (_jsx(XStack, { render: "button", onPress: () => setBoard(''), "aria-label": "Show every board", self: "flex-start", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "All boards" }) })) : null, list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's issues." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : list.value.length === 0 ? (_jsx(Note, { children: "Nothing open." })) : (_jsx(YStack, { gap: "$2", children: list.value.map((w) => (_jsxs(Row, { label: `Build ${w.identifier || w.title}`, onPress: () => open(w), children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 88, numberOfLines: 1, children: w.identifier || w.kind }), _jsx(SizableText, { size: "$3", color: "$ink", flex: 1, minW: 0, numberOfLines: 1, children: w.title }), _jsx(SizableText, { size: "$1", color: "$soft", children: STATUS[w.status] ?? w.status })] }, w.id))) }))] }) }));
+}

package/lib/host.d.ts

@@ -26,7 +26,7 @@ export interface Host {
     person: Person | null;
     /** Whether the person administers `org`: an admin publishes to main, anyone else opens a review. */
     admin: boolean;
-    /** The address under the mount: '' | a session id | a project slug | '-/<screen>'. */
+    /** The address under the mount: '' | a session id | a slug | '-/codebases' | '-/projects' | '-/issues' | '-/artifacts' | '-/templates'. */
     path: string;
     /** Move under the mount. */
     go: (path: string, how?: {