@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/web/home-page.tsx

@@ -0,0 +1,274 @@
+import { useEffect, useMemo, useState } from "react";
+import { DataListHeading } from "@fungi.computer/caps/components/data-list";
+import { Status } from "@fungi.computer/caps/components/status";
+import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";
+import {
+  useAgents,
+  useRepos,
+  useGraph,
+  useChanges,
+  useEvents,
+  type LiveState,
+} from "./api.js";
+import { BonsaiBoard, type BoardTile } from "./board.js";
+import { NetworkGraph } from "./network-graph.js";
+import {
+  ActivityFeed,
+  AgentName,
+  agentColors,
+  Loading,
+  Failure,
+  Sparkline,
+  type AgentColors,
+} from "./parts.js";
+import { WorkingNow, workingNow } from "./working-now.js";
+import { href, useRouter } from "./router.js";
+import type { Graph, RepoSummary } from "../shared/contract.js";
+import { relativeTime } from "./format.js";
+
+function HomeNetwork({
+  graph,
+  repo,
+  colors,
+  live,
+}: {
+  graph: Graph;
+  repo: string;
+  colors: AgentColors;
+  live: LiveState;
+}) {
+  const changes = useChanges(repo);
+  const events = useEvents(repo);
+  const { go } = useRouter();
+  const fresh = new Set(
+    events.data?.events.flatMap((event) =>
+      event.type === "push" && live.fresh.has(event.id)
+        ? event.data.commits.map((commit) => commit.hash)
+        : [],
+    ),
+  );
+  return (
+    <NetworkGraph
+      graph={graph}
+      colors={colors}
+      fresh={fresh}
+      onSelect={(node) => {
+        go(
+          href({
+            page: "repo",
+            repo,
+            tab: "commits",
+            commit: node.hash,
+            ref: null,
+            file: null,
+            path: "",
+          }),
+        );
+      }}
+      onLaneSelect={(lane) => {
+        const change = changes.data?.changes.find(
+          (item) =>
+            item.sourceRepo === lane.repo &&
+            item.sourceRef === lane.ref &&
+            item.state === "open",
+        );
+        go(
+          change
+            ? href({ page: "change", repo: change.repo, number: change.number })
+            : href({
+                page: "repo",
+                repo: lane.repo,
+                tab: "overview",
+                ref: lane.ref,
+                file: null,
+                path: "",
+              }),
+        );
+      }}
+    />
+  );
+}
+function RepoCard({
+  repo,
+  colors,
+}: {
+  repo: RepoSummary;
+  colors: AgentColors;
+}) {
+  const changes = useChanges(repo.name);
+  return (
+    <div className="space-y-3">
+      {repo.description ? <p>{repo.description}</p> : null}
+      <p className="text-xs text-[var(--stipe-fg-muted)]">
+        {repo.lastPushAt !== null
+          ? `Pushed ${relativeTime(repo.lastPushAt)} · `
+          : ""}
+        {repo.forks.length} forks
+        {changes.data
+          ? ` · ${String(changes.data.changes.filter((change) => change.state === "open" || change.state === "merging").length)} open changes`
+          : ""}
+      </p>
+      <div className="flex flex-wrap gap-2">
+        {repo.forks.map((fork) => (
+          <AgentName
+            key={fork}
+            name={fork.split("--")[1] ?? fork}
+            colors={colors}
+          />
+        ))}
+      </div>
+      <Sparkline values={repo.activity} />
+    </div>
+  );
+}
+export function HomePage({ live }: { live: LiveState }) {
+  const [wide, setWide] = useState(false);
+  useEffect(() => {
+    const media = matchMedia("(min-width: 1024px)");
+    const update = () => {
+      setWide(media.matches);
+    };
+    update();
+    media.addEventListener("change", update);
+    return () => {
+      media.removeEventListener("change", update);
+    };
+  }, []);
+  const repos = useRepos();
+  const events = useEvents(null);
+  const actors = useAgents();
+  const colors = useMemo(() => agentColors(actors.data?.agents), [actors.data]);
+  const featured = [...(repos.data?.repos ?? [])]
+    .filter((repo) => repo.parent === null)
+    .sort((a, b) => (b.lastPushAt ?? 0) - (a.lastPushAt ?? 0))[0];
+  const network = useGraph(
+    featured?.name ?? "",
+    featured !== undefined && featured.lastPushAt !== null,
+  );
+  const tiles: BoardTile[] = [];
+  if (
+    featured?.lastPushAt !== null &&
+    featured !== undefined &&
+    (network.isPending || network.isError || network.data.nodes.length > 0)
+  )
+    tiles.push({
+      id: "network",
+      title: `Network · ${featured.name}`,
+      autoHeight: true,
+      body: network.isPending ? (
+        <Loading label="Loading network" />
+      ) : network.isError ? (
+        <Failure
+          error={network.error}
+          retry={() => {
+            void network.refetch();
+          }}
+        />
+      ) : (
+        <HomeNetwork
+          graph={network.data}
+          repo={featured.name}
+          colors={colors}
+          live={live}
+        />
+      ),
+    });
+  if (events.isError)
+    tiles.push({
+      id: "live",
+      title: "Live",
+      autoHeight: !wide || !tiles.some((tile) => tile.id === "network"),
+      body: (
+        <Failure
+          error={events.error}
+          retry={() => {
+            void events.refetch();
+          }}
+        />
+      ),
+    });
+  else if (events.data?.events.length)
+    tiles.push({
+      id: "live",
+      title: "Live",
+      autoHeight: !wide || !tiles.some((tile) => tile.id === "network"),
+      body: (
+        <>
+          {workingNow(events.data.events).length ? (
+            <>
+              <DataListHeading>Working now</DataListHeading>
+              <WorkingNow events={events.data.events} colors={colors} />
+            </>
+          ) : null}
+          <ActivityFeed
+            events={events.data.events.slice(0, 5)}
+            colors={colors}
+            fresh={live.fresh}
+            showRepo
+          />
+        </>
+      ),
+    });
+  for (const repo of repos.data?.repos ?? [])
+    tiles.push({
+      id: `repo:${repo.name}`,
+      title: repo.name,
+      to: href({
+        page: "repo",
+        repo: repo.name,
+        tab: "overview",
+        ref: null,
+        file: null,
+        path: "",
+      }),
+      autoHeight: true,
+      status:
+        repo.lastPushAt !== null && repo.lastPushAt > Date.now() - 900000 ? (
+          <Status label="Active" tone="success" size="compact" />
+        ) : undefined,
+      body: <RepoCard repo={repo} colors={colors} />,
+    });
+  const hasHero = tiles.some(
+    (tile) => tile.id === "network" || tile.id === "live",
+  );
+  let card = 0;
+  const placements = tiles.map((tile) => {
+    if (tile.id === "network")
+      return { id: tile.id, col: 0, row: 0, w: 3, h: 1 };
+    if (tile.id === "live") return { id: tile.id, col: 3, row: 0, w: 1, h: 1 };
+    const index = card++;
+    return {
+      id: tile.id,
+      col: index % 4,
+      row: (hasHero ? 1 : 0) + Math.floor(index / 4),
+      w: 1,
+      h: 1,
+    };
+  });
+  return (
+    <div className="space-y-3">
+      {repos.isPending ? (
+        <Loading label="Loading repositories" />
+      ) : repos.isError ? (
+        <Failure
+          error={repos.error}
+          retry={() => {
+            void repos.refetch();
+          }}
+        />
+      ) : repos.data.repos.length === 0 ? (
+        <EmptyState
+          variant="panel"
+          title="No repositories yet"
+          description="Repositories you and your Agents create appear here, with every fork, push and change live."
+        />
+      ) : null}
+      <BonsaiBoard
+        rowHeight={0}
+        placements={placements}
+        tiles={tiles}
+        phoneOrder={tiles.map((tile) => tile.id)}
+      />
+    </div>
+  );
+}

package/web/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Bonsai: a git platform where many agents work at once."
+    />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <title>Bonsai</title>
+  </head>
+  <body>
+    <div id="bonsai-root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/web/insight-data.ts

@@ -0,0 +1,76 @@
+import type { Agent, Graph } from "../shared/contract.js";
+
+type ContributorKind = "agent" | "human" | "unknown";
+function contributorKind(
+  actor: string | null,
+  actors: readonly Agent[],
+): ContributorKind {
+  return actors.find((item) => item.id === actor)?.kind ?? "unknown";
+}
+
+export function actorSplit(graph: Graph, actors: readonly Agent[]) {
+  const counts = () => ({ agent: 0, human: 0, unknown: 0 });
+  const commits = counts();
+  const merges = counts();
+  for (const node of graph.nodes) {
+    const kind = contributorKind(node.agent, actors);
+    commits[kind]++;
+    if (node.parents.length > 1) merges[kind]++;
+  }
+  return { commits, merges };
+}
+
+const DAY = 86400;
+export function contributionDays(graph: Graph, now = Date.now()) {
+  const today = Math.floor(now / 1000 / DAY);
+  const days = Array.from({ length: 182 }, (_, index) => ({
+    day: today - 181 + index,
+    count: 0,
+  }));
+  for (const node of graph.nodes) {
+    const index = Math.floor(node.committedAt / DAY) - (today - 181);
+    const item = days[index];
+    if (item) item.count++;
+  }
+  return days;
+}
+
+export function contributionWeeks(
+  graph: Graph,
+  actors: readonly Agent[],
+  now = Date.now(),
+) {
+  const end = Math.floor(now / 1000 / (7 * DAY));
+  const contributors = new Map<
+    string,
+    {
+      id: string;
+      name: string;
+      kind: ContributorKind;
+      color: string | undefined;
+      total: number;
+    }
+  >();
+  const weeks = Array.from({ length: 12 }, (_, index) => ({
+    index,
+    counts: new Map<string, number>(),
+  }));
+  for (const node of graph.nodes) {
+    const week = weeks[Math.floor(node.committedAt / (7 * DAY)) - end + 11];
+    if (!week) continue;
+    const id =
+      node.agent === null ? `unknown:${node.author}` : `actor:${node.agent}`;
+    const actor = actors.find((item) => item.id === node.agent);
+    const contributor = contributors.get(id) ?? {
+      id,
+      name: actor?.name ?? node.agent ?? node.author,
+      kind: contributorKind(node.agent, actors),
+      color: actor?.color,
+      total: 0,
+    };
+    contributor.total++;
+    contributors.set(id, contributor);
+    week.counts.set(id, (week.counts.get(id) ?? 0) + 1);
+  }
+  return { contributors: [...contributors.values()], weeks };
+}