Commit graph

346 commits

Author SHA1 Message Date
Bryan Helmkamp
7f921fb82a Add drag-and-drop sortable Run cards on Runs page
Uses @dnd-kit to make cards reorderable within their column (board view)
and group (list view). Prevents accidental navigation on drag release.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 11:16:31 -05:00
Bryan Helmkamp
3912cab183 Improve settings page with sidebar nav, section icons, and accent colors
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 11:16:24 -05:00
Bryan Helmkamp
6d22a6c622 Rename arc-attractor crate to arc-workflows
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 03:05:43 -05:00
Bryan Helmkamp
4f9891427f Add hover copy button and date to session messages
Show a clipboard icon on hover below user prompts (with date)
and at the end of assistant sequences (not before tool calls).
Icon-only button, no label text.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 03:01:56 -05:00
Bryan Helmkamp
d2234fed8f Add model label and prompt input to session pages
Show model name (e.g. Opus 4.6) right-aligned in the session
header bar. Add a pinned text input with send button at the
bottom of each session for continuing the conversation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 23:29:25 -05:00
Bryan Helmkamp
b5d8ad1494 Add columns/list toggle on Runs page and Settings page mockup
Runs: add a view toggle (columns vs list) with collapsible
status-grouped sections in list view.

Settings: populate with grouped panels (General, Git & VCS,
Compute, Notifications, Security) containing key/value fields
with text inputs, selects, and toggles. Hide redundant header.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 23:24:22 -05:00
Bryan Helmkamp
9b1bab7561 Add Arc logo icon next to heading on /start page
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 23:13:25 -05:00
Bryan Helmkamp
e054a853dd Replace fixed starter cards with expandable category menus on /start
Three category pills (Build, Review, Fix) expand into overlay panels
with prompt options, similar to Claude.ai's starter prompt pattern.
Panel renders over the pills directly below the textarea.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 23:11:34 -05:00
Bryan Helmkamp
2eebb00ab1 Add Start page, session chat UI, and filtering across arc-web
- /start page with AI prompt textarea, project/branch pickers, and starter workflow cards
- /sessions/:id page with chat conversation UI (user/assistant/tool turns with progressive disclosure)
- Session sidebar with grouped history (Today, Yesterday, Previous 7 days)
- Start nav tab with sparkles icon added to app shell
- Scheduled workflows with schedule badges and pause buttons on /workflows
- Trigger filter dropdown (All/Scheduled/Manual) on /workflows
- Search bar and repository filter dropdown on /runs kanban board

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 23:07:19 -05:00
Bryan Helmkamp
6d869aa8da Add asymmetric JWT service-to-service auth between arc-web and arc-attractor
Ed25519 asymmetric JWT: arc-web signs with private key, arc-attractor verifies
with public key. Adds AuthenticatedService axum extractor to all routes, jose
dependency for TypeScript signing, and key generation script.

Startup behavior: ARC_JWT_PUBLIC_KEY set → enforce JWT auth; not set +
ARC_INSECURE_DISABLE_AUTHENTICATION=true → allow unauthenticated; neither →
refuse to start with clear error.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 18:05:49 -05:00
Bryan Helmkamp
d37d2c8f49 Add run configuration and graph sub-pages under /runs/:id
Sidebar "Run Configuration" and "Workflow Graph" links now navigate to
/runs/:id/configuration and /runs/:id/graph instead of away to the
workflow detail page. Extracts CollapsibleFile into a shared component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 17:17:19 -05:00
Bryan Helmkamp
ea89a62768 Link Arc logo to /workflows page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 17:12:52 -05:00
Bryan Helmkamp
1418c976df Standardize border radius to rounded-md across all route components
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 17:12:05 -05:00
Bryan Helmkamp
1b32e1592c Add consistent rounded-md corners to file diff containers
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 17:07:26 -05:00
Bryan Helmkamp
043a5e2ef0 Add stage ID to stages URL for addressable stage navigation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 16:59:26 -05:00
Bryan Helmkamp
73d205ca13 Add collapsible headers with line counts to File components
Wrap each File in a CollapsibleFile that restores the expand/collapse
toggle and right-aligned line/loc counts. TOML defaults to collapsed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 16:53:02 -05:00
Bryan Helmkamp
615a3a2dbf Replace direct Shiki usage with @pierre/diffs File component
Use the File component from @pierre/diffs/react instead of manually
creating a Shiki highlighter instance. Register the custom DOT grammar
via attachResolvedLanguages and drop the direct shiki dependency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 16:49:43 -05:00
Bryan Helmkamp
664dc91bf5 Dynamically color special DOT nodes by shape in applyTheme
Add colorSpecialNodes() that injects fill/border/font colors based on
node shape (teal for Mdiamond/Msquare, amber for hexagon/diamond),
removing the need to hardcode colors in workflow DOT data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-28 16:45:29 -05:00
Bryan Helmkamp
854f637b60 Render stages tab as agent session with compact tool call rows
Replace stage list with single-stage agent session view showing
system prompt, assistant messages, and grouped tool calls. Tool
call/result pairs are combined into compact expandable rows.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 16:23:53 -05:00
Bryan Helmkamp
cb98825d0b Add run detail sub-tabs: stages, usage, overview with diagram
- Add Usage tab with token/cost/runtime table per stage
- Add Stages tab with expandable event timeline per stage
- Add Overview tab with left sidebar (stages, workflow links) and
  interactive DOT diagram with zoom/pan/direction controls
- Style DOT subgraph labels and borders for dark theme
- Remove PR number and CI status from run detail header
- Add Open PR button to run detail header

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 16:15:05 -05:00
Bryan Helmkamp
51d58a904c Brand diff theme and reorganize run detail tabs
- Add CSS variable overrides for @pierre/diffs to match brand palette:
  navy backgrounds, mint additions, coral deletions, JetBrains Mono font
- Replace Logs tab with Overview tab as the new index route
- Move Stages to /stages sub-route
- Clean up unused imports from run-files-changed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 15:56:43 -05:00
Bryan Helmkamp
edf52a7c9f Add breadcrumbs, run detail tabs, and split diff view
- Add breadcrumbs to workflow detail (Workflows / title) and run detail
  (Runs / workflow / title) pages for navigation context
- Add workflow field to run data model linking runs to workflows
- Add run detail sub-route placeholders (stages, files changed, logs)
- Add split diff view on files changed tab using @pierre/diffs with
  example file diffs and wide layout
- Add shiki syntax highlighting styles and app shell wide mode support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 15:50:17 -05:00
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