Complete Ready UX backlog (issues #29-41)

[enricopiovesan]

Summary

Completes the Ready UX backlog for traverse-starter web-react in a single pass: env overrides, page title, capability configuration, offline guidance, health pulse, keyboard submit, textarea UX, character count, trace details, and mobile runtime URL wrapping.

Closes:

• Fix broken .env override — VITE_TRAVERSE_RUNTIME_URL vs VITE_TRAVERSE_BASE_URL #29
• Fix page title: browser tab shows 'web-react' instead of 'Traverse Starter' #30
• UX: disabled submit button needs explanation when runtime is offline #31
• UX: health check status has no animation — looks frozen #32
• UX: add Cmd+Enter keyboard shortcut to submit workflow #33
• UX: textarea should auto-resize with content #34
• UX: footer exposes internal env var names — not user-facing language #35
• Feature: render trace event details, not just event count #36
• Feature: add character count and soft limit to note textarea #38
• Feature: make capability ID configurable via env var (VITE_TRAVERSE_CAPABILITY_ID) #39
• UX: Execution Output section shows no content when runtime is offline #40
• UX: fix URL line-break on mobile — 127.0.0.1:8787 splits mid-number #41

Definition of Done

• VITE_TRAVERSE_BASE_URL and related env overrides documented in .env and honored at runtime
• Document title set via index.html for traverse-starter
• Capability id configurable via env with sensible default
• Offline runtime state shows actionable hints; submit disabled when offline
• Online health indicator includes visible pulse styling
• Cmd/Ctrl+Enter submits workflow from note textarea when online
• Note textarea auto-resizes for multi-line input
• Character count displayed for note input (with max)
• Execution trace details surfaced in output section when available
• Runtime URL wraps on narrow/mobile viewports
• Unit tests cover shell, health, character count, and Cmd+Enter submit path
• No business logic added in UI layer (rendering and client boundary only)

Validation

npm run typecheck
npm run lint
npm run test
bash scripts/ci/repository_checks.sh

Test plan

• Local: npm run typecheck && npm run lint && npm run test (19 tests passed)
• CI: all required checks green on this PR

Made with Cursor