@beastmode-develeap/beastmode 0.1.145 → 0.1.146

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260425-102929-262b3b9";</script>
+<script>window.__BUILD_STAMP__ = "20260501-084015-3ceb514";</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">
@@ -526,8 +526,9 @@ body {
 
 .stat-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 16px;
+  margin-bottom: 24px;
 }
 
 .stat-card {
@@ -1244,6 +1245,268 @@ input[type="range"]::-webkit-slider-thumb {
 .badge-priority-low { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
 .badge-type { background: rgba(100, 116, 139, 0.15); color: var(--text-secondary); }
 
+/* Environment badges — color-coded by env tier */
+.badge-env {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: lowercase;
+}
+.badge-env-local {
+  background: rgba(100, 116, 139, 0.15);
+  color: #94a3b8;
+}
+.badge-env-staging {
+  background: rgba(245, 166, 35, 0.15);
+  color: #F5A623;
+}
+.badge-env-production {
+  background: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+}
+.badge-env:not(.badge-env-local):not(.badge-env-staging):not(.badge-env-production) {
+  background: rgba(56, 189, 248, 0.15);
+  color: #38bdf8;
+}
+
+/* Environment Management Panel (Story 9) */
+.env-panel {
+  margin-top: 12px;
+  padding: 16px;
+  border-top: 1px solid var(--border-subtle);
+  width: 100%;
+  flex-basis: 100%;
+}
+.env-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+  padding: 8px 0;
+}
+.env-panel-header h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+.env-panel-toggle {
+  font-size: 12px;
+  color: var(--text-muted);
+  transition: transform 0.15s ease;
+}
+.env-panel-toggle.collapsed {
+  transform: rotate(-90deg);
+}
+.env-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  margin-top: 12px;
+}
+.env-table th {
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.env-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text);
+  vertical-align: middle;
+}
+.env-table tr:last-child td {
+  border-bottom: none;
+}
+.env-table tr:hover td {
+  background: var(--bg-card-hover);
+}
+.env-edit-dialog {
+  max-width: 560px;
+  width: 90%;
+}
+.promotion-chain {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0;
+  margin-bottom: 8px;
+  overflow-x: auto;
+}
+.promotion-chain-arrow {
+  color: var(--text-muted);
+  font-size: 14px;
+  flex-shrink: 0;
+}
+/* Generic dialog styles (used by env edit / delete confirm dialogs) */
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  animation: fadeIn 0.15s ease;
+}
+.dialog {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  width: 480px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+  animation: slideUp 0.2s ease;
+}
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.dialog-header h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+.dialog-body {
+  padding: 16px 20px;
+}
+
+/* Environment Timeline — vertical step ladder in detail panel */
+.env-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 8px 0;
+}
+.env-timeline-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 0;
+  position: relative;
+}
+.env-timeline-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 24px;
+  bottom: -8px;
+  width: 2px;
+  background: var(--border);
+}
+.env-step-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  background: var(--bg);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.env-step-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.env-step-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  text-transform: capitalize;
+}
+.env-step-score {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--accent);
+}
+.env-step-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.env-step-passed .env-step-dot {
+  background: #22c55e;
+  border-color: #22c55e;
+}
+.env-step-verifying .env-step-dot {
+  background: #F5A623;
+  border-color: #F5A623;
+  animation: pulse-dot 2s infinite;
+}
+.env-step-deploying .env-step-dot {
+  background: #38bdf8;
+  border-color: #38bdf8;
+  animation: pulse-dot 2s infinite;
+}
+.env-step-failed .env-step-dot {
+  background: #f87171;
+  border-color: #f87171;
+}
+.env-step-blocked .env-step-dot {
+  background: #f97316;
+  border-color: #f97316;
+}
+.env-step-pending .env-step-dot {
+  background: transparent;
+  border-color: var(--border);
+}
+.env-step-current {
+  background: rgba(245, 166, 35, 0.05);
+  border-radius: 6px;
+  margin: 0 -8px;
+  padding: 8px;
+}
+.btn-env-deploy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  padding: 0;
+  margin-left: 8px;
+  color: var(--text-muted);
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  flex-shrink: 0;
+}
+.btn-env-deploy:hover {
+  background: var(--surface-elevated);
+  color: var(--text);
+  border-color: var(--accent);
+}
+.btn-env-deploy:active {
+  transform: scale(0.95);
+}
+.btn-env-deploy:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
 /* Overlay status badges — more prominent than standard card-badges */
 .badge-overlay {
   font-weight: 600;
@@ -2030,6 +2293,42 @@ input[type="range"]::-webkit-slider-thumb {
   color: var(--text-secondary);
   font-size: 11px;
 }
+/* Expandable phase rows for per-iteration drill-down (FR-6) */
+.cost-phase-row-expandable {
+  cursor: pointer;
+}
+.cost-phase-row-expandable:hover {
+  background: var(--bg-hover);
+}
+.cost-phase-expand-icon {
+  display: inline-block;
+  width: 16px;
+  font-size: 10px;
+  color: var(--text-secondary);
+  transition: transform 0.15s ease;
+}
+.cost-phase-expand-icon.expanded {
+  transform: rotate(90deg);
+}
+.cost-iteration-row {
+  border-left: 3px solid var(--accent);
+  padding: 4px 12px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+}
+.cost-iteration-row td {
+  padding: 2px 8px;
+  font-size: 11px;
+}
+.cost-model-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+}
 
 /* ================================================================
    EXTENSIONS / ITEMS LIST
@@ -3127,8 +3426,15 @@ async function api(method, path, body) {
     }
   }
   const res = await fetch(path, opts);
-  const data = await res.json();
-  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  // 204 No Content has no body — skip JSON parse entirely
+  if (res.status === 204) return null;
+  const ct = res.headers.get('content-type') || '';
+  let data = null;
+  if (ct.includes('application/json')) {
+    try { data = await res.json(); } catch (_) {}
+  }
+  // FastAPI error bodies use `detail`, not `error`
+  if (!res.ok) throw new Error((data && (data.detail || data.error)) || `HTTP ${res.status}`);
   return data;
 }
 
@@ -3691,10 +3997,18 @@ const KANBAN_COLUMNS = [
   { id: 'Stuck', label: 'Stuck', status: 'stuck', color: '#f87171', tooltip: 'Task failed after max retries. Needs human help or comment "reset" to restart.' },
 ];
 
+function normalizeDt(s) {
+  if (!s) return s;
+  if (s.length >= 19 && s[10] === ' ') s = s.slice(0, 10) + 'T' + s.slice(11);
+  if (s.endsWith('+00:00')) s = s.slice(0, -6) + 'Z';
+  if (s.length >= 19 && !s.endsWith('Z') && !s.includes('+')) s += 'Z';
+  return s;
+}
+
 function timeAgo(dateString) {
   if (!dateString) return '';
   const now = new Date();
-  const date = new Date(dateString);
+  const date = new Date(normalizeDt(dateString));
   const seconds = Math.floor((now - date) / 1000);
   if (seconds < 60) return 'just now';
   const minutes = Math.floor(seconds / 60);
@@ -3716,7 +4030,7 @@ function timeAgo(dateString) {
 function statusAge(dateString) {
   if (!dateString) return { text: '', severity: 'ok' };
   const now = new Date();
-  const date = new Date(dateString);
+  const date = new Date(normalizeDt(dateString));
   const totalMin = Math.max(0, Math.floor((now - date) / 60000));
   let text;
   if (totalMin < 1) text = 'just now';
@@ -4264,9 +4578,91 @@ function TopCommentBox({ itemId, onPosted }) {
   `;
 }
 
+// ── Per-Phase Cost Table with expandable iteration rows (FR-6) ──
+
+function CostPhaseTable({ itemId, boardParam }) {
+  const [phaseData, setPhaseData] = useState([]);
+  const [expandedPhases, setExpandedPhases] = useState({});
+
+  function loadPhaseData() {
+    if (!itemId) return;
+    fetch('/api/items/' + itemId + '/costs/by-phase' + (boardParam || ''))
+      .then(r => r.ok ? r.json() : [])
+      .then(data => setPhaseData(Array.isArray(data) ? data : []))
+      .catch(() => setPhaseData([]));
+  }
+
+  useEffect(() => {
+    loadPhaseData();
+  }, [itemId]);
+
+  // Expose refresh so the parent can call it on cost_recorded WS events
+  CostPhaseTable._instances = CostPhaseTable._instances || {};
+  CostPhaseTable._instances[itemId] = loadPhaseData;
+
+  function togglePhase(phaseName) {
+    setExpandedPhases(prev => ({
+      ...prev,
+      [phaseName]: !prev[phaseName],
+    }));
+  }
+
+  if (!phaseData || phaseData.length === 0) return null;
+
+  return html`
+    <table class="cost-phase-table">
+      <thead>
+        <tr>
+          <th>Phase</th>
+          <th>Cost</th>
+          <th>Tokens</th>
+          <th>Duration</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${phaseData
+          .slice()
+          .sort((a, b) => (b.total_cost_usd || 0) - (a.total_cost_usd || 0))
+          .map(phase => {
+            const hasIterations = phase.iterations && phase.iterations.length > 1;
+            const isExpanded = expandedPhases[phase.phase];
+            return html`
+              <tr
+                class=${hasIterations ? 'cost-phase-row-expandable' : ''}
+                onClick=${hasIterations ? () => togglePhase(phase.phase) : undefined}
+                key=${phase.phase}
+              >
+                <td class="cost-phase-name">
+                  ${hasIterations ? html`<span class=${'cost-phase-expand-icon' + (isExpanded ? ' expanded' : '')}>&#9654;</span>` : null}
+                  ${phase.phase}
+                </td>
+                <td class="cost-phase-value">${formatCost(phase.total_cost_usd) || '$0.00'}</td>
+                <td class="cost-phase-value">${formatTokens((phase.total_input_tokens || 0) + (phase.total_output_tokens || 0))}</td>
+                <td class="cost-phase-value">${formatDuration(phase.total_duration_seconds)}</td>
+              </tr>
+              ${isExpanded && phase.iterations && phase.iterations.map(iter => html`
+                <tr class="cost-iteration-row" key=${phase.phase + '-' + iter.iteration}>
+                  <td style="padding-left:28px">
+                    Iter ${iter.iteration}
+                    ${iter.model && iter.model !== 'mixed' ? html`
+                      <span class="cost-model-badge">${iter.model.replace('claude-', '').split('-20')[0]}</span>
+                    ` : null}
+                  </td>
+                  <td class="cost-phase-value">${formatCost(iter.cost_usd) || '$0.00'}</td>
+                  <td class="cost-phase-value">${formatTokens((iter.input_tokens || 0) + (iter.output_tokens || 0))}</td>
+                  <td class="cost-phase-value">${formatDuration(iter.duration_seconds)}</td>
+                </tr>
+              `)}
+            `;
+          })}
+      </tbody>
+    </table>
+  `;
+}
+
 // ── Item Detail Sidebar ──
 
-function ItemDetailSidebar({ item, onClose, onStatusChange }) {
+function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
   const [updates, setUpdates] = useState([]);
   const [loadingUpdates, setLoadingUpdates] = useState(true);
   const [sortNewest, setSortNewest] = useState(true);
@@ -4277,9 +4673,29 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
   const [loadingAttachments, setLoadingAttachments] = useState(true);
   const [costSummary, setCostSummary] = useState(null);
   const [loadingCost, setLoadingCost] = useState(true);
+  const [phaseData, setPhaseData] = useState([]);
+  const [envTimeline, setEnvTimeline] = useState(null);
   const sidebarRef = useRef(null);
   const topCommentRef = useRef(null);
 
+  useEffect(() => {
+    if (!item || !item.extra || !item.extra.current_env) {
+      setEnvTimeline(null);
+      return;
+    }
+    // Use selectedProject (prop) to determine DB routing so we query the
+    // same DB that served the items list. 'all' or falsy = default DB
+    // (no board param). A named project = that project's specific DB.
+    const proj = selectedProject && selectedProject !== 'all' ? selectedProject : null;
+    const projParam = proj || item.project_id || 'beastmode';
+    const qs = '?project=' + encodeURIComponent(projParam) +
+      (proj ? '&board=' + encodeURIComponent(proj) : '');
+    fetch('/api/items/' + item.id + '/env-timeline' + qs)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => setEnvTimeline(data))
+      .catch(() => setEnvTimeline(null));
+  }, [item && item.id, item && item.extra && item.extra.current_env]);
+
   // Cost summary fetch — keyed on item.id, refreshed alongside the
   // 10-second updates/attachments poll below. The api() helper only
   // auto-scopes /api/board/*, so append ?board=<proj> manually.
@@ -4294,6 +4710,16 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
       .catch(() => setCostSummary(null));
   }, [item && item.id]);
 
+  const refreshPhaseData = useCallback(() => {
+    if (!item) return;
+    const proj = localStorage.getItem('beastmode-selected-project') || '';
+    const boardParam = (proj && proj !== 'all') ? '?board=' + encodeURIComponent(proj) : '';
+    fetch('/api/items/' + item.id + '/costs/by-phase' + boardParam)
+      .then(r => r.ok ? r.json() : [])
+      .then(data => setPhaseData(Array.isArray(data) ? data : []))
+      .catch(() => setPhaseData([]));
+  }, [item && item.id]);
+
   const refreshUpdates = useCallback(() => {
     if (!item) return;
     api('GET', '/api/board/items/' + item.id + '/updates')
@@ -4340,10 +4766,16 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
       .then(data => setCostSummary(data && data.record_count > 0 ? data : null))
       .catch(() => setCostSummary(null))
       .finally(() => setLoadingCost(false));
+    // Also fetch the per-phase breakdown for the expandable table
+    fetch('/api/items/' + item.id + '/costs/by-phase' + boardParam)
+      .then(r => r.ok ? r.json() : [])
+      .then(data => setPhaseData(Array.isArray(data) ? data : []))
+      .catch(() => setPhaseData([]));
     const interval = setInterval(() => {
       refreshUpdates();
       refreshAttachments();
       refreshCostSummary();
+      refreshPhaseData();
     }, 10000);
     return () => clearInterval(interval);
   }, [item && item.id]);
@@ -4499,33 +4931,112 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
                 <span class="cost-total-value">${formatDuration(costSummary.total_duration_seconds)}</span>
               </div>
             </div>
-            ${costSummary.phases && Object.keys(costSummary.phases).length > 0 && html`
-              <table class="cost-phase-table">
-                <thead>
-                  <tr>
-                    <th>Phase</th>
-                    <th>Cost</th>
-                    <th>Tokens</th>
-                    <th>Duration</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${Object.values(costSummary.phases)
-                    .slice()
-                    .sort((a, b) => (b.cost_usd || 0) - (a.cost_usd || 0))
-                    .map((phase) => html`
-                      <tr key=${phase.phase}>
-                        <td class="cost-phase-name">${phase.phase}</td>
-                        <td class="cost-phase-value">${formatCost(phase.cost_usd) || '$0.00'}</td>
-                        <td class="cost-phase-value">${formatTokens((phase.input_tokens || 0) + (phase.output_tokens || 0))}</td>
-                        <td class="cost-phase-value">${formatDuration(phase.duration_seconds)}</td>
-                      </tr>
-                    `)}
-                </tbody>
-              </table>
-            `}
+            ${phaseData && phaseData.length > 0
+              ? html`<${CostPhaseTable} itemId=${item.id} boardParam=${(() => { const p = localStorage.getItem('beastmode-selected-project') || ''; return (p && p !== 'all') ? '?board=' + encodeURIComponent(p) : ''; })()} />`
+              : (costSummary.phases && Object.keys(costSummary.phases).length > 0 && html`
+                <table class="cost-phase-table">
+                  <thead>
+                    <tr>
+                      <th>Phase</th>
+                      <th>Cost</th>
+                      <th>Tokens</th>
+                      <th>Duration</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${Object.values(costSummary.phases)
+                      .slice()
+                      .sort((a, b) => (b.cost_usd || 0) - (a.cost_usd || 0))
+                      .map((phase) => html`
+                        <tr key=${phase.phase}>
+                          <td class="cost-phase-name">${phase.phase}</td>
+                          <td class="cost-phase-value">${formatCost(phase.cost_usd) || '$0.00'}</td>
+                          <td class="cost-phase-value">${formatTokens((phase.input_tokens || 0) + (phase.output_tokens || 0))}</td>
+                          <td class="cost-phase-value">${formatDuration(phase.duration_seconds)}</td>
+                        </tr>
+                      `)}
+                  </tbody>
+                </table>
+              `)
+            }
           </div>
         `)}
+      ${envTimeline && (envTimeline.entries.length > 0 || envTimeline.promotion_chain.length > 0) && html`
+        <div class="detail-section" style="padding:12px 24px 0;" data-testid="env-timeline-section">
+          <h4 class="detail-section-title" style="margin:0 0 8px 0;font-size:13px;font-weight:600;">Environment Timeline</h4>
+          <div class="env-timeline" data-testid="env-timeline">
+            ${(envTimeline.promotion_chain.length > 0
+                ? envTimeline.promotion_chain
+                : envTimeline.entries.map(e => e.env)
+              ).map(envName => {
+                const entry = envTimeline.entries.find(e => e.env === envName);
+                const isCurrent = envName === envTimeline.current_env;
+                const stepClass = 'env-timeline-step'
+                  + (entry ? ' env-step-' + entry.status : ' env-step-pending')
+                  + (isCurrent ? ' env-step-current' : '');
+                const isDeploying = entry && (entry.status === 'deploying' || entry.status === 'verifying');
+                return html`
+                  <div class=${stepClass} key=${envName}>
+                    <div class="env-step-dot"></div>
+                    <div class="env-step-body">
+                      <div class="env-step-name">${envName}</div>
+                      ${entry && entry.status === 'passed' && entry.satisfaction != null && html`
+                        <div class="env-step-score">${(entry.satisfaction * 100).toFixed(0)}%</div>
+                      `}
+                      ${entry && entry.verified_at && html`
+                        <div class="env-step-time">${timeAgo(entry.verified_at)}</div>
+                      `}
+                      ${!entry && html`
+                        <div class="env-step-time">pending</div>
+                      `}
+                    </div>
+                    <button
+                      class="btn-env-deploy"
+                      title=${'Deploy to ' + envName}
+                      data-testid=${'btn-deploy-' + envName}
+                      aria-label=${'Deploy to ' + envName}
+                      disabled=${isDeploying}
+                      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));
+                      }}
+                    >🚀</button>
+                  </div>
+                `;
+              })}
+          </div>
+        </div>
+      `}
       ${(loadingAttachments || attachments.length > 0) && html`
         <div style="padding:12px 24px 0;">
           <h4 style="margin:0 0 8px 0;font-size:13px;font-weight:600;">
@@ -4742,9 +5253,12 @@ function PipelineView({
           return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
         })()}
         ${(() => {
-          // Time-in-status badge (2026-04-20): answers "how long has
-          // this been waiting?" without the user having to click into
-          // the task. Falls back to updated_at for pre-v5 rows.
+          const env = item.extra && item.extra.current_env;
+          if (!env) return null;
+          return html`<span class=${'card-badge badge-env badge-env-' + env}
+                           title=${'Environment: ' + env}>${env}</span>`;
+        })()}
+        ${(() => {
           const src = item.status_changed_at || item.updated_at || item.created_at;
           const age = statusAge(src);
           if (!age.text) return null;
@@ -5027,7 +5541,7 @@ function BoardPage({ selectedProject }) {
   const [showCreateDialog, setShowCreateDialog] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [filtersOpen, setFiltersOpen] = useState(false);
-  const [filters, setFilters] = useState({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' });
+  const [filters, setFilters] = useState({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '', environment: '' });
   const [activeSwimlanesSet, setActiveSwimlanesSet] = useState(() => {
     try {
       const saved = JSON.parse(localStorage.getItem('beastmode-swimlane-filter') || 'null');
@@ -5134,6 +5648,36 @@ function BoardPage({ selectedProject }) {
     return () => clearInterval(interval);
   }, [selectedProject]);
 
+  // Layout test surface: expose column metrics on window for scenario
+  // verification. Guards on !loading and items.length > 0 so metrics are
+  // only exposed once the board has actually rendered content.
+  // requestAnimationFrame defers measurement until after the browser has
+  // painted, ensuring scrollHeight/clientHeight reflect the real layout
+  // (not stale values from a partially-completed render cycle).
+  useEffect(() => {
+    if (loading || items.length === 0) return;
+    const raf = requestAnimationFrame(() => {
+      const columns = document.querySelectorAll('.kanban-items');
+      if (columns.length === 0) return;
+      const metrics = Array.from(columns).map(col => {
+        const cs = getComputedStyle(col);
+        return {
+          scrollHeight: col.scrollHeight,
+          clientHeight: col.clientHeight,
+          isScrollable: col.scrollHeight > col.clientHeight,
+          hasOverflowAuto: cs.overflowY === 'auto',
+          maxHeight: cs.maxHeight,
+        };
+      });
+      window.__BEASTMODE_BOARD_LAYOUT__ = {
+        columnCount: columns.length,
+        columns: metrics,
+        timestamp: Date.now(),
+      };
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [items, loading]);
+
   // WebSocket listener for real-time cost updates (T4).
   // On any `cost_recorded` or `costs_cleared` event, re-fetch the
   // full batch — the endpoint is a single GROUP BY query and is
@@ -5356,6 +5900,11 @@ function BoardPage({ selectedProject }) {
     if (filters.project && (item.project_id || '') !== filters.project) return false;
     // Parent epic filter
     if (filters.parentEpic && String(item.parent_epic || '') !== filters.parentEpic) return false;
+    // Environment filter
+    if (filters.environment) {
+      const env = item.extra && item.extra.current_env;
+      if (env !== filters.environment) return false;
+    }
     // Date range filter
     if (filters.dateRange) {
       const d = new Date(item.created_at || item.updated_at);
@@ -5456,7 +6005,7 @@ function BoardPage({ selectedProject }) {
   });
 
   // Active filter count
-  const _baseFilterCount = [filters.priority, filters.taskType, filters.project, filters.dateRange, filters.parentEpic].filter(Boolean).length;
+  const _baseFilterCount = [filters.priority, filters.taskType, filters.project, filters.dateRange, filters.parentEpic, filters.environment].filter(Boolean).length;
   const _swimlaneFilterActive = activeSwimlanesSet.size < (((window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || []).length || 0);
   const activeFilterCount = _baseFilterCount + (_swimlaneFilterActive ? 1 : 0);
 
@@ -5486,6 +6035,16 @@ function BoardPage({ selectedProject }) {
   // Unique project IDs and parent epics for filter dropdowns
   const uniqueProjects = [...new Set(items.map(i => i.project_id).filter(Boolean))];
   const uniqueEpics = [...new Set(items.map(i => i.parent_epic).filter(Boolean))].map(String);
+  // Unique environments (NLSpec §5.3) — backward-compat: empty list when no item has env data,
+  // which hides the Environment filter dropdown for single-env projects.
+  const uniqueEnvs = useMemo(() => {
+    const envSet = new Set();
+    items.forEach(item => {
+      const env = item.extra && item.extra.current_env;
+      if (env) envSet.add(env);
+    });
+    return [...envSet].sort();
+  }, [items]);
 
   if (loading) return html`<${SkeletonLoader} type="cards" />`;
 
@@ -5614,8 +6173,17 @@ function BoardPage({ selectedProject }) {
               </select>
             </div>
           `}
+          ${uniqueEnvs.length > 0 && html`
+            <div class="filter-group">
+              <label>Environment</label>
+              <select value=${filters.environment} onChange=${(e) => setFilters(f => ({...f, environment: e.target.value}))}>
+                <option value="">All</option>
+                ${uniqueEnvs.map(env => html`<option key=${env} value=${env}>${env}</option>`)}
+              </select>
+            </div>
+          `}
           ${activeFilterCount > 0 && html`
-            <button class="filter-clear-link" onClick=${() => setFilters({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' })}>Clear all</button>
+            <button class="filter-clear-link" onClick=${() => setFilters({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '', environment: '' })}>Clear all</button>
           `}
         </div>
       `}
@@ -5721,9 +6289,12 @@ function BoardPage({ selectedProject }) {
                             return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
                           })()}
                           ${(() => {
-          // Time-in-status badge (2026-04-20): answers "how long has
-          // this been waiting?" without the user having to click into
-          // the task. Falls back to updated_at for pre-v5 rows.
+                            const env = item.extra && item.extra.current_env;
+                            if (!env) return null;
+                            return html`<span class=${'card-badge badge-env badge-env-' + env}
+                                             title=${'Environment: ' + env}>${env}</span>`;
+                          })()}
+                          ${(() => {
           const src = item.status_changed_at || item.updated_at || item.created_at;
           const age = statusAge(src);
           if (!age.text) return null;
@@ -5767,7 +6338,7 @@ function BoardPage({ selectedProject }) {
       `}
 
       ${showCreateDialog && html`<${CreateTaskDialog} onClose=${() => setShowCreateDialog(false)} onCreated=${fetchItems} />`}
-      ${selectedItem && html`<${ItemDetailSidebar} item=${selectedItem} onClose=${() => setSelectedItem(null)} onStatusChange=${() => { fetchItems(); setSelectedItem(null); }} />`}
+      ${selectedItem && html`<${ItemDetailSidebar} item=${selectedItem} selectedProject=${selectedProject} onClose=${() => setSelectedItem(null)} onStatusChange=${() => { fetchItems(); setSelectedItem(null); }} />`}
     </div>
   `;
 }
@@ -6034,6 +6605,530 @@ function RunsPage({ selectedProject }) {
   `;
 }
 
+// ================================================================
+// Environment Management Panel (Story 9)
+// ================================================================
+
+function validateEnvForm(values, existingNames, isEdit) {
+  const errors = {};
+  if (!values.name) {
+    errors.name = 'Name is required';
+  } else if (!/^[a-z0-9][a-z0-9_-]*$/.test(values.name)) {
+    errors.name = 'Lowercase alphanumeric, hyphens, underscores only. Must start with letter or digit.';
+  } else if (!isEdit && existingNames.includes(values.name)) {
+    errors.name = 'An environment with this name already exists';
+  }
+  if (values.health_url && !/^https?:\/\//.test(values.health_url)) {
+    errors.health_url = 'Must start with http:// or https://';
+  }
+  return errors;
+}
+
+function EnvironmentRow({ env, health, onEdit, onDelete }) {
+  const healthDotColor = health === 'up' ? '#22c55e' : health === 'down' ? '#ef4444' : '#6b7280';
+  const healthTitle = health === 'up' ? 'Healthy' : health === 'down' ? 'Unreachable' : 'Not configured';
+  const classesDisplay = (env.scenario_classes && env.scenario_classes.length)
+    ? env.scenario_classes.join(', ') : 'all';
+  const truncatedUrl = env.health_url
+    ? (env.health_url.length > 40 ? env.health_url.slice(0, 40) + '...' : env.health_url)
+    : null;
+
+  return html`
+    <tr>
+      <td>
+        <span class=${'badge-env badge-env-' + env.name}>${env.name}</span>
+        ${env.is_virtual ? html` <span style="font-size:11px;color:var(--text-muted);">(virtual)</span>` : null}
+      </td>
+      <td>
+        <span aria-label=${'Health: ' + healthTitle} title=${healthTitle}
+              style=${'display:inline-block;width:8px;height:8px;border-radius:50%;background:' + healthDotColor + ';margin-right:6px;vertical-align:middle;'}></span>
+        ${truncatedUrl
+          ? html`<span style="font-size:12px;color:var(--text-secondary);" title=${env.health_url}>${truncatedUrl}</span>`
+          : html`<span style="font-size:12px;color:var(--text-muted);">—</span>`}
+      </td>
+      <td style="font-size:12px;">${classesDisplay}</td>
+      <td style="text-align:center;">${env.auto_promote ? '✓' : '—'}</td>
+      <td style="text-align:center;">${env.approval_required ? '✓' : '—'}</td>
+      <td>
+        ${env.promote_to
+          ? html`<span style="color:var(--text-muted);margin-right:4px;">→</span><span class=${'badge-env badge-env-' + env.promote_to}>${env.promote_to}</span>`
+          : html`<span style="font-size:12px;color:var(--text-muted);">terminal</span>`}
+      </td>
+      <td>
+        <div style="display:flex;gap:6px;">
+          <button class="btn btn-sm btn-secondary" onClick=${onEdit}>Edit</button>
+          <button class="btn btn-sm btn-danger" onClick=${onDelete} disabled=${env.is_virtual}>Delete</button>
+        </div>
+      </td>
+    </tr>
+  `;
+}
+
+function EnvironmentsTable({ environments, healthStatuses, onEdit, onDelete }) {
+  if (!environments.length) {
+    return html`<div style="color:var(--text-muted);font-size:13px;padding:12px 0;">
+      No environments configured. Add one to enable multi-environment verification.
+    </div>`;
+  }
+  return html`
+    <table class="env-table" role="table" aria-labelledby="env-table-label">
+      <thead>
+        <tr>
+          <th id="env-table-label">Name</th>
+          <th>Health</th>
+          <th>Scenario Classes</th>
+          <th style="width:60px;text-align:center;">Auto</th>
+          <th style="width:60px;text-align:center;">Approval</th>
+          <th>Promotes to</th>
+          <th style="width:120px;">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${environments.map(env => html`
+          <${EnvironmentRow}
+            key=${env.name}
+            env=${env}
+            health=${healthStatuses[env.name] || 'unknown'}
+            onEdit=${() => onEdit(env.name)}
+            onDelete=${() => onDelete(env.name)}
+          />
+        `)}
+      </tbody>
+    </table>
+  `;
+}
+
+// Compute the longest linear promotion chain from environments client-side.
+// The API's promotion_chain reflects only the default production terminal;
+// when multiple chains exist we pick the longest one from the actual data.
+function computePromotionChain(environments) {
+  if (!environments || environments.length < 2) return (environments || []).map(e => e.name);
+  const envMap = {};
+  environments.forEach(e => { envMap[e.name] = e; });
+  const isTarget = new Set(environments.map(e => e.promote_to).filter(Boolean));
+  const sources = environments.filter(e => !isTarget.has(e.name));
+  let longest = [];
+  for (const src of sources) {
+    const chain = [src.name];
+    let cur = src;
+    const seen = new Set([src.name]);
+    while (cur.promote_to && envMap[cur.promote_to] && !seen.has(cur.promote_to)) {
+      chain.push(cur.promote_to);
+      seen.add(cur.promote_to);
+      cur = envMap[cur.promote_to];
+    }
+    if (chain.length > longest.length) longest = chain;
+  }
+  return longest;
+}
+
+function PromotionChainViz({ chain, environments }) {
+  const envMap = {};
+  for (const e of environments) envMap[e.name] = e;
+  return html`
+    <div class="promotion-chain" aria-label="Promotion chain">
+      ${chain.map((name, i) => html`
+        ${i > 0 ? html`<span class="promotion-chain-arrow">→</span>` : null}
+        <span key=${name} class=${'badge-env badge-env-' + name} style="padding:4px 12px;font-size:12px;">
+          ${name}
+          ${envMap[name] && envMap[name].auto_promote ? html` <span style="font-size:10px;opacity:0.7;" title="auto-promote">(auto)</span>` : null}
+          ${envMap[name] && envMap[name].approval_required ? html` <span style="font-size:10px;opacity:0.7;" title="approval required">(gate)</span>` : null}
+        </span>
+      `)}
+    </div>
+  `;
+}
+
+function EnvFormFields({ values, setValues, errors, setErrors, environments, isEdit }) {
+  return html`
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
+      <div class="form-group" style="margin-bottom:0;">
+        <label style="font-size:12px;font-weight:500;color:var(--text-secondary);display:block;margin-bottom:4px;">Name *</label>
+        <input class="form-input" placeholder="e.g. staging"
+               disabled=${isEdit}
+               value=${values.name}
+               onInput=${e => { setValues({ ...values, name: e.target.value }); setErrors({ ...errors, name: null }); }} />
+        ${errors.name ? html`<div style="color:#ef4444;font-size:11px;margin-top:2px;">${errors.name}</div>` : null}
+      </div>
+      <div class="form-group" style="margin-bottom:0;">
+        <label style="font-size:12px;font-weight:500;color:var(--text-secondary);display:block;margin-bottom:4px;">Health URL</label>
+        <input class="form-input" placeholder="https://staging.example.com/health"
+               value=${values.health_url}
+               onInput=${e => { setValues({ ...values, health_url: e.target.value }); setErrors({ ...errors, health_url: null }); }} />
+        ${errors.health_url ? html`<div style="color:#ef4444;font-size:11px;margin-top:2px;">${errors.health_url}</div>` : null}
+      </div>
+      <div class="form-group" style="margin-bottom:0;">
+        <label style="font-size:12px;font-weight:500;color:var(--text-secondary);display:block;margin-bottom:4px;">Deploy Strategy</label>
+        <input class="form-input" placeholder="infra/staging-deploy.md"
+               value=${values.deploy_strategy}
+               onInput=${e => setValues({ ...values, deploy_strategy: e.target.value })} />
+      </div>
+      <div class="form-group" style="margin-bottom:0;">
+        <label style="font-size:12px;font-weight:500;color:var(--text-secondary);display:block;margin-bottom:4px;">Scenario Classes</label>
+        <input class="form-input" placeholder="integration, e2e (comma-separated)"
+               value=${values.scenario_classes_text}
+               onInput=${e => setValues({ ...values, scenario_classes_text: e.target.value })} />
+      </div>
+      <div class="form-group" style="margin-bottom:0;">
+        <label style="font-size:12px;font-weight:500;color:var(--text-secondary);display:block;margin-bottom:4px;">Promotes to</label>
+        <select class="form-input" value=${values.promote_to || ''}
+                onChange=${e => setValues({ ...values, promote_to: e.target.value || null })}>
+          <option value="">None (terminal)</option>
+          ${environments.filter(env => !isEdit || env.name !== values.name).map(env => html`
+            <option key=${env.name} value=${env.name}>${env.name}</option>
+          `)}
+        </select>
+      </div>
+      <div style="display:flex;gap:16px;align-items:center;padding-top:20px;">
+        <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
+          <input type="checkbox" checked=${values.auto_promote}
+                 onChange=${e => setValues({ ...values, auto_promote: e.target.checked })} />
+          Auto-promote
+        </label>
+        <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
+          <input type="checkbox" checked=${values.approval_required}
+                 onChange=${e => setValues({ ...values, approval_required: e.target.checked })} />
+          Approval required
+        </label>
+      </div>
+    </div>
+  `;
+}
+
+function AddEnvironmentForm({ projectName, existingNames, environments, onCreated, onCancel }) {
+  const [values, setValues] = useState({
+    name: '', health_url: '', deploy_strategy: '',
+    scenario_classes_text: '', auto_promote: false,
+    approval_required: false, promote_to: null,
+  });
+  const [errors, setErrors] = useState({});
+  const [submitting, setSubmitting] = useState(false);
+  const [apiError, setApiError] = useState(null);
+
+  const handleSubmit = async () => {
+    const errs = validateEnvForm(values, existingNames, false);
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+    setSubmitting(true);
+    setApiError(null);
+    try {
+      const payload = {
+        name: values.name,
+        health_url: values.health_url || undefined,
+        deploy_strategy: values.deploy_strategy || undefined,
+        scenario_classes: values.scenario_classes_text
+          ? values.scenario_classes_text.split(',').map(s => s.trim()).filter(Boolean)
+          : [],
+        auto_promote: values.auto_promote,
+        approval_required: values.approval_required,
+        promote_to: values.promote_to || null,
+      };
+      await api('POST', '/api/environments?project=' + encodeURIComponent(projectName), payload);
+      onCreated();
+    } catch (e) { setApiError(e.message); }
+    finally { setSubmitting(false); }
+  };
+
+  return html`
+    <div style="margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);">
+      <h5 style="font-size:13px;font-weight:600;margin:0 0 12px;">Add Environment</h5>
+      ${apiError ? html`<div class="error-msg" style="margin-bottom:8px;">${apiError}</div>` : null}
+      <${EnvFormFields}
+        values=${values}
+        setValues=${setValues}
+        errors=${errors}
+        setErrors=${setErrors}
+        environments=${environments}
+        isEdit=${false}
+      />
+      <div style="display:flex;gap:8px;margin-top:14px;">
+        <button class="btn btn-primary btn-sm" onClick=${handleSubmit} disabled=${submitting}>
+          ${submitting ? 'Creating...' : 'Create Environment'}
+        </button>
+        <button class="btn btn-secondary btn-sm" onClick=${onCancel}>Cancel</button>
+      </div>
+    </div>
+  `;
+}
+
+function EditEnvironmentDialog({ projectName, env, existingNames, environments, onSaved, onClose }) {
+  const [values, setValues] = useState({
+    name: env.name,
+    health_url: env.health_url || '',
+    deploy_strategy: env.deploy_strategy || '',
+    scenario_classes_text: (env.scenario_classes || []).join(', '),
+    auto_promote: !!env.auto_promote,
+    approval_required: !!env.approval_required,
+    promote_to: env.promote_to || null,
+  });
+  const [errors, setErrors] = useState({});
+  const [submitting, setSubmitting] = useState(false);
+  const [apiError, setApiError] = useState(null);
+  const dialogRef = useRef(null);
+
+  const handleSave = async () => {
+    const errs = validateEnvForm(values, existingNames, true);
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+    setSubmitting(true);
+    setApiError(null);
+    try {
+      const payload = {
+        health_url: values.health_url || null,
+        deploy_strategy: values.deploy_strategy || null,
+        scenario_classes: values.scenario_classes_text
+          ? values.scenario_classes_text.split(',').map(s => s.trim()).filter(Boolean)
+          : [],
+        auto_promote: values.auto_promote,
+        approval_required: values.approval_required,
+        promote_to: values.promote_to || null,
+        clear_promote_to: !values.promote_to,
+      };
+      await api('PATCH', '/api/environments/' + encodeURIComponent(env.name) + '?project=' + encodeURIComponent(projectName), payload);
+      onSaved();
+    } catch (e) { setApiError(e.message); }
+    finally { setSubmitting(false); }
+  };
+
+  useEffect(() => {
+    const firstInput = dialogRef.current && dialogRef.current.querySelector('input:not([disabled])');
+    if (firstInput) firstInput.focus();
+  }, []);
+
+  useEffect(() => {
+    const handler = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  return html`
+    <div class="dialog-overlay" onClick=${onClose}>
+      <div class="dialog env-edit-dialog" ref=${dialogRef}
+           onClick=${e => e.stopPropagation()}
+           role="dialog" aria-label="Edit environment" aria-modal="true">
+        <div class="dialog-header">
+          <h3>Edit Environment: ${env.name}</h3>
+          <button class="btn btn-ghost btn-sm" onClick=${onClose}>✕</button>
+        </div>
+        <div class="dialog-body">
+          ${apiError ? html`<div class="error-msg" style="margin-bottom:8px;">${apiError}</div>` : null}
+          <${EnvFormFields}
+            values=${values}
+            setValues=${setValues}
+            errors=${errors}
+            setErrors=${setErrors}
+            environments=${environments}
+            isEdit=${true}
+          />
+          <div style="display:flex;gap:8px;margin-top:14px;justify-content:flex-end;">
+            <button class="btn btn-secondary btn-sm" onClick=${onClose}>Cancel</button>
+            <button class="btn btn-primary btn-sm" onClick=${handleSave} disabled=${submitting}>
+              ${submitting ? 'Saving...' : 'Save Changes'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function DeleteConfirmDialog({ projectName, envName, onDeleted, onClose }) {
+  const [deleting, setDeleting] = useState(false);
+  const [apiError, setApiError] = useState(null);
+
+  useEffect(() => {
+    const handler = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    setApiError(null);
+    try {
+      await api('DELETE', '/api/environments/' + encodeURIComponent(envName) + '?project=' + encodeURIComponent(projectName));
+      onDeleted();
+    } catch (e) {
+      setApiError(e.message);
+    }
+    finally { setDeleting(false); }
+  };
+
+  return html`
+    <div class="dialog-overlay" onClick=${onClose}>
+      <div class="dialog" style="max-width:400px;"
+           onClick=${e => e.stopPropagation()}
+           role="alertdialog" aria-label="Confirm delete environment" aria-modal="true">
+        <div class="dialog-header">
+          <h3>Delete Environment</h3>
+          <button class="btn btn-ghost btn-sm" onClick=${onClose}>✕</button>
+        </div>
+        <div class="dialog-body">
+          <p style="font-size:14px;color:var(--text);">
+            Are you sure you want to delete <strong>${envName}</strong>?
+            This cannot be undone.
+          </p>
+          ${apiError ? html`<div class="error-msg" style="margin-top:8px;">${apiError}</div>` : null}
+          <div style="display:flex;gap:8px;margin-top:16px;justify-content:flex-end;">
+            <button class="btn btn-secondary btn-sm" onClick=${onClose}>Cancel</button>
+            <button class="btn btn-danger btn-sm" onClick=${handleDelete} disabled=${deleting}>
+              ${deleting ? 'Deleting...' : 'Delete'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function EnvironmentPanel({ projectName }) {
+  const [environments, setEnvironments] = useState([]);
+  const [promotionChain, setPromotionChain] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [collapsed, setCollapsed] = useState(false);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [editingEnv, setEditingEnv] = useState(null);
+  const [deletingEnv, setDeletingEnv] = useState(null);
+  const [healthStatuses, setHealthStatuses] = useState({});
+
+  const fetchEnvs = useCallback(async () => {
+    try {
+      const data = await api('GET', '/api/environments?project=' + encodeURIComponent(projectName));
+      const envs = data.environments || [];
+      setEnvironments(envs);
+      setPromotionChain(computePromotionChain(envs));
+      setError(null);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectName]);
+
+  useEffect(() => { fetchEnvs(); }, [projectName]);
+
+  // Health polling — every 30s, check each env's health_url
+  useEffect(() => {
+    if (!environments.length) return;
+    let cancelled = false;
+    const pollHealth = async () => {
+      const statuses = {};
+      for (const env of environments) {
+        if (!env.health_url) {
+          statuses[env.name] = 'unknown';
+          continue;
+        }
+        try {
+          const ctrl = new AbortController();
+          const timeoutId = setTimeout(() => ctrl.abort(), 5000);
+          await fetch(env.health_url, { mode: 'no-cors', signal: ctrl.signal });
+          clearTimeout(timeoutId);
+          statuses[env.name] = 'up';
+        } catch {
+          statuses[env.name] = 'down';
+        }
+      }
+      if (!cancelled) setHealthStatuses(statuses);
+    };
+    pollHealth();
+    const interval = setInterval(pollHealth, 30000);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, [environments]);
+
+  // WebSocket listener for env CRUD events
+  useEffect(() => {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = proto + '//' + location.host + '/ws';
+    let ws;
+    let reconnectTimer;
+    let closed = false;
+
+    const interestingTypes = new Set([
+      'environment_created',
+      'environment_updated',
+      'environment_deleted',
+      'environments_reordered',
+    ]);
+
+    const connect = () => {
+      ws = new WebSocket(wsUrl);
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (interestingTypes.has(msg.type) && msg.board === projectName) {
+            fetchEnvs();
+          }
+        } catch {}
+      };
+      ws.onclose = () => {
+        if (!closed) reconnectTimer = setTimeout(connect, 5000);
+      };
+      ws.onerror = () => { if (ws) ws.close(); };
+    };
+    connect();
+
+    return () => {
+      closed = true;
+      clearTimeout(reconnectTimer);
+      if (ws) ws.close();
+    };
+  }, [projectName, fetchEnvs]);
+
+  return html`
+    <div class="env-panel">
+      <div class="env-panel-header" onClick=${() => setCollapsed(c => !c)}
+           role="button" aria-expanded=${!collapsed}>
+        <h4>Environments</h4>
+        <span class=${'env-panel-toggle' + (collapsed ? ' collapsed' : '')}>▼</span>
+      </div>
+      ${!collapsed ? html`
+        <div class="env-panel-body">
+          ${error ? html`<div class="error-msg" style="margin-bottom:12px;">${error}</div>` : null}
+          ${loading ? html`<div style="color:var(--text-muted);font-size:13px;">Loading environments...</div>` : html`
+            ${promotionChain.length > 1 ? html`<${PromotionChainViz} chain=${promotionChain} environments=${environments} />` : null}
+            <${EnvironmentsTable}
+              environments=${environments}
+              healthStatuses=${healthStatuses}
+              onEdit=${(name) => setEditingEnv(name)}
+              onDelete=${(name) => setDeletingEnv(name)}
+            />
+            ${!showAddForm ? html`
+              <button class="btn btn-sm btn-secondary" style="margin-top:12px;" onClick=${() => setShowAddForm(true)}>
+                + Add Environment
+              </button>
+            ` : html`
+              <${AddEnvironmentForm}
+                projectName=${projectName}
+                existingNames=${environments.map(e => e.name)}
+                environments=${environments}
+                onCreated=${() => { setShowAddForm(false); fetchEnvs(); }}
+                onCancel=${() => setShowAddForm(false)}
+              />
+            `}
+          `}
+          ${editingEnv ? html`
+            <${EditEnvironmentDialog}
+              projectName=${projectName}
+              env=${environments.find(e => e.name === editingEnv)}
+              existingNames=${environments.map(e => e.name)}
+              environments=${environments}
+              onSaved=${() => { setEditingEnv(null); fetchEnvs(); }}
+              onClose=${() => setEditingEnv(null)}
+            />
+          ` : null}
+          ${deletingEnv ? html`
+            <${DeleteConfirmDialog}
+              projectName=${projectName}
+              envName=${deletingEnv}
+              onDeleted=${() => { setDeletingEnv(null); fetchEnvs(); }}
+              onClose=${() => setDeletingEnv(null)}
+            />
+          ` : null}
+        </div>
+      ` : null}
+    </div>
+  `;
+}
+
 // ================================================================
 // Projects Page
 // ================================================================
@@ -6186,7 +7281,7 @@ function ProjectsPage({ selectedProject, onProjectChange }) {
                   title="No projects yet"
                   description="Add a project path to start building." />`
         : projects.map(proj => html`
-          <div class="ext-item" key=${proj.name}>
+          <div class="ext-item" key=${proj.name} style="flex-wrap:wrap;">
             <div class="ext-info">
               <div class="ext-name">${proj.name}</div>
               <div class="ext-meta">
@@ -6198,6 +7293,7 @@ function ProjectsPage({ selectedProject, onProjectChange }) {
             <div class="ext-actions">
               <button class="btn btn-sm btn-danger" onClick=${() => removeProject(proj.name)}>Remove</button>
             </div>
+            <${EnvironmentPanel} projectName=${proj.name} />
           </div>
         `)}
       </div>