babavoss 0.0.1 → 0.0.2

package/src/gui/inspector.tsx

@@ -0,0 +1,47 @@
+// The inspector: the state as it is. Resources, entities with their
+// components, jobs with their status, and the round. Layer zero: a filter
+// by component, and despawn.
+import { useState } from "react";
+import type { Manifest } from "../ecs/baba.ts";
+import { useBabaState } from "../web/state.tsx";
+import { Button, Input, Table } from "../web/ui.tsx";
+
+export function Inspector({ manifest }: { manifest: Manifest }) {
+  const { w, raw, ready, round } = useBabaState();
+  const [filter, setFilter] = useState("");
+  if (!ready) return <p className="bv-muted">Reading the state…</p>;
+  const names = Object.keys(manifest.components);
+  const wanted = filter.trim();
+  const entities = w.all().filter((e) => !wanted || wanted in w.of(e));
+  const resources = Object.entries(manifest.resources).map(([n, r]) => ({ name: n, system: r.owner, value: JSON.stringify(w.get({ kind: "resource", name: n } as never)) }));
+  return (
+    <div>
+      <p className="bv-muted">round {round} · {w.all().length} entities · {w.jobs.length} jobs</p>
+      {resources.length > 0 && (
+        <section className="gui-section"><h2>Resources</h2><Table columns={["name", "system", "value"]} rows={resources} /></section>
+      )}
+      <section className="gui-section">
+        <h2>Entities</h2>
+        <div className="gui-filter">
+          <Input list="gui-components" placeholder="with component…" value={filter} onChange={(e) => setFilter(e.target.value)} />
+          <datalist id="gui-components">{names.map((n) => <option key={n} value={n} />)}</datalist>
+          {wanted && <Button variant="quiet" onClick={() => setFilter("")}>clear</Button>}
+        </div>
+        {entities.length === 0 && <p className="bv-muted">No entity{wanted ? ` with ${wanted}` : ""}.</p>}
+        {entities.map((e) => (
+          <div key={e} className="gui-entity">
+            <code>#{e}</code>
+            <div className="gui-parts">
+              {Object.entries(w.of(e)).map(([n, v]) => <span key={n} className="gui-part"><b>{n}</b><pre>{v === true ? "" : JSON.stringify(v)}</pre></span>)}
+              {w.jobs.filter((j) => j.entity === e).map((j) => <span key={j.effect} className="gui-part bv-muted"><b>{j.effect}</b><pre>{j.status}</pre></span>)}
+            </div>
+            <Button variant="quiet" onClick={() => void raw({ op: "despawn", entity: e })}>despawn</Button>
+          </div>
+        ))}
+      </section>
+      {w.jobs.length > 0 && (
+        <section className="gui-section"><h2>Jobs</h2><Table columns={["effect", "entity", "args", "status"]} rows={w.jobs.map((j) => ({ effect: j.effect, entity: j.entity ?? "baba", args: JSON.stringify(j.args), status: j.status }))} /></section>
+      )}
+    </div>
+  );
+}

package/src/gui/levels.tsx

@@ -0,0 +1,73 @@
+// voss's root: the picker. One voss runs on this machine, and its root page
+// lists the babas it knows, to open one, and makes a new one. A page inside
+// a baba is that baba only; Leave brings a tab back here. The root has no
+// state: its shell is the same frame over page state, the babas as its
+// apps, and its one window is the New baba wizard.
+import { useEffect, useMemo, useState } from "react";
+import { DesktopFrame, type Picture, type AppRow } from "../desktop/view.tsx";
+import type { IconShape } from "../desktop/icons.ts";
+import type { Hand } from "../web/app.tsx";
+import { theme } from "./theme.ts";
+import { Folders, getJson, type Project } from "./wizard.tsx";
+
+/** The babas this machine knows, and its home, from the daemon; null until they arrive. */
+export function useProjects(): { projects: Project[] | null; home: string } {
+  const [state, setState] = useState<{ projects: Project[] | null; home: string }>({ projects: null, home: "" });
+  useEffect(() => {
+    let live = true;
+    getJson<{ projects: Project[]; home?: string }>("/api/projects").then((j) => { if (live) setState({ projects: j.projects, home: j.home ?? "" }); }, () => { if (live) setState({ projects: [], home: "" }); });
+    return () => { live = false; };
+  }, []);
+  return state;
+}
+
+const href = (name: string) => `/${encodeURIComponent(name)}/`;
+const plus: readonly IconShape[] = [{ tag: "path", attrs: { d: "M5 12h14" } }, { tag: "path", attrs: { d: "M12 5v14" } }];
+const eyes: readonly IconShape[] = [{ tag: "circle", attrs: { cx: "8.1", cy: "12", r: "4.3" } }, { tag: "circle", attrs: { cx: "17.2", cy: "12", r: "3" } }];
+/** The wizard's app, the picker's one window. */
+export const NEW = "new";
+/** A baba's app key in the picker; a baba may be called `new`, so the key says which it is. */
+export const babaKey = (name: string) => `baba:${name}`;
+
+/**
+ * The picker's rows as the frame's apps: every baba under Babas, a baba inside another under its parent's
+ * title, in the order voss lists them; then New baba under Make. Pure: the same from the same list.
+ */
+export function pickerApps(projects: Project[]): AppRow[] {
+  const byName = new Map(projects.map((p) => [p.name, p]));
+  const rows: AppRow[] = projects.map((p, i) => {
+    const parent = p.parent ? byName.get(p.parent) : undefined;
+    return { entity: 10 + i, key: babaKey(p.name), title: p.title, group: parent ? `In ${parent.title}` : "Babas", icon: "", many: false, order: i, drawing: eyes };
+  });
+  rows.push({ entity: 2, key: NEW, title: "New baba", group: "Make", icon: "plus", many: false, order: projects.length, drawing: plus });
+  return rows;
+}
+
+type Win = Picture["windows"][number];
+const wizard: Win = { entity: 3, session: 1, app: 2, path: "/", title: "", memory: {} };
+
+/** The picker: the frame over page state, the babas as its apps; choosing one goes to its page, New baba opens the wizard in front. */
+export function Root() {
+  const { projects, home } = useProjects();
+  const [open, setOpen] = useState(false);
+  const apps = useMemo(() => pickerApps(projects ?? []), [projects]);
+  const picture: Picture = {
+    session: { entity: 1, key: "main", selected: open ? wizard.entity : null, theme: "system" }, theme: theme(),
+    apps,
+    windows: open ? [wizard] : [],
+  };
+  // The shell's verbs, kept in the page: a baba opens as another page; the wizard is the one window here.
+  const hand: Hand = { fire: (name, args) => {
+    const a = (args ?? {}) as { app?: string; window?: number };
+    if (name === "desktop-open") {
+      if (a.app === NEW) setOpen(true);
+      else if (a.app?.startsWith("baba:")) location.assign(href(a.app.slice(5)));
+    } else if (name === "desktop-select") setOpen(a.window === wizard.entity);
+    else if (name === "desktop-close") setOpen(false);
+  } };
+  return <div className="gui-view">
+    <DesktopFrame picture={picture} title="voss" hand={hand} render={() => (
+      <Folders home={home} onBack={() => setOpen(false)} onOpened={(name) => location.assign(href(name))} />
+    )} />
+  </div>;
+}

package/src/gui/promptware.tsx

@@ -0,0 +1,68 @@
+// The promptware drawer: the baba's know-how for agents as it declares it,
+// the harness as the baba declares it, the plan of each output, and a sync.
+// Read from the state by the promptware system's names.
+import { useEffect, useState } from "react";
+import type { Manifest } from "../ecs/baba.ts";
+import { useBabaState } from "../web/state.tsx";
+import { Button, Rows, Row, Table } from "../web/ui.tsx";
+import { ErrorText } from "./runner.tsx";
+
+interface Plan { auto: boolean; lastSync: number | null; pending: number; error: string | null; outputs: { path: string; harness: string; status: string; action: string | null; reason: string }[] }
+
+export function Promptware({ manifest }: { manifest: Manifest }) {
+  const { fire, read, ready, round } = useBabaState();
+  const [plan, setPlan] = useState<Plan | null>(null);
+  const [error, setError] = useState<unknown>(null);
+  useEffect(() => { if (ready) read("promptware-plan").then((p) => setPlan(p as Plan), setError); }, [ready, round]);
+  if (!("pwStatus" in manifest.resources)) return <p className="bv-muted">This baba has no promptware system.</p>;
+  if (!ready) return <p className="bv-muted">Reading the state…</p>;
+  const act = (name: string, args: unknown) => { setError(null); return fire(name, args as never).catch((e: unknown) => { setError(e); throw e; }); };
+  return (
+    <div>
+      {error !== null && <ErrorText error={error} />}
+      <Declared manifest={manifest} />
+      <section className="gui-section">
+        <h2>Outputs</h2>
+        <div className="bv-form-actions">
+          <Button variant="primary" onClick={() => void act("promptware-sync", {}).catch(() => {})}>Sync now</Button>
+          {plan && <span className="bv-muted">{plan.pending ? `${plan.pending} to write` : "up to date"} · {plan.auto ? "writes on every change" : "writes on sync"}{plan.lastSync ? ` · synced ${new Date(plan.lastSync).toLocaleTimeString()}` : ""}</span>}
+        </div>
+        {plan?.error && <p className="bv-error">{plan.error}</p>}
+        {plan && plan.outputs.length > 0 && <Table columns={["path", "harness", "status", "action", "reason"]} rows={plan.outputs.map((o) => ({ ...o, action: o.action ?? "" }))} />}
+      </section>
+      <Harness manifest={manifest} />
+    </div>
+  );
+}
+
+/** What the baba tells agents, read-only here: it is code under .baba/promptware/. */
+function Declared({ manifest }: { manifest: Manifest }) {
+  const pw = manifest.promptware;
+  const skills = Object.entries(pw.skills);
+  return (
+    <section className="gui-section">
+      <h2>Promptware</h2>
+      {!pw.context && skills.length === 0 && pw.hooks.length === 0 && <p className="bv-muted">Nothing declared yet: give the baba a `context(...)`, a `skill(...)` or a `hook(...)` under `promptware`.</p>}
+      {pw.context && <p className="bv-muted">{pw.context.length} characters of context, {pw.hooks.length} hook{pw.hooks.length === 1 ? "" : "s"}.</p>}
+      {pw.hooks.length > 0 && <Rows>{pw.hooks.map((h, i) => <Row key={i} hint={`${h.on}${h.match ? ` on ${h.match}` : ""}${h.strict ? " · strict" : ""}`}><code>{h.action}</code></Row>)}</Rows>}
+      {skills.length > 0 && <Rows>{skills.map(([k, sk]) => <Row key={k} hint={sk.description}><code>{k}</code></Row>)}</Rows>}
+      <p className="bv-muted">The promptware is the baba's code: edit it under .baba/promptware/; the files below follow.</p>
+    </section>
+  );
+}
+
+/** The harness as the baba declares it, `baba({ harness })`, read-only. */
+function Harness({ manifest }: { manifest: Manifest }) {
+  const h = manifest.harness;
+  return (
+    <section className="gui-section">
+      <h2>Harness</h2>
+      <Rows>
+        <Row hint={h.claude.enabled ? `permissions: ${h.claude.permissions.join(", ")}` : "off"}><code>claude</code></Row>
+        <Row hint={h.codex.enabled ? "on" : "off"}><code>codex</code></Row>
+        <Row hint={`${h.auto ? "writes on every change" : "writes on sync"}${h.table ? " · the contract as a table" : ""}`}><code>files</code></Row>
+      </Rows>
+      <p className="bv-muted">Declared in .baba/index.ts: <code>{"baba({ systems, promptware, harness })"}</code>.</p>
+    </section>
+  );
+}

package/src/gui/runner.tsx

@@ -0,0 +1,118 @@
+// The runner: the contract as forms. A list of the baba's actions and
+// queries; one opens a form generated from its args' schema, fires or
+// reads it and shows what came back. A baba with no view gets this page.
+import { useId, useState, type FormEvent } from "react";
+import type { Manifest } from "../ecs/baba.ts";
+import { useScope, api, ApiError } from "../web/core.tsx";
+import { plan, collect, tableOf, describeType, FieldError, type Field, type Values } from "../web/form.ts";
+import { Button, Input, Textarea, Select, Rows, Row, Table } from "../web/ui.tsx";
+
+type Callable = { kind: "fire" | "read"; summary: string; args: import("../kernel/schema.ts").Json; result?: import("../kernel/schema.ts").Json };
+
+export function Runner({ manifest }: { manifest: Manifest }) {
+  const [selected, setSelected] = useState<string | null>(null);
+  const calls: Record<string, Callable> = {};
+  for (const [n, d] of Object.entries(manifest.actions)) calls[n] = { kind: "fire", summary: d.summary, args: d.args, result: d.result };
+  for (const [n, q] of Object.entries(manifest.queries)) calls[n] = { kind: "read", summary: q.summary, args: q.args, result: q.result };
+  const names = Object.keys(calls);
+  if (!selected) {
+    return (
+      <div className="bv-runner">
+        {names.length === 0 && <p className="bv-muted">The baba declares no actions or queries.</p>}
+        <Rows>{names.map((n) => <Row key={n} hint={`${calls[n]!.kind === "fire" ? "action" : "query"} · ${calls[n]!.summary}`} onClick={() => setSelected(n)}><code>{n}</code></Row>)}</Rows>
+      </div>
+    );
+  }
+  const def = calls[selected]!;
+  return (
+    <div className="bv-runner">
+      <div className="bv-runner-nav"><Button variant="quiet" onClick={() => setSelected(null)}>← All</Button></div>
+      <Form key={selected} name={selected} def={def} />
+    </div>
+  );
+}
+
+export function Control({ id, f, value, set, invalid }: { id: string; f: Field; value: string | boolean | undefined; set: (v: string | boolean) => void; invalid: boolean }) {
+  const text = typeof value === "string" ? value : "";
+  const common = { id, "aria-invalid": invalid || undefined, "aria-required": f.required || undefined };
+  switch (f.kind) {
+    case "boolean":
+      return <input type="checkbox" className="bv-check" {...common} checked={value === true} onChange={(e) => set(e.target.checked)} />;
+    case "enum":
+      return (
+        <Select {...common} value={text} onChange={(e) => set(e.target.value)}>
+          <option value="">{f.required ? "Choose…" : "(none)"}</option>
+          {f.options!.map((o) => <option key={o} value={o}>{o}</option>)}
+        </Select>
+      );
+    case "number":
+    case "integer":
+      return <Input {...common} type="number" step={f.kind === "integer" ? 1 : "any"} value={text} onChange={(e) => set(e.target.value)} />;
+    case "list":
+      return <Textarea {...common} rows={3} placeholder={`one ${f.item} per line`} value={text} onChange={(e) => set(e.target.value)} />;
+    case "json":
+      return <Textarea {...common} rows={4} className="bv-mono" placeholder="JSON" value={text} onChange={(e) => set(e.target.value)} />;
+    default:
+      return <Input {...common} value={text} onChange={(e) => set(e.target.value)} />;
+  }
+}
+
+type Outcome = { state: "idle" } | { state: "running" } | { state: "done"; value: unknown; ms: number } | { state: "failed"; error: unknown };
+
+function Form({ name, def }: { name: string; def: Callable }) {
+  const scope = useScope();
+  const uid = useId();
+  const p = plan(def.args);
+  const [values, setValues] = useState<Values>({});
+  const [outcome, setOutcome] = useState<Outcome>({ state: "idle" });
+  const run = async (e?: FormEvent) => {
+    e?.preventDefault();
+    let args: unknown;
+    try { args = collect(p, values); } catch (err) { setOutcome({ state: "failed", error: err }); return; }
+    setOutcome({ state: "running" });
+    const t = performance.now();
+    try {
+      const value = await api(def.kind, scope, name, args);
+      setOutcome({ state: "done", value, ms: Math.round(performance.now() - t) });
+    } catch (err) {
+      setOutcome({ state: "failed", error: err });
+    }
+  };
+  const bad = outcome.state === "failed" && outcome.error instanceof FieldError ? outcome.error.field : null;
+  return (
+    <form className="bv-form" onSubmit={run}>
+      <div className="bv-form-head"><code className="bv-form-name">{name}</code><span className="bv-muted">{def.kind === "fire" ? "action" : "query"} · {def.summary}</span></div>
+      {p.fields.length === 0 && <p className="bv-muted">No arguments.</p>}
+      {p.fields.map((f) => (
+        <div key={f.name} className={f.kind === "boolean" ? "bv-field bv-field-inline" : "bv-field"}>
+          <label htmlFor={`${uid}-${f.name}`}>
+            {f.name}{f.required && <span className="bv-required" title="required">*</span>}
+            <span className="bv-type">{describeType(f)}</span>
+          </label>
+          <Control id={`${uid}-${f.name}`} f={f} value={values[f.name]} set={(v) => setValues((s) => ({ ...s, [f.name]: v }))} invalid={bad === f.name} />
+          {f.description && <small className="bv-muted">{f.description}</small>}
+        </div>
+      ))}
+      <div className="bv-form-actions">
+        <Button type="submit" variant="primary" disabled={outcome.state === "running"}>{outcome.state === "running" ? "Running…" : def.kind === "fire" ? "Run" : "Read"}</Button>
+        {outcome.state === "done" && <span className="bv-muted">{outcome.ms} ms</span>}
+      </div>
+      {outcome.state === "failed" && <ErrorText error={outcome.error} />}
+      {outcome.state === "done" && <Output value={outcome.value} />}
+    </form>
+  );
+}
+
+export function ErrorText({ error }: { error: unknown }) {
+  if (error instanceof ApiError) return <p className="bv-error" role="alert"><code className="bv-code">{error.code}</code> {error.message}</p>;
+  if (error instanceof FieldError) return <p className="bv-error" role="alert">{error.message}</p>;
+  return <p className="bv-error" role="alert">{error instanceof Error ? error.message : String(error)}</p>;
+}
+
+/** A result: a table when it is an array of flat objects, else JSON. */
+export function Output({ value }: { value: unknown }) {
+  const t = tableOf(value);
+  if (t) return <div className="bv-output"><Table columns={t.columns} rows={t.rows} /></div>;
+  if (value === undefined || value === null) return <div className="bv-output bv-muted">Done; nothing came back.</div>;
+  return <pre className="bv-output bv-json">{JSON.stringify(value, null, 2)}</pre>;
+}