@appsforgood/next-supabase-kit 0.1.8 → 0.2.0

package/dist/studio/office/assets/office.css

@@ -566,6 +566,10 @@ body {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 code {
   font-family: ui-monospace, Menlo, Consolas, monospace;
   font-size: 12px;
@@ -600,6 +604,39 @@ code {
   max-height: calc(100vh - 64px);
 }
 
+.studio-tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.studio-tab {
+  min-height: 34px;
+  border: 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  background: #0f172a;
+  color: #94a3b8;
+  font: inherit;
+  cursor: pointer;
+}
+
+.studio-tab:last-child {
+  border-right: 0;
+}
+
+.studio-tab.active {
+  background: #334155;
+  color: #f8fafc;
+}
+
+.studio-tab:focus-visible {
+  outline: 2px solid #fbbf24;
+  outline-offset: -2px;
+}
+
 .studio-controls {
   display: grid;
   gap: 10px;
@@ -620,7 +657,9 @@ code {
 
 .studio-note-form input,
 .studio-note-form select,
-#session-picker {
+#session-picker,
+#runtime-picker,
+#runtime-goal {
   width: 100%;
   padding: 8px 10px;
   border-radius: 8px;
@@ -630,13 +669,95 @@ code {
   font-size: 13px;
 }
 
+#runtime-goal {
+  min-height: 82px;
+  resize: vertical;
+  line-height: 1.4;
+}
+
+.runtime-start-form,
+.runtime-toolbar {
+  display: grid;
+  gap: 8px;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.runtime-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #cbd5e1;
+}
+
+.runtime-check input {
+  width: 16px;
+  height: 16px;
+}
+
+.runtime-summary {
+  margin: 0 0 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.runtime-summary div {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 8px;
+  padding: 7px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 12px;
+}
+
+.runtime-summary dt {
+  color: #94a3b8;
+}
+
+.runtime-summary dd {
+  margin: 0;
+  color: #f8fafc;
+  overflow-wrap: anywhere;
+}
+
+.runtime-approval {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid rgba(251, 191, 36, 0.32);
+  border-radius: 6px;
+  background: rgba(251, 191, 36, 0.08);
+  color: #f8fafc;
+}
+
+.runtime-approval p {
+  margin: 6px 0 10px;
+  color: #cbd5e1;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.runtime-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.runtime-cancel {
+  width: 100%;
+  margin-bottom: 12px;
+}
+
 .transcript-panel h2 {
   margin: 0 0 8px;
   font-size: 14px;
   color: #f8fafc;
 }
 
-#transcript-list {
+#transcript-list,
+#runtime-event-list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -645,7 +766,8 @@ code {
   font-size: 12px;
 }
 
-#transcript-list li {
+#transcript-list li,
+#runtime-event-list li {
   padding: 8px;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.04);
@@ -692,11 +814,20 @@ code {
 @media (max-width: 900px) {
   .office-main.studio-layout {
     grid-template-columns: 1fr;
+    grid-template-areas:
+      "activity"
+      "office";
+  }
+  .office-main.studio-layout > .canvas-wrap {
+    grid-area: office;
   }
   .transcript-panel {
-    max-height: 200px;
+    grid-area: activity;
+    height: min(640px, 72vh);
+    max-height: none;
     border-left: 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
 }
 
@@ -732,8 +863,8 @@ code {
   padding: 6px 10px;
   background: #fff;
   color: var(--ink);
-  border: 2px solid var(--accent);
-  border-radius: 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
   font-size: 11px;
   line-height: 1.3;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

package/dist/studio/office/assets/office.js

@@ -36,6 +36,9 @@
     studioSessionId: boot.activeSessionId || "",
     studioEvents: [],
     studioEventSource: null,
+    runtimeRuns: [],
+    runtimeRunId: "",
+    runtimeEvents: [],
     speechBubbles: [],
     agenticLevel: null
   };
@@ -77,7 +80,25 @@
     studioNoteForm: document.getElementById("studio-note-form"),
     studioNoteAgent: document.getElementById("studio-note-agent"),
     studioNoteText: document.getElementById("studio-note-text"),
-    studioRenderBtn: document.getElementById("studio-render-btn")
+    studioRenderBtn: document.getElementById("studio-render-btn"),
+    studioCouncilTab: document.getElementById("studio-council-tab"),
+    studioRuntimeTab: document.getElementById("studio-runtime-tab"),
+    studioCouncilView: document.getElementById("studio-council-view"),
+    studioRuntimeView: document.getElementById("studio-runtime-view"),
+    runtimeStartForm: document.getElementById("runtime-start-form"),
+    runtimeStartBtn: document.getElementById("runtime-start-btn"),
+    runtimeGoal: document.getElementById("runtime-goal"),
+    runtimeDirtyBase: document.getElementById("runtime-dirty-base"),
+    runtimePicker: document.getElementById("runtime-picker"),
+    runtimeRefreshBtn: document.getElementById("runtime-refresh-btn"),
+    runtimeSummary: document.getElementById("runtime-summary"),
+    runtimeApproval: document.getElementById("runtime-approval"),
+    runtimeApprovalTitle: document.getElementById("runtime-approval-title"),
+    runtimeApprovalDetail: document.getElementById("runtime-approval-detail"),
+    runtimeApproveBtn: document.getElementById("runtime-approve-btn"),
+    runtimeRejectBtn: document.getElementById("runtime-reject-btn"),
+    runtimeCancelBtn: document.getElementById("runtime-cancel-btn"),
+    runtimeEventList: document.getElementById("runtime-event-list")
   };
 
   const ctx = els.canvas?.getContext("2d");
@@ -175,7 +196,13 @@
   }
 
   async function api(path, options) {
-    const response = await fetch(path, options);
+    const requestOptions = options ? { ...options } : {};
+    const method = String(requestOptions.method || "GET").toUpperCase();
+    if (!["GET", "HEAD", "OPTIONS"].includes(method)) {
+      const token = document.querySelector('meta[name="agent-kit-csrf-token"]')?.getAttribute("content") || "";
+      requestOptions.headers = { ...(requestOptions.headers || {}), "Content-Type": "application/json", "X-Agent-Kit-CSRF": token };
+    }
+    const response = await fetch(path, requestOptions);
     const data = await response.json();
     if (!response.ok) throw new Error(data.error || "Request failed");
     return data;
@@ -230,6 +257,7 @@
       window.setTimeout(() => els.officeHint?.classList.add("hidden"), 6000);
     }
     connectStudioStream();
+    await loadRuntimeRuns().catch((error) => renderRuntimeUnavailable(error.message));
   }
 
   function populateSessionPicker(sessions, selectedId) {
@@ -257,7 +285,123 @@
       : '<option value="planner">Planner</option>';
   }
 
+  function switchStudioView(view) {
+    const runtime = view === "runtime";
+    if (els.studioCouncilView) els.studioCouncilView.hidden = runtime;
+    if (els.studioRuntimeView) els.studioRuntimeView.hidden = !runtime;
+    els.studioCouncilTab?.classList.toggle("active", !runtime);
+    els.studioRuntimeTab?.classList.toggle("active", runtime);
+    els.studioCouncilTab?.setAttribute("aria-selected", String(!runtime));
+    els.studioRuntimeTab?.setAttribute("aria-selected", String(runtime));
+    if (runtime) void loadRuntimeRuns().catch((error) => renderRuntimeUnavailable(error.message));
+  }
+
+  function populateRuntimePicker() {
+    if (!els.runtimePicker) return;
+    els.runtimePicker.innerHTML = state.runtimeRuns.length
+      ? state.runtimeRuns
+          .map(
+            (run) =>
+              '<option value="' +
+              escapeHtml(run.runId) +
+              '"' +
+              (run.runId === state.runtimeRunId ? " selected" : "") +
+              ">" +
+              escapeHtml(run.runId.slice(0, 30) + " · " + run.status) +
+              "</option>"
+          )
+          .join("")
+      : '<option value="">No runs</option>';
+  }
+
+  async function loadRuntimeRuns() {
+    const response = await api("/api/runtime/runs");
+    const runtimeEnabled = response.enabled === true;
+    if (els.runtimeStartBtn) els.runtimeStartBtn.disabled = !runtimeEnabled;
+    state.runtimeRuns = Array.isArray(response.runs) ? response.runs : [];
+    if (!state.runtimeRunId || !state.runtimeRuns.some((run) => run.runId === state.runtimeRunId)) {
+      state.runtimeRunId = state.runtimeRuns[0]?.runId || "";
+    }
+    populateRuntimePicker();
+    if (state.runtimeRunId) await loadRuntimeRun(state.runtimeRunId);
+    else if (runtimeEnabled) renderRuntimeRun(null, []);
+    else renderRuntimeUnavailable("Runtime is disabled in .agent-kit/orchestrator.json.");
+  }
+
+  async function loadRuntimeRun(runId) {
+    if (!runId) {
+      renderRuntimeRun(null, []);
+      return;
+    }
+    const response = await api("/api/runtime/runs/" + encodeURIComponent(runId));
+    state.runtimeRunId = runId;
+    state.runtimeEvents = response.events || [];
+    const index = state.runtimeRuns.findIndex((run) => run.runId === runId);
+    if (index >= 0) state.runtimeRuns[index] = response.run;
+    else state.runtimeRuns.unshift(response.run);
+    populateRuntimePicker();
+    renderRuntimeRun(response.run, state.runtimeEvents);
+  }
+
+  function renderRuntimeUnavailable(message) {
+    if (els.runtimeStartBtn) els.runtimeStartBtn.disabled = true;
+    if (els.runtimeSummary) els.runtimeSummary.innerHTML = "<div><dt>Status</dt><dd>" + escapeHtml(message) + "</dd></div>";
+    if (els.runtimeEventList) els.runtimeEventList.innerHTML = "";
+    if (els.runtimeApproval) els.runtimeApproval.hidden = true;
+    if (els.runtimeCancelBtn) els.runtimeCancelBtn.hidden = true;
+  }
+
+  function renderRuntimeRun(run, events) {
+    if (els.runtimeSummary) {
+      const items = run
+        ? [
+            ["Status", run.status],
+            ["Workflow", run.workflowId],
+            ["Agent", run.activeAgentId || "—"],
+            ["Commit", run.commit ? run.commit.slice(0, 12) : "—"]
+          ]
+        : [["Status", "No runs"]];
+      els.runtimeSummary.innerHTML = items.map(([label, value]) => "<div><dt>" + escapeHtml(label) + "</dt><dd>" + escapeHtml(value) + "</dd></div>").join("");
+    }
+    const pending = run?.pendingApproval;
+    if (els.runtimeApproval) els.runtimeApproval.hidden = !pending;
+    if (els.runtimeApprovalTitle) els.runtimeApprovalTitle.textContent = pending?.title || "";
+    if (els.runtimeApprovalDetail) els.runtimeApprovalDetail.textContent = pending?.detail || "";
+    const terminal = !run || ["complete", "failed", "cancelled"].includes(run.status);
+    if (els.runtimeCancelBtn) els.runtimeCancelBtn.hidden = terminal;
+    if (els.runtimeEventList) {
+      els.runtimeEventList.innerHTML = (events || [])
+        .slice(-100)
+        .map(
+          (event) =>
+            '<li><span class="tx-time">' +
+            escapeHtml((event.createdAt || "").slice(11, 19)) +
+            "</span> <strong>" +
+            escapeHtml(event.agentId || "run") +
+            "</strong> " +
+            escapeHtml(eventLabel(event)) +
+            "</li>"
+        )
+        .join("");
+      els.runtimeEventList.scrollTop = els.runtimeEventList.scrollHeight;
+    }
+    if (run && els.sessionPill && !els.studioRuntimeView?.hidden) els.sessionPill.textContent = run.runId.slice(0, 24);
+  }
+
+  async function decideRuntime(decision) {
+    if (!state.runtimeRunId) return;
+    const response = await api("/api/runtime/runs/" + encodeURIComponent(state.runtimeRunId) + "/decision", {
+      method: "POST",
+      body: JSON.stringify({ decision, actor: "studio-operator" })
+    });
+    state.runtimeEvents = response.events || [];
+    renderRuntimeRun(response.run, state.runtimeEvents);
+    await loadRuntimeRuns();
+  }
+
   function bindStudioControls() {
+    els.studioCouncilTab?.addEventListener("click", () => switchStudioView("council"));
+    els.studioRuntimeTab?.addEventListener("click", () => switchStudioView("runtime"));
     if (els.sessionPicker) {
       els.sessionPicker.addEventListener("change", () => {
         state.studioSessionId = els.sessionPicker.value;
@@ -309,6 +453,60 @@
         }
       });
     }
+    if (els.runtimePicker) {
+      els.runtimePicker.addEventListener("change", () => {
+        state.runtimeRunId = els.runtimePicker.value;
+        void loadRuntimeRun(state.runtimeRunId).catch((error) => setStatus("error", error.message));
+      });
+    }
+    els.runtimeRefreshBtn?.addEventListener("click", () => {
+      void loadRuntimeRuns().catch((error) => setStatus("error", error.message));
+    });
+    if (els.runtimeStartForm) {
+      els.runtimeStartForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const goal = (els.runtimeGoal?.value || "").trim();
+        if (!goal) {
+          setStatus("error", "Enter a run goal.");
+          return;
+        }
+        try {
+          const response = await api("/api/runtime/runs", {
+            method: "POST",
+            body: JSON.stringify({ goal, acknowledgeDirtyBase: Boolean(els.runtimeDirtyBase?.checked) })
+          });
+          state.runtimeRunId = response.run.runId;
+          state.runtimeEvents = response.events || [];
+          if (els.runtimeGoal) els.runtimeGoal.value = "";
+          await loadRuntimeRuns();
+          setStatus("ok", "Run started.");
+        } catch (error) {
+          setStatus("error", error.message);
+        }
+      });
+    }
+    els.runtimeApproveBtn?.addEventListener("click", () => {
+      void decideRuntime("approve").catch((error) => setStatus("error", error.message));
+    });
+    els.runtimeRejectBtn?.addEventListener("click", () => {
+      void decideRuntime("reject").catch((error) => setStatus("error", error.message));
+    });
+    els.runtimeCancelBtn?.addEventListener("click", async () => {
+      if (!state.runtimeRunId) return;
+      try {
+        const response = await api("/api/runtime/runs/" + encodeURIComponent(state.runtimeRunId) + "/cancel", { method: "POST" });
+        state.runtimeEvents = response.events || [];
+        renderRuntimeRun(response.run, state.runtimeEvents);
+        await loadRuntimeRuns();
+      } catch (error) {
+        setStatus("error", error.message);
+      }
+    });
+    window.setInterval(() => {
+      if (els.studioRuntimeView && !els.studioRuntimeView.hidden) {
+        void loadRuntimeRuns().catch(() => undefined);
+      }
+    }, 2500);
   }
 
   function connectStudioStream() {

package/dist/studio/wizard/assets/wizard.js

@@ -59,7 +59,13 @@
   }
 
   async function api(path, options) {
-    const response = await fetch(path, options);
+    const requestOptions = options ? { ...options } : {};
+    const method = String(requestOptions.method || "GET").toUpperCase();
+    if (!["GET", "HEAD", "OPTIONS"].includes(method)) {
+      const token = document.querySelector('meta[name="agent-kit-csrf-token"]')?.getAttribute("content") || "";
+      requestOptions.headers = { ...(requestOptions.headers || {}), "Content-Type": "application/json", "X-Agent-Kit-CSRF": token };
+    }
+    const response = await fetch(path, requestOptions);
     const data = await response.json();
     if (!response.ok) throw new Error(data.error || "Request failed");
     return data;