@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/test/browser/visual-fixture.tsx

@@ -0,0 +1,667 @@
+import { HomePage } from "../../web/home-page.js";
+import { useEffect, useState } from "react";
+import { BonsaiBoard } from "../../web/board.js";
+/** Presentation fixture: real Bonsai pages, deterministic Git/host responses. */
+import * as z from "zod";
+import { savedLayout, insightLayout } from "../../shared/insights.js";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createCapabilityRegistry } from "@fungi.computer/agar";
+import { appsOpen } from "@fungi.computer/agar/apps";
+import { appMethods } from "@fungi.computer/agar/backend";
+import { connect } from "../../web/transport.js";
+
+import type { Graph, RepoDetail } from "../../shared/contract.js";
+import "@fungi.computer/caps/fonts.css";
+import { RepoPage, CommitPage } from "../../web/pages.js";
+import { ChangePage } from "../../web/change-page.js";
+import { changePage, changeDetail } from "../../shared/contract.js";
+import { RouterProvider, useRouter } from "../../web/router.js";
+import "../../web/bonsai.css";
+
+const hash = (n: number) =>
+  (Math.imul(n, 2654435761) >>> 0).toString(16).padStart(8, "0") +
+  n.toString(16).padStart(32, "0");
+const now = Date.UTC(2026, 9, 12) / 1000;
+const agents = ["Levi", "Luna", "Astra", "Sol"].map((name, i) => ({
+  id: name,
+  name,
+  kind: i === 0 ? "human" : "agent",
+  color: `c${String(i)}`,
+  createdAt: 0,
+}));
+const graph: Graph = {
+  lanes: agents.map((agent, i) => ({
+    id: `${agent.name}:main`,
+    repo: i ? `koi-pond--${agent.name}` : "koi-pond",
+    ref: "main",
+    owner: i ? agent.name : null,
+    head: hash(37 + i),
+    canonical: i === 0,
+  })),
+  nodes: Array.from({ length: 40 }, (_, i) => {
+    const lane = i % 4;
+    const actor = agents[lane];
+    return {
+      hash: hash(i + 1),
+      parents:
+        i === 0
+          ? []
+          : [hash(Math.max(1, i - 3)), ...(i % 8 === 0 ? [hash(i)] : [])],
+      message:
+        [
+          "Let the pond breathe",
+          "Add ripples around the koi",
+          "Keep fish inside the reeds",
+          "Balance the evening light",
+        ][lane] ?? "Pond",
+      author: actor?.name ?? "Levi",
+      agent: actor?.name ?? null,
+      origin: lane ? `koi-pond--${actor?.name ?? "Luna"}` : "koi-pond",
+      committedAt: now - (40 - i) * 86400,
+      lanes: [`${actor?.name ?? "Levi"}:main`],
+    };
+  }).reverse(),
+};
+const detail: RepoDetail = {
+  repo: {
+    name: "koi-pond",
+    description: "A small living world, made together.",
+    parent: null,
+    owner: null,
+    createdAt: 0,
+    lastPushAt: now * 1000,
+    forks: agents.slice(1).map((a) => `koi-pond--${a.name}`),
+    openChanges: 3,
+    activity: [1, 3, 2, 5],
+  },
+  defaultBranch: "main",
+  refs: [{ name: "refs/heads/main", hash: hash(40) }],
+  cloneUrl: "https://example.test/git/koi-pond",
+  empty: false,
+};
+const scene5 = new URLSearchParams(location.search).has("scene5");
+if (scene5)
+  detail.cloneUrl = "https://oyster.shiit.app/git/bonsai/koi-pond.git";
+const changeScenario = new URLSearchParams(location.search).get("change");
+const empty = new URLSearchParams(location.search).has("empty");
+const noChanges =
+  empty || new URLSearchParams(location.search).has("no-changes");
+if (empty) {
+  graph.nodes = [];
+  graph.lanes = [];
+  detail.empty = true;
+}
+const client = new QueryClient({
+  defaultOptions: { queries: { staleTime: Infinity, retry: false } },
+});
+client.setQueryData(["repo", "koi-pond"], detail);
+client.setQueryData(["graph", "koi-pond"], graph);
+client.setQueryData(["code-insights", "koi-pond", "main"], {
+  head: hash(40),
+  commits: 40,
+  partial: true,
+  omittedFiles: 2,
+  files: [
+    { path: "src/pond.ts", lines: 420, changes: 18 },
+    { path: "src/fish.ts", lines: 230, changes: 12 },
+    { path: "src/ripples.ts", lines: 180, changes: 9 },
+    { path: "src/light.ts", lines: 125, changes: 4 },
+    { path: "README.md", lines: 70, changes: 2 },
+    { path: "index.html", lines: 40, changes: 1 },
+  ],
+  ageHistory: Array.from({ length: 16 }, (_, index) => ({
+    at: now - (15 - index) * 7 * 86400,
+    lines: [
+      Math.round(80 + index * 12),
+      Math.round(90 + index * 16),
+      Math.round(35 + index * 14),
+      Math.round(10 + index * 4),
+      160,
+    ],
+  })),
+});
+if (empty)
+  client.setQueryData(["code-insights", "koi-pond", "main"], {
+    head: null,
+    commits: 0,
+    files: [],
+    ageHistory: [],
+    omittedFiles: 0,
+    partial: false,
+  });
+const fixtureCommit = {
+  hash: hash(40),
+  parents: [hash(36)],
+  treeHash: hash(100),
+  message: "Balance the evening light",
+  author: { name: "Sol", email: "fixture@example.test" },
+  committer: { name: "Sol", email: "fixture@example.test" },
+  authoredAt: now,
+  committedAt: now,
+};
+const issue = `---
+id: pond-01
+title: Add a lily pad
+type: task
+status: ready-for-agent
+priority: p1
+created: 2026-10-12
+assignee: null
+areas: [pond]
+blocked_by: []
+---
+# Add a lily pad
+## Outcome
+The koi have shade.
+## Context
+The pond.
+## Acceptance criteria
+- [ ] Add shade.
+## Verification
+- [ ] Observe the pond.
+`;
+client.setQueryData(["issues", "koi-pond", "main"], {
+  ref: "main",
+  commit: fixtureCommit,
+  truncated: false,
+  files: empty
+    ? {}
+    : {
+        "pond/01-lily-pad.md": issue,
+        "pond/02-reeds.md": issue
+          .replaceAll("pond-01", "pond-02")
+          .replaceAll("Add a lily pad", "Plant reeds")
+          .replace("blocked_by: []", "blocked_by: [pond-01]"),
+        "pond/03-water.md":
+          issue
+            .replaceAll("pond-01", "pond-03")
+            .replaceAll("Add a lily pad", "Fill the pond")
+            .replace("status: ready-for-agent", "status: resolved") +
+          "\n## Resolution\nThe pond is full.\n",
+      },
+});
+client.setQueryData(["files", "koi-pond", "main"], {
+  ref: "main",
+  commit: fixtureCommit,
+  paths: ["README.md", "src/pond.ts"],
+  truncated: false,
+});
+const readme = {
+  commit: fixtureCommit.hash,
+  blob: hash(101),
+  ref: "main",
+  path: "README.md",
+  size: 160,
+  binary: false,
+  version: null,
+  text: "# Koi pond\n\nA small living world, made together. Agents tend the water, reeds and ripples through their own branches.\n\nWatch the pond grow with every change.",
+};
+client.setQueryData(
+  ["blob", "koi-pond", "main", "README.md"],
+  new URLSearchParams(location.search).has("pending")
+    ? {
+        ...readme,
+        version: 3,
+        pending: {
+          text: "# Koi pond\n\nA small living world, made together. Agents tend the water, reeds and ripples through their own branches.\n\nThree new lilies float by the reeds.",
+          revision: 3,
+          state: "pending",
+        },
+      }
+    : readme,
+);
+client.setQueryData(["blob", "koi-pond", "main", "src/pond.ts"], {
+  commit: fixtureCommit.hash,
+  blob: hash(102),
+  ref: "main",
+  path: "src/pond.ts",
+  size: 57,
+  binary: false,
+  version: null,
+  text: "export const ripples = 5;\nexport const reeds = true;\n",
+});
+client.setQueryData(["agents"], { agents });
+client.setQueryData(["events", "koi-pond"], {
+  events: empty
+    ? []
+    : [
+        {
+          id: 2,
+          at: Date.now() - (scene5 ? 480000 : 120000),
+          type: "push",
+          repo: "koi-pond--Luna",
+          actor: "Luna",
+          data: {
+            updates: [
+              { ref: "refs/heads/main", before: hash(35), after: hash(38) },
+            ],
+            commits: [
+              { hash: hash(39), message: "Keep fish inside the reeds" },
+            ],
+            paths: ["src/fish.ts"],
+          },
+        },
+        {
+          id: 1,
+          at: Date.now() - (scene5 ? 720000 : 240000),
+          type: "push",
+          repo: "koi-pond--Sol",
+          actor: "Sol",
+          data: {
+            updates: [
+              { ref: "refs/heads/main", before: hash(33), after: hash(40) },
+            ],
+            commits: [{ hash: hash(37), message: "Let the pond breathe" }],
+            paths: ["src/pond.ts"],
+          },
+        },
+        ...(scene5
+          ? [
+              {
+                id: 3,
+                at: Date.now() - 840000,
+                type: "push",
+                repo: "koi-pond--Astra",
+                actor: "Astra",
+                data: {
+                  updates: [
+                    {
+                      ref: "refs/heads/main",
+                      before: hash(32),
+                      after: hash(37),
+                    },
+                  ],
+                  commits: [],
+                  paths: ["src/light.ts"],
+                },
+              },
+            ]
+          : []),
+      ],
+});
+client.setQueryData(["repos"], { repos: [detail.repo] });
+client.setQueryData(
+  ["events", null],
+  client.getQueryData(["events", "koi-pond"]),
+);
+const fixtureChanges = changePage.parse({
+  changes: noChanges
+    ? []
+    : agents.slice(1).map((actor, index) => ({
+        repo: "koi-pond",
+        number: index + 1,
+        sourceRepo: `koi-pond--${actor.name}`,
+        sourceRef: "main",
+        targetRef: "main",
+        title: [
+          "Add ripples around the koi",
+          "Keep fish inside the reeds",
+          "Balance the evening light",
+        ][index],
+        body: "Keep the pond calm while the agents add new life.",
+        openedBy: actor.name,
+        openedKind: "agent",
+        createdAt: Date.now() - 300000,
+        updatedAt: Date.now() - 120000,
+        state: "open",
+        head: hash(38 + index),
+        target: hash(37),
+        revision: 0,
+        base: hash(20),
+        ahead: 3 + index,
+        behind: index,
+        conflict:
+          index === 1 || (index === 0 && changeScenario === "conflict")
+            ? {
+                head: hash(38 + index),
+                target: hash(37),
+                paths: ["src/pond.ts"],
+              }
+            : null,
+        status:
+          index === 1 || (index === 0 && changeScenario === "conflict")
+            ? "conflict"
+            : "ready",
+        mergeable:
+          index === 1 || (index === 0 && changeScenario === "conflict")
+            ? { allowed: false, reason: "conflict" }
+            : { allowed: true },
+        lease: null,
+        mergedCommit: null,
+        mergedBy: null,
+        closedBy: null,
+      })),
+});
+client.setQueryData(["changes", "koi-pond"], fixtureChanges);
+client.setQueryData(["commits", "koi-pond", "main"], {
+  ref: "main",
+  commits: graph.nodes.map((node) => ({
+    agent: node.agent,
+    commit: {
+      ...node,
+      treeHash: hash(100),
+      author: { name: node.author, email: "fixture@example.test" },
+      committer: { name: node.author, email: "fixture@example.test" },
+      authoredAt: node.committedAt,
+    },
+  })),
+});
+const fixtureDiff = {
+  files: [
+    {
+      path: "src/pond.ts",
+      oldPath: null,
+      status: "modified",
+      additions: 2,
+      deletions: 1,
+      binary: false,
+      truncated: false,
+      oldText: "export const ripples = 3;\nexport const reeds = true;\n",
+      newText:
+        "export const ripples = 5;\nexport const reeds = true;\nexport const lilies = 2;\n",
+    },
+  ],
+  additions: 2,
+  deletions: 1,
+  omittedFiles: 0,
+};
+for (const node of graph.nodes) {
+  client.setQueryData(["commit", node.origin ?? "koi-pond", node.hash], {
+    commit: {
+      ...fixtureCommit,
+      hash: node.hash,
+      message: node.message,
+      parents: node.parents,
+      author: { name: node.author, email: "fixture@example.test" },
+      committedAt: node.committedAt,
+    },
+    agent: node.agent,
+    diff: fixtureDiff,
+  });
+}
+const fixtureDetails = new Map(
+  fixtureChanges.changes.map((change) => {
+    const value = changeDetail.parse({
+      change,
+      commits: [
+        {
+          commit: {
+            ...fixtureCommit,
+            hash: change.head,
+            message: change.title,
+            parents: [hash(33 + change.number)],
+            author: { name: change.openedBy, email: "fixture@example.test" },
+            committer: { name: change.openedBy, email: "fixture@example.test" },
+          },
+          agent: change.openedBy,
+        },
+      ],
+      diff: fixtureDiff,
+      actions: { approve: { allowed: true }, close: { allowed: true } },
+      review: {
+        approvals: [
+          {
+            actor: "Levi",
+            kind: "human",
+            head: change.head,
+            at: Date.now() - 60000,
+          },
+          {
+            actor: "Levi",
+            kind: "human",
+            head: hash(2),
+            at: Date.now() - 240000,
+          },
+        ],
+        checks: [
+          {
+            head: change.head,
+            name: "pond tests",
+            status: "passed",
+            reporter: "workflow",
+            attemptId: "demo-check",
+            runUrl: null,
+            summary: "12 tests passed",
+            updatedAt: Date.now() - 60000,
+          },
+        ],
+      },
+    });
+    client.setQueryData(["change", change.repo, change.number], value);
+    return [change.number, value];
+  }),
+);
+const loadingScenario = new URLSearchParams(location.search).get("load");
+if (loadingScenario) {
+  client.removeQueries({ queryKey: ["graph"] });
+  client.removeQueries({ queryKey: ["agents"] });
+}
+const capabilities = createCapabilityRegistry();
+capabilities.provide(appMethods, {
+  call: (method, inputJson) => {
+    if (method === "changes.get") {
+      const input = z
+        .object({ repo: z.literal("koi-pond"), number: z.number() })
+        .parse(JSON.parse(inputJson));
+      const value = fixtureDetails.get(input.number);
+      if (!value) throw new Error("Unknown fixture Change");
+      return Promise.resolve(z.json().parse(value));
+    }
+    if (method === "changes.list")
+      return Promise.resolve(z.json().parse(fixtureChanges));
+    if (method === "graph.get" || method === "actors.list") {
+      if (loadingScenario === "pending") return new Promise(() => undefined);
+      if (loadingScenario === "error")
+        return Promise.reject(
+          new Error("Bonsai could not finish that request"),
+        );
+      return Promise.resolve(method === "graph.get" ? graph : { agents });
+    }
+    if (method === "activity.list") return Promise.resolve({ events: [] });
+    if (method === "repos.get") return Promise.resolve(detail);
+    if (method === "changes.approve") {
+      const input = z
+        .strictObject({
+          repo: z.literal("koi-pond"),
+          number: z.number().int().positive(),
+          head: z.string(),
+        })
+        .parse(JSON.parse(inputJson));
+      const value = fixtureDetails.get(input.number);
+      if (value?.change.head !== input.head)
+        throw new Error("Approval did not pin the displayed head");
+      localStorage.setItem("fixture-approval", JSON.stringify(input));
+      return Promise.resolve({ kind: "approved" });
+    }
+    if (method === "changes.close") {
+      const input = z
+        .strictObject({
+          repo: z.literal("koi-pond"),
+          number: z.number().int().positive(),
+        })
+        .parse(JSON.parse(inputJson));
+      const value = fixtureDetails.get(input.number);
+      if (!value) throw new Error("Unknown fixture Change");
+      value.change.state = "closed";
+      value.change.status = "closed";
+      value.change.mergeable = { allowed: false, reason: "not-open" };
+      value.actions = {
+        approve: { allowed: false, reason: "not-open" },
+        close: { allowed: false, reason: "not-open" },
+      };
+      localStorage.setItem("fixture-close", JSON.stringify(input));
+      return Promise.resolve({ allowed: true });
+    }
+    if (method === "changes.merge") {
+      const input = z
+        .strictObject({
+          repo: z.literal("koi-pond"),
+          number: z.number().int().positive(),
+          head: z.string(),
+        })
+        .parse(JSON.parse(inputJson));
+      const value = fixtureDetails.get(input.number);
+      if (value?.change.head !== input.head)
+        throw new Error("Merge did not pin the displayed head");
+      localStorage.setItem("fixture-merge", JSON.stringify(input));
+      const result = new URLSearchParams(location.search).get("result");
+      if (result === "error") throw new Error("Fixture merge unavailable");
+      if (result === "refused")
+        return Promise.resolve({ kind: "refused", reason: "checks-failed" });
+      if (result === "moved") {
+        value.change.head = hash(99);
+        return Promise.resolve({ kind: "moved", head: hash(99) });
+      }
+      if (result === "conflict") {
+        value.change.status = "conflict";
+        value.change.mergeable = { allowed: false, reason: "conflict" };
+        value.change.conflict = {
+          head: input.head,
+          target: hash(37),
+          paths: ["src/pond.ts"],
+        };
+        return Promise.resolve({
+          kind: "conflict",
+          paths: ["src/pond.ts"],
+          head: input.head,
+        });
+      }
+      value.actions = {
+        approve: { allowed: false, reason: "not-open" },
+        close: { allowed: false, reason: "not-open" },
+      };
+      value.change.state = "merged";
+      value.change.status = "merged";
+      value.change.mergeable = { allowed: false, reason: "not-open" };
+      return Promise.resolve({
+        kind: "merged",
+        before: hash(37),
+        after: hash(99),
+      });
+    }
+    if (method === "insights.layout.get") {
+      const parsed = savedLayout.safeParse(
+        JSON.parse(localStorage.getItem("fixture-layout") ?? '{"tiles":null}'),
+      );
+      return Promise.resolve(parsed.success ? parsed.data : { tiles: null });
+    }
+    if (method === "insights.layout.save") {
+      if (new URLSearchParams(location.search).has("save-error"))
+        return Promise.reject(new Error("Fixture save unavailable"));
+      const input = z
+        .object({ tiles: insightLayout })
+        .parse(JSON.parse(inputJson));
+      const result = { tiles: input.tiles };
+      localStorage.setItem("fixture-layout", JSON.stringify(result));
+      return Promise.resolve(result);
+    }
+    return Promise.reject(new Error(`Unseeded fixture method: ${method}`));
+  },
+});
+capabilities.provide(appsOpen, {
+  open: (input) => {
+    document.documentElement.dataset.openApp = JSON.stringify(input);
+    return Promise.resolve();
+  },
+  // The shell's role routing names the Team's files App.
+  role: (role) =>
+    Promise.resolve(role === "files" ? { displayName: "Inkcap" } : null),
+});
+connect({ capabilities });
+function BoardFixture() {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => {
+          setExpanded(!expanded);
+        }}
+      >
+        Expand document
+      </button>
+      <BonsaiBoard
+        placements={[
+          { id: "document", col: 0, row: 0, w: 3, h: 1 },
+          { id: "facts", col: 3, row: 0, w: 1, h: 1 },
+          { id: "below", col: 0, row: 1, w: 4, h: 1 },
+        ]}
+        phoneOrder={["facts", "document", "below"]}
+        tiles={[
+          {
+            id: "document",
+            title: "Document",
+            autoHeight: true,
+            body: (
+              <div>
+                {Array.from({ length: expanded ? 30 : 3 }, (_, i) => (
+                  <p key={i}>A real row of document content.</p>
+                ))}
+              </div>
+            ),
+          },
+          { id: "facts", title: "Facts", body: "Short readout" },
+          { id: "below", title: "Below", body: "Follows the document" },
+        ]}
+      />
+    </>
+  );
+}
+
+function Fixture() {
+  const { route, go } = useRouter();
+  useEffect(() => {
+    if (changeScenario && route.page === "home") {
+      go("#change/koi-pond/1");
+      return;
+    }
+    const tab = new URLSearchParams(location.search).get("tab");
+    if (tab && tab !== "home" && route.page === "home")
+      go(`/koi-pond?tab=${encodeURIComponent(tab)}`);
+  }, [route.page, go]);
+  if (new URLSearchParams(location.search).has("board"))
+    return <BoardFixture />;
+  return (
+    <div className="caps-app-canvas">
+      <main className="bonsai-page">
+        {route.page === "home" &&
+        new URLSearchParams(location.search).get("tab") === "home" ? (
+          <HomePage live={{ connected: true, error: null, fresh: new Set() }} />
+        ) : route.page === "change" ? (
+          <ChangePage
+            key={`${route.repo}:${String(route.number)}`}
+            repo={route.repo}
+            number={route.number}
+          />
+        ) : route.page === "commit" ? (
+          <CommitPage repo={route.repo} hash={route.hash} />
+        ) : (
+          <RepoPage
+            route={
+              route.page === "repo"
+                ? route
+                : {
+                    page: "repo",
+                    repo: "koi-pond",
+                    tab: "commits",
+                    ref: new URLSearchParams(location.search).get("ref"),
+                    path: "",
+                    file: null,
+                  }
+            }
+            live={{ connected: true, error: null, fresh: new Set() }}
+          />
+        )}
+      </main>
+    </div>
+  );
+}
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing fixture root");
+createRoot(root).render(
+  <QueryClientProvider client={client}>
+    <RouterProvider>
+      <Fixture />
+    </RouterProvider>
+  </QueryClientProvider>,
+);

package/test/browser/visual.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./visual-fixture.tsx"></script>
+  </body>
+</html>

package/test/browser/vite.config.mjs

@@ -0,0 +1,9 @@
+import { URL, fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+export default {
+  root: fileURLToPath(new URL("../../", import.meta.url)),
+  envDir: false,
+  plugins: [react(), tailwindcss()],
+  server: { host: "127.0.0.1", port: 5188 },
+};