charles/claude-hooks

Fork

You've already forked claude-hooks

Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

UI-2: Monitor issue Gantt → view tab on issue detail (kill /monitor/issue/.../gantt) #398

New issue

Closed

opened 2026-04-26 19:58:49 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-04-26 19:58:49 +00:00

Collaborator

Copy link

Why

monitor.issue.$owner.$repo.$issueNumber.tsx and monitor.issue.$owner.$repo.$issueNumber.gantt.tsx are two routes that:

Run identical fetch (/issues/pipeline?repo=...&issue=...) with identical query keys
Duplicate the onPipelineStage SSE patch logic line-for-line
Tick now on a 1s interval (only the Gantt needs it, but both subscribe)
Differ only in whether <PipelineGraph> or <PipelineGantt> is rendered

Toggling between them triggers full route remount + new SSE subscription, despite the data being identical.

Acceptance criteria

Route consolidation

Extend monitor.issue.$owner.$repo.$issueNumber.tsx search schema to accept ?view=graph|gantt (default: graph)
Conditional render based on view:
- graph → <PipelineGraph> + <DependencyGraph> (current default behaviour)
- gantt → <PipelineGantt> + active now ticker
Tab toggle UI lives in the breadcrumb or sub-header — Graph | Timeline, both linking to the same route with different ?view=
Delete apps/web/src/routes/monitor.issue.$owner.$repo.$issueNumber.gantt.tsx
Add redirect: /monitor/issue/$owner/$repo/$issueNumber/gantt → /monitor/issue/$owner/$repo/$issueNumber?view=gantt

Shared logic extraction

Pull onPipelineStage SSE patch handler into a single useIssuePipelineSSE(repo, issue) hook used by both renders
now ticker (useEffect + setInterval(1000)) only runs when view === "gantt" (effect cleanup on toggle)
PipelineGraph + PipelineGantt components stay as-is; only the route owner changes

Tests

Existing monitor.issue.$owner.$repo.$issueNumber.tsx tests extended: ?view=gantt renders Gantt, ?view=graph renders graph, default is graph, toggle updates URL without unmount
now ticker only active in Gantt view (assertion via render-count or interval-spy)
Redirect test for the deleted gantt route
bun run qa clean

Out of scope

Changing PipelineGraph or PipelineGantt internals
Adding a third view (e.g., raw JSON / log) — separate ticket if desired
Folding the dependency graph into a tab (it's a complementary overlay on the graph view, not an alternative)

References

UX audit 2026-04-26
apps/web/src/routes/monitor.issue.$owner.$repo.$issueNumber.tsx L56-208 — primary surface
apps/web/src/routes/monitor.issue.$owner.$repo.$issueNumber.gantt.tsx L48-205 — to be deleted
Sibling: UI-1 (#397) — drawer consolidation; this ticket is independent and can land in either order

As an operator, I want graph and Gantt views of an issue's pipeline timeline to be tabs on a single page, not separate routes, so that switching visualisations doesn't trigger a fresh page load and a redundant SSE re-subscription. ## Why `monitor.issue.$owner.$repo.$issueNumber.tsx` and `monitor.issue.$owner.$repo.$issueNumber.gantt.tsx` are two routes that: - Run identical fetch (`/issues/pipeline?repo=...&issue=...`) with identical query keys - Duplicate the `onPipelineStage` SSE patch logic line-for-line - Tick `now` on a 1s interval (only the Gantt needs it, but both subscribe) - Differ only in whether `<PipelineGraph>` or `<PipelineGantt>` is rendered Toggling between them triggers full route remount + new SSE subscription, despite the data being identical. ## Acceptance criteria ### Route consolidation - [ ] Extend `monitor.issue.$owner.$repo.$issueNumber.tsx` search schema to accept `?view=graph|gantt` (default: `graph`) - [ ] Conditional render based on `view`: - `graph` → `<PipelineGraph>` + `<DependencyGraph>` (current default behaviour) - `gantt` → `<PipelineGantt>` + active `now` ticker - [ ] Tab toggle UI lives in the breadcrumb or sub-header — `Graph | Timeline`, both linking to the same route with different `?view=` - [ ] Delete `apps/web/src/routes/monitor.issue.$owner.$repo.$issueNumber.gantt.tsx` - [ ] Add redirect: `/monitor/issue/$owner/$repo/$issueNumber/gantt` → `/monitor/issue/$owner/$repo/$issueNumber?view=gantt` ### Shared logic extraction - [ ] Pull `onPipelineStage` SSE patch handler into a single `useIssuePipelineSSE(repo, issue)` hook used by both renders - [ ] `now` ticker (`useEffect` + `setInterval(1000)`) only runs when `view === "gantt"` (effect cleanup on toggle) - [ ] `PipelineGraph` + `PipelineGantt` components stay as-is; only the route owner changes ### Tests - [ ] Existing `monitor.issue.$owner.$repo.$issueNumber.tsx` tests extended: `?view=gantt` renders Gantt, `?view=graph` renders graph, default is graph, toggle updates URL without unmount - [ ] `now` ticker only active in Gantt view (assertion via render-count or interval-spy) - [ ] Redirect test for the deleted gantt route - [ ] `bun run qa` clean ## Out of scope - Changing `PipelineGraph` or `PipelineGantt` internals - Adding a third view (e.g., raw JSON / log) — separate ticket if desired - Folding the dependency graph into a tab (it's a complementary overlay on the graph view, not an alternative) ## References - UX audit 2026-04-26 - `apps/web/src/routes/monitor.issue.$owner.$repo.$issueNumber.tsx` L56-208 — primary surface - `apps/web/src/routes/monitor.issue.$owner.$repo.$issueNumber.gantt.tsx` L48-205 — to be deleted - Sibling: UI-1 (#397) — drawer consolidation; this ticket is independent and can land in either order

claude-desktop referenced this issue

2026-04-26 19:59:31 +00:00

M22 Tracking — UI consolidation #400

claude-desktop added the

area:dashboard

type:user-story

labels

2026-04-26 19:59:59 +00:00

dev was assigned by claude-desktop

2026-04-26 20:00:11 +00:00

claude-desktop added this to the M22 — UI consolidation milestone

2026-04-26 20:00:12 +00:00

dev referenced this issue from a pull request that will close it,

2026-04-26 20:04:42 +00:00

feat(web): consolidate Gantt into view tab on issue detail (UI-2) #401

charles closed this issue

2026-04-26 23:48:59 +00:00

charles referenced this issue from a commit

2026-04-26 23:49:00 +00:00

feat(web): consolidate Gantt into view tab on issue detail (UI-2) (#401)

claude-desktop referenced this issue

2026-04-28 20:52:33 +00:00

M22 Tracking — UI consolidation #400

No Branch/Tag specified

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

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

Tracking or decisions, not implementation work

No labels

Milestone

Clear milestone

No items

No milestone

M22 — UI consolidation

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

dev

1 participant

Notifications

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#398

Reference in a new issue

Repository

charles/claude-hooks

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns