@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/web/insights.tsx

@@ -0,0 +1,250 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { BonsaiBoard, type BoardTile } from "./board.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { arrangeBento } from "@fungi.computer/maosaico";
+import { Button } from "@fungi.computer/caps/components/button";
+import { Select } from "@fungi.computer/caps/components/select";
+import {
+  defaultLayout,
+  insightLayout,
+  savedLayout,
+  tileId,
+  tileTitles,
+  type InsightLayout,
+  type TileId,
+} from "../shared/insights.js";
+import { callMethod } from "./transport.js";
+import { Failure, Loading } from "./parts.js";
+
+function Grid({
+  repo,
+  initial,
+  definitions,
+  controlsTarget,
+}: {
+  repo: string;
+  initial: InsightLayout["placements"];
+  definitions: BoardTile[];
+  controlsTarget: HTMLElement | null;
+}) {
+  const client = useQueryClient();
+  const [tiles, setTiles] = useState(initial);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(initial);
+  const [error, setError] = useState<Error | null>(null);
+  const [add, setAdd] = useState<TileId>("contributors");
+  const missing = tileId.options.filter(
+    (id) =>
+      !tiles.some((tile) => tile.id === id) &&
+      definitions.some((tile) => tile.id === id),
+  );
+  const selectedAdd = missing.includes(add) ? add : missing[0];
+  async function save() {
+    setSaving(true);
+    setError(null);
+    try {
+      await callMethod(
+        "insights.layout.save",
+        { repo, tiles: { view: "overview", placements: tiles } },
+        savedLayout,
+      );
+      client.setQueryData(["insight-layout", repo], {
+        tiles: { view: "overview", placements: tiles },
+      });
+      setSaved(tiles);
+      setEditing(false);
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause : new Error("Could not save layout"),
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+  return (
+    <section className="bonsai-insights" aria-label="Repository overview">
+      {controlsTarget
+        ? createPortal(
+            <div className="flex flex-wrap items-center gap-2 bonsai-insight-actions">
+              {editing ? (
+                <>
+                  {selectedAdd ? (
+                    <>
+                      <Select
+                        aria-label="Visualization to add"
+                        value={selectedAdd}
+                        onChange={(event) => {
+                          setAdd(tileId.parse(event.target.value));
+                        }}
+                      >
+                        {missing.map((id) => (
+                          <option key={id} value={id}>
+                            {tileTitles[id]}
+                          </option>
+                        ))}
+                      </Select>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        disabled={saving}
+                        onClick={() => {
+                          setTiles(
+                            insightLayout.shape.placements.parse(
+                              arrangeBento(
+                                [
+                                  ...tiles,
+                                  {
+                                    id: selectedAdd,
+                                    col: 0,
+                                    row: 48,
+                                    w: 2,
+                                    h: 1,
+                                  },
+                                ],
+                                4,
+                              ),
+                            ),
+                          );
+                        }}
+                      >
+                        Add
+                      </Button>
+                    </>
+                  ) : null}
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={saving}
+                    onClick={() => {
+                      setTiles(defaultLayout.placements);
+                    }}
+                  >
+                    Reset
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={saving}
+                    onClick={() => {
+                      setTiles(saved);
+                      setEditing(false);
+                      setError(null);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    size="sm"
+                    loading={saving}
+                    onClick={() => void save()}
+                  >
+                    Save layout
+                  </Button>
+                </>
+              ) : (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    setEditing(true);
+                  }}
+                >
+                  Arrange tiles
+                </Button>
+              )}
+            </div>,
+            controlsTarget,
+          )
+        : null}
+      {editing ? (
+        <p
+          className="text-sm text-[var(--stipe-fg-muted)] bonsai-muted"
+          role="status"
+        >
+          Drag Move or Resize. With a handle focused, use arrow keys; Escape
+          cancels a drag. Save keeps this layout for your account.
+        </p>
+      ) : null}
+      {error ? <Failure error={error} /> : null}
+      {tiles.length === 0 ? (
+        <p className="text-sm text-[var(--stipe-fg-muted)] bonsai-muted">
+          No tiles. Arrange tiles to add a visualization.
+        </p>
+      ) : null}
+      <BonsaiBoard
+        placements={tiles}
+        tiles={definitions}
+        phoneOrder={
+          editing
+            ? []
+            : [
+                "network",
+                "live",
+                "changes",
+                "actors",
+                "next",
+                "readme",
+                "contributors",
+                "ages",
+                "churn",
+                "calendar",
+              ]
+        }
+        editable={editing && !saving}
+        onChange={(next) => {
+          setTiles(
+            insightLayout.shape.placements.parse(
+              next.map((tile) => ({
+                ...tile,
+                col: Math.min(3, tile.col),
+                row: Math.min(48, tile.row),
+                w: Math.min(4, tile.w),
+                h: Math.min(4, tile.h),
+              })),
+            ),
+          );
+        }}
+        onRemove={(id) => {
+          setTiles(tiles.filter((tile) => tile.id !== id));
+        }}
+      />
+    </section>
+  );
+}
+
+export function OverviewBoard({
+  repo,
+  definitions,
+  controlsTarget,
+}: {
+  repo: string;
+  definitions: BoardTile[];
+  controlsTarget: HTMLElement | null;
+}) {
+  const layout = useQuery({
+    queryKey: ["insight-layout", repo],
+    queryFn: () => callMethod("insights.layout.get", { repo }, savedLayout),
+    staleTime: Infinity,
+  });
+  if (layout.isPending) return <Loading label="Loading your layout" />;
+  if (layout.isError)
+    return (
+      <Failure
+        error={layout.error}
+        retry={() => {
+          void layout.refetch();
+        }}
+      />
+    );
+  return (
+    <Grid
+      key={repo}
+      repo={repo}
+      initial={(layout.data.tiles ?? defaultLayout).placements}
+      definitions={definitions}
+      controlsTarget={controlsTarget}
+    />
+  );
+}

package/web/issues-panel.tsx

@@ -0,0 +1,305 @@
+import { BonsaiBoard } from "./board.js";
+import { CardTitle } from "@fungi.computer/caps/components/card";
+/**
+ * Issues as files: Markdown tickets under issues/ in the repository, checked
+ * by the shared issue validator, with the unblocked frontier first.
+ */
+import { Badge } from "@fungi.computer/caps/components/badge";
+import {
+  DataList,
+  DataListHeading,
+  DataRow,
+} from "@fungi.computer/caps/components/data-list";
+import {
+  Status,
+  type StatusTone,
+} from "@fungi.computer/caps/components/status";
+import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";
+import {
+  inspectIssueTree,
+  type IssueIndexRecord,
+  type IssueStatus,
+} from "@fungi.computer/issues";
+import { useMemo } from "react";
+import { useIssueFiles } from "./api.js";
+import { Failure, Loading } from "./parts.js";
+import { href, Link } from "./router.js";
+import { Markdown } from "./views.js";
+
+const statusTone = {
+  "needs-triage": "neutral",
+  "needs-info": "warning",
+  "ready-for-agent": "info",
+  "ready-for-human": "info",
+  "in-progress": "primary",
+  resolved: "success",
+  wontfix: "neutral",
+} satisfies Record<IssueStatus, StatusTone>;
+
+const statusLabel = {
+  "needs-triage": "triage",
+  "needs-info": "needs info",
+  "ready-for-agent": "ready · agent",
+  "ready-for-human": "ready · person",
+  "in-progress": "in progress",
+  resolved: "resolved",
+  wontfix: "won't fix",
+} satisfies Record<IssueStatus, string>;
+
+function IssueRow({
+  repo,
+  refName,
+  issue,
+  records,
+}: {
+  repo: string;
+  refName: string;
+  issue: IssueIndexRecord;
+  records: readonly IssueIndexRecord[];
+}) {
+  return (
+    <DataRow className="grid-cols-[minmax(0,1fr)_auto]">
+      <div className="bonsai-commit-text">
+        <Link
+          to={href({
+            page: "repo",
+            repo,
+            tab: "issues",
+            ref: refName,
+            path: "",
+            file: issue.path,
+          })}
+        >
+          {issue.title}
+        </Link>
+        <p className="text-sm text-[var(--stipe-fg-muted)] bonsai-muted">
+          <code>{issue.id}</code>
+          {issue.assignee === null ? "" : ` · ${issue.assignee}`}
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        <Status
+          size="compact"
+          tone={issue.blocked ? "warning" : statusTone[issue.status]}
+          glyph={
+            issue.status === "in-progress" && !issue.blocked ? "arc" : "dot"
+          }
+          label={
+            issue.blocked ? (
+              <>
+                blocked by{" "}
+                {issue.blocked_by.map((id, index) => {
+                  const dependency = records.find((record) => record.id === id);
+                  return (
+                    <span key={id}>
+                      {index > 0 ? ", " : ""}
+                      {dependency ? (
+                        <Link
+                          to={href({
+                            page: "repo",
+                            repo,
+                            tab: "issues",
+                            ref: refName,
+                            path: "",
+                            file: dependency.path,
+                          })}
+                        >
+                          {id}
+                        </Link>
+                      ) : (
+                        id
+                      )}
+                    </span>
+                  );
+                })}
+              </>
+            ) : (
+              statusLabel[issue.status]
+            )
+          }
+        />
+        <Badge
+          size="sm"
+          variant="quiet"
+          tone={
+            issue.priority === "p0" || issue.priority === "p1"
+              ? "warning"
+              : "neutral"
+          }
+        >
+          {issue.priority}
+        </Badge>
+      </div>
+    </DataRow>
+  );
+}
+
+export function IssuesPanel({
+  repo,
+  refName,
+  open,
+}: {
+  repo: string;
+  refName: string;
+  open: string | null;
+}) {
+  const files = useIssueFiles(repo, refName);
+  const report = useMemo(
+    () => (files.data ? inspectIssueTree(files.data.files) : null),
+    [files.data],
+  );
+  if (files.isPending) return <Loading label="Loading issues" />;
+  if (files.isError)
+    return (
+      <Failure
+        error={files.error}
+        retry={() => {
+          void files.refetch();
+        }}
+      />
+    );
+  if (report === null || Object.keys(files.data.files).length === 0)
+    return (
+      <EmptyState
+        variant="panel"
+        headingLevel={3}
+        title="No issues yet"
+        description="Issues live in the repository as Markdown under issues/<effort>/<NN>-<slug>.md, so agents read and update them with git."
+      />
+    );
+  const opened = open === null ? undefined : files.data.files[open];
+  if (open !== null && opened !== undefined)
+    return (
+      <div className="bonsai-issue">
+        <nav className="bonsai-crumbs" aria-label="Issue">
+          <Link
+            to={href({
+              page: "repo",
+              repo,
+              tab: "issues",
+              ref: refName,
+              path: "",
+              file: null,
+            })}
+          >
+            Issues
+          </Link>
+          <span>/ {open}</span>
+        </nav>
+        <div className="caps-card caps-card-surface bonsai-file">
+          <Markdown text={opened} />
+        </div>
+      </div>
+    );
+  const done = (issue: IssueIndexRecord) =>
+    issue.status === "resolved" || issue.status === "wontfix";
+  const groups = [
+    {
+      title: "Unblocked",
+      records: report.records.filter((issue) => !done(issue) && !issue.blocked),
+    },
+    {
+      title: "Blocked",
+      records: report.records.filter((issue) => !done(issue) && issue.blocked),
+    },
+    { title: "Done", records: report.records.filter(done) },
+  ];
+  return (
+    <BonsaiBoard
+      rowHeight={0}
+      placements={[
+        { id: "issues", col: 0, row: 0, w: 3, h: 1 },
+        { id: "issue-help", col: 3, row: 0, w: 1, h: 1 },
+      ]}
+      phoneOrder={["issues", "issue-help"]}
+      tiles={[
+        {
+          id: "issues",
+          title: "Issues",
+          autoHeight: true,
+          body: (
+            <div className="space-y-4">
+              {report.status === "fail" ? (
+                <section
+                  className="caps-card caps-card-surface p-4 bonsai-issue-problems"
+                  aria-labelledby="issue-problems"
+                >
+                  <header className="bonsai-section-head">
+                    <CardTitle level={2} id="issue-problems">
+                      Issue files need fixing
+                    </CardTitle>
+                    <Badge size="sm" tone="error" variant="quiet">
+                      {report.diagnostics.length}
+                    </Badge>
+                  </header>
+                  <ul>
+                    {report.diagnostics
+                      .slice(0, 12)
+                      .map((diagnostic, index) => (
+                        <li key={`${diagnostic.path}:${String(index)}`}>
+                          <code>{diagnostic.path}</code>{" "}
+                          <span className="text-sm text-[var(--stipe-fg-muted)] bonsai-muted">
+                            {diagnostic.detail}
+                          </span>
+                        </li>
+                      ))}
+                  </ul>
+                </section>
+              ) : null}
+              {report.records.length === 0 ? (
+                <DataList className="bonsai-change-list" density="compact">
+                  {Object.keys(files.data.files).map((path) => (
+                    <DataRow key={path}>
+                      <Link
+                        to={href({
+                          page: "repo",
+                          repo,
+                          tab: "issues",
+                          ref: refName,
+                          path: "",
+                          file: path,
+                        })}
+                      >
+                        {path}
+                      </Link>
+                    </DataRow>
+                  ))}
+                </DataList>
+              ) : null}
+              {groups
+                .filter((group) => group.records.length > 0)
+                .map((group) => (
+                  <section key={group.title}>
+                    <DataListHeading level={3}>{group.title}</DataListHeading>
+                    <DataList>
+                      {group.records.map((issue) => (
+                        <IssueRow
+                          key={issue.id}
+                          repo={repo}
+                          refName={refName}
+                          issue={issue}
+                          records={report.records}
+                        />
+                      ))}
+                    </DataList>
+                  </section>
+                ))}
+            </div>
+          ),
+        },
+        {
+          id: "issue-help",
+          title: "How issues work",
+          autoHeight: true,
+          body: (
+            <p>
+              Issues are Markdown files under <code>issues/</code>. Agents and
+              people edit them with git. Dependencies link each issue to the
+              work that must finish first.
+            </p>
+          ),
+        },
+      ]}
+    />
+  );
+}

package/web/main.tsx

@@ -0,0 +1,72 @@
+import { HomePage } from "./home-page.js";
+import { ChangePage } from "./change-page.js";
+import { mountApp, useWindowStatus } from "@fungi.computer/agar/react";
+import type { AppRoot } from "@fungi.computer/agar";
+import { QueryClient } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import "@fungi.computer/caps/fonts.css";
+import "./bonsai.css";
+import { productName } from "../shared/contract.js";
+import { useLive } from "./api.js";
+import { CommitPage, RepoPage } from "./pages.js";
+import { connect } from "./transport.js";
+import { RouterProvider, useRouter } from "./router.js";
+
+function Shell({ app }: { app: AppRoot | null }) {
+  const { route } = useRouter();
+  const live = useLive();
+  // Bonsai's one status bar is the window footer: the Live/Connecting
+  // readout goes there, the same way Shed and Inkcap report their state.
+  useWindowStatus(app, [
+    {
+      kind: "text",
+      id: "live",
+      text: live.error ?? (live.connected ? "Live" : "Connecting"),
+      tone:
+        live.error !== null ? "error" : live.connected ? "success" : "neutral",
+    },
+  ]);
+  return (
+    <div className="caps-app-canvas bonsai-shell">
+      <main className="bonsai-page">
+        {route.page === "home" ? (
+          <HomePage live={live} />
+        ) : route.page === "repo" ? (
+          <RepoPage key={route.repo} route={route} live={live} />
+        ) : route.page === "change" ? (
+          <ChangePage
+            key={`${route.repo}:${String(route.number)}`}
+            repo={route.repo}
+            number={route.number}
+          />
+        ) : (
+          <CommitPage repo={route.repo} hash={route.hash} />
+        )}
+      </main>
+    </div>
+  );
+}
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 10_000, refetchOnWindowFocus: false, retry: 1 },
+  },
+});
+
+const root = document.getElementById("bonsai-root");
+if (!root) throw new Error("Bonsai's root element is missing");
+mountApp(
+  root,
+  { name: productName, queryClient: client },
+  ({ app, status }) => {
+    if (status === "connecting") return null;
+    connect(app);
+    return (
+      <StrictMode>
+        <RouterProvider>
+          <Shell app={app} />
+        </RouterProvider>
+      </StrictMode>
+    );
+  },
+);