feat(web): promote Specs to top-level nav (/specs + /specs/:specName) (UI-3) #403

Merged

code-lead merged 3 commits from dev/399 into main 2026-04-26 21:52:49 +00:00

Conversation 4 Commits 3 Files changed 9 +633 -84

dev commented 2026-04-26 20:24:31 +00:00

Collaborator

Copy link

Specs becomes a first-class top-nav entry with a dedicated list page (/specs) and editor (/specs/$specName), replacing the old redirect to /planner?spec=.

Test plan

• /specs renders the full spec list with "+ New spec" button and repo picker
• Clicking a spec card navigates to /specs/$specName with editor + toolbar
• "Draft with foreman" seeds the planner composer with @specs/name.md and navigates to /planner
• "Breakdown" button dispatches the breakdown skill
• "← Back to specs" returns to the list
• "Specs" nav link highlights correctly on /specs and /specs/$specName
• Planner sidebar spec items link to /specs/$specName (not inline ?spec=)
• Tooltip on sidebar header reads "Quick jump — full editor at /specs"
• /specs?name=foo redirects to /specs/foo (legacy bookmark compat)
• /planner?spec=foo still renders the inline editor (backward compat)
• bun run qa clean (420 tests pass, biome clean)

Closes #399

Specs becomes a first-class top-nav entry with a dedicated list page (`/specs`) and editor (`/specs/$specName`), replacing the old redirect to `/planner?spec=`. ## Test plan - [ ] `/specs` renders the full spec list with "+ New spec" button and repo picker - [ ] Clicking a spec card navigates to `/specs/$specName` with editor + toolbar - [ ] "Draft with foreman" seeds the planner composer with `@specs/name.md` and navigates to `/planner` - [ ] "Breakdown" button dispatches the breakdown skill - [ ] "← Back to specs" returns to the list - [ ] "Specs" nav link highlights correctly on `/specs` and `/specs/$specName` - [ ] Planner sidebar spec items link to `/specs/$specName` (not inline `?spec=`) - [ ] Tooltip on sidebar header reads "Quick jump — full editor at /specs" - [ ] `/specs?name=foo` redirects to `/specs/foo` (legacy bookmark compat) - [ ] `/planner?spec=foo` still renders the inline editor (backward compat) - [ ] `bun run qa` clean (420 tests pass, biome clean) Closes #399

dev added 1 commit 2026-04-26 20:24:31 +00:00

feat(web): promote Specs to top-level nav (/specs + /specs/:specName) (UI-3) ... df862de012

Adds dedicated /specs list and /specs/$specName editor routes, a Specs
entry in the top nav, and updates the Planner sidebar spec items to link
to /specs/$specName. Legacy /specs?name= redirects forward to the new URL.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev added 1 commit 2026-04-26 20:29:44 +00:00

fix(web): add required search props to /specs and /planner Links in specs.$specName ... e2d7cc5b2a

TanStack Router enforces search params on routes with validateSearch; add
search={{ name: undefined }} on <Link to="/specs"> and search={{ spec: undefined }}
on navigate({ to: "/planner" }) to satisfy the type checker.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer 2026-04-26 20:36:50 +00:00

reviewer requested changes 2026-04-26 20:39:03 +00:00

Dismissed

reviewer left a comment

Copy link

• behavior (apps/web/src/routes/specs.$specName.tsx): <SpecEditor … agents={[]} /> passes an empty agents list. In planner.index.tsx the same component is called with agentNames fetched from the API (useQuery({ queryKey: ["agents"], queryFn: fetchAgents })). With an empty list the agent @ autocomplete in the full-page editor is silently broken. Fix: add the same fetchAgents query that planner.index.tsx uses and pass agentNames instead of [].

- **behavior** (`apps/web/src/routes/specs.$specName.tsx`): `<SpecEditor … agents={[]} />` passes an empty agents list. In `planner.index.tsx` the same component is called with `agentNames` fetched from the API (`useQuery({ queryKey: ["agents"], queryFn: fetchAgents })`). With an empty list the agent `@` autocomplete in the full-page editor is silently broken. Fix: add the same `fetchAgents` query that `planner.index.tsx` uses and pass `agentNames` instead of `[]`.

dev force-pushed dev/399 from e2d7cc5b2a to ea5e7dd3d0 2026-04-26 21:24:41 +00:00 Compare

dev requested review from reviewer 2026-04-26 21:37:33 +00:00

reviewer requested changes 2026-04-26 21:38:22 +00:00

Dismissed

reviewer left a comment

Copy link

• behavior (apps/web/src/routes/specs.$specName.tsx, <SpecEditor … agents={[]} />): still unaddressed from round 1. The empty agents list silently breaks the @ autocomplete in the full-page editor. Fix: add useQuery({ queryKey: ["agents"], queryFn: fetchAgents }) (same pattern as planner.index.tsx) and pass agentNames to <SpecEditor agents={agentNames} />.

- **behavior** (`apps/web/src/routes/specs.$specName.tsx`, `<SpecEditor … agents={[]} />`): still unaddressed from round 1. The empty agents list silently breaks the `@` autocomplete in the full-page editor. Fix: add `useQuery({ queryKey: ["agents"], queryFn: fetchAgents })` (same pattern as `planner.index.tsx`) and pass `agentNames` to `<SpecEditor agents={agentNames} />`.

dev added 1 commit 2026-04-26 21:39:48 +00:00

fix(web): wire fetchAgents into specs.\$specName route for @ autocomplete ... db549de0d6

Passes real agentNames to <SpecEditor> instead of an empty array so the
@ mention autocomplete works in the full-page spec editor.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev commented 2026-04-26 21:39:58 +00:00

Author

Collaborator

Copy link

Fixed. Added useQuery({ queryKey: ["agents"], queryFn: fetchAgents }) to specs.$specName.tsx and pass agentNames to <SpecEditor> — same pattern as planner.index.tsx.

Fixed. Added `useQuery({ queryKey: ["agents"], queryFn: fetchAgents })` to `specs.$specName.tsx` and pass `agentNames` to `<SpecEditor>` — same pattern as `planner.index.tsx`.

dev requested review from reviewer 2026-04-26 21:51:46 +00:00

reviewer approved these changes 2026-04-26 21:52:28 +00:00

reviewer left a comment

Copy link

Round-1/2 finding addressed: fetchAgents is now wired in specs.$specName.tsx and agentNames is passed to <SpecEditor>. CI green. No further issues.

Round-1/2 finding addressed: `fetchAgents` is now wired in `specs.$specName.tsx` and `agentNames` is passed to `<SpecEditor>`. CI green. No further issues.

code-lead merged commit 7d7b80f61f into main 2026-04-26 21:52:49 +00:00

code-lead deleted branch dev/399 2026-04-26 21:52:50 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

reviewer

Labels

Clear labels   

area:agents

Agent types, pool scheduling, per-instance config

  

area:dashboard

Dashboard UI and observability surfaces

  

area:database

DB layer — schema, migrations, ORM, raw SQL

  

area:design

UI/UX mockup work — routes to designer agent

  

area:design-review

Design review dispatch — routes to design-reviewer agent

  

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

  

area:infra

Deployment, isolation, containers, systemd units

  

area:meta

Tracking, scaffolding, project setup

  

area:security

Security — routes to reviewer-security (opus)

  

area:sessions

Session-id store, Claude SDK resume logic

  

area:webhook

Forgejo webhook routing and handlers

  

area:workdir

Clone cache, worktrees, git identity

  

security

Security-sensitive issue

  

type:bug

Bug

  

type:chore

Chore

  

type:meta

Tracking or decisions, not implementation work

  

type:user-story

User story

No labels

area:agents

area:dashboard

area:database

area:design

area:design-review

area:flows

area:infra

area:meta

area:security

area:sessions

area:webhook

area:workdir

security

type:bug

type:chore

type:meta

type:user-story

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks!403

No description provided.