From a92e7d8a80e4743c25a0529517b5eae98ff7668b Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 16:47:47 -0600
Subject: [PATCH 01/10] feat(web): add multi-session grid view with keyboard
 navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add GridView component: 1-6 sessions displayed in adaptive grid (1×1,
  2×1, 3×1, 2×2, 3+2, 3×2) or strip mode (all in one row)
- Add SessionSearchModal for quickly adding/replacing sessions in grid
- Add useGlobalKeyboard hook for global shortcuts (Cmd+;, Cmd+K,
  Cmd+Shift+F, Cmd+Shift+X, Cmd+1-9, Cmd+', Alt+hjkl)
- Grid iframes share localStorage composer drafts (was sessionStorage)
- Hide SessionHeader inside iframes to save vertical space
- Floating overlay pill in each cell: title, folder, flavor, close btn
- Toast notifications filtered per-session in grid iframes
- Sidebar forced hidden in grid iframes regardless of viewport width
- Route /grid added; grid icon + shortcut hint in sessions header

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 web/src/App.tsx                           |  10 +-
 web/src/components/GridView.tsx           | 398 ++++++++++++++++++++++
 web/src/components/SessionHeader.tsx      |   4 +-
 web/src/components/SessionSearchModal.tsx | 176 ++++++++++
 web/src/hooks/useGlobalKeyboard.ts        | 102 ++++++
 web/src/index.css                         |   6 +
 web/src/lib/composer-drafts.ts            |   4 +-
 web/src/router.tsx                        |  69 +++-
 8 files changed, 760 insertions(+), 9 deletions(-)
 create mode 100644 web/src/components/GridView.tsx
 create mode 100644 web/src/components/SessionSearchModal.tsx
 create mode 100644 web/src/hooks/useGlobalKeyboard.ts

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 7ab0798c2..81228efe4 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -230,14 +230,22 @@ function AppInner() {
     }, [])
 
     const handleSseEvent = useCallback(() => {}, [])
+    const isGridRoute = matchRoute({ to: '/grid' })
     const handleToast = useCallback((event: ToastEvent) => {
+        // In the grid parent frame, suppress all toasts — each iframe handles its own
+        if (isGridRoute) return
+        // In grid view iframes, only show toasts for the session this iframe is displaying
+        const isInIframe = window.self !== window.top
+        if (isInIframe && event.data.sessionId && selectedSessionId && event.data.sessionId !== selectedSessionId) {
+            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/GridView.tsx b/web/src/components/GridView.tsx
new file mode 100644
index 000000000..562bdd649
--- /dev/null
+++ b/web/src/components/GridView.tsx
@@ -0,0 +1,398 @@
+import { useState, useCallback, useRef } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { useGlobalKeyboard } from '@/hooks/useGlobalKeyboard'
+import { SessionSearchModal } from '@/components/SessionSearchModal'
+import type { Session } from '@/types/api'
+
+function getSessionTitle(session: Session): 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: Session): 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: Session[]
+    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)[]>([])
+
+    // ── 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: () => {},
+        closeCurrentCell: () => {},
+    })
+
+    // 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: Session) => {
+        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 Session[]
+    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 && (
+                                    <div style={{ width: 5, height: 5, borderRadius: '50%',
+                                        background: '#34c759', flexShrink: 0 }} />
+                                )}
+                                <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/SessionSearchModal.tsx b/web/src/components/SessionSearchModal.tsx
new file mode 100644
index 000000000..3ae123e69
--- /dev/null
+++ b/web/src/components/SessionSearchModal.tsx
@@ -0,0 +1,176 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import type { Session } from '@/types/api'
+
+function getSessionTitle(session: Session): 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: Session): 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: Session[]
+    isOpen: boolean
+    onClose: () => void
+    onSelect: (session: Session) => 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/hooks/useGlobalKeyboard.ts b/web/src/hooks/useGlobalKeyboard.ts
new file mode 100644
index 000000000..04c4daf69
--- /dev/null
+++ b/web/src/hooks/useGlobalKeyboard.ts
@@ -0,0 +1,102 @@
+import { useEffect } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import type { Session } from '@/types/api'
+
+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: Session[], 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..2a7aa5dfc 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -350,3 +350,9 @@ html[data-theme="dark"] .shiki span {
   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.ts b/web/src/lib/composer-drafts.ts
index b726c27a7..8153c56c2 100644
--- a/web/src/lib/composer-drafts.ts
+++ b/web/src/lib/composer-drafts.ts
@@ -20,7 +20,7 @@ function hydrate(): DraftsMap {
         return cache
     }
     try {
-        const raw = sessionStorage.getItem(STORAGE_KEY)
+        const raw = localStorage.getItem(STORAGE_KEY)
         if (!raw) {
             cache = {}
             return cache
@@ -60,7 +60,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']

From f21c0eb693676cf22616e0710051b81e162b66cc Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 16:47:55 -0600
Subject: [PATCH 02/10] feat(web): inline status and permission mode into
 composer bottom bar

Move the status dot (online/thinking/offline), context window percentage,
and permission mode label from the standalone StatusBar above the composer
into the composer's bottom icon row. Status info sits between the action
icons and the send button; permission/collaboration mode labels appear on
the right side of that area.

This saves a line of vertical space and keeps all composer meta-info in
one place, which is especially beneficial in grid-view iframes.

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 .../AssistantChat/ComposerButtons.tsx         | 68 +++++++++++++++++++
 .../AssistantChat/HappyComposer.tsx           | 23 +++----
 .../components/AssistantChat/StatusBar.tsx    |  4 +-
 3 files changed, 79 insertions(+), 16 deletions(-)

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..eb181577b 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'
@@ -754,19 +753,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 +800,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/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)
 

From 82535235dbb4c898d9aca5bd35a6bbabaf1b61c3 Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 16:48:00 -0600
Subject: [PATCH 03/10] feat(web): add keyboard shortcuts for in-chat scroll
 and message jump
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Alt+[  / Alt+]        — scroll up/down ~40% of viewport height
Alt+Shift+[ / Alt+Shift+] — jump to previous/next message

Uses e.code (not e.key) to avoid macOS Option-key special characters.
Registered with capture:true so it intercepts while typing in the
composer textarea. Works in both standalone and grid-iframe contexts.

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 .../components/AssistantChat/HappyThread.tsx  | 43 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

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 />

From 0bf055d6cdef1fa8997b236c7db21ff3a2bc1d3d Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 16:48:05 -0600
Subject: [PATCH 04/10] fix(web): remove flavor icon from session list; focus
 window on push click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the colored flavor badge (Cl/Cx/Gm…) from each session row in
  the sessions list — reduces visual noise, info is available elsewhere
- Service worker: on push notification click, navigate and focus an
  existing PWA window instead of always opening a new one

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 web/src/components/SessionList.tsx |  1 -
 web/src/sw.ts                      | 16 ++++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

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/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)
+    })())
 })

From 50cef38c329d1fb868d28f7b882ff5dce21c3a28 Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 16:56:48 -0600
Subject: [PATCH 05/10] fix: resolve TypeScript typecheck errors for CI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GridView/SessionSearchModal: use SessionSummary[] instead of Session[]
  (useSessions returns SessionSummary, not full Session)
- useGlobalKeyboard: widen sessions param to { id: string }[]
  (only session.id is accessed in the hook)
- Fix actionsRef initial shape: rename closeCurrentCell→closeCell,
  add optional idx param to openReplaceModal

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 web/src/components/GridView.tsx           | 16 ++++++++--------
 web/src/components/SessionSearchModal.tsx | 10 +++++-----
 web/src/hooks/useGlobalKeyboard.ts        |  3 +--
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/web/src/components/GridView.tsx b/web/src/components/GridView.tsx
index 562bdd649..bfbd52225 100644
--- a/web/src/components/GridView.tsx
+++ b/web/src/components/GridView.tsx
@@ -2,9 +2,9 @@ import { useState, useCallback, useRef } from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import { useGlobalKeyboard } from '@/hooks/useGlobalKeyboard'
 import { SessionSearchModal } from '@/components/SessionSearchModal'
-import type { Session } from '@/types/api'
+import type { SessionSummary } from '@/types/api'
 
-function getSessionTitle(session: Session): string {
+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) {
@@ -14,7 +14,7 @@ function getSessionTitle(session: Session): string {
     return session.id.slice(0, 8)
 }
 
-function getSessionFolder(session: Session): string {
+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)
@@ -48,7 +48,7 @@ function CloseIcon() {
 }
 
 type Props = {
-    sessions: Session[]
+    sessions: SessionSummary[]
     baseUrl: string
     token: string
 }
@@ -76,8 +76,8 @@ export function GridView({ sessions, baseUrl, token }: Props) {
         toggleStrip: () => {},
         goBack: () => {},
         openAddModal: () => {},
-        openReplaceModal: () => {},
-        closeCurrentCell: () => {},
+        openReplaceModal: (_idx?: number) => {},
+        closeCell: (_idx?: number) => {},
     })
 
     // Rebuild actionsRef on every render so it always closes over current state
@@ -139,7 +139,7 @@ export function GridView({ sessions, baseUrl, token }: Props) {
         setFocusedIdx(null)
     }, [])
 
-    const replaceCell = useCallback((session: Session) => {
+    const replaceCell = useCallback((session: SessionSummary) => {
         if (replaceTargetIdx === null) {
             addSession(session.id)
             return
@@ -220,7 +220,7 @@ export function GridView({ sessions, baseUrl, token }: Props) {
         onToggleStrip: () => actionsRef.current.toggleStrip(),
     })
 
-    const pinned = pinnedIds.map(id => sessions.find(s => s.id === id)).filter(Boolean) as Session[]
+    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
diff --git a/web/src/components/SessionSearchModal.tsx b/web/src/components/SessionSearchModal.tsx
index 3ae123e69..7b1f4c219 100644
--- a/web/src/components/SessionSearchModal.tsx
+++ b/web/src/components/SessionSearchModal.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
-import type { Session } from '@/types/api'
+import type { SessionSummary } from '@/types/api'
 
-function getSessionTitle(session: Session): string {
+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) {
@@ -11,7 +11,7 @@ function getSessionTitle(session: Session): string {
     return session.id.slice(0, 8)
 }
 
-function getSessionFolder(session: Session): string {
+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)
@@ -20,10 +20,10 @@ function getSessionFolder(session: Session): string {
 }
 
 type Props = {
-    sessions: Session[]
+    sessions: SessionSummary[]
     isOpen: boolean
     onClose: () => void
-    onSelect: (session: Session) => void
+    onSelect: (session: SessionSummary) => void
     actionLabel?: string
 }
 
diff --git a/web/src/hooks/useGlobalKeyboard.ts b/web/src/hooks/useGlobalKeyboard.ts
index 04c4daf69..248f51795 100644
--- a/web/src/hooks/useGlobalKeyboard.ts
+++ b/web/src/hooks/useGlobalKeyboard.ts
@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import { useNavigate } from '@tanstack/react-router'
-import type { Session } from '@/types/api'
 
 type Options = {
     // When in grid mode, Cmd+1-9 calls this instead of navigating
@@ -17,7 +16,7 @@ type Options = {
     onToggleStrip?: () => void
 }
 
-export function useGlobalKeyboard(sessions: Session[], options: Options = {}) {
+export function useGlobalKeyboard(sessions: { id: string }[], options: Options = {}) {
     const navigate = useNavigate()
 
     useEffect(() => {

From 162d291fc0f1d6d71abfda99b9a6b506cfc9435e Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 16:58:11 -0600
Subject: [PATCH 06/10] fix: toast isolation and draft storage migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- App.tsx: use fuzzy:true in matchRoute so selectedSessionId stays
  populated on nested session routes (/files, /terminal, etc.)
- composer-drafts.ts: migrate sessionStorage→localStorage on first load
  so existing unsent drafts are not dropped after deploy

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 web/src/App.tsx                | 2 +-
 web/src/lib/composer-drafts.ts | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 81228efe4..64eb6aae4 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)
diff --git a/web/src/lib/composer-drafts.ts b/web/src/lib/composer-drafts.ts
index 8153c56c2..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 = localStorage.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

From 31fcba7ca8c0a29295227b85eb8513d87b2ea155 Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 17:05:30 -0600
Subject: [PATCH 07/10] feat(web): integrate toast notifications into composer
 status bar in grid mode

In grid iframes, suppress floating toasts and show them inline in the
composer status bar instead:
- ToastContainer: skip rendering inside iframes
- HappyComposer: watch useToast() and set bannerToast on new arrivals;
  clear on send (button or Enter)
- ComposerButtons: when toastBanner present, replace status line with
  amber-highlighted title+body; reverts on next send
- index.css: add animate-pulse-once for banner flash

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 .../AssistantChat/ComposerButtons.tsx         | 27 +++++++++++++------
 .../AssistantChat/HappyComposer.tsx           | 17 ++++++++++++
 web/src/components/ToastContainer.tsx         |  3 ++-
 web/src/index.css                             |  8 ++++++
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/web/src/components/AssistantChat/ComposerButtons.tsx b/web/src/components/AssistantChat/ComposerButtons.tsx
index 3d14342ac..cdb162461 100644
--- a/web/src/components/AssistantChat/ComposerButtons.tsx
+++ b/web/src/components/AssistantChat/ComposerButtons.tsx
@@ -336,6 +336,7 @@ export function ComposerButtons(props: {
     agentFlavor?: string | null
     permissionMode?: PermissionMode
     collaborationMode?: CodexCollaborationMode
+    toastBanner?: { title: string; body: string } | null
 }) {
     const { t } = useTranslation()
     const isVoiceConnected = props.voiceStatus === 'connected'
@@ -453,15 +454,25 @@ export function ComposerButtons(props: {
                 ) : null}
             </div>
 
-            {/* Status area: left=dot+status+context, right=mode labels */}
+            {/* Status area: shows toast banner when present, otherwise normal status */}
             <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>
+                {props.toastBanner ? (
+                    <div className="flex items-center gap-1 min-w-0 animate-pulse-once">
+                        <span className="h-1.5 w-1.5 rounded-full flex-shrink-0 bg-amber-400" />
+                        <span className="text-[10px] leading-none font-medium text-amber-500 truncate">
+                            {props.toastBanner.title}
+                            {props.toastBanner.body ? <span className="font-normal opacity-80"> · {props.toastBanner.body}</span> : null}
+                        </span>
+                    </div>
+                ) : (
+                    <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>
diff --git a/web/src/components/AssistantChat/HappyComposer.tsx b/web/src/components/AssistantChat/HappyComposer.tsx
index eb181577b..189beb70e 100644
--- a/web/src/components/AssistantChat/HappyComposer.tsx
+++ b/web/src/components/AssistantChat/HappyComposer.tsx
@@ -23,6 +23,7 @@ import { usePWAInstall } from '@/hooks/usePWAInstall'
 import { supportsEffort, supportsModelChange } from '@hapi/protocol'
 import { markSkillUsed } from '@/lib/recent-skills'
 import { useComposerDraft } from '@/hooks/useComposerDraft'
+import { useToast } from '@/lib/toast-context'
 import { FloatingOverlay } from '@/components/ChatInput/FloatingOverlay'
 import { Autocomplete } from '@/components/ChatInput/Autocomplete'
 import { ComposerButtons } from '@/components/AssistantChat/ComposerButtons'
@@ -141,6 +142,19 @@ export function HappyComposer(props: {
     const [isAborting, setIsAborting] = useState(false)
     const [isSwitching, setIsSwitching] = useState(false)
     const [showContinueHint, setShowContinueHint] = useState(false)
+    const [bannerToast, setBannerToast] = useState<{ title: string; body: string } | null>(null)
+
+    const isInIframe = window.self !== window.top
+    const { toasts } = useToast()
+    const prevToastsLenRef = useRef(0)
+    useEffect(() => {
+        if (!isInIframe) return
+        if (toasts.length > prevToastsLenRef.current) {
+            const latest = toasts[toasts.length - 1]
+            if (latest) setBannerToast({ title: latest.title, body: latest.body })
+        }
+        prevToastsLenRef.current = toasts.length
+    }, [toasts, isInIframe])
 
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const prevControlledByUser = useRef(controlledByUser)
@@ -321,6 +335,7 @@ export function HappyComposer(props: {
             if (!e.ctrlKey && !e.altKey && !e.metaKey && canSend) {
                 api.composer().send()
                 setShowContinueHint(false)
+                setBannerToast(null)
             }
             return
         }
@@ -491,6 +506,7 @@ export function HappyComposer(props: {
 
     const handleSend = useCallback(() => {
         api.composer().send()
+        setBannerToast(null)
     }, [api])
 
     const overlays = useMemo(() => {
@@ -809,6 +825,7 @@ export function HappyComposer(props: {
                             agentFlavor={agentFlavor}
                             permissionMode={permissionMode}
                             collaborationMode={collaborationMode}
+                            toastBanner={bannerToast}
                         />
                     </div>
                 </ComposerPrimitive.Root>
diff --git a/web/src/components/ToastContainer.tsx b/web/src/components/ToastContainer.tsx
index 719dc86ef..ab5d4491d 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, toasts are shown inline in the composer status bar instead
+    if (toasts.length === 0 || window.self !== window.top) {
         return null
     }
 
diff --git a/web/src/index.css b/web/src/index.css
index 2a7aa5dfc..eb9a5add1 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -345,6 +345,14 @@ 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;
+}
+
 /* ReactQueryDevtools button - move to middle-right to avoid blocking UI */
 .tsqd-open-btn-container {
   bottom: 50% !important;

From 2198b9b01820f982ee5bfa136c7bb11607daa752 Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 17:42:02 -0600
Subject: [PATCH 08/10] feat(web): toast notification dot in grid cell overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a session completes in grid view, the cell's title overlay dot:
- flashes 3× (animate-toast-alert) then stays orange+larger
- reverts to green on first keystroke in that cell's composer

Mechanism:
- iframe App.tsx forwards toast via postMessage to parent GridView
- parent GridView also listens for CustomEvent from SSE path
- HappyComposer sends grid-cell-typing postMessage on textarea change
- GridView handles both message types to set/clear notifiedIds

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 web/src/App.tsx                               | 16 ++++--
 .../AssistantChat/ComposerButtons.tsx         | 27 +++------
 .../AssistantChat/HappyComposer.tsx           | 23 ++------
 web/src/components/GridView.tsx               | 57 +++++++++++++++++--
 web/src/components/ToastContainer.tsx         |  2 +-
 web/src/index.css                             |  8 +++
 6 files changed, 86 insertions(+), 47 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 64eb6aae4..1739cbb8a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -232,11 +232,19 @@ function AppInner() {
     const handleSseEvent = useCallback(() => {}, [])
     const isGridRoute = matchRoute({ to: '/grid' })
     const handleToast = useCallback((event: ToastEvent) => {
-        // In the grid parent frame, suppress all toasts — each iframe handles its own
-        if (isGridRoute) return
-        // In grid view iframes, only show toasts for the session this iframe is displaying
+        // 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 && event.data.sessionId && selectedSessionId && event.data.sessionId !== selectedSessionId) {
+        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({
diff --git a/web/src/components/AssistantChat/ComposerButtons.tsx b/web/src/components/AssistantChat/ComposerButtons.tsx
index cdb162461..3d14342ac 100644
--- a/web/src/components/AssistantChat/ComposerButtons.tsx
+++ b/web/src/components/AssistantChat/ComposerButtons.tsx
@@ -336,7 +336,6 @@ export function ComposerButtons(props: {
     agentFlavor?: string | null
     permissionMode?: PermissionMode
     collaborationMode?: CodexCollaborationMode
-    toastBanner?: { title: string; body: string } | null
 }) {
     const { t } = useTranslation()
     const isVoiceConnected = props.voiceStatus === 'connected'
@@ -454,25 +453,15 @@ export function ComposerButtons(props: {
                 ) : null}
             </div>
 
-            {/* Status area: shows toast banner when present, otherwise normal status */}
+            {/* Status area: left=dot+status+context, right=mode labels */}
             <div className="flex items-center justify-between mx-2 min-w-0 flex-1">
-                {props.toastBanner ? (
-                    <div className="flex items-center gap-1 min-w-0 animate-pulse-once">
-                        <span className="h-1.5 w-1.5 rounded-full flex-shrink-0 bg-amber-400" />
-                        <span className="text-[10px] leading-none font-medium text-amber-500 truncate">
-                            {props.toastBanner.title}
-                            {props.toastBanner.body ? <span className="font-normal opacity-80"> · {props.toastBanner.body}</span> : null}
-                        </span>
-                    </div>
-                ) : (
-                    <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 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>
diff --git a/web/src/components/AssistantChat/HappyComposer.tsx b/web/src/components/AssistantChat/HappyComposer.tsx
index 189beb70e..56433112f 100644
--- a/web/src/components/AssistantChat/HappyComposer.tsx
+++ b/web/src/components/AssistantChat/HappyComposer.tsx
@@ -23,7 +23,6 @@ import { usePWAInstall } from '@/hooks/usePWAInstall'
 import { supportsEffort, supportsModelChange } from '@hapi/protocol'
 import { markSkillUsed } from '@/lib/recent-skills'
 import { useComposerDraft } from '@/hooks/useComposerDraft'
-import { useToast } from '@/lib/toast-context'
 import { FloatingOverlay } from '@/components/ChatInput/FloatingOverlay'
 import { Autocomplete } from '@/components/ChatInput/Autocomplete'
 import { ComposerButtons } from '@/components/AssistantChat/ComposerButtons'
@@ -142,19 +141,6 @@ export function HappyComposer(props: {
     const [isAborting, setIsAborting] = useState(false)
     const [isSwitching, setIsSwitching] = useState(false)
     const [showContinueHint, setShowContinueHint] = useState(false)
-    const [bannerToast, setBannerToast] = useState<{ title: string; body: string } | null>(null)
-
-    const isInIframe = window.self !== window.top
-    const { toasts } = useToast()
-    const prevToastsLenRef = useRef(0)
-    useEffect(() => {
-        if (!isInIframe) return
-        if (toasts.length > prevToastsLenRef.current) {
-            const latest = toasts[toasts.length - 1]
-            if (latest) setBannerToast({ title: latest.title, body: latest.body })
-        }
-        prevToastsLenRef.current = toasts.length
-    }, [toasts, isInIframe])
 
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const prevControlledByUser = useRef(controlledByUser)
@@ -335,7 +321,6 @@ export function HappyComposer(props: {
             if (!e.ctrlKey && !e.altKey && !e.metaKey && canSend) {
                 api.composer().send()
                 setShowContinueHint(false)
-                setBannerToast(null)
             }
             return
         }
@@ -414,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
@@ -506,7 +495,6 @@ export function HappyComposer(props: {
 
     const handleSend = useCallback(() => {
         api.composer().send()
-        setBannerToast(null)
     }, [api])
 
     const overlays = useMemo(() => {
@@ -825,7 +813,6 @@ export function HappyComposer(props: {
                             agentFlavor={agentFlavor}
                             permissionMode={permissionMode}
                             collaborationMode={collaborationMode}
-                            toastBanner={bannerToast}
                         />
                     </div>
                 </ComposerPrimitive.Root>
diff --git a/web/src/components/GridView.tsx b/web/src/components/GridView.tsx
index bfbd52225..684afc3ce 100644
--- a/web/src/components/GridView.tsx
+++ b/web/src/components/GridView.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import { useGlobalKeyboard } from '@/hooks/useGlobalKeyboard'
 import { SessionSearchModal } from '@/components/SessionSearchModal'
@@ -66,6 +66,39 @@ export function GridView({ sessions, baseUrl, token }: Props) {
     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
@@ -337,10 +370,24 @@ export function GridView({ sessions, baseUrl, token }: Props) {
                                 borderRadius: 8,
                                 border: '1px solid rgba(255,255,255,0.06)',
                             }}>
-                                {session.active && (
-                                    <div style={{ width: 5, height: 5, borderRadius: '50%',
-                                        background: '#34c759', flexShrink: 0 }} />
-                                )}
+                                {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' }}>
diff --git a/web/src/components/ToastContainer.tsx b/web/src/components/ToastContainer.tsx
index ab5d4491d..bde61cc8c 100644
--- a/web/src/components/ToastContainer.tsx
+++ b/web/src/components/ToastContainer.tsx
@@ -6,7 +6,7 @@ export function ToastContainer() {
     const navigate = useNavigate()
     const { toasts, removeToast } = useToast()
 
-    // In grid iframes, toasts are shown inline in the composer status bar instead
+    // 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/index.css b/web/src/index.css
index eb9a5add1..766597d35 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -353,6 +353,14 @@ html[data-theme="dark"] .shiki span {
   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;

From c80a4c6db5c431a969b9e7932b4c831935bd76cf Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Thu, 16 Apr 2026 17:44:54 -0600
Subject: [PATCH 09/10] fix(test): update composer-drafts tests for
 localStorage migration

Stub localStorage (primary) and sessionStorage (migration source),
add migration test, rename "sessionStorage" references in test names.

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 web/src/lib/composer-drafts.test.ts | 43 ++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 13 deletions(-)

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,

From 1f3059f6643921f735027bf54fd8c13ec8986f18 Mon Sep 17 00:00:00 2001
From: YiwenZhu <yz167@rice.edu>
Date: Sat, 18 Apr 2026 17:49:45 -0600
Subject: [PATCH 10/10] feat(cli): add /btw and /branch to Claude builtin slash
 commands

Adds autocomplete entries for two Claude Code built-in commands
that were missing from HAPI's suggestion list. Execution is handled
by the Claude CLI itself.

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 cli/src/modules/common/slashCommands.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/cli/src/modules/common/slashCommands.ts b/cli/src/modules/common/slashCommands.ts
index 127cd78b7..8c992b662 100644
--- a/cli/src/modules/common/slashCommands.ts
+++ b/cli/src/modules/common/slashCommands.ts
@@ -26,6 +26,8 @@ export interface ListSlashCommandsResponse {
  */
 const BUILTIN_COMMANDS: Record<string, SlashCommand[]> = {
     claude: [
+        { name: 'branch', description: 'Create a new conversation branch', source: 'builtin' },
+        { name: 'btw', description: 'Add a note without triggering a response', source: 'builtin' },
         { name: 'clear', description: 'Clear conversation history', source: 'builtin' },
         { name: 'compact', description: 'Compact conversation context', source: 'builtin' },
         { name: 'context', description: 'Show context information', source: 'builtin' },