@beastmode-develeap/beastmode 0.1.180 → 0.1.181

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260507-074735-3f990f4";</script>
+<script>window.__BUILD_STAMP__ = "20260507-091132-6af0b67";</script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -1540,6 +1540,89 @@ input[type="range"]::-webkit-slider-thumb {
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+/* Deploy modal styles */
+.deploy-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.deploy-modal {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px;
+  min-width: 360px;
+  max-width: 480px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+.deploy-modal h3 {
+  margin: 0 0 16px;
+}
+.deploy-modal label {
+  display: block;
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 12px 0 4px;
+}
+.deploy-modal select,
+.deploy-modal textarea {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13px;
+  box-sizing: border-box;
+}
+.deploy-modal textarea {
+  resize: vertical;
+  min-height: 60px;
+  font-family: monospace;
+}
+.deploy-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+.deploy-modal-actions button {
+  padding: 8px 16px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.deploy-modal-actions button:hover {
+  background: var(--bg-hover);
+}
+.deploy-modal-actions .btn-primary {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+.deploy-modal-actions .btn-primary:hover {
+  opacity: 0.9;
+}
+.deploy-modal-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 12px 0 0;
+  font-size: 13px;
+}
+.deploy-modal-check input {
+  cursor: pointer;
+}
+
 @keyframes pulse-dot {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
@@ -4726,6 +4809,147 @@ function CostPhaseTable({ itemId, boardParam }) {
   `;
 }
 
+// ── Deploy Modal ──
+
+function DeployModal({ envName, refs, loading, item, selectedProject, onClose }) {
+  const [selectedRef, setSelectedRef] = useState('main');
+  const [dryRun, setDryRun] = useState(false);
+  const [description, setDescription] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  // Default-select main if available, else the first branch.
+  useEffect(() => {
+    const branches = (refs && refs.branches) || [];
+    if (!branches.length) return;
+    if (branches.includes('main')) {
+      setSelectedRef('main');
+    } else {
+      setSelectedRef(branches[0]);
+    }
+  }, [refs && refs.branches && refs.branches.join(',')]);
+
+  // Escape key closes the modal — symmetric with overlay click.
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const handleDeploy = async () => {
+    if (!envName || submitting) return;
+    setSubmitting(true);
+    try {
+      const proj = (selectedProject && selectedProject !== 'all')
+        ? selectedProject
+        : (item && item.project_id) || 'beastmode';
+      const boardParam = proj ? '?board=' + encodeURIComponent(proj) : '';
+      const body = {
+        environment: envName,
+        project: proj,
+        source_ref: selectedRef,
+        dry_run: dryRun,
+        description: description || undefined,
+      };
+      if (item && item.id) body.source_item_id = String(item.id);
+
+      const response = await fetch('/api/deploy/trigger' + boardParam, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const data = await response.json();
+
+      if (response.status === 409) {
+        alert(data.detail || 'A deploy to ' + envName + ' is already in progress.');
+      } else if (!response.ok) {
+        alert('Deploy failed: ' + (data.detail || ('HTTP ' + response.status)));
+      } else if (data && data.id) {
+        alert('Deploy task created: #' + data.id);
+        onClose();
+      }
+    } catch (err) {
+      alert('Deploy error: ' + err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const branches = (refs && refs.branches) || [];
+  const tags = (refs && refs.tags) || [];
+
+  return html`
+    <div
+      class="deploy-modal-overlay"
+      data-testid="deploy-modal"
+      onClick=${(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div class="deploy-modal">
+        <h3>Deploy to ${envName}</h3>
+
+        <label>Git Ref</label>
+        <select
+          data-testid="deploy-ref-select"
+          value=${selectedRef}
+          onChange=${(e) => setSelectedRef(e.target.value)}
+          disabled=${loading || submitting}
+        >
+          ${loading ? html`<option>Loading…</option>` : null}
+          ${!loading && branches.length === 0 && tags.length === 0
+            ? html`<option>No refs available</option>`
+            : null}
+          ${branches.length > 0 ? html`
+            <optgroup label="Branches">
+              ${branches.map(b => html`<option value=${b}>${b}</option>`)}
+            </optgroup>
+          ` : null}
+          ${tags.length > 0 ? html`
+            <optgroup label="Tags">
+              ${tags.map(t => html`<option value=${t}>${t}</option>`)}
+            </optgroup>
+          ` : null}
+        </select>
+
+        <label>Description (optional)</label>
+        <textarea
+          data-testid="deploy-description"
+          placeholder="Why are you deploying?"
+          value=${description}
+          onChange=${(e) => setDescription(e.target.value)}
+          disabled=${submitting}
+        ></textarea>
+
+        <div class="deploy-modal-check">
+          <input
+            type="checkbox"
+            id="dry-run-check"
+            data-testid="deploy-dry-run"
+            checked=${dryRun}
+            onChange=${(e) => setDryRun(e.target.checked)}
+            disabled=${submitting}
+          />
+          <label for="dry-run-check" style="margin:0;cursor:pointer;">Dry run (no changes)</label>
+        </div>
+
+        <div class="deploy-modal-actions">
+          <button
+            data-testid="deploy-cancel"
+            onClick=${onClose}
+            disabled=${submitting}
+          >Cancel</button>
+          <button
+            class="btn-primary"
+            data-testid="deploy-confirm"
+            onClick=${handleDeploy}
+            disabled=${submitting || loading}
+          >
+            ${submitting ? 'Deploying...' : dryRun ? 'Test' : 'Deploy'}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 // ── Item Detail Sidebar ──
 
 function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
@@ -4741,6 +4965,7 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
   const [loadingCost, setLoadingCost] = useState(true);
   const [phaseData, setPhaseData] = useState([]);
   const [envTimeline, setEnvTimeline] = useState(null);
+  const [deployModal, setDeployModal] = useState(null);
   const sidebarRef = useRef(null);
   const topCommentRef = useRef(null);
 
@@ -5065,36 +5290,14 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
                       onClick=${(e) => {
                         e.stopPropagation();
                         if (isDeploying) return;
-                        if (!confirm('Deploy current code to ' + envName + '?')) return;
                         const proj = (selectedProject && selectedProject !== 'all')
                           ? selectedProject
                           : (item && item.project_id) || 'beastmode';
-                        const boardParam = proj ? '?board=' + encodeURIComponent(proj) : '';
-                        const body = {
-                          environment: envName,
-                          project: proj,
-                        };
-                        if (item && item.id) body.source_item_id = String(item.id);
-                        fetch('/api/deploy/trigger' + boardParam, {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify(body),
-                        })
-                          .then(r => r.json().then(data => ({ ok: r.ok, status: r.status, data })))
-                          .then(({ ok, status, data }) => {
-                            if (status === 409) {
-                              alert(data.detail || 'A deploy to ' + envName + ' is already in progress.');
-                              return;
-                            }
-                            if (!ok) {
-                              alert('Deploy failed: ' + (data.detail || ('HTTP ' + status)));
-                              return;
-                            }
-                            if (data && data.id) {
-                              alert('Deploy task created: #' + data.id);
-                            }
-                          })
-                          .catch(err => alert('Deploy error: ' + err.message));
+                        setDeployModal({ envName, proj, refs: null, loading: true });
+                        fetch('/api/deploy/refs?project=' + encodeURIComponent(proj))
+                          .then(r => r.ok ? r.json() : { branches: [], tags: [] })
+                          .then(refs => setDeployModal(prev => prev ? { ...prev, refs, loading: false } : null))
+                          .catch(() => setDeployModal(prev => prev ? { ...prev, refs: { branches: [], tags: [] }, loading: false } : null));
                       }}
                     >🚀</button>
                   </div>
@@ -5151,6 +5354,14 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
         <${CommentBox} itemId=${item.id} onPosted=${refreshUpdates} />
       </div>
     </aside>
+    ${deployModal && html`<${DeployModal}
+      envName=${deployModal.envName}
+      refs=${deployModal.refs}
+      loading=${deployModal.loading}
+      item=${item}
+      selectedProject=${selectedProject}
+      onClose=${() => setDeployModal(null)}
+    />`}
   `;
 }
 
@@ -8190,15 +8401,16 @@ function HelpPage() {
 // Settings Page
 // ================================================================
 
-// Gap 15: opt-in anonymous telemetry status surface. Reads
-// /api/telemetry/status (proxied to the board, which reads the daemon's
-// last heartbeat). Always renders — shows "Disabled" with a red dot
-// when telemetry is off, full metrics when on. See docs/telemetry.md.
+// Badge component for restart-required fields (shown next to section headers)
 function RestartBadge({field, restartFields}) {
   if (!restartFields || !restartFields.has(field)) return null;
   return html`<span class="badge-restart" title="Changing this field requires a daemon restart to take effect">restart required</span>`;
 }
 
+// Gap 15: opt-in anonymous telemetry status surface. Reads
+// /api/telemetry/status (proxied to the board, which reads the daemon's
+// last heartbeat). Always renders — shows "Disabled" with a red dot
+// when telemetry is off, full metrics when on. See docs/telemetry.md.
 function TelemetrySettings({restartFields}) {
   const [status, setStatus] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -8274,6 +8486,7 @@ function SettingsPage() {
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
   const [saving, setSaving] = useState(false);
+
   const [restartFields, setRestartFields] = useState(new Set());
 
   useEffect(() => {
@@ -8286,7 +8499,7 @@ function SettingsPage() {
   useEffect(() => {
     api('GET', '/api/daemon/reload-categories')
       .then(data => {
-        const cats = (data && data.categories) || {};
+        const cats = data.categories || {};
         const fields = new Set(
           Object.entries(cats)
             .filter(([_, v]) => v === 'restart')

package/dist/web/build-commit.txt

@@ -1 +1 @@
-3f990f4d8de08cb374c9645579bf78e12e82bcb1
+6af0b67cf1cb45e506a8f816517181c9ac1e8606

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260507-074735-3f990f4
+20260507-091132-6af0b67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beastmode-develeap/beastmode",
-  "version": "0.1.180",
+  "version": "0.1.181",
   "description": "BeastMode Dark Factory — turn intent into verified software",
   "type": "module",
   "bin": {