@fungi.computer/bonsai 0.1.0 → 0.2.0

package/web/app-build-panel.tsx

@@ -1,6 +1,19 @@
+import { replayKey } from "@fungi.computer/cairn";
 import { useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as S from "effect/Schema";
 import { z } from "zod";
+import { workflowDefinitionSchema } from "@fungi.computer/braid";
+import { runReply } from "@fungi.computer/workflows-wire";
+import {
+  RunTimeline,
+  OutputError,
+  runStatusSchema,
+  runSteps,
+  terminal,
+  timelineItems,
+} from "@fungi.computer/trellis/run-timeline";
+import template from "@fungi.computer/trellis/templates/bonsai-build-on-merge" with { type: "json" };
 import { Button } from "@fungi.computer/caps/components/button";
 import {
   Card,
@@ -10,57 +23,83 @@ import {
 } from "@fungi.computer/caps/components/card";
 import { Input } from "@fungi.computer/caps/components/input";
 import { pendingSchema } from "@fungi.computer/agar";
-import { appBuildView, jsonValue } from "../shared/contract.js";
+import { appBuildView, appRegistration } from "../shared/contract.js";
 import { callMethod } from "./transport.js";
 
-// The panel sends the Release back to apps.install as JSON.
-const buildView = appBuildView.extend({ release: jsonValue.nullable() });
-// While the job runs, apps.buildStatus answers Agar Pending.
-const buildStatus = z.union([pendingSchema, buildView]);
-
-/** Start a build of a registered App's source, then install or switch its
- * Release once it finishes. Owner only; the host re-checks that on every call. */
-export function AppBuildPanel() {
-  const [appId, setAppId] = useState("");
-  const [sourceRevision, setSourceRevision] = useState("");
-  const [installationId, setInstallationId] = useState("");
-  const [jobId, setJobId] = useState<string | null>(null);
+const buildStatus = z.union([pendingSchema, appBuildView]).nullable();
+const definition = S.decodeUnknownSync(workflowDefinitionSchema)(
+  template.definition,
+);
+const appDisplay = { app_bonsai: { displayName: "Bonsai", icon: "bonsai" } };
 
-  const build = useMutation({
-    mutationFn: () =>
-      callMethod("apps.build", { appId, sourceRevision }, buildView),
-    onSuccess: (job) => {
-      setJobId(job.jobId);
-    },
-  });
+/** Both this owner action and accepted main pushes start the same Workflow.
+ * Only its host-attested install step selects a Release; the panel never does. */
+export function AppBuildPanel({ repo }: { repo: string }) {
+  const queryClient = useQueryClient();
+  const [appId, setAppId] = useState<string | null>(null);
+  const [sourceRevision, setSourceRevision] = useState<string | null>(null);
+  const [installationId, setInstallationId] = useState<string | null>(null);
+  const [runId, setRunId] = useState<string | null>(null);
+  const statusKey = ["apps.buildStatus", repo];
   const status = useQuery({
-    queryKey: ["apps.buildStatus", jobId],
+    queryKey: statusKey,
+    queryFn: () => callMethod("apps.buildStatus", { repo }, buildStatus),
+    refetchInterval: 5000,
+  });
+  const settled =
+    status.data == null || "kind" in status.data ? null : status.data;
+  const selectedAppId = appId ?? settled?.appId ?? "";
+  const selectedRevision = sourceRevision ?? settled?.sourceRevision ?? "";
+  const selectedInstallationId = installationId ?? repo;
+  const run = useQuery({
+    queryKey: ["apps.buildWorkflowRun", runId],
+    enabled: runId !== null,
     queryFn: () => {
-      if (jobId === null) throw new Error("No build job to check yet");
-      return callMethod("apps.buildStatus", { jobId }, buildStatus);
+      if (runId === null) throw new Error("No Workflow run selected");
+      return callMethod("apps.buildWorkflowRun", { runId }, runStatusSchema);
     },
-    enabled: jobId !== null,
     refetchInterval: (query) =>
-      query.state.data === undefined || "kind" in query.state.data
-        ? 3_000
-        : false,
+      query.state.data !== undefined &&
+      (query.state.data.outcome !== "active" ||
+        terminal(query.state.data.status))
+        ? false
+        : 2000,
   });
-  const settled =
-    status.data === undefined || "kind" in status.data ? null : status.data;
-  const install = useMutation({
-    mutationFn: () => {
-      const release = settled?.release;
-      if (release === null || release === undefined)
-        throw new Error("This build has no Release yet");
-      return callMethod(
-        "apps.install",
-        { installationId, release },
-        z.unknown(),
+  const build = useMutation({
+    mutationFn: async () => {
+      const started = await callMethod(
+        "apps.startBuildWorkflow",
+        {
+          repo,
+          sourceRevision: selectedRevision,
+          installationId: selectedInstallationId,
+          requestId: replayKey(),
+        },
+        runReply,
       );
+      if (
+        !("kind" in started) ||
+        (started.kind !== "started" && started.kind !== "replay")
+      )
+        throw new Error("Build Workflow refused: " + JSON.stringify(started));
+      return started;
+    },
+    onSuccess: (started) => {
+      setRunId(started.runId);
     },
   });
-
-  const release = settled?.release ?? null;
+  const registration = useMutation({
+    mutationFn: () => callMethod("apps.register", { repo }, appRegistration),
+    onSuccess: (registered) => {
+      setAppId(registered.appId);
+      setSourceRevision(registered.sourceRevision);
+      setInstallationId(repo);
+      setRunId(null);
+      queryClient.setQueryData(statusKey, null);
+      build.reset();
+    },
+  });
+  const busy = build.isPending || registration.isPending;
   return (
     <Card className="w-full max-w-2xl" variant="outline">
       <CardHeader>
@@ -68,27 +107,45 @@ export function AppBuildPanel() {
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
         <p className="text-sm text-[var(--stipe-fg-muted)]">
-          Build a registered App&rsquo;s source at one exact commit on this
-          Oyster&rsquo;s Computer, then install the Release, or switch an
-          already-live installation onto it. Only the owner may do this.
+          Register the committed App recipe, then start the Workflow to build,
+          verify and install your chosen revision. Its steps report what
+          actually happened. Only the owner may do this.
         </p>
+        <div>
+          <Button
+            type="button"
+            disabled={busy}
+            onClick={() => {
+              registration.mutate();
+            }}
+          >
+            {registration.isPending ? "Registering…" : "Make this an App"}
+          </Button>
+        </div>
+        {registration.isError ? (
+          <p role="alert">{registration.error.message}</p>
+        ) : null}
         <form
           className="flex flex-col gap-4"
           onSubmit={(event) => {
             event.preventDefault();
-            if (appId && sourceRevision && !build.isPending) build.mutate();
+            if (
+              selectedAppId &&
+              selectedRevision &&
+              selectedInstallationId &&
+              !busy
+            )
+              build.mutate();
           }}
         >
           <label className="flex flex-col gap-2" htmlFor="app-build-app-id">
             <span>App id</span>
             <Input
               id="app-build-app-id"
-              value={appId}
-              onChange={(event) => {
-                setAppId(event.target.value);
-              }}
-              placeholder="app_my-fork"
-              disabled={build.isPending}
+              value={selectedAppId}
+              readOnly
+              placeholder="app_myfork"
+              disabled={busy}
             />
           </label>
           <label
@@ -98,73 +155,104 @@ export function AppBuildPanel() {
             <span>Source revision</span>
             <Input
               id="app-build-source-revision"
-              value={sourceRevision}
+              value={selectedRevision}
               onChange={(event) => {
                 setSourceRevision(event.target.value);
               }}
-              placeholder={`git:${"a".repeat(40)}`}
-              disabled={build.isPending}
+              placeholder={"git:" + "a".repeat(40)}
+              disabled={busy}
             />
           </label>
-          {build.isError ? (
-            <div role="alert" className="text-sm text-error">
-              <p>{build.error.message}</p>
-            </div>
-          ) : null}
-          <div>
-            <Button
-              type="submit"
-              disabled={!appId || !sourceRevision || build.isPending}
-            >
-              {build.isPending ? "Starting build…" : "Build"}
-            </Button>
-          </div>
-        </form>
-        {jobId !== null ? (
-          <p className="text-sm" role="status">
-            Job {jobId}: {settled?.status ?? "running…"}
-            {/* A succeeded build's detail is its phase timings, not a message. */}
-            {settled?.status !== "succeeded" && settled?.detail
-              ? ` — ${settled.detail}`
-              : ""}
-          </p>
-        ) : null}
-        <form
-          className="flex flex-col gap-4"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (installationId && release !== null && !install.isPending)
-              install.mutate();
-          }}
-        >
           <label className="flex flex-col gap-2" htmlFor="app-install-id">
             <span>Install at</span>
             <Input
               id="app-install-id"
-              value={installationId}
+              value={selectedInstallationId}
               onChange={(event) => {
                 setInstallationId(event.target.value);
               }}
-              placeholder="my-fork"
-              disabled={install.isPending}
+              disabled={busy}
             />
           </label>
-          {install.isError ? (
-            <div role="alert" className="text-sm text-error">
-              <p>{install.error.message}</p>
-            </div>
-          ) : null}
+          {build.isError ? <p role="alert">{build.error.message}</p> : null}
           <div>
             <Button
               type="submit"
               disabled={
-                !installationId || release === null || install.isPending
+                !selectedAppId ||
+                !selectedRevision ||
+                !selectedInstallationId ||
+                busy
               }
             >
-              {install.isPending ? "Installing…" : "Install this Release"}
+              {build.isPending ? "Starting Workflow…" : "Build & install"}
             </Button>
           </div>
         </form>
+        {runId !== null ? (
+          <section aria-label="Build Workflow" className="flex flex-col gap-3">
+            <p role="status">Workflow run {runId}</p>
+            {run.isPending ? (
+              <p role="status">Loading Workflow steps…</p>
+            ) : null}
+            {run.isError ? <p role="alert">{run.error.message}</p> : null}
+            {run.data === undefined ? null : (
+              <>
+                <p role="status">
+                  {run.data.title}: {run.data.status}
+                </p>
+                {run.data.error === null ? null : (
+                  <OutputError error={run.data.error} />
+                )}
+                <RunTimeline
+                  items={timelineItems(
+                    runSteps(
+                      run.data.events,
+                      run.data.outcome,
+                      run.data.reviews,
+                    ),
+                    definition,
+                    appDisplay,
+                  )}
+                />
+              </>
+            )}
+          </section>
+        ) : (
+          <section
+            aria-label="Latest repository build"
+            className="flex flex-col gap-2"
+          >
+            {status.data != null && "kind" in status.data ? (
+              <p role="status">
+                Build or automatic installation is still running.
+              </p>
+            ) : null}
+            {settled === null ? null : (
+              <p role="status">
+                Job {settled.jobId}: {settled.status}
+                {settled.status !== "succeeded" && settled.detail
+                  ? " — " + settled.detail
+                  : ""}
+              </p>
+            )}
+            {status.isError ? <p role="alert">{status.error.message}</p> : null}
+            {settled?.installation?.kind === "needs_consent" ? (
+              <p role="status">
+                Needs owner consent. Automatic installation left any previous
+                Release unchanged.
+              </p>
+            ) : null}
+            {settled?.installation?.kind === "installed" ? (
+              <p role="status">
+                Installed at {settled.installation.installationId}.
+              </p>
+            ) : null}
+            {settled?.installation?.kind === "failed" ? (
+              <p role="alert">Not installed: {settled.installation.detail}</p>
+            ) : null}
+          </section>
+        )}
       </CardContent>
     </Card>
   );

package/web/bonsai.css

@@ -1,3 +1,4 @@
+@source "../../trellis/src/runs";
 @import "@fungi.computer/caps/tailwind.css";
 @source "./";
 

package/web/index.html

@@ -7,7 +7,6 @@
       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>

package/web/repo-settings.tsx

@@ -139,7 +139,7 @@ export function RepoSettings({ repo }: { repo: string }) {
           )}
         </CardContent>
       </Card>
-      <AppBuildPanel />
+      <AppBuildPanel key={repo} repo={repo} />
     </div>
   );
 }

package/web/public/favicon.svg

@@ -1 +0,0 @@
-<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>