@beastmode-develeap/beastmode 0.1.1 → 0.1.3

package/dist/web/board.html

@@ -219,24 +219,18 @@ body {
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }
 
-/* Mobile sidebar overlay */
-.sidebar-overlay {
+/* Mobile nav overlay — must be BELOW sidebar (z-index 100) */
+.mobile-nav-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,0.5);
-  z-index: 99;
+  z-index: 98;
 }
-.sidebar-overlay.open { display: block; }
+.mobile-nav-overlay.open { display: block; }
 
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   .mobile-menu-btn { display: block; }
-  .sidebar {
-    transform: translateX(-100%);
-  }
-  .sidebar.open {
-    transform: translateX(0);
-  }
   .main {
     margin-left: 0;
     padding: 56px 16px 16px;
@@ -1035,6 +1029,8 @@ input[type="range"]::-webkit-slider-thumb {
   color: var(--text-secondary);
   display: flex;
   justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
   align-items: center;
   text-transform: uppercase;
   letter-spacing: 0.3px;
@@ -1212,6 +1208,159 @@ input[type="range"]::-webkit-slider-thumb {
   letter-spacing: 0.5px;
 }
 
+/* Board header row — stats + search + filters + new task */
+.board-header-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.board-header-row .board-stats-bar {
+  margin-bottom: 0;
+  flex-shrink: 0;
+}
+.board-search-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 180px;
+  max-width: 360px;
+}
+.board-search-wrap input {
+  width: 100%;
+  padding: 8px 32px 8px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.board-search-wrap input:focus {
+  border-color: var(--accent);
+}
+.board-search-wrap input::placeholder {
+  color: var(--text-muted);
+}
+.board-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 2px 4px;
+  line-height: 1;
+}
+.board-search-clear:hover { color: var(--text); }
+
+/* Filter toggle button */
+.filter-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px;
+  height: 36px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.filter-toggle:hover { border-color: var(--text-muted); color: var(--text); }
+.filter-toggle.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
+.filter-active-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: var(--accent);
+  color: #1a1a1a;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 0 5px;
+}
+
+/* Filter panel */
+.board-filter-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-end;
+  padding: 14px 16px;
+  margin-bottom: 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  animation: fadeSlideIn 0.15s ease;
+}
+.board-filter-panel .filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 140px;
+}
+.board-filter-panel .filter-group label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.board-filter-panel .filter-group select {
+  padding: 6px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  cursor: pointer;
+}
+.board-filter-panel .filter-group select:focus { border-color: var(--accent); }
+.filter-clear-link {
+  font-size: 12px;
+  color: var(--accent);
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-family: var(--font-sans);
+  padding: 6px 0;
+  align-self: flex-end;
+}
+.filter-clear-link:hover { text-decoration: underline; }
+
+/* Column sort indicator */
+.kanban-column-header .sort-indicator {
+  font-size: 11px;
+  margin-left: 4px;
+  color: var(--accent);
+  opacity: 0.8;
+}
+
+/* Project badge on card */
+.card-badge.badge-project {
+  background: rgba(96, 165, 250, 0.12);
+  color: #60a5fa;
+  font-size: 10px;
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ================================================================
    EXTENSIONS / ITEMS LIST
    ================================================================ */
@@ -1342,6 +1491,7 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 .badge-success { background: var(--success-subtle); color: var(--success); }
+.badge-prod-verified { background: #064e3b; color: #34d399; font-weight: 700; border: 1px solid #34d399; }
 .badge-warning { background: var(--warning-subtle); color: var(--warning); }
 .badge-danger { background: var(--danger-subtle); color: var(--danger); }
 .badge-info { background: var(--info-subtle); color: var(--info); }
@@ -1742,17 +1892,35 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 @media (max-width: 900px) {
-  .sidebar { display: none; }
-  .main { margin-left: 0; padding: 20px 16px; overflow-y: auto; }
-  .kanban { flex-direction: column; }
-  .kanban-column { max-width: 100%; min-width: 100%; }
+  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 99; transform: translateX(-100%); transition: transform 0.2s ease; }
+  .sidebar.open { transform: translateX(0); }
+  .main { margin-left: 0; padding: 20px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
+  .kanban { flex-direction: column; overflow-x: hidden; }
+  .kanban-column { max-width: 100%; min-width: 100%; margin-bottom: 8px; }
+  .kanban-column .kanban-items { max-height: none; }
   .stat-grid { grid-template-columns: repeat(2, 1fr); }
   .quick-info-row { flex-direction: column; gap: 12px; }
   .form-row { flex-direction: column; }
+  .kanban-scroll-bar { display: none; }
+  /* Detail sidebar: full-width on tablets */
+  .detail-sidebar { width: 100vw !important; max-width: 100vw; }
+  .detail-resize-handle { display: none; }
 }
 
 @media (max-width: 600px) {
   .stat-grid { grid-template-columns: 1fr; }
+  .main { padding: 16px 8px; }
+  .page-header h2 { font-size: 18px; }
+  .page-header-actions { flex-wrap: wrap; gap: 6px; }
+  .page-header-actions button, .page-header-actions select { font-size: 12px; padding: 5px 8px; }
+  /* Kanban cards: more compact on small phones */
+  .card { padding: 10px; }
+  .card-title { font-size: 13px; }
+  .kanban-column-header { padding: 8px 10px; font-size: 12px; }
+  /* Detail sidebar: full-screen overlay on phones */
+  .detail-sidebar { padding: 16px; }
+  .detail-header h3 { font-size: 14px; }
+  .update-body { font-size: 12px; }
 }
 
 /* ================================================================
@@ -1781,12 +1949,19 @@ input[type="range"]::-webkit-slider-thumb {
 }
 .detail-sidebar.open { transform: translateX(0); }
 .detail-resize-handle {
-  position: absolute; top: 0; left: -4px; bottom: 0; width: 8px;
+  position: absolute; top: 0; left: -6px; bottom: 0; width: 12px;
   cursor: col-resize; z-index: 102;
 }
+.detail-resize-handle::after {
+  content: ''; position: absolute; top: 50%; left: 4px; width: 4px; height: 32px;
+  transform: translateY(-50%); border-radius: 2px;
+  background: var(--border); transition: background 0.15s;
+}
+.detail-resize-handle:hover::after, .detail-resize-handle.active::after {
+  background: var(--accent);
+}
 .detail-resize-handle:hover, .detail-resize-handle.active {
   background: var(--accent-subtle);
-  border-left: 2px solid var(--accent);
 }
 .detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
 .detail-header h3 { font-size: 16px; font-weight: 600; line-height: 1.4; flex: 1; margin-right: 12px; }
@@ -1806,12 +1981,23 @@ input[type="range"]::-webkit-slider-thumb {
 .detail-updates h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
 .update-item { padding: 12px; background: var(--bg-input); border-radius: var(--radius-sm); margin-bottom: 8px; }
 .update-author { font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
-.update-body { font-size: 13px; line-height: 1.5; color: var(--text); word-break: break-word; max-height: 200px; overflow-y: auto; }
+.update-body { font-size: 13px; line-height: 1.5; color: var(--text); word-break: break-word; }
+.update-body.collapsed { max-height: 200px; overflow-y: hidden; position: relative; }
+.update-body.collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, var(--bg-card)); pointer-events: none; }
+.update-toggle { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 4px 0; font-weight: 500; }
+.update-toggle:hover { text-decoration: underline; }
 .update-body h1, .update-body h2, .update-body h3, .update-body h4, .update-body h5, .update-body h6 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; color: var(--text); }
 .update-body p { margin: 4px 0; }
 .update-body ul, .update-body ol { padding-left: 18px; margin: 4px 0; }
 .update-body a { color: var(--accent); text-decoration: underline; }
 .update-body img { max-width: 100%; border-radius: var(--radius-sm); margin: 4px 0; }
+.update-body pre { white-space: pre-wrap; word-break: break-word; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-size: 12px; line-height: 1.6; max-height: 400px; overflow-y: auto; }
+.update-body table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
+.update-body th, .update-body td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
+.update-body th { background: var(--bg-input); font-weight: 600; }
+.update-body details { margin: 4px 0; }
+.update-body details summary { cursor: pointer; font-weight: 500; padding: 4px 0; }
+.update-body details summary:hover { color: var(--accent); }
 .update-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); }
 .loading-text { font-size: 13px; color: var(--text-muted); }
 .empty-text { font-size: 13px; color: var(--text-muted); }
@@ -1858,11 +2044,16 @@ input[type="range"]::-webkit-slider-thumb {
 
 <script>
 // Global error handler to show errors instead of black screen
+function _escHtml(s) {
+  var d = document.createElement('div');
+  d.appendChild(document.createTextNode(s || ''));
+  return d.innerHTML;
+}
 window.onerror = function(msg, url, line, col, err) {
-  document.getElementById('app').innerHTML = '<div style="padding:40px;font-family:monospace;"><div style="background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);border-radius:12px;padding:20px;color:#f87171;"><strong>Error:</strong> ' + msg + '<br/>Line: ' + line + '<pre style="margin-top:12px;font-size:12px;opacity:0.7;">' + (err ? err.stack : '') + '</pre></div></div>';
+  document.getElementById('app').innerHTML = '<div style="padding:40px;font-family:monospace;"><div style="background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);border-radius:12px;padding:20px;color:#f87171;"><strong>Error:</strong> ' + _escHtml(String(msg)) + '<br/>Line: ' + _escHtml(String(line)) + '<pre style="margin-top:12px;font-size:12px;opacity:0.7;">' + _escHtml(err ? err.stack : '') + '</pre></div></div>';
 };
 window.addEventListener('unhandledrejection', function(e) {
-  document.getElementById('app').innerHTML = '<div style="padding:40px;font-family:monospace;"><div style="background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);border-radius:12px;padding:20px;color:#f87171;"><strong>Unhandled error:</strong> ' + (e.reason ? (e.reason.message || e.reason) : 'Unknown') + '<pre style="margin-top:12px;font-size:12px;opacity:0.7;">' + (e.reason && e.reason.stack ? e.reason.stack : '') + '</pre></div></div>';
+  document.getElementById('app').innerHTML = '<div style="padding:40px;font-family:monospace;"><div style="background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);border-radius:12px;padding:20px;color:#f87171;"><strong>Unhandled error:</strong> ' + _escHtml(e.reason ? (e.reason.message || String(e.reason)) : 'Unknown') + '<pre style="margin-top:12px;font-size:12px;opacity:0.7;">' + _escHtml(e.reason && e.reason.stack ? e.reason.stack : '') + '</pre></div></div>';
 });
 </script>
 
@@ -1971,6 +2162,7 @@ function Icon({ name, size = 18, className = '' }) {
     chevron: html`<path d="M5 3l5 5-5 5"/>`,
     lightbulb: html`<path d="M8 1a5 5 0 00-3 9c.5.6.8 1.2 1 1.8V13h4v-1.2c.2-.6.5-1.2 1-1.8A5 5 0 008 1z"/><line x1="6" y1="13.5" x2="10" y2="13.5"/><line x1="6.5" y1="15" x2="9.5" y2="15"/>`,
     help: html`<circle cx="8" cy="8" r="6.5"/><path d="M6 6.5a2 2 0 013.7 1c0 1.5-1.7 1.5-1.7 3"/><circle cx="8" cy="12" r="0.5" fill="currentColor" stroke="none"/>`,
+    filter: html`<polygon points="1.5,2 14.5,2 9.5,8.5 9.5,13 6.5,14.5 6.5,8.5"/>`,
   };
 
   return html`
@@ -2453,18 +2645,60 @@ function priorityBadgeClass(priority) {
 
 // ── HTML Content Renderer (for Monday.com update bodies) ──
 
+function _sanitizeHtml(raw) {
+  const tmp = document.createElement('div');
+  tmp.innerHTML = raw || '';
+  tmp.querySelectorAll('script,style,iframe,object,embed,form,input').forEach(el => el.remove());
+  // Strip event-handler attributes (onerror, onclick, onload, etc.)
+  tmp.querySelectorAll('*').forEach(el => {
+    [...el.attributes].forEach(attr => {
+      if (attr.name.startsWith('on') || attr.value.trim().toLowerCase().startsWith('javascript:')) el.removeAttribute(attr.name);
+    });
+  });
+  return tmp.innerHTML;
+}
 function HtmlContent({ html: content, className }) {
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current) {
-      ref.current.innerHTML = content || '';
-      // Sanitize: remove dangerous elements
-      ref.current.querySelectorAll('script,style,iframe,object,embed,form,input').forEach(el => el.remove());
+      ref.current.innerHTML = _sanitizeHtml(content);
     }
   }, [content]);
   return html`<div ref=${ref} class=${className || ''}></div>`;
 }
 
+// ── Collapsible update body ──
+
+function CollapsibleUpdate({ html: content }) {
+  const ref = useRef(null);
+  const [collapsed, setCollapsed] = useState(true);
+  const [needsCollapse, setNeedsCollapse] = useState(false);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = _sanitizeHtml(content);
+      // Check if content exceeds collapse threshold
+      requestAnimationFrame(() => {
+        if (ref.current && ref.current.scrollHeight > 220) {
+          setNeedsCollapse(true);
+        } else {
+          setNeedsCollapse(false);
+          setCollapsed(false);
+        }
+      });
+    }
+  }, [content]);
+
+  return html`
+    <div ref=${ref} class=${'update-body' + (needsCollapse && collapsed ? ' collapsed' : '')}></div>
+    ${needsCollapse ? html`
+      <button class="update-toggle" onClick=${() => setCollapsed(!collapsed)}>
+        ${collapsed ? 'Show more ▾' : 'Show less ▴'}
+      </button>
+    ` : null}
+  `;
+}
+
 // ── Update Item with threaded replies ──
 
 function UpdateItemWithReplies({ update }) {
@@ -2503,7 +2737,7 @@ function UpdateItemWithReplies({ update }) {
       <div class="update-author" style="font-size:11px;font-weight:600;color:var(--accent);margin-bottom:4px;">
         ${update.creator_name || (update.creator && update.creator.name) || 'system'}
       </div>
-      <${HtmlContent} html=${update.body || update.text_body || ''} className="update-body" />
+      <${CollapsibleUpdate} html=${update.body || update.text_body || ''} />
       <div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px;">
         <div class="update-time" style="font-size:11px;color:var(--text-muted);font-family:var(--font-mono);">
           ${timeAgo(update.created_at)}
@@ -2548,16 +2782,113 @@ function UpdateItemWithReplies({ update }) {
 
 // ── Updates Header (sort toggle) ──
 
-function UpdatesHeader({ count, sortNewest, onToggle }) {
+function CommentBox({ itemId, onPosted, compact = false }) {
+  const [text, setText] = useState('');
+  const [posting, setPosting] = useState(false);
+
+  const post = async () => {
+    if (!text.trim() || posting) return;
+    setPosting(true);
+    try {
+      await api('POST', '/api/board/items/' + itemId + '/updates', { body: text.trim(), creator_name: 'UI User' });
+      setText('');
+      if (onPosted) onPosted();
+    } catch (e) { console.error('Comment failed:', e); }
+    setPosting(false);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) post();
+  };
+
   return html`
-    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:8px;">
-      <h4 style="margin:0;font-size:13px;font-weight:600;">Updates${count > 0 ? ' (' + count + ')' : ''}</h4>
-      ${count > 1 ? html`
-        <button onClick=${onToggle}
-                style="font-size:11px;padding:2px 8px;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:var(--bg-input);color:var(--text-secondary);font-family:var(--font-sans);">
-          ${sortNewest ? 'Newest first \u25BC' : 'Oldest first \u25B2'}
+    <div style=${'padding:' + (compact ? '8px 0' : '12px 0') + ';'}>
+      <textarea value=${text} onInput=${(e) => setText(e.target.value)} onKeyDown=${handleKeyDown}
+                style=${'width:100%;height:' + (compact ? '44px' : '60px') + ';padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--font-sans);resize:vertical;'}
+                placeholder="Write a comment... (Ctrl+Enter to post)"></textarea>
+      <div style="display:flex;justify-content:flex-end;margin-top:6px;">
+        <button onClick=${post} disabled=${posting || !text.trim()}
+                style="padding:4px 14px;border:none;border-radius:var(--radius-xs);background:var(--accent);color:#0f1219;font-size:12px;font-weight:600;cursor:pointer;opacity:${posting || !text.trim() ? '0.5' : '1'};">
+          ${posting ? 'Posting...' : 'Post'}
         </button>
-      ` : null}
+      </div>
+    </div>
+  `;
+}
+
+function UpdatesHeader({ count, sortNewest, onToggle, itemId, onPosted }) {
+  useEffect(() => {
+    const c = document.getElementById('updates-header-wrap');
+    if (!c || !itemId || c.querySelector('.top-comment-wrap')) return;
+    const wrap = document.createElement('div');
+    wrap.className = 'top-comment-wrap';
+    wrap.style.cssText = 'margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border);';
+    const ta = document.createElement('textarea');
+    ta.style.cssText = 'width:100%;height:44px;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--font-sans);resize:vertical;';
+    ta.placeholder = 'Write a comment...';
+    const row = document.createElement('div');
+    row.style.cssText = 'display:flex;justify-content:flex-end;margin-top:6px;';
+    const btn = document.createElement('button');
+    btn.textContent = 'Post';
+    btn.style.cssText = 'padding:4px 14px;border:none;border-radius:4px;background:var(--accent);color:#0f1219;font-size:12px;font-weight:600;cursor:pointer;';
+    btn.onclick = async () => {
+      const body = ta.value.trim();
+      if (!body) return;
+      btn.disabled = true; btn.textContent = 'Posting...';
+      try {
+        await api('POST', '/api/board/items/' + itemId + '/updates', { body, creator_name: 'UI User' });
+        ta.value = '';
+        if (onPosted) onPosted();
+      } catch (e) { console.error(e); }
+      btn.disabled = false; btn.textContent = 'Post';
+    };
+    row.appendChild(btn);
+    wrap.appendChild(ta);
+    wrap.appendChild(row);
+    c.insertBefore(wrap, c.firstChild);
+  }, [itemId]);
+  return html`
+    <div id="updates-header-wrap" style="margin-bottom:8px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:8px;">
+        <h4 style="margin:0;font-size:13px;font-weight:600;">Updates${count > 0 ? ' (' + count + ')' : ''}</h4>
+        ${count > 1 ? html`
+          <button onClick=${onToggle}
+                  style="font-size:11px;padding:2px 8px;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:var(--bg-input);color:var(--text-secondary);font-family:var(--font-sans);">
+            ${sortNewest ? 'Newest first \u25BC' : 'Oldest first \u25B2'}
+          </button>
+        ` : null}
+      </div>
+    </div>
+  `;
+}
+
+// ── Top Comment Box for task detail ──
+
+function TopCommentBox({ itemId, onPosted }) {
+  const textRef = useRef(null);
+  const [posting, setPosting] = useState(false);
+  const post = async () => {
+    const ta = textRef.current;
+    const body = ta ? ta.value.trim() : '';
+    if (!body || posting) return;
+    setPosting(true);
+    try {
+      await api('POST', '/api/board/items/' + itemId + '/updates', { body: body, creator_name: 'UI User' });
+      if (ta) ta.value = '';
+      if (onPosted) onPosted();
+    } catch (e) { console.error('Comment failed:', e); }
+    setPosting(false);
+  };
+  return html`
+    <div style="padding:8px 0;border-bottom:1px solid var(--border);margin-bottom:8px;">
+      <textarea ref=${textRef}
+                style="width:100%;height:44px;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--font-sans);resize:vertical;"
+                placeholder="Write a comment..."></textarea>
+      <div style="display:flex;justify-content:flex-end;margin-top:6px;">
+        <button onClick=${post} disabled=${posting}
+                style="padding:4px 14px;border:none;border-radius:var(--radius-xs);background:var(--accent);color:#0f1219;font-size:12px;font-weight:600;cursor:pointer;">
+          ${posting ? 'Posting...' : 'Post'}</button>
+      </div>
     </div>
   `;
 }
@@ -2569,6 +2900,17 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
   const [loadingUpdates, setLoadingUpdates] = useState(true);
   const [sortNewest, setSortNewest] = useState(true);
   const sidebarRef = useRef(null);
+  const topCommentRef = useRef(null);
+
+  const refreshUpdates = useCallback(() => {
+    if (!item) return;
+    api('GET', '/api/board/items/' + item.id + '/updates')
+      .then(data => {
+        const list = Array.isArray(data) ? data : (data.updates || data.data || []);
+        setUpdates(list);
+      })
+      .catch(() => setUpdates([]));
+  }, [item && item.id]);
 
   useEffect(() => {
     if (!item) return;
@@ -2580,6 +2922,44 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
       })
       .catch(() => setUpdates([]))
       .finally(() => setLoadingUpdates(false));
+    const interval = setInterval(refreshUpdates, 10000);
+    return () => clearInterval(interval);
+  }, [item && item.id]);
+
+  useEffect(() => {
+    const area = document.getElementById('top-comment-area');
+    if (!area || !item) return;
+    area.innerHTML = '';
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = 'padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);';
+    const ta = document.createElement('textarea');
+    ta.style.cssText = 'width:100%;height:44px;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--font-sans);resize:vertical;';
+    ta.placeholder = 'Write a comment...';
+    const btnRow = document.createElement('div');
+    btnRow.style.cssText = 'display:flex;justify-content:flex-end;margin-top:6px;';
+    const btn = document.createElement('button');
+    btn.textContent = 'Post';
+    btn.style.cssText = 'padding:4px 14px;border:none;border-radius:4px;background:var(--accent);color:#0f1219;font-size:12px;font-weight:600;cursor:pointer;';
+    btn.onclick = async () => {
+      const body = ta.value.trim();
+      if (!body) return;
+      btn.disabled = true;
+      btn.textContent = 'Posting...';
+      try {
+        await api('POST', '/api/board/items/' + item.id + '/updates', { body: body, creator_name: 'UI User' });
+        ta.value = '';
+        refreshUpdates();
+      } catch (e) { console.error('Comment failed:', e); }
+      btn.disabled = false;
+      btn.textContent = 'Post';
+    };
+    const onKeyDown = (e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) btn.click(); };
+    ta.addEventListener('keydown', onKeyDown);
+    btnRow.appendChild(btn);
+    wrapper.appendChild(ta);
+    wrapper.appendChild(btnRow);
+    area.appendChild(wrapper);
+    return () => { ta.removeEventListener('keydown', onKeyDown); };
   }, [item && item.id]);
 
   useEffect(() => {
@@ -2672,7 +3052,7 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
         <div class="detail-value">${item.parent_epic ? '#' + item.parent_epic : '\u2014'}</div>
       </div>
       <div class="detail-updates">
-        <${UpdatesHeader} count=${updates.length} sortNewest=${sortNewest} onToggle=${() => setSortNewest(!sortNewest)} />
+        <${UpdatesHeader} count=${updates.length} sortNewest=${sortNewest} onToggle=${() => setSortNewest(!sortNewest)} itemId=${item.id} onPosted=${refreshUpdates} />
         ${loadingUpdates ? html`<div class="loading-text">Loading updates...</div>` :
           sortedUpdates.length === 0 ? html`<div class="empty-text">No updates yet</div>` :
           sortedUpdates.map((u, i) => html`
@@ -2680,39 +3060,8 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
           `)
         }
       </div>
-      <div style="border-top:1px solid var(--border);padding:12px 24px 16px;">
-        <textarea id="detail-reply-input"
-                  style="width:100%;height:60px;padding:10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--font-sans);resize:vertical;"
-                  placeholder="Write a comment..."></textarea>
-        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:8px;">
-          <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--text-muted);">
-            <input type="file" id="detail-reply-file" style="display:none;" />
-            <span style="padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--bg-input);">Attach File</span>
-          </label>
-          <button style="padding:4px 14px;border:none;border-radius:var(--radius-xs);background:var(--accent);color:#0f1219;font-size:13px;font-weight:600;cursor:pointer;"
-                  onClick=${async () => {
-                    const ta = document.getElementById('detail-reply-input');
-                    const fileInput = document.getElementById('detail-reply-file');
-                    const body = ta ? ta.value.trim() : '';
-                    if (!body && !(fileInput && fileInput.files && fileInput.files.length)) return;
-                    try {
-                      if (body) {
-                        await api('POST', '/api/board/items/' + item.id + '/updates', { body, creator_name: 'UI User' });
-                      }
-                      if (fileInput && fileInput.files && fileInput.files.length) {
-                        const fd = new FormData();
-                        fd.append('file', fileInput.files[0]);
-                        await fetch('/api/board/items/' + item.id + '/attachments', { method: 'POST', body: fd });
-                        fileInput.value = '';
-                      }
-                      if (ta) ta.value = '';
-                      // Reload updates
-                      const data = await api('GET', '/api/board/items/' + item.id + '/updates');
-                      const list = Array.isArray(data) ? data : (data.updates || data.data || []);
-                      setUpdates(list);
-                    } catch (e) { console.error('Reply failed:', e); }
-                  }}>Post</button>
-        </div>
+      <div style="border-top:1px solid var(--border);padding:0 24px 16px;">
+        <${CommentBox} itemId=${item.id} onPosted=${refreshUpdates} />
       </div>
     </aside>
   `;
@@ -2845,6 +3194,10 @@ function BoardPage({ selectedProject }) {
   const [dragId, setDragId] = useState(null);
   const [selectedItem, setSelectedItem] = useState(null);
   const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [filters, setFilters] = useState({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' });
+  const [columnSorts, setColumnSorts] = useState({});
 
   const fetchItems = useCallback(() => {
     setLoading(true);
@@ -2856,7 +3209,17 @@ function BoardPage({ selectedProject }) {
 
   // Re-fetch whenever the selected project changes — each project
   // has its own SQLite board on the server.
-  useEffect(() => { fetchItems(); }, [selectedProject]);
+  // Also poll every 10s for live updates from the daemon.
+  useEffect(() => {
+    fetchItems();
+    const interval = setInterval(() => {
+      // Silent refresh — don't show loading spinner on polls
+      api('GET', '/api/board/items')
+        .then(data => setItems(data.items || []))
+        .catch(() => {});
+    }, 10000);
+    return () => clearInterval(interval);
+  }, [selectedProject]);
 
   // Sync scroll thumb position with kanban scroll + drag support
   useEffect(() => {
@@ -2947,7 +3310,7 @@ function BoardPage({ selectedProject }) {
       document.removeEventListener('mousemove', onKanbanMouseMove);
       document.removeEventListener('mouseup', onKanbanMouseUp);
     };
-  });
+  }, []);
 
   const deleteItem = async (id) => {
     try {
@@ -2988,6 +3351,69 @@ function BoardPage({ selectedProject }) {
     } catch (err) { setError(err.message); }
   };
 
+  // ── Filtering logic ──
+  const filteredItems = items.filter(item => {
+    // Search: case-insensitive substring, minimum 2 chars
+    if (searchTerm.length >= 2) {
+      const term = searchTerm.toLowerCase();
+      const name = (item.name || item.title || '').toLowerCase();
+      if (!name.includes(term)) return false;
+    }
+    // Priority filter
+    if (filters.priority && (item.priority || '').toLowerCase() !== filters.priority.toLowerCase()) return false;
+    // Task type filter
+    if (filters.taskType && (item.task_type || '') !== filters.taskType) return false;
+    // Project filter (only when viewing all projects)
+    if (filters.project && (item.project_id || '') !== filters.project) return false;
+    // Parent epic filter
+    if (filters.parentEpic && String(item.parent_epic || '') !== filters.parentEpic) return false;
+    // Date range filter
+    if (filters.dateRange) {
+      const d = new Date(item.created_at || item.updated_at);
+      const now = new Date();
+      if (filters.dateRange === 'today') {
+        if (d.toDateString() !== now.toDateString()) return false;
+      } else if (filters.dateRange === 'week') {
+        const weekAgo = new Date(now); weekAgo.setDate(weekAgo.getDate() - 7);
+        if (d < weekAgo) return false;
+      } else if (filters.dateRange === 'month') {
+        const monthAgo = new Date(now); monthAgo.setMonth(monthAgo.getMonth() - 1);
+        if (d < monthAgo) return false;
+      }
+    }
+    return true;
+  });
+
+  // Active filter count
+  const activeFilterCount = [filters.priority, filters.taskType, filters.project, filters.dateRange, filters.parentEpic].filter(Boolean).length;
+
+  // ── Column sorting ──
+  const PRIORITY_ORDER = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3, '': 4 };
+  const sortColumnItems = (colItems, mode) => {
+    if (!mode) return colItems; // default: keep API order (newest first)
+    const sorted = [...colItems];
+    if (mode === 'priority') {
+      sorted.sort((a, b) => (PRIORITY_ORDER[a.priority || ''] ?? 4) - (PRIORITY_ORDER[b.priority || ''] ?? 4));
+    } else if (mode === 'name') {
+      sorted.sort((a, b) => (a.name || a.title || '').localeCompare(b.name || b.title || ''));
+    }
+    return sorted;
+  };
+
+  const cycleSort = (colId) => {
+    setColumnSorts(prev => {
+      const current = prev[colId] || '';
+      const next = current === '' ? 'priority' : current === 'priority' ? 'name' : '';
+      const copy = { ...prev };
+      if (next) copy[colId] = next; else delete copy[colId];
+      return copy;
+    });
+  };
+
+  // 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);
+
   if (loading) return html`<${SkeletonLoader} type="cards" />`;
 
   if (items.length === 0) {
@@ -3020,8 +3446,9 @@ function BoardPage({ selectedProject }) {
     `;
   }
 
-  const totalItems = items.length;
-  const activeItems = items.filter(i => i.status !== 'Done').length;
+  const totalItems = filteredItems.length;
+  const activeItems = filteredItems.filter(i => i.status !== 'Done').length;
+  const isFiltered = searchTerm.length >= 2 || activeFilterCount > 0;
 
   return html`
     <div class="page-content">
@@ -3032,19 +3459,86 @@ function BoardPage({ selectedProject }) {
 
       ${error && html`<div class="error-msg">${error}</div>`}
 
-      <div class="board-stats-bar">
-        <span class="stat-label">Board</span>
-        <span class="stat-item"><strong>${totalItems}</strong> total</span>
-        <span class="stat-item"><strong>${activeItems}</strong> active</span>
-      </div>
+      <div class="board-header-row">
+        <div class="board-stats-bar">
+          <span class="stat-label">Board</span>
+          <span class="stat-item"><strong>${totalItems}</strong>${isFiltered ? '/' + items.length : ''} total</span>
+          <span class="stat-item"><strong>${activeItems}</strong> active</span>
+        </div>
+
+        <div class="board-search-wrap">
+          <input type="text" placeholder="Search tasks..." value=${searchTerm} onInput=${(e) => setSearchTerm(e.target.value)} />
+          ${searchTerm && html`<button class="board-search-clear" onClick=${() => setSearchTerm('')}>\u00d7</button>`}
+        </div>
+
+        <button class=${'filter-toggle' + (filtersOpen || activeFilterCount > 0 ? ' active' : '')} onClick=${() => setFiltersOpen(v => !v)}>
+          <${Icon} name="filter" size=${13} />
+          Filters
+          ${activeFilterCount > 0 && html`<span class="filter-active-count">${activeFilterCount}</span>`}
+        </button>
 
-      <div style="margin-bottom:20px;">
         <button class="btn btn-primary" onClick=${() => setShowCreateDialog(true)}>
           <${Icon} name="plus" size=${14} />
           New Task
         </button>
       </div>
 
+      ${filtersOpen && html`
+        <div class="board-filter-panel">
+          <div class="filter-group">
+            <label>Priority</label>
+            <select value=${filters.priority} onChange=${(e) => setFilters(f => ({...f, priority: e.target.value}))}>
+              <option value="">All</option>
+              <option value="Critical">Critical</option>
+              <option value="High">High</option>
+              <option value="Medium">Medium</option>
+              <option value="Low">Low</option>
+            </select>
+          </div>
+          <div class="filter-group">
+            <label>Type</label>
+            <select value=${filters.taskType} onChange=${(e) => setFilters(f => ({...f, taskType: e.target.value}))}>
+              <option value="">All</option>
+              <option value="code">code</option>
+              <option value="epic">epic</option>
+              <option value="deep-planning">deep-planning</option>
+              <option value="infra-plan">infra-plan</option>
+              <option value="infrastructure">infrastructure</option>
+            </select>
+          </div>
+          <div class="filter-group">
+            <label>Date</label>
+            <select value=${filters.dateRange} onChange=${(e) => setFilters(f => ({...f, dateRange: e.target.value}))}>
+              <option value="">Any time</option>
+              <option value="today">Today</option>
+              <option value="week">This week</option>
+              <option value="month">This month</option>
+            </select>
+          </div>
+          ${selectedProject === 'all' && uniqueProjects.length > 0 && html`
+            <div class="filter-group">
+              <label>Project</label>
+              <select value=${filters.project} onChange=${(e) => setFilters(f => ({...f, project: e.target.value}))}>
+                <option value="">All</option>
+                ${uniqueProjects.map(p => html`<option key=${p} value=${p}>${p}</option>`)}
+              </select>
+            </div>
+          `}
+          ${uniqueEpics.length > 0 && html`
+            <div class="filter-group">
+              <label>Epic</label>
+              <select value=${filters.parentEpic} onChange=${(e) => setFilters(f => ({...f, parentEpic: e.target.value}))}>
+                <option value="">All</option>
+                ${uniqueEpics.map(ep => html`<option key=${ep} value=${ep}>${ep}</option>`)}
+              </select>
+            </div>
+          `}
+          ${activeFilterCount > 0 && html`
+            <button class="filter-clear-link" onClick=${() => setFilters({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' })}>Clear all</button>
+          `}
+        </div>
+      `}
+
       <div class="kanban-wrapper">
       <div class="kanban-scroll-bar">
         <button class="kanban-scroll-btn" onClick=${() => {
@@ -3068,19 +3562,21 @@ function BoardPage({ selectedProject }) {
       </div>
       <div class="kanban">
         ${KANBAN_COLUMNS.map(col => {
-          const colItems = items.filter(i => {
+          const rawColItems = filteredItems.filter(i => {
             if (col.id === 'New') return !i.status || i.status === 'New' || i.status === '';
             if (i.status === col.id) return true;
             if (col.also && col.also.includes(i.status)) return true;
             return false;
           });
+          const colItems = sortColumnItems(rawColItems, columnSorts[col.id] || '');
+          const sortMode = columnSorts[col.id] || '';
           return html`
             <div class="kanban-column" key=${col.id}
                  onDragOver=${onDragOver}
                  onDragLeave=${onDragLeave}
                  onDrop=${e => onDrop(e, col.id)}>
-              <div class="kanban-column-header" style=${'--col-color: ' + col.color} title=${col.tooltip}>
-                <span>${col.label}</span>
+              <div class="kanban-column-header" style=${'--col-color: ' + col.color} title=${col.tooltip} onClick=${() => cycleSort(col.id)}>
+                <span>${col.label}${sortMode && html`<span class="sort-indicator">${sortMode === 'priority' ? '\u25BC' : '\u25B2'}</span>`}</span>
                 <span class=${'kanban-count' + (colItems.length === 0 ? ' kanban-count-zero' : '')}>${colItems.length}</span>
               </div>
               <div class="kanban-items">
@@ -3101,6 +3597,7 @@ function BoardPage({ selectedProject }) {
                         ${item.parent_epic && html`<span class="card-badge badge-epic">epic:${item.parent_epic}</span>`}
                         ${item.priority && html`<span class=${'card-badge ' + priorityBadgeClass(item.priority)}>${item.priority}</span>`}
                         ${item.task_type && html`<span class="card-badge badge-type">${item.task_type}</span>`}
+                        ${selectedProject === 'all' && item.project_id && html`<span class="card-badge badge-project">${item.project_id}</span>`}
                         <span class="card-time">${timeAgo(item.updated_at || item.created_at)}</span>
                       </div>
                     </div>
@@ -3122,11 +3619,12 @@ function BoardPage({ selectedProject }) {
 // Runs Page
 // ================================================================
 
-function stageLabel(stage) {
+function stageLabel(stage, extra) {
+  // If prod verified, show that regardless of checkpoint stage
+  if (extra && extra.prodVerified) return { label: '\u2705 Prod Verified', cls: 'badge-prod-verified' };
   if (!stage || typeof stage !== 'string') return { label: 'Unknown', cls: 'badge-muted' };
   const s = stage.toLowerCase();
-  if (s === 'done') return { label: 'Done', cls: 'badge-success' };
-  if (s === 'ship') return { label: 'Shipped', cls: 'badge-success' };
+  if (s === 'done' || s === 'ship') return { label: 'Shipped', cls: 'badge-success' };
   if (s.includes('build') || (s.includes('verify') && !s.includes('prod'))) return { label: 'Building', cls: 'badge-warning' };
   if (s.includes('awaiting') || s.includes('waiting') || s.includes('approval')) return { label: 'Awaiting Approval', cls: 'badge-info' };
   if (s.includes('spec') || s.includes('phase1')) return { label: 'Spec Phase', cls: 'badge-info' };
@@ -3241,7 +3739,21 @@ function RunsPage({ selectedProject }) {
       .finally(() => setLoading(false));
   };
 
-  useEffect(() => { fetchRuns(); }, []);
+  useEffect(() => {
+    fetchRuns();
+    const interval = setInterval(() => {
+      api('GET', '/api/runs')
+        .then(data => {
+          const list = data.runs || [];
+          setRuns(list);
+          const pins = {};
+          for (const r of list) pins[r.id] = !!r.pinned;
+          setPinnedIds(pins);
+        })
+        .catch(() => {});
+    }, 15000);
+    return () => clearInterval(interval);
+  }, []);
 
   const togglePin = async (e, runId) => {
     e.stopPropagation();
@@ -3313,7 +3825,7 @@ function RunsPage({ selectedProject }) {
                   const cp = run.checkpoint || {};
                   const hist = Array.isArray(cp.satisfaction_history) ? cp.satisfaction_history : [];
                   const satisfaction = hist.length > 0 ? hist[hist.length - 1] : null;
-                  const stage = stageLabel(cp.current_stage);
+                  const stage = stageLabel(cp.current_stage, { prodVerified: run.prodVerified });
                   const taskName = run.taskName || run.manifest?.task_description || run.manifest?.item_name || '';
                   const projectName = run.projectId || run.manifest?.project_id || '';
                   const shortId = run.id.replace('run-', '').slice(-6);
@@ -3321,7 +3833,7 @@ function RunsPage({ selectedProject }) {
                   const isPinned = !!pinnedIds[run.id];
 
                   return html`
-                    <tr key=${run.id} style="cursor:pointer" onClick=${() => toggleDetail(run.id)}>
+                    <tr key=${run.id} style=${'cursor:pointer;' + (run.prodVerified ? 'border-left:3px solid #34d399;' : '')} onClick=${() => toggleDetail(run.id)}>
                       <td class="mono" title=${run.id} style="display:flex;align-items:center;gap:4px;">
                         <button
                           style=${{background:'none',border:'none',cursor:'pointer',padding:'0 2px',fontSize:'13px',lineHeight:'1',color:isPinned ? 'var(--accent)' : 'var(--text-muted)',opacity: isPinned ? 1 : 0.5,flexShrink:0}}
@@ -4290,11 +4802,42 @@ function SettingsPage() {
       .finally(() => setLoading(false));
   }, []);
 
-  const saveConfig = async () => {
+  const saveConfig = async (forceWrite = false) => {
     try {
       setSaving(true);
       setError(null);
-      const result = await api('PATCH', '/api/config', config);
+      const body = forceWrite ? { ...config, force: true } : config;
+      const result = await api('PATCH', '/api/config', body);
+
+      // Threshold safety check (feature #7): server may return a warning
+      // payload instead of writing. Prompt the user and retry with force
+      // if they accept.
+      if (result && result.confirm_required && result.stranded_runs) {
+        const lines = result.stranded_runs.map(r =>
+          '• ' + r.run_id + ' (best: ' + (r.best_satisfaction * 100).toFixed(0) + '%)'
+        ).join('\n');
+        const oldPct = ((result.old_threshold || 0) * 100).toFixed(0);
+        const newPct = (result.attempted_threshold * 100).toFixed(0);
+        const msg =
+          result.warning + '\n\n' +
+          'Stranded runs:\n' + lines + '\n\n' +
+          'Old threshold: ' + oldPct + '%\n' +
+          'New threshold: ' + newPct + '%\n\n' +
+          'Proceed anyway? (Runs below the new threshold will never converge.)';
+        if (confirm(msg)) {
+          setSaving(false);
+          return saveConfig(true);
+        } else {
+          // User cancelled — refetch config to revert the slider UI
+          setSaving(false);
+          try {
+            const original = await api('GET', '/api/config');
+            setConfig(original);
+          } catch (_) { /* ignore */ }
+          return;
+        }
+      }
+
       setConfig(result);
       setSuccess('Configuration saved');
       setTimeout(() => setSuccess(null), 3000);
@@ -4388,6 +4931,19 @@ function SettingsPage() {
             <span class="mono">${((pipeline.satisfaction_threshold || 0.85) * 100).toFixed(0)}%</span>
           </div>
         </div>
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Prod Verification Threshold</div>
+            <div class="setting-desc">Min prod satisfaction to auto-accept (0.0 - 1.0)</div>
+          </div>
+          <div class="setting-control">
+            <input type="range" min="0" max="100" step="5"
+                   value=${(pipeline.prod_accept_floor ?? 0.65) * 100}
+                   onInput=${e => updateField('pipeline.prod_accept_floor', parseInt(e.target.value) / 100)}
+                   style="width:120px" />
+            <span class="mono">${((pipeline.prod_accept_floor ?? 0.65) * 100).toFixed(0)}%</span>
+          </div>
+        </div>
         <div class="setting-row">
           <div>
             <div class="setting-label">Max Iterations</div>
@@ -5638,7 +6194,7 @@ function App() {
       <button class="mobile-menu-btn" onClick=${() => setMobileMenuOpen(!mobileMenuOpen)} aria-label="Menu">
         ${mobileMenuOpen ? '\u2715' : '\u2630'}
       </button>
-      <div class=${'sidebar-overlay' + (mobileMenuOpen ? ' open' : '')} onClick=${() => setMobileMenuOpen(false)} />
+      <div class=${'mobile-nav-overlay' + (mobileMenuOpen ? ' open' : '')} onClick=${() => setMobileMenuOpen(false)} />
       <${Sidebar} currentHash=${hash} factoryName=${factoryName} theme=${theme} onToggleTheme=${toggleTheme}
                    selectedProject=${selectedProject} onProjectChange=${setSelectedProject}
                    mobileOpen=${mobileMenuOpen} />