Skip to content

feat: mobile responsive layout for dev console#73

Merged
cristipufu merged 4 commits intomainfrom
fix/header-height-alignment
Feb 17, 2026
Merged

feat: mobile responsive layout for dev console#73
cristipufu merged 4 commits intomainfrom
fix/header-height-alignment

Conversation

@cristipufu
Copy link
Member

@cristipufu cristipufu commented Feb 17, 2026

Summary

  • fix: align header heights across dev console panels — Standardize header heights (h-10 / 33px) across sidebar, run details tab bar, and setup view header
  • perf: code-split frontend bundle with lazy loading and manual chunks — Split vendor-react, vendor-reactflow, vendor-elk, and ChatPanel into separate chunks via Vite manual chunks config
  • feat: overhaul demo mock runtimes for realistic preview — Replace greeting/numbers mocks with invoice, movies, and pharma runtimes; enhance support and telemetry mocks with richer traces and state events
  • feat: mobile responsive layout for dev console — Vertical stacked layout below 768px with drawer sidebar, unified tab navigation (Traces/Chat/I/O/Logs), touch-enabled resize handles, and 100dvh viewport fix

Test plan

  • Open devtools → toggle device toolbar (iPhone 14 Pro, 393×852)
  • Verify sidebar opens as drawer overlay with hamburger button, closes on run select
  • Create new run → graph displays at 40vh, tabs below (Traces/Chat/I/O/Logs)
  • Chat mode auto-selects Chat tab on mobile
  • Desktop layout unchanged when resizing above 768px
  • Resize handles work with touch on tablets
  • Header heights aligned across all panels (h-10)
  • Bundle splits load correctly (check network tab for separate chunks)

🤖 Generated with Claude Code

cristipufu and others added 4 commits February 17, 2026 08:38
Use explicit h-10 (40px) on sidebar header, debug controls, and
events/i/o/logs tab bar for consistent visual alignment.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Lazy-load ChatPanel (react-markdown + highlight.js) and elkjs to reduce
initial bundle from 2,254 KB to 83 KB. Split react, reactflow, and elk
into separate cacheable vendor chunks.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
- Rename greeting → pharma compliance review (complex graph with cycles, rich OTEL spans)
- Rename numbers → invoice processing (fraud check, approval routing, cycles)
- Add chat streaming + tool calls to movies runtime (new file)
- Add tool approval (HITL interrupt) to support chat runtime
- Add rich span attributes (inputs/outputs) to all runtimes
- Make chat runtimes cycle through turns sequentially instead of keyword matching
- Rename files/classes to match actual runtime content
- Remove noisy dispose() log lines

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Switch to vertical stacked layout on screens < 768px with drawer
sidebar, unified tab navigation, and touch-enabled resize handles.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
@cristipufu cristipufu merged commit 244c2f9 into main Feb 17, 2026
11 checks passed
@cristipufu cristipufu deleted the fix/header-height-alignment branch February 17, 2026 08:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments