From 36d50b5049996064fbdcb9338e70d4f81c2e6873 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Wed, 25 Mar 2026 23:28:22 +0000
Subject: feat: add Stories UI — tab, list, new story elaborate/approve flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Stories tab (📖) with story card list, status badges, project/branch meta
- New Story modal: project picker + goal textarea + AI elaboration → plan review → approve & queue
- Story detail modal: status, project, branch, created date
- Export storyStatusLabel() and renderStoryCard() with 16 unit tests
- CSS for story cards, status badges, and modals

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/index.html | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

(limited to 'web/index.html')

diff --git a/web/index.html b/web/index.html
index 7d52458..53fbf3c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -29,6 +29,7 @@
     <button class="tab" data-tab="running" title="Running">▶️<span class="tab-count-badge" hidden></span></button>
     <button class="tab" data-tab="all" title="All">☰<span class="tab-count-badge" hidden></span></button>
     <button class="tab" data-tab="drops" title="Drops">📁</button>
+    <button class="tab" data-tab="stories" title="Stories">📖</button>
     <button class="tab" data-tab="stats" title="Stats">📊</button>
     <button class="tab" data-tab="settings" title="Settings">⚙️</button>
   </nav>
@@ -54,6 +55,7 @@
     <div data-panel="drops" hidden>
       <div class="drops-panel"></div>
     </div>
+    <div data-panel="stories" hidden></div>
     <div data-panel="stats" hidden></div>
     <div data-panel="settings" hidden>
       <p class="task-meta" style="padding:1rem">Settings coming soon.</p>
@@ -126,6 +128,36 @@
     </div>
   </dialog>
 
+  <!-- New Story modal -->
+  <dialog id="story-modal">
+    <div class="story-modal-header">
+      <h2>New Story</h2>
+      <button id="btn-close-story-modal" class="btn-close-panel" aria-label="Close">&#x2715;</button>
+    </div>
+    <div class="story-modal-body">
+      <label>Project
+        <select id="story-project"></select>
+      </label>
+      <label>Goal
+        <textarea id="story-goal" rows="4" placeholder="Describe the feature or change you want to build…"></textarea>
+      </label>
+      <button type="button" id="btn-story-elaborate" class="btn-secondary">Elaborate with AI ✦</button>
+      <div id="story-plan-area" hidden></div>
+      <div class="form-actions">
+        <button type="button" id="btn-story-approve" class="btn-primary" hidden>Approve &amp; Queue</button>
+      </div>
+    </div>
+  </dialog>
+
+  <!-- Story detail modal -->
+  <dialog id="story-detail-modal">
+    <div class="story-modal-header">
+      <h2 id="story-detail-name">Story</h2>
+      <button id="btn-close-story-detail" class="btn-close-panel" aria-label="Close">&#x2715;</button>
+    </div>
+    <div id="story-detail-body" class="story-detail-body meta-grid"></div>
+  </dialog>
+
   <script type="module" src="app.js"></script>
 </body>
 </html>
-- 
cgit v1.2.3