audit: 26 frontend UI/UX bugs found in dashboard interaction components

[OneStepAt4time]

Frontend UI Bug Audit — May 28, 2026

Systematic source-code review of all interactive dashboard components. Found 26 bugs across modals, approval flow, mobile, and keyboard navigation.

---

🔴 P0 — Broken (2)

1. CreateSessionModal.tsx — Loading state gets stuck on validation failure

~Line 97-110 — In single-mode handleSubmit, setLoading(true) is called, then validateWorkDir() runs outside the try/finally block. If validation fails and returns early, finally never executes, and the submit button stays permanently disabled. User must close and reopen the modal to retry.
Fix: Move validation inside the try block, or call setLoading(false) in the validation-failure return path.

2. useSessionApproval.ts — Countdown timer is frozen (never decrements)

~Lines 73-99 — remainingMs is computed via useMemo keyed on pendingApproval?.expiresAt (a string that never changes). The interval tries to force re-renders with setPendingApproval(prev => prev ? {...prev} : null), but since expiresAt doesn't change, useMemo returns the cached value every tick. The TTL display is frozen at its initial value.
Fix: Replace with useState for remainingMs, updated directly by the interval:

const [remainingMs, setRemainingMs] = useState<number | null>(() => clampRemaining(pendingApproval?.expiresAt));
useEffect(() => {
  if (!pendingApproval?.expiresAt) { setRemainingMs(null); return; }
  const tick = () => setRemainingMs(clampRemaining(pendingApproval.expiresAt));
  tick();
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, [pendingApproval?.expiresAt]);

---

🟠 P1 — Frustrating (12)

3. ApprovalBanner.tsx — No loading/disabled state on APPROVE/REJECT buttons

~Lines 77-99 — Buttons have no disabled prop or loading indicator. Double-tap (common on phone) sends duplicate approve API calls.
Fix: Accept isLoading prop, wire to disabled.

4. CreateSessionModal.tsx — Template mode double-click creates duplicate sessions

~Line 240 — Rapid clicks can fire onSubmit twice before React batches the setLoading(true) state update.
Fix: Use a synchronous ref guard (if (submittingRef.current) return; submittingRef.current = true;).

5. CreateSessionModal.tsx — workDirError rendered under Name field, not WorkDir

~Lines 174-180 — Error message is visually attached to the wrong input.
Fix: Move the workDirError conditional render to the WorkDir field's container.

6. NewSessionDrawer.tsx — No AbortController on session creation

~Lines 78-100 — If user closes drawer during submission, the request continues. On success, it navigates to the new session even though the user explicitly closed the drawer.
Fix: Add AbortController with signal passed to createSessionWithFallback, abort on close.

7. NewSessionDrawer.tsx — addRecentDir called on failure

~Line 97 — finally block adds the workdir to recents regardless of success/failure. Failed attempts pollute the list.
Fix: Move addRecentDir to the success path only.

8. SaveTemplateModal.tsx — AbortController created but signal never passed to API

~Line 48 — AbortController exists but signal isn't passed to createTemplate(). Abort is a no-op.
Fix: Pass signal to the API call.

9. TemplateModal.tsx — Same abort signal issue

~Lines 97-106 — AbortController created but never connected to createTemplate/updateTemplate.
Fix: Pass signal to the API calls.

10. HoldButton.tsx — Missing onTouchCancel handler (interval leak)

~Line 75 — If a touch is cancelled (system gesture, notification), stopHold never fires. The setInterval timer runs indefinitely.
Fix: Add onTouchCancel={stopHold}.

11. HoldButton.tsx — Missing onContextMenu prevention

~Line 75 — On mobile, long-press triggers browser context menu, breaking the hold gesture.
Fix: Add onContextMenu={(e) => e.preventDefault()}.

12. useKeyboardShortcuts.ts — Sequence shortcuts (g o, g s, etc.) declared but never matched

~Line 52 — The hook explicitly continues past any shortcut with .sequence. Five navigation shortcuts are listed in help but do nothing.
Fix: Implement sequence matching: track first key, wait for second within timeout.

13. CommandPalette.tsx — Escape handler doesn't stopPropagation

~Line 105 — Both the palette's Escape handler and parent handlers fire from the same keypress.
Fix: Add e.stopPropagation() + e.preventDefault().

14. ConfirmDialog.tsx — Destructive actions auto-focus confirm button instead of cancel

~Lines 57-61 — For variant="danger", the confirm button gets focus. Safer pattern is to focus cancel to prevent accidental keyboard confirmation.
Fix: Auto-focus cancel button when variant === "danger".

---

🟡 P2 — Polish (10)

15. StreamSplitView.tsx — No touch support for pane resize (mobile can't resize)

~Lines 18-36 — Only mouse events. Touch users cannot resize terminal/transcript split.

16. TranscriptView.tsx — j/k navigation doesn't scroll into view

~Lines 105-116 — focusedIndex updates but virtualizer.scrollToIndex() is never called. Focus is invisible for off-screen items.

17. TranscriptView.tsx — Clipboard copy fails silently on non-HTTPS

~Lines 117-126 — navigator.clipboard.writeText() not wrapped in try/catch.

18. TranscriptView.tsx — Global keyboard listeners conflict across components

~Lines 105-130 — j/k handlers on window don't check if transcript is active. Can fire while typing in other inputs.

19. DriverControlBar.tsx + PauseControlBar.tsx — No local double-click guard

~Lines 46-52 / 94-101 — Brief race window between click and parent isLoading propagation.

20. SessionTable.tsx — Dual page state (local + API) can desync

~Lines 80-86 — Local page and pagination from API response both track current page. UI shows stale page number on slow networks.

21. useSessionIntervention.ts — No SSE subscription (state goes stale)

Entire file — Only fetches on mount. Server-side intervention changes aren't reflected until manual refresh.

22. ConnectionBanner.tsx — Countdown loops infinitely with no attempt counter

~Line 28 — Resets to 5s forever. No indication of retry count or progress.

23. Layout.tsx — Mobile users have no way to open command palette

~Line 40 — Cmd+K disabled on touch, footer button hidden on mobile. Zero access.

24. CommandPalette.tsx — Hardcoded English placeholder

~Line 138 — Uses literal string instead of t() i18n function.

25. useSessionEvents.ts — void clearSession is a no-op dead expression

~Line 95 — Evaluates function reference and discards.

26. KeyboardShortcutsHelp/index.tsx + ToastContainer.tsx — Variable t shadows i18n useT()

~Lines 17 / 155 — const t = setTimeout(...) shadows the i18n function.

---

Summary

Severity	Count	Key Themes
P0	2	Stuck loading state, frozen countdown timer
P1	12	Double-click/submit, broken abort, missing touch handlers, dead shortcuts
P2	10+	Variable shadowing, i18n misses, mobile gaps, stale state

Recommended fix order:

1. P0 [P0] Prompt delivery verification — capture-pane after send-keys #1 — stuck loading in CreateSessionModal
2. P0 [P1] Session health check endpoint #2 — frozen approval TTL timer
3. P1 [Chore] Rename manus → aegis (service, tmux, config paths) #3 — double-approve protection on ApprovalBanner
4. P1 feat: prompt delivery verification via capture-pane #10-11 — HoldButton touch fixes
5. P1 [P0] CRITICAL: CC Bridge reuses OLD Claude sessions — stale claudeSessionId assignment #6-7 — NewSessionDrawer abort + addRecentDir on failure

[OneStepAt4time]

Verified both P0 items on current develop:

P0 #1 — Loading state stuck on validation failure: Already fixed. setLoading(false) is called in the validation-failure return path before the early return (line ~172 of CreateSessionModal.tsx).

P0 #2 — Frozen countdown timer: Already fixed. The { ...prev } spread has been replaced with a dedicated tick state counter. liveRemainingMs now recomputes via useMemo([pendingApproval?.expiresAt, tick]), so the countdown decrements every second correctly.

The remaining items in this audit issue have individual tracking issues. Closing as the meta-issue is resolved — individual bugs are tracked separately.