@hanzo/build 0.2.39 → 0.2.41

package/lib/ago.d.ts

@@ -0,0 +1,2 @@
+/** `just now`, `5m ago`, `3h ago`, `4d ago`, else the date, for an RFC 3339 instant; `—` for none. */
+export declare function ago(iso: string): string;

package/lib/ago.js

@@ -0,0 +1,18 @@
+/** `just now`, `5m ago`, `3h ago`, `4d ago`, else the date, for an RFC 3339 instant; `—` for none. */
+export function ago(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();
+}

package/lib/api/auto.d.ts

@@ -1,27 +1,86 @@
 /**
- * Automations: flows that run themselves.
+ * Automations: a task that runs itself, on a schedule or when asked.
  *
- *   GET    /v1/auto/flows              {data: [flow]}   newest updated first
- *   GET    /v1/auto/flows/{id}         the flow and its latest version (the name)
- *   POST   /v1/auto/flows              a disabled draft
- *   POST   /v1/auto/flows/{id}/enable
- *   POST   /v1/auto/flows/{id}/disable
+ *   GET    /v1/auto/automations            {data: [automation]}
+ *   POST   /v1/auto/automations            create one: name and instructions
+ *   GET    /v1/auto/automations/{id}       one
+ *   PATCH  /v1/auto/automations/{id}       change it, or switch it on or off
+ *   DELETE /v1/auto/automations/{id}       delete it, its schedule and its runs
+ *   POST   /v1/auto/automations/{id}/run   {run: {id, status}}  one run, now
+ *   GET    /v1/auto/automations/{id}/runs  {data: [run]}        newest first
  *
- * The list page records the id and whether the trigger is armed. The name lives
- * on the latest version, so each row is read once more.
+ * Each run is one Dev run in this organization, started as the person who last
+ * saved what it does. A draft is a flow named and not yet told what to do: it
+ * runs once its instructions are saved.
  */
 import { type Target } from './call.ts';
-export interface Automation {
-    id: string;
+export type Kind = 'manual' | 'hourly' | 'daily' | 'weekdays' | 'weekly' | 'cron';
+export type Permissions = 'ask' | 'auto';
+/** When it runs, in the person's own words and zone. */
+export interface Schedule {
+    kind: Kind;
+    /** HH:MM, 24-hour, for daily, weekdays and weekly; 00:MM for hourly. */
+    at?: string;
+    /** mon … sun, for weekly. */
+    day?: string;
+    /** Five fields, for cron. */
+    cron?: string;
+    /** An IANA zone; the platform reads an absent one as UTC. */
+    tz?: string;
+}
+/** What an automation is: what the editor holds and the platform keeps. */
+export interface Draft {
     name: string;
-    /** ENABLED or DISABLED. */
+    instructions: string;
+    /** A model id, or null for Enso, the default. */
+    model: string | null;
+    schedule: Schedule;
+    permissions: Permissions;
+    notify: boolean;
+    enabled: boolean;
+}
+export interface Last {
+    id: string;
     status: string;
-    /** Unix milliseconds, or 0. */
-    updated: number;
+    at: string;
+    summary: string;
+}
+export interface Automation extends Draft {
+    id: string;
+    project: string | null;
+    /** Named and not yet told what to do: it never runs until its instructions are saved. */
+    draft: boolean;
+    /** When it runs next, RFC 3339, or null when it runs only when asked or is off. */
+    next: string | null;
+    last: Last | null;
+    created: string;
+    updated: string;
 }
-export declare function automation(raw: unknown): Automation | null;
-export declare function flows(t: Target): Promise<Automation[]>;
-/** A disabled draft. Creating it does not arm the trigger. */
-export declare function add(t: Target, name: string): Promise<Automation>;
-/** Arm or disarm the trigger. A disarmed flow can still be started on demand. */
-export declare function arm(t: Target, id: string, on: boolean): Promise<void>;
+/** One run: succeeded, failed, running, queued, skipped or refused. */
+export interface Run {
+    id: string;
+    status: string;
+    at: string;
+    finished: string | null;
+    summary: string;
+    /** The Dev run it started, or null when it started none. */
+    session: string | null;
+}
+/** One automation as the platform answers it, or null for a row with no id. */
+export declare function read(raw: unknown): Automation | null;
+export declare function automations(t: Target): Promise<Automation[]>;
+export declare function automation(t: Target, id: string): Promise<Automation>;
+export declare function create(t: Target, d: Draft): Promise<Automation>;
+/** What changed between two drafts, field by field: what a save sends. */
+export declare function changes(was: Draft, now: Draft): Partial<Draft>;
+/** Change an automation. A change to anything but `enabled` makes the caller the person it runs as. */
+export declare function save(t: Target, id: string, change: Partial<Draft>): Promise<Automation>;
+export declare function remove(t: Target, id: string): Promise<void>;
+/** Start one run now. While one is going, the platform records this start as skipped. */
+export declare function start(t: Target, id: string): Promise<{
+    id: string;
+    status: string;
+}>;
+export declare function runs(t: Target, id: string): Promise<Run[]>;
+/** A schedule the way a person says it. */
+export declare function words(s: Schedule): string;

package/lib/api/auto.js

@@ -1,67 +1,127 @@
 /**
- * Automations: flows that run themselves.
+ * Automations: a task that runs itself, on a schedule or when asked.
  *
- *   GET    /v1/auto/flows              {data: [flow]}   newest updated first
- *   GET    /v1/auto/flows/{id}         the flow and its latest version (the name)
- *   POST   /v1/auto/flows              a disabled draft
- *   POST   /v1/auto/flows/{id}/enable
- *   POST   /v1/auto/flows/{id}/disable
+ *   GET    /v1/auto/automations            {data: [automation]}
+ *   POST   /v1/auto/automations            create one: name and instructions
+ *   GET    /v1/auto/automations/{id}       one
+ *   PATCH  /v1/auto/automations/{id}       change it, or switch it on or off
+ *   DELETE /v1/auto/automations/{id}       delete it, its schedule and its runs
+ *   POST   /v1/auto/automations/{id}/run   {run: {id, status}}  one run, now
+ *   GET    /v1/auto/automations/{id}/runs  {data: [run]}        newest first
  *
- * The list page records the id and whether the trigger is armed. The name lives
- * on the latest version, so each row is read once more.
+ * Each run is one Dev run in this organization, started as the person who last
+ * saved what it does. A draft is a flow named and not yet told what to do: it
+ * runs once its instructions are saved.
  */
 import { call, seg } from './call.js';
 const str = (v) => (typeof v === 'string' ? v : '');
-const obj = (v) => v && typeof v === 'object' ? v : {};
-export function automation(raw) {
+const nullable = (v) => (typeof v === 'string' && v ? v : null);
+const obj = (v) => (v && typeof v === 'object' ? v : {});
+const KINDS = ['manual', 'hourly', 'daily', 'weekdays', 'weekly', 'cron'];
+function schedule(raw) {
+    const o = obj(raw);
+    const kind = KINDS.includes(o.kind) ? o.kind : 'manual';
+    const out = { kind };
+    for (const k of ['at', 'day', 'cron', 'tz'])
+        if (str(o[k]))
+            out[k] = str(o[k]);
+    return out;
+}
+/** One automation as the platform answers it, or null for a row with no id. */
+export function read(raw) {
     const o = obj(raw);
     const id = str(o.id);
     if (!id)
         return null;
-    const version = obj(o.version);
+    const last = obj(o.last);
     return {
         id,
-        name: str(version.displayName) || str(o.displayName) || id,
-        status: str(o.status) || 'DISABLED',
-        updated: typeof o.updated === 'number' ? o.updated : 0,
+        name: str(o.name) || id,
+        instructions: str(o.instructions),
+        project: nullable(o.project),
+        model: nullable(o.model),
+        schedule: schedule(o.schedule),
+        permissions: o.permissions === 'auto' ? 'auto' : 'ask',
+        notify: o.notify === true,
+        enabled: o.enabled === true,
+        draft: o.draft === true,
+        next: nullable(o.next),
+        last: str(last.id) ? { id: str(last.id), status: str(last.status), at: str(last.at), summary: str(last.summary) } : null,
+        created: str(o.created),
+        updated: str(o.updated),
     };
 }
-export async function flows(t) {
-    const raw = await call(t, 'GET', '/v1/auto/flows');
-    const data = Array.isArray(obj(raw).data) ? obj(raw).data : [];
-    const rows = data.map(automation).filter((a) => a !== null).slice(0, 40);
-    return Promise.all(rows.map(async (a) => {
-        if (a.name !== a.id)
-            return a;
-        try {
-            return automation(await call(t, 'GET', `/v1/auto/flows/${seg(a.id)}`)) ?? a;
-        }
-        catch {
-            return a;
-        }
-    }));
+/** The Dev run a transcript link opens: `…/dev?run=sess_…`. */
+function session(link) {
+    const m = str(link).match(/[?&]run=(sess_[0-9a-f]{32})\b/);
+    return m ? m[1] : null;
+}
+const list = (raw) => (Array.isArray(obj(raw).data) ? obj(raw).data : []);
+export async function automations(t) {
+    return list(await call(t, 'GET', '/v1/auto/automations'))
+        .map(read)
+        .filter((a) => a !== null);
+}
+export async function automation(t, id) {
+    const a = read(await call(t, 'GET', `/v1/auto/automations/${seg(id)}`));
+    if (!a)
+        throw new Error('The automation came back without an id');
+    return a;
+}
+export async function create(t, d) {
+    const a = read(await call(t, 'POST', '/v1/auto/automations', d));
+    if (!a)
+        throw new Error('The automation was created and came back without an id');
+    return a;
+}
+/** What changed between two drafts, field by field: what a save sends. */
+export function changes(was, now) {
+    const out = {};
+    for (const k of Object.keys(now)) {
+        if (JSON.stringify(was[k]) !== JSON.stringify(now[k]))
+            out[k] = now[k];
+    }
+    return out;
+}
+/** Change an automation. A change to anything but `enabled` makes the caller the person it runs as. */
+export async function save(t, id, change) {
+    const a = read(await call(t, 'PATCH', `/v1/auto/automations/${seg(id)}`, change));
+    if (!a)
+        throw new Error('The automation was saved and came back without an id');
+    return a;
+}
+export async function remove(t, id) {
+    await call(t, 'DELETE', `/v1/auto/automations/${seg(id)}`);
+}
+/** Start one run now. While one is going, the platform records this start as skipped. */
+export async function start(t, id) {
+    const run = obj(obj(await call(t, 'POST', `/v1/auto/automations/${seg(id)}/run`)).run);
+    return { id: str(run.id), status: str(run.status) };
 }
-/** A disabled draft. Creating it does not arm the trigger. */
-export async function add(t, name) {
-    const displayName = name.trim();
-    if (!displayName)
-        throw new Error('Name the automation');
-    const raw = await call(t, 'POST', '/v1/auto/flows', {
-        displayName,
-        trigger: {
-            name: 'trigger',
-            type: 'PIECE_TRIGGER',
-            displayName: 'Start',
-            strategy: 'MANUAL',
-            settings: { pieceName: 'core', triggerName: 'manual' },
-        },
-    });
-    const row = automation(raw);
-    if (!row)
-        throw new Error('The automation was created and did not come back named');
-    return row;
+export async function runs(t, id) {
+    return list(await call(t, 'GET', `/v1/auto/automations/${seg(id)}/runs`))
+        .map((raw) => {
+        const o = obj(raw);
+        return { id: str(o.id), status: str(o.status), at: str(o.at), finished: nullable(o.finished), summary: str(o.summary), session: session(o.transcript) };
+    })
+        .filter((r) => r.id);
 }
-/** Arm or disarm the trigger. A disarmed flow can still be started on demand. */
-export async function arm(t, id, on) {
-    await call(t, 'POST', `/v1/auto/flows/${seg(id)}/${on ? 'enable' : 'disable'}`);
+const DAYS = { mon: 'Mondays', tue: 'Tuesdays', wed: 'Wednesdays', thu: 'Thursdays', fri: 'Fridays', sat: 'Saturdays', sun: 'Sundays' };
+/** A schedule the way a person says it. */
+export function words(s) {
+    const zone = ` · ${s.tz || 'UTC'}`;
+    switch (s.kind) {
+        case 'manual':
+            return 'When you run it';
+        case 'hourly':
+            return `Every hour at :${(s.at ?? '00:00').slice(3) || '00'}`;
+        case 'daily':
+            return `Every day at ${s.at}${zone}`;
+        case 'weekdays':
+            return `Weekdays at ${s.at}${zone}`;
+        case 'weekly':
+            return `${DAYS[s.day ?? ''] ?? s.day} at ${s.at}${zone}`;
+        case 'cron':
+            return `Cron ${s.cron}${zone}`;
+    }
 }

package/lib/api/machines.d.ts

@@ -46,10 +46,11 @@ export declare function add(t: Target, what: {
     host?: string;
 }): Promise<Machine>;
 /**
- * Whether a machine is up. The platform reports a hand-registered machine at its
- * registered status until a heartbeat arrives, so `online` counts only once one has.
+ * A machine's status as a person reads it. The platform reports a hand-registered
+ * machine at its registered status until a heartbeat arrives, so `online` holds only
+ * once one has; before that it is `not seen yet`, and nothing is there to take a run.
  */
-export declare function live(m: Machine): boolean;
+export declare function state(m: Machine): string;
 /** Rename a machine, or drain it (`draining`) and bring it back (`online`). */
 export declare function change(t: Target, id: string, what: {
     label?: string;

package/lib/api/machines.js

@@ -58,11 +58,12 @@ export async function add(t, what) {
     return machine(await call(t, 'POST', '/v1/agent/targets', { label, kind: what.kind, ...(host ? { host } : {}) }));
 }
 /**
- * Whether a machine is up. The platform reports a hand-registered machine at its
- * registered status until a heartbeat arrives, so `online` counts only once one has.
+ * A machine's status as a person reads it. The platform reports a hand-registered
+ * machine at its registered status until a heartbeat arrives, so `online` holds only
+ * once one has; before that it is `not seen yet`, and nothing is there to take a run.
  */
-export function live(m) {
-    return m.status === 'online' && m.seen !== '';
+export function state(m) {
+    return m.status === 'online' && !m.seen ? 'not seen yet' : m.status;
 }
 /** Rename a machine, or drain it (`draining`) and bring it back (`online`). */
 export async function change(t, id, what) {

package/lib/api/models.d.ts

@@ -12,3 +12,9 @@ export declare const ENSO = "enso";
 /** A readable name for an id: `anthropic/claude-opus-5.5` → `Claude Opus 5.5`, `zen5-coder` → `Zen5 Coder`. */
 export declare function label(id: string): string;
 export declare function models(t: Target): Promise<Model[]>;
+/**
+ * The models an agent may think with on a surface a customer reads: Hanzo's own
+ * SKUs — Enso, Zen and the free tier — by their Hanzo names, and none of the
+ * embedding, guard, rerank, speech or vision models, which hold no conversation.
+ */
+export declare function skus(list: readonly Model[]): Model[];

package/lib/api/models.js

@@ -40,3 +40,11 @@ export async function models(t) {
         })),
     ];
 }
+/**
+ * The models an agent may think with on a surface a customer reads: Hanzo's own
+ * SKUs — Enso, Zen and the free tier — by their Hanzo names, and none of the
+ * embedding, guard, rerank, speech or vision models, which hold no conversation.
+ */
+export function skus(list) {
+    return list.filter((m) => /^(enso|zen\d*|free)(-[a-z0-9]+)*$/.test(m.id) && !/-(embedding|guard|rerank|scribe|vl|voice)\b/.test(m.id));
+}

package/lib/api/places.d.ts

@@ -14,7 +14,7 @@ export interface Place {
     label: string;
     /** laptop | gpu | cloud | … as the platform names it; 'sandbox' for the sandbox. */
     kind: string;
-    /** online | offline | draining; the sandbox is always online. */
+    /** online | offline | draining | not seen yet, as machines.ts `state` reads it; the sandbox is always online. */
     status: string;
     /** "10 vCPU / 122G / 1× GB10", when the machine reported one. */
     capacity: string;

package/lib/api/places.js

@@ -1,8 +1,8 @@
-import { machines } from './machines.js';
+import { machines, state } from './machines.js';
 export const SANDBOX = { id: '', label: 'Hanzo sandbox', kind: 'sandbox', status: 'online', capacity: '' };
 export async function places(t) {
     const list = await machines(t);
-    return [SANDBOX, ...list.map(({ id, label, kind, status, capacity }) => ({ id, label, kind, status, capacity }))];
+    return [SANDBOX, ...list.map((m) => ({ id: m.id, label: m.label, kind: m.kind, status: state(m), capacity: m.capacity }))];
 }
 /** Whether a run sent here now would be taken. */
 export const ready = (p) => p.status === 'online';

package/lib/automations.d.ts

@@ -0,0 +1,5 @@
+export declare function Automations(): import("react").JSX.Element;
+/** One automation: what it does and when, its switch, Run now, and its runs. `new` writes one. */
+export declare function Editor({ id }: {
+    id: string;
+}): import("react").JSX.Element;

package/lib/automations.js

@@ -0,0 +1,298 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Automations: work that runs itself in this organization, on a schedule or
+ * when someone presses Run. Each run is one Dev run.
+ *
+ *   -/automations        the org's automations; a row opens its editor
+ *   -/automations/new    a new one: its name, what it does, when it runs
+ *   -/automations/<id>   its editor, its switch, Run now and its runs
+ *
+ * Every read and write is /v1/auto/automations (api/auto.ts), scoped to the
+ * org the builder is in. A save sends only what changed; the switch sends
+ * `enabled` alone, so turning one on or off never changes who it runs as.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronLeft, Plus, Workflow } from '@hanzogui/lucide-icons-2';
+import { Button, Input, Switch, Textarea } from '@hanzo/ui';
+import { StatusDot } from '@hanzo/ui/chat';
+import { ChipSelect } from '@hanzo/ui/product';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { ago } from './ago.js';
+import { Access } from './access.js';
+import { automation, automations, changes, create, remove, runs, save, start, words } from './api/auto.js';
+import { Refusal } from './api/call.js';
+import { ENSO, label as named, models, skus } from './api/models.js';
+import { Choice, Confirm, Field, Line } from './customize/ui.js';
+import { useRead } from './data.js';
+import { useHost, useTarget } from './host.js';
+import { path } from './route.js';
+const zone = () => {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    }
+    catch {
+        return 'UTC';
+    }
+};
+const KINDS = [
+    { id: 'manual', label: 'When I run it' },
+    { id: 'hourly', label: 'Every hour' },
+    { id: 'daily', label: 'Every day' },
+    { id: 'weekdays', label: 'Weekdays' },
+    { id: 'weekly', label: 'Every week' },
+    { id: 'cron', label: 'Cron' },
+];
+const DAYS = [
+    { id: 'mon', label: 'Monday' },
+    { id: 'tue', label: 'Tuesday' },
+    { id: 'wed', label: 'Wednesday' },
+    { id: 'thu', label: 'Thursday' },
+    { id: 'fri', label: 'Friday' },
+    { id: 'sat', label: 'Saturday' },
+    { id: 'sun', label: 'Sunday' },
+];
+const PERMISSIONS = [
+    { id: 'ask', label: 'Ask first' },
+    { id: 'auto', label: 'Act on its own' },
+];
+/** A run's status as the rail's dot draws it. */
+const DOT = { succeeded: 'done', failed: 'error', running: 'running', queued: 'running', skipped: 'stopped', refused: 'stopped' };
+const WORD = { succeeded: 'Succeeded', failed: 'Failed', running: 'Running', queued: 'Queued', skipped: 'Skipped', refused: 'Refused' };
+const live = (s) => s === 'running' || s === 'queued';
+/** The schedule a kind starts from, keeping whatever of `was` still applies. */
+function shaped(kind, was) {
+    // A schedule that runs only when asked keeps no zone worth keeping: leaving it takes the person's own.
+    const tz = was.kind === 'manual' || !was.tz ? zone() : was.tz;
+    switch (kind) {
+        case 'manual':
+            return { kind };
+        case 'hourly':
+            return { kind, at: `00:${(was.at ?? '00:00').slice(3) || '00'}`, tz };
+        case 'daily':
+        case 'weekdays':
+            return { kind, at: was.kind === 'hourly' || !was.at ? '09:00' : was.at, tz };
+        case 'weekly':
+            return { kind, at: was.kind === 'hourly' || !was.at ? '09:00' : was.at, day: was.day || 'mon', tz };
+        case 'cron':
+            return { kind, cron: was.cron || '0 9 * * 1-5', tz };
+    }
+}
+/** What is wrong with a schedule before it is sent, or ''. */
+function unready(s) {
+    if ((s.kind === 'daily' || s.kind === 'weekdays' || s.kind === 'weekly') && !/^([01]?\d|2[0-3]):[0-5]\d$/.test(s.at ?? ''))
+        return 'Time of day is HH:MM on a 24-hour clock.';
+    if (s.kind === 'cron' && (s.cron ?? '').trim().split(/\s+/).length !== 5)
+        return 'Cron is five fields: minute, hour, day of month, month, day of week.';
+    return '';
+}
+/** A schedule as the platform reads it: an hourly minute in two digits. */
+function tidy(d) {
+    const s = d.schedule;
+    if (s.kind !== 'hourly')
+        return d;
+    const m = Math.min(59, Number((s.at ?? '').slice(3)) || 0);
+    return { ...d, schedule: { ...s, at: `00:${String(m).padStart(2, '0')}` } };
+}
+/** A local time and date for an RFC 3339 instant. */
+const local = (iso) => {
+    const d = new Date(iso);
+    return Number.isNaN(d.getTime()) ? '' : d.toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+};
+/** The editor's copy of an automation: what a save compares against. */
+const drafted = (a) => ({
+    name: a.name,
+    instructions: a.instructions,
+    model: a.model,
+    schedule: a.schedule,
+    permissions: a.permissions,
+    notify: a.notify,
+    enabled: a.draft ? true : a.enabled,
+});
+/** `next`, keeping each field of `cur` the person changed from `was` since. */
+function rebase(cur, was, next) {
+    const out = { ...next };
+    for (const k of Object.keys(next)) {
+        if (JSON.stringify(cur[k]) !== JSON.stringify(was[k]))
+            out[k] = cur[k];
+    }
+    return out;
+}
+/** A refusal in the platform's words; out of credit names where to add some. */
+function said(e) {
+    if (e instanceof Refusal && e.status === 402)
+        return `${e.message || 'This organization is out of credit.'} Add credit in Settings → Billing.`;
+    return e.message;
+}
+export function Automations() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const [q, setQ] = useState('');
+    const [problem, setProblem] = useState('');
+    const list = useRead(signed ? () => automations(t) : null, [], [t, signed]);
+    const needle = q.trim().toLowerCase();
+    const shown = list.value.filter((a) => !needle || a.name.toLowerCase().includes(needle) || a.instructions.toLowerCase().includes(needle));
+    const open = (id) => host.go(path({ kind: 'automation', id }));
+    const flip = async (a, on) => {
+        setProblem('');
+        try {
+            await save(t, a.id, { enabled: on });
+            list.reload();
+        }
+        catch (e) {
+            setProblem(`${a.name}: ${said(e)}`);
+        }
+    };
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: _jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(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: "Automations" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Work that runs itself in this organization, on a schedule or when you run it. Each run is a Dev run." })] }), _jsxs(Button, { size: "sm", shrink: 0, disabled: !signed, onPress: () => open('new'), children: [_jsx(Plus, { size: 14 }), "New automation"] })] }), _jsx(XStack, { justify: "flex-end", children: _jsx(YStack, { width: 240, maxW: "100%", children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search\u2026", "aria-label": "Search automations", disabled: !signed }) }) }), _jsx(Line, { children: problem }), list.error ? (_jsx(Empty, { says: 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: () => open('new'), 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: 220, children: "When" }), _jsx(SizableText, { size: "$1", color: "$soft", width: 150, children: "Last run" }), _jsx(SizableText, { size: "$1", color: "$soft", width: 56, style: { textAlign: 'right' }, children: "On" })] }), shown.map((a) => (_jsx(Item, { a: a, onOpen: () => open(a.id), onSwitch: (on) => void flip(a, on) }, a.id)))] }))] }) }));
+}
+/** One automation in the list: its name opens it, and its switch arms it. */
+function Item({ a, onOpen, onSwitch }) {
+    const about = useId();
+    return (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${a.name}`, "aria-describedby": about, onPress: onOpen, flex: 1, minW: 0, items: "center", gap: "$3", children: [_jsx(Workflow, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, minW: 0, style: { textAlign: 'left' }, children: a.name }), _jsxs(XStack, { id: about, items: "center", gap: "$3", children: [a.draft ? (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", children: "Draft" })) : null, _jsx(SizableText, { size: "$1", color: "$soft", width: 220, numberOfLines: 1, style: { textAlign: 'left' }, children: a.draft ? 'Needs instructions' : words(a.schedule) }), _jsxs(XStack, { width: 150, items: "center", gap: "$2", children: [a.last ? _jsx(StatusDot, { status: DOT[a.last.status] ?? 'idle' }) : null, _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: a.last ? `${WORD[a.last.status] ?? a.last.status} · ${ago(a.last.at)}` : 'Never run' })] })] })] }), _jsx(XStack, { width: 56, justify: "flex-end", children: _jsx(Switch, { checked: a.enabled, disabled: a.draft, onCheckedChange: onSwitch, "aria-label": `${a.name} on` }) })] }));
+}
+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] }));
+}
+const BLANK = () => ({ name: '', instructions: '', model: null, schedule: { kind: 'manual' }, permissions: 'ask', notify: false, enabled: true });
+/** One automation: what it does and when, its switch, Run now, and its runs. `new` writes one. */
+export function Editor({ id }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const fresh = id === 'new';
+    // `tick` reads the automation again; `beat` reads its runs again.
+    const [tick, setTick] = useState(0);
+    const [beat, setBeat] = useState(0);
+    const saved = useRead(signed && !fresh ? () => automation(t, id) : null, null, [t, signed, id, tick]);
+    const history = useRead(signed && !fresh ? () => runs(t, id) : null, [], [t, signed, id, beat]);
+    const catalog = useRead(signed ? () => models(t) : null, [], [t, signed]);
+    // `base` is what the form started from; a save sends what changed since, and only that.
+    const [base, setBase] = useState(BLANK);
+    const [d, setD] = useState(BLANK);
+    const [ready, setReady] = useState(fresh);
+    const [busy, setBusy] = useState('');
+    const [note, setNote] = useState('');
+    const [asking, setAsking] = useState(false);
+    const here = useRef(true);
+    useEffect(() => {
+        here.current = true;
+        return () => {
+            here.current = false;
+        };
+    }, []);
+    const a = saved.value;
+    // The switch of a saved automation is saved as it moves; of a new one or a draft, with the rest.
+    const switchesAlone = Boolean(a && !a.draft);
+    const change = changes(base, d);
+    if (switchesAlone)
+        delete change.enabled;
+    const dirty = fresh ? Boolean(d.name.trim() || d.instructions.trim()) : Object.keys(change).length > 0;
+    // What is saved now becomes the form's start, unless the person is mid-edit: then
+    // their edit stands, and what they did not touch is not sent back over it.
+    const clean = useRef(true);
+    clean.current = !dirty;
+    useEffect(() => {
+        if (!a)
+            return;
+        if (clean.current) {
+            setBase(drafted(a));
+            setD(drafted(a));
+        }
+        setReady(true);
+    }, [a]);
+    // A run going is read every 4s; a scheduled automation's runs every 30s, so a tick's run appears.
+    const going = history.value.some((r) => live(r.status));
+    const every = going ? 4000 : a && a.enabled && a.schedule.kind !== 'manual' ? 30_000 : 0;
+    useEffect(() => {
+        if (!every)
+            return;
+        const timer = setInterval(() => setBeat((n) => n + 1), every);
+        return () => clearInterval(timer);
+    }, [every]);
+    const set = (p) => setD((x) => ({ ...x, ...p }));
+    const setWhen = (p) => setD((x) => ({ ...x, schedule: { ...x.schedule, ...p } }));
+    const wrong = unready(d.schedule);
+    const items = useMemo(() => {
+        const list = skus(catalog.value).filter((m) => m.id !== ENSO);
+        const kept = d.model && !list.some((m) => m.id === d.model) ? [{ id: d.model, label: named(d.model) }] : [];
+        return [{ id: ENSO, label: 'Enso', hint: 'picks a model for each step' }, ...kept, ...list];
+    }, [catalog.value, d.model]);
+    const chosen = items.find((m) => m.id === (d.model ?? ENSO)) ?? items[0];
+    const zones = useMemo(() => {
+        try {
+            return ['UTC', ...Intl.supportedValuesOf('timeZone').filter((z) => z !== 'UTC')].map((z) => ({ id: z, label: z }));
+        }
+        catch {
+            return [{ id: 'UTC', label: 'UTC' }];
+        }
+    }, []);
+    const act = async (what, work) => {
+        setBusy(what);
+        setNote('');
+        try {
+            await work();
+        }
+        catch (e) {
+            setNote(said(e));
+        }
+        finally {
+            setBusy('');
+        }
+    };
+    const keep = () => act('save', async () => {
+        if (fresh) {
+            const made = await create(t, tidy(d));
+            // Only while still here: a person who left during the create stays where they went.
+            if (here.current)
+                host.go(path({ kind: 'automation', id: made.id }), { replace: true });
+            return;
+        }
+        const sent = tidy(d);
+        const send = changes(base, sent);
+        if (switchesAlone)
+            delete send.enabled;
+        const now = Object.keys(send).length ? await save(t, id, send) : a;
+        // What was typed while the save was in flight stands.
+        setBase(drafted(now));
+        setD((cur) => rebase(cur, sent, drafted(now)));
+        setTick((n) => n + 1);
+        setNote('Saved.');
+    });
+    const flip = (on) => {
+        if (!switchesAlone)
+            return set({ enabled: on });
+        void act('switch', async () => {
+            await save(t, id, { enabled: on });
+            setTick((n) => n + 1);
+        });
+    };
+    const go = () => act('run', async () => {
+        const run = await start(t, id);
+        setBeat((n) => n + 1);
+        if (run.status === 'skipped')
+            setNote('Not started: the previous run is still going.');
+    });
+    const back = (how) => host.go(path({ kind: 'screen', screen: 'automations' }), how);
+    if (!signed)
+        return _jsx(Page, { title: "Automation", onBack: () => back(), says: "Sign in to see this organization's automations." });
+    if (!fresh && saved.error && !a)
+        return _jsx(Page, { title: "Automation", onBack: () => back(), says: saved.error.message });
+    if (!ready)
+        return _jsx(Page, { title: "Automation", onBack: () => back(), says: "Reading the automation\u2026" });
+    const s = d.schedule;
+    const on = switchesAlone ? Boolean(a?.enabled) : d.enabled;
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 760, mx: "auto", gap: "$5", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => back(), "aria-label": "All automations", children: [_jsx(ChevronLeft, { size: 14 }), "Automations"] }), _jsx(XStack, { flex: 1 }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: switchesAlone ? (on ? 'On' : 'Off') : on ? 'On when saved' : 'Off when saved' }), _jsx(Switch, { checked: on, disabled: busy === 'switch', onCheckedChange: flip, "aria-label": switchesAlone ? `${a.name} on` : 'On when saved' })] }), a && !a.draft ? (_jsx(Button, { size: "sm", variant: "outline", disabled: Boolean(busy) || dirty, onPress: () => void go(), children: busy === 'run' ? 'Starting…' : 'Run now' })) : null] }), _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", numberOfLines: 1, children: fresh ? 'New automation' : a?.name }), _jsx(SizableText, { size: "$2", color: "$soft", children: fresh
+                                    ? 'Name it, say what it should do, and when. It runs as you, in this organization.'
+                                    : a?.draft
+                                        ? 'A draft: say what it should do and save it, and it runs.'
+                                        : [words(a.schedule), a.next && a.enabled ? `next ${local(a.next)}` : a.schedule.kind === 'manual' ? '' : 'off'].filter(Boolean).join(' · ') })] }), _jsx(Field, { label: "Name", children: _jsx(Input, { value: d.name, onChangeText: (v) => set({ name: v }), placeholder: "Morning briefing", "aria-label": "Automation name", autoFocus: fresh }) }), _jsx(Field, { label: "Instructions", hint: "What the agent does each run. It works in a Dev sandbox with this organization's connectors, MCP servers and skills.", children: _jsx(Textarea, { value: d.instructions, onChangeText: (v) => set({ instructions: v }), placeholder: "Summarize what needs my attention today across calendar, email and messages.", "aria-label": "Instructions", rows: 7 }) }), _jsx(Field, { label: "When it runs", hint: s.kind === 'cron' ? 'Five fields: minute, hour, day of month, month, day of week.' : undefined, children: _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", items: "center", children: [_jsx(ChipSelect, { name: "When it runs", label: KINDS.find((k) => k.id === s.kind).label, chosen: KINDS.find((k) => k.id === s.kind), items: KINDS, onChange: (k) => set({ schedule: shaped(k.id, s) }), placement: "bottom-start", width: 200 }), s.kind === 'weekly' ? _jsx(ChipSelect, { name: "Day", label: DAYS.find((x) => x.id === s.day)?.label ?? 'Monday', chosen: DAYS.find((x) => x.id === s.day), items: DAYS, onChange: (x) => setWhen({ day: x.id }), placement: "bottom-start", width: 180 }) : null, s.kind === 'daily' || s.kind === 'weekdays' || s.kind === 'weekly' ? (_jsx(YStack, { width: 110, children: _jsx(Input, { value: s.at ?? '', onChangeText: (v) => setWhen({ at: v.trim() }), placeholder: "09:00", "aria-label": "Time of day", inputMode: "text" }) })) : null, s.kind === 'hourly' ? (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "at minute" }), _jsx(YStack, { width: 70, children: _jsx(Input, { value: (s.at ?? '00:00').slice(3), onChangeText: (v) => setWhen({ at: `00:${v.replace(/\D/g, '').slice(0, 2)}` }), placeholder: "00", "aria-label": "Minute", inputMode: "numeric" }) })] })) : null, s.kind === 'cron' ? (_jsx(YStack, { width: 200, children: _jsx(Input, { value: s.cron ?? '', onChangeText: (v) => setWhen({ cron: v }), placeholder: "0 9 * * 1-5", "aria-label": "Cron", autoCapitalize: "none" }) })) : null, s.kind !== 'manual' ? _jsx(ChipSelect, { name: "Time zone", label: s.tz || 'UTC', chosen: { id: s.tz || 'UTC', label: s.tz || 'UTC' }, items: zones, onChange: (z) => setWhen({ tz: z.id }), placeholder: "Search zones\u2026", placement: "bottom-start", width: 260 }) : null] }) }), _jsx(Field, { label: "Model", children: _jsx(XStack, { children: _jsx(ChipSelect, { name: "Model", label: chosen.label, chosen: chosen, items: items, footer: _jsx(Access, { items: items }), onChange: (m) => set({ model: m.id === ENSO ? null : m.id }), placeholder: "Search models\u2026", placement: "bottom-start", loading: catalog.loading, error: catalog.error?.message ?? null }) }) }), _jsx(Field, { label: "Permissions", hint: d.permissions === 'auto' ? 'Works and uses connectors without stopping.' : 'Reads and researches, changes nothing, and ends with the actions it would take for you to approve.', children: _jsx(Choice, { label: "Permissions", value: d.permissions, options: PERMISSIONS, onChange: (p) => set({ permissions: p }) }) }), _jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Email me when a run ends" }), _jsx(SizableText, { size: "$1", color: "$soft", children: "One line on how it went, with a link to the run." })] }), _jsx(Switch, { checked: d.notify, onCheckedChange: (v) => set({ notify: v }), "aria-label": "Email me when a run ends" })] }), _jsx(Line, { children: note || (dirty ? wrong : '') }), _jsxs(XStack, { gap: "$2", items: "center", children: [a ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: Boolean(busy), onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), a && dirty ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: Boolean(busy), onPress: () => {
+                                    setBase(drafted(a));
+                                    setD(drafted(a));
+                                }, children: "Discard changes" })) : null, _jsx(Button, { size: "sm", disabled: Boolean(busy) || !dirty || !d.name.trim() || !d.instructions.trim() || Boolean(wrong), onPress: () => void keep(), children: busy === 'save' ? 'Saving…' : fresh ? 'Create' : 'Save' })] }), a ? (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Runs" }), history.error && !history.value.length ? (_jsx(Line, { children: history.error.message })) : !history.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: history.loading ? 'Reading its runs…' : a.draft ? 'It runs once its instructions are saved.' : 'No runs yet. Run now starts one.' })) : (_jsx(YStack, { role: "list", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", "aria-label": "Run history", children: history.value.map((r, i) => (_jsxs(XStack, { role: "listitem", items: "flex-start", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsx(YStack, { pt: "$1", children: _jsx(StatusDot, { status: DOT[r.status] ?? 'idle' }) }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: `${WORD[r.status] ?? r.status} · ${local(r.at)}` }), _jsx(SizableText, { size: "$1", color: "$soft", style: { whiteSpace: 'pre-wrap' }, children: r.summary || (live(r.status) ? 'Working…' : '') })] }), r.session ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => host.go(r.session), "aria-label": `Open the Dev run of ${local(r.at)}`, children: "Open run" })) : null] }, r.id))) }))] })) : null] }), a ? (_jsx(Confirm, { what: a.name, says: "It stops running, and its schedule and its runs go with it. A run going now is stopped.", open: asking, onOpenChange: setAsking, onYes: async () => {
+                    await remove(t, a.id);
+                    back({ replace: true });
+                } })) : null] }));
+}
+function Page({ title, says, onBack }) {
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: _jsxs(YStack, { width: "100%", maxW: 760, mx: "auto", gap: "$4", children: [_jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: onBack, "aria-label": "All automations", children: [_jsx(ChevronLeft, { size: 14 }), "Automations"] }) }), _jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", children: says })] }) }));
+}

package/lib/builder.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  *   /            New — the empty state, a composer over the codebase it works on
  *   /sess_…      one run, live
- *   /-/automations repeating work
+ *   /-/automations work that runs itself; /-/automations/<id> one, to edit and run
    /-/codebases the forge's repositories
  *   /-/sync      bring granted repositories onto the forge
  *   /-/projects  the forge's boards
@@ -36,6 +36,7 @@ import { useMemo, useState } from 'react';
 import { safe } from './api/projects.js';
 import { pinBoard } from './choice.js';
 import { Customize } from './customize/index.js';
+import { Editor } from './automations.js';
 import { useKept, useRecents } from './data.js';
 import { Forge } from './forge.js';
 import { HostProvider, useHost, useTarget } from './host.js';
@@ -100,7 +101,7 @@ export function nav(host, go) {
         { id: 'projects', label: 'Projects', icon: _jsx(Kanban, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'projects' })), active: screen === 'projects' },
         { 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(SlidersHorizontal, { size: 16 }), onPress: () => go(path({ kind: 'customize', tab: 'skills' })), active: r.kind === 'customize' || screen === 'mcp' },
-        { id: 'automations', label: 'Automations', icon: _jsx(Workflow, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' },
+        { id: 'automations', label: 'Automations', icon: _jsx(Workflow, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' || r.kind === 'automation' },
     ];
     const more = [
         { id: 'codebases', label: 'Codebase', icon: _jsx(FolderGit2, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), active: screen === 'codebases' },
@@ -141,6 +142,8 @@ function Pane({ onStarted }) {
         return _jsx(Settings, { section: r.section });
     if (r.kind === 'customize')
         return _jsx(Customize, { tab: r.tab });
+    if (r.kind === 'automation')
+        return _jsx(Editor, { id: r.id }, r.id);
     if (r.kind === 'screen') {
         if (r.screen === 'artifacts')
             return _jsx(Artifacts, {});

package/lib/forge.js

@@ -7,11 +7,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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 { ChevronDown, GitBranch, Plus, Settings } 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 { ago } from './ago.js';
 import { codebases, create } 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';
@@ -51,56 +52,6 @@ export function Forge({ screen }) {
         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.message);
-        }
-    };
-    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: "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", shrink: 0, disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New automation"] })] }), _jsx(XStack, { justify: "flex-end", children: _jsx(YStack, { width: 240, maxW: "100%", 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.message);
-        }
-        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();
@@ -177,7 +128,7 @@ function Codebases() {
         pinCodebase(host.org, c);
         host.go('');
     };
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", 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, { px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", shrink: 0, "$max-md": { display: 'none' }, children: _jsx(SizableText, { size: "$2", color: "$ink", children: "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 ? (_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] }), _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…' : when(c.updated) })] }, `${c.org}/${c.name}`))), _jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: `Showing ${from}–${to} of ${shown.length}` }), _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Previous page", disabled: safePage === 0, onPress: () => setPage(safePage - 1), children: _jsx(SizableText, { size: "$1", color: safePage === 0 ? '$soft' : '$ink', children: "Prev" }) }), _jsx(SizableText, { size: "$1", color: "$soft", children: `${safePage + 1} / ${pages}` }), _jsx(XStack, { render: "button", "aria-label": "Next page", disabled: safePage >= pages - 1, onPress: () => setPage(safePage + 1), children: _jsx(SizableText, { size: "$1", color: safePage >= pages - 1 ? '$soft' : '$ink', children: "Next" }) })] })] })] }))] }), _jsx(NewRepo, { open: making, onOpenChange: setMaking, onCreate: async (name, description) => {
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", 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, { px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", shrink: 0, "$max-md": { display: 'none' }, children: _jsx(SizableText, { size: "$2", color: "$ink", children: "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 ? (_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] }), _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);
@@ -206,23 +157,6 @@ function NewRepo({ open, onOpenChange, onCreate, }) {
     };
     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();

package/lib/route.d.ts

@@ -4,6 +4,7 @@
  *   ''              the empty state: a new run
  *   sess_<32 hex>   one run
  *   -/<screen>      a builder screen
+ *   -/automations/<id>      one automation's editor and runs; `new` writes one
  *   -/settings[/<section>]  a section of Settings
  *   -/customize[/<tab>]     skills, connectors and plugins: what the agent brings to a run
  *   -/plans                 the plans an organization can be on
@@ -37,9 +38,14 @@ export type Route = {
 } | {
     kind: 'project';
     slug: string;
+} | {
+    kind: 'automation';
+    id: string;
 };
 export declare const SESSION: RegExp;
 export declare const SLUG: RegExp;
+/** An automation's id, or `new` for one not yet written. */
+export declare const AUTOMATION: RegExp;
 export declare function route(path: string): Route;
 /** The path for a route — the inverse of `route`. */
 export declare function path(r: Route): string;

package/lib/route.js

@@ -19,6 +19,8 @@ export const SECTIONS = [
 export const TABS = ['skills', 'connectors', 'plugins', 'agents'];
 export const SESSION = /^sess_[0-9a-f]{32}$/;
 export const SLUG = /^[a-z0-9]([a-z0-9-]{0,38}[a-z0-9])?$/;
+/** An automation's id, or `new` for one not yet written. */
+export const AUTOMATION = /^(flow_[0-9a-f]{32}|new)$/;
 const SCREENS = ['artifacts', 'templates', 'codebases', 'projects', 'issues', 'automations', 'sync', 'mcp', 'plans'];
 export function route(path) {
     const p = path.replace(/^\/+|\/+$/g, '');
@@ -32,6 +34,10 @@ export function route(path) {
         const tab = (p.slice('-/customize/'.length) || 'skills');
         return TABS.includes(tab) ? { kind: 'customize', tab } : { kind: 'new' };
     }
+    if (p.startsWith('-/automations/')) {
+        const id = p.slice('-/automations/'.length);
+        return AUTOMATION.test(id) ? { kind: 'automation', id } : { kind: 'new' };
+    }
     if (p.startsWith('-/')) {
         const s = p.slice(2);
         return SCREENS.includes(s) ? { kind: 'screen', screen: s } : { kind: 'new' };
@@ -55,5 +61,7 @@ export function path(r) {
             return r.tab === 'skills' ? '-/customize' : `-/customize/${r.tab}`;
         case 'project':
             return r.slug;
+        case 'automation':
+            return `-/automations/${r.id}`;
     }
 }

package/lib/section.js

@@ -45,7 +45,7 @@ export function DevSection({ host, onPick, label = 'Runs', children, }) {
         onPick?.();
     };
     const screen = r.kind === 'screen' ? r.screen : '';
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarItem, { icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), active: r.kind === 'new', onPress: () => go(''), children: "New run" }), _jsx(SidebarItem, { icon: _jsx(Workflow, { size: 16, "aria-hidden": true }), active: screen === 'automations', onPress: () => go(path({ kind: 'screen', screen: 'automations' })), children: "Automations" }), _jsx(SidebarItem, { icon: _jsx(FolderGit2, { size: 16, "aria-hidden": true }), active: screen === 'codebases', onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), children: "Codebase" }), _jsx(SidebarItem, { icon: _jsx(Kanban, { size: 16, "aria-hidden": true }), active: screen === 'projects', onPress: () => go(path({ kind: 'screen', screen: 'projects' })), children: "Projects" }), _jsx(SidebarItem, { icon: _jsx(CircleDot, { size: 16, "aria-hidden": true }), active: screen === 'issues', onPress: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarItem, { icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), active: r.kind === 'new', onPress: () => go(''), children: "New run" }), _jsx(SidebarItem, { icon: _jsx(Workflow, { size: 16, "aria-hidden": true }), active: screen === 'automations' || r.kind === 'automation', onPress: () => go(path({ kind: 'screen', screen: 'automations' })), children: "Automations" }), _jsx(SidebarItem, { icon: _jsx(FolderGit2, { size: 16, "aria-hidden": true }), active: screen === 'codebases', onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), children: "Codebase" }), _jsx(SidebarItem, { icon: _jsx(Kanban, { size: 16, "aria-hidden": true }), active: screen === 'projects', onPress: () => go(path({ kind: 'screen', screen: 'projects' })), children: "Projects" }), _jsx(SidebarItem, { icon: _jsx(CircleDot, { size: 16, "aria-hidden": true }), active: screen === 'issues', onPress: () => {
                     pinBoard(host.org, '');
                     go(path({ kind: 'screen', screen: 'issues' }));
                 }, children: "Issues" }), _jsx(SidebarItem, { icon: _jsx(SlidersHorizontal, { size: 16, "aria-hidden": true }), active: r.kind === 'customize', onPress: () => go(path({ kind: 'customize', tab: 'connectors' })), children: "Customize" }), _jsx(SidebarItem, { icon: _jsx(Blocks, { size: 16, "aria-hidden": true }), active: screen === 'artifacts', onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), children: "Artifacts" }), _jsx(SidebarItem, { icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), active: screen === 'templates', onPress: () => go(path({ kind: 'screen', screen: 'templates' })), children: "Templates" }), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: () => go(s.id), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));

package/lib/settings/machines.js

@@ -11,7 +11,7 @@ import { MoreHorizontal, Plus } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
 import { CopyButton } from '@hanzo/ui/product';
 import { useEffect, useState } from 'react';
-import { add, change, KINDS, key, live, machines, remove } from '../api/machines.js';
+import { add, change, KINDS, key, machines, remove, state } from '../api/machines.js';
 import { Confirm, Rename } from '../ask.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
@@ -26,11 +26,10 @@ const UNREAD = [];
 /** The line under a machine: what it is, where, how big, and what it is doing. */
 function about(m) {
     const load = m.running ? `${m.running} running` : m.sessions ? `${m.sessions} runs` : '';
-    const state = m.status === 'online' && !live(m) ? 'not seen yet' : m.status || 'unknown';
-    return [state, m.kind, m.host && m.host !== m.label ? m.host : '', m.capacity, load].filter(Boolean).join(' · ');
+    return [state(m) || 'unknown', m.kind, m.host && m.host !== m.label ? m.host : '', m.capacity, load].filter(Boolean).join(' · ');
 }
 function Dot({ m }) {
-    const on = live(m);
+    const on = state(m) === 'online';
     return (_jsx(YStack, { width: 8, height: 8, rounded: 999, shrink: 0, bg: on ? '$green10' : 'transparent', borderWidth: on ? 0 : 1, borderColor: m.status === 'draining' ? '$yellow10' : '$soft', "aria-hidden": true }));
 }
 export function Machines() {
@@ -66,15 +65,15 @@ export function Machines() {
             setNote(e.message);
         }
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Machines", detail: "Your organization\u2019s own computers. A run sent to one runs there instead of in the Hanzo sandbox." }), _jsxs(Group, { title: "Link a machine", detail: "Run these on it. It registers under its hostname, and stays online while hanzo link runs.", children: [_jsxs(XStack, { items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": "Link commands", style: { ...mono, whiteSpace: 'pre-wrap' }, children: LINK }), _jsx(CopyButton, { value: LINK, label: "Copy the commands" })] }), _jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }) })] }), _jsx(Group, { title: "Linked", children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.value === UNREAD ? (_jsx(Soft, { children: "Reading machines\u2026" })) : list.value.length === 0 ? (_jsx(Soft, { children: "No machine is linked yet." })) : (_jsx(Card, { children: list.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(Dot, { m: m }), title: m.label, detail: about(m), trailing: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${m.label}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
-                                { key: 'rename', label: 'Rename', onSelect: () => setRenaming(m) },
-                                m.status === 'draining'
-                                    ? { key: 'online', label: 'Take runs again', onSelect: () => void drain(m, 'online') }
-                                    : { key: 'drain', label: 'Drain', description: 'Finish what it has, take nothing new', onSelect: () => void drain(m, 'draining') },
-                                { key: 'key', label: 'Claim key', onSelect: () => setKeying(m) },
-                                { type: 'separator' },
-                                { key: 'remove', label: 'Remove', destructive: true, onSelect: () => setRemoving(m) },
-                            ] }) }, m.id))) })) }), _jsx(Note, { children: note }), _jsx(Adding, { open: adding, onOpenChange: setAdding, onAdded: (m) => {
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Machines", detail: "Your organization\u2019s own computers. A run sent to one runs there instead of in the Hanzo sandbox." }), _jsxs(Group, { title: "Link a machine", detail: "Run these on it. It registers under its hostname, and stays online while hanzo link runs.", children: [_jsxs(XStack, { items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": "Link commands", style: { ...mono, whiteSpace: 'pre-wrap' }, children: LINK }), _jsx(CopyButton, { value: LINK, label: "Copy the commands" })] }), _jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }) })] }), _jsxs(Group, { title: "Linked", children: [list.value === UNREAD ? (_jsx(Soft, { children: list.error ? list.error.message : 'Reading machines…' })) : list.value.length === 0 ? (_jsx(Soft, { children: "No machine is linked yet." })) : (_jsx(Card, { children: list.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(Dot, { m: m }), title: m.label, detail: about(m), trailing: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${m.label}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
+                                    { key: 'rename', label: 'Rename', onSelect: () => setRenaming(m) },
+                                    m.status === 'draining'
+                                        ? { key: 'online', label: 'Take runs again', onSelect: () => void drain(m, 'online') }
+                                        : { key: 'drain', label: 'Drain', description: 'Finish what it has, take nothing new', onSelect: () => void drain(m, 'draining') },
+                                    { key: 'key', label: 'Claim key', onSelect: () => setKeying(m) },
+                                    { type: 'separator' },
+                                    { key: 'remove', label: 'Remove', destructive: true, onSelect: () => setRemoving(m) },
+                                ] }) }, m.id))) })), list.error && list.value !== UNREAD ? _jsx(Soft, { children: list.error.message }) : null] }), _jsx(Note, { children: note }), _jsx(Adding, { open: adding, onOpenChange: setAdding, onAdded: (m) => {
                     setNote(`${m.label} is registered`);
                     list.reload();
                 } }), _jsx(Rename, { open: renaming !== null, onOpenChange: (o) => !o && setRenaming(null), title: "Rename machine", name: renaming?.label ?? '', 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.39",
+  "version": "0.2.41",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",