feat(web): add Tasks tab nav entry point and CSS column layout

- Add <button data-tab="tasks"> to the nav bar (between Stories and Stats)
- Add <div data-panel="tasks" hidden><div class="tasks-board"></div></div>
  to main as the panel container for the Tasks board
- Add .tasks-board, .tasks-column, .tasks-column-header, .tasks-column-count,
  .tasks-column-list CSS rules (mirrors .stories-* layout; 300px columns to
  accommodate task card content)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2 files changed, 56 insertions, 0 deletions

diff --git a/web/index.html b/web/index.html
index 0704cb8..d003c6a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -41,6 +41,7 @@
   </header>
   <nav class="tab-bar">
     <button class="tab active" data-tab="stories" title="Tracker">📋</button>
+    <button class="tab" data-tab="tasks" title="Tasks">📝</button>
     <button class="tab" data-tab="stats" title="Model Dashboard">📊</button>
     <button class="tab" data-tab="drops" title="Drops">📁</button>
     <button class="tab" data-tab="settings" title="Settings">⚙️</button>
@@ -57,6 +58,9 @@
         <div class="task-empty">Loading…</div>
       </div>
     </div>
+    <div data-panel="tasks" hidden>
+      <div class="tasks-board"></div>
+    </div>
     <div data-panel="drops" hidden>
       <div class="drops-panel"></div>
     </div>
diff --git a/web/style.css b/web/style.css
index a5fefb7..68b6f95 100644
--- a/web/style.css
+++ b/web/style.css
@@ -2164,6 +2164,58 @@ dialog label select:focus {
   overflow-y: auto;
 }
 
+/* Tasks board — mirrors stories-board layout, wider columns for task card content */
+.tasks-board {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
+}
+
+.tasks-column {
+  flex: 0 0 300px;
+  width: 300px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  padding: 0.625rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.tasks-column-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.tasks-column-count {
+  font-weight: 700;
+  color: var(--text);
+  background: var(--surface);
+  border-radius: 999px;
+  padding: 0 0.45em;
+  font-size: 0.7rem;
+}
+
+.tasks-column-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 40px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
 .story-card {
   cursor: grab;
 }