feat(grid): desktop split-grid watch board — v1 (single/1×2/2×2)
When several sessions are open on a large screen (≥1024px), the terminal
area can split into 1×2 or 2×2 so multiple LIVE, interactive terminals show
at once — a monitoring convenience for vibe-coding several Claude sessions.
Design keeps activeIndex as the single focused pane, so keybar/voice/approval
routing is unchanged; a new gridLayout + derived visible-set lets several
.term-cell wrappers show together inside a CSS-grid #term. The server and WS
protocol are untouched.
- public/grid-layout.ts (new): layout types/capacity, visibleIndices,
matchMedia desktop gate (GRID_MIN_WIDTH=1024), persistence, toolbar toggle.
- tabs.ts: pane→.term-cell wrapper (header + terminal + inline-approve footer);
applyLayout() owns show/hide + grid class + cell order + placeholders;
board-aware activate() (never focuses a hidden pane); setFocused/setGridLayout
delegate to it; renderCell/renderInlineApprove; refitVisible; notification
suppression for on-screen panes (factoring in the home overlay).
- terminal-session.ts: show({focus}) so non-focused quadrants don't steal
keyboard focus; onFocus callback (capture-phase pointerdown).
- main.ts: mount the toggle; window-focus refit → refitVisible.
- style.css: cell/grid model (.term-pane → relative flex child), focus ring,
pending pulse, inline approve, placeholder, toggle + coarse-pointer targets.
- tests: grid-layout.test.ts + split-grid block in tabs.test.ts (+33).
Adversarial review (4 lenses → per-finding verify) caught and fixed a HIGH:
activate() was not board-aware, so opening a tab on a full grid focused a
hidden pane (typing into an invisible session). Verified: typecheck + build:web
clean, 1566 tests pass, grid-layout 95% / tabs 94% coverage.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
@@ -1032,3 +1032,240 @@ describe('TabApp — VC voice command mapping (context-gated confirm/reject)', (
|
||||
expect(session.approve).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('TabApp — split-grid watch board (v1)', () => {
|
||||
/** Open `n` tabs and return the TabApp + its paneHost/tabBar. */
|
||||
function withTabs(n: number): {
|
||||
app: InstanceType<typeof TabApp>
|
||||
paneHost: HTMLElement
|
||||
tabBar: HTMLElement
|
||||
} {
|
||||
const { paneHost, tabBar } = makeHosts()
|
||||
const app = new TabApp(paneHost, tabBar)
|
||||
for (let i = 0; i < n; i++) app.newTab()
|
||||
return { app, paneHost, tabBar }
|
||||
}
|
||||
const realCells = (host: HTMLElement): HTMLElement[] =>
|
||||
[...host.querySelectorAll<HTMLElement>('.term-cell:not(.slot-empty)')]
|
||||
const visibleReal = (host: HTMLElement): HTMLElement[] =>
|
||||
realCells(host).filter((c) => c.style.display !== 'none')
|
||||
|
||||
it('defaults to single layout — one visible cell, no grid class, no placeholders', () => {
|
||||
const { paneHost } = withTabs(3)
|
||||
expect(paneHost.classList.contains('lay-single')).toBe(true)
|
||||
expect(visibleReal(paneHost)).toHaveLength(1)
|
||||
expect(paneHost.querySelectorAll('.slot-empty')).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('setGridLayout("grid-4") applies the class, persists, and getGridLayout reflects it', () => {
|
||||
const { app, paneHost } = withTabs(2)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(app.getGridLayout()).toBe('grid-4')
|
||||
expect(paneHost.classList.contains('lay-grid-4')).toBe(true)
|
||||
expect(localStorage.getItem('web-terminal:grid-layout')).toBe('grid-4')
|
||||
})
|
||||
|
||||
it('grid-4 with 2 tabs shows 2 live cells + 2 empty placeholders', () => {
|
||||
const { app, paneHost } = withTabs(2)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(visibleReal(paneHost)).toHaveLength(2)
|
||||
expect(paneHost.querySelectorAll('.slot-empty')).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('grid-4 with 5 tabs shows exactly the first 4, none as placeholders', () => {
|
||||
const { app, paneHost } = withTabs(5)
|
||||
app.focusTab(0)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(visibleReal(paneHost)).toHaveLength(4)
|
||||
expect(paneHost.querySelectorAll('.slot-empty')).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('exactly one visible cell carries the focus ring', () => {
|
||||
const { app, paneHost } = withTabs(3)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(paneHost.querySelectorAll('.term-cell.focused')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('clicking a quadrant (onFocus) moves the focus ring to it', () => {
|
||||
const { app, paneHost } = withTabs(3)
|
||||
app.focusTab(0)
|
||||
app.setGridLayout('grid-4')
|
||||
// Simulate a pointerdown inside tab 2's pane.
|
||||
const inst2 = FakeTerminalSession.instances[2]!
|
||||
;(inst2.cbs as { onFocus?: () => void }).onFocus?.()
|
||||
const focused = paneHost.querySelector<HTMLElement>('.term-cell.focused .cell-name')
|
||||
expect(focused?.textContent).toBe('Term 3')
|
||||
})
|
||||
|
||||
it('a non-focused pending tool-gate quadrant shows inline ✓/✗ that resolve it', () => {
|
||||
const { app, paneHost } = withTabs(2)
|
||||
app.focusTab(1) // focus tab 1; tab 0 is the background quadrant
|
||||
app.setGridLayout('grid-4')
|
||||
const bg = FakeTerminalSession.instances[0]!
|
||||
bg.pendingApproval = true
|
||||
bg.pendingGate = 'tool'
|
||||
bg.pendingTool = 'Bash'
|
||||
bg.claudeStatus = 'waiting'
|
||||
bg.cbs.onClaudeStatus?.('waiting')
|
||||
|
||||
const cell0 = realCells(paneHost)[0]!
|
||||
const approve = cell0.querySelector<HTMLButtonElement>('.cell-approve-yes')
|
||||
const reject = cell0.querySelector<HTMLButtonElement>('.cell-approve-no')
|
||||
expect(approve).not.toBeNull()
|
||||
approve!.click()
|
||||
expect(bg.approve).toHaveBeenCalledTimes(1)
|
||||
reject!.click()
|
||||
expect(bg.reject).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('the FOCUSED pending pane gets no inline footer (it uses the global bar)', () => {
|
||||
const { app, paneHost } = withTabs(2)
|
||||
app.setGridLayout('grid-4') // activeIndex = 1 (last opened)
|
||||
const focused = FakeTerminalSession.instances[1]!
|
||||
focused.pendingApproval = true
|
||||
focused.pendingGate = 'tool'
|
||||
focused.claudeStatus = 'waiting'
|
||||
focused.cbs.onClaudeStatus?.('waiting')
|
||||
const cell1 = realCells(paneHost)[1]!
|
||||
expect(cell1.querySelector('.cell-approve')).toBeNull()
|
||||
})
|
||||
|
||||
it('suppresses the OS notification for an on-board (visible) pending quadrant', () => {
|
||||
const NotificationMock = vi.fn()
|
||||
;(NotificationMock as unknown as { permission: string }).permission = 'granted'
|
||||
vi.stubGlobal('Notification', NotificationMock)
|
||||
const { app } = withTabs(2)
|
||||
app.focusTab(1)
|
||||
app.setGridLayout('grid-4')
|
||||
const bg = FakeTerminalSession.instances[0]! // visible, non-focused
|
||||
bg.claudeStatus = 'waiting'
|
||||
bg.cbs.onClaudeStatus?.('waiting')
|
||||
expect(NotificationMock).not.toHaveBeenCalled()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
it('still notifies for an OFF-board tab that needs approval', () => {
|
||||
const NotificationMock = vi.fn()
|
||||
;(NotificationMock as unknown as { permission: string }).permission = 'granted'
|
||||
vi.stubGlobal('Notification', NotificationMock)
|
||||
const { app } = withTabs(5)
|
||||
app.focusTab(0) // keep order; tab 4 stays off-board
|
||||
app.setGridLayout('grid-4')
|
||||
const off = FakeTerminalSession.instances[4]! // idx 4 — off the 2×2 board
|
||||
off.claudeStatus = 'waiting'
|
||||
off.cbs.onClaudeStatus?.('waiting')
|
||||
expect(NotificationMock).toHaveBeenCalled()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
it('a placeholder "+ New session" opens another tab', () => {
|
||||
const { app, paneHost } = withTabs(2)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(app.snapshot()).toHaveLength(2)
|
||||
const slot = paneHost.querySelector<HTMLButtonElement>('.slot-empty .slot-new')!
|
||||
slot.click()
|
||||
expect(app.snapshot()).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('closing the focused quadrant removes its cell wrapper', () => {
|
||||
const { app, paneHost } = withTabs(3)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(realCells(paneHost)).toHaveLength(3)
|
||||
app.closeTab(app.snapshot().findIndex((t) => t.active))
|
||||
expect(realCells(paneHost)).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('narrowing back to single restores one visible cell and drops placeholders', () => {
|
||||
const { app, paneHost } = withTabs(2)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(paneHost.querySelectorAll('.slot-empty')).toHaveLength(2)
|
||||
app.setGridLayout('single')
|
||||
expect(paneHost.classList.contains('lay-single')).toBe(true)
|
||||
expect(visibleReal(paneHost)).toHaveLength(1)
|
||||
expect(paneHost.querySelectorAll('.slot-empty')).toHaveLength(0)
|
||||
})
|
||||
|
||||
// ── Board-aware focus (regression: activate() must never focus a hidden pane) ──
|
||||
|
||||
it('opening a new tab while the grid board is full keeps the focused pane visible', () => {
|
||||
const { app, paneHost } = withTabs(4)
|
||||
app.focusTab(0)
|
||||
app.setGridLayout('grid-4') // board full (4/4)
|
||||
app.newTab() // 5th tab — must be pulled onto the board, not left hidden
|
||||
const focused = paneHost.querySelector<HTMLElement>('.term-cell.focused')
|
||||
expect(focused).not.toBeNull()
|
||||
expect(focused!.style.display).not.toBe('none')
|
||||
expect(paneHost.querySelectorAll('.term-cell.focused')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('clicking an off-board tab in the tab bar pulls it onto the board and focuses it', () => {
|
||||
const { app, tabBar } = withTabs(5)
|
||||
app.focusTab(0)
|
||||
app.setGridLayout('grid-4') // tab 4 is off the 2×2 board
|
||||
const offSession = FakeTerminalSession.instances[4]! // identity survives reordering
|
||||
tabBar.querySelectorAll<HTMLElement>('.tab')[4]!.dispatchEvent(
|
||||
new Event('pointerdown', { bubbles: true }),
|
||||
)
|
||||
const cell = offSession.el.closest<HTMLElement>('.term-cell')!
|
||||
expect(cell.classList.contains('focused')).toBe(true)
|
||||
expect(cell.style.display).not.toBe('none')
|
||||
})
|
||||
|
||||
it('shrinking the layout moves an off-board active pane back onto the board', () => {
|
||||
const { app } = withTabs(4)
|
||||
app.focusTab(3) // active index 3 (the 4th session)
|
||||
const active = FakeTerminalSession.instances[3]!
|
||||
app.setGridLayout('split-2') // cap 2 → index 3 is now off-board
|
||||
expect(app.getGridLayout()).toBe('split-2')
|
||||
const cell = active.el.closest<HTMLElement>('.term-cell')!
|
||||
expect(cell.classList.contains('focused')).toBe(true)
|
||||
expect(cell.style.display).not.toBe('none')
|
||||
})
|
||||
|
||||
// ── refitVisible / show(focus) / home overlay ────────────────────────────────
|
||||
|
||||
it('refitVisible refits only the on-board panes', () => {
|
||||
const { app } = withTabs(5)
|
||||
app.focusTab(0)
|
||||
app.setGridLayout('grid-4') // tabs 0-3 visible, tab 4 off-board
|
||||
FakeTerminalSession.instances.forEach((i) => i.refit.mockClear())
|
||||
app.refitVisible()
|
||||
for (let i = 0; i < 4; i++) expect(FakeTerminalSession.instances[i]!.refit).toHaveBeenCalled()
|
||||
expect(FakeTerminalSession.instances[4]!.refit).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('only the focused quadrant is shown with keyboard focus (focus: false for the rest)', () => {
|
||||
const { app } = withTabs(3)
|
||||
app.setGridLayout('grid-4') // active = tab 2 (last opened)
|
||||
expect(FakeTerminalSession.instances[2]!.show.mock.lastCall).toEqual([{ focus: true }])
|
||||
expect(FakeTerminalSession.instances[0]!.show.mock.lastCall).toEqual([{ focus: false }])
|
||||
expect(FakeTerminalSession.instances[1]!.show.mock.lastCall).toEqual([{ focus: false }])
|
||||
})
|
||||
|
||||
it('the ⌂ home overlay hides every grid pane, then restores the board on toggle back', () => {
|
||||
const { app, paneHost, tabBar } = withTabs(3)
|
||||
app.setGridLayout('grid-4')
|
||||
expect(visibleReal(paneHost).length).toBeGreaterThan(0)
|
||||
const home = tabBar.querySelector<HTMLButtonElement>('.tab-home')!
|
||||
home.click() // overlay home
|
||||
expect(visibleReal(paneHost)).toHaveLength(0)
|
||||
expect(paneHost.querySelectorAll('.slot-empty')).toHaveLength(0)
|
||||
home.click() // back to the terminals
|
||||
expect(visibleReal(paneHost)).toHaveLength(3)
|
||||
expect(paneHost.querySelectorAll('.term-cell.focused')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does NOT suppress the notification for a pending pane hidden behind the home overlay', () => {
|
||||
const NotificationMock = vi.fn()
|
||||
;(NotificationMock as unknown as { permission: string }).permission = 'granted'
|
||||
vi.stubGlobal('Notification', NotificationMock)
|
||||
const { app, tabBar } = withTabs(2)
|
||||
app.setGridLayout('grid-4')
|
||||
tabBar.querySelector<HTMLButtonElement>('.tab-home')!.click() // home overlay up
|
||||
const bg = FakeTerminalSession.instances[0]! // on-board by layout, but behind home
|
||||
bg.claudeStatus = 'waiting'
|
||||
bg.cbs.onClaudeStatus?.('waiting')
|
||||
expect(NotificationMock).toHaveBeenCalled()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user