storyforge/docs/superpowers/plans/2026-03-28-workbench-pages-usability-cleanup.md

Workbench Pages Usability Cleanup Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Reduce cognitive overload across all non-dashboard workbench pages while preserving the current StoryForge UI style and business logic.

Architecture: Keep the existing single-page shell and page render functions, but add lightweight page-level tab state, restore the missing settings route, and move admin-grade sections out of user pages. Prefer small render helpers and targeted page restructuring over a full rewrite.

Tech Stack: Vanilla JavaScript SPA, static HTML, CSS, Node built-in test runner, Playwright for live verification.

---

Task 1: Add regression coverage for page routing and scope boundaries

Files:

• Create: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/tests/workbench-pages.test.mjs

• Write source-level regression tests for:

  • settings nav route exists
  • settings screen exists
  • renderAll() renders settings
  • automation page no longer renders quota / registry / admin ops
  • Agent page no longer renders quota / registry
  • discovery / production / admin pages expose page-tab interactions

Task 2: Restore settings as a real page

Files:

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/index.html

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/app.js

• Add data-screen-target="settings" to the sidebar button.

• Add a real data-screen="settings" section.

• Implement renderSettingsScreen() and include it in renderAll().

Task 3: Add shared page-tab state and event handling

Files:

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/app.js

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/styles.css

• Add page-level tab state to appState.

• Add a small helper to render page tabs consistently.

• Add click handling for select-page-tab.

Task 4: Simplify the heaviest user pages

Files:

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/app.js

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/styles.css

• Refactor renderDiscoveryScreen() to use tabs for overview / snapshots / similar.

• Refactor renderProductionScreen() to use tabs for queue / recovery / recorder / outputs.

• Refactor renderAutomationScreen() to use tabs and remove admin-grade sections.

• Refactor renderPlaybookScreen() to use tabs and remove quota / registry from the user page.

Task 5: Strengthen thin pages and compress medium pages

Files:

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/app.js

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/styles.css

• Expand renderOwnedScreen() into a usable account workbench.

• Expand renderCreditsScreen() into a readable quota page.

• Lightly tune renderProjectsScreen() and renderReviewScreen() to reduce raw data feel and repetition.

Task 6: Convert admin workbench into a tabbed control surface

Files:

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/app.js

• Modify: /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/styles.css

• Refactor renderAdminWorkbenchScreen() to use tabs for integrations / storage / agents / ops.

• Keep all system governance sections here instead of user pages.

Task 7: Verify locally and on the NAS page

Files:

• None

• Run node --test /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/tests/dashboard-home.test.mjs /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/tests/workbench-pages.test.mjs

• Run node --check /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4/assets/app.js

• Run bash /Users/kris/code/StoryForge-gitea/scripts/check_repo_baseline.sh

• Redeploy the NAS frontend if needed.

• Re-check the key pages in a real browser and confirm no new console errors.