Console Explorer — Border Toggle (v2, CR-001) MOCKUP
Border Toggle — Click-to-Collapse/Expand via Resize Handle
This mockup demonstrates CR-001: clicking the resize handle (border) toggles the session explorer panel. The handle shows a ‹/› chevron, collapses/expands with a 0.25s ease transition, and remains visible in all states. Drag-resize behavior is unchanged.
Scenarios
❯ npm run build
✓ Compiled 47 modules in 1.2s
✓ Bundle size: 142kb (gzip: 38kb)
─────────────────────────────────
❯ npm test
PASS src/explorer.test.ts (0.8s)
✓ toggles on border click (12ms)
✓ preserves width on expand (8ms)
Tests: 2 passed, 2 total
❯
‹
Sessions 3
build-runner
2m ago
dev-server
14m ago
lint-check
1h ago
Resize Handle 5px wide · cursor: col-resize
hover → accent highlight
chevron: ‹ (collapse)
❯ npm run build
✓ Compiled 47 modules in 1.2s
✓ Bundle size: 142kb (gzip: 38kb)
─────────────────────────────────────────
❯ npm test
PASS src/explorer.test.ts (0.8s)
✓ toggles on border click (12ms)
✓ preserves width on expand (8ms)
Tests: 2 passed, 2 total
❯
Click detected (no drag) movement < 3px → toggle
width: 220px → 0
transition: 0.25s ease
Chevron flipped: ‹ → › indicates "click to expand"
⟵ panel collapses with 0.25s ease transition ⟶
❯ npm run build
✓ Compiled 47 modules in 1.2s
✓ Bundle size: 142kb (gzip: 38kb)
──────────────────────────────────────────────────
❯ npm test -- --watch
PASS src/explorer.test.ts (0.8s)
✓ toggles on border click (12ms)
✓ preserves width on expand (8ms)
✓ drag > 3px resizes (5ms)
Tests: 3 passed, 3 total
Watching for changes...
❯
Click to expand
Collapsed State explorer width: 0
handle: 5px strip visible
cursor: pointer (not col-resize)
chevron: › (expand)
Full terminal width reclaimed content fills entire panel
❯ npm run build
✓ Compiled 47 modules in 1.2s
✓ Bundle size: 142kb (gzip: 38kb)
─────────────────────────────────
❯ npm test
PASS src/explorer.test.ts (0.8s)
✓ toggles on border click (12ms)
✓ preserves width on expand (8ms)
Tests: 2 passed, 2 total
❯
‹
Sessions 3
build-runner
2m ago
dev-server
14m ago
lint-check
1h ago
Click detected → Expand width: 0 → 220px
transition: 0.25s ease
chevron: › → ‹
Previous width restored remembers last width before collapse
⟶ panel expands back to 220px with 0.25s ease ⟵
❯ npm run build
✓ Compiled 47 modules in 1.2s
─────────────────────────────
❯ npm test
PASS src/explorer.test.ts
✓ drag resize (5ms)
Tests: 1 passed
❯
‹
Sessions 3
build-runner
2m ago
dev-server
14m ago
lint-check
1h ago
Drag Resize (unchanged) mousedown + move > 3px → resize
cursor: col-resize
no transition during drag
Click vs Drag threshold movement ≤ 3px → toggle (click)
movement > 3px → resize (drag)
⟷
drag shown at 280px — resized from default 220px
❯ npm run dev
✓ Server running on http://localhost:3000
✓ HMR enabled
──────────────────────────────────────
❯ echo "Click the border to toggle →"
Click the border to toggle →
❯
‹
Sessions 3
build-runner
2m ago
dev-server
14m ago
lint-check
1h ago
state: expanded · width: 220px · click handle to toggle