@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/web/parts.tsx

@@ -0,0 +1,381 @@
+/** Shared pieces composed from Caps: agent marks, the activity feed, sparklines. */
+import { Button } from "@fungi.computer/caps/components/button";
+import { Monogram } from "@fungi.computer/caps/components/monogram";
+import { Loader } from "@fungi.computer/caps/components/loader";
+import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";
+import { useListMotion } from "@fungi.computer/caps/lib/reorder-motion";
+import { curveMonotoneX } from "@visx/curve";
+import { scaleLinear } from "@visx/scale";
+import { AreaClosed, LinePath } from "@visx/shape";
+import { useRef, type ReactNode } from "react";
+import type { Activity, Agent } from "../shared/contract.js";
+import { ApiError } from "./api.js";
+import { agentColor, relativeTime, shortActor, shortHash } from "./format.js";
+import { href, Link } from "./router.js";
+
+export type AgentColors = ReadonlyMap<
+  string,
+  { color: string; kind: Agent["kind"] }
+>;
+
+export function agentColors(agents: readonly Agent[] | undefined): AgentColors {
+  return new Map(
+    (agents ?? []).map((agent) => [
+      agent.name,
+      { color: agent.color, kind: agent.kind },
+    ]),
+  );
+}
+
+/**
+ * The actor's readable label. Bonsai never records a human member's display
+ * name (their id is their identity, see `callerActor`), so a known human
+ * actor reads as a short label instead of the raw host-issued id. Agents,
+ * and any actor this view hasn't resolved yet, keep their recorded name.
+ */
+export function actorLabel(name: string, colors: AgentColors): string {
+  return colors.get(name)?.kind === "human" ? shortActor(name) : name;
+}
+
+export function AgentMark({
+  name,
+  colors,
+  size = "default",
+}: {
+  name: string;
+  colors: AgentColors;
+  size?: "default" | "lg";
+}) {
+  return (
+    <Monogram
+      name={actorLabel(name, colors)}
+      seed={name}
+      size={size}
+      data-agent-slot={colors.get(name)?.color}
+    />
+  );
+}
+
+export function AgentName({
+  name,
+  colors,
+}: {
+  name: string;
+  colors: AgentColors;
+}) {
+  return (
+    <span className="font-semibold bonsai-agent-name">
+      <svg
+        className="inline-block mr-1"
+        width="8"
+        height="8"
+        viewBox="0 0 8 8"
+        aria-hidden="true"
+      >
+        <circle
+          cx="4"
+          cy="4"
+          r="4"
+          fill={agentColor(colors.get(name)?.color)}
+        />
+      </svg>
+      {actorLabel(name, colors)}
+    </span>
+  );
+}
+
+function ownerOf(repo: string): string | null {
+  const split = repo.indexOf("--");
+  return split === -1 ? null : repo.slice(split + 2);
+}
+
+function familyOf(repo: string): string {
+  return repo.split("--")[0] ?? repo;
+}
+
+function describe(event: Activity, colors: AgentColors): ReactNode {
+  const who = <AgentName name={event.actor} colors={colors} />;
+  switch (event.type) {
+    case "push": {
+      const count = event.data.commits.length;
+      if (count === 0)
+        return (
+          <>
+            {who} brought{" "}
+            <span className="font-mono text-sm bonsai-ref">{event.repo}</span>{" "}
+            up to date
+          </>
+        );
+      const ref =
+        event.data.updates[0]?.ref.replace(/^refs\/heads\//u, "") ?? "";
+      const where =
+        ownerOf(event.repo) === null
+          ? event.repo
+          : `${ownerOf(event.repo) ?? ""}/${ref}`;
+      return (
+        <>
+          {who} pushed {count === 1 ? "a commit" : `${String(count)} commits`}{" "}
+          to{" "}
+          <span className="font-mono text-sm bonsai-ref">
+            {ownerOf(event.repo) === null ? `${event.repo}/${ref}` : where}
+          </span>
+        </>
+      );
+    }
+    case "fork":
+      return (
+        <>
+          {who} forked{" "}
+          <span className="font-mono text-sm bonsai-ref">{event.repo}</span>
+        </>
+      );
+    case "merge":
+      return (
+        <>
+          {who} merged{" "}
+          <span className="font-mono text-sm bonsai-ref">
+            {ownerOf(event.data.change.sourceRepo) ??
+              event.data.change.sourceRepo}
+            /{event.data.change.sourceRef}
+          </span>{" "}
+          into{" "}
+          <span className="font-mono text-sm bonsai-ref">{event.data.ref}</span>
+        </>
+      );
+    case "merge.conflict":
+      return (
+        <>
+          {who} tried to merge{" "}
+          <span className="font-mono text-sm bonsai-ref">
+            {ownerOf(event.data.change.sourceRepo) ??
+              event.data.change.sourceRepo}
+            /{event.data.change.sourceRef}
+          </span>
+          : conflicts in{" "}
+          {event.data.paths.length === 1
+            ? event.data.paths[0]
+            : `${String(event.data.paths.length)} files`}
+        </>
+      );
+    case "change.opened":
+    case "change.updated":
+    case "change.approved":
+    case "change.checks_requested":
+    case "change.checked":
+    case "change.closed":
+      return (
+        <>
+          {who} {event.type.slice(7).replaceAll("_", " ")}{" "}
+          <Link
+            to={href({
+              page: "change",
+              repo: event.data.change.repo,
+              number: event.data.change.number,
+            })}
+          >
+            Change #{event.data.change.number}
+          </Link>
+          {event.data.name
+            ? ` · ${event.data.name}: ${event.data.status ?? ""}`
+            : ""}
+        </>
+      );
+    case "repo.created":
+      return (
+        <>
+          {who} created{" "}
+          <span className="font-mono text-sm bonsai-ref">{event.repo}</span>
+        </>
+      );
+  }
+}
+
+export function ActivityFeed({
+  events,
+  colors,
+  fresh,
+  showRepo = false,
+}: {
+  events: readonly Activity[];
+  colors: AgentColors;
+  fresh: ReadonlySet<number>;
+  showRepo?: boolean;
+}) {
+  const list = useRef<HTMLOListElement>(null);
+  useListMotion(
+    list,
+    events.map((event) => String(event.id)),
+  );
+  if (events.length === 0) return null;
+  return (
+    <ol className="bonsai-feed" ref={list}>
+      {events.map((event) => (
+        <li
+          key={event.id}
+          data-reorder-key={String(event.id)}
+          className={
+            fresh.has(event.id)
+              ? "bonsai-feed-item bonsai-feed-fresh"
+              : "bonsai-feed-item"
+          }
+        >
+          <div className="min-w-0">
+            <p
+              className="truncate"
+              title={
+                event.type === "push"
+                  ? event.data.commits[0]?.message
+                  : undefined
+              }
+            >
+              {event.type === "push" && event.data.commits.length > 0 ? (
+                <>
+                  <AgentName name={event.actor} colors={colors} /> ·{" "}
+                  {event.data.commits[0]?.message}
+                  {event.data.commits.length > 1
+                    ? ` (+${String(event.data.commits.length - 1)} commits)`
+                    : ""}
+                </>
+              ) : (
+                describe(event, colors)
+              )}
+            </p>
+            <p
+              className="truncate text-xs text-[var(--stipe-fg-muted)]"
+              title={
+                event.type === "push" ? event.data.paths.join(", ") : undefined
+              }
+            >
+              {event.type === "push" && event.data.commits[0] ? (
+                <>
+                  <Link
+                    to={href({
+                      page: "commit",
+                      repo: event.repo,
+                      hash: event.data.commits[0].hash,
+                    })}
+                  >
+                    {shortHash(event.data.commits[0].hash)}
+                  </Link>
+                  {event.data.paths.length > 0
+                    ? ` · ${event.data.paths[0] ?? ""}${event.data.paths.length > 1 ? ` +${String(event.data.paths.length - 1)}` : ""}`
+                    : ""}
+                  {" · "}
+                </>
+              ) : null}
+              {showRepo ? (
+                <>
+                  <Link
+                    to={href({
+                      page: "repo",
+                      repo: familyOf(event.repo),
+                      tab: "overview",
+                      ref: null,
+                      path: "",
+                      file: null,
+                    })}
+                  >
+                    {familyOf(event.repo)}
+                  </Link>
+                  {" · "}
+                </>
+              ) : null}
+              <time dateTime={new Date(event.at).toISOString()}>
+                {relativeTime(event.at)}
+              </time>
+            </p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/**
+ * Pushes per hour over the last day, as a soft area. A single active bucket
+ * (or none) has no trend to show, only a stray mark, so it renders nothing.
+ */
+export function Sparkline({
+  values,
+  width = 120,
+  height = 28,
+}: {
+  values: readonly number[];
+  width?: number;
+  height?: number;
+}) {
+  const active = values.filter((value) => value > 0).length;
+  if (active < 2) return null;
+  const max = Math.max(1, ...values);
+  const x = scaleLinear({
+    domain: [0, Math.max(1, values.length - 1)],
+    range: [1, width - 1],
+  });
+  const y = scaleLinear({ domain: [0, max], range: [height - 2, 3] });
+  const points = values.map((value, index) => ({ index, value }));
+  return (
+    <svg
+      className="bonsai-spark"
+      width={width}
+      height={height}
+      role="img"
+      aria-label={`${String(values.reduce((a, b) => a + b, 0))} pushes in the last day`}
+    >
+      <AreaClosed
+        data={points}
+        x={(point) => x(point.index)}
+        y={(point) => y(point.value)}
+        yScale={y}
+        curve={curveMonotoneX}
+        className="bonsai-spark-area"
+      />
+      <LinePath
+        data={points}
+        x={(point) => x(point.index)}
+        y={(point) => y(point.value)}
+        curve={curveMonotoneX}
+        className="bonsai-spark-line"
+      />
+    </svg>
+  );
+}
+
+export function Loading({ label }: { label: string }) {
+  return (
+    <div className="bonsai-loading">
+      <Loader label={label} size="sm" />
+    </div>
+  );
+}
+
+export function Failure({
+  error,
+  retry,
+}: {
+  error: unknown;
+  retry?: () => void;
+}) {
+  return (
+    <EmptyState
+      variant="quiet"
+      headingLevel={3}
+      title={
+        error instanceof ApiError && error.status === 404
+          ? "Not found"
+          : retry
+            ? "Taking longer than usual"
+            : "Couldn't load this"
+      }
+      description={
+        error instanceof Error ? error.message : "Try again in a moment."
+      }
+      actions={
+        retry ? (
+          <Button size="sm" variant="outline" onClick={retry}>
+            Retry
+          </Button>
+        ) : undefined
+      }
+    />
+  );
+}

package/web/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M9 23V9m0 4c0 4 14 2 14 9" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><circle cx="9" cy="9" r="3" fill="currentColor"/><circle cx="9" cy="23" r="3" fill="currentColor"/><circle cx="23" cy="22" r="3" fill="currentColor"/></svg>

package/web/repo-navigation.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@fungi.computer/caps/components/button";
+import { CopyField } from "@fungi.computer/caps/components/copy-field";
+import { CountBadge } from "@fungi.computer/caps/components/count-badge";
+import { Status } from "@fungi.computer/caps/components/status";
+import { NavigationRail } from "@fungi.computer/caps/components/navigation-rail";
+import {
+  Popover,
+  PopoverAnchor,
+} from "@fungi.computer/caps/components/popover";
+import { Select } from "@fungi.computer/caps/components/select";
+import { inspectIssueTree } from "@fungi.computer/issues";
+import type { RepoDetail } from "../shared/contract.js";
+import { useIssueFiles } from "./api.js";
+import { href, Link, useRouter, type Route } from "./router.js";
+
+const sections = [
+  ["overview", "Overview", "o"],
+  ["code", "Code", "c"],
+  ["commits", "History", "h"],
+  ["changes", "Changes", "x"],
+  ["issues", "Issues", "i"],
+  ["settings", "Settings", "s"],
+] as const;
+
+function IssueCount({ repo, refName }: { repo: string; refName: string }) {
+  const files = useIssueFiles(repo, refName);
+  if (!files.data) return null;
+  const count = inspectIssueTree(files.data.files).frontier.length;
+  return count > 0 ? <CountBadge count={count} /> : null;
+}
+
+export function RepoNavigation({
+  detail,
+  route,
+  working,
+  changes,
+  needsAttention,
+  controlsTarget,
+}: {
+  detail: RepoDetail;
+  route: Extract<Route, { page: "repo" }>;
+  working: number;
+  changes: number;
+  needsAttention: boolean;
+  controlsTarget: (element: HTMLDivElement | null) => void;
+}) {
+  const { go } = useRouter();
+  const [cloneOpen, setCloneOpen] = useState(false);
+  const [copyRequest, setCopyRequest] = useState(0);
+  const desktopClone = useRef<HTMLDivElement>(null);
+  const phoneClone = useRef<HTMLDivElement>(null);
+  const anchor = useRef<HTMLDivElement>(null);
+  const cloneButton = useRef<HTMLButtonElement>(null);
+  const refName = route.ref ?? detail.defaultBranch;
+  const navigate = (tab: Extract<Route, { page: "repo" }>["tab"]) => {
+    go(href({ ...route, tab, file: null, path: "" }));
+  };
+  useEffect(() => {
+    let chordAt = 0;
+    const keydown = (event: KeyboardEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.altKey ||
+        event.repeat
+      )
+        return;
+      const target = event.target;
+      if (
+        target instanceof HTMLElement &&
+        (target.isContentEditable ||
+          target.closest("input,textarea,select,[role=textbox]"))
+      )
+        return;
+      const key = event.key.toLowerCase();
+      if (key === "escape" && cloneOpen) {
+        setCloneOpen(false);
+        cloneButton.current?.focus();
+        return;
+      }
+      const section = sections.find((item) => item[2] === key);
+      if (chordAt && Date.now() - chordAt < 1200 && section) {
+        event.preventDefault();
+        chordAt = 0;
+        navigate(section[0]);
+      } else if (key === "g") chordAt = Date.now();
+      else {
+        chordAt = 0;
+        if (key === "c") {
+          event.preventDefault();
+          if (matchMedia("(max-width: 767px)").matches) setCloneOpen(true);
+          setCopyRequest((value) => value + 1);
+        }
+      }
+    };
+    document.addEventListener("keydown", keydown);
+    return () => {
+      document.removeEventListener("keydown", keydown);
+    };
+  });
+  useEffect(() => {
+    if (copyRequest === 0) return;
+    const field = matchMedia("(max-width: 767px)").matches
+      ? phoneClone.current
+      : desktopClone.current;
+    field?.querySelector("button")?.click();
+  }, [copyRequest]);
+  useEffect(() => {
+    if (!cloneOpen) return;
+    const dismiss = (event: PointerEvent) => {
+      if (
+        event.target instanceof Node &&
+        !anchor.current?.contains(event.target)
+      )
+        setCloneOpen(false);
+    };
+    document.addEventListener("pointerdown", dismiss);
+    return () => {
+      document.removeEventListener("pointerdown", dismiss);
+    };
+  }, [cloneOpen]);
+  return (
+    <>
+      <header
+        className="flex min-w-0 flex-wrap items-center gap-3"
+        aria-label="Repository header"
+      >
+        <div className="flex min-w-0 flex-1 basis-full flex-wrap items-baseline gap-x-2 gap-y-1 md:basis-0">
+          <Link to="/" className="text-sm text-[var(--stipe-fg-muted)]">
+            Bonsai /
+          </Link>
+          <h1 className="caps-card-title">{detail.repo.name}</h1>
+          {detail.repo.description ? (
+            <p className="text-sm text-[var(--stipe-fg-muted)]">
+              {detail.repo.description}
+            </p>
+          ) : null}
+          {detail.repo.parent ? (
+            <span className="text-sm text-[var(--stipe-fg-muted)]">
+              fork of{" "}
+              <Link
+                to={href({
+                  ...route,
+                  repo: detail.repo.parent,
+                  tab: "overview",
+                })}
+              >
+                {detail.repo.parent}
+              </Link>
+            </span>
+          ) : null}
+        </div>
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          {working > 0 ? (
+            <Status
+              aria-label="Recent repository pushes"
+              title="Pushed in the last 15 minutes"
+              size="compact"
+              appearance="chip"
+              tone="neutral"
+              label={`${String(working)} pushed recently`}
+            />
+          ) : null}
+          <div className="w-32 shrink-0">
+            <Select
+              aria-label="Branch"
+              className="w-32"
+              value={refName}
+              onChange={(event) => {
+                go(
+                  href({
+                    ...route,
+                    ref: event.target.value,
+                    path: "",
+                    file: null,
+                  }),
+                );
+              }}
+            >
+              {detail.refs
+                .filter((item) => item.name.startsWith("refs/heads/"))
+                .map((item) => (
+                  <option key={item.name} value={item.name.slice(11)}>
+                    {item.name.slice(11)}
+                  </option>
+                ))}
+            </Select>
+          </div>
+          <div className="hidden max-w-sm md:block" ref={desktopClone}>
+            <CopyField value={detail.cloneUrl} label="Clone" />
+          </div>
+          <PopoverAnchor className="md:hidden" ref={anchor}>
+            <Button
+              ref={cloneButton}
+              variant="outline"
+              size="sm"
+              aria-expanded={cloneOpen}
+              aria-controls="repo-clone"
+              onClick={() => {
+                setCloneOpen(!cloneOpen);
+              }}
+            >
+              Clone
+            </Button>
+            <Popover
+              open={cloneOpen}
+              side="bottom"
+              id="repo-clone"
+              className="w-72 max-w-[calc(100vw-2rem)]"
+              role="region"
+              aria-label="Clone repository"
+            >
+              <div ref={phoneClone}>
+                <CopyField value={detail.cloneUrl} />
+              </div>
+            </Popover>
+          </PopoverAnchor>
+        </div>
+      </header>
+      <div className="flex min-w-0 flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <NavigationRail
+          className="min-w-0 sm:flex-1"
+          aria-label="Repository sections"
+        >
+          {sections.map(([tab, label, key]) => (
+            <Link
+              key={tab}
+              className="inline-flex items-center gap-2"
+              to={href({ ...route, tab, path: "", file: null })}
+              aria-current={route.tab === tab ? "page" : undefined}
+              title={`G ${key.toUpperCase()}`}
+            >
+              {label}
+              {tab === "changes" && changes > 0 ? (
+                <CountBadge
+                  count={changes}
+                  tone={needsAttention ? "warning" : "neutral"}
+                />
+              ) : null}
+              {tab === "issues" ? (
+                <IssueCount repo={route.repo} refName={refName} />
+              ) : null}
+            </Link>
+          ))}
+        </NavigationRail>
+        <div
+          className="self-end sm:self-auto"
+          ref={controlsTarget}
+          hidden={route.tab !== "overview"}
+        />
+      </div>
+    </>
+  );
+}