diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-03-25 23:28:22 +0000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-03-25 23:28:22 +0000 |
| commit | 36d50b5049996064fbdcb9338e70d4f81c2e6873 (patch) | |
| tree | 8c48a6e7986f167c0c927510f7bd65aeb2143ec6 /web/index.html | |
| parent | 053ec03306f37e354c013beb8b4baf8eae27af97 (diff) | |
feat: add Stories UI — tab, list, new story elaborate/approve flow
- 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>
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 32 |
1 files changed, 32 insertions, 0 deletions
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">✕</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 & 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">✕</button> + </div> + <div id="story-detail-body" class="story-detail-body meta-grid"></div> + </dialog> + <script type="module" src="app.js"></script> </body> </html> |