@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/web/repo-settings.tsx

@@ -0,0 +1,145 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@fungi.computer/caps/components/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@fungi.computer/caps/components/card";
+import { Input } from "@fungi.computer/caps/components/input";
+import { repositoryDeletion } from "../shared/repository-deletion.js";
+import { callMethod } from "./transport.js";
+import { href, Link, useRouter } from "./router.js";
+import { AppBuildPanel } from "./app-build-panel.js";
+
+/** Keep cleanup retry usable after the public repository entry is withdrawn. */
+export function RepoSettings({ repo }: { repo: string }) {
+  const { go } = useRouter();
+  const client = useQueryClient();
+  const [confirming, setConfirming] = useState(false);
+  const [confirmation, setConfirmation] = useState("");
+  const deletion = useMutation({
+    mutationFn: () => callMethod("repos.delete", { repo }, repositoryDeletion),
+    onSuccess: async () => {
+      client.removeQueries({ queryKey: ["repo", repo] });
+      await client.invalidateQueries({ queryKey: ["repos"] });
+      go("/");
+    },
+  });
+  const failure = deletion.error?.message;
+  const retryMessage =
+    failure === "Provider temporarily unavailable; retry deletion" ||
+    failure === "Bonsai could not finish that request"
+      ? "Deletion didn't finish because storage was unavailable. Confirm again to finish removing it."
+      : failure;
+  return (
+    <div className="flex min-w-0 flex-col gap-5">
+      <nav
+        aria-label="Repository"
+        className="flex flex-wrap items-center gap-2 text-sm"
+      >
+        <Link to="/">Bonsai</Link>
+        <span aria-hidden="true">/</span>
+        <Link
+          className="break-all"
+          to={href({
+            page: "repo",
+            repo,
+            tab: "overview",
+            ref: null,
+            path: "",
+            file: null,
+          })}
+        >
+          {repo}
+        </Link>
+        <span aria-hidden="true">/</span>
+        <span aria-current="page">Settings</span>
+      </nav>
+      <h1 className="caps-card-title">Repository settings</h1>
+      <Card className="w-full max-w-2xl" variant="outline">
+        <CardHeader>
+          <CardTitle level={2}>Delete repository</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <p>
+            This removes <strong className="break-all">{repo}</strong> and its
+            Git content. This cannot be undone.
+          </p>
+          <p className="text-sm text-[var(--stipe-fg-muted)]">
+            Only the owner can delete a repository. Delete its forks first.
+          </p>
+          {confirming ? (
+            <form
+              className="flex flex-col gap-4"
+              onSubmit={(event) => {
+                event.preventDefault();
+                if (confirmation === repo && !deletion.isPending)
+                  deletion.mutate();
+              }}
+            >
+              <label
+                className="flex flex-col gap-2"
+                htmlFor="repository-deletion-name"
+              >
+                <span>Repository name</span>
+                <span className="text-sm text-[var(--stipe-fg-muted)]">
+                  Type the name above to confirm.
+                </span>
+                <Input
+                  id="repository-deletion-name"
+                  value={confirmation}
+                  onChange={(event) => {
+                    setConfirmation(event.target.value);
+                  }}
+                  autoComplete="off"
+                  disabled={deletion.isPending}
+                  autoFocus
+                />
+              </label>
+              {deletion.isError ? (
+                <div role="alert" className="text-sm text-error">
+                  <p>{retryMessage}</p>
+                </div>
+              ) : null}
+              <div className="flex flex-wrap gap-3">
+                <Button
+                  variant="destructive"
+                  type="submit"
+                  disabled={confirmation !== repo || deletion.isPending}
+                >
+                  {deletion.isPending ? "Deleting…" : "Confirm deletion"}
+                </Button>
+                <Button
+                  variant="outline"
+                  type="button"
+                  disabled={deletion.isPending}
+                  onClick={() => {
+                    setConfirming(false);
+                    setConfirmation("");
+                    deletion.reset();
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          ) : (
+            <div>
+              <Button
+                variant="destructive"
+                onClick={() => {
+                  setConfirming(true);
+                }}
+              >
+                Delete repository
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+      <AppBuildPanel />
+    </div>
+  );
+}

package/web/router.tsx

@@ -0,0 +1,151 @@
+/**
+ * App navigation stays in memory. Numbered Changes also accept a hash link
+ * when the frame opens, or when its hash changes.
+ */
+import * as z from "zod";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type AnchorHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+export type Route =
+  | { page: "home" }
+  | {
+      page: "repo";
+      repo: string;
+      tab: "code" | "commits" | "changes" | "issues" | "overview" | "settings";
+      ref: string | null;
+      path: string;
+      file: string | null;
+      commit?: string;
+    }
+  | { page: "commit"; repo: string; hash: string }
+  | { page: "change"; repo: string; number: number };
+
+function parseRoute(path: string): Route {
+  const location = new URL(path, "https://bonsai.local");
+  if (location.hash.startsWith("#change/")) {
+    const [kind, repo, rawNumber] = location.hash.slice(1).split("/");
+    const number = z.coerce.number().int().positive().safeParse(rawNumber);
+    if (kind === "change" && repo && number.success)
+      return {
+        page: "change",
+        repo: decodeURIComponent(repo),
+        number: number.data,
+      };
+    return { page: "home" };
+  }
+  const parts = location.pathname
+    .split("/")
+    .filter(Boolean)
+    .map(decodeURIComponent);
+  const [repo, section, hash] = parts;
+  if (repo === undefined) return { page: "home" };
+  if (section === "commit" && hash !== undefined)
+    return { page: "commit", repo, hash };
+  const tab = location.searchParams.get("tab");
+  const route: Extract<Route, { page: "repo" }> = {
+    page: "repo",
+    repo,
+    tab:
+      tab === "commits" ||
+      tab === "changes" ||
+      tab === "issues" ||
+      tab === "settings" ||
+      tab === "overview"
+        ? tab
+        : tab === "insights"
+          ? "overview"
+          : tab === "code"
+            ? "code"
+            : "overview",
+    ref: location.searchParams.get("ref"),
+    path: location.searchParams.get("path") ?? "",
+    file: location.searchParams.get("file"),
+  };
+  const commit = location.searchParams.get("commit");
+  if (commit !== null) route.commit = commit;
+  return route;
+}
+
+export function href(route: Route): string {
+  if (route.page === "home") return "/";
+  if (route.page === "commit")
+    return `/${encodeURIComponent(route.repo)}/commit/${route.hash}`;
+  if (route.page === "change")
+    return `#change/${encodeURIComponent(route.repo)}/${String(route.number)}`;
+  const params = new URLSearchParams();
+  if (route.tab !== "overview") params.set("tab", route.tab);
+  if (route.ref !== null) params.set("ref", route.ref);
+  if (route.path !== "") params.set("path", route.path);
+  if (route.file !== null) params.set("file", route.file);
+  if (route.commit !== undefined) params.set("commit", route.commit);
+  const query = params.toString();
+  return `/${encodeURIComponent(route.repo)}${query ? `?${query}` : ""}`;
+}
+
+export type RouterValue = Readonly<{ route: Route; go: (to: string) => void }>;
+
+const RouterContext = createContext<RouterValue | null>(null);
+
+export function RouterProvider({ children }: { children: ReactNode }) {
+  const [path, setPath] = useState(() =>
+    location.hash.startsWith("#change/") ? location.hash : "/",
+  );
+  useEffect(() => {
+    const changed = () => {
+      setPath(location.hash.startsWith("#change/") ? location.hash : "/");
+    };
+    window.addEventListener("hashchange", changed);
+    return () => {
+      window.removeEventListener("hashchange", changed);
+    };
+  }, []);
+  const go = (to: string) => {
+    setPath(to);
+    scrollTo({ top: 0 });
+  };
+  return (
+    <RouterContext.Provider value={{ route: parseRoute(path), go }}>
+      {children}
+    </RouterContext.Provider>
+  );
+}
+
+export function useRouter(): RouterValue {
+  const value = useContext(RouterContext);
+  if (value === null) throw new Error("Bonsai routes need a RouterProvider");
+  return value;
+}
+
+export function Link({
+  to,
+  onClick,
+  ...props
+}: { to: string } & AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const { go } = useRouter();
+  return (
+    <a
+      {...props}
+      href={to}
+      onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+        onClick?.(event);
+        if (
+          event.defaultPrevented ||
+          event.metaKey ||
+          event.ctrlKey ||
+          event.shiftKey ||
+          event.button !== 0
+        )
+          return;
+        event.preventDefault();
+        go(to);
+      }}
+    />
+  );
+}

package/web/transport.ts

@@ -0,0 +1,91 @@
+/**
+ * How the UI reaches Bonsai's App methods: agar's `app.methods` capability
+ * when the host offers it, otherwise the admitted App backend. The host attributes every call
+ * to the signed-in person.
+ */
+import { appsOpen, type AppRoleChoice } from "@fungi.computer/agar/apps";
+import { AppError, type AppRoot } from "@fungi.computer/agar";
+import { appBackend, appMethods } from "@fungi.computer/agar/backend";
+import type * as z from "zod";
+import { errorBody, jsonValue, type JsonValue } from "../shared/contract.js";
+import {
+  readCopyRebuilding,
+  copyRebuildPage,
+  filesNavigateIntent,
+  filesRole,
+} from "@fungi.computer/agar/roles/files";
+
+export class ApiError extends Error {
+  constructor(
+    readonly status: number,
+    message: string,
+  ) {
+    super(message);
+  }
+}
+
+let connection: Pick<AppRoot, "capabilities"> | null = null;
+
+/** Remember the host connection mountApp handed over (null outside a host). */
+export function connect(app: Pick<AppRoot, "capabilities"> | null): void {
+  connection = app;
+}
+
+/** The Team's files-role App as the shell's role routing names it; null hides the entry. */
+export async function filesEditor(): Promise<AppRoleChoice> {
+  if (!connection?.capabilities.has(appsOpen)) return null;
+  return connection.capabilities.require(appsOpen).role(filesRole);
+}
+
+/** Open the file in whichever App the Team chose for the files role. */
+export async function editInFilesEditor(
+  repository: string,
+  branch: string,
+  path: string,
+): Promise<void> {
+  if (connection === null)
+    throw new ApiError(503, "Open Bonsai from an App host");
+  await connection.capabilities.require(appsOpen).open({
+    role: filesRole,
+    intent: filesNavigateIntent({ repository, branch, path }),
+  });
+}
+
+/** Call one App method and parse its result against the shared contract. */
+export async function callMethod<S extends z.ZodType>(
+  method: string,
+  input: JsonValue,
+  schema: S,
+): Promise<z.infer<S>> {
+  if (connection === null)
+    throw new ApiError(503, "Open Bonsai from an App host such as Oyster");
+  // Typed method calls let the host apply each method's effect (public
+  // visitors may call read methods); hosts without them get the backend.
+  const capabilities = connection.capabilities;
+  let result;
+  try {
+    result = capabilities.has(appMethods)
+      ? await capabilities
+          .require(appMethods)
+          .call(method, JSON.stringify(input))
+      : await capabilities
+          .require(appBackend)
+          .request(JSON.stringify({ method, input }));
+  } catch (error) {
+    if (error instanceof AppError && error.code === "CAPABILITY_DENIED")
+      throw new ApiError(403, "Sign in to this Oyster to do that");
+    throw error;
+  }
+  if (readCopyRebuilding.safeParse(result).success) {
+    let cursor: string | null = null;
+    let page;
+    do {
+      page = await callMethod("rebuildCopies", { cursor }, copyRebuildPage);
+      cursor = page.cursor;
+    } while (!page.done);
+    return callMethod(method, input, schema);
+  }
+  const failure = errorBody.safeParse(result);
+  if (failure.success) throw new ApiError(400, failure.data.error);
+  return schema.parse(jsonValue.parse(result));
+}

package/web/views.tsx

@@ -0,0 +1,151 @@
+/**
+ * Bonsai's file, diff, tree and Markdown views. Code and diffs are Pierre
+ * (themed like Inkcap: Catppuccin latte/mocha by the page theme), the tree is
+ * Pierre trees through Stipe's projection, and Markdown is TanStack Markdown
+ * inside Caps Prose.
+ */
+import { Markdown as CapsMarkdown } from "@fungi.computer/caps/components/markdown";
+import { pierreTreesStyle } from "@fungi.computer/stipe/pierre/trees";
+import { getTheme, subscribeTheme } from "@fungi.computer/stipe/theme";
+import { File as PierreFile, MultiFileDiff } from "@pierre/diffs/react";
+import { FileTree, useFileTree } from "@pierre/trees/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { FileDiff } from "../shared/contract.js";
+
+const DARK_THEMES = new Set([
+  "mocha",
+  "dark",
+  "readout-night",
+  "field-guide-night",
+  "embed-dark",
+  "phosphor",
+]);
+
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+
+function readThemeType(): "light" | "dark" {
+  const theme = getTheme();
+  if (theme !== null) return DARK_THEMES.has(theme) ? "dark" : "light";
+  return matchMedia(DARK_QUERY).matches ? "dark" : "light";
+}
+
+/** Light or dark, following the page's Stipe theme or the reader's setting. */
+function useThemeType(): "light" | "dark" {
+  const [type, setType] = useState(readThemeType);
+  useEffect(() => {
+    const query = matchMedia(DARK_QUERY);
+    const update = () => {
+      setType(readThemeType());
+    };
+    query.addEventListener("change", update);
+    const unsubscribe = subscribeTheme(update);
+    return () => {
+      query.removeEventListener("change", update);
+      unsubscribe();
+    };
+  }, []);
+  return type;
+}
+
+const pierreTheme = {
+  dark: "catppuccin-mocha",
+  light: "catppuccin-latte",
+} as const;
+
+export function FileView({ path, text }: { path: string; text: string }) {
+  const themeType = useThemeType();
+  const file = useMemo(() => ({ name: path, contents: text }), [path, text]);
+  return (
+    <div className="bonsai-pierre">
+      <PierreFile
+        file={file}
+        options={{
+          disableFileHeader: true,
+          overflow: "scroll",
+          themeType,
+          theme: pierreTheme,
+        }}
+      />
+    </div>
+  );
+}
+
+export function DiffView({ file }: { file: FileDiff }) {
+  const themeType = useThemeType();
+  const oldFile = useMemo(
+    () => ({ name: file.path, contents: file.oldText ?? "" }),
+    [file.path, file.oldText],
+  );
+  const newFile = useMemo(
+    () => ({ name: file.path, contents: file.newText ?? "" }),
+    [file.path, file.newText],
+  );
+  if (file.oldText === null || file.newText === null)
+    return (
+      <section
+        className="caps-card caps-card-surface bonsai-diff-file"
+        aria-label={file.path}
+      >
+        <header>
+          <span className="bonsai-diff-path">{file.path}</span>
+        </header>
+        <p className="bonsai-diff-note">
+          {file.binary ? "Binary file" : "Too large to show"}
+        </p>
+      </section>
+    );
+  return (
+    <section
+      className="caps-card caps-card-surface bonsai-diff-file bonsai-pierre"
+      aria-label={file.path}
+      id={`file-${file.path}`}
+    >
+      <MultiFileDiff
+        oldFile={oldFile}
+        newFile={newFile}
+        options={{
+          diffStyle: "unified",
+          overflow: "scroll",
+          themeType,
+          theme: pierreTheme,
+        }}
+      />
+    </section>
+  );
+}
+
+export type TreeProps = Readonly<{
+  paths: readonly string[];
+  active: string | null;
+  onOpen: (path: string) => void;
+}>;
+
+/** The repository tree. Remount it (key) when the path set changes. */
+export function RepoTree({ paths, active, onOpen }: TreeProps) {
+  const open = useRef(onOpen);
+  open.current = onOpen;
+  const { model } = useFileTree({
+    paths,
+    itemHeight: 30,
+    initialExpansion: 1,
+    onSelectionChange(selected) {
+      const path = selected[0];
+      if (path !== undefined && !path.endsWith("/")) open.current(path);
+    },
+  });
+  useEffect(() => {
+    if (active !== null) model.focusPath(active);
+  }, [model, active]);
+  return (
+    <FileTree
+      model={model}
+      className="bonsai-tree"
+      style={pierreTreesStyle({ itemHeight: 30 })}
+    />
+  );
+}
+
+/** Markdown from a repository, rendered by the shared Caps component. */
+export function Markdown({ text }: { text: string }) {
+  return <CapsMarkdown className="bonsai-markdown">{text}</CapsMarkdown>;
+}

package/web/working-now.tsx

@@ -0,0 +1,98 @@
+import type { Activity } from "../shared/contract.js";
+import { AgentMark, AgentName, type AgentColors } from "./parts.js";
+import { relativeTime } from "./format.js";
+
+const activityWindowMs = 15 * 60_000;
+
+function refLabel(ref: string): string {
+  return ref.replace(/^refs\/heads\//u, "").replace(/^refs\/tags\//u, "");
+}
+
+/** Agents who pushed in this repository family in the last 15 minutes. */
+export function workingNow(events: readonly Activity[]) {
+  const since = Date.now() - activityWindowMs;
+  const byAgent = new Map<
+    string,
+    { repo: string; ref: string; at: number; paths: Set<string> }
+  >();
+  for (const event of events) {
+    if (event.type !== "push" || event.at < since) continue;
+    const current = byAgent.get(event.actor);
+    const ref = refLabel(event.data.updates[0]?.ref ?? "");
+    if (!current)
+      byAgent.set(event.actor, {
+        repo: event.repo,
+        ref,
+        at: event.at,
+        paths: new Set(event.data.paths),
+      });
+    else for (const path of event.data.paths) current.paths.add(path);
+  }
+  return [...byAgent.entries()].map(([agent, value]) => ({ agent, ...value }));
+}
+
+/** Expire recorded activity even when the cached event page stays unchanged. */
+export function useWorkingNow(events: readonly Activity[]) {
+  const [, refresh] = useReducer((value: number) => value + 1, 0);
+  const current = workingNow(events);
+  const expiresAt = current.length
+    ? Math.min(...current.map((item) => item.at)) + activityWindowMs + 1
+    : null;
+  useEffect(() => {
+    if (expiresAt === null) return;
+    const timeout = setTimeout(refresh, Math.max(0, expiresAt - Date.now()));
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [expiresAt]);
+  return current;
+}
+
+function areaOf(path: string): string {
+  const parts = path.split("/");
+  return parts.length > 1 ? `${parts.slice(0, -1).join("/")}/` : path;
+}
+
+export function WorkingNow({
+  events,
+  colors,
+}: {
+  events: readonly Activity[];
+  colors: AgentColors;
+}) {
+  const working = useWorkingNow(events);
+  if (working.length === 0) return null;
+  return (
+    <ul className="bonsai-working">
+      {working.map((item) => {
+        const areas = [...new Set([...item.paths].map(areaOf))].slice(0, 4);
+        return (
+          <li key={item.agent} data-agent-slot={colors.get(item.agent)?.color}>
+            <AgentMark name={item.agent} colors={colors} />
+            <div>
+              <p>
+                <AgentName name={item.agent} colors={colors} />{" "}
+                <span className="text-sm text-[var(--stipe-fg-muted)] bonsai-muted">
+                  on
+                </span>{" "}
+                <span className="font-mono text-sm bonsai-ref">
+                  {item.repo.includes("--") ? `${item.agent}/` : ""}
+                  {item.ref}
+                </span>
+              </p>
+              <p className="text-xs bonsai-working-areas">
+                {areas.map((area) => (
+                  <code key={area}>{area}</code>
+                ))}
+              </p>
+            </div>
+            <time className="text-xs text-[var(--stipe-fg-muted)] bonsai-feed-time">
+              {relativeTime(item.at)}
+            </time>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+import { useEffect, useReducer } from "react";