@hanzo/build 0.2.0

package/lib/data.js

@@ -0,0 +1,178 @@
+/**
+ * The builder's reads, as hooks: one per thing on screen, each answering
+ * `{value, error, loading, reload}` so every pane owes the same three states.
+ *
+ * A read that fails says so and keeps what it had; a read with no person
+ * signed in is not attempted — the platform would refuse it and the refusal
+ * would read as an outage.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { places } from './api/places.js';
+import { projects } from './api/projects.js';
+import { get, list, watch } from './api/sessions.js';
+import { merge } from './api/turn.js';
+/** Run `load` whenever `key` changes (and on `reload`), keeping the last good value. */
+export function useRead(load, initial, key) {
+    const [value, setValue] = useState(initial);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(Boolean(load));
+    const [tick, setTick] = useState(0);
+    const reload = useCallback(() => setTick((n) => n + 1), []);
+    useEffect(() => {
+        if (!load) {
+            setLoading(false);
+            return;
+        }
+        let live = true;
+        setLoading(true);
+        load()
+            .then((v) => {
+            if (!live)
+                return;
+            setValue(v);
+            setError(null);
+        })
+            .catch((e) => live && setError(e instanceof Error ? e : new Error(String(e))))
+            .finally(() => live && setLoading(false));
+        return () => {
+            live = false;
+        };
+        // `key` is the dependency list, by contract.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...key, tick]);
+    return { value, error, loading, reload };
+}
+/**
+ * The org's coding runs, newest first, kept current by the org's own session
+ * stream: a status that moves moves its dot, and a run started anywhere appears.
+ */
+export function useRecents(t, signed) {
+    const read = useRead(signed ? () => list(t, { kind: 'coding', limit: 50 }) : null, [], [t, signed]);
+    const [rows, setRows] = useState([]);
+    useEffect(() => setRows(read.value), [read.value]);
+    // A feed of the whole org carries every agent's heartbeat, so an unseen id
+    // re-reads the list at most every five seconds.
+    const last = useRef(0);
+    const reload = useRef(() => { });
+    reload.current = () => {
+        const now = Date.now();
+        if (now - last.current < 5000)
+            return;
+        last.current = now;
+        read.reload();
+    };
+    useEffect(() => {
+        if (!signed)
+            return;
+        const ctl = new AbortController();
+        void watch(t, '', {
+            session: (s) => setRows((prev) => {
+                const i = prev.findIndex((r) => r.id === s.id);
+                if (i === -1) {
+                    // A run this list has not seen: re-read rather than guess its kind.
+                    reload.current();
+                    return prev;
+                }
+                const next = prev.slice();
+                next[i] = { ...prev[i], ...s, title: s.title || prev[i].title };
+                return next;
+            }),
+            open: (n) => {
+                if (n > 0)
+                    reload.current();
+            },
+        }, ctl.signal).catch(() => {
+            /* a refused feed leaves the list as read */
+        });
+        return () => ctl.abort();
+    }, [t, signed]);
+    return { ...read, value: rows };
+}
+export function usePlaces(t, signed) {
+    return useRead(signed ? () => places(t) : null, [], [t, signed]);
+}
+export function useProjects(t, signed) {
+    return useRead(signed ? () => projects(t) : null, [], [t, signed]);
+}
+/** A value kept in this browser, per key; storage that throws keeps it in memory. */
+export function useKept(key, initial) {
+    const [value, setValue] = useState(() => {
+        try {
+            const raw = window.localStorage.getItem(key);
+            return raw === null ? initial : JSON.parse(raw);
+        }
+        catch {
+            return initial;
+        }
+    });
+    const set = useCallback((v) => {
+        setValue(v);
+        try {
+            window.localStorage.setItem(key, JSON.stringify(v));
+        }
+        catch {
+            /* kept for this page only */
+        }
+    }, [key]);
+    return [value, set];
+}
+/**
+ * One run: the recorded detail, then the live feed added to it. A reconnect
+ * after a drop re-reads the detail — frames missed while dropped are only in
+ * the record. `id` null reads nothing.
+ */
+export function useRun(t, id) {
+    const detail = useRead(id ? () => get(t, id) : null, null, [t, id]);
+    const [live, setLive] = useState([]);
+    const [pushed, setPushed] = useState(null);
+    const [refused, setRefused] = useState('');
+    const reload = useRef(detail.reload);
+    reload.current = detail.reload;
+    useEffect(() => {
+        setLive([]);
+        setPushed(null);
+        setRefused('');
+        if (!id)
+            return;
+        const ctl = new AbortController();
+        void watch(t, id, {
+            // A frame from a stream this run has already left is not this run's.
+            event: (e) => {
+                if (!ctl.signal.aborted && e.sessionId === id)
+                    setLive((prev) => [...prev, e]);
+            },
+            session: (s) => {
+                if (!ctl.signal.aborted && s.id === id)
+                    setPushed(s);
+            },
+            open: (n) => {
+                if (n > 0)
+                    reload.current();
+            },
+        }, ctl.signal).catch((e) => setRefused(e instanceof Error ? e.message : 'The feed was refused'));
+        return () => ctl.abort();
+    }, [t, id]);
+    // The read and the frames describe THIS run or nothing: a read kept from the
+    // run before (it stays until the next one lands, or forever if it fails) must
+    // not lend this run its pull request.
+    const read = detail.value && detail.value.id === id ? detail.value : null;
+    const frame = pushed && pushed.id === id ? pushed : null;
+    const events = useMemo(() => merge(read?.recent ?? [], live), [read, live]);
+    // A frame newer than the read wins; the read fills what a frame left empty.
+    const record = useMemo(() => {
+        const base = read;
+        const pushed = frame;
+        if (!pushed)
+            return base;
+        if (!base)
+            return pushed;
+        return {
+            ...base,
+            ...pushed,
+            title: pushed.title || base.title,
+            branch: pushed.branch || base.branch,
+            pr: pushed.pr || base.pr,
+        };
+    }, [read, frame]);
+    return { detail, record, events, status: record?.status ?? '', refused };
+}

package/lib/host.d.ts

@@ -0,0 +1,57 @@
+/**
+ * What the builder needs from the page that mounts it.
+ *
+ * The builder is ONE component with two hosts: its own page (hanzo.build, which
+ * signs in through Hanzo IAM and routes with react-router) and the platform
+ * console (platform.hanzo.ai/dev, which already has a session and a router).
+ * Everything that differs between them is here, as values, so neither host
+ * forks the builder and the builder imports neither host.
+ */
+import { type ReactNode } from 'react';
+import type { Target } from './api/call.ts';
+export interface Person {
+    name: string;
+    email: string;
+    /** An https image, or '' for the initial. */
+    avatar: string;
+}
+export interface Host {
+    /** The platform origin, no trailing slash. */
+    api: string;
+    /** The signed-in person's bearer, or null. Read at call time, so a refresh is picked up. */
+    token: () => string | null;
+    /** The org every call is scoped to. */
+    org: string | null;
+    /** Who is signed in, or null. */
+    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>'. */
+    path: string;
+    /** Move under the mount. */
+    go: (path: string, how?: {
+        replace?: boolean;
+    }) => void;
+    /** Where the builder links out to. Same-window addresses on the host, or https. */
+    links: {
+        /** Troubleshoot GitHub connection: the GitHub pane of the platform's plugins. */
+        github: string;
+        /** Customize: the platform's plugins (skills, MCP, connectors). */
+        customize: string;
+        /** Account settings. */
+        settings: string;
+        /** The platform itself, where the mark leads. */
+        home: string;
+    };
+    /** Leave the builder for a host address, same window. */
+    open: (href: string) => void;
+    signIn?: () => void;
+    signOut?: () => void;
+}
+export declare function HostProvider({ host, children }: {
+    host: Host;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useHost(): Host;
+/** The call target for this host — stable while the host's api, token reader and org are. */
+export declare function useTarget(): Target;

package/lib/host.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * What the builder needs from the page that mounts it.
+ *
+ * The builder is ONE component with two hosts: its own page (hanzo.build, which
+ * signs in through Hanzo IAM and routes with react-router) and the platform
+ * console (platform.hanzo.ai/dev, which already has a session and a router).
+ * Everything that differs between them is here, as values, so neither host
+ * forks the builder and the builder imports neither host.
+ */
+import { createContext, useContext, useMemo } from 'react';
+const Context = createContext(null);
+export function HostProvider({ host, children }) {
+    return _jsx(Context.Provider, { value: host, children: children });
+}
+export function useHost() {
+    const h = useContext(Context);
+    if (!h)
+        throw new Error('The builder was rendered without a host');
+    return h;
+}
+/** The call target for this host — stable while the host's api, token reader and org are. */
+export function useTarget() {
+    const { api, token, org } = useHost();
+    return useMemo(() => ({ api, token, org }), [api, token, org]);
+}

package/lib/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @hanzo/build — the builder as a component.
+ *
+ * Mount `<Builder host={…} />` under a gui root in a box with a height. The
+ * host says where the platform is, who is signed in, and how to move; the
+ * builder does everything else. hanzo.build and platform.hanzo.ai/dev are its
+ * two hosts.
+ */
+export { Builder } from './builder.tsx';
+export type { Host, Person } from './host.tsx';
+export { path, route, SESSION, SLUG, type Route, type Screen } from './route.ts';

package/lib/index.js

@@ -0,0 +1,10 @@
+/**
+ * @hanzo/build — the builder as a component.
+ *
+ * Mount `<Builder host={…} />` under a gui root in a box with a height. The
+ * host says where the platform is, who is signed in, and how to move; the
+ * builder does everything else. hanzo.build and platform.hanzo.ai/dev are its
+ * two hosts.
+ */
+export { Builder } from './builder.js';
+export { path, route, SESSION, SLUG } from './route.js';

package/lib/landing.d.ts

@@ -0,0 +1,13 @@
+/** One vocabulary for the mode, on New and in a workspace. */
+export declare const MODES: readonly [{
+    readonly id: 'build';
+    readonly label: 'Build';
+    readonly hint: 'Edits, commits and pushes a branch';
+}, {
+    readonly id: 'plan';
+    readonly label: 'Plan';
+    readonly hint: 'Plans the change and writes nothing';
+}];
+export declare function Landing({ onStarted }: {
+    onStarted: (session: string) => void;
+}): import("react").JSX.Element;

package/lib/landing.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * New: the empty state. A heading at the top of the column, and at the foot of
+ * the pane the composer — where the run goes (the sandbox or one of the org's
+ * machines), 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 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';
+import { Button } from '@hanzo/ui';
+import { ModeSelect } from '@hanzo/ui/agents';
+import { Composer, EmptyPrompt } from '@hanzo/ui/chat';
+import { BranchSelect, ChipSelect, HanzoMark, RepoSelect } from '@hanzo/ui/product';
+import { useCallback, useMemo, useState } from 'react';
+import { start, unhonoured } from './api/coding.js';
+import { branches, connect, repos } from './api/github.js';
+import { ENSO, models } from './api/models.js';
+import { ready, SANDBOX } from './api/places.js';
+import { clone } from './api/platform.js';
+import { useKept, usePlaces, useRead } from './data.js';
+import { useHost, useTarget } from './host.js';
+import { Publish } from './publish.js';
+import { Attach, compose, Dictate, Files } from './tools.js';
+/** One vocabulary for the mode, on New and in a workspace. */
+export const MODES = [
+    { id: 'build', label: 'Build', hint: 'Edits, commits and pushes a branch' },
+    { id: 'plan', label: 'Plan', hint: 'Plans the change and writes nothing' },
+];
+const EFFORTS = [
+    { id: 'low', label: 'Low' },
+    { id: 'medium', label: 'Medium' },
+    { id: 'high', label: 'High' },
+];
+const FIRST = { repo: null, branch: '', place: '', mode: 'build', model: ENSO, effort: 'medium' };
+const COLUMN = 768;
+export function Landing({ onStarted }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const [kept, keep] = useKept(`hanzo.build.new.${host.org ?? 'none'}`, FIRST);
+    const set = (patch) => keep({ ...kept, ...patch });
+    const [draft, setDraft] = useState('');
+    const [files, setFiles] = useState([]);
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const [connected, setConnected] = useState(true);
+    const [adding, setAdding] = useState(null);
+    const places = usePlaces(t, signed);
+    const catalog = useRead(signed ? () => models(t) : null, [], [t, signed]);
+    const place = places.value.find((p) => p.id === kept.place) ?? SANDBOX;
+    const loadRepos = useCallback(async (q, after) => {
+        const page = await repos(t, { q, after: after ?? undefined });
+        setConnected(page.connected);
+        return { repos: page.repos, next: page.next || null };
+    }, [t]);
+    const loadBranches = useCallback(async (q, after) => {
+        if (!kept.repo)
+            return { branches: [], next: null };
+        const page = await branches(t, kept.repo.owner, kept.repo.name, { q, after: after ?? undefined });
+        return { branches: page.branches.map((b) => ({ name: b.name })), next: page.next || null };
+    }, [t, kept.repo]);
+    const link = async () => {
+        try {
+            const to = await connect(t);
+            // The console completes the connection at /connectors and brings the
+            // person back here: a path, never an origin.
+            try {
+                window.sessionStorage.setItem('hanzo.return', window.location.pathname + window.location.search);
+            }
+            catch {
+                /* they land on the connectors page and come back themselves */
+            }
+            window.location.assign(to);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'Could not start the GitHub connection');
+        }
+    };
+    const send = async () => {
+        const prompt = draft.trim();
+        if (!prompt || busy)
+            return;
+        if (!signed) {
+            host.signIn?.();
+            return;
+        }
+        setBusy(true);
+        setNote('');
+        try {
+            const run = await start(t, {
+                prompt: compose(prompt, files),
+                repo: kept.repo ? `${kept.repo.owner}/${kept.repo.name}` : undefined,
+                base: kept.repo ? kept.branch || kept.repo.default_branch || undefined : undefined,
+                targetId: place.id || undefined,
+                mode: kept.mode,
+                model: kept.model === ENSO ? undefined : kept.model,
+                effort: kept.effort,
+            });
+            setDraft('');
+            setFiles([]);
+            onStarted(run.session);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The run could not start');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const placeItems = useMemo(() => (places.value.length ? places.value : [SANDBOX]).map((p) => ({
+        id: p.id || 'sandbox',
+        label: p.label,
+        hint: p.id ? [p.status, p.capacity].filter(Boolean).join(' · ') : 'The platform’s own sandbox',
+        disabled: !ready(p),
+        place: p,
+    })), [places.value]);
+    const branch = kept.branch || kept.repo?.default_branch || 'main';
+    const head = (_jsxs(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: [_jsx(ChipSelect, { name: "Where the run runs", icon: place.id ? _jsx(Monitor, { size: 13 }) : _jsx(Cloud, { size: 13 }), label: place.id ? place.label : 'Default', chosen: placeItems.find((i) => i.place.id === place.id) ?? null, items: placeItems, onChange: (i) => set({ place: i.place.id }), placeholder: "Search machines\u2026", loading: places.loading, error: places.error?.message ?? null, footer: _jsx(SizableText, { size: "$1", color: "$soft", children: "A run on a machine uses that machine\u2019s checkout and credentials." }) }), _jsx(RepoSelect, { value: kept.repo, onChange: (r) => set({ repo: r, branch: r.default_branch || 'main' }), load: loadRepos, troubleshoot: { label: 'Troubleshoot GitHub connection', onPress: () => host.open(host.links.github) }, note: "Not all repositories are shown. Type to search.", connect: !connected && !host.admin ? (_jsx(Button, { size: "sm", onPress: () => void link(), children: "Connect GitHub" })) : undefined, action: {
+                    label: 'Add to project',
+                    onPress: (r) => setAdding({
+                        repo: clone(`${r.owner}/${r.name}`),
+                        title: `${r.owner}/${r.name}`,
+                        ref: r.default_branch || 'main',
+                        name: r.name,
+                    }),
+                }, placeholder: "Repository", disabled: !signed }), 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(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, 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", px: "$4", children: [_jsxs(YStack, { width: "100%", maxW: COLUMN, flex: 1, minH: 0, children: [_jsx(EmptyPrompt, { title: "What\u2019s up next?", mark: _jsx(HanzoMark, { size: 18 }), column: COLUMN }), _jsx(YStack, { flex: 1 }), _jsxs(YStack, { pb: "$2", gap: "$2", children: [note || unhonoured(kept.mode) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(kept.mode) })) : 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) })] }));
+}

package/lib/out.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A link out of the builder: a new tab, no handle back to this page, no
+ * referrer. Only ever handed an https address the caller has already checked.
+ */
+import type { ReactNode } from 'react';
+export declare function Out({ href, label, children }: {
+    href: string;
+    label?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/lib/out.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Out({ href, label, children }) {
+    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, style: { color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }, children: children }));
+}

package/lib/project.d.ts

@@ -0,0 +1,3 @@
+export declare function Project({ slug }: {
+    slug: string;
+}): import("react").JSX.Element;