feat: S-4.2.2 Collapsed Iterations UI (history view, expanded tabs, range selection)#408
Open
pedropaulovc wants to merge 18 commits into
Open
feat: S-4.2.2 Collapsed Iterations UI (history view, expanded tabs, range selection)#408pedropaulovc wants to merge 18 commits into
pedropaulovc wants to merge 18 commits into
Conversation
CodjiFlo Iteration TrackingIterations captured: 8 What is this?This comment is automatically updated by the CodjiFlo GitHub Action to enable force-push resilient code review with iteration tracking. The artifact referenced above contains iteration data that the CodjiFlo frontend uses to:
|
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Preview Deployment🚀 Preview: https://pr-408.codjiflo.vza.net/pedropaulovc/codjiflo/408 Updated for commit fa38420 |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds stateless-mode UX for viewing and expanding “collapsed” (force-push-discarded) iterations, including a history view and expanded discarded/unavailable tabs that integrate with range selection.
Changes:
- Introduces a
CollapsedIterationHistoryViewand store state/actions to select/clear/toggle collapsed iteration groups. - Updates
IterationSelectorto render collapsed groups as clickable buttons, expand groups into discarded/unavailable iteration tabs, and include them in drag-range selection. - Adds styling + unit/E2E test coverage for the new collapsed/expanded iteration behaviors.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/shared/features.css | Adds styling for discarded/unavailable tabs and the history view layout. |
| src/features/iterations/types.ts | Extends iteration store state/actions to support a selected collapsed group. |
| src/features/iterations/stores/useIterationStore.ts | Implements collapsed-group selection and visibility toggling; clears history view on range/preset changes. |
| src/features/iterations/stores/useIterationStore.test.ts | Adds unit tests for new collapsed-group store behaviors. |
| src/features/iterations/index.ts | Exports the new history view component from the feature barrel. |
| src/features/iterations/components/index.ts | Re-exports CollapsedIterationHistoryView. |
| src/features/iterations/components/IterationSelector.tsx | Makes collapsed group tab interactive; supports expanded discarded/unavailable tabs + range selection. |
| src/features/iterations/components/IterationSelector.test.tsx | Updates/extends unit tests for the new selector behaviors. |
| src/features/iterations/components/CollapsedIterationHistoryView.tsx | New component rendering discarded commit details and an “Include discarded iterations” action. |
| src/features/iterations/components/CollapsedIterationHistoryView.test.tsx | Unit tests for history view rendering and behaviors. |
| src/features/diff/components/DiffView.tsx | Integrates history view as an early-return overlay while keeping iteration selector visible. |
| e2e/mock/stateless-mode/collapsed-iterations-ui.spec.ts | New E2E coverage for opening/dismissing the history view and unknown-count messaging. |
| e2e/mock/stateless-mode/collapsed-iterations-expanded.spec.ts | New E2E coverage for expanding groups into tabs, range selection, and styling expectations. |
| e2e/fixtures/force-push-helpers.ts | Adds shared E2E helpers to reduce duplication across new specs. |
…ry view (AC-4.2.2.3, AC-4.2.2.4) Store: add activeCollapsedGroupId, selectCollapsedGroup, clearCollapsedGroup, toggleCollapsedGroupVisibility actions. selectRange and reset clear the active collapsed group. UI: CollapsedGroupTab changed from <div> to <button>, role="img" removed, onClick calls selectCollapsedGroup. New CollapsedIterationHistoryView component shows commit list, multi-line message truncation, unavailable commit handling, unknownCount message, and Include button. IterationSelector respects group visibility (expanded groups show individual tabs). DiffView shows history view when a collapsed group is active. Test validation: E2E tests confirmed RED before implementation, GREEN after. 5/5 E2E tests pass. 68 unit tests pass (31 store + 31 selector + 6 history view). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix 1: History view now shows regardless of current file selection by moving the activeCollapsedGroupId check before the isShowingDescription block instead of nesting inside it. Fix 2: selectPreset now clears activeCollapsedGroupId to dismiss history view when a preset range is selected. Fix 3: Simplified redundant null check — activeCollapsedGroup is only truthy when activeCollapsedGroupId is truthy. Added unit test: selectPreset clears activeCollapsedGroupId. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…oups (AC-4.2.2.5, AC-4.2.2.6, AC-4.2.2.8) When collapsed groups are expanded via Include button, individual iteration tabs now render with 'discarded' CSS class (opacity 0.6). Discarded tabs fully participate in drag range selection and click interactions. Added CSS classes for discarded and unavailable states. Test failure validated: before this change, expanded iterations rendered as regular tabs without the discarded class, causing 4 E2E test failures (opacity assertions, class assertions, range selection tests). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…efaults (AC-4.2.2.8) Add isUnavailable prop to IterationTab: applies .unavailable CSS class, aria-disabled="true", and removes all mouse/keyboard handlers making the tab completely non-interactive. Cross-reference iteration headSha with group's DiscardedCommit entries to determine availability status. Fix isDiscarded/isUnavailable to use explicit default values (= false). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- DiffView.tsx: remove non-null assertion by capturing groupId in local const before the truthy check block - collapsed-iterations-ui.spec.ts: replace raw locator with getByTestId regex to satisfy playwright/no-raw-locators rule - collapsed-iterations-expanded.spec.ts: fix window casts by going through unknown first to satisfy strict TypeScript Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…action 1. Extract duplicated mockPR, mockFiles, config, setupForcePushScenario, and beforeEach setup from both collapsed-iterations spec files into e2e/fixtures/force-push-helpers.ts. Both specs now import shared helpers, eliminating ~100 lines of duplication per file. 2. Add JSDoc comment to clearCollapsedGroup action explaining it exists for future "dismiss without expanding" UX (no current callers). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
setupIterationMocks (called by setupFullPRMocks) only mocked the issue comments and actions/artifacts endpoints for artifact discovery. The stateless iteration fallback in loadIterations also calls the Timeline and Commits APIs, which were left unmocked. Under concurrent test execution, when a test logs in with a mock PAT token, loadIterations re-fires with the token attached. The unmocked timeline/commits requests leak to the real GitHub API, which returns 401 "Bad credentials" — causing browser console errors that fail assertion checks in authentication-redirect.spec.ts. Root cause confirmed via trace analysis: requests to /issues/*/timeline and /pulls/*/commits returned 401 on the second (authenticated) page load. Fix adds empty-response mocks for both endpoints. Verified: 10/10 stress test passes (was 8/10 before fix). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use `disabled` attribute instead of `aria-disabled` on unavailable iteration tabs for proper HTML semantics and assistive tech support - Remove `pointer-events: none` from `.iteration-tab.unavailable` CSS (contradicts `cursor: not-allowed` which needs pointer events to show) - Remove conditional handler suppression (disabled buttons don't fire) - Add comment explaining index coupling safety in history view - Rename E2E test to clarify it validates CSS rule definition Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Recreated demo assets showing collapsed iterations UI: - Default state with collapsed group tab - History view with discarded commit details - Expanded individual tabs at reduced opacity - Cross-boundary range selection - Unknown iterations (GC'd SHA) edge case Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Document pedropaulovc/codjiflo-e2e-test-repo as the dedicated repo for prod-mode E2E test data and demo-presenter agent workflows. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The GitHub Timeline API's head_ref_force_pushed events only provide commit_id (the new HEAD after force-push), not before_commit/after_commit. Infer the "before" SHA by walking committed events chronologically. When no committed event precedes a force-push, treat as unknown/GC'd. Verified: 29 unit tests pass, 14 E2E iteration tests pass, 1477 total tests pass with coverage. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When URL contains ?mode=stateless, loadIterations skips ArtifactLoader entirely and goes directly to the TimelineLoader/commit-based iteration path. This allows users to force stateless mode even when a CodjiFlo artifact exists. Also adds E2E tests for: - Real GitHub API shape (commit_id + committed events) for force-push - ?mode=stateless query param bypassing artifact discovery Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Manual demo of the Collapsed Iterations UI feature using real GitHub data from PR #292 in stateless mode. Covers all 9 acceptance criteria across 8 demo steps including collapsed group tabs, history view, expanded individual tabs, cross-boundary range selection, and unknown/GC'd iterations handling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Re-captured all demo screenshots from scratch addressing: - #2: Visible tooltip overlay for "6 iterations discarded" hover - #5 (new): Actual code diff shown for discarded iteration range - #6: Cross-boundary range with code diff, not PR description - #7 (new): Dedicated screenshot for collapsed tabs skipped in range - #8-#10: Proper sequencing of normal selection, GC'd commits, dismiss Expanded from 8 to 10 screenshots for complete AC coverage. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Root cause: design doc assumed GitHub Timeline API force-push events include before_commit/after_commit fields, but real API only provides commit_id. All mocks (unit + E2E) were based on the wrong spec, so the bug was invisible to the entire test suite. Caught during demo phase when using real GitHub data. Key lessons: verify API shapes with real data before writing specs, add prod-mode E2E tests for API integrations, mocks are a liability when not validated against reality. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Lesson from Timeline API field mismatch bug: mocks based on assumed API shapes can hide bugs from the entire test suite. New rule requires verifying real API responses before writing specs/mocks, and adding prod-mode E2E tests for API integration features. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Superseded by real-data demo at spec/demo/milestone-4.2-stateless-iteration-management/s-4.2.2-collapsed-iterations-ui/ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
pedropaulovc
force-pushed
the
feature/collapsed-history-view
branch
from
April 4, 2026 07:08
fa38420 to
4b11b07
Compare
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
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
aria-disabledChanges
CollapsedIterationHistoryView— renders discarded commit details with include buttonactiveCollapsedGroupId,selectCollapsedGroup,clearCollapsedGroup,toggleCollapsedGroupVisibilityactions<div>to<button>, expanded groups render individual discarded/unavailable tabsTest plan
🤖 Generated with Claude Code
🔍 Review in CodjiFlo