Commit graph

24 commits

Author SHA1 Message Date
Bryan Helmkamp
b2cf623007 Lighten button styles, add Run button, and widen runs page
- Restyle Create Workflow split button to lightweight border/mint style
- Add "Run" icon button to workflow detail header
- Remove max-width constraint for wide pages so runs board uses full width
- Remove unused nav items (Start, Insights)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 15:30:31 -05:00
Bryan Helmkamp
d980b6de12 Add collapsible code blocks and run workflow button to workflow detail
Code blocks are now expandable/collapsible with a chevron toggle, line
count, and LOC count in the header. TOML defaults collapsed, DOT
expanded. Workflow detail header gets a circular play button and
max-w-prose on the description for readability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 15:27:01 -05:00
Bryan Helmkamp
b218c6b280 Add syntax-highlighted DOT graph display below TOML config
Add a custom Shiki TextMate grammar for GraphViz DOT files (converted
from vscode-graphviz) and display each workflow's DOT graph source
below the TOML configuration on the definition tab.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 15:07:26 -05:00
Bryan Helmkamp
bc1b5d54ab Add run detail page, link run cards, and custom workflow icon colors
- Add id field to RunItem and assign IDs to all mock runs
- Create run detail page at /runs/:id with status, changes, PR, CI info
- Link run cards in both /runs kanban board and /workflows/:name/runs list
- Add per-workflow icon color with tinted border on workflow cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 14:53:14 -05:00
Bryan Helmkamp
62c401336f Fix background gradient repeating on tall pages
Use background-attachment: fixed so the radial gradients stay anchored
to the viewport instead of tiling with the document height.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 14:33:11 -05:00
Bryan Helmkamp
343977d467 Add diagram controls: direction toggle, zoom, fit-to-window, drag-to-pan
- Toggle between left-to-right and top-to-bottom layout
- Zoom in/out with stepped controls
- Fit-to-window button (dashed square icon) resets zoom and pan
- Click-and-drag to pan the diagram
- Strip graph title from rendered SVG at render time

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 14:32:12 -05:00
Bryan Helmkamp
82060ec6e0 Add status filter, workflow icons, diagram, and UI polish
- Add status dropdown filter to workflow runs list
- Replace play button with per-workflow icons (wrench, code, sync, rocket)
- Move run button to right side as circular play icon
- Expand workflow card link target to cover icon, name, filename, status
- Render fix_build DOT pipeline diagram using @viz-js/viz

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 14:23:30 -05:00
Bryan Helmkamp
300a12a4eb Refine workflow runs list: grid layout, search, CI dots, spacing
Use CSS grid with subgrid for guaranteed column alignment. Remove repo
name, add PR icon, move duration next to status, show CI as dot next
to PR number, add typeahead search. Reverse sort (Merge first).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 14:10:50 -05:00
Bryan Helmkamp
0600b2ab59 Extract shared run data, add list view for workflow runs tab
Shared data module at data/runs.ts powers both the kanban board
(/runs) and the vertical list view (/workflows/:name/runs). List view
shows status dot, repo, title, diff stats, CI badge, comments, and
elapsed time in a compact row format.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:58:40 -05:00
Bryan Helmkamp
093eecdb6e Convert workflow detail tabs to nested routes
Definition at /workflows/:name, Diagram at /workflows/:name/diagram,
Runs at /workflows/:name/runs. Detail page is now a layout with Outlet.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:56:13 -05:00
Bryan Helmkamp
4dac57685c Add workflow detail page with tabs at /workflows/:name
Detail page shows title, filename, description, and horizontal tabs
for Definition, Diagram, and Runs. Workflow names in the list are now
links to their detail pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:50:06 -05:00
Bryan Helmkamp
00c470297b Add workflow list cards to Workflows page
Four mock workflows with play button, name, filename, last run
status, and actions menu.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:36:16 -05:00
Bryan Helmkamp
31918b5736 Add Workflows tab, rename Workflow Runs to Runs
Workflows tab sits between Start and Runs with a stack icon.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:32:32 -05:00
Bryan Helmkamp
6839df2690 Use PlayIcon instead of PlayCircleIcon for Workflow Runs nav
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:18:16 -05:00
Bryan Helmkamp
2c70e87630 Add icons to top nav items
Rocket for Start, play circle for Workflow Runs, chart bar for
Insights, gear for Settings.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:17:43 -05:00
Bryan Helmkamp
0d95c27325 Rename Pipeline Runs to Workflow Runs, change URL to /runs
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:16:45 -05:00
Bryan Helmkamp
248f8ae7fc Add Insights tab and server-side route
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:10:50 -05:00
Bryan Helmkamp
01bd717a3b Move CI badges to action row, add elapsed times to Verify/Merge cards
CI status badges now sit alongside action buttons instead of in the
metadata row. All cards now show elapsed time. Stale items (3d) get
amber warning color.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:10:20 -05:00
Bryan Helmkamp
ab88043288 Color-code Resolve button with teal-500 accent
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:05:32 -05:00
Bryan Helmkamp
4dfe86545f Switch sans-serif font from Inter to Geist
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:04:16 -05:00
Bryan Helmkamp
ac691dd1ba Color-code action buttons: mint for Merge, amber for Answer Question
Uses brand palette accent colors to visually distinguish action types.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:00:28 -05:00
Bryan Helmkamp
e73f6be166 Add background atmosphere and compact ghost pill action buttons
Background: radial teal/mint gradient with subtle film grain noise overlay.
Buttons: replace heavy full-width teal buttons with compact ghost pills
featuring icons + text labels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 12:59:02 -05:00
Bryan Helmkamp
b0d6becb33 Add branded favicon, avatar update, and Watch/Steer buttons
Generate favicon from brand symbol SVG (ico, svg, apple-touch-icon,
192/512 PNGs). Switch avatar to GitHub. Split Working column action
into Watch and Steer buttons side by side.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 12:38:42 -05:00
Bryan Helmkamp
1f366845ca Add arc-web React Router 7 app with pipeline kanban board
New Bun-based React Router 7 app with Tailwind CSS, branded with Arc
logo/colors. Features an app shell with nav routing (/start, /pipelines,
/settings) and a Trello-style pipeline board with Working, Pending,
Verify, and Merge columns showing PR cards with CI status, comments,
resources, and action buttons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 12:34:18 -05:00