diff --git a/web/src/App.tsx b/web/src/App.tsx
index 7ab0798c2..1739cbb8a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -117,7 +117,7 @@ function AppInner() {
         }
     }, [goBack, pathname])
     const queryClient = useQueryClient()
-    const sessionMatch = matchRoute({ to: '/sessions/$sessionId' })
+    const sessionMatch = matchRoute({ to: '/sessions/$sessionId', fuzzy: true })
     const selectedSessionId = sessionMatch && sessionMatch.sessionId !== 'new' ? sessionMatch.sessionId : null
     const { isSyncing, startSync, endSync } = useSyncingState()
     const [sseDisconnected, setSseDisconnected] = useState(false)
@@ -230,14 +230,30 @@ function AppInner() {
     }, [])
 
     const handleSseEvent = useCallback(() => {}, [])
+    const isGridRoute = matchRoute({ to: '/grid' })
     const handleToast = useCallback((event: ToastEvent) => {
+        // In the grid parent frame, notify GridView via CustomEvent then suppress the card
+        if (isGridRoute) {
+            window.dispatchEvent(new CustomEvent('grid-toast', { detail: { sessionId: event.data.sessionId } }))
+            return
+        }
+        // In grid view iframes, notify the parent frame and filter by session
+        const isInIframe = window.self !== window.top
+        if (isInIframe) {
+            if (event.data.sessionId && selectedSessionId && event.data.sessionId !== selectedSessionId) {
+                return
+            }
+            // Forward to parent GridView
+            window.parent.postMessage({ type: 'grid-cell-toast', sessionId: event.data.sessionId }, '*')
+            return
+        }
         addToast({
             title: event.data.title,
             body: event.data.body,
             sessionId: event.data.sessionId,
             url: event.data.url
         })
-    }, [addToast])
+    }, [addToast, selectedSessionId, isGridRoute])
 
     const eventSubscription = useMemo(() => {
         if (selectedSessionId) {
diff --git a/web/src/components/AssistantChat/ComposerButtons.tsx b/web/src/components/AssistantChat/ComposerButtons.tsx
index 2777c9056..3d14342ac 100644
--- a/web/src/components/AssistantChat/ComposerButtons.tsx
+++ b/web/src/components/AssistantChat/ComposerButtons.tsx
@@ -1,6 +1,13 @@
+import { useMemo } from 'react'
 import { ComposerPrimitive } from '@assistant-ui/react'
 import type { ConversationStatus } from '@/realtime/types'
 import { useTranslation } from '@/lib/use-translation'
+import type { AgentState, PermissionMode, CodexCollaborationMode } from '@/types/api'
+import { getConnectionStatus, getContextWarning } from '@/components/AssistantChat/StatusBar'
+import { getContextBudgetTokens } from '@/chat/modelConfig'
+import {
+    getPermissionModeLabel, getPermissionModeTone, getCodexCollaborationModeLabel, isPermissionModeAllowedForFlavor
+} from '@hapi/protocol'
 
 function VoiceAssistantIcon() {
     return (
@@ -319,10 +326,52 @@ export function ComposerButtons(props: {
     onVoiceToggle: () => void
     onVoiceMicToggle?: () => void
     onSend: () => void
+    // Status bar props
+    active?: boolean
+    thinking?: boolean
+    agentState?: AgentState | null
+    backgroundTaskCount?: number
+    contextSize?: number
+    model?: string | null
+    agentFlavor?: string | null
+    permissionMode?: PermissionMode
+    collaborationMode?: CodexCollaborationMode
 }) {
     const { t } = useTranslation()
     const isVoiceConnected = props.voiceStatus === 'connected'
 
+    const connectionStatus = useMemo(
+        () => getConnectionStatus(
+            props.active ?? true,
+            props.thinking ?? false,
+            props.agentState,
+            props.voiceStatus,
+            props.backgroundTaskCount ?? 0,
+            t
+        ),
+        [props.active, props.thinking, props.agentState, props.voiceStatus, props.backgroundTaskCount, t]
+    )
+
+    const contextWarning = useMemo(() => {
+        if (props.contextSize === undefined) return null
+        const max = getContextBudgetTokens(props.model, props.agentFlavor)
+        if (!max) return null
+        return getContextWarning(props.contextSize, max, t)
+    }, [props.contextSize, props.model, props.agentFlavor, t])
+
+    const permissionToneClasses: Record<string, string> = {
+        neutral: 'text-[var(--app-hint)]', info: 'text-blue-500', warning: 'text-amber-500', danger: 'text-red-500'
+    }
+    const displayPermissionMode = props.permissionMode
+        && isPermissionModeAllowedForFlavor(props.permissionMode, props.agentFlavor)
+        ? props.permissionMode : null
+    const permissionLabel = displayPermissionMode ? getPermissionModeLabel(displayPermissionMode) : null
+    const permissionColor = displayPermissionMode && displayPermissionMode !== 'default'
+        ? (permissionToneClasses[getPermissionModeTone(displayPermissionMode)] ?? 'text-[var(--app-hint)]')
+        : 'text-[var(--app-hint)]'
+    const collaborationLabel = props.agentFlavor === 'codex' && props.collaborationMode === 'plan'
+        ? getCodexCollaborationModeLabel(props.collaborationMode) : null
+
     return (
         <div className="flex items-center justify-between px-2 pb-2">
             <div className="flex items-center gap-1">
@@ -404,6 +453,25 @@ export function ComposerButtons(props: {
                 ) : null}
             </div>
 
+            {/* Status area: left=dot+status+context, right=mode labels */}
+            <div className="flex items-center justify-between mx-2 min-w-0 flex-1">
+                <div className="flex items-center gap-1 min-w-0">
+                    <span className={`h-1.5 w-1.5 rounded-full flex-shrink-0 ${connectionStatus.dotColor} ${connectionStatus.isPulsing ? 'animate-pulse' : ''}`} />
+                    <span className={`text-[10px] leading-none truncate ${connectionStatus.color}`}>{connectionStatus.text}</span>
+                    {contextWarning ? (
+                        <span className={`text-[10px] leading-none whitespace-nowrap flex-shrink-0 ${contextWarning.color}`}>· {contextWarning.text}</span>
+                    ) : null}
+                </div>
+                <div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
+                    {collaborationLabel ? (
+                        <span className="text-[10px] leading-none text-blue-500">{collaborationLabel}</span>
+                    ) : null}
+                    {permissionLabel ? (
+                        <span className={`text-[10px] leading-none ${permissionColor}`}>{permissionLabel}</span>
+                    ) : null}
+                </div>
+            </div>
+
             <UnifiedButton
                 canSend={props.canSend}
                 voiceStatus={props.voiceStatus}
diff --git a/web/src/components/AssistantChat/HappyComposer.tsx b/web/src/components/AssistantChat/HappyComposer.tsx
index 6d0e20d3d..56433112f 100644
--- a/web/src/components/AssistantChat/HappyComposer.tsx
+++ b/web/src/components/AssistantChat/HappyComposer.tsx
@@ -25,7 +25,6 @@ import { markSkillUsed } from '@/lib/recent-skills'
 import { useComposerDraft } from '@/hooks/useComposerDraft'
 import { FloatingOverlay } from '@/components/ChatInput/FloatingOverlay'
 import { Autocomplete } from '@/components/ChatInput/Autocomplete'
-import { StatusBar } from '@/components/AssistantChat/StatusBar'
 import { ComposerButtons } from '@/components/AssistantChat/ComposerButtons'
 import { AttachmentItem } from '@/components/AssistantChat/AttachmentItem'
 import { useTranslation } from '@/lib/use-translation'
@@ -400,7 +399,11 @@ export function HappyComposer(props: {
             end: e.target.selectionEnd
         }
         setInputState({ text: e.target.value, selection })
-    }, [])
+        // Notify parent GridView to clear notification dot when user starts typing
+        if (window.self !== window.top && sessionId) {
+            window.parent.postMessage({ type: 'grid-cell-typing', sessionId }, '*')
+        }
+    }, [sessionId])
 
     const handleSelect = useCallback((e: ReactSyntheticEvent<HTMLTextAreaElement>) => {
         const target = e.target as HTMLTextAreaElement
@@ -754,19 +757,6 @@ export function HappyComposer(props: {
                 <ComposerPrimitive.Root className="relative" onSubmit={handleSubmit}>
                     {overlays}
 
-                    <StatusBar
-                        active={active}
-                        thinking={thinking}
-                        agentState={agentState}
-                        backgroundTaskCount={backgroundTaskCount}
-                        contextSize={contextSize}
-                        model={model}
-                        permissionMode={permissionMode}
-                        collaborationMode={collaborationMode}
-                        agentFlavor={agentFlavor}
-                        voiceStatus={voiceStatus}
-                    />
-
                     <div className="overflow-hidden rounded-[20px] bg-[var(--app-secondary-bg)]">
                         {attachments.length > 0 ? (
                             <div className="flex flex-wrap gap-2 px-4 pt-3">
@@ -814,6 +804,15 @@ export function HappyComposer(props: {
                             onVoiceToggle={onVoiceToggle ?? (() => {})}
                             onVoiceMicToggle={onVoiceMicToggle}
                             onSend={handleSend}
+                            active={active}
+                            thinking={thinking}
+                            agentState={agentState}
+                            backgroundTaskCount={backgroundTaskCount}
+                            contextSize={contextSize}
+                            model={model}
+                            agentFlavor={agentFlavor}
+                            permissionMode={permissionMode}
+                            collaborationMode={collaborationMode}
                         />
                     </div>
                 </ComposerPrimitive.Root>
diff --git a/web/src/components/AssistantChat/HappyThread.tsx b/web/src/components/AssistantChat/HappyThread.tsx
index 48e9a57ba..59cb58f84 100644
--- a/web/src/components/AssistantChat/HappyThread.tsx
+++ b/web/src/components/AssistantChat/HappyThread.tsx
@@ -160,6 +160,47 @@ export function HappyThread(props: {
         onFlushPendingRef.current()
     }, [])
 
+    // Alt+[/] — jump to prev/next message; Alt+Shift+[/] — scroll up/down
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (!e.altKey || e.metaKey || e.ctrlKey) return
+            const isBracketLeft = e.code === 'BracketLeft'
+            const isBracketRight = e.code === 'BracketRight'
+            if (!isBracketLeft && !isBracketRight) return
+            e.preventDefault()
+            e.stopPropagation()
+            const viewport = viewportRef.current
+            if (!viewport) return
+
+            if (e.shiftKey) {
+                // Jump to prev/next message
+                const messages = Array.from(viewport.querySelectorAll('.happy-thread-messages > *')) as HTMLElement[]
+                if (messages.length === 0) return
+                const scrollTop = viewport.scrollTop
+                if (isBracketLeft) {
+                    let target: HTMLElement | null = null
+                    for (let i = messages.length - 1; i >= 0; i--) {
+                        if (messages[i].offsetTop < scrollTop - 8) { target = messages[i]; break }
+                    }
+                    viewport.scrollTo({ top: target ? target.offsetTop : 0, behavior: 'smooth' })
+                } else {
+                    for (let i = 0; i < messages.length; i++) {
+                        if (messages[i].offsetTop > scrollTop + 8) {
+                            viewport.scrollTo({ top: messages[i].offsetTop, behavior: 'smooth' })
+                            break
+                        }
+                    }
+                }
+            } else {
+                // Scroll by ~40% of viewport height
+                const amount = viewport.clientHeight * 0.4
+                viewport.scrollBy({ top: isBracketLeft ? -amount : amount, behavior: 'smooth' })
+            }
+        }
+        document.addEventListener('keydown', handler, true)
+        return () => document.removeEventListener('keydown', handler, true)
+    }, [])
+
     // Reset state when session changes
     useEffect(() => {
         setAutoScrollEnabled(true)
@@ -280,7 +321,7 @@ export function HappyThread(props: {
             <ThreadPrimitive.Root className="flex min-h-0 flex-1 flex-col relative">
                 <ThreadPrimitive.Viewport asChild autoScroll={autoScrollEnabled}>
                     <div ref={viewportRef} className="app-scroll-y min-h-0 flex-1 overflow-x-hidden">
-                        <div className="mx-auto w-full max-w-content min-w-0 p-3">
+                        <div className={`w-full min-w-0 p-3 ${window.self !== window.top ? '' : 'mx-auto max-w-content'}`}>
                             <div ref={topSentinelRef} className="h-px w-full" aria-hidden="true" />
                             {showSkeleton ? (
                                 <MessageSkeleton />
diff --git a/web/src/components/AssistantChat/StatusBar.tsx b/web/src/components/AssistantChat/StatusBar.tsx
index 4527311bc..3d2ede2ee 100644
--- a/web/src/components/AssistantChat/StatusBar.tsx
+++ b/web/src/components/AssistantChat/StatusBar.tsx
@@ -37,7 +37,7 @@ const PERMISSION_TONE_CLASSES: Record<PermissionModeTone, string> = {
     danger: 'text-red-500'
 }
 
-function getConnectionStatus(
+export function getConnectionStatus(
     active: boolean,
     thinking: boolean,
     agentState: AgentState | null | undefined,
@@ -102,7 +102,7 @@ function getConnectionStatus(
     }
 }
 
-function getContextWarning(contextSize: number, maxContextSize: number, t: (key: string, params?: Record<string, string | number>) => string): { text: string; color: string } | null {
+export function getContextWarning(contextSize: number, maxContextSize: number, t: (key: string, params?: Record<string, string | number>) => string): { text: string; color: string } | null {
     const percentageUsed = (contextSize / maxContextSize) * 100
     const percentageRemaining = Math.max(0, 100 - percentageUsed)
 
diff --git a/web/src/components/GridView.tsx b/web/src/components/GridView.tsx
new file mode 100644
index 000000000..684afc3ce
--- /dev/null
+++ b/web/src/components/GridView.tsx
@@ -0,0 +1,445 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { useGlobalKeyboard } from '@/hooks/useGlobalKeyboard'
+import { SessionSearchModal } from '@/components/SessionSearchModal'
+import type { SessionSummary } from '@/types/api'
+
+function getSessionTitle(session: SessionSummary): string {
+    if (session.metadata?.name) return session.metadata.name
+    if ((session.metadata as any)?.summary?.text) return (session.metadata as any).summary.text
+    if (session.metadata?.path) {
+        const parts = session.metadata.path.split('/').filter(Boolean)
+        return parts.length > 0 ? parts[parts.length - 1] : session.id.slice(0, 8)
+    }
+    return session.id.slice(0, 8)
+}
+
+function getSessionFolder(session: SessionSummary): string {
+    const path = (session.metadata as any)?.worktree?.basePath ?? session.metadata?.path ?? ''
+    if (!path) return ''
+    const parts = path.split('/').filter(Boolean)
+    if (parts.length <= 1) return parts[0] ?? ''
+    return `${parts[parts.length - 2]}/${parts[parts.length - 1]}`
+}
+
+function GridIcon() {
+    return (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" />
+            <rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" />
+        </svg>
+    )
+}
+
+function BackIcon() {
+    return (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="15 18 9 12 15 6" />
+        </svg>
+    )
+}
+
+function CloseIcon() {
+    return (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+    )
+}
+
+type Props = {
+    sessions: SessionSummary[]
+    baseUrl: string
+    token: string
+}
+
+export function GridView({ sessions, baseUrl, token }: Props) {
+    const navigate = useNavigate()
+    const [pinnedIds, setPinnedIds] = useState<string[]>(() =>
+        sessions.filter(s => s.active).slice(0, 4).map(s => s.id)
+    )
+    const [expandedId, setExpandedId] = useState<string | null>(null)
+    const [focusedIdx, setFocusedIdx] = useState<number | null>(null)
+    const [isAddOpen, setIsAddOpen] = useState(false)
+    const [isReplaceOpen, setIsReplaceOpen] = useState(false)
+    const [replaceTargetIdx, setReplaceTargetIdx] = useState<number | null>(null)
+    const [stripMode, setStripMode] = useState(false)
+    const iframeRefs = useRef<(HTMLIFrameElement | null)[]>([])
+
+    // ── notification dot tracking ────────────────────────────────────────────
+    // notifiedIds: sessions with a pending notification (dot turns orange)
+    // flashingIds: currently playing the 3-flash animation
+    const [notifiedIds, setNotifiedIds] = useState<Set<string>>(new Set())
+    const [flashingIds, setFlashingIds] = useState<Set<string>>(new Set())
+
+    useEffect(() => {
+        const customHandler = (e: Event) => {
+            const sessionId: string | undefined = (e as CustomEvent).detail?.sessionId
+            if (!sessionId) return
+            setNotifiedIds(prev => new Set([...prev, sessionId]))
+            setFlashingIds(prev => new Set([...prev, sessionId]))
+        }
+        // postMessage from iframes (most reliable path)
+        const msgHandler = (e: MessageEvent) => {
+            const sessionId: string | undefined = e.data?.sessionId
+            if (!sessionId) return
+            if (e.data?.type === 'grid-cell-toast') {
+                setNotifiedIds(prev => new Set([...prev, sessionId]))
+                setFlashingIds(prev => new Set([...prev, sessionId]))
+            } else if (e.data?.type === 'grid-cell-typing') {
+                setNotifiedIds(prev => { const s = new Set(prev); s.delete(sessionId); return s })
+                setFlashingIds(prev => { const s = new Set(prev); s.delete(sessionId); return s })
+            }
+        }
+        window.addEventListener('grid-toast', customHandler)
+        window.addEventListener('message', msgHandler)
+        return () => {
+            window.removeEventListener('grid-toast', customHandler)
+            window.removeEventListener('message', msgHandler)
+        }
+    }, [])
+
+    // ── mutable ref holding latest actions ──────────────────────────────────
+    // setupIframeKeyboard is registered once per iframe (onLoad); it would
+    // capture stale closures if we used callbacks directly. Instead we read
+    // actionsRef.current so the handler always sees fresh state.
+    const actionsRef = useRef({
+        focusIframe: (_n: number) => {},
+        moveFocus: (_dir: 'h' | 'j' | 'k' | 'l') => {},
+        toggleStrip: () => {},
+        goBack: () => {},
+        openAddModal: () => {},
+        openReplaceModal: (_idx?: number) => {},
+        closeCell: (_idx?: number) => {},
+    })
+
+    // Rebuild actionsRef on every render so it always closes over current state
+    actionsRef.current = {
+        focusIframe(n: number) {
+            const idx = n - 1
+            const iframe = iframeRefs.current[idx]
+            if (!iframe) return
+            setFocusedIdx(idx)
+            try {
+                iframe.contentWindow?.focus()
+                const textarea = iframe.contentDocument?.querySelector('textarea')
+                textarea?.focus()
+            } catch { iframe.focus() }
+        },
+        toggleStrip() { setStripMode(prev => !prev) },
+        goBack() { navigate({ to: '/sessions' }) },
+        moveFocus(dir: 'h' | 'j' | 'k' | 'l') {
+            const total = pinnedIds.length
+            if (total === 0) return
+            const current = focusedIdx ?? 0
+            // Effective cols for navigation: treat 5-panel as 3-col
+            const navCols = total <= 1 ? 1 : total === 3 ? 3 : total <= 4 ? 2 : total === 5 ? 3 : 3
+            let next = current
+            if (dir === 'h') next = current % navCols > 0 ? current - 1 : current
+            else if (dir === 'l') next = current % navCols < navCols - 1 && current + 1 < total ? current + 1 : current
+            else if (dir === 'k') next = current - navCols >= 0 ? current - navCols : (current - 1 + total) % total
+            else if (dir === 'j') next = current + navCols < total ? current + navCols : (current + 1) % total
+            if (next !== current) actionsRef.current.focusIframe(next + 1)
+        },
+        openAddModal() {
+            setIsAddOpen(true)
+        },
+        // idx: explicit index from iframe handler (-1 = unknown, fall back to focusedIdx)
+        openReplaceModal(idx?: number) {
+            const target = idx !== undefined && idx >= 0 ? idx : focusedIdx
+            setReplaceTargetIdx(target)
+            setIsReplaceOpen(true)
+        },
+        closeCell(idx?: number) {
+            const target = idx !== undefined && idx >= 0 ? idx : focusedIdx
+            if (target === null || target === undefined) return
+            const id = pinnedIds[target]
+            if (!id) return
+            setPinnedIds(prev => prev.filter(p => p !== id))
+            setExpandedId(prev => prev === id ? null : prev)
+            setFocusedIdx(null)
+        },
+    }
+    // ────────────────────────────────────────────────────────────────────────
+
+    const addSession = useCallback((id: string) => {
+        setPinnedIds(prev => prev.includes(id) ? prev : [...prev.slice(-5), id])
+    }, [])
+
+    const removeSession = useCallback((id: string) => {
+        setPinnedIds(prev => prev.filter(p => p !== id))
+        setExpandedId(prev => prev === id ? null : prev)
+        setFocusedIdx(null)
+    }, [])
+
+    const replaceCell = useCallback((session: SessionSummary) => {
+        if (replaceTargetIdx === null) {
+            addSession(session.id)
+            return
+        }
+        setPinnedIds(prev => {
+            const next = [...prev]
+            next[replaceTargetIdx] = session.id
+            return next
+        })
+        setFocusedIdx(replaceTargetIdx)
+        setReplaceTargetIdx(null)
+    }, [replaceTargetIdx, addSession])
+
+    // Inject keyboard listener into iframe — uses actionsRef so no stale closures.
+    // setupIframeKeyboard itself has no deps and is stable forever.
+    const setupIframeKeyboard = useCallback((iframe: HTMLIFrameElement) => {
+        const win = iframe.contentWindow
+        if (!win) return
+
+        const handler = (e: KeyboardEvent) => {
+            // Alt+h/j/k/l — move focus between grid cells (vim-style)
+            if (e.altKey && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
+                const dir = e.code === 'KeyH' ? 'h' : e.code === 'KeyJ' ? 'j' : e.code === 'KeyK' ? 'k' : e.code === 'KeyL' ? 'l' : null
+                if (dir) { e.preventDefault(); e.stopPropagation(); actionsRef.current.moveFocus(dir as 'h'|'j'|'k'|'l'); return }
+            }
+            if (!e.metaKey) return
+            // Resolve which cell this iframe is — used for replace/close
+            const myIdx = iframeRefs.current.findIndex(ref => ref?.contentWindow === win)
+            // Cmd+; — go back to sessions list
+            if (e.key === ';' && !e.shiftKey) {
+                e.preventDefault(); e.stopPropagation()
+                actionsRef.current.goBack()
+                return
+            }
+            // Cmd+' — toggle strip/grid layout
+            if (e.key === "'" && !e.shiftKey) {
+                e.preventDefault(); e.stopPropagation()
+                actionsRef.current.toggleStrip()
+                return
+            }
+            // Cmd+K — add session to grid
+            if ((e.key === 'k' || e.key === 'K') && !e.shiftKey) {
+                e.preventDefault(); e.stopPropagation()
+                actionsRef.current.openAddModal()
+                return
+            }
+            // Cmd+Shift+F — replace THIS cell
+            if ((e.key === 'f' || e.key === 'F') && e.shiftKey) {
+                e.preventDefault(); e.stopPropagation()
+                actionsRef.current.openReplaceModal(myIdx)
+                return
+            }
+            // Cmd+Shift+X — close THIS cell
+            if ((e.key === 'x' || e.key === 'X') && e.shiftKey) {
+                e.preventDefault(); e.stopPropagation()
+                actionsRef.current.closeCell(myIdx)
+                return
+            }
+            // Cmd+1-9 — focus nth grid cell
+            const n = parseInt(e.key)
+            if (n >= 1 && n <= 9) {
+                e.preventDefault(); e.stopPropagation()
+                actionsRef.current.focusIframe(n)
+            }
+        }
+
+        win.addEventListener('keydown', handler, true)
+        return () => win.removeEventListener('keydown', handler, true)
+    }, []) // stable — reads actionsRef.current at call time
+
+    // Parent-frame shortcuts (fires when parent has focus, not inside an iframe)
+    useGlobalKeyboard(sessions, {
+        onSelectIndex: (n) => actionsRef.current.focusIframe(n),
+        onOpenSearch: () => actionsRef.current.openAddModal(),
+        onReplaceCell: () => actionsRef.current.openReplaceModal(),
+        onCloseCell: () => actionsRef.current.closeCell(),
+        onMoveFocus: (dir) => actionsRef.current.moveFocus(dir),
+        onToggleStrip: () => actionsRef.current.toggleStrip(),
+    })
+
+    const pinned = pinnedIds.map(id => sessions.find(s => s.id === id)).filter(Boolean) as SessionSummary[]
+    const unpinned = sessions.filter(s => !pinnedIds.includes(s.id))
+
+    // Strip mode: all panels in one row; otherwise adaptive grid
+    const isFiveLayout = !stripMode && pinned.length === 5
+    const cols = stripMode
+        ? pinned.length || 1
+        : pinned.length <= 1 ? 1 : pinned.length === 3 ? 3 : pinned.length <= 4 ? 2 : isFiveLayout ? 6 : 3
+    const rows = stripMode ? 1 : isFiveLayout ? 2 : Math.ceil(pinned.length / cols)
+
+    // Column span per item index for the 5-panel layout (not used in strip mode)
+    const getColSpan = (i: number) => isFiveLayout ? (i < 3 ? 2 : 3) : 1
+
+    const iframeUrl = (sessionId: string) => `/sessions/${sessionId}`
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--app-bg)', position: 'relative' }}>
+            {/* Header */}
+            <div style={{
+                display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px',
+                borderBottom: '1px solid var(--app-border)', flexShrink: 0,
+                paddingTop: 'calc(6px + env(safe-area-inset-top))'
+            }}>
+                <button
+                    onClick={() => navigate({ to: '/sessions' })}
+                    style={{ display: 'flex', alignItems: 'center', padding: 4, borderRadius: 6,
+                        color: 'var(--app-hint)', background: 'none', border: 'none', cursor: 'pointer' }}
+                    title="Back (Cmd+;)"
+                >
+                    <BackIcon />
+                </button>
+                <GridIcon />
+                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--app-fg)' }}>Grid View</span>
+                <span style={{ fontSize: 11, color: 'var(--app-hint)', marginLeft: 2 }}>
+                    ⌘; back · ⌘K add · ⌘⇧F replace · ⌘⇧X close · ⌘1-{Math.min(pinned.length || 9, 9)} focus · ⌥hjkl move · ⌘' {stripMode ? 'grid' : 'strip'}
+                </span>
+
+                {unpinned.length > 0 && pinnedIds.length < 6 && (
+                    <select
+                        onChange={e => { if (e.target.value) { addSession(e.target.value); e.target.value = '' } }}
+                        style={{ marginLeft: 'auto', fontSize: 12, padding: '3px 8px',
+                            background: 'var(--app-secondary-bg)', border: '1px solid var(--app-border)',
+                            borderRadius: 6, color: 'var(--app-fg)', cursor: 'pointer', maxWidth: 200 }}
+                        defaultValue=""
+                    >
+                        <option value="" disabled>+ Add session</option>
+                        {unpinned.map(s => (
+                            <option key={s.id} value={s.id}>
+                                {getSessionTitle(s)}{getSessionFolder(s) ? ` — ${getSessionFolder(s)}` : ''}
+                            </option>
+                        ))}
+                    </select>
+                )}
+            </div>
+
+            {/* Grid body */}
+            {pinned.length === 0 ? (
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
+                    justifyContent: 'center', gap: 12, color: 'var(--app-hint)', fontSize: 14 }}>
+                    <GridIcon />
+                    <span>No sessions pinned.</span>
+                    {sessions.length > 0 && (
+                        <span style={{ fontSize: 12 }}>Use "+ Add session" or ⌘K to pin sessions to the grid.</span>
+                    )}
+                </div>
+            ) : expandedId ? (
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 8px',
+                        background: 'var(--app-secondary-bg)', borderBottom: '1px solid var(--app-border)', flexShrink: 0 }}>
+                        <button onClick={() => setExpandedId(null)}
+                            style={{ fontSize: 12, padding: '2px 10px', borderRadius: 4,
+                                background: 'none', border: '1px solid var(--app-border)',
+                                color: 'var(--app-fg)', cursor: 'pointer' }}>
+                            ← Grid
+                        </button>
+                        <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--app-fg)' }}>
+                            {getSessionTitle(sessions.find(s => s.id === expandedId)!)}
+                        </span>
+                        <span style={{ fontSize: 11, color: 'var(--app-hint)' }}>
+                            {getSessionFolder(sessions.find(s => s.id === expandedId)!)}
+                        </span>
+                    </div>
+                    <iframe
+                        src={iframeUrl(expandedId)}
+                        style={{ flex: 1, border: 'none', minHeight: 0 }}
+                        allow="microphone"
+                    />
+                </div>
+            ) : (
+                <div style={{
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+                    gridTemplateRows: `repeat(${rows}, 1fr)`,
+                    gap: 4, flex: 1, minHeight: 0, padding: 4
+                }}>
+                    {pinned.map((session, i) => {
+                        const isFocused = focusedIdx === i
+                        return (
+                        <div key={session.id}
+                            onClick={() => actionsRef.current.focusIframe(i + 1)}
+                            style={{ position: 'relative', overflow: 'hidden', minHeight: 0,
+                                gridColumn: getColSpan(i) > 1 ? `span ${getColSpan(i)}` : undefined,
+                                border: isFocused ? '2px solid var(--app-link)' : '1px solid var(--app-border)',
+                                borderRadius: 8, transition: 'border-color 0.15s' }}>
+
+                            {/* Floating pill — right-aligned */}
+                            <div className="grid-cell-overlay" style={{
+                                position: 'absolute', top: 5, right: 5, zIndex: 10,
+                                display: 'inline-flex', alignItems: 'center', gap: 5,
+                                maxWidth: 'calc(100% - 10px)',
+                                padding: '3px 6px 3px 8px',
+                                background: 'rgba(0,0,0,0.5)',
+                                backdropFilter: 'blur(8px)',
+                                WebkitBackdropFilter: 'blur(8px)',
+                                borderRadius: 8,
+                                border: '1px solid rgba(255,255,255,0.06)',
+                            }}>
+                                {session.active && (() => {
+                                    const isNotified = notifiedIds.has(session.id)
+                                    const isFlashing = flashingIds.has(session.id)
+                                    return (
+                                        <div
+                                            className={isFlashing ? 'animate-toast-alert' : ''}
+                                            onAnimationEnd={() => setFlashingIds(prev => { const s = new Set(prev); s.delete(session.id); return s })}
+                                            style={{
+                                                width: isNotified ? 8 : 5,
+                                                height: isNotified ? 8 : 5,
+                                                borderRadius: '50%',
+                                                background: isNotified ? '#f97316' : '#34c759',
+                                                flexShrink: 0,
+                                                transition: 'width 0.2s, height 0.2s, background 0.2s',
+                                            }}
+                                        />
+                                    )
+                                })()}
+                                <div style={{ minWidth: 0 }}>
+                                    <div style={{ fontSize: 11, fontWeight: 700, color: '#fff',
+                                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                        {getSessionTitle(session)}
+                                    </div>
+                                    <div style={{ fontSize: 10, color: '#fff',
+                                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                        {[session.metadata?.flavor, getSessionFolder(session)].filter(Boolean).join(' · ')}
+                                    </div>
+                                </div>
+                                <button onClick={e => { e.stopPropagation(); removeSession(session.id) }}
+                                    title="Remove (⌘⇧X)"
+                                    style={{ background: 'none', border: 'none', cursor: 'pointer',
+                                        color: 'rgba(255,255,255,0.4)', padding: '0 2px', borderRadius: 3,
+                                        display: 'flex', alignItems: 'center', flexShrink: 0 }}>
+                                    <CloseIcon />
+                                </button>
+                            </div>
+
+                            {/* iframe fills the full cell */}
+                            <iframe
+                                ref={el => { iframeRefs.current[i] = el }}
+                                src={iframeUrl(session.id)}
+                                style={{ display: 'block', width: '100%', height: '100%',
+                                    border: 'none', position: 'absolute', inset: 0 }}
+                                allow="microphone"
+                                onFocus={() => setFocusedIdx(i)}
+                                onLoad={e => setupIframeKeyboard(e.currentTarget)}
+                            />
+                        </div>
+                        )
+                    })}
+                </div>
+            )}
+
+            {/* Cmd+K: add new session to grid */}
+            <SessionSearchModal
+                sessions={sessions.filter(s => !pinnedIds.includes(s.id))}
+                isOpen={isAddOpen}
+                onClose={() => setIsAddOpen(false)}
+                onSelect={s => addSession(s.id)}
+                actionLabel="Add to grid"
+            />
+
+            {/* Cmd+Shift+F: replace focused cell */}
+            <SessionSearchModal
+                sessions={sessions}
+                isOpen={isReplaceOpen}
+                onClose={() => setIsReplaceOpen(false)}
+                onSelect={replaceCell}
+                actionLabel={replaceTargetIdx !== null ? `Replace ⌘${replaceTargetIdx + 1}` : 'Add to grid'}
+            />
+        </div>
+    )
+}
diff --git a/web/src/components/SessionHeader.tsx b/web/src/components/SessionHeader.tsx
index 1d3f8bd84..66b942497 100644
--- a/web/src/components/SessionHeader.tsx
+++ b/web/src/components/SessionHeader.tsx
@@ -100,8 +100,8 @@ export function SessionHeader(props: {
         setMenuOpen((open) => !open)
     }
 
-    // In Telegram, don't render header (Telegram provides its own)
-    if (isTelegramApp()) {
+    // In Telegram or grid iframe, don't render header
+    if (isTelegramApp() || window.self !== window.top) {
         return null
     }
 
diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index 115cc266e..f93b4c303 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -395,7 +395,6 @@ function SessionItem(props: {
             >
                 <div className={`flex items-center justify-between gap-3 ${!s.active ? 'opacity-50' : ''}`}>
                     <div className="flex items-center gap-2 min-w-0">
-                        <FlavorIcon flavor={s.metadata?.flavor} className="h-4 w-4 shrink-0" />
                         <div className={`truncate text-sm font-medium ${s.active ? 'text-[var(--app-fg)]' : 'text-[var(--app-hint)]'}`}>
                             {sessionName}
                         </div>
diff --git a/web/src/components/SessionSearchModal.tsx b/web/src/components/SessionSearchModal.tsx
new file mode 100644
index 000000000..7b1f4c219
--- /dev/null
+++ b/web/src/components/SessionSearchModal.tsx
@@ -0,0 +1,176 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import type { SessionSummary } from '@/types/api'
+
+function getSessionTitle(session: SessionSummary): string {
+    if (session.metadata?.name) return session.metadata.name
+    if ((session.metadata as any)?.summary?.text) return (session.metadata as any).summary.text
+    if (session.metadata?.path) {
+        const parts = session.metadata.path.split('/').filter(Boolean)
+        return parts.length > 0 ? parts[parts.length - 1] : session.id.slice(0, 8)
+    }
+    return session.id.slice(0, 8)
+}
+
+function getSessionFolder(session: SessionSummary): string {
+    const path = (session.metadata as any)?.worktree?.basePath ?? session.metadata?.path ?? ''
+    if (!path) return ''
+    const parts = path.split('/').filter(Boolean)
+    if (parts.length <= 1) return parts[0] ?? ''
+    return `${parts[parts.length - 2]}/${parts[parts.length - 1]}`
+}
+
+type Props = {
+    sessions: SessionSummary[]
+    isOpen: boolean
+    onClose: () => void
+    onSelect: (session: SessionSummary) => void
+    actionLabel?: string
+}
+
+export function SessionSearchModal({ sessions, isOpen, onClose, onSelect, actionLabel = 'Open' }: Props) {
+    const [query, setQuery] = useState('')
+    const [activeIdx, setActiveIdx] = useState(0)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const listRef = useRef<HTMLDivElement>(null)
+
+    const filtered = useMemo(() => {
+        if (!query.trim()) return sessions
+        const q = query.toLowerCase()
+        return sessions.filter(s => {
+            const title = getSessionTitle(s).toLowerCase()
+            const folder = getSessionFolder(s).toLowerCase()
+            return title.includes(q) || folder.includes(q) || s.id.toLowerCase().startsWith(q)
+        })
+    }, [sessions, query])
+
+    useEffect(() => {
+        if (isOpen) {
+            setQuery('')
+            setActiveIdx(0)
+            requestAnimationFrame(() => inputRef.current?.focus())
+        }
+    }, [isOpen])
+
+    useEffect(() => { setActiveIdx(0) }, [query])
+
+    // Scroll active item into view
+    useEffect(() => {
+        const el = listRef.current?.children[activeIdx] as HTMLElement | undefined
+        el?.scrollIntoView({ block: 'nearest' })
+    }, [activeIdx])
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Escape') { e.preventDefault(); onClose(); return }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            setActiveIdx(i => Math.min(i + 1, filtered.length - 1))
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault()
+            setActiveIdx(i => Math.max(i - 1, 0))
+        } else if (e.key === 'Enter') {
+            e.preventDefault()
+            const s = filtered[activeIdx]
+            if (s) { onSelect(s); onClose() }
+        }
+    }
+
+    if (!isOpen) return null
+
+    return (
+        <div
+            style={{
+                position: 'fixed', inset: 0, zIndex: 9999,
+                background: 'rgba(0,0,0,0.45)',
+                display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+                paddingTop: '12vh',
+            }}
+            onMouseDown={onClose}
+        >
+            <div
+                style={{
+                    width: '90%', maxWidth: 560,
+                    background: 'var(--app-bg)',
+                    border: '1px solid var(--app-border)',
+                    borderRadius: 12,
+                    boxShadow: '0 24px 64px rgba(0,0,0,0.5)',
+                    overflow: 'hidden',
+                    display: 'flex', flexDirection: 'column',
+                    maxHeight: '60vh',
+                }}
+                onMouseDown={e => e.stopPropagation()}
+            >
+                {/* Input row */}
+                <div style={{
+                    display: 'flex', alignItems: 'center', gap: 10,
+                    padding: '10px 14px',
+                    borderBottom: filtered.length > 0 ? '1px solid var(--app-border)' : 'none',
+                }}>
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
+                        stroke="var(--app-hint)" strokeWidth="2.5" strokeLinecap="round">
+                        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                    </svg>
+                    <input
+                        ref={inputRef}
+                        value={query}
+                        onChange={e => setQuery(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Search sessions…"
+                        style={{
+                            flex: 1, background: 'none', border: 'none', outline: 'none',
+                            fontSize: 14, color: 'var(--app-fg)',
+                        }}
+                    />
+                    <kbd style={{
+                        fontSize: 10, color: 'var(--app-hint)', padding: '2px 5px',
+                        border: '1px solid var(--app-border)', borderRadius: 4,
+                        fontFamily: 'inherit',
+                    }}>esc</kbd>
+                </div>
+
+                {/* Results */}
+                <div ref={listRef} style={{ overflowY: 'auto', flex: 1 }}>
+                    {query.trim() !== '' && filtered.length === 0 ? (
+                        <div style={{ padding: '20px 14px', textAlign: 'center',
+                            fontSize: 13, color: 'var(--app-hint)' }}>
+                            No sessions match "{query}"
+                        </div>
+                    ) : filtered.map((s, i) => (
+                        <div
+                            key={s.id}
+                            onClick={() => { onSelect(s); onClose() }}
+                            onMouseEnter={() => setActiveIdx(i)}
+                            style={{
+                                display: 'flex', alignItems: 'center', gap: 8,
+                                padding: '7px 14px', cursor: 'pointer',
+                                background: i === activeIdx ? 'var(--app-secondary-bg)' : 'transparent',
+                            }}
+                        >
+                            <div style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0,
+                                background: s.active ? '#34c759' : 'transparent',
+                                border: s.active ? 'none' : '1px solid var(--app-border)',
+                            }} />
+                            <div style={{ flex: 1, minWidth: 0 }}>
+                                <div style={{ fontSize: 13, fontWeight: 500,
+                                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                                    color: 'var(--app-fg)' }}>
+                                    {getSessionTitle(s)}
+                                </div>
+                                {getSessionFolder(s) && (
+                                    <div style={{ fontSize: 11, color: 'var(--app-hint)',
+                                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                        {getSessionFolder(s)}
+                                    </div>
+                                )}
+                            </div>
+                            {i === activeIdx && (
+                                <span style={{ fontSize: 11, color: 'var(--app-link)', flexShrink: 0 }}>
+                                    {actionLabel} ↵
+                                </span>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/web/src/components/ToastContainer.tsx b/web/src/components/ToastContainer.tsx
index 719dc86ef..bde61cc8c 100644
--- a/web/src/components/ToastContainer.tsx
+++ b/web/src/components/ToastContainer.tsx
@@ -6,7 +6,8 @@ export function ToastContainer() {
     const navigate = useNavigate()
     const { toasts, removeToast } = useToast()
 
-    if (toasts.length === 0) {
+    // In grid iframes, suppress floating toasts — status dot in composer handles notification
+    if (toasts.length === 0 || window.self !== window.top) {
         return null
     }
 
diff --git a/web/src/hooks/useGlobalKeyboard.ts b/web/src/hooks/useGlobalKeyboard.ts
new file mode 100644
index 000000000..248f51795
--- /dev/null
+++ b/web/src/hooks/useGlobalKeyboard.ts
@@ -0,0 +1,101 @@
+import { useEffect } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+
+type Options = {
+    // When in grid mode, Cmd+1-9 calls this instead of navigating
+    onSelectIndex?: (n: number) => void
+    // Cmd+K: search to add a new session (to grid, or navigate in normal mode)
+    onOpenSearch?: () => void
+    // Cmd+Shift+F: search to replace the currently focused grid cell
+    onReplaceCell?: () => void
+    // Cmd+Shift+X — close/remove the currently focused grid cell
+    onCloseCell?: () => void
+    // Alt+hjkl — move focus between grid cells
+    onMoveFocus?: (dir: 'h' | 'j' | 'k' | 'l') => void
+    // Cmd+' — toggle strip/grid layout
+    onToggleStrip?: () => void
+}
+
+export function useGlobalKeyboard(sessions: { id: string }[], options: Options = {}) {
+    const navigate = useNavigate()
+
+    useEffect(() => {
+        // Don't register shortcuts when running inside a grid iframe
+        if (window.self !== window.top) return
+
+        const onKeyDown = (e: KeyboardEvent) => {
+            // Alt+h/j/k/l — move focus between grid cells (vim-style)
+            if (e.altKey && !e.metaKey && !e.ctrlKey && !e.shiftKey && options.onMoveFocus) {
+                const dir = e.code === 'KeyH' ? 'h' : e.code === 'KeyJ' ? 'j' : e.code === 'KeyK' ? 'k' : e.code === 'KeyL' ? 'l' : null
+                if (dir) { e.preventDefault(); options.onMoveFocus(dir as 'h'|'j'|'k'|'l'); return }
+            }
+            if (!e.metaKey) return
+
+            // Cmd+K — search to add/navigate
+            if ((e.key === 'k' || e.key === 'K') && !e.shiftKey) {
+                e.preventDefault()
+                options.onOpenSearch?.()
+                return
+            }
+
+            // Cmd+Shift+F — search to replace current focused grid cell
+            if ((e.key === 'f' || e.key === 'F') && e.shiftKey) {
+                e.preventDefault()
+                options.onReplaceCell?.()
+                return
+            }
+
+            // Cmd+Shift+X — close current focused grid cell
+            if ((e.key === 'x' || e.key === 'X') && e.shiftKey) {
+                e.preventDefault()
+                options.onCloseCell?.()
+                return
+            }
+
+            // Cmd+' — toggle strip/grid layout
+            if (e.key === "'") {
+                e.preventDefault()
+                options.onToggleStrip?.()
+                return
+            }
+
+            // Cmd+; — toggle grid view
+            if (e.key === ';') {
+                const isGrid = window.location.pathname === '/grid'
+                e.preventDefault()
+                if (isGrid) {
+                    navigate({ to: '/sessions' })
+                } else {
+                    navigate({ to: '/grid' })
+                }
+                return
+            }
+
+            // Cmd+1-9
+            const n = parseInt(e.key)
+            if (n >= 1 && n <= 9) {
+                e.preventDefault()
+                if (options.onSelectIndex) {
+                    // Grid mode: focus nth pinned iframe
+                    options.onSelectIndex(n)
+                } else {
+                    // Normal mode: navigate to nth session
+                    const session = sessions[n - 1]
+                    if (session) {
+                        navigate({ to: '/sessions/$sessionId', params: { sessionId: session.id } })
+                    }
+                }
+                return
+            }
+
+            // Cmd+Shift+N — new session
+            if ((e.key === 'n' || e.key === 'N') && e.shiftKey) {
+                e.preventDefault()
+                navigate({ to: '/sessions/new' })
+            }
+        }
+
+        window.addEventListener('keydown', onKeyDown, true)
+        return () => window.removeEventListener('keydown', onKeyDown, true)
+    }, [navigate, sessions, options.onSelectIndex, options.onOpenSearch, options.onReplaceCell, options.onCloseCell, options.onMoveFocus, options.onToggleStrip])
+}
diff --git a/web/src/index.css b/web/src/index.css
index 33477206c..766597d35 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -345,8 +345,30 @@ html[data-theme="dark"] .shiki span {
   animation: bounce-in 0.3s ease-out;
 }
 
+@keyframes pulse-once {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.animate-pulse-once {
+  animation: pulse-once 0.6s ease-in-out;
+}
+
+@keyframes toast-alert {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(2.2); opacity: 0.5; }
+}
+.animate-toast-alert {
+  animation: toast-alert 0.4s ease-in-out 3;
+}
+
 /* ReactQueryDevtools button - move to middle-right to avoid blocking UI */
 .tsqd-open-btn-container {
   bottom: 50% !important;
   transform: translateY(50%);
 }
+
+/* Grid cell floating overlay — always readable, full opacity on hover */
+.grid-cell-overlay {
+  opacity: 1;
+  transition: opacity 0.15s;
+}
diff --git a/web/src/lib/composer-drafts.test.ts b/web/src/lib/composer-drafts.test.ts
index bf26df80f..8537dd20d 100644
--- a/web/src/lib/composer-drafts.test.ts
+++ b/web/src/lib/composer-drafts.test.ts
@@ -1,14 +1,21 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 describe('composer-drafts', () => {
-    let storage: Record<string, string>
+    let localStorage: Record<string, string>
+    let sessionStorage: Record<string, string>
 
     beforeEach(() => {
-        storage = {}
+        localStorage = {}
+        sessionStorage = {}
+        vi.stubGlobal('localStorage', {
+            getItem: vi.fn((key: string) => localStorage[key] ?? null),
+            setItem: vi.fn((key: string, value: string) => { localStorage[key] = value }),
+            removeItem: vi.fn((key: string) => { delete localStorage[key] }),
+        })
         vi.stubGlobal('sessionStorage', {
-            getItem: vi.fn((key: string) => storage[key] ?? null),
-            setItem: vi.fn((key: string, value: string) => { storage[key] = value }),
-            removeItem: vi.fn((key: string) => { delete storage[key] }),
+            getItem: vi.fn((key: string) => sessionStorage[key] ?? null),
+            setItem: vi.fn((key: string, value: string) => { sessionStorage[key] = value }),
+            removeItem: vi.fn((key: string) => { delete sessionStorage[key] }),
         })
         // Force re-hydration by clearing the module's internal cache
         // Re-import to reset the lazy-loaded cache
@@ -30,10 +37,10 @@ describe('composer-drafts', () => {
         expect(mod.getDraft('session-1')).toBe('hello world')
     })
 
-    it('persists drafts to sessionStorage', async () => {
+    it('persists drafts to localStorage', async () => {
         const mod = await import('./composer-drafts')
         mod.saveDraft('session-1', 'test')
-        const stored = JSON.parse(storage['hapi:composer-drafts'] ?? '{}')
+        const stored = JSON.parse(localStorage['hapi:composer-drafts'] ?? '{}')
         expect(stored['session-1']).toBe('test')
     })
 
@@ -52,7 +59,7 @@ describe('composer-drafts', () => {
         mod.saveDraft('session-1', '   ')
         expect(mod.getDraft('session-1')).toBe('')
 
-        const stored = JSON.parse(storage['hapi:composer-drafts'] ?? '{}')
+        const stored = JSON.parse(localStorage['hapi:composer-drafts'] ?? '{}')
         expect(stored).not.toHaveProperty('session-1')
     })
 
@@ -75,14 +82,24 @@ describe('composer-drafts', () => {
         expect(mod.getDraft('session-b')).toBe('text B')
     })
 
-    it('hydrates from existing sessionStorage data', async () => {
-        storage['hapi:composer-drafts'] = JSON.stringify({ 'existing': 'draft text' })
+    it('hydrates from existing localStorage data', async () => {
+        localStorage['hapi:composer-drafts'] = JSON.stringify({ 'existing': 'draft text' })
+        const mod = await import('./composer-drafts')
+        expect(mod.getDraft('existing')).toBe('draft text')
+    })
+
+    it('migrates data from sessionStorage to localStorage on first load', async () => {
+        sessionStorage['hapi:composer-drafts'] = JSON.stringify({ 'existing': 'draft text' })
         const mod = await import('./composer-drafts')
         expect(mod.getDraft('existing')).toBe('draft text')
+        // Should have migrated to localStorage
+        expect(localStorage['hapi:composer-drafts']).toBeDefined()
+        // Should have removed from sessionStorage
+        expect(sessionStorage['hapi:composer-drafts']).toBeUndefined()
     })
 
-    it('recovers from invalid sessionStorage data', async () => {
-        storage['hapi:composer-drafts'] = 'not valid json'
+    it('recovers from invalid localStorage data', async () => {
+        localStorage['hapi:composer-drafts'] = 'not valid json'
         const mod = await import('./composer-drafts')
         expect(mod.getDraft('any')).toBe('')
         // Should still be able to save
@@ -91,7 +108,7 @@ describe('composer-drafts', () => {
     })
 
     it('ignores non-string values during hydration', async () => {
-        storage['hapi:composer-drafts'] = JSON.stringify({
+        localStorage['hapi:composer-drafts'] = JSON.stringify({
             'valid': 'text',
             'invalid-number': 42,
             'invalid-null': null,
diff --git a/web/src/lib/composer-drafts.ts b/web/src/lib/composer-drafts.ts
index b726c27a7..d1bed88ea 100644
--- a/web/src/lib/composer-drafts.ts
+++ b/web/src/lib/composer-drafts.ts
@@ -20,7 +20,13 @@ function hydrate(): DraftsMap {
         return cache
     }
     try {
-        const raw = sessionStorage.getItem(STORAGE_KEY)
+        const localRaw = localStorage.getItem(STORAGE_KEY)
+        const sessionRaw = sessionStorage.getItem(STORAGE_KEY)
+        if (!localRaw && sessionRaw) {
+            localStorage.setItem(STORAGE_KEY, sessionRaw)
+            sessionStorage.removeItem(STORAGE_KEY)
+        }
+        const raw = localRaw ?? sessionRaw
         if (!raw) {
             cache = {}
             return cache
@@ -60,7 +66,7 @@ function persist(): void {
     try {
         const drafts = hydrate()
         evict(drafts)
-        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(drafts))
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(drafts))
     } catch {
         // Ignore storage errors
     }
diff --git a/web/src/router.tsx b/web/src/router.tsx
index 2680d2680..411682c98 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import {
     Navigate,
@@ -16,8 +16,11 @@ import { SessionChat } from '@/components/SessionChat'
 import { SessionList } from '@/components/SessionList'
 import { NewSession } from '@/components/NewSession'
 import { LoadingState } from '@/components/LoadingState'
+import { GridView } from '@/components/GridView'
+import { SessionSearchModal } from '@/components/SessionSearchModal'
 import { useAppContext } from '@/lib/app-context'
 import { useAppGoBack } from '@/hooks/useAppGoBack'
+import { useGlobalKeyboard } from '@/hooks/useGlobalKeyboard'
 import { isTelegramApp } from '@/hooks/useTelegram'
 import { useSidebarResize } from '@/hooks/useSidebarResize'
 import { useMessages } from '@/hooks/queries/useMessages'
@@ -97,6 +100,28 @@ function SettingsIcon(props: { className?: string }) {
     )
 }
 
+function GridIcon(props: { className?: string }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={props.className}
+        >
+            <rect x="3" y="3" width="7" height="7" />
+            <rect x="14" y="3" width="7" height="7" />
+            <rect x="3" y="14" width="7" height="7" />
+            <rect x="14" y="14" width="7" height="7" />
+        </svg>
+    )
+}
+
 function getMachineTitle(machine: Machine): string {
     if (machine.metadata?.displayName) return machine.metadata.displayName
     if (machine.metadata?.host) return machine.metadata.host
@@ -111,6 +136,12 @@ function SessionsPage() {
     const { t } = useTranslation()
     const { sessions, isLoading, error, refetch } = useSessions(api)
     const { machines } = useMachines(api, true)
+    // When embedded in a grid iframe, always hide the sidebar regardless of viewport width
+    const isInIframe = window.self !== window.top
+
+    const [isSearchOpen, setIsSearchOpen] = useState(false)
+    // Global keyboard shortcuts: Cmd+G (grid), Cmd+K (search/navigate), Cmd+1-9 (session), Cmd+Shift+N (new)
+    useGlobalKeyboard(sessions, { onOpenSearch: () => setIsSearchOpen(true) })
 
     const handleRefresh = useCallback(() => {
         void refetch()
@@ -132,9 +163,16 @@ function SessionsPage() {
     const sidebar = useSidebarResize()
 
     return (
+        <>
+        <SessionSearchModal
+            sessions={sessions}
+            isOpen={isSearchOpen}
+            onClose={() => setIsSearchOpen(false)}
+            onSelect={s => navigate({ to: '/sessions/$sessionId', params: { sessionId: s.id } })}
+        />
         <div className="flex h-full min-h-0">
             <div
-                className={`${isSessionsIndex ? 'flex' : 'hidden lg:flex'} w-full shrink-0 flex-col bg-[var(--app-bg)]`}
+                className={`${isSessionsIndex ? 'flex' : (isInIframe ? 'hidden' : 'hidden lg:flex')} w-full shrink-0 flex-col bg-[var(--app-bg)]`}
                 style={{ '--sidebar-w': `${sidebar.width}px` } as React.CSSProperties}
             >
                 <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
@@ -151,6 +189,14 @@ function SessionsPage() {
                             >
                                 <SettingsIcon className="h-5 w-5" />
                             </button>
+                            <button
+                                type="button"
+                                onClick={() => navigate({ to: '/grid' })}
+                                className="p-1.5 rounded-full text-[var(--app-hint)] hover:text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)] transition-colors"
+                                title="Grid view (Cmd+;)"
+                            >
+                                <GridIcon className="h-5 w-5" />
+                            </button>
                             <button
                                 type="button"
                                 onClick={() => navigate({ to: '/sessions/new' })}
@@ -186,9 +232,9 @@ function SessionsPage() {
                 </div>
             </div>
 
-            {/* Resize handle - desktop only */}
+            {/* Resize handle - desktop only, not in iframes */}
             <div
-                className="sidebar-resize-handle hidden lg:block shrink-0"
+                className={`sidebar-resize-handle shrink-0 ${isInIframe ? 'hidden' : 'hidden lg:block'}`}
                 data-dragging={sidebar.isDragging || undefined}
                 onPointerDown={sidebar.onPointerDown}
                 onPointerMove={sidebar.onPointerMove}
@@ -201,6 +247,7 @@ function SessionsPage() {
                 </div>
             </div>
         </div>
+        </>
     )
 }
 
@@ -424,6 +471,13 @@ function NewSessionPage() {
     )
 }
 
+function GridPage() {
+    const { api, token, baseUrl } = useAppContext()
+    const { sessions } = useSessions(api)
+    // Note: GridView itself calls useGlobalKeyboard with grid-specific options
+    return <GridView sessions={sessions} baseUrl={baseUrl} token={token} />
+}
+
 const rootRoute = createRootRoute({
     component: App,
 })
@@ -522,6 +576,12 @@ const settingsRoute = createRoute({
     component: SettingsPage,
 })
 
+const gridRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/grid',
+    component: GridPage,
+})
+
 export const routeTree = rootRoute.addChildren([
     indexRoute,
     sessionsRoute.addChildren([
@@ -534,6 +594,7 @@ export const routeTree = rootRoute.addChildren([
         ]),
     ]),
     settingsRoute,
+    gridRoute,
 ])
 
 type RouterHistory = Parameters<typeof createRouter>[0]['history']
diff --git a/web/src/sw.ts b/web/src/sw.ts
index ebe55dc0a..6607579b6 100644
--- a/web/src/sw.ts
+++ b/web/src/sw.ts
@@ -118,6 +118,18 @@ self.addEventListener('push', (event) => {
 self.addEventListener('notificationclick', (event) => {
     event.notification.close()
     const data = event.notification.data as { url?: string } | undefined
-    const url = data?.url ?? '/'
-    event.waitUntil(self.clients.openWindow(url))
+    const targetUrl = data?.url ?? '/'
+    event.waitUntil((async () => {
+        const allClients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true })
+        // Focus existing PWA window and navigate to the session
+        for (const client of allClients) {
+            if (client.url.startsWith(self.registration.scope)) {
+                await (client as WindowClient).navigate(targetUrl)
+                await client.focus()
+                return
+            }
+        }
+        // No existing window — open a new one
+        await self.clients.openWindow(targetUrl)
+    })())
 })