Skip to content

Commit 6db4905

Browse files
feat(app): inspector polish — loading states, responsive, keyboard nav (#44)
- Loading state: spinner with parsing indicator, button disables - Responsive layout: mobile-friendly (flex-wrap, smaller text, adaptive grids) - Keyboard navigation: arrow up/down to move through events in the timeline - Sticky header for better UX on long traces - Error state: improved guidance for empty input - All states (loading, empty, error) properly handled Closes #29
1 parent ed2e26d commit 6db4905

2 files changed

Lines changed: 148 additions & 87 deletions

File tree

CURRENT_STATE.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,16 +126,23 @@ report exported. CLI and web inspector.
126126
- ✅ Workspace dependencies on `@ocpp-debugkit/core`, `scenarios`, `reporter`
127127
-`"private": true` (never publishable to npm)
128128

129-
### Landing Page + Inspector (in progress — this PR)
129+
### Landing Page + Inspector (PR #43)
130130

131131
- ✅ Landing page: hero, features, what-it's-not, architecture, quick start, footer
132132
- ✅ Inspector: trace paste textarea + file upload + sample scenario selector
133133
- ✅ Inspector: session timeline (click events to inspect)
134134
- ✅ Inspector: message inspector panel (raw + normalized fields)
135135
- ✅ Inspector: failure summary (severity, description, suggested steps)
136136
- ✅ Inspector: Markdown report export (download)
137-
- ✅ Inspector: loading/empty/error states
138-
- ✅ Browser-local processing only (all parsing client-side)
137+
138+
### Inspector Polish (in progress — this PR)
139+
140+
- ✅ Loading state with spinner ("Parsing trace…")
141+
- ✅ Error state improvements (non-sensitive messages, empty input guidance)
142+
- ✅ Responsive layout (mobile-friendly: flex-wrap, smaller text on small screens)
143+
- ✅ Keyboard navigation (arrow up/down to move through events)
144+
- ✅ Sticky header for better UX on long traces
145+
- ✅ Analyze button shows "Analyzing…" and disables during parsing
139146

140147
## What's Next
141148

@@ -146,9 +153,9 @@ report exported. CLI and web inspector.
146153
5. **Issue #24** → complete (PR #40): reporter package (Markdown report generator)
147154
6. **Issue #25** → complete (PR #41): CLI package (scaffold + inspect + report + scenario commands)
148155
7. **Issue #26** → complete (PR #42): Next.js app scaffold (Next.js + Tailwind, routes for /, /inspector, /docs)
149-
8. **Issue #27** (this PR) → complete: Landing page (hero, features, architecture, quick start, footer)
150-
9. **Issue #28** (this PR) → complete: Inspector (trace input + timeline + message inspector + failures + report export)
151-
10. **Issue #29**: Inspector polish (responsive, keyboard nav, loading states)
156+
8. **Issue #27** → complete (PR #43): Landing page (hero, features, architecture, quick start, footer)
157+
9. **Issue #28** → complete (PR #43): Inspector (trace input + timeline + message inspector + failures + report export)
158+
10. **Issue #29** (this PR) → complete: Inspector polish (loading states, responsive, keyboard nav)
152159
11. **Issue #30**: Playwright smoke tests
153160

154161
## Known Blockers / Decisions Pending

0 commit comments

Comments
 (0)