feat(webui): redesign all detail+list pages with unified design language#711
Open
nextlevelshit wants to merge 37 commits intomainfrom
Open
feat(webui): redesign all detail+list pages with unified design language#711nextlevelshit wants to merge 37 commits intomainfrom
nextlevelshit wants to merge 37 commits intomainfrom
Conversation
- Steps rendered as Fat Gantt shapes (persona linked, contract linked, dependencies, artifacts, step type icons) - Recent runs as rv2-run cards (not table) - Stats bar: step count, run count, category, skills - Quickstart dialog simplified - Replaces old DAG SVG + table layout Part of #709
- Extracted 336 lines of component CSS from run_detail.html inline <style> to static/style.css — shared by run detail, pipeline detail, and future pages - Renamed all v2- prefixed classes: v2-s → ws, v2-flow → w-flow, rv2- → wr-, etc. - Pipeline detail now uses shared shape/card styles correctly - run_detail.html reduced from 1119 to 781 lines (CSS removed) All w-* classes are now the canonical Wave component library.
PR detail: - Header with title, state badge, author, branch info - Stats bar: additions/deletions, files, commits, comments, labels - Description as rendered markdown in IO card - Checks as step shapes with status colors - Commits as compact timeline - Comments with author header + rendered markdown body - Review form with styled buttons - Related runs as wr-run cards Issue detail: - Header with title, state badge, author, assignees - Body as rendered markdown in IO card - Comments same style as PR - Related runs as wr-run cards Both pages use shared w-* CSS classes from style.css. Part of #709
All list pages now use the wr-run card component: - Pipelines: name + category badge + description + Start button - Issues: number + title + state badge + author + labels + comments - PRs: number + title + state + author + diff stats + branch - All use consistent w-head, wr-filters, wr-list styling - Tables replaced with compact cards matching runs list design Part of #709
- Personas list: card layout with model badge, adapter, description - Persona detail: w-head + w-stats + permissions grid + prompt as rendered markdown + used-by as wr-run cards - Contracts list: card layout with title, description, filename - Contract detail: w-head + w-stats + syntax-highlighted JSON schema + used-by as wr-run cards - All tables replaced with consistent wr-run card components - Total: all 10 pages from #709 now redesigned Closes #709
…es on all list pages
…body - Pipeline list: full card is clickable <a>, Start button uses stopPropagation - Issue/PR detail: body rendered directly without w-io wrapper (no box-in-box)
- Base font: 14px → 15px for readability - Pipeline detail steps: click to expand config (persona, contract, prompt) - Pipeline step config panel with linked persona/contract/sub-pipeline - Prompt rendered as markdown
…olors From automated audit (45 findings): - Badge base class: added background + color (labels were invisible) - Pipeline definition steps: new st-defined class (full opacity, not 50%) - Personas/contracts lists: neutral accent (not green completed) - Min font sizes bumped: 0.55rem→0.65rem, 0.58rem→0.65rem, 0.62rem→0.68rem - Hardcoded #1e2d3d hover color → var(--color-bg-tertiary) - Secondary tabs: slightly larger + brighter color
…te scroll - Override .markdown-body border/padding when used as page body (not cards) - Fix "1 comments" → "1 comment" (singular/plural) - Load More button styled with wr-load-more class
Critical:
- Fixed JS selector mismatch: closest('.w-s') → closest('.ws')
This was the step expansion regression — tabs/config panels couldn't
find their parent step element after the CSS rename
Infinite scroll:
- Replaced "Load more" links with scroll-triggered loading indicators
on runs, PRs, and issues list pages
- Loading spinner CSS added to style.css
- Shows spinner when scrolling near bottom, navigates to next page
Other:
- Markdown body border override working for issue/PR detail
- Light mode verified working (chromium screenshots show white bg)
Infinite scroll:
- Runs, PRs, issues lists now fetch next page async and append cards
- Loading spinner shows during fetch
- No more full-page navigation on scroll
Prompt resolution:
- Template variables in step prompts are resolved with actual run data:
{{ input }} → actual run input, {{ forge.cli_tool }} → "gh", etc.
- Remaining unresolved vars shown as inline code badges
- Prompt labeled "Prompt (resolved)" to indicate substitution
Layout:
- IN card: title + state badge on same flex line (badge doesn't orphan)
- OUT card: mirrors IN layout exactly (same flex structure)
- Tab bar: border-top added for visual alignment with card content
- Tab bar: full-width padding instead of margin (aligns with edges)
Prompt:
- Removed fake variable resolution (was hardcoding gh/github values)
- Template variables now shown as highlighted inline code: {{ input }}
- Labeled "Prompt template" (honest — not pretending to be resolved)
- Proper resolution needs server-side pipeline context injection
Pass all template variables (input, forge.*, project.*) from the
handler to the template via a JSON blob so client-side prompt rendering
resolves every variable, not just {{ input }}.
- Move IN container linked title beneath IN tag (matching OUT layout) - Align OUT container padding with IN (0.85rem horizontal) - Move "by author" inline with linked title in both IN/OUT - Move running spinner inline after step title instead of after duration - Style persona/contract links as inline code spans with hover - Contract path shown as title attribute, not click area
- Add pipeline filter dropdown to runs toolbar (server-side filtering) - Improve loading indicator: larger spinner, more vertical padding - Add wr-toolbar wrapper for status filters + controls alignment - Add wr-select styling for dropdowns matching design language
…d dialog - Add category filter buttons for pipeline grouping - Show run count per pipeline from store data - Display composition badge and disabled state - Show step count and skill badges on cards - Restyle Start button as subtle secondary action - Redesign start dialog with proper w-dialog component (header/body/footer sections, close button, form styling) - Add w-dialog CSS classes (head, body, actions, close)
- Rewrite compose page to use wr-* card system (was page-header/persona-card) - Add step flow visualization with inline monospace step IDs - Sync run dialog with pipeline overview w-dialog pattern - Update pipeline detail start dialog to w-dialog component - Fix persona/contract links to use inline code span styling - Contract path shown as title attribute
- Use wr-toolbar for issue filter alignment - Move pipeline runs section before comments in issue detail - Add w-comment-card CSS class with dimmed border and spacing - Improve loading indicator text
- Use wr-toolbar for PR filter alignment - Move pipeline runs before checks/comments/commits in PR detail - Render commits with bigger text and clickable SHA links to forge - Add Merge on GitHub button for open PRs (links to forge) - Use w-comment-card for comments (dimmed border, spacing) - Add w-section-card CSS for checks/commits/review sections
CLITool, PRTerm, PRCommand are string fields on ForgeInfo, not methods. Remove the erroneous parentheses.
… in dialogs - Add run count, last status, total tokens to issue/PR list cards - Default runs to "running", issues/PRs to "open" filter - Move "All" filter to last position across all overviews - Sort pipelines by run count (most used first) - Add adapter dropdown to all start dialogs (pipelines, compose, detail) - Add formatTokensShort template function
- Pipeline overview: show composition badge instead of category when both match, avoiding double "composition" tag - Compose overview: skip category badge when it equals "composition" - Run detail IN/OUT: reduce padding-left from 2.2rem to 0.3rem so text aligns naturally after the tag instead of floating
- Comment cards: increase padding, replace tiny arrow with "view on GitHub" pill - Issue/PR overviews: add item count to wr-toolbar controls - Issue/PR detail stats: show pipeline run count and tokens before forge metadata - wr-body/wr-meta padding: 0.4rem -> 0.45rem/0.7rem for more breathing room - wr-row2 gap: 0.5rem -> 0.6rem for better item spacing - Child runs: add left border indicator, adjust accent border-radius - Compose step flow: use flexbox gap instead of inline margin - Pipeline/compose cards: consistent margin-top on metadata row
- Fix formatTokensShort int64/int type mismatch on detail pages - Restore comments count and created date to PR stats bar - Add client-side search filter for runs list - Enrich compose pipelines with run counts from store - Add compose toolbar with pipeline count - Subtle empty states for pipeline runs sections - Stats bar: bottom border separator, more breathing room - Commit rows: extract CSS classes, alternating backgrounds - Header: flex-wrap h1 titles, back-link hover, actions alignment
Adds a search input to the pipeline overview that works alongside category filters. Both filters combine (AND logic) and the visible count updates dynamically.
Run detail: - IN/OUT containers: title beneath tag, author on separate line - Persona/contract shown as clickable code spans (ws-code-link) - Contract path shown as tooltip, schema name as visible text - Contract/ContractSchemaName fields added to StepDetail Issue/PR detail: - Pipeline Runs section moved before body content - Body wrapped in bordered container for visual distinction - Commit rows fully clickable, bigger message text (0.85rem) - Comment sections have more spacing
- Add search input to issue, PR, and pipeline list pages - Show open/closed counts in issue/PR toolbar - Pipeline Start button made subtler, run count in meta - Increase loading indicator vertical padding for visibility - Pipelines already sorted by frequency (most used first)
…close - Pipeline detail: deduplicate composition/category badges - Pipeline detail: persona/contract/sub-pipeline as ws-code-link spans - PR detail: add Merge and Close buttons (link to forge) - PR detail: review section with separator between review and actions
- Remove border-bottom from w-stats (redundant line on all detail pages) - "by author" now inline with PR title in IN/OUT containers - Remove duplicate artifact tabs from OUT container (already in steps)
- Pipeline list: "Frequent" filter as default (shows only pipelines with runs), "All" shows everything, categories still work - Persona detail: remove w-io wrapper from system prompt to fix border-in-border with markdown-body
Add search input and item count to contract and persona overview pages for consistency with other list pages.
- Remove extra padding from ws-tabcontent so log/artifact text aligns with step name and I/O labels (all at 0.55rem left) - Infer pipeline category from name prefix (e.g. "ops-pr-review" -> "ops") when no explicit category is set in pipeline YAML metadata
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns all remaining webui pages to match the Fat Gantt Shapes design language established in #710. Every page now uses the shared w-/ws-/wr-* component system.
Closes #709
Pages redesigned
Detail pages
List pages
Architecture
Stats
Test plan