@hanzo/build 0.2.50 → 0.2.52

package/lib/forge.js

@@ -1,33 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Codebases, projects and issues, read from the forge and opened in this window.
+ * 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.
+ * A project is a repository, linked from GitHub or started from a template;
+ * choosing one opens its workspace, where every run works on it. Issues are
+ * the forge's, filed under a board or a repository, and a repository's GitHub
+ * issues sync onto it. Choosing an issue opens New with that repository and
+ * the issue as the ask.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ChevronDown, GitBranch, Plus, Settings } from '@hanzogui/lucide-icons-2';
-import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
+import { ArrowRight, Check, ChevronDown, CircleCheck, CircleDot, CircleSlash, ExternalLink, FolderGit2, GitBranch, Github, GitPullRequest, LayoutTemplate, RefreshCw, } from '@hanzogui/lucide-icons-2';
+import { Button, DropdownMenu, Input } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
 import { ago } from './ago.js';
-import { codebases, create } from './api/codebases.js';
+import { codebases } from './api/codebases.js';
 import { Automations } from './automations.js';
-import { environments } from './api/environment.js';
-import { boards, issues } from './api/work.js';
-import { boardKey, pinBoard, pinCodebase, readPending, writePending } from './choice.js';
+import { boards, closed, inProject, issues, projectOf } from './api/work.js';
+import { boardKey, pinCodebase, readPending, writePending } from './choice.js';
 import { useKept, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
 import { path } from './route.js';
 import { Customize } from './customize/index.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 }));
-}
+import { connect, connection, grants, syncIssues } from './api/github.js';
+import { here, useBack } from './back.js';
+import { Out } from './out.js';
 function Note({ children }) {
     return (_jsx(SizableText, { size: "$2", color: "$soft", children: children }));
 }
@@ -46,34 +43,34 @@ export function Forge({ screen }) {
     // The fleet's native servers are Connectors → Discover now; the old address lands there.
     if (screen === 'mcp')
         return _jsx(Customize, { tab: "connectors", view: "discover" });
-    if (screen === 'codebases')
-        return _jsx(Codebases, {});
     if (screen === 'projects')
         return _jsx(Projects, {});
     return _jsx(Issues, {});
 }
 const PAGE = 25;
-function Codebases() {
+/**
+ * The organization's projects: its repositories on the forge, which arrive one
+ * of two ways — linked from GitHub, or started from a template. A project is a
+ * repository; opening one opens its workspace at `<org>/<repo>`, and every run
+ * there works on that repository. There is no project without one.
+ */
+function Projects() {
     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 [filter, setFilter] = useState('all');
+    const [sort, setSort] = useState('updated');
     const [page, setPage] = useState(0);
     const [landed, setLanded] = useState(0);
     useEffect(() => {
         setPage(0);
-    }, [q, sort, filter]);
-    const list = useRead(signed ? () => codebases(t) : null, [], [t, signed, making, landed]);
-    // Which codebases have an environment. A codebase absent here has none.
-    const envs = useRead(signed ? () => environments(t) : null, [], [t, signed]);
-    const envOf = new Map(envs.value.map((e) => [e.repo, e.state]));
+    }, [q, sort]);
+    const list = useRead(signed ? () => codebases(t) : null, [], [t, signed, 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));
+    // A repository asked for from GitHub is listed as syncing until the forge holds it.
     useEffect(() => {
         const waiting = readPending(host.org);
         if (!signed || waiting.length === 0)
@@ -110,19 +107,12 @@ function Codebases() {
             branches: ['main'],
         })),
     ]
-        .filter((c) => {
-        if (filter === 'ready')
-            return envOf.get(c.name) === 'ready';
-        if (filter === 'syncing')
-            return syncing.has(c.name);
-        return true;
-    })
         .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)
+            const d = (Date.parse(b.updated) || 0) - (Date.parse(a.updated) || 0);
+            if (d !== 0)
                 return d;
         }
         return a.name.localeCompare(b.name);
@@ -132,69 +122,158 @@ function Codebases() {
     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", flex: 1, minW: 0, 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", shrink: 0, items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: '$hover' }, onPress: () => host.go('-/settings/environments'), children: [_jsx(Settings, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Settings" })] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Filter repositories", onPress: () => setFilter((f) => (f === 'all' ? 'ready' : f === 'ready' ? 'syncing' : 'all')), px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", shrink: 0, hoverStyle: { bg: '$hover' }, "$max-md": { display: 'none' }, children: _jsx(SizableText, { size: "$2", color: "$ink", children: filter === 'ready' ? 'Ready env' : filter === 'syncing' ? 'Syncing' : 'All repos' }) }), _jsx(YStack, { flex: 1, "$max-md": { display: 'none' } }), _jsx(YStack, { width: 240, minW: 0, shrink: 1, "$max-md": { width: 'auto', flex: 1 }, 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 ? (_jsxs(YStack, { gap: "$3", py: "$2", children: [_jsx(Note, { children: list.value.length === 0 ? 'No repositories yet.' : 'Nothing matches.' }), list.value.length === 0 ? (_jsxs(XStack, { gap: "$2", pt: "$1", children: [_jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "Create repository"] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync from GitHub" }), _jsx(Button, { size: "sm", variant: "ghost", onPress: () => host.go('-/templates'), children: "Start from template" })] })) : null] })) : (_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] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: "Environment" }), _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: 96, "$max-md": { display: 'none' }, children: envOf.get(c.name) === 'ready' ? 'Ready' : envOf.get(c.name) === 'proposed' ? 'To review' : '—' }), _jsx(SizableText, { size: "$1", color: "$soft", width: 140, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : ago(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('');
-                } })] }));
+    const none = !list.loading && !list.error && list.value.length === 0 && pending.length === 0;
+    const open = (c) => host.go(path({ kind: 'repo', org: c.org || host.org || '', name: c.name }));
+    const link = () => host.go(path({ kind: 'screen', screen: 'sync' }));
+    const template = () => host.go(path({ kind: 'screen', screen: 'templates' }));
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", flexWrap: "wrap", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 240, children: [_jsx(SizableText, { render: "h1", size: "$6", fontWeight: "500", color: "$ink", children: "Projects" }), _jsx(SizableText, { size: "$2", color: "$soft", children: `${host.org ? `${host.org}’s` : 'This organization’s'} repositories on the forge. Open one to work on it.` })] }), _jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsxs(Button, { size: "sm", variant: "outline", onPress: template, children: [_jsx(LayoutTemplate, { size: 14 }), "Create from template"] }), _jsxs(Button, { size: "sm", variant: "primary", onPress: link, children: [_jsx(Github, { size: 14 }), "Link a GitHub repo"] })] })] }), signed ? _jsx(GitHubLink, { onSync: link }) : null, list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's projects." })) : list.loading && list.value.length === 0 && pending.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : none ? (_jsxs(YStack, { gap: "$3", py: "$2", children: [_jsx(Note, { children: "No projects yet. A project is a repository: link one from GitHub, or start one from a template." }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", children: [_jsx(Choice, { label: "Link a GitHub repo", icon: _jsx(Github, { size: 20 }), says: "Mirror repositories you already have. They stay in step with GitHub, and their issues can come too.", onPress: link }), _jsx(Choice, { label: "Create from template", icon: _jsx(LayoutTemplate, { size: 20 }), says: "Start from a finished product \u2014 a site, an app, a store \u2014 and make it yours.", onPress: template })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(YStack, { flex: 1, "$max-md": { display: 'none' } }), _jsx(YStack, { width: 320, minW: 0, shrink: 1, "$max-md": { width: 'auto', flex: 1 }, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find a project\u2026", "aria-label": "Find a project" }) })] }), shown.length === 0 ? (_jsx(Note, { children: "Nothing matches." })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", bg: "$panel", 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] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 120, "$max-md": { display: 'none' }, children: "Branch" }), _jsxs(XStack, { render: "button", "aria-label": "Sort by last updated", items: "center", justify: "flex-end", gap: "$1", width: 120, onPress: () => setSort('updated'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Updated" }), sort === 'updated' ? _jsx(ChevronDown, { size: 12 }) : null] })] }), slice.map((c) => (_jsxs(XStack, { render: "button", "aria-label": `Open ${c.org ? `${c.org}/` : ''}${c.name}`, onPress: () => open(c), style: { textAlign: 'left' }, 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(FolderGit2, { size: 15, color: "$soft" }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsxs(XStack, { minW: 0, items: "baseline", children: [c.org ? (_jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, shrink: 0, children: `${c.org}/` })) : null, _jsx(SizableText, { size: "$2", color: "$ink", fontWeight: "500", numberOfLines: 1, shrink: 1, children: c.name })] }), c.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: c.description })) : null] }), _jsxs(XStack, { width: 120, items: "center", gap: "$1.5", minW: 0, "$max-md": { display: 'none' }, children: [_jsx(GitBranch, { size: 12, color: "$soft" }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: c.branch })] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 120, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : ago(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" }) })] })] })] }))] }))] }) }));
+}
+/** One of the two ways in, as a card you press. */
+function Choice({ label, icon, says, onPress }) {
+    return (_jsxs(YStack, { render: "button", "aria-label": label, onPress: onPress, flex: 1, minW: 240, gap: "$2", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", items: "flex-start", hoverStyle: { borderColor: '$edge', bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon, _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(SizableText, { size: "$4", color: "$ink", fontWeight: "500", children: label }), _jsx(ArrowRight, { size: 14 })] }), _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'left' }, children: says })] }));
 }
-function NewRepo({ open, onOpenChange, onCreate, }) {
-    const [name, setName] = useState('');
-    const [description, setDescription] = useState('');
+/**
+ * The person's GitHub connection, in one line: who it is connected as and the
+ * way to sync, or the one press that connects it. GitHub returns here, and this
+ * page finishes the connect (../back.ts).
+ */
+function GitHubLink({ onSync }) {
+    const host = useHost();
+    const t = useTarget();
+    const me = useRead(() => connection(t), null, [t]);
+    const [note, setNote] = useState('');
     const [busy, setBusy] = useState(false);
-    const [error, setError] = useState('');
-    useEffect(() => {
-        if (!open) {
-            setName('');
-            setDescription('');
-            setError('');
-        }
-    }, [open]);
-    const submit = async () => {
+    useBack(t, true, setNote, me.reload);
+    const c = me.value;
+    // A connection that cannot be read says nothing here: Sync from GitHub above still works.
+    if (me.error || !c || !c.configured)
+        return note ? _jsx(Note, { children: note }) : null;
+    const link = async () => {
         setBusy(true);
-        setError('');
+        setNote('');
         try {
-            await onCreate(name, description);
-            setName('');
-            setDescription('');
+            host.open(await connect(t, here()));
         }
         catch (e) {
-            setError(e.message);
-        }
-        finally {
+            setNote(e.message);
             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' })] })] })] }) }));
+    return (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", flexWrap: "wrap", children: [_jsx(Github, { size: 16 }), _jsxs(YStack, { flex: 1, minW: 200, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: c.connected ? `GitHub connected as @${c.login}` : 'Connect GitHub to bring your repositories here' }), _jsx(SizableText, { size: "$1", color: "$soft", children: note || (c.connected ? 'Choose repositories to mirror; each stays in step with GitHub.' : 'One step on GitHub, then pick the repositories to sync.') })] }), c.connected ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: onSync, children: [_jsx(RefreshCw, { size: 14 }), "Sync repositories"] })) : (_jsxs(Button, { size: "sm", variant: "primary", disabled: busy, onPress: () => void link(), children: [_jsx(Github, { size: 14 }), busy ? 'Opening GitHub…' : 'Connect GitHub'] }))] }));
 }
-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 ? (_jsxs(YStack, { gap: "$3", py: "$2", children: [_jsx(Note, { children: "No boards yet. A repository shows up here once it has an issue." }), _jsxs(XStack, { gap: "$2", pt: "$1", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'codebases' })), children: "View repositories" }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync from GitHub" })] })] })) : (_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))) }))] }) }));
+const KINDS = { all: 'Issues and pull requests', issue: 'Issues', pr: 'Pull requests' };
+const ORIGINS = { all: 'Every source', github: 'GitHub', hanzo: 'Hanzo' };
+const ORDERS = { newest: 'Newest', oldest: 'Oldest', updated: 'Recently updated' };
+/** Mirrored from GitHub: filed by the forge's `git` source with its page on github.com. */
+const fromGitHub = (w) => /^https:\/\/github\.com\//.test(w.url);
+/** A dropdown that picks one of `options`, its trigger naming the choice. */
+function Pick({ label, value, options, onPick }) {
+    return (_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": label, items: "center", gap: "$1", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: options[value] }), _jsx(ChevronDown, { size: 12 })] }), items: Object.keys(options).map((k) => ({
+            key: k,
+            label: options[k],
+            icon: k === value ? _jsx(Check, { size: 14 }) : _jsx(YStack, { width: 14 }),
+            onSelect: () => onPick(k),
+        })) }));
+}
+function Mark({ w }) {
+    if (w.kind === 'pr')
+        return _jsx(GitPullRequest, { size: 16, color: closed(w) ? '$soft' : '$ink' });
+    if (w.status === 'canceled')
+        return _jsx(CircleSlash, { size: 16, color: "$soft" });
+    if (w.status === 'done')
+        return _jsx(CircleCheck, { size: 16, color: "$soft" });
+    return _jsx(CircleDot, { size: 16, color: "$ink" });
 }
+function Tag({ children }) {
+    return (_jsx(XStack, { px: "$2", py: 1, rounded: 999, borderWidth: 1, borderColor: "$borderColor", shrink: 0, children: _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: children }) }));
+}
+/**
+ * Every project's issues, read the way GitHub reads them: open or closed, one
+ * project or all of them, narrowed by words, kind, source and order. Each project
+ * syncs its own issues from GitHub; choosing an issue starts the next run on its
+ * codebase with the issue as the ask.
+ */
 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]);
+    const [state, setState] = useState('open');
+    const [kind, setKind] = useState('all');
+    const [origin, setOrigin] = useState('all');
+    const [order, setOrder] = useState('newest');
+    const [q, setQ] = useState('');
+    const [pulled, setPulled] = useState(0);
+    const [busy, setBusy] = useState(false);
+    const [said, setSaid] = useState(null);
+    const list = useRead(signed ? () => issues(t) : null, [], [t, signed, pulled]);
+    const known = useRead(signed ? () => boards(t) : null, [], [t, signed]);
     // Another screen chose the board (the rail's Issues chooses every board) while this one is open.
     useEffect(() => {
         const on = (e) => setBoard(e.detail);
         window.addEventListener('hanzo-board', on);
         return () => window.removeEventListener('hanzo-board', on);
     }, [setBoard]);
+    useEffect(() => setSaid(null), [board]);
+    // The projects: every board the forge names, and every repository an issue is filed under.
+    const projects = new Map();
+    for (const b of known.value)
+        projects.set(b.key.toLowerCase(), { key: b.key, name: b.name, open: 0 });
+    for (const w of list.value) {
+        const key = projectOf(w);
+        if (!key)
+            continue;
+        const p = projects.get(key.toLowerCase()) ?? { key, name: key, open: 0 };
+        if (!closed(w))
+            p.open++;
+        projects.set(key.toLowerCase(), p);
+    }
+    const rows = [...projects.values()].sort((a, b) => a.name.localeCompare(b.name));
+    const current = board ? projects.get(board.toLowerCase()) : undefined;
+    const title = current?.name ?? board;
+    const needle = q.trim().toLowerCase();
+    const scoped = list.value
+        .filter((w) => !board || inProject(w, board))
+        .filter((w) => kind === 'all' || (kind === 'pr' ? w.kind === 'pr' : w.kind !== 'pr'))
+        .filter((w) => origin === 'all' || (origin === 'github') === fromGitHub(w))
+        .filter((w) => !needle || [w.title, w.identifier, w.assignee, projectOf(w), ...w.labels].join(' ').toLowerCase().includes(needle));
+    const opened = scoped.filter((w) => !closed(w));
+    const shut = scoped.filter(closed);
+    const shown = (state === 'open' ? opened : shut).slice().sort((a, b) => {
+        if (order === 'updated')
+            return (b.updated || b.created) - (a.updated || a.created);
+        if (order === 'oldest')
+            return a.created - b.created;
+        return b.created - a.created;
+    });
+    const pull = async () => {
+        setBusy(true);
+        setSaid(null);
+        try {
+            const s = await syncIssues(t, board);
+            const where = board ? title : `${s.repos} ${s.repos === 1 ? 'repository' : 'repositories'}`;
+            const parts = [`${s.issues} ${s.issues === 1 ? 'issue' : 'issues'} synced from ${where}`, `${s.created} new`, `${s.updated} updated`];
+            if (s.failed)
+                parts.push(`${s.failed} failed`);
+            setSaid({ text: `${parts.join(' · ')}.${s.truncated ? ' More remain — sync again to continue.' : ''}` });
+            setPulled((n) => n + 1);
+        }
+        catch (e) {
+            const text = e.message;
+            setSaid({ text, connect: /not connected/i.test(text) });
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const link = async () => {
+        try {
+            host.open(await connect(t, here()));
+        }
+        catch (e) {
+            setSaid({ text: e.message });
+        }
+    };
     const open = (w) => {
         const name = w.repo || w.project;
         if (name) {
@@ -211,5 +290,21 @@ function Issues() {
         }
         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 ? (_jsxs(YStack, { gap: "$3", py: "$2", children: [_jsx(Note, { children: "Nothing open." }), _jsxs(XStack, { gap: "$2", pt: "$1", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'codebases' })), children: "View repositories" }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: "Start a new run" })] })] })) : (_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))) }))] }) }));
+    const chip = (key, name, count) => {
+        const on = key.toLowerCase() === board.toLowerCase();
+        return (_jsxs(XStack, { render: "button", "aria-label": key ? `Show ${name}` : 'Show every project', "aria-pressed": on, onPress: () => setBoard(key), items: "center", gap: "$2", px: "$2.5", py: "$1.5", rounded: "$3", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, shrink: 0, children: [_jsx(SizableText, { flex: 1, size: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, style: { textAlign: 'left' }, children: name }), count ? (_jsx(SizableText, { size: "$1", color: "$soft", children: count })) : null] }, key || '*'));
+    };
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1120, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", flexWrap: "wrap", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 240, children: [_jsx(SizableText, { render: "h1", size: "$6", fontWeight: "500", color: "$ink", children: board ? `Issues · ${title}` : 'Issues' }), _jsx(SizableText, { size: "$2", color: "$soft", children: board ? `Work on ${title}. Choosing an issue starts the next run on that codebase.` : 'Work across every project. Choosing an issue starts the next run on that codebase.' })] }), _jsxs(Button, { size: "sm", variant: "outline", disabled: !signed || busy, onPress: () => void pull(), children: [_jsx(Github, { size: 14 }), busy ? 'Syncing…' : board ? `Sync ${title} from GitHub` : 'Sync all from GitHub'] })] }), said ? (_jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [_jsx(Note, { children: said.text }), said.connect ? (_jsxs(Button, { size: "sm", variant: "primary", onPress: () => void link(), children: [_jsx(Github, { size: 14 }), "Connect GitHub"] })) : null] })) : null, _jsxs(XStack, { gap: "$5", items: "flex-start", "$max-md": { flexDirection: 'column', gap: '$3' }, children: [_jsxs(YStack, { render: "nav", "aria-label": "Projects", width: 220, shrink: 0, gap: "$0.5", "$max-md": { width: '100%', flexDirection: 'row', overflow: 'scroll', gap: '$1' }, children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2.5", pb: "$1", "$max-md": { display: 'none' }, children: "Projects" }), chip('', 'All projects', list.value.filter((w) => !closed(w)).length), rows.map((p) => chip(p.key, p.name, p.open))] }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$3", width: "100%", children: [_jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search issues", "aria-label": "Search issues", disabled: !signed }), 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" })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", bg: "$panel", flexWrap: "wrap", children: [_jsxs(XStack, { gap: "$3", items: "center", flex: 1, minW: 0, children: [_jsxs(XStack, { render: "button", "aria-label": "Open issues", "aria-pressed": state === 'open', items: "center", gap: "$1.5", onPress: () => setState('open'), children: [_jsx(CircleDot, { size: 14, color: state === 'open' ? '$ink' : '$soft' }), _jsx(SizableText, { size: "$2", color: state === 'open' ? '$ink' : '$soft', fontWeight: state === 'open' ? '500' : '400', children: `${opened.length} Open` })] }), _jsxs(XStack, { render: "button", "aria-label": "Closed issues", "aria-pressed": state === 'closed', items: "center", gap: "$1.5", onPress: () => setState('closed'), children: [_jsx(Check, { size: 14, color: state === 'closed' ? '$ink' : '$soft' }), _jsx(SizableText, { size: "$2", color: state === 'closed' ? '$ink' : '$soft', fontWeight: state === 'closed' ? '500' : '400', children: `${shut.length} Closed` })] })] }), _jsxs(XStack, { gap: "$1", items: "center", flexWrap: "wrap", shrink: 1, minW: 0, children: [_jsx(Pick, { label: "Kind", value: kind, options: KINDS, onPick: setKind }), _jsx(Pick, { label: "Source", value: origin, options: ORIGINS, onPick: setOrigin }), _jsx(Pick, { label: "Sort", value: order, options: ORDERS, onPick: setOrder })] })] }), shown.length === 0 ? (_jsxs(YStack, { px: "$3", py: "$6", gap: "$3", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Note, { children: state === 'open'
+                                                        ? needle || kind !== 'all' || origin !== 'all'
+                                                            ? 'No open issues match.'
+                                                            : 'Nothing open.'
+                                                        : 'Nothing closed.' }), list.value.length === 0 ? (_jsxs(XStack, { gap: "$2", flexWrap: "wrap", justify: "center", children: [_jsxs(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => void pull(), children: [_jsx(Github, { size: 14 }), "Sync from GitHub"] }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: "Start a new run" })] })) : null] })) : (shown.map((w) => (_jsxs(XStack, { items: "center", gap: "$2", pr: "$3", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { render: "button", "aria-label": `Build ${w.identifier || w.title}`, onPress: () => open(w), flex: 1, minW: 0, items: "flex-start", gap: "$3", pl: "$3", py: "$2.5", focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(YStack, { pt: 2, children: _jsx(Mark, { w: w }) }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", items: "flex-start", children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", maxW: "100%", children: [_jsx(SizableText, { size: "$3", color: "$ink", fontWeight: "500", numberOfLines: 1, shrink: 1, children: w.title }), STATUS[w.status] && !closed(w) && w.status !== 'todo' ? _jsx(Tag, { children: STATUS[w.status] }) : null, !STATUS[w.status] ? _jsx(Tag, { children: w.status }) : null, w.priority !== 'none' && w.priority ? _jsx(Tag, { children: w.priority }) : null, w.labels.slice(0, 4).map((l) => (_jsx(Tag, { children: l }, l)))] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [
+                                                                        w.identifier || w.kind,
+                                                                        !board && projectOf(w) ? projectOf(w) : '',
+                                                                        w.created ? `opened ${ago(new Date(w.created).toISOString())}` : '',
+                                                                        w.assignee ? `assigned to ${w.assignee}` : '',
+                                                                        fromGitHub(w) ? 'GitHub' : '',
+                                                                    ]
+                                                                        .filter(Boolean)
+                                                                        .join(' · ') })] })] }), w.url ? (_jsx(Out, { href: w.url, label: `Open ${w.identifier || w.title} on ${fromGitHub(w) ? 'GitHub' : 'the forge'}`, children: _jsx(ExternalLink, { size: 14, opacity: 0.6 }) })) : null] }, w.id))))] }))] })] })] }) }));
 }

package/lib/host.d.ts

@@ -39,7 +39,7 @@ export interface Host {
     person: Person | null;
     /** Whether the person administers `org` (its owner or an admin): they publish to main and change its money; anyone else opens a review and reads. */
     admin: boolean;
-    /** The address under the mount: '' | a session id | a slug | '-/codebases' | '-/projects' | '-/issues' | '-/artifacts' | '-/templates'. */
+    /** The address under the mount, in route.ts's grammar: '' | a session id | `<org>/<repo>` | a slug | '-/projects' | '-/issues' | … */
     path: string;
     /** Move under the mount. */
     go: (path: string, how?: {

package/lib/landing.js

@@ -6,11 +6,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * which repository and branch it starts from, and the ask itself.
  * Under it: attach, dictate, the mode, and the model and effort on the right.
  *
- * Sending starts a coding run and opens it. The codebase is optional: in the
- * sandbox a run with none starts a new project named from the ask, as the
- * platform does for a run that names no repository; a machine works in its own
- * checkout, so a run there names one. The choices a person made here are kept in
- * this browser, per org, so the next New starts where the last one did.
+ * Sending starts a coding run on a project and opens it. A project is a
+ * repository — the org's on the forge, or one its GitHub grants — so a run
+ * names one, and an ask with none chosen opens the picker rather than making a
+ * project up from its words. The choices a person made here are kept in this
+ * browser, per org, so the next New starts where the last one did.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Cloud, Monitor } from '@hanzogui/lucide-icons-2';
@@ -144,8 +144,9 @@ export function Landing({ onStarted }) {
         }
         const repo = isForge(kept.repo) ? kept.repo : null;
         const hub = isHub(kept.repo) ? kept.repo : null;
-        if (!repo && !hub && place.id) {
-            setNote(`A run on ${place.label} works in its own checkout: choose the codebase, or run it in Cloud.`);
+        if (!repo && !hub) {
+            setNote('Choose the project this run works on: a repository of this organization, or one on its GitHub.');
+            setPicking(true);
             return;
         }
         setBusy(true);
@@ -154,7 +155,6 @@ export function Landing({ onStarted }) {
             const run = await start(t, {
                 prompt: compose(draft.trim(), files),
                 // The name alone. The org rides the request, and a slash is not a repo name.
-                // No codebase is not sent, and the run starts a new project.
                 // An empty base or place is not sent: the default branch, and the sandbox.
                 repo: repo?.name ?? hub?.full_name,
                 base: repo ? kept.branch : hub ? kept.branch || hub.default_branch : undefined,
@@ -227,7 +227,7 @@ export function Landing({ onStarted }) {
                             name: r.name,
                         });
                     },
-                }, placeholder: "New project", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null, _jsx(Files, { files: files, onFiles: setFiles })] }));
+                }, placeholder: "Choose a project", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null, _jsx(Files, { files: files, onFiles: setFiles })] }));
     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(ModelPicker, { quiet: true, size: "sm", name: "Model", models: catalog.value, scope: "chat", limits: limits, value: model, onChange: pickModel, 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.`

package/lib/project.d.ts

@@ -1,3 +1,18 @@
-export declare function Project({ slug }: {
+import { type Project as Row } from './api/projects.ts';
+/** What a workspace is opened on: a repository on the forge, or a deployed site by its slug. */
+export type Where = {
     slug: string;
+} | {
+    org: string;
+    name: string;
+};
+/** Whether the site `p` is the repository `r`'s: built from it, or named as it is. */
+export declare function siteOf(p: Row, r: {
+    org: string;
+    name: string;
+}): boolean;
+/** A site's slug for a repository's name: lowercase letters, digits and hyphens, at most 40. */
+export declare function slugOf(name: string): string;
+export declare function Project({ at }: {
+    at: Where;
 }): import("react").JSX.Element;