@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/web/change-rows.tsx

@@ -0,0 +1,135 @@
+import {
+  DataList,
+  DataListHeading,
+  DataRow,
+} from "@fungi.computer/caps/components/data-list";
+import { Status } from "@fungi.computer/caps/components/status";
+import type { Change } from "../shared/contract.js";
+import { relativeTime } from "./format.js";
+import { AgentName, type AgentColors } from "./parts.js";
+import { href, Link } from "./router.js";
+
+export function changeStatusLabel(status: Change["status"]): string {
+  const label = status.replaceAll("-", " ");
+  return label.charAt(0).toUpperCase() + label.slice(1);
+}
+
+const order = {
+  conflict: 0,
+  "checks-failed": 1,
+  "checks-running": 2,
+  "needs-approval": 3,
+  ready: 4,
+  merging: 5,
+  merged: 6,
+  closed: 7,
+};
+export const changeStatusTone = {
+  conflict: "warning",
+  "checks-failed": "error",
+  "checks-running": "info",
+  "needs-approval": "warning",
+  ready: "success",
+  merging: "info",
+  merged: "success",
+  closed: "neutral",
+} as const;
+function ChangeRows({
+  changes,
+  colors,
+  limit,
+}: {
+  changes: readonly Change[];
+  colors: AgentColors;
+  limit?: number;
+}) {
+  return (
+    <DataList className="bonsai-change-list">
+      {[...changes]
+        .sort((a, b) => order[a.status] - order[b.status])
+        .slice(0, limit)
+        .map((change) => {
+          return (
+            <DataRow key={`${change.repo}:${String(change.number)}`}>
+              <div className="min-w-0 flex-1">
+                <Link
+                  to={href({
+                    page: "change",
+                    repo: change.repo,
+                    number: change.number,
+                  })}
+                >
+                  {`#${String(change.number)} · ${change.title}`}
+                </Link>
+                <p className="text-xs text-[var(--stipe-fg-muted)]">
+                  <AgentName name={change.openedBy} colors={colors} /> ·{" "}
+                  {change.ahead} ahead · {change.behind} behind
+                  {` · ${relativeTime(change.updatedAt)}`}
+                </p>
+              </div>
+              <Status
+                size="compact"
+                tone={changeStatusTone[change.status]}
+                label={changeStatusLabel(change.status)}
+              />
+            </DataRow>
+          );
+        })}
+    </DataList>
+  );
+}
+
+/** The attention group uses the server's derived status, not client policy. */
+export function needsAttention(change: Change): boolean {
+  return (
+    change.status === "conflict" ||
+    change.status === "checks-failed" ||
+    change.status === "needs-approval"
+  );
+}
+
+export function ChangeGroups({
+  changes,
+  colors,
+  limit,
+}: {
+  changes: readonly Change[];
+  colors: AgentColors;
+  limit?: number;
+}) {
+  const shown = [...changes]
+    .sort((a, b) => order[a.status] - order[b.status])
+    .slice(0, limit);
+  const groups = [
+    { title: "Needs you", items: shown.filter(needsAttention) },
+    {
+      title: "Ready",
+      items: shown.filter((change) => change.status === "ready"),
+    },
+    {
+      title: "In progress",
+      items: shown.filter(
+        (change) =>
+          change.status === "checks-running" || change.status === "merging",
+      ),
+    },
+    {
+      title: "Done",
+      items: shown.filter(
+        (change) => change.state === "merged" || change.state === "closed",
+      ),
+    },
+  ];
+  return (
+    <>
+      {groups
+        .filter((group) => group.items.length > 0)
+        .map((group) => (
+          <section key={group.title}>
+            <DataListHeading level={3}>{group.title}</DataListHeading>
+            <ChangeRows changes={group.items} colors={colors} />
+          </section>
+        ))}
+    </>
+  );
+}

package/web/code-tab.tsx

@@ -0,0 +1,267 @@
+import { useEffect, useState } from "react";
+import { Button } from "@fungi.computer/caps/components/button";
+import { CopyField } from "@fungi.computer/caps/components/copy-field";
+import { Disclosure } from "@fungi.computer/caps/components/disclosure";
+import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";
+import { fileSyncResult } from "@fungi.computer/agar/roles/files";
+import { editInFilesEditor, callMethod } from "./transport.js";
+import type { RepoDetail } from "../shared/contract.js";
+import { useFiles, useFile, useFilesEditor } from "./api.js";
+import { BonsaiBoard } from "./board.js";
+import { firstLine, formatBytes, relativeTime, shortHash } from "./format.js";
+import { Loading, Failure } from "./parts.js";
+import { href, Link, useRouter, type Route } from "./router.js";
+import { FileView, Markdown, RepoTree } from "./views.js";
+
+export function CodeTab({
+  route,
+  detail,
+}: {
+  route: Extract<Route, { page: "repo" }>;
+  detail: RepoDetail;
+}) {
+  const { go } = useRouter();
+  const [wide, setWide] = useState(false);
+  const [treeOpen, setTreeOpen] = useState(false);
+  const [raw, setRaw] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [syncing, setSyncing] = useState(false);
+  const editor = useFilesEditor();
+  const editLabel =
+    editor.data === undefined || editor.data === null
+      ? null
+      : editor.data.displayName === null
+        ? "Edit"
+        : `Edit in ${editor.data.displayName}`;
+  useEffect(() => {
+    const media = matchMedia("(min-width: 1024px)");
+    const update = () => {
+      setWide(media.matches);
+    };
+    update();
+    media.addEventListener("change", update);
+    return () => {
+      media.removeEventListener("change", update);
+    };
+  }, []);
+  const ref = route.ref ?? detail.defaultBranch;
+  const files = useFiles(route.repo, ref, !detail.empty);
+  const readme =
+    files.data?.paths.find((path) => /^readme(\.md)?$/iu.test(path)) ?? null;
+  const shown = route.file ?? readme;
+  const file = useFile(route.repo, ref, shown);
+  const shownText = file.data?.pending?.text ?? file.data?.text ?? null;
+  if (detail.empty)
+    return (
+      <EmptyState
+        variant="panel"
+        title="Empty repository"
+        description={`Push a first commit: git push ${detail.cloneUrl} main`}
+      />
+    );
+  const tree = files.isPending ? (
+    <Loading label="Loading files" />
+  ) : files.isError ? (
+    <Failure
+      error={files.error}
+      retry={() => {
+        void files.refetch();
+      }}
+    />
+  ) : (
+    <div
+      className="flex"
+      style={{
+        height: Math.min(480, Math.max(90, files.data.paths.length * 30 + 60)),
+      }}
+    >
+      <RepoTree
+        key={`${route.repo}:${files.data.commit.hash}`}
+        paths={files.data.paths}
+        active={shown}
+        onOpen={(path) => {
+          setTreeOpen(false);
+          setRaw(false);
+          go(href({ ...route, path: "", file: path }));
+        }}
+      />
+    </div>
+  );
+  return (
+    <div className="grid items-start gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]">
+      <div className="min-w-0 lg:sticky lg:top-3">
+        {wide ? (
+          <BonsaiBoard
+            columns={1}
+            rowHeight={0}
+            placements={[{ id: "files", col: 0, row: 0, w: 1, h: 1 }]}
+            tiles={[
+              { id: "files", title: "Files", autoHeight: true, body: tree },
+            ]}
+          />
+        ) : (
+          <Disclosure
+            open={treeOpen}
+            onOpenChange={setTreeOpen}
+            summary={`Files · ${shown ?? ref}`}
+          >
+            {tree}
+          </Disclosure>
+        )}
+      </div>
+      <BonsaiBoard
+        columns={1}
+        rowHeight={0}
+        placements={[{ id: "file", col: 0, row: 0, w: 1, h: 1 }]}
+        tiles={[
+          {
+            id: "file",
+            title: "File",
+            autoHeight: true,
+            body: (
+              <div className="space-y-3">
+                {shown ? (
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <CopyField value={shown} label="Copy path" />
+                    <div className="flex flex-wrap items-center gap-2">
+                      {file.data?.binary === false &&
+                      file.data.text !== null &&
+                      editLabel !== null ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setActionError(null);
+                            void editInFilesEditor(
+                              route.repo,
+                              ref,
+                              shown,
+                            ).catch((error: unknown) => {
+                              setActionError(
+                                error instanceof Error
+                                  ? error.message
+                                  : "The editor could not open",
+                              );
+                            });
+                          }}
+                        >
+                          {editLabel}
+                        </Button>
+                      ) : null}
+                      {file.data?.text !== null &&
+                      file.data?.text !== undefined ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          aria-pressed={raw}
+                          onClick={() => {
+                            setRaw(!raw);
+                          }}
+                        >
+                          Raw
+                        </Button>
+                      ) : null}
+                    </div>
+                  </div>
+                ) : null}
+                {actionError === null ? null : (
+                  <p role="alert">{actionError}</p>
+                )}
+                {file.data?.pending === undefined ? null : (
+                  <div className="flex flex-wrap items-center gap-2 text-sm">
+                    <span>
+                      {file.data.pending.state === "conflict"
+                        ? editLabel === null
+                          ? "Sync conflict"
+                          : `Sync conflict · ${editLabel} to compare`
+                        : file.data.pending.state === "failed"
+                          ? "Sync failed · Saved text retained"
+                          : "Unsynced edit"}
+                    </span>
+                    {file.data.pending.state === "pending" ||
+                    file.data.pending.state === "failed" ? (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        disabled={syncing}
+                        onClick={() => {
+                          setSyncing(true);
+                          setActionError(null);
+                          void callMethod("files.sync", {}, fileSyncResult)
+                            .then(async () => {
+                              await files.refetch();
+                              await file.refetch();
+                            })
+                            .catch((error: unknown) => {
+                              setActionError(
+                                error instanceof Error
+                                  ? error.message
+                                  : "Sync could not finish",
+                              );
+                            })
+                            .finally(() => {
+                              setSyncing(false);
+                            });
+                        }}
+                      >
+                        {syncing ? "Syncing…" : "Sync"}
+                      </Button>
+                    ) : null}
+                  </div>
+                )}
+                {file.data ? (
+                  <p className="text-xs text-[var(--stipe-fg-muted)]">
+                    {formatBytes(file.data.size)}
+                    {shownText === null
+                      ? ""
+                      : ` · ${String(shownText.trimEnd().split("\n").length)} lines`}
+                  </p>
+                ) : null}
+                {files.data ? (
+                  <p className="text-sm text-[var(--stipe-fg-muted)]">
+                    Latest commit · {files.data.commit.author.name} ·{" "}
+                    <Link
+                      to={href({
+                        page: "commit",
+                        repo: route.repo,
+                        hash: files.data.commit.hash,
+                      })}
+                    >
+                      {shortHash(files.data.commit.hash)}
+                    </Link>{" "}
+                    · {firstLine(files.data.commit.message)} ·{" "}
+                    {relativeTime(files.data.commit.committedAt * 1000)}
+                  </p>
+                ) : null}
+                {shown === null ? (
+                  <p>Pick a file to read it.</p>
+                ) : file.isPending ? (
+                  <Loading label="Loading file" />
+                ) : file.isError ? (
+                  <Failure
+                    error={file.error}
+                    retry={() => {
+                      void file.refetch();
+                    }}
+                  />
+                ) : shownText === null ? (
+                  <p>
+                    {file.data.binary ? "Binary file" : "Too large to show"}
+                  </p>
+                ) : raw ? (
+                  <pre className="overflow-x-auto whitespace-pre text-sm">
+                    {shownText}
+                  </pre>
+                ) : /\.(md|mdx|markdown)$/iu.test(shown) ? (
+                  <Markdown text={shownText} />
+                ) : (
+                  <FileView path={shown} text={shownText} />
+                )}
+              </div>
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+}

package/web/commit-tree.tsx

@@ -0,0 +1,152 @@
+/** Newest-first history: topology in a narrow rail, readable commit links beside it. */
+import { useEffect, useMemo, useRef } from "react";
+import type { Graph, GraphNode } from "../shared/contract.js";
+import { layoutGraph } from "./network-graph.js";
+import { agentColor, relativeTime, shortHash } from "./format.js";
+import { href, Link } from "./router.js";
+import type { AgentColors } from "./parts.js";
+
+export function verticalHistory(graph: Graph) {
+  const layout = layoutGraph(graph, 1);
+  const step = Math.min(20, 112 / Math.max(1, layout.lanes.length));
+  const order = [...layout.order].reverse().map((item, row) => ({
+    ...item,
+    x: 12 + item.row * step,
+    y: row * 62 + 20,
+  }));
+  return {
+    order,
+    byHash: new Map(order.map((item) => [item.node.hash, item])),
+    home: layout.home,
+    width: 24 + Math.max(0, layout.lanes.length - 1) * step,
+  };
+}
+
+export function CommitTree({
+  graph,
+  colors,
+  selected,
+  onSelect,
+}: {
+  graph: Graph;
+  colors: AgentColors;
+  selected?: string | undefined;
+  onSelect?: (node: GraphNode) => void;
+}) {
+  const element = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (selected)
+      element.current
+        ?.querySelector('[aria-current="true"]')
+        ?.scrollIntoView({ block: "center" });
+  }, [selected]);
+  const tree = useMemo(() => verticalHistory(graph), [graph]);
+  if (tree.order.length === 0)
+    return (
+      <p className="text-sm text-[var(--stipe-fg-muted)] bonsai-muted">
+        No commits yet.
+      </p>
+    );
+  return (
+    <div
+      ref={element}
+      className="bonsai-history"
+      aria-label="Commit history, newest first"
+    >
+      <div className="bonsai-history-body" style={{ paddingLeft: tree.width }}>
+        <svg
+          className="bonsai-history-rail"
+          width={tree.width}
+          height={tree.order.length * 62}
+          aria-hidden="true"
+        >
+          {tree.order.flatMap((child) =>
+            child.node.parents.map((hash) => {
+              const parent = tree.byHash.get(hash);
+              return parent ? (
+                <path
+                  key={`${child.node.hash}:${hash}`}
+                  d={`M ${String(child.x)} ${String(child.y)} C ${String(child.x)} ${String(child.y + 30)}, ${String(parent.x)} ${String(parent.y - 30)}, ${String(parent.x)} ${String(parent.y)}`}
+                  fill="none"
+                  stroke={agentColor(colors.get(child.node.agent ?? "")?.color)}
+                  strokeWidth={2}
+                />
+              ) : (
+                <path
+                  key={`${child.node.hash}:${hash}`}
+                  d={`M ${String(child.x)} ${String(child.y)} v 30`}
+                  stroke="var(--stipe-fg-muted)"
+                  strokeDasharray="3 3"
+                >
+                  <title>Parent outside this history sample</title>
+                </path>
+              );
+            }),
+          )}
+          {tree.order.map((item) => (
+            <circle
+              key={item.node.hash}
+              cx={item.x}
+              cy={item.y}
+              r={item.node.parents.length > 1 ? 5 : 4}
+              fill={
+                item.node.parents.length > 1
+                  ? "var(--color-base-100)"
+                  : agentColor(colors.get(item.node.agent ?? "")?.color)
+              }
+              stroke={agentColor(colors.get(item.node.agent ?? "")?.color)}
+              strokeWidth={2}
+            />
+          ))}
+        </svg>
+        <ol className="bonsai-history-commits">
+          {tree.order.map(({ node }) => {
+            const lane = tree.home.get(node.hash);
+            return (
+              <li
+                key={node.hash}
+                className={
+                  selected === node.hash
+                    ? "bg-[var(--stipe-surface-selected)]"
+                    : undefined
+                }
+              >
+                <Link
+                  onClick={(event) => {
+                    if (
+                      onSelect &&
+                      !event.metaKey &&
+                      !event.ctrlKey &&
+                      !event.shiftKey &&
+                      event.button === 0
+                    ) {
+                      event.preventDefault();
+                      onSelect(node);
+                    }
+                  }}
+                  aria-current={selected === node.hash ? "true" : undefined}
+                  to={href({
+                    page: "commit",
+                    repo: lane?.repo ?? graph.lanes[0]?.repo ?? "",
+                    hash: node.hash,
+                  })}
+                >
+                  <span className="min-w-0 truncate">{node.message}</span>
+                  <span className="max-w-[45%] shrink-0 truncate text-xs text-[var(--stipe-fg-muted)] bonsai-history-branch">
+                    {lane?.owner ? `${lane.owner}/` : ""}
+                    {lane?.ref}
+                  </span>
+                </Link>
+                <p className="text-sm text-[var(--stipe-fg-muted)] bonsai-muted">
+                  <code>{shortHash(node.hash)}</code> ·{" "}
+                  {node.agent ?? node.author} ·{" "}
+                  {relativeTime(node.committedAt * 1000)}
+                </p>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
+    </div>
+  );
+}

package/web/format.ts

@@ -0,0 +1,54 @@
+/** Small presentation helpers shared by Bonsai's views. */
+
+const AGENT_COLOR = /^c[0-7]$/u;
+
+/** An agent's palette slot as a CSS colour; unknown agents read as neutral ink. */
+export function agentColor(slot: string | undefined): string {
+  return slot !== undefined && AGENT_COLOR.test(slot)
+    ? `var(--bonsai-agent-${slot})`
+    : "var(--stipe-fg-muted)";
+}
+
+export function shortHash(hash: string): string {
+  return hash.slice(0, 7);
+}
+
+/**
+ * A readable stand-in for a human actor whose host-issued member id is the
+ * only identity Bonsai has recorded; never show that raw id.
+ */
+export function shortActor(id: string): string {
+  return `Member ${id.slice(-6)}`;
+}
+
+const units: [Intl.RelativeTimeFormatUnit, number][] = [
+  ["year", 31_536_000_000],
+  ["month", 2_592_000_000],
+  ["week", 604_800_000],
+  ["day", 86_400_000],
+  ["hour", 3_600_000],
+  ["minute", 60_000],
+];
+
+const relative = new Intl.RelativeTimeFormat("en", {
+  numeric: "auto",
+  style: "narrow",
+});
+
+export function relativeTime(at: number, now = Date.now()): string {
+  const delta = at - now;
+  for (const [unit, size] of units)
+    if (Math.abs(delta) >= size)
+      return relative.format(Math.round(delta / size), unit);
+  return "just now";
+}
+
+export function firstLine(message: string): string {
+  return message.split("\n")[0] ?? "";
+}
+
+export function formatBytes(size: number): string {
+  if (size < 1024) return `${String(size)} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}