From 166e4c84241450df8fb7a974b300769a8ff6bc49 Mon Sep 17 00:00:00 2001
From: "Claude (Chronicler #83 - The Compiler)" <claude@firefrostgaming.com>
Date: Tue, 14 Apr 2026 12:13:41 -0500
Subject: [PATCH] Task module: 7 UX features (detail panel, sort, filters,
 presets, kanban, badges)

1. Click-to-open slide-out detail panel with full task info
2. Client-side sorting (number, priority, status, updated) with localStorage
3. Toggleable filter chips for status and priority
4. Saved filter presets (Launch Fires, Code Queue, Post-Launch, All Open)
5. Kanban board view with 4 columns (Open, In Progress, Blocked, Done)
6. Session summary badge showing tasks completed today
7. Code queue badge in sidebar nav (cyan count from tags)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../arbiter-3.0/src/routes/admin/index.js     |  12 +-
 .../arbiter-3.0/src/routes/admin/tasks.js     |  15 +
 .../src/views/admin/tasks/index.ejs           | 498 ++++++++++++++++--
 services/arbiter-3.0/src/views/layout.ejs     |   7 +-
 4 files changed, 471 insertions(+), 61 deletions(-)

diff --git a/services/arbiter-3.0/src/routes/admin/index.js b/services/arbiter-3.0/src/routes/admin/index.js
index f4e28d0..d0ce6a3 100644
--- a/services/arbiter-3.0/src/routes/admin/index.js
+++ b/services/arbiter-3.0/src/routes/admin/index.js
@@ -27,9 +27,17 @@ const nodeHealthRouter = require('./node-health');
 
 router.use(requireTrinityAccess);
 
-// Make CSRF token available to all admin views
-router.use((req, res, next) => {
+// Make CSRF token and code queue badge available to all admin views
+router.use(async (req, res, next) => {
     res.locals.csrfToken = req.csrfToken();
+    try {
+        const result = await db.query(
+            `SELECT COUNT(*) as count FROM tasks WHERE 'code' = ANY(tags) AND status IN ('open', 'in_progress')`
+        );
+        res.locals.codeQueueCount = parseInt(result.rows[0].count) || 0;
+    } catch (e) {
+        res.locals.codeQueueCount = 0;
+    }
     next();
 });
 
diff --git a/services/arbiter-3.0/src/routes/admin/tasks.js b/services/arbiter-3.0/src/routes/admin/tasks.js
index 8c2e8cc..d10c3f0 100644
--- a/services/arbiter-3.0/src/routes/admin/tasks.js
+++ b/services/arbiter-3.0/src/routes/admin/tasks.js
@@ -54,11 +54,26 @@ router.get('/', async (req, res) => {
       FROM tasks
     `);
 
+    // Session summary: tasks completed today
+    const todayResult = await db.query(
+      `SELECT COUNT(*) as count FROM tasks WHERE completed_at::date = CURRENT_DATE`
+    );
+    const completedToday = parseInt(todayResult.rows[0].count) || 0;
+
+    // All tasks for kanban (unfiltered active tasks)
+    const kanbanResult = await db.query(
+      `SELECT * FROM tasks ORDER BY
+        CASE priority WHEN 'critical' THEN 1 WHEN 'high' THEN 2 WHEN 'medium' THEN 3 WHEN 'low' THEN 4 WHEN 'wish' THEN 5 END,
+        task_number`
+    );
+
     res.render('admin/tasks/index', {
       title: 'Tasks',
       currentPath: '/tasks',
       tasks: result.rows,
+      allTasks: kanbanResult.rows,
       stats: statsResult.rows[0],
+      completedToday,
       filters: { status, priority, owner, all: req.query.all },
       priorities: PRIORITIES,
       statuses: STATUSES,
diff --git a/services/arbiter-3.0/src/views/admin/tasks/index.ejs b/services/arbiter-3.0/src/views/admin/tasks/index.ejs
index 120c69e..36c3eb7 100644
--- a/services/arbiter-3.0/src/views/admin/tasks/index.ejs
+++ b/services/arbiter-3.0/src/views/admin/tasks/index.ejs
@@ -1,5 +1,28 @@
 <!-- Tasks Module — Trinity Console -->
 <!-- Chronicler #78 | April 11, 2026 -->
+<!-- Features 1-7: Code Agent | April 14, 2026 -->
+
+<style>
+  .slide-panel { transform: translateX(100%); transition: transform 0.3s ease; }
+  .slide-panel.open { transform: translateX(0); }
+  .chip { cursor:pointer; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:500; border:1px solid transparent; transition:all 0.15s; }
+  .chip.active { background:#06b6d4; color:#fff; border-color:#06b6d4; }
+  .chip.inactive { background:#374151; color:#9ca3af; border-color:#4b5563; }
+  .chip:hover { opacity:0.85; }
+  .sort-btn { cursor:pointer; font-size:11px; padding:2px 8px; border-radius:4px; transition:all 0.15s; }
+  .sort-btn.active { background:#06b6d4; color:#fff; }
+  .sort-btn.inactive { background:#374151; color:#9ca3af; }
+  .kanban-col { min-height:200px; }
+  .kanban-card { background:#2d2d2d; border:1px solid #374151; border-radius:8px; padding:10px; margin-bottom:8px; cursor:pointer; transition:border-color 0.15s; }
+  .kanban-card:hover { border-color:#06b6d4; }
+</style>
+
+<!-- Session Summary Badge -->
+<% if (completedToday > 0) { %>
+<div class="mb-4 px-4 py-2 bg-green-900/20 border border-green-700/30 rounded-lg inline-block">
+  <span class="text-green-400 text-sm font-medium">✅ <%= completedToday %> task<%= completedToday !== 1 ? 's' : '' %> completed today</span>
+</div>
+<% } %>
 
 <!-- Stats -->
 <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
@@ -25,48 +48,66 @@
   </div>
 </div>
 
-<!-- Filters + Create -->
-<div class="flex flex-wrap gap-4 mb-6 items-end">
-  <form method="GET" class="flex flex-wrap gap-3 items-end flex-1">
-    <div>
-      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Status</label>
-      <select name="status" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
-        <option value="">Active</option>
-        <% statuses.forEach(s => { %>
-          <option value="<%= s %>" <%= filters.status === s ? 'selected' : '' %>><%= s.replace('_', ' ') %></option>
-        <% }); %>
-      </select>
+<!-- View Toggle + Presets + New Task -->
+<div class="flex flex-wrap gap-3 mb-4 items-center">
+  <div class="flex bg-gray-800 rounded-md overflow-hidden">
+    <button onclick="setView('list')" id="view-list-btn" class="px-3 py-1.5 text-xs font-medium transition">📋 List</button>
+    <button onclick="setView('kanban')" id="view-kanban-btn" class="px-3 py-1.5 text-xs font-medium transition">📊 Kanban</button>
+  </div>
+
+  <div class="relative">
+    <button onclick="document.getElementById('presets-dropdown').classList.toggle('hidden')" class="bg-gray-800 text-gray-300 px-3 py-1.5 rounded-md text-xs hover:bg-gray-700 transition">
+      ⚡ Presets ▾
+    </button>
+    <div id="presets-dropdown" class="hidden absolute top-full left-0 mt-1 bg-gray-800 border border-gray-600 rounded-md shadow-lg z-20 min-w-[180px]">
+      <button onclick="applyPreset('launch-fires')" class="block w-full text-left px-3 py-2 text-xs text-gray-300 hover:bg-gray-700">🔥 Launch Fires</button>
+      <button onclick="applyPreset('code-queue')" class="block w-full text-left px-3 py-2 text-xs text-gray-300 hover:bg-gray-700">💻 Code Queue</button>
+      <button onclick="applyPreset('post-launch')" class="block w-full text-left px-3 py-2 text-xs text-gray-300 hover:bg-gray-700">🌙 Post-Launch</button>
+      <button onclick="applyPreset('all-open')" class="block w-full text-left px-3 py-2 text-xs text-gray-300 hover:bg-gray-700">📂 All Open</button>
+      <button onclick="applyPreset('clear')" class="block w-full text-left px-3 py-2 text-xs text-gray-400 hover:bg-gray-700 border-t border-gray-700">✕ Clear Filters</button>
     </div>
-    <div>
-      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Priority</label>
-      <select name="priority" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
-        <option value="">All</option>
-        <% priorities.forEach(p => { %>
-          <option value="<%= p %>" <%= filters.priority === p ? 'selected' : '' %>><%= p %></option>
-        <% }); %>
-      </select>
-    </div>
-    <div>
-      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Owner</label>
-      <select name="owner" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
-        <option value="">All</option>
-        <% owners.forEach(o => { %>
-          <option value="<%= o %>" <%= filters.owner === o ? 'selected' : '' %>><%= o %></option>
-        <% }); %>
-      </select>
-    </div>
-    <div class="flex gap-2">
-      <button type="submit" class="bg-frost text-white px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Filter</button>
-      <a href="/admin/tasks" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Reset</a>
-      <a href="/admin/tasks?all=1" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Show All</a>
-    </div>
-  </form>
-  <button onclick="document.getElementById('create-modal').style.display='flex'" class="bg-gradient-to-r from-fire to-frost text-white px-4 py-2 rounded-md text-sm hover:opacity-90 transition font-medium">
-    + New Task
-  </button>
+  </div>
+
+  <div class="ml-auto">
+    <button onclick="document.getElementById('create-modal').style.display='flex'" class="bg-gradient-to-r from-fire to-frost text-white px-4 py-1.5 rounded-md text-xs hover:opacity-90 transition font-medium">
+      + New Task
+    </button>
+  </div>
 </div>
 
-<!-- Task List -->
+<!-- Filter Chips -->
+<div class="mb-4 space-y-2">
+  <div class="flex flex-wrap items-center gap-1.5">
+    <span class="text-[10px] text-gray-500 uppercase tracking-wider mr-1">Status:</span>
+    <button onclick="toggleChip('status','all')" class="chip" data-filter="status" data-value="all">All</button>
+    <button onclick="toggleChip('status','open')" class="chip" data-filter="status" data-value="open">Open</button>
+    <button onclick="toggleChip('status','in_progress')" class="chip" data-filter="status" data-value="in_progress">In Progress</button>
+    <button onclick="toggleChip('status','blocked')" class="chip" data-filter="status" data-value="blocked">Blocked</button>
+    <button onclick="toggleChip('status','done')" class="chip" data-filter="status" data-value="done">Done</button>
+    <button onclick="toggleChip('status','obsolete')" class="chip" data-filter="status" data-value="obsolete">Obsolete</button>
+  </div>
+  <div class="flex flex-wrap items-center gap-1.5">
+    <span class="text-[10px] text-gray-500 uppercase tracking-wider mr-1">Priority:</span>
+    <button onclick="toggleChip('priority','all')" class="chip" data-filter="priority" data-value="all">All</button>
+    <button onclick="toggleChip('priority','critical')" class="chip" data-filter="priority" data-value="critical">Critical</button>
+    <button onclick="toggleChip('priority','high')" class="chip" data-filter="priority" data-value="high">High</button>
+    <button onclick="toggleChip('priority','medium')" class="chip" data-filter="priority" data-value="medium">Medium</button>
+    <button onclick="toggleChip('priority','low')" class="chip" data-filter="priority" data-value="low">Low</button>
+    <button onclick="toggleChip('priority','wish')" class="chip" data-filter="priority" data-value="wish">Wish</button>
+  </div>
+</div>
+
+<!-- Sort Controls -->
+<div class="flex flex-wrap items-center gap-1.5 mb-4" id="sort-controls">
+  <span class="text-[10px] text-gray-500 uppercase tracking-wider mr-1">Sort:</span>
+  <button onclick="setSort('task_number')" class="sort-btn" data-sort="task_number">Number</button>
+  <button onclick="setSort('priority')" class="sort-btn" data-sort="priority">Priority</button>
+  <button onclick="setSort('status')" class="sort-btn" data-sort="status">Status</button>
+  <button onclick="setSort('updated_at')" class="sort-btn" data-sort="updated_at">Updated</button>
+</div>
+
+<!-- LIST VIEW -->
+<div id="list-view">
 <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
   <table class="w-full">
     <thead>
@@ -79,26 +120,38 @@
         <th class="px-4 py-3 w-32">Actions</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+    <tbody class="divide-y divide-gray-200 dark:divide-gray-700" id="task-tbody">
       <% if (tasks.length === 0) { %>
         <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">No tasks match your filters.</td></tr>
       <% } %>
       <% tasks.forEach(task => {
-        const priColors = { critical:'bg-red-500/20 text-red-500', high:'bg-fire/20 text-fire', medium:'bg-yellow-500/20 text-yellow-500', low:'bg-blue-500/20 text-blue-400', wish:'bg-purple-500/20 text-purple-400' };
-        const staColors = { open:'bg-gray-500/20 text-gray-400', in_progress:'bg-frost/20 text-frost', blocked:'bg-red-500/20 text-red-500', done:'bg-green-500/20 text-green-500', obsolete:'bg-gray-700/20 text-gray-600' };
-        const priClass = priColors[task.priority] || 'bg-gray-500/20 text-gray-400';
-        const staClass = staColors[task.status] || 'bg-gray-500/20 text-gray-400';
+        var priColors = { critical:'bg-red-500/20 text-red-500', high:'bg-fire/20 text-fire', medium:'bg-yellow-500/20 text-yellow-500', low:'bg-blue-500/20 text-blue-400', wish:'bg-purple-500/20 text-purple-400' };
+        var staColors = { open:'bg-gray-500/20 text-gray-400', in_progress:'bg-frost/20 text-frost', blocked:'bg-red-500/20 text-red-500', done:'bg-green-500/20 text-green-500', obsolete:'bg-gray-700/20 text-gray-600' };
+        var priClass = priColors[task.priority] || 'bg-gray-500/20 text-gray-400';
+        var staClass = staColors[task.status] || 'bg-gray-500/20 text-gray-400';
+        var taskDesc = task.description || '';
+        var taskTags = task.tags || [];
+        var taskSpecPath = task.spec_path || '';
+        var taskCompletedBy = task.completed_by || '';
+        var taskCreatedAt = task.created_at ? new Date(task.created_at).toLocaleDateString() : '';
+        var taskUpdatedAt = task.updated_at ? new Date(task.updated_at).toLocaleDateString() : '';
+        var taskCompletedAt = task.completed_at ? new Date(task.completed_at).toLocaleDateString() : '';
       %>
-        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition group">
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition group task-row"
+            data-status="<%= task.status %>" data-priority="<%= task.priority %>"
+            data-task-number="<%= task.task_number %>"
+            data-updated="<%= task.updated_at || '' %>"
+            data-tags="<%= taskTags.join(',') %>"
+            data-title="<%= task.title %>">
           <td class="px-4 py-3 text-sm font-mono text-gray-500"><%= task.task_number %></td>
           <td class="px-4 py-3">
-            <div class="font-medium text-sm text-gray-200"><%= task.title %></div>
-            <% if (task.description) { %>
-              <div class="text-xs text-gray-500 mt-0.5 truncate max-w-md"><%= task.description.substring(0, 80) %><%= task.description.length > 80 ? '...' : '' %></div>
+            <div class="font-medium text-sm text-gray-200 cursor-pointer hover:text-cyan-400 transition" onclick="openDetail(<%= JSON.stringify(JSON.stringify(task)) %>)"><%= task.title %></div>
+            <% if (taskDesc) { %>
+              <div class="text-xs text-gray-500 mt-0.5 truncate max-w-md"><%= taskDesc.substring(0, 80) %><%= taskDesc.length > 80 ? '...' : '' %></div>
             <% } %>
-            <% if (task.tags && task.tags.length > 0) { %>
+            <% if (taskTags.length > 0) { %>
               <div class="flex gap-1 mt-1">
-                <% task.tags.forEach(tag => { %>
+                <% taskTags.forEach(function(tag) { %>
                   <span class="text-[9px] px-1.5 py-0.5 rounded bg-gray-700 text-gray-400"><%= tag %></span>
                 <% }); %>
               </div>
@@ -110,7 +163,7 @@
           <td class="px-4 py-3">
             <form method="POST" action="/admin/tasks/update/<%= task.id %>" class="inline">
               <select name="status" onchange="this.form.submit()" class="bg-transparent border-0 text-xs cursor-pointer <%= staClass %> rounded-full px-2 py-0.5 font-medium appearance-none">
-                <% statuses.forEach(s => { %>
+                <% statuses.forEach(function(s) { %>
                   <option value="<%= s %>" <%= task.status === s ? 'selected' : '' %> class="bg-gray-800 text-white"><%= s.replace('_', ' ') %></option>
                 <% }); %>
               </select>
@@ -119,7 +172,7 @@
           <td class="px-4 py-3">
             <form method="POST" action="/admin/tasks/update/<%= task.id %>" class="inline">
               <select name="owner" onchange="this.form.submit()" class="bg-transparent border-0 text-xs cursor-pointer text-gray-400 appearance-none">
-                <% owners.forEach(o => { %>
+                <% owners.forEach(function(o) { %>
                   <option value="<%= o %>" <%= task.owner === o ? 'selected' : '' %> class="bg-gray-800 text-white"><%= o %></option>
                 <% }); %>
               </select>
@@ -131,8 +184,8 @@
                 <input type="hidden" name="status" value="done">
                 <button type="submit" class="text-xs text-green-500 hover:text-green-400 transition opacity-0 group-hover:opacity-100">✓ Done</button>
               </form>
-            <% } else if (task.completed_by) { %>
-              <span class="text-[10px] text-gray-600"><%= task.completed_by %></span>
+            <% } else if (taskCompletedBy) { %>
+              <span class="text-[10px] text-gray-600"><%= taskCompletedBy %></span>
             <% } %>
           </td>
         </tr>
@@ -140,9 +193,102 @@
     </tbody>
   </table>
 </div>
-
 <div class="text-center text-xs text-gray-600 mt-4">
-  <%= tasks.length %> task(s) shown · Source: PostgreSQL · Also available via /tasks in Discord
+  <span id="task-count"><%= tasks.length %></span> task(s) shown · Source: PostgreSQL · Also available via /tasks in Discord
+</div>
+</div>
+
+<!-- KANBAN VIEW -->
+<div id="kanban-view" style="display:none">
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+  <% var kanbanCols = [
+    { key: 'open', label: 'Open', color: 'text-gray-400', border: 'border-gray-600' },
+    { key: 'in_progress', label: 'In Progress', color: 'text-cyan-400', border: 'border-cyan-600' },
+    { key: 'blocked', label: 'Blocked', color: 'text-red-400', border: 'border-red-600' },
+    { key: 'done', label: 'Done', color: 'text-green-400', border: 'border-green-600' }
+  ]; %>
+  <% kanbanCols.forEach(function(col) { %>
+    <div>
+      <h3 class="text-xs font-bold uppercase tracking-wider mb-3 <%= col.color %>">
+        <%= col.label %>
+        <span class="ml-1 text-gray-600">(<%= allTasks.filter(function(t) { return t.status === col.key; }).length %>)</span>
+      </h3>
+      <div class="kanban-col border-t-2 <%= col.border %> pt-3">
+        <% allTasks.filter(function(t) { return t.status === col.key; }).forEach(function(task) {
+          var kPriColors = { critical:'text-red-500', high:'text-fire', medium:'text-yellow-500', low:'text-blue-400', wish:'text-purple-400' };
+          var kPriClass = kPriColors[task.priority] || 'text-gray-400';
+        %>
+          <div class="kanban-card" onclick="openDetail(<%= JSON.stringify(JSON.stringify(task)) %>)">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-[10px] font-mono text-gray-500">#<%= task.task_number %></span>
+              <span class="text-[10px] font-medium <%= kPriClass %>"><%= task.priority %></span>
+            </div>
+            <div class="text-xs font-medium text-gray-200"><%= task.title %></div>
+            <% if (task.owner && task.owner !== 'unassigned') { %>
+              <div class="text-[10px] text-gray-500 mt-1"><%= task.owner %></div>
+            <% } %>
+          </div>
+        <% }); %>
+      </div>
+    </div>
+  <% }); %>
+</div>
+</div>
+
+<!-- Slide-Out Detail Panel -->
+<div id="detail-overlay" class="fixed inset-0 bg-black/50 z-40" style="display:none" onclick="closeDetail()"></div>
+<div id="detail-panel" class="slide-panel fixed top-0 right-0 h-full w-full max-w-md bg-darkcard border-l border-gray-700 z-50 overflow-y-auto shadow-2xl">
+  <div class="p-6">
+    <div class="flex items-center justify-between mb-6">
+      <span class="text-xs font-mono text-gray-500" id="detail-number"></span>
+      <button onclick="closeDetail()" class="text-gray-400 hover:text-white text-lg">✕</button>
+    </div>
+    <h2 class="text-lg font-bold text-white mb-4" id="detail-title"></h2>
+    <div class="flex gap-2 mb-4">
+      <span id="detail-status" class="px-2 py-0.5 text-xs rounded-full font-medium"></span>
+      <span id="detail-priority" class="px-2 py-0.5 text-xs rounded-full font-medium"></span>
+    </div>
+    <div class="space-y-4 text-sm">
+      <div>
+        <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Owner</span>
+        <span class="text-gray-300" id="detail-owner"></span>
+      </div>
+      <div>
+        <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Description</span>
+        <div class="text-gray-300 text-xs whitespace-pre-wrap" id="detail-description"></div>
+      </div>
+      <div id="detail-tags-section">
+        <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Tags</span>
+        <div id="detail-tags" class="flex flex-wrap gap-1"></div>
+      </div>
+      <div class="grid grid-cols-2 gap-4">
+        <div>
+          <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Created</span>
+          <span class="text-gray-400 text-xs" id="detail-created"></span>
+        </div>
+        <div>
+          <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Updated</span>
+          <span class="text-gray-400 text-xs" id="detail-updated"></span>
+        </div>
+      </div>
+      <div id="detail-completed-section" style="display:none">
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Completed</span>
+            <span class="text-green-400 text-xs" id="detail-completed-at"></span>
+          </div>
+          <div>
+            <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Completed By</span>
+            <span class="text-green-400 text-xs" id="detail-completed-by"></span>
+          </div>
+        </div>
+      </div>
+      <div id="detail-spec-section" style="display:none">
+        <span class="text-[10px] text-gray-500 uppercase tracking-wider block mb-1">Spec Path</span>
+        <span class="text-cyan-400 text-xs font-mono" id="detail-spec"></span>
+      </div>
+    </div>
+  </div>
 </div>
 
 <!-- Create Task Modal -->
@@ -154,7 +300,7 @@
         <div>
           <label class="block text-xs text-gray-500 mb-1">Title *</label>
           <input type="text" name="title" required
-            class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm" 
+            class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm"
             placeholder="What needs to be done?">
         </div>
         <div>
@@ -197,3 +343,241 @@
     </form>
   </div>
 </div>
+
+<script>
+// --- State ---
+var activeFilters = { status: ['all'], priority: ['all'] };
+var currentSort = localStorage.getItem('taskSort') || 'task_number';
+var currentSortDir = localStorage.getItem('taskSortDir') || 'asc';
+var currentView = localStorage.getItem('taskView') || 'list';
+
+// --- View Toggle ---
+function setView(view) {
+  currentView = view;
+  localStorage.setItem('taskView', view);
+  document.getElementById('list-view').style.display = view === 'list' ? '' : 'none';
+  document.getElementById('kanban-view').style.display = view === 'kanban' ? '' : 'none';
+  document.getElementById('view-list-btn').className = 'px-3 py-1.5 text-xs font-medium transition ' + (view === 'list' ? 'bg-cyan-500 text-white' : 'text-gray-400 hover:text-white');
+  document.getElementById('view-kanban-btn').className = 'px-3 py-1.5 text-xs font-medium transition ' + (view === 'kanban' ? 'bg-cyan-500 text-white' : 'text-gray-400 hover:text-white');
+}
+
+// --- Filter Chips ---
+function toggleChip(type, value) {
+  if (value === 'all') {
+    activeFilters[type] = ['all'];
+  } else {
+    var idx = activeFilters[type].indexOf(value);
+    // Remove 'all' if selecting specific
+    var allIdx = activeFilters[type].indexOf('all');
+    if (allIdx > -1) activeFilters[type].splice(allIdx, 1);
+    if (idx > -1) {
+      activeFilters[type].splice(idx, 1);
+      if (activeFilters[type].length === 0) activeFilters[type] = ['all'];
+    } else {
+      activeFilters[type].push(value);
+    }
+  }
+  applyFilters();
+}
+
+function applyFilters() {
+  // Update chip visuals
+  document.querySelectorAll('.chip').forEach(function(el) {
+    var filter = el.getAttribute('data-filter');
+    var value = el.getAttribute('data-value');
+    var isActive = activeFilters[filter].indexOf(value) > -1;
+    el.className = 'chip ' + (isActive ? 'active' : 'inactive');
+  });
+
+  // Filter rows
+  var rows = document.querySelectorAll('.task-row');
+  var visibleCount = 0;
+  rows.forEach(function(row) {
+    var rowStatus = row.getAttribute('data-status');
+    var rowPriority = row.getAttribute('data-priority');
+    var statusMatch = activeFilters.status.indexOf('all') > -1 || activeFilters.status.indexOf(rowStatus) > -1;
+    var priorityMatch = activeFilters.priority.indexOf('all') > -1 || activeFilters.priority.indexOf(rowPriority) > -1;
+    if (statusMatch && priorityMatch) {
+      row.style.display = '';
+      visibleCount++;
+    } else {
+      row.style.display = 'none';
+    }
+  });
+  document.getElementById('task-count').textContent = visibleCount;
+}
+
+// --- Sorting ---
+function setSort(field) {
+  if (currentSort === field) {
+    currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
+  } else {
+    currentSort = field;
+    currentSortDir = 'asc';
+  }
+  localStorage.setItem('taskSort', currentSort);
+  localStorage.setItem('taskSortDir', currentSortDir);
+  applySorting();
+}
+
+function applySorting() {
+  // Update button visuals
+  document.querySelectorAll('.sort-btn').forEach(function(el) {
+    var sort = el.getAttribute('data-sort');
+    var isActive = currentSort === sort;
+    el.className = 'sort-btn ' + (isActive ? 'active' : 'inactive');
+    if (isActive) {
+      el.textContent = el.textContent.replace(/ [▲▼]/, '') + (currentSortDir === 'asc' ? ' ▲' : ' ▼');
+    } else {
+      el.textContent = el.textContent.replace(/ [▲▼]/, '');
+    }
+  });
+
+  var tbody = document.getElementById('task-tbody');
+  var rows = Array.from(tbody.querySelectorAll('.task-row'));
+  var priOrder = { critical:1, high:2, medium:3, low:4, wish:5 };
+  var staOrder = { in_progress:1, blocked:2, open:3, done:4, obsolete:5 };
+
+  rows.sort(function(a, b) {
+    var aVal, bVal;
+    if (currentSort === 'task_number') {
+      aVal = parseInt(a.getAttribute('data-task-number'));
+      bVal = parseInt(b.getAttribute('data-task-number'));
+    } else if (currentSort === 'priority') {
+      aVal = priOrder[a.getAttribute('data-priority')] || 99;
+      bVal = priOrder[b.getAttribute('data-priority')] || 99;
+    } else if (currentSort === 'status') {
+      aVal = staOrder[a.getAttribute('data-status')] || 99;
+      bVal = staOrder[b.getAttribute('data-status')] || 99;
+    } else if (currentSort === 'updated_at') {
+      aVal = a.getAttribute('data-updated') || '';
+      bVal = b.getAttribute('data-updated') || '';
+      if (aVal < bVal) return currentSortDir === 'asc' ? -1 : 1;
+      if (aVal > bVal) return currentSortDir === 'asc' ? 1 : -1;
+      return 0;
+    }
+    var diff = aVal - bVal;
+    return currentSortDir === 'asc' ? diff : -diff;
+  });
+
+  rows.forEach(function(row) { tbody.appendChild(row); });
+}
+
+// --- Presets ---
+function applyPreset(name) {
+  document.getElementById('presets-dropdown').classList.add('hidden');
+  if (name === 'launch-fires') {
+    activeFilters = { status: ['open'], priority: ['critical', 'high'] };
+  } else if (name === 'code-queue') {
+    activeFilters = { status: ['all'], priority: ['all'] };
+    applyFilters();
+    // Further filter by tags containing 'code' or title containing 'Code'
+    document.querySelectorAll('.task-row').forEach(function(row) {
+      var tags = row.getAttribute('data-tags') || '';
+      var title = row.getAttribute('data-title') || '';
+      if (tags.indexOf('code') === -1 && title.indexOf('Code') === -1) {
+        row.style.display = 'none';
+      }
+    });
+    updateVisibleCount();
+    return;
+  } else if (name === 'post-launch') {
+    activeFilters = { status: ['open'], priority: ['low', 'wish'] };
+  } else if (name === 'all-open') {
+    activeFilters = { status: ['open', 'in_progress', 'blocked'], priority: ['all'] };
+  } else if (name === 'clear') {
+    activeFilters = { status: ['all'], priority: ['all'] };
+  }
+  applyFilters();
+}
+
+function updateVisibleCount() {
+  var count = 0;
+  document.querySelectorAll('.task-row').forEach(function(row) {
+    if (row.style.display !== 'none') count++;
+  });
+  document.getElementById('task-count').textContent = count;
+}
+
+// --- Detail Panel ---
+function openDetail(taskJson) {
+  var task = JSON.parse(taskJson);
+  var priColors = { critical:'bg-red-500/20 text-red-500', high:'bg-fire/20 text-fire', medium:'bg-yellow-500/20 text-yellow-500', low:'bg-blue-500/20 text-blue-400', wish:'bg-purple-500/20 text-purple-400' };
+  var staColors = { open:'bg-gray-500/20 text-gray-400', in_progress:'bg-frost/20 text-frost', blocked:'bg-red-500/20 text-red-500', done:'bg-green-500/20 text-green-500', obsolete:'bg-gray-700/20 text-gray-600' };
+
+  document.getElementById('detail-number').textContent = '#' + task.task_number;
+  document.getElementById('detail-title').textContent = task.title;
+  document.getElementById('detail-owner').textContent = task.owner || 'Unassigned';
+  document.getElementById('detail-description').textContent = task.description || 'No description.';
+
+  var statusEl = document.getElementById('detail-status');
+  statusEl.textContent = (task.status || '').replace('_', ' ');
+  statusEl.className = 'px-2 py-0.5 text-xs rounded-full font-medium ' + (staColors[task.status] || '');
+
+  var priEl = document.getElementById('detail-priority');
+  priEl.textContent = task.priority || '';
+  priEl.className = 'px-2 py-0.5 text-xs rounded-full font-medium ' + (priColors[task.priority] || '');
+
+  // Tags
+  var tagsContainer = document.getElementById('detail-tags');
+  tagsContainer.innerHTML = '';
+  var tagsSection = document.getElementById('detail-tags-section');
+  if (task.tags && task.tags.length > 0) {
+    tagsSection.style.display = '';
+    task.tags.forEach(function(tag) {
+      var span = document.createElement('span');
+      span.className = 'text-[9px] px-1.5 py-0.5 rounded bg-gray-700 text-gray-400';
+      span.textContent = tag;
+      tagsContainer.appendChild(span);
+    });
+  } else {
+    tagsSection.style.display = 'none';
+  }
+
+  // Dates
+  document.getElementById('detail-created').textContent = task.created_at ? new Date(task.created_at).toLocaleString() : 'Unknown';
+  document.getElementById('detail-updated').textContent = task.updated_at ? new Date(task.updated_at).toLocaleString() : 'Unknown';
+
+  // Completed
+  var compSection = document.getElementById('detail-completed-section');
+  if (task.completed_at) {
+    compSection.style.display = '';
+    document.getElementById('detail-completed-at').textContent = new Date(task.completed_at).toLocaleString();
+    document.getElementById('detail-completed-by').textContent = task.completed_by || 'Unknown';
+  } else {
+    compSection.style.display = 'none';
+  }
+
+  // Spec path
+  var specSection = document.getElementById('detail-spec-section');
+  if (task.spec_path) {
+    specSection.style.display = '';
+    document.getElementById('detail-spec').textContent = task.spec_path;
+  } else {
+    specSection.style.display = 'none';
+  }
+
+  document.getElementById('detail-overlay').style.display = '';
+  document.getElementById('detail-panel').classList.add('open');
+}
+
+function closeDetail() {
+  document.getElementById('detail-panel').classList.remove('open');
+  document.getElementById('detail-overlay').style.display = 'none';
+}
+
+// --- Init ---
+document.addEventListener('DOMContentLoaded', function() {
+  setView(currentView);
+  applyFilters();
+  applySorting();
+
+  // Close presets dropdown when clicking outside
+  document.addEventListener('click', function(e) {
+    var dropdown = document.getElementById('presets-dropdown');
+    if (!e.target.closest('.relative')) {
+      dropdown.classList.add('hidden');
+    }
+  });
+});
+</script>
diff --git a/services/arbiter-3.0/src/views/layout.ejs b/services/arbiter-3.0/src/views/layout.ejs
index 7901486..8393b3e 100644
--- a/services/arbiter-3.0/src/views/layout.ejs
+++ b/services/arbiter-3.0/src/views/layout.ejs
@@ -102,8 +102,11 @@
                     <a href="/admin/dashboard" class="block px-4 py-2 rounded-md <%= currentPath === '/dashboard' ? 'bg-gray-200 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-800' %>">
                         📊 Dashboard
                     </a>
-                    <a href="/admin/tasks" class="block px-4 py-2 rounded-md <%= currentPath.startsWith('/tasks') ? 'bg-gray-200 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-800' %>">
-                        📋 Tasks
+                    <a href="/admin/tasks" class="flex items-center justify-between px-4 py-2 rounded-md <%= currentPath.startsWith('/tasks') ? 'bg-gray-200 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-800' %>">
+                        <span>📋 Tasks</span>
+                        <% if (typeof codeQueueCount !== 'undefined' && codeQueueCount > 0) { %>
+                            <span class="inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold text-white bg-cyan-500 rounded-full"><%= codeQueueCount %></span>
+                        <% } %>
                     </a>
                     <a href="/admin/servers" class="block px-4 py-2 rounded-md <%= currentPath.startsWith('/servers') ? 'bg-gray-200 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-800' %>">
                         🖥️ Servers