@appsforgood/next-supabase-kit 0.1.4 → 0.1.6

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

@@ -13,13 +13,17 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 body {
   margin: 0;
@@ -79,16 +83,101 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.12);
 }
 
+.level-pill {
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(15, 118, 110, 0.35);
+  border: 1px solid rgba(153, 246, 228, 0.35);
+  font-variant-numeric: tabular-nums;
+}
+
+.iceberg-strip {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 4px;
+  padding: 8px 20px 10px;
+  background: #0a1620;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.iceberg-seg {
+  text-align: center;
+  font-size: 10px;
+  padding: 6px 4px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: #94a3b8;
+  opacity: 0.55;
+}
+
+.iceberg-seg.current {
+  opacity: 1;
+  color: #ecfdf5;
+  border-color: rgba(153, 246, 228, 0.55);
+  background: rgba(15, 118, 110, 0.35);
+}
+
+.iceberg-seg.target {
+  opacity: 0.85;
+  border-style: dashed;
+}
+
+.iceberg-seg.deferred {
+  opacity: 0.35;
+  border-style: dotted;
+}
+
+.climb-panel {
+  margin: 0 0 12px;
+  padding: 10px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
+}
+
+.climb-panel h3 {
+  margin: 0 0 8px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+}
+
+.climb-panel ol {
+  margin: 0 0 10px;
+  padding-left: 18px;
+  font-size: 12px;
+  color: var(--ink);
+}
+
+.climb-panel li {
+  margin-bottom: 6px;
+}
+
+.climb-refresh {
+  width: 100%;
+  font-size: 12px;
+  padding: 6px 8px;
+}
+
 .office-main {
   display: grid;
   grid-template-columns: 220px minmax(0, 1fr);
   gap: 0;
-  min-height: calc(100vh - 64px);
+  min-height: calc(100vh - 96px);
 }
 
 @media (max-width: 900px) {
-  .office-main { grid-template-columns: 1fr; }
-  .station-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 180px; overflow: auto; }
+  .office-main {
+    grid-template-columns: 1fr;
+  }
+  .station-list {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    max-height: 180px;
+    overflow: auto;
+  }
 }
 
 .station-list {
@@ -130,8 +219,12 @@ body {
   cursor: pointer;
 }
 
-.station-list button:hover { background: rgba(255, 255, 255, 0.1); }
-.station-list button.done { border-color: rgba(74, 222, 128, 0.4); }
+.station-list button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.station-list button.done {
+  border-color: rgba(74, 222, 128, 0.4);
+}
 .station-list button .chip {
   float: right;
   font-size: 10px;
@@ -224,8 +317,14 @@ body {
   max-width: 90vw;
 }
 
-.status.ok { background: #dcfce7; color: #166534; }
-.status.error { background: #fee2e2; color: #991b1b; }
+.status.ok {
+  background: #dcfce7;
+  color: #166534;
+}
+.status.error {
+  background: #fee2e2;
+  color: #991b1b;
+}
 
 .btn {
   display: inline-flex;
@@ -240,9 +339,18 @@ body {
   text-decoration: none;
 }
 
-.btn.primary { background: var(--accent); color: #fff; }
-.btn.secondary { background: #334155; color: #f8fafc; }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn.primary {
+  background: var(--accent);
+  color: #fff;
+}
+.btn.secondary {
+  background: #334155;
+  color: #f8fafc;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 .panel {
   position: fixed;
@@ -257,7 +365,9 @@ body {
   flex-direction: column;
 }
 
-.panel.hidden { display: none; }
+.panel.hidden {
+  display: none;
+}
 
 .panel-head {
   display: flex;
@@ -267,7 +377,10 @@ body {
   border-bottom: 1px solid var(--line);
 }
 
-.panel-head h2 { margin: 0; font-size: 18px; }
+.panel-head h2 {
+  margin: 0;
+  font-size: 18px;
+}
 
 .panel-close {
   background: none;
@@ -317,7 +430,10 @@ body {
   padding: 10px;
 }
 
-.panel textarea { min-height: 90px; resize: vertical; }
+.panel textarea {
+  min-height: 90px;
+  resize: vertical;
+}
 
 .panel .agent-role {
   font-size: 13px;
@@ -363,7 +479,9 @@ body {
 }
 
 .modal[hidden],
-.modal.hidden { display: none; }
+.modal.hidden {
+  display: none;
+}
 
 .modal-card {
   background: var(--panel);
@@ -374,11 +492,19 @@ body {
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
 }
 
-.modal-wide { max-width: 640px; }
+.modal-wide {
+  max-width: 640px;
+}
 
-.modal-card h2 { margin: 0 0 8px; }
+.modal-card h2 {
+  margin: 0 0 8px;
+}
 
-.why { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
+.why {
+  color: var(--muted);
+  font-size: 14px;
+  margin: 0 0 16px;
+}
 
 .depth-grid {
   display: grid;
@@ -395,14 +521,39 @@ body {
   font: inherit;
 }
 
-.depth-card:hover { border-color: var(--accent); }
-.depth-card.selected { border-color: var(--accent); background: var(--accent-soft); }
-.depth-card strong { display: block; margin-bottom: 4px; }
-.depth-card p { margin: 0; font-size: 13px; color: var(--muted); }
+.depth-card:hover {
+  border-color: var(--accent);
+}
+.depth-card.selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.depth-card strong {
+  display: block;
+  margin-bottom: 4px;
+}
+.depth-card p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--muted);
+}
 
-.review { margin: 0; display: grid; gap: 12px; }
-.review dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
-.review dd { margin: 4px 0 0; white-space: pre-wrap; }
+.review {
+  margin: 0;
+  display: grid;
+  gap: 12px;
+}
+.review dt {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  font-weight: 700;
+}
+.review dd {
+  margin: 4px 0 0;
+  white-space: pre-wrap;
+}
 
 .modal-actions {
   display: flex;
@@ -411,7 +562,9 @@ body {
   margin-top: 20px;
 }
 
-.hidden { display: none !important; }
+.hidden {
+  display: none !important;
+}
 
 code {
   font-family: ui-monospace, Menlo, Consolas, monospace;
@@ -507,8 +660,14 @@ code {
 }
 
 @media (max-width: 900px) {
-  .office-main.studio-layout { grid-template-columns: 1fr; }
-  .transcript-panel { max-height: 200px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
+  .office-main.studio-layout {
+    grid-template-columns: 1fr;
+  }
+  .transcript-panel {
+    max-height: 200px;
+    border-left: 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
 }
 
 .studio-main .transcript-list {

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

@@ -35,7 +35,8 @@
     handoffPulse: null,
     studioSessionId: boot.activeSessionId || "",
     studioEvents: [],
-    speechBubbles: []
+    speechBubbles: [],
+    agenticLevel: null
   };
 
   const agentRuntime = {};
@@ -44,6 +45,11 @@
     canvas: document.getElementById("office-floor"),
     projectName: document.getElementById("project-name"),
     progressPill: document.getElementById("progress-pill"),
+    levelPill: document.getElementById("level-pill"),
+    icebergStrip: document.getElementById("iceberg-strip"),
+    climbPanel: document.getElementById("climb-panel"),
+    climbList: document.getElementById("climb-list"),
+    climbRefresh: document.getElementById("climb-refresh"),
     sessionPill: document.getElementById("session-pill"),
     stationList: document.getElementById("station-list"),
     status: document.getElementById("status"),
@@ -188,9 +194,11 @@
     state.progress = data.progress || {};
     state.onboarding = data.onboarding || {};
     state.depth = data.onboarding?.depth || "undecided";
+    state.agenticLevel = data.agenticLevel || null;
     if (Array.isArray(data.agents) && data.agents.length) state.agents = data.agents;
     els.projectName.textContent = data.projectName || "your project";
     updateProgressUi();
+    updateAgenticLevelUi();
     renderStationList();
     if (state.depth === "undecided") showDepthModal();
     else {
@@ -260,7 +268,7 @@
         (ev) =>
           '<li><span class="tx-time">' +
           escapeHtml((ev.createdAt || "").slice(11, 19)) +
-          '</span> <strong>' +
+          "</span> <strong>" +
           escapeHtml(ev.agentId || ev.fromAgentId || "session") +
           "</strong> " +
           escapeHtml(eventLabel(ev)) +
@@ -316,15 +324,7 @@
       .map((b) => {
         const left = offsetLeft + b.x * scaleX;
         const top = offsetTop + b.y * scaleY - 28;
-        return (
-          '<span class="speech-bubble" style="left:' +
-          left +
-          "px;top:" +
-          top +
-          'px">' +
-          escapeHtml(b.text) +
-          "</span>"
-        );
+        return '<span class="speech-bubble" style="left:' + left + "px;top:" + top + 'px">' + escapeHtml(b.text) + "</span>";
       })
       .join("");
   }
@@ -334,6 +334,57 @@
     if (els.progressPill) els.progressPill.textContent = pct + "% ready";
   }
 
+  function updateAgenticLevelUi() {
+    const level = state.agenticLevel;
+    if (!level || isStudio) return;
+    const current = level.currentLevel ?? 3;
+    const target = level.targetLevel ?? 5;
+    if (els.levelPill) {
+      els.levelPill.textContent = "L" + current + " → L" + target;
+      els.levelPill.setAttribute("aria-label", "Agentic engineering level " + current + ", target level " + target);
+    }
+    if (els.icebergStrip) {
+      els.icebergStrip.innerHTML = [3, 4, 5, 6, 7, 8]
+        .map((n) => {
+          let cls = "iceberg-seg";
+          if (n === current) cls += " current";
+          if (n === target && n !== current) cls += " target";
+          if (n >= 7) cls += " deferred";
+          return '<span class="' + cls + '">L' + n + "</span>";
+        })
+        .join("");
+    }
+    const steps = level.climbSteps || [];
+    if (els.climbPanel && els.climbList) {
+      if (current >= target || steps.length === 0) {
+        els.climbPanel.hidden = true;
+      } else {
+        els.climbPanel.hidden = false;
+        els.climbList.innerHTML = steps
+          .slice(0, 3)
+          .map((step) => "<li><strong>L" + step.level + "</strong> " + escapeHtml(step.label) + " — " + escapeHtml(step.remediation) + "</li>")
+          .join("");
+      }
+    }
+    if (level.maintainerNote && els.status && !els.status.textContent) {
+      setStatus("ok", level.maintainerNote);
+    }
+  }
+
+  if (els.climbRefresh) {
+    els.climbRefresh.addEventListener("click", async () => {
+      try {
+        const data = await api("/api/agentic-level/refresh", { method: "POST" });
+        state.agenticLevel = data.agenticLevel;
+        state.progress = data.progress;
+        updateAgenticLevelUi();
+        setStatus("ok", "Agentic level refreshed.");
+      } catch (error) {
+        setStatus("error", error.message);
+      }
+    });
+  }
+
   function spawnConfetti(x, y) {
     if (state.reducedMotion) return;
     for (let i = 0; i < 12; i += 1) {
@@ -395,17 +446,7 @@
         const cx = offsetLeft + (station.x + station.w / 2) * TILE * scaleX;
         const cy = offsetTop + station.y * TILE * scaleY - 4;
         const st = stationStatus(station);
-        return (
-          '<span class="nameplate ' +
-          st +
-          '" style="left:' +
-          cx +
-          "px;top:" +
-          cy +
-          'px">' +
-          escapeHtml(station.label) +
-          "</span>"
-        );
+        return '<span class="nameplate ' + st + '" style="left:' + cx + "px;top:" + cy + 'px">' + escapeHtml(station.label) + "</span>";
       })
       .join("");
   }
@@ -420,13 +461,7 @@
     ]
       .map(
         ([id, title, desc]) =>
-          '<button type="button" class="depth-card" data-depth="' +
-          id +
-          '"><strong>' +
-          escapeHtml(title) +
-          "</strong><p>" +
-          escapeHtml(desc) +
-          "</p></button>"
+          '<button type="button" class="depth-card" data-depth="' + id + '"><strong>' + escapeHtml(title) + "</strong><p>" + escapeHtml(desc) + "</p></button>"
       )
       .join("");
     els.depthGrid.querySelectorAll("[data-depth]").forEach((btn) => {
@@ -757,9 +792,9 @@
     const req = optional ? "" : " required";
     if (type === "textarea") {
       return (
-        "<label for=\"p-" +
+        '<label for="p-' +
         name +
-        "\">" +
+        '">' +
         escapeHtml(label) +
         (hint ? "<span>" + escapeHtml(hint) + "</span>" : "") +
         '</label><textarea id="p-' +
@@ -776,9 +811,9 @@
       );
     }
     return (
-      "<label for=\"p-" +
+      '<label for="p-' +
       name +
-      "\">" +
+      '">' +
       escapeHtml(label) +
       (hint ? "<span>" + escapeHtml(hint) + "</span>" : "") +
       '</label><input id="p-' +
@@ -806,7 +841,7 @@
         field +
         '">Project briefing<span>Optional — what is unique about this project for ' +
         escapeHtml(station.label) +
-        "?</span></label><textarea id=\"p-" +
+        '?</span></label><textarea id="p-' +
         field +
         '" name="' +
         field +
@@ -819,16 +854,7 @@
     const maps = {
       ide: () => {
         const opts = (boot.ideSurfaces || [])
-          .map(
-            (s) =>
-              '<option value="' +
-              s.id +
-              '"' +
-              (state.form.ideSurface === s.id ? " selected" : "") +
-              ">" +
-              escapeHtml(s.label) +
-              "</option>"
-          )
+          .map((s) => '<option value="' + s.id + '"' + (state.form.ideSurface === s.id ? " selected" : "") + ">" + escapeHtml(s.label) + "</option>")
           .join("");
         return (
           '<label for="p-ideSurface">Primary AI coding tool</label><select id="p-ideSurface" name="ideSurface" required><option value="">Choose…</option>' +
@@ -847,14 +873,10 @@
         inputField("primaryWorkflows", "Top workflows", "One per line.", "textarea", "Workflow one", false),
       access: () =>
         '<label for="p-tenantModel">Who uses the system?</label><select id="p-tenantModel" name="tenantModel">' +
-        (boot.tenantModels || [])
-          .map((c) => '<option value="' + c + '"' + (state.form.tenantModel === c ? " selected" : "") + ">" + c + "</option>")
-          .join("") +
+        (boot.tenantModels || []).map((c) => '<option value="' + c + '"' + (state.form.tenantModel === c ? " selected" : "") + ">" + c + "</option>").join("") +
         "</select>" +
         inputField("owner", "Project owner", "Optional.", "text", "", true) +
-        (boot.hasSupabase
-          ? '<div class="hint-box">Supabase detected.<button type="button" id="apply-supabase-auth">Insert auth baseline</button></div>'
-          : "") +
+        (boot.hasSupabase ? '<div class="hint-box">Supabase detected.<button type="button" id="apply-supabase-auth">Insert auth baseline</button></div>' : "") +
         inputField("authModel", "Authentication model", "Rules agents must preserve.", "textarea", "Describe auth boundaries.", false),
       ui: () =>
         inputField("uiPreferred", "UI should feel like…", "", "textarea", "Clear, readable, task-first.", false) +