@appsforgood/next-supabase-kit 0.1.7 → 0.1.8

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

@@ -600,6 +600,36 @@ code {
   max-height: calc(100vh - 64px);
 }
 
+.studio-controls {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.studio-label {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.studio-note-form {
+  display: grid;
+  gap: 8px;
+}
+
+.studio-note-form input,
+.studio-note-form select,
+#session-picker {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 13px;
+}
+
 .transcript-panel h2 {
   margin: 0 0 8px;
   font-size: 14px;

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

@@ -35,6 +35,7 @@
     handoffPulse: null,
     studioSessionId: boot.activeSessionId || "",
     studioEvents: [],
+    studioEventSource: null,
     speechBubbles: [],
     agenticLevel: null
   };
@@ -71,7 +72,12 @@
     bubbleLayer: document.getElementById("bubble-layer"),
     officeHint: document.getElementById("office-hint"),
     canvasWrap: document.querySelector(".canvas-wrap"),
-    transcriptList: document.getElementById("transcript-list")
+    transcriptList: document.getElementById("transcript-list"),
+    sessionPicker: document.getElementById("session-picker"),
+    studioNoteForm: document.getElementById("studio-note-form"),
+    studioNoteAgent: document.getElementById("studio-note-agent"),
+    studioNoteText: document.getElementById("studio-note-text"),
+    studioRenderBtn: document.getElementById("studio-render-btn")
   };
 
   const ctx = els.canvas?.getContext("2d");
@@ -210,11 +216,15 @@
 
   async function loadStudioState() {
     const sessionsRes = await api("/api/sessions");
-    state.studioSessionId = sessionsRes.activeSessionId || boot.activeSessionId || "";
+    const sessions = sessionsRes.sessions || [];
+    state.studioSessionId = sessionsRes.activeSessionId || boot.activeSessionId || sessions[0]?.sessionId || "";
+    populateSessionPicker(sessions, state.studioSessionId);
+    populateStudioAgents();
     if (els.sessionPill) {
       els.sessionPill.textContent = state.studioSessionId ? state.studioSessionId.slice(0, 24) : "No session";
     }
-    if (els.projectName) els.projectName.textContent = sessionsRes.sessions?.[0]?.title || "Council session";
+    const activeSession = sessions.find((s) => s.sessionId === state.studioSessionId);
+    if (els.projectName) els.projectName.textContent = activeSession?.title || "Council session";
     if (els.officeHint) {
       els.officeHint.classList.remove("hidden");
       window.setTimeout(() => els.officeHint?.classList.add("hidden"), 6000);
@@ -222,10 +232,94 @@
     connectStudioStream();
   }
 
+  function populateSessionPicker(sessions, selectedId) {
+    if (!els.sessionPicker) return;
+    els.sessionPicker.innerHTML = sessions.length
+      ? sessions
+          .map(
+            (s) =>
+              '<option value="' +
+              escapeHtml(s.sessionId) +
+              '"' +
+              (s.sessionId === selectedId ? " selected" : "") +
+              ">" +
+              escapeHtml((s.title || s.sessionId).slice(0, 48)) +
+              "</option>"
+          )
+          .join("")
+      : '<option value="">No sessions</option>';
+  }
+
+  function populateStudioAgents() {
+    if (!els.studioNoteAgent) return;
+    els.studioNoteAgent.innerHTML = state.agents.length
+      ? state.agents.map((a) => '<option value="' + escapeHtml(a.id) + '">' + escapeHtml(a.name || a.id) + "</option>").join("")
+      : '<option value="planner">Planner</option>';
+  }
+
+  function bindStudioControls() {
+    if (els.sessionPicker) {
+      els.sessionPicker.addEventListener("change", () => {
+        state.studioSessionId = els.sessionPicker.value;
+        if (els.sessionPill) {
+          els.sessionPill.textContent = state.studioSessionId ? state.studioSessionId.slice(0, 24) : "No session";
+        }
+        connectStudioStream();
+      });
+    }
+    if (els.studioNoteForm) {
+      els.studioNoteForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        if (!state.studioSessionId) {
+          setStatus("error", "Select a session first.");
+          return;
+        }
+        const agent = els.studioNoteAgent?.value || "planner";
+        const text = (els.studioNoteText?.value || "").trim();
+        if (!text) {
+          setStatus("error", "Enter note text.");
+          return;
+        }
+        try {
+          await api("/api/sessions/" + encodeURIComponent(state.studioSessionId) + "/note", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ agent, text })
+          });
+          if (els.studioNoteText) els.studioNoteText.value = "";
+          setStatus("ok", "Note recorded.");
+        } catch (error) {
+          setStatus("error", error.message);
+        }
+      });
+    }
+    if (els.studioRenderBtn) {
+      els.studioRenderBtn.addEventListener("click", async () => {
+        if (!state.studioSessionId) {
+          setStatus("error", "Select a session first.");
+          return;
+        }
+        try {
+          const result = await api("/api/sessions/" + encodeURIComponent(state.studioSessionId) + "/render", {
+            method: "POST"
+          });
+          setStatus("ok", "Rendered " + (result.files?.length || 0) + " markdown files.");
+        } catch (error) {
+          setStatus("error", error.message);
+        }
+      });
+    }
+  }
+
   function connectStudioStream() {
     if (!state.studioSessionId) return;
+    if (state.studioEventSource) {
+      state.studioEventSource.close();
+      state.studioEventSource = null;
+    }
     const url = "/api/events/stream?sessionId=" + encodeURIComponent(state.studioSessionId);
     const source = new EventSource(url);
+    state.studioEventSource = source;
     source.addEventListener("snapshot", (ev) => {
       try {
         const payload = JSON.parse(ev.data);
@@ -249,6 +343,7 @@
     });
     source.onerror = () => {
       source.close();
+      if (state.studioEventSource === source) state.studioEventSource = null;
     };
   }
 
@@ -1119,6 +1214,7 @@
   }
 
   loop();
+  if (isStudio) bindStudioControls();
   loadState().catch((error) => setStatus("error", error.message));
   window.addEventListener("resize", () => {
     renderNameplates();

package/examples/next-supabase-installed/.agent-kit/manifest.json

@@ -1,6 +1,6 @@
 {
   "packageName": "@appsforgood/next-supabase-kit",
-  "packageVersion": "0.1.7",
+  "packageVersion": "0.1.8",
   "stack": "next-supabase",
   "installedAt": "2026-07-04T01:32:06.844Z",
   "docs": [

package/examples/next-supabase-installed/audit-output.json

@@ -19,7 +19,7 @@
     {
       "level": "pass",
       "area": "install",
-      "message": "Agent kit installed at version 0.1.7."
+      "message": "Agent kit installed at version 0.1.8."
     },
     {
       "level": "pass",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsforgood/next-supabase-kit",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Open agent council, skills, prompts, checklists, and markdown templates for Next.js and Supabase projects.",
   "type": "module",
   "repository": {
@@ -84,6 +84,7 @@
     "smoke:install": "node scripts/smoke-install.mjs",
     "smoke:studio": "node scripts/smoke-studio.mjs",
     "smoke:setup": "node scripts/smoke-setup.mjs",
+    "smoke:ui-screens": "node scripts/smoke-ui-screens.mjs",
     "smoke:audit-gate": "node scripts/smoke-audit-gate.mjs",
     "package:validate": "node dist/index.js package validate",
     "examples:check": "node scripts/example-check.mjs",
@@ -114,6 +115,7 @@
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "globals": "^17.7.0",
+    "playwright": "^1.55.1",
     "prettier": "^3.9.4",
     "tsup": "^8.3.5",
     "tsx": "^4.19.2",