@beastmode-develeap/beastmode 0.1.213 → 0.1.214

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260509-151332-bb5cfbc";</script>
+<script>window.__BUILD_STAMP__ = "20260509-230834-09eb714";</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">
@@ -2184,6 +2184,95 @@ input[type="range"]::-webkit-slider-thumb {
 .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); }
 
+/* Sort toggle button — mirrors filter-toggle */
+.sort-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;
+  position: relative;
+}
+.sort-toggle:hover { border-color: var(--text-muted); color: var(--text); }
+.sort-toggle.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
+
+.sort-active-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  margin-left: 2px;
+}
+
+/* Sort dropdown */
+.sort-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 100;
+  min-width: 180px;
+  padding: 4px;
+}
+
+.sort-options {
+  display: flex;
+  flex-direction: column;
+}
+
+.sort-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background 0.1s;
+  width: 100%;
+  text-align: left;
+}
+.sort-option:hover { background: var(--bg-hover); color: var(--text); }
+.sort-option.active { color: var(--accent); font-weight: 600; }
+
+.sort-dir-icon {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.sort-clear {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  border-top: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  text-align: center;
+  margin-top: 4px;
+}
+.sort-clear:hover { color: var(--danger); }
+
 .view-toggle {
   display: inline-flex;
   border: 1px solid var(--border);
@@ -3852,6 +3941,7 @@ function Icon({ name, size = 18, className = '' }) {
     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"/>`,
+    'arrow-up-down': html`<path d="M4 6l4-4 4 4"/><path d="M4 10l4 4 4-4"/>`,
     costs: html`<circle cx="8" cy="8" r="6.5"/><path d="M8 3.5v1m0 7v1M6 10.5c0 .8.9 1.5 2 1.5s2-.7 2-1.5S9.1 9 8 9s-2-.7-2-1.5S6.9 6 8 6s2 .7 2 1.5"/>`,
   };
 
@@ -5895,8 +5985,7 @@ function PipelineView({
   selectedProject,
   setSelectedItem,
   deleteItem,
-  columnSorts,
-  cycleSort,
+  globalSort,
   sortColumnItems,
   costsByItem,
   envVerifyByItem,
@@ -5995,8 +6084,7 @@ function PipelineView({
               ${columns.map(colId => {
                 const meta = getColumnMeta(colId);
                 const rawColItems = laneItemList.filter(item => getItemColumn(item, columns) === colId);
-                const colItems = sortColumnItems(rawColItems, columnSorts[colId] || '');
-                const sortMode = columnSorts[colId] || '';
+                const colItems = sortColumnItems(rawColItems, globalSort);
                 return html`
                   <div class="pipeline-column"
                        data-testid=${'pipeline-col-' + colId}
@@ -6007,9 +6095,8 @@ function PipelineView({
                        onDrop=${e => onDrop(e, colId)}>
                     <div class="pipeline-column-header"
                          style=${'--col-color: ' + meta.color}
-                         title=${meta.tooltip}
-                         onClick=${() => cycleSort(colId)}>
-                      <span>${meta.label}${sortMode && html`<span class="sort-indicator">${sortMode === 'priority' ? '\u25BC' : '\u25B2'}</span>`}</span>
+                         title=${meta.tooltip}>
+                      <span>${meta.label}</span>
                       <span class=${'kanban-count' + (colItems.length === 0 ? ' kanban-count-zero' : '')}>${colItems.length}</span>
                     </div>
                     <div class="pipeline-column-items">
@@ -6260,7 +6347,14 @@ function BoardPage({ selectedProject }) {
     const allKeys = ((window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || []).map(s => s.key);
     return new Set(allKeys);
   });
-  const [columnSorts, setColumnSorts] = useState({});
+  const [globalSort, setGlobalSort] = useState(() => {
+    try {
+      const saved = localStorage.getItem('beastmode-sort-mode');
+      if (saved) return JSON.parse(saved);
+    } catch {}
+    return { field: '', direction: 'asc' };
+  });
+  const [sortOpen, setSortOpen] = useState(false);
   const [epicCollapseKey, setEpicCollapseKey] = useState(0);
   const [costsByItem, setCostsByItem] = useState({});
   const [envVerifyByItem, setEnvVerifyByItem] = useState({});
@@ -6699,6 +6793,25 @@ function BoardPage({ selectedProject }) {
     } catch {}
   }, [activeSwimlanesSet]);
 
+  // Persist sort preference to localStorage whenever it changes.
+  useEffect(() => {
+    localStorage.setItem('beastmode-sort-mode', JSON.stringify(globalSort));
+  }, [globalSort]);
+
+  // Close sort dropdown when clicking outside.
+  useEffect(() => {
+    if (!sortOpen) return;
+    const handler = (e) => {
+      const dropdown = document.querySelector('.sort-dropdown');
+      const toggle = document.querySelector('[data-testid="sort-toggle"]');
+      if (dropdown && !dropdown.contains(e.target) && toggle && !toggle.contains(e.target)) {
+        setSortOpen(false);
+      }
+    };
+    document.addEventListener('click', handler, true);
+    return () => document.removeEventListener('click', handler, true);
+  }, [sortOpen]);
+
   // Expose swimlane state for external scenario verification.
   useEffect(() => {
     const swimlanes = (window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || [];
@@ -6780,28 +6893,32 @@ function BoardPage({ selectedProject }) {
   const activeFilterCount = _baseFilterCount + (_swimlaneFilterActive ? 1 : 0);
 
   // ── Column sorting ──
+  const SORT_LABELS = {
+    priority: 'Priority',
+    name: 'Name',
+    created: 'Created',
+    updated: 'Updated',
+    status_age: 'Time in Status',
+  };
   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 sortColumnItems = (colItems, sort) => {
+    if (!sort || !sort.field) return colItems;
+    const dir = sort.direction === 'desc' ? -1 : 1;
     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 || ''));
+    if (sort.field === 'priority') {
+      sorted.sort((a, b) => dir * ((PRIORITY_ORDER[a.priority || ''] ?? 4) - (PRIORITY_ORDER[b.priority || ''] ?? 4)));
+    } else if (sort.field === 'name') {
+      sorted.sort((a, b) => dir * (a.name || a.title || '').localeCompare(b.name || b.title || ''));
+    } else if (sort.field === 'created') {
+      sorted.sort((a, b) => dir * ((a.created_at || '').localeCompare(b.created_at || '')));
+    } else if (sort.field === 'updated') {
+      sorted.sort((a, b) => dir * ((a.updated_at || '').localeCompare(b.updated_at || '')));
+    } else if (sort.field === 'status_age') {
+      sorted.sort((a, b) => dir * ((a.status_changed_at || a.updated_at || '').localeCompare(b.status_changed_at || b.updated_at || '')));
     }
     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);
@@ -6887,6 +7004,46 @@ function BoardPage({ selectedProject }) {
           ${activeFilterCount > 0 && html`<span class="filter-active-count">${activeFilterCount}</span>`}
         </button>
 
+        <div style="position: relative;">
+          <button class=${'sort-toggle' + (sortOpen || globalSort.field ? ' active' : '')}
+                  onClick=${() => setSortOpen(v => !v)}
+                  data-testid="sort-toggle">
+            <${Icon} name="arrow-up-down" size=${13} />
+            Sort
+            ${globalSort.field && html`<span class="sort-active-label">${SORT_LABELS[globalSort.field]}</span>`}
+          </button>
+          ${sortOpen && html`
+            <div class="sort-dropdown" data-testid="sort-dropdown">
+              <div class="sort-options">
+                ${Object.entries(SORT_LABELS).map(([key, label]) => html`
+                  <button key=${key}
+                          class=${'sort-option' + (globalSort.field === key ? ' active' : '')}
+                          data-testid=${'sort-option-' + key}
+                          onClick=${() => {
+                            if (globalSort.field === key) {
+                              setGlobalSort(s => ({ ...s, direction: s.direction === 'asc' ? 'desc' : 'asc' }));
+                            } else {
+                              const defaultDir = (key === 'created' || key === 'updated') ? 'desc' : 'asc';
+                              setGlobalSort({ field: key, direction: defaultDir });
+                            }
+                          }}>
+                    <span>${label}</span>
+                    ${globalSort.field === key && html`
+                      <span class="sort-dir-icon">${globalSort.direction === 'asc' ? '↑' : '↓'}</span>
+                    `}
+                  </button>
+                `)}
+              </div>
+              ${globalSort.field && html`
+                <button class="sort-clear" data-testid="sort-clear"
+                        onClick=${() => { setGlobalSort({ field: '', direction: 'asc' }); setSortOpen(false); }}>
+                  Clear sort
+                </button>
+              `}
+            </div>
+          `}
+        </div>
+
         <button class="btn btn-primary" onClick=${() => setShowCreateDialog(true)}>
           <${Icon} name="plus" size=${14} />
           New Task
@@ -6984,8 +7141,7 @@ function BoardPage({ selectedProject }) {
             selectedProject=${selectedProject}
             setSelectedItem=${setSelectedItem}
             deleteItem=${deleteItem}
-            columnSorts=${columnSorts}
-            cycleSort=${cycleSort}
+            globalSort=${globalSort}
             sortColumnItems=${sortColumnItems}
             costsByItem=${costsByItem}
             envVerifyByItem=${envVerifyByItem}
@@ -7020,15 +7176,14 @@ function BoardPage({ selectedProject }) {
             if (col.also && col.also.includes(i.status)) return true;
             return false;
           });
-          const colItems = sortColumnItems(rawColItems, columnSorts[col.id] || '');
-          const sortMode = columnSorts[col.id] || '';
+          const colItems = sortColumnItems(rawColItems, globalSort);
           return html`
             <div class="kanban-column" key=${col.id}
                  onDragOver=${e => onDragOver(e, col.id)}
                  onDragLeave=${onDragLeave}
                  onDrop=${e => onDrop(e, col.id)}>
-              <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>
+              <div class="kanban-column-header" style=${'--col-color: ' + col.color} title=${col.tooltip}>
+                <span>${col.label}</span>
                 <span class=${'kanban-count' + (colItems.length === 0 ? ' kanban-count-zero' : '')}>${colItems.length}</span>
               </div>
               <div class="kanban-items">

package/dist/web/build-commit.txt

@@ -1 +1 @@
-bb5cfbcb14116ecf6845a1f8dd4282def11ac1a5
+09eb71470e076891f6ed9304e081cc9372bad7fc

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260509-151332-bb5cfbc
+20260509-230834-09eb714

package/package.json

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