cli-jaw 2.17.62 → 2.17.63

package/public/manager/src/browser-panel/BrowserPanel.tsx

@@ -3,7 +3,7 @@ import { getDesktop, isElectron } from '../panels/desktop-bridge';
 import type { BrowserPickedElement, BrowserWebviewCommand, BrowserWebviewNativeAction, BrowserWebviewScreenshot, BrowserWebviewTabState } from '../panels/desktop-bridge';
 import { DEFAULT_BROWSER_URL, isRestrictedBrowserHost, normalizeBrowserTarget } from './browser-url';
 import { BrowserAddressBar } from './browser-address-bar';
-import { createAddressBarState, displayedAddress, reduceAddressBar, type AddressBarAction, type AddressBarState } from './browser-address-state';
+import { createAddressBarState, displayedAddress, reduceAddressBar, shouldShowRecentVisits, type AddressBarAction, type AddressBarState } from './browser-address-state';
 import { pickFaviconUrl, faviconInitial } from './browser-favicon';
 import { loadBrowserHistory, saveBrowserHistory, upsertBrowserHistory, type BrowserHistoryEntry } from './browser-history-store';
 import './browser-panel.css';
@@ -308,7 +308,6 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [addressState, setAddressState] = useState<AddressBarState>(() => createAddressBarState(initialTab.current.url));
     const [historyEntries, setHistoryEntries] = useState<BrowserHistoryEntry[]>(() => loadBrowserHistory());
-    const committedByUserRef = useRef<Set<string>>(new Set());
     const pendingNavigationRefs = useRef<Map<string, string>>(new Map());
     /**
      * The webview `src` attribute is bound ONCE per page tab and never
@@ -384,10 +383,17 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
     const activeRegistrationId = registrationIdFor(activeTab.id);
     const activeBridgeState = bridgeStates[activeRegistrationId] ?? null;
     const nativeInspecting = activeBridgeState?.inspecting === true;
+    // Page coordinates from the guest (CDP box models) are CSS px; the panel
+    // overlays live in DIP, so bounds picked under a non-1 zoomFactor must be
+    // scaled before they are drawn.
+    const zoomFactorRef = useRef(1);
+    zoomFactorRef.current = activeBridgeState?.zoomFactor ?? activeTab.zoomFactor ?? 1;
 
     const panelInstanceId = useRef<symbol>(Symbol('browser-panel'));
     /** regId -> guest webContentsId for this panel's live registrations. */
     const registeredWebContentsIds = useRef<Map<string, number>>(new Map());
+    /** Stable viewport box the active webview fills (survives tab switches). */
+    const webviewStackRef = useRef<HTMLDivElement | null>(null);
 
     const registerWebviewTarget = useCallback((tabId: string, webview: ElectronWebviewElement) => {
         const browserBridge = getDesktop()?.browser;
@@ -439,6 +445,39 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
         });
     }, [updateTab]);
 
+    // Fit-to-width: ask the guest to re-fit its zoom whenever the panel box
+    // resizes (drawer drag, sidebar toggle, window resize). The initial
+    // observe() fire also covers first layout; the guest no-ops while the
+    // user holds a manual zoom from the zoom menu.
+    useEffect(() => {
+        const browserBridge = getDesktop()?.browser;
+        const host = webviewStackRef.current;
+        if (!canUseElectronWebview || !host || typeof browserBridge?.controlWebview !== 'function') return undefined;
+        const controlWebview = browserBridge.controlWebview;
+        let timer = 0;
+        const requestFit = () => {
+            window.clearTimeout(timer);
+            timer = window.setTimeout(() => {
+                void controlWebview({ kind: 'fitToWidth', tabId: registrationIdFor(activeTabIdRef.current) });
+            }, 200);
+        };
+        const observer = new ResizeObserver(requestFit);
+        observer.observe(host);
+        return () => {
+            window.clearTimeout(timer);
+            observer.disconnect();
+        };
+    }, [canUseElectronWebview, registrationIdFor]);
+
+    // A hidden tab keeps whatever zoom it had when the panel resized; the
+    // observer above only covers the active tab and does not refire for an
+    // unchanged box, so re-fit once when a tab comes back to the front.
+    useEffect(() => {
+        const browserBridge = getDesktop()?.browser;
+        if (!canUseElectronWebview || !activeRegistrationId || typeof browserBridge?.controlWebview !== 'function') return;
+        void browserBridge.controlWebview({ kind: 'fitToWidth', tabId: activeRegistrationId });
+    }, [activeRegistrationId, canUseElectronWebview]);
+
     // v5: native inspect returns the REAL element (selector/role/name/bounds).
     // When it fires for this panel's active tab, pin the element and open the
     // composer anchored to the element's box center.
@@ -449,7 +488,8 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
             if (tabId !== activeRegistrationId) return;
             setPickedElement({ ...element, pickedAt: Date.now(), pageUrl: activeTab.url, tabId: activeRegistrationId });
             if (element.bounds) {
-                setCommentAnchor({ x: element.bounds.x + Math.round(element.bounds.width / 2), y: element.bounds.y + Math.round(element.bounds.height / 2) });
+                const zoom = zoomFactorRef.current;
+                setCommentAnchor({ x: Math.round((element.bounds.x + element.bounds.width / 2) * zoom), y: Math.round((element.bounds.y + element.bounds.height / 2) * zoom) });
             }
             setCommentMode(true);
             const label = element.name || element.text || element.selector;
@@ -705,7 +745,6 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
         pendingNavigationRefs.current.delete(id);
         initialSrcRefs.current.delete(id);
         lastKnownUrlRefs.current.delete(id);
-        committedByUserRef.current.delete(id);
         stableWebviewRefCallbacks.current.delete(id);
         unregisterWebviewTarget(id);
         setTabs(current => {
@@ -727,16 +766,11 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
     const navigate = useCallback(() => {
         const rawTarget = addressState.focused ? addressState.draft : displayedAddress(addressState);
         dispatchAddress({ type: 'submit' });
-        const normalized = normalizeBrowserTarget(rawTarget);
-        if (normalized && normalized !== DEFAULT_BROWSER_URL) {
-            committedByUserRef.current.add(activeTab.id);
-        }
         openUrlInTab(activeTab.id, rawTarget);
         inputRef.current?.blur();
     }, [activeTab.id, addressState, dispatchAddress, openUrlInTab]);
 
     const openHistoryEntry = useCallback((url: string) => {
-        committedByUserRef.current.add(activeTab.id);
         dispatchAddress({ type: 'submit' });
         openUrlInTab(activeTab.id, url);
         inputRef.current?.blur();
@@ -1131,7 +1165,7 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
                                     )}
                                     <div className="browser-more-zoom" role="group" aria-label="Page zoom" onClick={event => event.stopPropagation()}>
                                         <button type="button" className="browser-more-item" onClick={() => void handleZoom('zoomOut')}>Zoom out</button>
-                                        <span className="browser-more-zoom-label">{Math.round((activeTab.zoomFactor ?? 1) * 100)}%</span>
+                                        <span className="browser-more-zoom-label">{Math.round((activeTab.zoomFactor ?? 1) * 100)}%{activeBridgeState?.zoomMode === 'auto' && (activeTab.zoomFactor ?? 1) < 1 ? ' fit' : ''}</span>
                                         <button type="button" className="browser-more-item" onClick={() => void handleZoom('zoomIn')}>Zoom in</button>
                                         <button type="button" className="browser-more-item" onClick={() => void handleZoom('zoomReset')}>Reset</button>
                                     </div>
@@ -1150,15 +1184,16 @@ export function BrowserPanel(props: BrowserPanelProps = {}) {
                 </div>
             )}
             {canUseElectronWebview ? (
-                <div className="browser-webview-stack">
+                <div className="browser-webview-stack" ref={webviewStackRef}>
                     <div key={activeTab.id} className="browser-webview-host is-active">
-                        {historyEntries.length > 0 && !activeTab.loading && ((addressState.focused && addressState.draft.trim() === '') || !committedByUserRef.current.has(activeTab.id)) && (
+                        {historyEntries.length > 0 && shouldShowRecentVisits(addressState) && (
                             <div className="browser-history-empty" aria-label="Recent visits">
                                 {historyEntries.map(entry => (
                                     <button
                                         key={`${entry.url}:${entry.at}`}
                                         type="button"
                                         className="browser-history-item"
+                                        onMouseDown={event => event.preventDefault()}
                                         onClick={() => openHistoryEntry(entry.url)}
                                     >
                                         <span className="browser-history-title">{entry.title || entry.url}</span>

package/public/manager/src/browser-panel/browser-address-state.ts

@@ -20,6 +20,17 @@ export function displayedAddress(state: AddressBarState): string {
     return state.focused ? state.draft : state.liveUrl;
 }
 
+/**
+ * Recents overlay gate. The overlay covers the page, so it belongs to the
+ * address bar only while that bar holds focus: focus seeds the draft with the
+ * live URL, and an empty draft means the user cleared the field to search.
+ * Anything else typed is a query the user is composing, and an unfocused bar
+ * always leaves the page visible.
+ */
+export function shouldShowRecentVisits(state: AddressBarState): boolean {
+    return state.focused && (state.draft.trim() === '' || state.draft === state.liveUrl);
+}
+
 export function reduceAddressBar(state: AddressBarState, action: AddressBarAction): AddressBarState {
     switch (action.type) {
         case 'sync-live':

package/public/manager/src/client-platform.ts

@@ -0,0 +1,18 @@
+// Client-side OS detection for keyboard behavior and labels.
+//
+// This reads the browser or desktop window that receives the key events, never
+// the server's process.platform: a dashboard served from a Mac can be opened from
+// a Windows machine, and the keyboard in front of the user is what matters.
+
+type NavigatorWithUserAgentData = Navigator & { userAgentData?: { platform?: string } };
+
+export function currentClientPlatform(): string {
+    if (typeof navigator === 'undefined') return '';
+    const nav = navigator as NavigatorWithUserAgentData;
+    return nav.userAgentData?.platform || nav.platform || nav.userAgent || '';
+}
+
+export function isMacLikePlatform(platform: string = currentClientPlatform()): boolean {
+    return /mac|iphone|ipad|ipod/i.test(platform);
+}
+

package/public/manager/src/code/CodeCanvas.tsx

@@ -9,9 +9,11 @@ type CodeCanvasProps = {
     workingDir: string;
     onWorkingDirChange?: (path: string | null) => void;
     onOpenLocalFile?: (path: string) => void;
+    /** Resolved `newCodeSession` chord, shown as the button's shortcut hint. */
+    newSessionShortcut?: string | undefined;
 };
 
-export function CodeCanvas({ port, workingDir, onWorkingDirChange, onOpenLocalFile }: CodeCanvasProps) {
+export function CodeCanvas({ port, workingDir, onWorkingDirChange, onOpenLocalFile, newSessionShortcut }: CodeCanvasProps) {
     const controller = useCodeController({ port, workingDir });
     const [sidebarHost, setSidebarHost] = useState<HTMLElement | null>(null);
     const previousWorkspace = useRef({ port, id: controller.selectedId, cwd: controller.selection.cwd });
@@ -26,7 +28,7 @@ export function CodeCanvas({ port, workingDir, onWorkingDirChange, onOpenLocalFi
             onWorkingDirChange?.(next.cwd || null);
         }
     }, [port, controller.selectedId, controller.selection.cwd, onWorkingDirChange]);
-    const navigator = <CodeSessionList key={port} controller={controller} />;
+    const navigator = <CodeSessionList key={port} controller={controller} newSessionShortcut={newSessionShortcut} />;
     const workbench = <CodeWorkbench key={port} controller={controller} endpointKey={String(port)} onOpenLocalFile={onOpenLocalFile} />;
     if (sidebarHost) return <>
         {createPortal(<div className="code-manager-session-navigator-content">{navigator}</div>, sidebarHost)}

package/public/manager/src/code/CodeComposer.tsx

@@ -9,7 +9,16 @@ type CodeComposerProps = {
     canStop: boolean;
     stopping: boolean;
     pending: boolean;
+    /** A busy Claude turn takes a follow-up: Send follow-up renders beside Stop. */
+    followUp?: boolean;
+    /** The running turn already has its one follow-up. */
+    followUpSent?: boolean;
+    /** A follow-up is in flight. */
+    steering?: boolean;
+    /** What the pending operation is doing, when it is not a send. */
+    pendingLabel?: string;
     readOnly: boolean;
+    autoFocus?: boolean;
     onInputChange: (text: string) => void;
     onSubmit: () => Promise<void>;
     onStop: () => Promise<void>;
@@ -52,9 +61,12 @@ export function CodeComposer(props: CodeComposerProps) {
     return <div className="code-composer">
         <div className="code-composer-input-shell">
             <textarea className="code-composer-input" aria-label="Code prompt" value={props.inputText}
+                autoFocus={props.autoFocus}
                 onChange={event => props.onInputChange(event.target.value)} onKeyDown={handleKeyDown}
                 onCompositionStart={() => { composing.current = true; }} onCompositionEnd={() => { composing.current = false; }}
-                placeholder={props.busy ? 'Draft a follow-up while this turn runs…' : 'Describe a task or ask a question…'}
+                placeholder={props.followUpSent ? 'This turn already has its follow-up. Draft the next message…'
+                    : props.followUp ? 'Send a follow-up while this turn runs…'
+                    : props.busy ? 'Draft a follow-up while this turn runs…' : 'Describe a task or ask a question…'}
                 rows={2} readOnly={props.readOnly} />
             <span className="code-composer-hint">Enter to send · Shift+Enter for a new line</span>
         </div>
@@ -66,18 +78,18 @@ export function CodeComposer(props: CodeComposerProps) {
                 title={dictation.reason} onClick={dictation.toggle}>
                 <MicGlyph muted={dictation.status === 'unsupported'} />
             </button>
-            {props.busy
-                ? <button type="button" className="code-composer-send code-composer-stop" aria-label="Stop current turn"
-                    title={props.stopping ? 'Stopping' : 'Stop current turn'}
-                    disabled={!props.canStop || props.stopping} onClick={() => void stop()}><StopGlyph /></button>
-                : <button type="button" className="code-composer-send" aria-label="Send prompt"
-                    title={props.pending ? 'Sending' : 'Send prompt'}
-                    disabled={!props.canSend || !props.inputText.trim()} onClick={() => void submit()}><SendGlyph /></button>}
+            {props.busy && <button type="button" className="code-composer-send code-composer-stop" aria-label="Stop current turn"
+                title={props.stopping ? 'Stopping' : 'Stop current turn'}
+                disabled={!props.canStop || props.stopping} onClick={() => void stop()}><StopGlyph /></button>}
+            {(!props.busy || props.followUp) && <button type="button" className="code-composer-send"
+                aria-label={props.busy ? 'Send follow-up' : 'Send prompt'}
+                title={props.steering ? 'Sending follow-up' : props.pending ? 'Sending' : props.busy ? 'Send follow-up' : 'Send prompt'}
+                disabled={!props.canSend || !props.inputText.trim()} onClick={() => void submit()}><SendGlyph /></button>}
         </div>
         {/* An icon button cannot announce progress on its own. */}
-        {(props.stopping || props.pending || dictation.status === 'recording' || dictation.status === 'transcribing') &&
+        {(props.stopping || props.steering || props.pending || dictation.status === 'recording' || dictation.status === 'transcribing') &&
             <span className="code-composer-status" role="status">
-                {props.stopping ? 'Stopping…' : props.pending ? 'Sending…'
+                {props.stopping ? 'Stopping…' : props.steering ? 'Sending follow-up…' : props.pending ? props.pendingLabel ?? 'Sending…'
                     : dictation.status === 'recording' ? 'Recording…' : 'Transcribing…'}</span>}
         {(error || dictation.error) && <div className="code-action-error" role="alert">{error ?? dictation.error}</div>}
     </div>;

package/public/manager/src/code/CodeDraftEmptyState.tsx

@@ -0,0 +1,64 @@
+import type { CodeControllerModel } from './code-controller-types';
+import { CODE_RUNTIME_LABELS } from './code-types';
+import { recentCodeWorkspaces } from './code-recent-workspaces';
+
+/**
+ * What a fresh draft looks like before its first prompt. Modelled on ZCode's
+ * ConversationDraftEmptyState and T3 Code's NoActiveThreadState: the workspace
+ * is the decision that gates everything else, so it is the one prominent
+ * control; the suggested prompts only fill the composer, they never send.
+ */
+const SUGGESTED_PROMPTS: readonly string[] = [
+    'Explain this codebase',
+    'Find and fix a bug',
+    'Write tests for the module I name',
+    'Review uncommitted changes',
+];
+
+// A chip and a recent both unmount the control that was activated -- the chip
+// disappears once the draft is non-empty and the chosen recent leaves the
+// list -- so keyboard focus is handed to the composer instead of dropping to
+// <body>.
+function focusComposer(): void {
+    document.querySelector<HTMLTextAreaElement>('textarea[aria-label="Code prompt"]')?.focus();
+}
+
+export function CodeDraftEmptyState({ controller: c }: { controller: CodeControllerModel }) {
+    const cwd = c.selection.cwd;
+    // Same freeze rule as CodeWorkspaceHeader: once creation is in flight the
+    // draft belongs to it, and an unconfirmed create must not be edited around.
+    const frozen = c.selectedId !== null || c.pending || c.creationUnknown || c.operation.kind !== 'idle';
+    // Shared with the header picker so only one folder dialog can be open.
+    const picking = c.workspacePicking;
+    // Exclude the current cwd before the cap; otherwise it silently eats a slot.
+    const recents = recentCodeWorkspaces(c.sessions.filter(session => session.cwd !== cwd));
+    function pick() {
+        if (frozen || picking) return;
+        void c.pickWorkspace();
+    }
+    function chooseWorkspace(dir: string) {
+        if (frozen) return;
+        void c.setSelection({ cwd: dir });
+        focusComposer();
+    }
+    return <section className="code-draft-empty" aria-label="New session draft">
+        <h2 className="code-draft-empty-title">New session</h2>
+        {frozen ? <span className="code-workspace-chip" title={cwd}>{cwd || 'Workspace not set'}</span>
+            : <button type="button" className="code-workspace-picker code-draft-empty-picker" aria-label="Choose workspace for the new session"
+                disabled={picking} title={cwd || 'Choose a folder'} onClick={pick}>
+                <span className="code-workspace-picker-label">{picking ? 'Choosing folder…' : cwd || 'Choose workspace'}</span>
+            </button>}
+        <p className="code-draft-empty-selection">
+            {CODE_RUNTIME_LABELS[c.selection.provider]} · {c.selection.model || 'No model selected'}
+        </p>
+        {recents.length > 0 && <div className="code-draft-recents">
+            <span className="code-draft-recents-label">Recent workspaces</span>
+            {recents.map(dir => <button type="button" key={dir} className="code-draft-recent" title={dir}
+                disabled={frozen} onClick={() => chooseWorkspace(dir)}>{dir}</button>)}
+        </div>}
+        {!c.input.trim() && <div className="code-draft-prompts">
+            {SUGGESTED_PROMPTS.map(text => <button type="button" key={text} className="code-draft-prompt"
+                disabled={frozen} onClick={() => { c.setInput(text); focusComposer(); }}>{text}</button>)}
+        </div>}
+    </section>;
+}

package/public/manager/src/code/CodeSessionList.tsx

@@ -1,10 +1,44 @@
-import { useId, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import type { CodeSessionInfo } from '../../../../src/code-mode/wire';
 import type { CodeControllerModel } from './code-controller-types';
 import { CODE_RUNTIME_LABELS, CODE_SESSION_LABELS, codeCanResume, codeSessionBusy } from './code-types';
-import { codeSessionAttention, codeSessionAttentionLabel, groupCodeSessions } from './session-order';
+import {
+    CODE_ACTIVITY_BUCKET_LABELS, codeSessionAttention, codeSessionAttentionLabel, codeSessionUnread, codeWorkspaceName,
+    groupCodeSessions, groupCodeSessionsByActivity, groupCodeSessionsByWorkspace,
+} from './session-order';
+import { DEFAULT_MANAGER_SHORTCUT_KEYMAP, formatShortcut } from '../manager-shortcuts';
 
-function SessionRow({ session: s, controller: c }: { session: CodeSessionInfo; controller: CodeControllerModel }) {
+const NEW_SESSION_SHORTCUT = DEFAULT_MANAGER_SHORTCUT_KEYMAP.newCodeSession;
+
+type CodeSidebarView = 'projects' | 'activity';
+const SIDEBAR_VIEW_KEY = 'jaw.code.sidebarView';
+
+function readSidebarView(): CodeSidebarView {
+    try { return localStorage.getItem(SIDEBAR_VIEW_KEY) === 'activity' ? 'activity' : 'projects'; }
+    catch { return 'projects'; }
+}
+
+function BellGlyph() {
+    return <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" focusable="false">
+        <path d="M8 2.5a3.5 3.5 0 0 0-3.5 3.5v2.3L3.3 10.6h9.4L11.5 8.3V6A3.5 3.5 0 0 0 8 2.5Z M6.6 12.4a1.5 1.5 0 0 0 2.8 0"
+            fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round" />
+    </svg>;
+}
+
+function SearchGlyph() {
+    return <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" focusable="false">
+        <circle cx="7" cy="7" r="4.25" fill="none" stroke="currentColor" strokeWidth="1.4" />
+        <path d="M10.2 10.2 13.5 13.5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+    </svg>;
+}
+
+function PlusGlyph() {
+    return <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+        <path d="M8 3.5v9M3.5 8h9" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
+    </svg>;
+}
+
+function SessionRow({ session: s, controller: c, view }: { session: CodeSessionInfo; controller: CodeControllerModel; view: CodeSidebarView }) {
     const [renaming, setRenaming] = useState(false);
     const [title, setTitle] = useState(s.title ?? '');
     const [pending, setPending] = useState(false);
@@ -16,6 +50,9 @@ function SessionRow({ session: s, controller: c }: { session: CodeSessionInfo; c
     const busy = codeSessionBusy(s);
     const count = active && c.synced ? c.permissions.length : s.pendingPermissionCount;
     const attention = codeSessionAttention(count);
+    const unread = !active && codeSessionUnread(s);
+    const working = c.workingIds?.has(s.sessionId) ?? false;
+    const waiting = working && s.status === 'idle';
     async function action(run: () => Promise<void>, after?: () => void) {
         if (guard.current) return;
         guard.current = true; setPending(true); setError(null);
@@ -27,13 +64,20 @@ function SessionRow({ session: s, controller: c }: { session: CodeSessionInfo; c
     return <li className="code-session-row">
         <button ref={selectButton} type="button" className={`code-session-item${active ? ' active' : ''}`}
             aria-current={active ? 'true' : undefined} onClick={() => void action(() => c.selectSession(s.sessionId))}>
-            <span className="code-session-cwd">{s.title || 'Untitled session'}</span>
-            <span className="code-session-meta" title={s.cwd}>{CODE_RUNTIME_LABELS[s.provider]} · {s.cwd}</span>
+            <span className="code-session-cwd">
+                {unread && <span className="code-session-unread-dot" role="img" aria-label="Unread" />}
+                {s.title || 'Untitled session'}
+            </span>
+            {/* Projects view already names the workspace in the group heading. */}
+            <span className="code-session-meta" title={s.cwd}>{view === 'activity'
+                ? `${codeWorkspaceName(s.cwd)} · ${CODE_RUNTIME_LABELS[s.provider]}` : CODE_RUNTIME_LABELS[s.provider]}</span>
             {/* Ready is the common case and stays silent. A status on every row
                 is a status on no row, and it costs the one session that is
                 actually doing something its visibility. */}
-            <span className={`code-session-status code-session-status-${s.status}`}
-                data-quiet={s.status === 'idle' ? 'true' : undefined}>{CODE_SESSION_LABELS[s.status]}</span>
+            <span className={`code-session-status code-session-status-${waiting ? 'starting' : s.status}`}
+                data-quiet={s.status === 'idle' && !working ? 'true' : undefined}>
+                {working && <span className="code-session-spinner" aria-hidden="true" />}
+                {waiting ? CODE_SESSION_LABELS.starting : CODE_SESSION_LABELS[s.status]}</span>
             <span className={`code-session-attention code-session-attention-${attention.kind}`}
                 data-quiet={attention.kind === 'none' ? 'true' : undefined}>{codeSessionAttentionLabel(attention)}</span>
         </button>
@@ -63,26 +107,68 @@ function SessionRow({ session: s, controller: c }: { session: CodeSessionInfo; c
     </li>;
 }
 
-export function CodeSessionList({ controller: c }: { controller: CodeControllerModel }) {
+export function CodeSessionList({ controller: c, newSessionShortcut = NEW_SESSION_SHORTCUT }: { controller: CodeControllerModel; newSessionShortcut?: string | undefined }) {
     const [search, setSearch] = useState('');
-    const [grouped, setGrouped] = useState(false);
+    const [searching, setSearching] = useState(false);
+    const searchInput = useRef<HTMLInputElement>(null);
+    function toggleSearch() {
+        // Closing clears the query so the list is never silently filtered by a hidden box.
+        if (searching) { setSearching(false); setSearch(''); return; }
+        setSearching(true);
+        queueMicrotask(() => searchInput.current?.focus());
+    }
+    const draftBadgeId = useId();
+    const [view, setViewState] = useState<CodeSidebarView>(readSidebarView);
+    function setView(next: CodeSidebarView) {
+        setViewState(next);
+        try { localStorage.setItem(SIDEBAR_VIEW_KEY, next); } catch { /* storage unavailable: the choice lasts for this page */ }
+    }
     const [error, setError] = useState<string | null>(null);
     const [paging, setPaging] = useState(false);
     const pagingRef = useRef(false);
     const visible = c.sessions.filter(s => `${s.title ?? ''} ${s.cwd} ${CODE_RUNTIME_LABELS[s.provider]}`.toLowerCase().includes(search.toLowerCase()));
-    // Two orderings, deliberately: by workspace when the reader asks for it,
-    // otherwise by lifecycle. Neither uses last activity, so answering a prompt
-    // in one session does not move it under the reader's cursor -- which is
-    // what the server's own last-used ordering would do.
-    const groups = grouped
-        ? [...visible.reduce((map, s) => {
-            const rows = map.get(s.cwd) ?? []; rows.push(s); map.set(s.cwd, rows); return map;
-        }, new Map<string, CodeSessionInfo[]>())].map(([cwd, sessions]) => ({ title: cwd, key: cwd, sessions }))
-        : groupCodeSessions(visible).map(group => ({
-            key: group.section,
-            title: group.section === 'archived' ? 'Archived' : '',
-            sessions: group.sessions,
-        }));
+    // Projects (the default) keeps rows in creation order under their workspace, so
+    // answering a prompt never moves a row under the reader's cursor. Activity is the
+    // reader's explicit choice: unread first, then last activity by day.
+    const anyUnread = c.sessions.some(row => row.sessionId !== c.selectedId && codeSessionUnread(row));
+    const live = visible.filter(row => row.archivedAt === null);
+    const archived = visible.filter(row => row.archivedAt !== null);
+    const groups: { key: string; title: string; cwd: string | null; sessions: CodeSessionInfo[] }[] = view === 'activity'
+        ? groupCodeSessionsByActivity(live, Date.now(), c.selectedId).map(group => ({
+            key: group.bucket, title: CODE_ACTIVITY_BUCKET_LABELS[group.bucket], cwd: null, sessions: group.sessions }))
+        : groupCodeSessionsByWorkspace(live).map(group => ({ key: group.cwd, title: group.cwd, cwd: group.cwd, sessions: group.sessions }));
+    if (archived.length) groups.push({ key: 'archived', title: 'Archived', cwd: null, sessions: groupCodeSessions(archived).flatMap(group => group.sessions) });
+    // The chord resolves through the manager shortcut system (rebindable in
+    // Settings); the runner re-broadcasts it here so Code mode can be absent
+    // without the event reaching a dead handler.
+    const newSession = c.newSession;
+    useEffect(() => {
+        function onShortcutAction(event: Event) {
+            if ((event as CustomEvent<string>).detail === 'newCodeSession') newSession();
+        }
+        document.addEventListener('jaw:shortcut-action', onShortcutAction);
+        return () => document.removeEventListener('jaw:shortcut-action', onShortcutAction);
+    }, [newSession]);
+    async function newInWorkspace(cwd: string) {
+        c.newSession();
+        // Silently retargeting a draft that holds unsent text or an unreconciled
+        // send would move that content to another workspace; setSelection also
+        // early-returns while the draft it is about to retarget is mid-operation.
+        // Say why instead, each reason in its own words.
+        if (c.hasUnsentDraft) {
+            setError('Send or clear the current draft before choosing another workspace.');
+            return;
+        }
+        // A busy *session* is not that case: newSession has already moved the
+        // reader onto a fresh draft, so the + still retargets that draft.
+        if (c.selectedId === null && c.pending) {
+            setError('Wait for the current change to finish before choosing another workspace.');
+            return;
+        }
+        setError(null);
+        try { await c.setSelection({ cwd }); }
+        catch (err) { setError(err instanceof Error ? err.message : String(err)); }
+    }
     async function loadMore() {
         if (pagingRef.current) return;
         pagingRef.current = true; setPaging(true); setError(null);
@@ -91,28 +177,56 @@ export function CodeSessionList({ controller: c }: { controller: CodeControllerM
         finally { pagingRef.current = false; setPaging(false); }
     }
     return <nav className="code-session-list" aria-label="Code sessions">
-        <div className="code-session-list-header"><span className="code-session-list-title">Sessions</span>
-            <button type="button" className="code-session-new-btn" onClick={c.newSession} aria-label="New Code session">+</button>
-        </div>
-        <div className="code-session-view-toggle" aria-label="Session view">
-            <button type="button" aria-pressed={c.filter.scope === 'all'} className={`code-session-view-btn${c.filter.scope === 'all' ? ' active' : ''}`}
-                onClick={() => c.setFilter({ ...c.filter, scope: 'all' })}>All</button>
-            <button type="button" aria-pressed={c.filter.scope === 'cwd'} className={`code-session-view-btn${c.filter.scope === 'cwd' ? ' active' : ''}`}
-                onClick={() => c.setFilter({ ...c.filter, scope: 'cwd' })}>This cwd</button>
-            <button type="button" aria-pressed={grouped} className={`code-session-view-btn${grouped ? ' active' : ''}`} onClick={() => setGrouped(!grouped)}>Group</button>
+        <button type="button" className={`code-session-new-primary${c.selectedId === null ? ' active' : ''}`}
+            aria-current={c.selectedId === null ? 'true' : undefined}
+            // The name is fixed so it survives the label, badge and chord
+            // changes; the draft state therefore travels as a description.
+            aria-label="New Code session"
+            aria-describedby={c.hasUnsentDraft ? draftBadgeId : undefined}
+            title={`Start a new session (${formatShortcut(newSessionShortcut)})`} onClick={c.newSession}>
+            <PlusGlyph />
+            <span className="code-session-new-label">New session</span>
+            {c.hasUnsentDraft && <span id={draftBadgeId} className="code-session-draft-badge">Draft</span>}
+            <kbd className="code-session-new-hint" aria-hidden="true">{formatShortcut(newSessionShortcut)}</kbd>
+        </button>
+        <div className="code-session-list-header">
+            <span className="code-session-list-title">{view === 'activity' ? 'Recent activity' : 'Projects'}</span>
+            <span className="code-session-header-actions">
+            <button type="button" className={`code-session-header-btn code-session-search-btn${searching ? ' active' : ''}`}
+                aria-pressed={searching} aria-label="Search sessions" title="Search sessions" onClick={toggleSearch}>
+                <SearchGlyph />
+            </button>
+            <button type="button" className={`code-session-header-btn code-session-bell${view === 'activity' ? ' active' : ''}`}
+                aria-pressed={view === 'activity'}
+                aria-label={anyUnread ? 'Recent activity (unread sessions)' : 'Recent activity'}
+                title={view === 'activity' ? 'Back to projects' : 'Recent activity'}
+                onClick={() => setView(view === 'activity' ? 'projects' : 'activity')}>
+                <BellGlyph />
+                {anyUnread && <span className="code-session-unread-dot" aria-hidden="true" />}
+            </button>
+            </span>
         </div>
-        <label className="code-session-archive-filter"><input type="checkbox" checked={c.filter.archived}
-            onChange={event => c.setFilter({ ...c.filter, archived: event.target.checked })} />Archived</label>
-        <input className="code-session-search" type="search" aria-label="Search loaded sessions" placeholder="Search loaded sessions…"
-            value={search} onChange={event => setSearch(event.target.value)} />
-        <button type="button" className={`code-session-item${c.selectedId === null ? ' active' : ''}`} aria-current={c.selectedId === null ? 'true' : undefined}
-            onClick={c.newSession}><span className="code-session-cwd">New session draft</span><span className="code-session-meta">Preserved unsent draft</span></button>
+        {/* Projects already scopes by workspace, so the All / This cwd toggle is gone.
+            Search and the archived switch live behind the search icon. */}
+        {searching && <div className="code-session-search-row">
+            <input ref={searchInput} className="code-session-search" type="search" aria-label="Search loaded sessions"
+                placeholder="Search sessions…" value={search} onChange={event => setSearch(event.target.value)}
+                onKeyDown={event => { if (event.key === 'Escape') { event.preventDefault(); toggleSearch(); } }} />
+            <button type="button" className={`code-session-archived-btn${c.filter.archived ? ' active' : ''}`}
+                aria-pressed={c.filter.archived} title="Include archived sessions"
+                onClick={() => c.setFilter({ ...c.filter, archived: !c.filter.archived })}>Archived</button>
+        </div>}
         {c.loading && <div className="code-session-list-loading" role="status">Loading sessions…</div>}
         {groups.map(group => <section className="code-session-group" key={group.key}>
-            {group.title && <h3 className="code-session-group-title" title={group.title}>{group.title}</h3>}
-            <ul className="code-session-list-items">{group.sessions.map(s => <SessionRow key={s.sessionId} session={s} controller={c} />)}</ul>
+            {group.title && <h3 className={`code-session-group-title${group.key === 'priority' ? ' code-session-group-priority' : ''}`} title={group.title}>
+                <span>{group.cwd !== null ? codeWorkspaceName(group.cwd) : group.title}</span>
+                {group.cwd !== null && <button type="button" className="code-session-group-new"
+                    aria-label={`New session in ${group.cwd}`} title={`New session in ${group.cwd}`}
+                    onClick={() => void newInWorkspace(group.cwd!)}>+</button>}
+            </h3>}
+            <ul className="code-session-list-items">{group.sessions.map(s => <SessionRow key={s.sessionId} session={s} controller={c} view={view} />)}</ul>
         </section>)}
-        {!c.loading && !visible.length && <p className="code-session-list-empty">{search ? 'No loaded sessions match. Clear search or load more.' : 'No sessions here. Start with the new session draft.'}</p>}
+        {!c.loading && !visible.length && <p className="code-session-list-empty">{search ? 'No loaded sessions match. Clear search or load more.' : 'No sessions here. Start a new session above.'}</p>}
         {c.hasMoreSessions && <button type="button" className="code-inline-action" disabled={paging} onClick={() => void loadMore()}>{paging ? 'Loading…' : 'Load more sessions'}</button>}
         <button type="button" className="code-inline-action" onClick={() => { setError(null); void c.refresh().catch(err => setError(err instanceof Error ? err.message : String(err))); }}>Refresh sessions</button>
         {error && <div className="code-session-list-error" role="alert">{error}</div>}