diff --git a/AGENTS.md b/AGENTS.md
index 5d094bec20..676161344e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1894,6 +1894,7 @@ Sorting and the rest:
   - Decisions, with the count of questions that record a decision once sent.
   - Settings.
   - "A new version is ready, Restart" when health reports `update`. Restart is `POST /api/inbox/restart`: the server stops, the binary on disk starts detached, and the page reloads on the new `serverSession`.
+  - The frame is Workspaces' sidebar primitive, copied by the owner's word (2026-10-09) into `packages/inbox/shell/` (each file names its Workspaces source and commit): the toggle at the head of each page and ⌘B / Ctrl+B close and open it on Workspaces' one spring (`shell-motion.ts`, MotionValues from `motion`, reduced motion lands without travel); ⌘B does nothing in an input, a textarea or an editor; the state is the Inbox's own cookie `plannotator-inbox-sidebar-open` (open when absent). Closed, a 600 ms rest on the left edge peeks it (1024 px and wider). The edge collapses on a click and resizes on a drag (200 to 520 px, 232 by default, cookie `plannotator-inbox-sidebar-width`), closing past 100 px and reopening if the held pointer comes back. Below 768 px it is a sheet. A file beside a thread closes it on the same spring without changing the stored choice.
 - A wide row shows:
   - the project label
   - the badge ("Stopped", "Holds up N")
@@ -2099,6 +2100,7 @@ Sorting and the rest:
   - `inbox-attachments.spec.ts`
   - `inbox-guides.spec.ts`
   - `inbox-order.spec.ts` (three agents' questions read newest first in Waiting on you; a reply moves its row to Sent)
+  - `inbox-sidebar.spec.ts` (the sidebar's close and open sampled every frame, ⌘B and Ctrl+B, ⌘B left to the reply box, the reload, the peek, the edge's click, drag, snap-close and keyboard, reduced motion, the phone sheet; its PNGs, video and curves in `.local/proof/sidebar/`)
   - `inbox-phones.spec.ts` (Pair a phone, the device list and Remove; Reach from this Wi-Fi with a pinned phone pairing over the LAN, the no-Bonjour note and `openssl` failing; with `PLANNOTATOR_E2E_TAILNET=1` on a Mac signed in to Tailscale, the door at the MagicDNS name on 8443)
 
   PNGs land in `.local/proof/`.
diff --git a/bun.lock b/bun.lock
index 3dc3ea59e8..17ca0a7b47 100644
--- a/bun.lock
+++ b/bun.lock
@@ -278,10 +278,12 @@
       "name": "@plannotator/inbox",
       "version": "0.0.1",
       "dependencies": {
+        "@base-ui/react": "^1.7.0",
         "@plannotator/core": "workspace:*",
         "@plannotator/guide-viewer": "workspace:*",
         "@plannotator/review-editor": "workspace:*",
         "@plannotator/ui": "workspace:*",
+        "motion": "^12.38.0",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
         "uqr": "^0.1.3",
diff --git a/packages/inbox/App.tsx b/packages/inbox/App.tsx
index c2b655de6c..e825e55b6d 100644
--- a/packages/inbox/App.tsx
+++ b/packages/inbox/App.tsx
@@ -13,6 +13,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { ThemeProvider } from '@plannotator/ui/components/ThemeProvider';
 import { configurePlannotatorUI } from '@plannotator/ui/configure';
+import { storage } from '@plannotator/ui/utils/storage';
 import type { InboxDecision, InboxHealth, InboxListRow, InboxListSection, InboxQuestion, InboxThread } from '@plannotator/core/inbox-types';
 import {
   InboxApiError,
@@ -28,6 +29,7 @@ import { filterSections, heldNotice, refreshHeldRows, waitingCount } from './hel
 import { tildePath } from './format';
 import type { ConnectContext } from './harnesses';
 import { Sidebar } from './components/Sidebar';
+import { SidebarShell } from './shell/SidebarShell';
 import { InboxList } from './components/InboxList';
 import { ThreadPane } from './components/Thread';
 import { EmptyState } from './components/EmptyState';
@@ -54,6 +56,8 @@ configurePlannotatorUI({
   },
 });
 
+const SIDEBAR_OPEN_COOKIE = 'plannotator-inbox-sidebar-open';
+
 interface Route {
   page: 'inbox' | 'settings' | 'decisions';
   project: string | null;
@@ -122,6 +126,12 @@ function hasRows(sections: readonly InboxListSection[] | null): boolean {
 
 function Inbox() {
   const [route, setRoute] = useState<Route>(readRoute);
+  // Open or closed as the person left it (⌘B or the toggle): a cookie of the Inbox's own, open when absent.
+  const [sidebarOpen, setSidebarOpen] = useState(() => storage.getItem(SIDEBAR_OPEN_COOKIE) !== 'false');
+  const changeSidebar = useCallback((next: boolean) => {
+    setSidebarOpen(next);
+    storage.setItem(SIDEBAR_OPEN_COOKIE, String(next));
+  }, []);
   const [latest, setLatest] = useState<ListModel | null>(null);
   /** The list on screen: held until the person acts (the "N new" notice). */
   const [shown, setShown] = useState<InboxListSection[] | null>(null);
@@ -477,24 +487,31 @@ function Inbox() {
 
   return (
     <div className="pn-inbox">
-      <div className={`ib-shell${fileOpen ? ' ib-fileopen' : ''}`}>
-        <Sidebar
-          page={route.page}
-          projectId={route.project}
-          inboxCount={waitingCount(latestSections)}
-          decisionsCount={latest?.decisions_waiting ?? 0}
-          projects={projects}
-          projectCounts={projectCounts}
-          updateReady={update !== null}
-          restarting={restarting}
-          onInbox={() => go({ page: 'inbox', project: null, thread: null })}
-          onProject={(projectId) => go({ page: 'inbox', project: projectId, thread: null })}
-          onSettings={() => go({ page: 'settings', project: null, thread: null })}
-          onDecisions={() => go({ page: 'decisions', project: null, thread: null })}
-          onRestart={() => void restart()}
-        />
+      {/* A file beside the thread takes the sidebar's room (record 2.2): it closes on the same spring, and the person's choice stays as it was. */}
+      <SidebarShell
+        className="ib-shell"
+        open={sidebarOpen && !fileOpen}
+        onOpenChange={changeSidebar}
+        navigation={
+          <Sidebar
+            page={route.page}
+            projectId={route.project}
+            inboxCount={waitingCount(latestSections)}
+            decisionsCount={latest?.decisions_waiting ?? 0}
+            projects={projects}
+            projectCounts={projectCounts}
+            updateReady={update !== null}
+            restarting={restarting}
+            onInbox={() => go({ page: 'inbox', project: null, thread: null })}
+            onProject={(projectId) => go({ page: 'inbox', project: projectId, thread: null })}
+            onSettings={() => go({ page: 'settings', project: null, thread: null })}
+            onDecisions={() => go({ page: 'decisions', project: null, thread: null })}
+            onRestart={() => void restart()}
+          />
+        }
+      >
         <main className="ib-main">{main}</main>
-      </div>
+      </SidebarShell>
       {guideMessage && thread && (
         <GuidePane
           thread={thread}
diff --git a/packages/inbox/components/Decisions.tsx b/packages/inbox/components/Decisions.tsx
index 4c6a21a39b..86efab86ca 100644
--- a/packages/inbox/components/Decisions.tsx
+++ b/packages/inbox/components/Decisions.tsx
@@ -3,6 +3,7 @@ import type { InboxDecision } from '@plannotator/core/inbox-types';
 import { InboxApiError, type DecisionsModel, type ProjectFolder, type WaitingDecision } from '../api';
 import { agentName, dateTime, dayWords, shortTime } from '../format';
 import { DecisionDiamond, Icon } from '../icons';
+import { SidebarTrigger } from '../shell/sidebar';
 
 /**
  * The project's decisions (the window record's 3.2): a project switch, then
@@ -280,6 +281,7 @@ export function DecisionsPage(props: DecisionsPageProps) {
     <>
       <section className={`ib-dpage${narrow ? ' ib-narrow' : ''}`} aria-label="Decisions">
         <div className="ib-dh">
+          <SidebarTrigger />
           <h1>Decisions</h1>
           <select className="ib-select" aria-label="Project" value={project.id} onChange={(event) => props.onProject(event.target.value)}>
             {props.projects.map((p) => (
diff --git a/packages/inbox/components/EmptyState.tsx b/packages/inbox/components/EmptyState.tsx
index 5267f1551b..c34ddd60ed 100644
--- a/packages/inbox/components/EmptyState.tsx
+++ b/packages/inbox/components/EmptyState.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { hostMcpSnippet, OTHER_HARNESSES, type ConnectContext } from '../harnesses';
 import { HostMark } from '../icons';
 import { CodeBox, ConnectPicker } from './ConnectPicker';
+import { SidebarTrigger } from '../shell/sidebar';
 
 type PlannotatorHost = 'claude-code' | 'pi' | 'opencode';
 
@@ -22,6 +23,7 @@ export function EmptyState({ context }: { context: ConnectContext | null }) {
   return (
     <section className="ib-listcol" aria-label="Inbox">
       <div className="ib-lhead">
+        <SidebarTrigger />
         <h1>Inbox</h1>
       </div>
       <div className="ib-lbody">
diff --git a/packages/inbox/components/InboxList.tsx b/packages/inbox/components/InboxList.tsx
index 9b8377be85..37decb94e8 100644
--- a/packages/inbox/components/InboxList.tsx
+++ b/packages/inbox/components/InboxList.tsx
@@ -2,6 +2,7 @@ import { useState, type ReactNode } from 'react';
 import type { InboxListRow, InboxListSection } from '@plannotator/core/inbox-types';
 import { agentName, questionCount, shortTime } from '../format';
 import { AuthorMark, Icon } from '../icons';
+import { SidebarTrigger } from '../shell/sidebar';
 
 export interface InboxListProps {
   title: string;
@@ -104,6 +105,7 @@ export function InboxList(props: InboxListProps) {
       aria-label={props.title}
     >
       <div className="ib-lhead">
+        <SidebarTrigger />
         <h1>{props.title}</h1>
         {props.path && <span className="ib-path">{props.path}</span>}
       </div>
diff --git a/packages/inbox/components/Settings.tsx b/packages/inbox/components/Settings.tsx
index 0140cc1436..7301545ada 100644
--- a/packages/inbox/components/Settings.tsx
+++ b/packages/inbox/components/Settings.tsx
@@ -5,6 +5,7 @@ import { HARNESSES, type ConnectContext } from '../harnesses';
 import { HostMark, Icon } from '../icons';
 import { ConnectPicker } from './ConnectPicker';
 import { PhonesBlock } from './Phones';
+import { SidebarTrigger } from '../shell/sidebar';
 
 const TOOL_HOSTS: { host: AgentToolHost; name: string }[] = [
   { host: 'claude-code', name: 'Claude Code' },
@@ -185,7 +186,10 @@ export function SettingsPage({
   return (
     <div className="ib-spage" aria-label="Settings">
       <div className="ib-spage-in">
-        <h1>Settings</h1>
+        <div className="ib-shead">
+          <SidebarTrigger />
+          <h1>Settings</h1>
+        </div>
         <div className="ib-sblock">
           <h2>The Inbox in your agent's tools</h2>
           <p>
diff --git a/packages/inbox/components/Sidebar.tsx b/packages/inbox/components/Sidebar.tsx
index 4744961894..82dee5fe27 100644
--- a/packages/inbox/components/Sidebar.tsx
+++ b/packages/inbox/components/Sidebar.tsx
@@ -1,5 +1,6 @@
 import type { ProjectFolder } from '../api';
 import { Icon } from '../icons';
+import { useSidebar } from '../shell/sidebar';
 import { TaterMark } from './TaterMark';
 
 export interface SidebarProps {
@@ -22,8 +23,18 @@ export interface SidebarProps {
   onRestart: () => void;
 }
 
+/**
+ * The Inbox's navigation: the Tater mark, the sections, the projects and
+ * Settings. Drawn inside Workspaces' sidebar primitive (`../shell`): docked,
+ * in the hover peek, and as the sheet on a phone width, which a pick closes.
+ */
 export function Sidebar(props: SidebarProps) {
   const firstRun = props.projects.length === 0;
+  const { setOpenMobile } = useSidebar();
+  const pick = (go: () => void) => () => {
+    setOpenMobile(false);
+    go();
+  };
   return (
     <aside className="ib-side" aria-label="Inbox navigation">
       <div className="ib-brand">
@@ -34,7 +45,7 @@ export function Sidebar(props: SidebarProps) {
       <button
         type="button"
         className={`ib-nav${props.page === 'inbox' && props.projectId === null ? ' ib-on' : ''}`}
-        onClick={props.onInbox}
+        onClick={pick(props.onInbox)}
         aria-current={props.page === 'inbox' && props.projectId === null ? 'page' : undefined}
       >
         <Icon name="inbox" />
@@ -44,7 +55,7 @@ export function Sidebar(props: SidebarProps) {
       <button
         type="button"
         className={`ib-nav${props.page === 'decisions' ? ' ib-on' : ''}`}
-        onClick={props.onDecisions}
+        onClick={pick(props.onDecisions)}
         disabled={firstRun}
         aria-current={props.page === 'decisions' ? 'page' : undefined}
       >
@@ -65,7 +76,7 @@ export function Sidebar(props: SidebarProps) {
                 key={project.id}
                 type="button"
                 className={`ib-proj${n === 0 ? ' ib-q' : ''}${on ? ' ib-on' : ''}`}
-                onClick={() => props.onProject(project.id)}
+                onClick={pick(() => props.onProject(project.id))}
                 aria-current={on ? 'page' : undefined}
                 title={project.root}
               >
@@ -91,7 +102,7 @@ export function Sidebar(props: SidebarProps) {
         <button
           type="button"
           className={`ib-nav${props.page === 'settings' ? ' ib-on' : ''}`}
-          onClick={props.onSettings}
+          onClick={pick(props.onSettings)}
           aria-current={props.page === 'settings' ? 'page' : undefined}
         >
           <Icon name="settings" />
diff --git a/packages/inbox/inbox.css b/packages/inbox/inbox.css
index 51e4dacd09..0cb9b0343d 100644
--- a/packages/inbox/inbox.css
+++ b/packages/inbox/inbox.css
@@ -71,7 +71,7 @@
 .ib-mk.ib-big > svg, .ib-mk.ib-big > img { width: 17px; height: 17px; }
 
 /* shell */
-.ib-shell { display: grid; height: 100%; grid-template-columns: 232px 1fr; }
+.ib-shell { display: flex; height: 100%; width: 100%; overflow: hidden; }
 .ib-shell > * { min-height: 0; overflow: hidden; }
 .ib-side { background: var(--background); border-right: 1px solid var(--ib-line); display: flex; flex-direction: column; padding: 14px 10px 12px; }
 .ib-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 10px; }
@@ -105,7 +105,7 @@
 .ib-restart b { font-weight: 550; color: var(--primary); margin-left: auto; }
 
 /* main list */
-.ib-main { background: var(--card); display: flex; min-width: 0; height: 100%; }
+.ib-main { background: var(--card); display: flex; flex: 1; min-width: 0; height: 100%; }
 .ib-listcol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .ib-listcol.ib-narrow { flex: none; width: 380px; border-right: 1px solid var(--ib-line); }
 .ib-lhead { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 22px; flex: none; }
@@ -238,7 +238,8 @@
 /* settings */
 .ib-spage { padding: 28px 44px; flex: 1; overflow-y: auto; min-width: 0; }
 .ib-spage-in { max-width: 812px; }
-.ib-spage h1 { font-size: 22px; font-weight: 650; margin: 0 0 22px; letter-spacing: -0.01em; }
+.ib-spage h1 { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
+.ib-shead { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
 .ib-sblock { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
 .ib-sblock:last-child { border-bottom: 0; }
 .ib-sblock h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
@@ -337,8 +338,6 @@ button.ib-drow:hover { background: color-mix(in oklch, var(--muted) 35%, transpa
 
 /* attachments (step 2, record 2.1 to 2.8) */
 .ib-att-t .ib-ch { font-size: 12px; color: var(--warning); }
-.ib-shell.ib-fileopen { grid-template-columns: 1fr; }
-.ib-shell.ib-fileopen > .ib-side { display: none; }
 .ib-pane.ib-withfile { flex: none; width: 440px; border-right: 1px solid var(--ib-line); z-index: 2; }
 .ib-pane.ib-withfile .ib-annpop { width: 400px; }
 .ib-pane.ib-withfile .ib-pbody { padding: 16px 20px 0; }
@@ -453,3 +452,54 @@ pre code.pn-code[data-keep-layout] {
 .ib-state h5 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
 .ib-state p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--muted-foreground); }
 .pn-inbox .ib-menu:hover .ib-mi.ib-on:not(:hover) { background: transparent; }
+
+/* The sidebar: Workspaces' primitive (packages/inbox/shell, the owner 2026-10-09),
+   its geometry from apps/web/src/components/ui/sidebar.tsx, SidebarPeek.tsx,
+   CollapsibleEdge.tsx and ResizeHandle.tsx, on the Inbox's skin (.ib-side above).
+   The open and close ride one spring on MotionValues (shell/shell-motion.ts);
+   only the peek's slide is CSS, as it is in Workspaces. The tokens sit on :root
+   because the edge's tooltip portals to the body. */
+:root {
+  --ib-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+  --ib-shadow-sheet: 0 0 0 1px oklch(0.90 0.02 260 / 0.13), 0 9px 22px rgb(0 0 0 / 0.15), 0 28px 72px -12px rgb(0 0 0 / 0.16);
+  --ib-shadow-tooltip: 0 0 0 1px oklch(0.90 0.02 260 / 0.09), 0 1px 2px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.10);
+}
+:root.light {
+  --ib-shadow-sheet: 0 0 0 1px oklch(0.35 0.02 260 / 0.13), 0 8px 22px oklch(0.20 0.02 260 / 0.09), 0 24px 64px -12px oklch(0.20 0.02 260 / 0.15);
+  --ib-shadow-tooltip: 0 0 0 1px oklch(0.35 0.02 260 / 0.12), 0 1px 2px oklch(0.20 0.02 260 / 0.05), 0 2px 6px oklch(0.20 0.02 260 / 0.04);
+}
+.ib-sb { flex: none; }
+.ib-sb-gap { position: relative; height: 100%; }
+.ib-sb-panel { position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; display: flex; overflow: hidden; }
+/* Settled closed: inert already, and invisible as a whole, so the window holds one navigation. */
+.ib-sb-panel[data-hidden] { visibility: hidden; }
+.ib-sb-inner { display: flex; flex-direction: column; flex-shrink: 0; height: 100%; }
+.ib-sb-inner > .ib-side, .ib-peek-in > .ib-side, .ib-sb-sheet-in > .ib-side { flex: 1; min-height: 0; }
+.pn-inbox .ib-sb-trigger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 7px; color: var(--muted-foreground); }
+.pn-inbox .ib-sb-trigger:hover { background: var(--muted); color: var(--foreground); }
+.ib-sb-trigger svg { width: 16px; height: 16px; }
+/* Phone widths: the sheet, on the same spring (opacity and x ride it). */
+.ib-sb-scrim { position: fixed; inset: 0; z-index: 50; background-color: rgb(0 0 0 / 0.45); backdrop-filter: blur(2px); }
+.ib-sb-sheet { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; display: flex; flex-direction: column; width: var(--sidebar-width); box-shadow: var(--ib-shadow-sheet); outline: none; }
+.ib-sb-sheet-in { display: flex; flex-direction: column; width: 100%; height: 100%; }
+.ib-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-transparency: reduce) {
+  .ib-sb-scrim { backdrop-filter: none; background-color: rgb(0 0 0 / 0.65); }
+}
+/* The peek: a 20 px hover strip on the left edge, then the panel slides in (300 ms, enter easing). */
+.ib-peek-strip { position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; width: 20px; }
+.ib-peek { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: var(--sidebar-width); box-shadow: var(--ib-shadow-sheet); transform: translateX(-100%); visibility: hidden; will-change: transform; transition: transform 300ms var(--ib-ease-enter), visibility 0s linear 300ms; }
+.ib-peek[data-visible] { transform: translateX(0); visibility: visible; transition: transform 300ms var(--ib-ease-enter); }
+.ib-peek-in { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+@media (prefers-reduced-motion: reduce) {
+  .ib-peek, .ib-peek[data-visible] { transition: none; }
+}
+/* The edge: click to collapse, drag to resize, a separator for the keyboard. */
+.ib-shell > .ib-edge-pos { position: fixed; top: 0; bottom: 0; z-index: 30; display: flex; overflow: visible; }
+.ib-edge { position: relative; display: flex; width: 0; flex-shrink: 0; outline: none; }
+.ib-handle { position: relative; z-index: 10; width: 0; flex-shrink: 0; cursor: col-resize; }
+.ib-handle-track { position: absolute; top: 0; bottom: 0; left: -2px; right: -2px; transition: background-color 150ms; }
+.ib-handle-hit { position: absolute; top: 0; bottom: 0; left: -8px; right: -8px; }
+.ib-edge:focus-visible [data-resize-track] { background-color: var(--ring); }
+.ib-edge-tip-pos { z-index: 50; }
+.ib-edge-tip { background: var(--popover); color: var(--muted-foreground); box-shadow: var(--ib-shadow-tooltip); border-radius: 6px; padding: 4px 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; }
diff --git a/packages/inbox/package.json b/packages/inbox/package.json
index d48bb44662..954b652960 100644
--- a/packages/inbox/package.json
+++ b/packages/inbox/package.json
@@ -12,10 +12,12 @@
     "#surface-guide-reader": "./guide/SurfaceGuideReader.tsx"
   },
   "dependencies": {
+    "@base-ui/react": "^1.7.0",
     "@plannotator/core": "workspace:*",
     "@plannotator/guide-viewer": "workspace:*",
     "@plannotator/review-editor": "workspace:*",
     "@plannotator/ui": "workspace:*",
+    "motion": "^12.38.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "uqr": "^0.1.3"
diff --git a/packages/inbox/shell/CollapsibleEdge.tsx b/packages/inbox/shell/CollapsibleEdge.tsx
new file mode 100644
index 0000000000..20fcd64b06
--- /dev/null
+++ b/packages/inbox/shell/CollapsibleEdge.tsx
@@ -0,0 +1,109 @@
+// Ported from Workspaces apps/web/src/components/CollapsibleEdge.tsx
+// (68afaf421) and apps/web/src/components/ResizeHandle.tsx (227b573f2) for the
+// Inbox sidebar (the owner, 2026-10-09: the same component and motion). Port:
+// Base UI's Tooltip directly (Workspaces wraps it in its ui kit), Tailwind
+// classes became `ib-` classes in inbox.css, and only the left side is kept.
+
+import { Tooltip } from "@base-ui/react/tooltip";
+import type { KeyboardEvent, ReactNode } from "react";
+
+import type { ResizeHandleProps } from "./useResizablePanel";
+
+/** Keyboard resize contract for an edge: arrow keys in 10px steps, Home/End
+ * to the range ends, clamped to the viable range; the pointer-only dismissal
+ * threshold never applies to keyboard resizing. */
+export interface EdgeKeyboardResize {
+	/** Current committed width (px): becomes aria-valuenow. */
+	value: number;
+	min: number;
+	max: number;
+	resizeTo: (px: number) => void;
+}
+
+const KEYBOARD_STEP = 10;
+
+/**
+ * The edge's interaction chrome: hovering never pops the track in; a quiet
+ * cursor-following tooltip teaches "Click to collapse, drag to resize", a
+ * single click anywhere on the handle collapses (the resize hook's
+ * threshold-gated `onClick`), and the handle is a real keyboard target:
+ * Enter/Space collapse, ArrowLeft/Right resize in 10px steps, Home/End to the
+ * range ends, announced as a separator.
+ */
+export function CollapsibleEdge({
+	onCollapse,
+	label,
+	isDragging,
+	resize,
+	children,
+}: {
+	onCollapse: () => void;
+	/** Accessible name for the focusable edge. */
+	label: string;
+	/** Mid-drag the tooltip is suppressed (the hint is for the idle edge). */
+	isDragging: boolean;
+	resize: EdgeKeyboardResize;
+	children: ReactNode;
+}) {
+	const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onCollapse();
+			return;
+		}
+		let target: number | undefined;
+		if (e.key === "ArrowRight") target = resize.value + KEYBOARD_STEP;
+		else if (e.key === "ArrowLeft") target = resize.value - KEYBOARD_STEP;
+		else if (e.key === "Home") target = resize.min;
+		else if (e.key === "End") target = resize.max;
+		if (target === undefined) return;
+		e.preventDefault();
+		// resizeTo clamps to [min, max]: keyboard resizing can never dismiss.
+		resize.resizeTo(target);
+	};
+
+	return (
+		<Tooltip.Provider delay={300}>
+			<Tooltip.Root trackCursorAxis="both">
+				<Tooltip.Trigger
+					render={
+						<div
+							role="separator"
+							aria-orientation="vertical"
+							aria-valuenow={Math.round(resize.value)}
+							aria-valuemin={resize.min}
+							aria-valuemax={resize.max}
+							tabIndex={0}
+							aria-label={label}
+							onKeyDown={onKeyDown}
+							className="ib-edge"
+						/>
+					}
+				>
+					{children}
+				</Tooltip.Trigger>
+				{!isDragging && (
+					<Tooltip.Portal>
+						<Tooltip.Positioner side="bottom" sideOffset={14} className="ib-edge-tip-pos">
+							<Tooltip.Popup className="ib-edge-tip">Click to collapse, drag to resize</Tooltip.Popup>
+						</Tooltip.Positioner>
+					</Tooltip.Portal>
+				)}
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+}
+
+/**
+ * The sidebar's drag handle: a zero-width boundary with a 16px invisible hit
+ * area centered on it. The track stays invisible until keyboard focus
+ * (`.ib-edge:focus-visible [data-resize-track]` in inbox.css).
+ */
+export function ResizeHandle({ onPointerDown, style }: ResizeHandleProps) {
+	return (
+		<div className="ib-handle">
+			<div data-resize-track="left" className="ib-handle-track" />
+			<div className="ib-handle-hit" style={style} onPointerDown={onPointerDown} />
+		</div>
+	);
+}
diff --git a/packages/inbox/shell/SidebarPeek.tsx b/packages/inbox/shell/SidebarPeek.tsx
new file mode 100644
index 0000000000..3c40535d48
--- /dev/null
+++ b/packages/inbox/shell/SidebarPeek.tsx
@@ -0,0 +1,128 @@
+// Ported from Workspaces apps/web/src/components/sidebar/SidebarPeek.tsx
+// (499aaa1d9) and apps/web/src/hooks/useIsDesktopLg.ts (4459a16b8) for the
+// Inbox sidebar (the owner, 2026-10-09: the same component and motion). Port:
+// the panel shows the Inbox's own navigation, handed in as `children`
+// (Workspaces renders AppSidebarContent here); Tailwind classes became `ib-`
+// classes in inbox.css; the hidden panel also turns `visibility: hidden` once
+// its slide-out ends (inbox.css), so the page holds one visible navigation.
+
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react";
+import { useSidebar } from "./sidebar";
+
+// Hover-intent: how long the cursor must rest on the left edge before the peek
+// slides in. Keeps a quick brush past the edge from triggering it.
+const SHOW_DELAY_MS = 600;
+// Grace period before hiding when the cursor leaves the peek, so you don't lose
+// it by cutting a corner.
+const HIDE_DELAY_MS = 150;
+
+/** Large screens only (>=1024px): the peek is a hover-intent affordance. */
+const DESKTOP_LG_QUERY = "(min-width: 1024px)";
+
+function useIsDesktopLg(): boolean {
+	return useSyncExternalStore(subscribe, snapshot);
+}
+
+function subscribe(onChange: () => void): () => void {
+	const mediaQuery = window.matchMedia(DESKTOP_LG_QUERY);
+	mediaQuery.addEventListener("change", onChange);
+	return () => mediaQuery.removeEventListener("change", onChange);
+}
+
+function snapshot(): boolean {
+	return window.matchMedia(DESKTOP_LG_QUERY).matches;
+}
+
+export function SidebarPeek({ children }: { children: ReactNode }) {
+	const { open } = useSidebar();
+	const isLgDesktop = useIsDesktopLg();
+	const [visible, setVisible] = useState(false);
+	const showTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const hideTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const clearShow = useCallback(() => {
+		if (showTimeout.current) {
+			clearTimeout(showTimeout.current);
+			showTimeout.current = null;
+		}
+	}, []);
+
+	const clearHide = useCallback(() => {
+		if (hideTimeout.current) {
+			clearTimeout(hideTimeout.current);
+			hideTimeout.current = null;
+		}
+	}, []);
+
+	// Edge strip: arm a delayed reveal (hover intent).
+	const scheduleShow = useCallback(() => {
+		clearHide();
+		if (visible) return;
+		clearShow();
+		showTimeout.current = setTimeout(() => setVisible(true), SHOW_DELAY_MS);
+	}, [visible, clearHide, clearShow]);
+
+	// Left the edge before the delay elapsed: cancel the pending reveal.
+	const cancelShow = useCallback(() => {
+		clearShow();
+	}, [clearShow]);
+
+	// On the peek itself: keep it open instantly (cancel any pending hide).
+	const keepOpen = useCallback(() => {
+		clearShow();
+		clearHide();
+		setVisible(true);
+	}, [clearShow, clearHide]);
+
+	const hide = useCallback(() => {
+		clearShow();
+		clearHide();
+		hideTimeout.current = setTimeout(() => setVisible(false), HIDE_DELAY_MS);
+	}, [clearShow, clearHide]);
+
+	// If the real sidebar opens, drop any pending peek state.
+	useEffect(() => {
+		if (open) {
+			clearShow();
+			clearHide();
+			setVisible(false);
+		}
+	}, [open, clearShow, clearHide]);
+
+	// Clean up timers on unmount.
+	useEffect(
+		() => () => {
+			if (showTimeout.current) clearTimeout(showTimeout.current);
+			if (hideTimeout.current) clearTimeout(hideTimeout.current);
+		},
+		[],
+	);
+
+	if (open || !isLgDesktop) return null;
+
+	return (
+		<>
+			{/* Hover strip: invisible, full-height hit area on the left edge
+			    with delayed reveal. */}
+			<div
+				data-sidebar-peek-strip
+				className="ib-peek-strip"
+				onMouseEnter={scheduleShow}
+				onMouseLeave={cancelShow}
+			/>
+			{/* Full-height floating sidebar panel: 300ms enter easing; reduced
+			    motion, direct final geometry. inert while hidden: the panel is a
+			    full sidebar copy that stays MOUNTED offscreen. */}
+			<div
+				data-sidebar-peek
+				data-visible={visible ? "" : undefined}
+				inert={!visible}
+				className="ib-peek"
+				onMouseEnter={keepOpen}
+				onMouseLeave={hide}
+			>
+				<div className="ib-peek-in">{children}</div>
+			</div>
+		</>
+	);
+}
diff --git a/packages/inbox/shell/SidebarShell.tsx b/packages/inbox/shell/SidebarShell.tsx
new file mode 100644
index 0000000000..db20c3c162
--- /dev/null
+++ b/packages/inbox/shell/SidebarShell.tsx
@@ -0,0 +1,116 @@
+// Ported from the sidebar half of Workspaces apps/web/src/app/AppShell.tsx
+// (e2c77711d) for the Inbox (the owner, 2026-10-09: the same component and
+// motion): the resizable width as an element-scoped MotionValue, the
+// reversible resize-to-dismiss, click-to-collapse on the edge, the peek, and
+// `--sidebar-width` as the committed at-rest width. Port: the open state is
+// the Inbox's (`open` / `onOpenChange`, from its settings store), so the
+// snap-close and the edge click call `onOpenChange` directly instead of
+// Workspaces' close and open refs; the width range is the Inbox's (232 px is
+// the record's width; Workspaces runs 275 in 240 to 520); the page frame,
+// search, assistant and the rest of AppShell stay in Workspaces.
+
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import { useMotionValue, type MotionValue } from "motion/react";
+
+import { CollapsibleEdge, ResizeHandle } from "./CollapsibleEdge";
+import { MotionStyleDiv } from "./motion-style-div";
+import { Sidebar, SidebarProvider, useSidebar } from "./sidebar";
+import { SidebarPeek } from "./SidebarPeek";
+import { useResizablePanel } from "./useResizablePanel";
+
+// The record draws the sidebar at 232 px. The viable range keeps the record's
+// width inside it; reserveViewport keeps 320 px of the page beside it, as in
+// Workspaces.
+const SIDEBAR_DEFAULT = 232;
+const SIDEBAR_MIN = 200;
+const SIDEBAR_MAX = 520;
+
+export function SidebarShell({
+	open,
+	onOpenChange,
+	navigation,
+	className,
+	children,
+}: {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	/** The sidebar's contents, drawn docked, in the peek and in the phone sheet. */
+	navigation: ReactNode;
+	className?: string;
+	children: ReactNode;
+}) {
+	// Latest-ref via effect, read only by the hook's pointer handlers.
+	const widthApplyRef = useRef<(width: number) => void>(() => {});
+	const sidebarResize = useResizablePanel({
+		storageKey: "plannotator-inbox-sidebar-width",
+		defaultWidth: SIDEBAR_DEFAULT,
+		minWidth: SIDEBAR_MIN,
+		maxWidth: SIDEBAR_MAX,
+		reserveViewport: 320,
+		side: "left",
+		// Reversible resize-to-dismiss: below min×0.5 the sidebar closes
+		// mid-drag; crossing back reopens under the held pointer.
+		snapCloseRatio: 0.5,
+		onSnapClose: () => onOpenChange(false),
+		onSnapOpen: () => onOpenChange(true),
+		// Threshold-gated (4px): a click on the handle collapses the sidebar;
+		// a drag resizes it.
+		onClick: () => onOpenChange(false),
+		// Render-free drag frames land on the element-scoped MotionValue.
+		apply: (w) => widthApplyRef.current(w),
+	});
+	const sidebarWidth = useMotionValue(sidebarResize.width);
+	useEffect(() => {
+		widthApplyRef.current = (w) => sidebarWidth.set(w);
+	});
+	// Committed-width sync (release commits, keyboard resizeTo, restores).
+	useEffect(() => {
+		sidebarWidth.set(sidebarResize.width);
+	}, [sidebarWidth, sidebarResize.width]);
+
+	return (
+		<SidebarProvider
+			open={open}
+			onOpenChange={onOpenChange}
+			widthValue={sidebarWidth}
+			className={className}
+			style={{ "--sidebar-width": `${sidebarResize.width}px` } as CSSProperties}
+		>
+			<Sidebar>{navigation}</Sidebar>
+			<SidebarPeek>{navigation}</SidebarPeek>
+			<SidebarEdge sidebarResize={sidebarResize} sidebarWidth={sidebarWidth} />
+			{children}
+		</SidebarProvider>
+	);
+}
+
+function SidebarEdge({
+	sidebarResize,
+	sidebarWidth,
+}: {
+	sidebarResize: ReturnType<typeof useResizablePanel>;
+	sidebarWidth: MotionValue<number>;
+}) {
+	const { open, setOpen, isMobile } = useSidebar();
+	if (!open || isMobile) return null;
+	return (
+		// The edge rides the same element-scoped width MotionValue as the
+		// sidebar geometry: a drag frame moves it without touching any
+		// inherited CSS custom property.
+		<MotionStyleDiv className="ib-edge-pos" motionStyle={{ left: sidebarWidth }}>
+			<CollapsibleEdge
+				onCollapse={() => setOpen(false)}
+				label="Sidebar width"
+				isDragging={sidebarResize.isDragging}
+				resize={{
+					value: sidebarResize.width,
+					min: sidebarResize.minWidth,
+					max: sidebarResize.maxWidth,
+					resizeTo: sidebarResize.resizeTo,
+				}}
+			>
+				<ResizeHandle {...sidebarResize.handleProps} />
+			</CollapsibleEdge>
+		</MotionStyleDiv>
+	);
+}
diff --git a/packages/inbox/shell/motion-style-div.tsx b/packages/inbox/shell/motion-style-div.tsx
new file mode 100644
index 0000000000..5b0f7d7af5
--- /dev/null
+++ b/packages/inbox/shell/motion-style-div.tsx
@@ -0,0 +1,96 @@
+// Copied from Workspaces apps/web/src/components/ui/motion-style-div.tsx
+// (cd4a9bfd1) for the Inbox sidebar (the owner, 2026-10-09: the same component
+// and motion). Port: imports from `motion/react` (the same framer-motion 12.43.0).
+
+import * as React from "react";
+import { cancelFrame, frame, type MotionValue } from "motion/react";
+
+/**
+ * The shell's MotionValue-to-style binder: a plain `div` whose `width`,
+ * `left`, `opacity` and `x` follow MotionValues, written on the frame loop's
+ * render step exactly as framer's DOM renderer writes them (px for lengths,
+ * `translateX(Npx)` for x and `none` at 0, opacity as a bare number).
+ *
+ * Why not `m.div` under `LazyMotion features={domMin}`: that renderer is
+ * framer's whole visual element (variants, animation state, projection
+ * geometry, the SVG arm), about 20 KB gz on the boot path, to write four
+ * numbers the shell's open/close spring and resize drag move. The shell
+ * never animates through props, gestures or layout; the routes that do
+ * (the document rail, the board) keep `motion.*`.
+ */
+export interface MotionStyleValues {
+	width?: MotionValue<number>;
+	left?: MotionValue<number>;
+	opacity?: MotionValue<number>;
+	x?: MotionValue<number>;
+}
+
+type MotionStyleKey = keyof MotionStyleValues;
+
+const KEYS: readonly MotionStyleKey[] = ["width", "left", "opacity", "x"];
+
+/** The CSS property and value framer's renderer writes for one key. */
+function cssFor(
+	key: MotionStyleKey,
+	value: number,
+): ["width" | "left" | "opacity" | "transform", string] {
+	if (key === "x") return ["transform", value === 0 ? "none" : `translateX(${String(value)}px)`];
+	if (key === "opacity") return ["opacity", String(value)];
+	return [key, `${String(value)}px`];
+}
+
+function styleFor(values: MotionStyleValues): React.CSSProperties {
+	const style: Record<string, string> = {};
+	for (const key of KEYS) {
+		const value = values[key];
+		if (value === undefined) continue;
+		const [property, css] = cssFor(key, value.get());
+		style[property] = css;
+	}
+	return style as React.CSSProperties;
+}
+
+export function MotionStyleDiv({
+	motionStyle,
+	style,
+	ref,
+	...props
+}: React.ComponentProps<"div"> & { motionStyle: MotionStyleValues }) {
+	const element = React.useRef<HTMLDivElement | null>(null);
+	const setRef = React.useCallback(
+		(node: HTMLDivElement | null) => {
+			element.current = node;
+			if (typeof ref === "function") return ref(node);
+			if (ref) ref.current = node;
+			return undefined;
+		},
+		[ref],
+	);
+
+	const { width, left, opacity, x } = motionStyle;
+	React.useLayoutEffect(() => {
+		const values: MotionStyleValues = { width, left, opacity, x };
+		// One write per frame, on the render step, whichever inputs moved.
+		const render = () => {
+			const node = element.current;
+			if (node === null) return;
+			for (const key of KEYS) {
+				const value = values[key];
+				if (value === undefined) continue;
+				const [property, css] = cssFor(key, value.get());
+				node.style[property] = css;
+			}
+		};
+		const schedule = () => frame.render(render, false, true);
+		const subscriptions = KEYS.flatMap((key) => {
+			const value = values[key];
+			return value === undefined ? [] : [value.on("change", schedule)];
+		});
+		return () => {
+			for (const unsubscribe of subscriptions) unsubscribe();
+			cancelFrame(render);
+		};
+	}, [width, left, opacity, x]);
+
+	return <div ref={setRef} style={{ ...style, ...styleFor(motionStyle) }} {...props} />;
+}
diff --git a/packages/inbox/shell/shell-animate.ts b/packages/inbox/shell/shell-animate.ts
new file mode 100644
index 0000000000..54ffca46da
--- /dev/null
+++ b/packages/inbox/shell/shell-animate.ts
@@ -0,0 +1,40 @@
+// Copied from Workspaces apps/web/src/lib/shell-animate.ts (cd4a9bfd1) for the
+// Inbox sidebar (the owner, 2026-10-09: the same component and motion). Port:
+// imports from `motion/react`, which re-exports the same framer-motion 12.43.0.
+
+/**
+ * The shell spring's animator, in its own chunk (the boot trim after PR 783).
+ *
+ * framer's animator is not needed to paint the shell: every shell surface
+ * mounts SETTLED at 0 or 1, and the first spring runs on the first open or
+ * close. lib/shell-motion.ts loads this module right after the shell's first
+ * paint and again on demand, so the first toggle finds it loaded.
+ *
+ * `animate` here is framer's own `animate(motionValue, target, options)`
+ * path for one MotionValue, step for step (framer-motion 12
+ * animation/animate/index.mjs and subject.mjs): the per-value animation from
+ * `animateSingleValue`, wrapped in `GroupAnimationWithThen`, with the
+ * top-level `onComplete` run on `finished`. Importing the two pieces instead
+ * of `animate` leaves out the sequence and element-subject arms, which the
+ * shell never calls, so the chunk the first toggle may wait for is smaller.
+ */
+import {
+	GroupAnimationWithThen,
+	animateSingleValue,
+	type MotionValue,
+	type ValueAnimationTransition,
+} from "motion/react";
+
+export function animate(
+	value: MotionValue<number>,
+	target: number,
+	options: ValueAnimationTransition<number>,
+): GroupAnimationWithThen {
+	const { onComplete, ...rest } = options;
+	const animation = new GroupAnimationWithThen([animateSingleValue(value, target, rest)]);
+	if (typeof onComplete === "function") void animation.finished.then(onComplete);
+	return animation;
+}
+
+/** Its type, for lib/shell-motion.ts's type-only import (erased at build). */
+export type ShellAnimate = typeof animate;
diff --git a/packages/inbox/shell/shell-motion.ts b/packages/inbox/shell/shell-motion.ts
new file mode 100644
index 0000000000..f7a8dc38eb
--- /dev/null
+++ b/packages/inbox/shell/shell-motion.ts
@@ -0,0 +1,182 @@
+// Copied from Workspaces apps/web/src/lib/shell-motion.ts (cd4a9bfd1) for the
+// Inbox sidebar (the owner, 2026-10-09: the same component and motion). Port:
+// imports from `motion/react` (the same framer-motion 12.43.0); the document
+// rail's `useRailMotion` is left out (the Inbox has no rail).
+
+import { useEffect, useLayoutEffect, useState } from "react";
+
+// The MotionValue core and the frame loop only. framer's `animate` rides its
+// own chunk (lib/shell-animate.ts, loaded once the shell mounts, and on
+// demand) and its
+// `useTransform` (which pulls the interpolate and colour mixers even for a
+// function transform) is replaced by `useCombinedMotionValue` below: the
+// shell paints at rest, so neither belongs on the boot path.
+import { cancelFrame, frame, useMotionValue, type MotionValue } from "motion/react";
+
+import type { ShellAnimate } from "./shell-animate";
+
+let shellAnimate: ShellAnimate | null = null;
+let shellAnimateLoad: Promise<ShellAnimate> | null = null;
+
+/** Load the shell spring's animator once per session. A failed fetch clears
+ * the memo so the next toggle retries. */
+export function loadShellAnimate(): Promise<ShellAnimate> {
+	shellAnimateLoad ??= import("./shell-animate").then(
+		(module) => {
+			shellAnimate = module.animate;
+			return module.animate;
+		},
+		(error: unknown) => {
+			shellAnimateLoad = null;
+			throw error;
+		},
+	);
+	return shellAnimateLoad;
+}
+
+/** Warm the animator from the sidebar provider's mount effect, which runs
+ * once the shell has committed, so the first open or close finds it loaded.
+ * Not at idle: a boot that stays busy (the home's own chunks and reads)
+ * would push an idle callback past the first click. */
+export function preloadShellAnimate(): void {
+	if (shellAnimate === null) void loadShellAnimate().catch(() => {});
+}
+
+/**
+ * framer's `useTransform([values], fn)`, same semantics: the combined value
+ * is computed synchronously during render and, after mount, recomputed on
+ * the frame loop's preRender step whenever an input changes (so the render
+ * step that writes styles reads the fresh value). Written here because
+ * framer's hook module statically pulls its range interpolator and colour
+ * mixers, which the shell never uses.
+ */
+export function useCombinedMotionValue<T>(
+	values: readonly MotionValue<number>[],
+	combine: (latest: number[]) => T,
+): MotionValue<T> {
+	const read = () => combine(values.map((value) => value.get()));
+	const combined = useMotionValue<T>(read());
+	const update = () => combined.set(read());
+	update();
+	useLayoutEffect(() => {
+		const schedule = () => frame.preRender(update, false, true);
+		const subscriptions = values.map((value) => value.on("change", schedule));
+		return () => {
+			for (const unsubscribe of subscriptions) unsubscribe();
+			cancelFrame(update);
+		};
+	});
+	return combined;
+}
+
+/**
+ * The ONE shared shell spring (motion contract): every coordinated
+ * shell-geometry transition (rail open/close today) uses this exact spring.
+ * Never give a shell surface its own duration/easing.
+ */
+export const shellSpring = {
+	type: "spring",
+	duration: 0.5,
+	bounce: 0.1,
+} as const;
+
+/** Live prefers-reduced-motion, read per mount and subscribed for changes.
+ * The app has no separate motion preference beyond the media query (the
+ * landing's MotionConfig is page-scoped); if one ever exists it must feed
+ * the same controller, not grow a second reduced path. */
+export function usePrefersReducedMotion(): boolean {
+	const [reduced, setReduced] = useState(
+		() =>
+			typeof window.matchMedia === "function" &&
+			window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+	);
+	useEffect(() => {
+		if (typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const onChange = () => setReduced(query.matches);
+		// Older WebKit shims lack addEventListener on MediaQueryList.
+		query.addEventListener?.("change", onChange);
+		return () => query.removeEventListener?.("change", onChange);
+	}, []);
+	return reduced;
+}
+
+export interface ShellProgress {
+	/** Open progress 0↔1 — the one authoritative animation value. */
+	progress: MotionValue<number>;
+	/** True while logically open OR progress > 0; flips false only when the
+	 * close spring reaches zero (the unmount/inert bookkeeping moment). */
+	mounted: boolean;
+}
+
+/**
+ * THE shell open/close motion controller (motion contract, owner complaint
+ * 2026-07-27: programmatic toggles "just immediately jumping"). One per
+ * shell surface (document rail, app sidebar, mobile sheet). EVERY entrypoint
+ * for a surface — trigger buttons, keyboard shortcut, collapse edge,
+ * snap-close, click-collapse, auto-yield suppression, late-arriving host
+ * defaults — flips the surface's ONE `open` boolean upstream; this hook is
+ * the only thing that animates:
+ *
+ * 1. stop the active spring WITHOUT resetting its value;
+ * 2. animate the existing progress from its CURRENT value to 1/0 with the
+ *    shared shellSpring (interruptions reverse mid-flight, never restart
+ *    from an endpoint);
+ * 3. under reduced motion, set the target directly and still complete the
+ *    unmount bookkeeping;
+ * 4. no React rerender per animation frame — geometry rides MotionValues;
+ *    the only state is the at-zero `mounted` flip.
+ */
+export function useShellProgress(open: boolean): ShellProgress {
+	const reducedMotion = usePrefersReducedMotion();
+	const progress = useMotionValue(open ? 1 : 0);
+	const [mounted, setMounted] = useState(open);
+
+	useEffect(() => {
+		progress.stop();
+		const target = open ? 1 : 0;
+		if (open) setMounted(true);
+		if (reducedMotion) {
+			progress.set(target);
+			if (!open) setMounted(false);
+			return;
+		}
+		if (progress.get() === target) {
+			// Already settled (initial mount, or a redundant flip): no travel,
+			// but the close bookkeeping must still complete.
+			if (!open) setMounted(false);
+			return;
+		}
+		let controls: { stop: () => void } | null = null;
+		let cancelled = false;
+		const start = (animate: ShellAnimate) => {
+			if (cancelled) return;
+			controls = animate(progress, target, {
+				...shellSpring,
+				onComplete: () => {
+					if (!open) setMounted(false);
+				},
+			});
+		};
+		// The animator is loaded once the shell mounts, so this is the
+		// synchronous path; a toggle that beats that load waits for the one
+		// chunk fetch and then springs from the current progress.
+		if (shellAnimate !== null) start(shellAnimate);
+		else
+			void loadShellAnimate().then(start, () => {
+				// The chunk did not load: land on the target the way reduced
+				// motion does, so the close bookkeeping still completes.
+				if (cancelled) return;
+				progress.set(target);
+				if (!open) setMounted(false);
+			});
+		// Interruption path: a new toggle (or unmount) stops the spring in
+		// place; the next run animates from wherever progress is now.
+		return () => {
+			cancelled = true;
+			controls?.stop();
+		};
+	}, [open, reducedMotion, progress]);
+
+	return { progress, mounted };
+}
diff --git a/packages/inbox/shell/sidebar.tsx b/packages/inbox/shell/sidebar.tsx
new file mode 100644
index 0000000000..6a8a602aad
--- /dev/null
+++ b/packages/inbox/shell/sidebar.tsx
@@ -0,0 +1,366 @@
+// Ported from Workspaces apps/web/src/components/ui/sidebar.tsx (cd4a9bfd1) for
+// the Inbox sidebar (the owner, 2026-10-09: "use that same exact sidebar
+// experience ... the same exact smooth animation"). What came across as is:
+// the provider and its open/closed and mobile state, the ⌘/Ctrl+B toggle, the
+// accepted-width MotionValue, the docked offcanvas motion (one spring on a
+// progress value, allocation = width × progress on the spacer and the
+// clipping panel, content held at full width with opacity on the same
+// progress, inert once the close settles) and the mobile sheet on the same
+// spring. What changed in the port:
+// - Tailwind classes became `ib-` classes in inbox.css, in the Inbox's skin.
+// - The provider does not read or write localStorage: the Inbox drives `open`
+//   from its own cookie (`plannotator-inbox-sidebar-open`).
+// - ⌘/Ctrl+B leaves an input, a textarea or contentEditable alone (and is
+//   always prevented, so Firefox's bookmarks sidebar never opens).
+// - Left out: the icon-mode and `none` collapsibles, the floating and inset
+//   variants, the right side, SidebarRail and the menu, group and skeleton
+//   parts (the Inbox draws its own rows), and the TooltipProvider.
+// - The sheet portals into the provider's wrapper, so it keeps the Inbox's
+//   tokens; Base UI's Dialog is used directly (Workspaces wraps it as Sheet).
+
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { useMotionValue } from "motion/react";
+import type { MotionValue } from "motion/react";
+import * as React from "react";
+
+import { MotionStyleDiv, type MotionStyleValues } from "./motion-style-div";
+import { preloadShellAnimate, useCombinedMotionValue, useShellProgress } from "./shell-motion";
+
+// Fallback only: the Inbox shell always overrides --sidebar-width with its
+// committed resizable value. This static twin exists for bare mounts.
+const SIDEBAR_WIDTH = "232px";
+const SIDEBAR_WIDTH_PX = 232;
+const SIDEBAR_WIDTH_MOBILE = "260px";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+// The navigation becomes an off-canvas sheet only on phone widths.
+const MOBILE_BREAKPOINT = 768;
+
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}
+
+type SidebarContext = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+	/** The ACCEPTED desktop width in px, as an element-scoped MotionValue.
+	 * The live resize drag writes it per frame (never an inherited CSS custom
+	 * property: that recalculates style for the whole tree every frame). */
+	widthValue: MotionValue<number>;
+	/** The provider's wrapper, where the mobile sheet portals. */
+	container: HTMLDivElement | null;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+/** Base UI render-prop adapter for MotionStyleDiv: the MotionValue styles
+ * merge over Base UI's own style, as they did on `m.div`. */
+function renderMotionDiv(motionStyle: MotionStyleValues, staticStyle?: React.CSSProperties) {
+	return function motionSurface(props: React.ComponentProps<"div">) {
+		return (
+			<MotionStyleDiv
+				{...props}
+				style={{ ...props.style, ...staticStyle }}
+				motionStyle={motionStyle}
+			/>
+		);
+	};
+}
+
+/** An input, a textarea or contentEditable: where ⌘B belongs to the text. */
+function isEditable(target: EventTarget | undefined): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+	return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target.isContentEditable;
+}
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+function SidebarProvider({
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	widthValue: widthValueProp,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	/** Live accepted-width MotionValue (see SidebarContext.widthValue).
+	 * Optional so bare mounts get the static twin. */
+	widthValue?: MotionValue<number>;
+}) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+	const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
+	const fallbackWidthValue = useMotionValue(SIDEBAR_WIDTH_PX);
+	// Warm the open/close spring's chunk once the shell has painted.
+	React.useEffect(() => {
+		preloadShellAnimate();
+	}, []);
+	const widthValue = widthValueProp ?? fallbackWidthValue;
+
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+		},
+		[setOpenProp, open],
+	);
+
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen]);
+
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				// Always ours: Firefox's Ctrl+B would open its bookmarks sidebar.
+				event.preventDefault();
+				// Typing stays typing: the reply box, a field or an editor keeps the sidebar where it is.
+				if (isEditable(event.composedPath()[0])) return;
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	const state = open ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<SidebarContext>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+			widthValue,
+			container,
+		}),
+		[state, open, setOpen, isMobile, openMobile, toggleSidebar, widthValue, container],
+	);
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<div
+				ref={setContainer}
+				data-slot="sidebar-wrapper"
+				style={
+					{
+						"--sidebar-width": SIDEBAR_WIDTH,
+						...style,
+					} as React.CSSProperties
+				}
+				className={className ? `ib-sb-wrapper ${className}` : "ib-sb-wrapper"}
+				{...props}
+			>
+				{children}
+			</div>
+		</SidebarContext.Provider>
+	);
+}
+
+function Sidebar({ className, children, ...props }: React.ComponentProps<"div">) {
+	const { isMobile, state, openMobile, setOpenMobile, widthValue, container } = useSidebar();
+
+	// THE sidebar's motion controllers (Workspaces motion contract). Two
+	// surfaces, two controllers, ONE shared vocabulary (shellSpring via
+	// useShellProgress): every entrypoint (SidebarTrigger, ⌘/Ctrl+B, the
+	// collapse edge, the resize snap-close, click-collapse) flips the
+	// provider's booleans; these hooks are the only thing that animates.
+	//
+	// Desktop docked: the accepted width lives in the context's element-
+	// scoped `widthValue` MotionValue (the live resize drag writes it per
+	// frame, render-free), so the animated allocation is width × progress
+	// written to the elements' own styles: the drag flows through the
+	// MotionValue at progress 1 with zero smoothing, while open/close
+	// animates the multiplier.
+	const desktopMotion = useShellProgress(state === "expanded");
+	const desktopClamped = useCombinedMotionValue([desktopMotion.progress], ([value]) =>
+		Math.min(1, Math.max(0, value)),
+	);
+	const allocation = useCombinedMotionValue([widthValue, desktopClamped], (latest) => {
+		const [acceptedWidth, openProgress] = latest as [number, number];
+		return acceptedWidth * openProgress;
+	});
+
+	// Mobile offcanvas: presence-style, opacity 0↔1 with x -8↔0 on the same
+	// spring; the sheet stays mounted until progress zero.
+	const mobileMotion = useShellProgress(isMobile && openMobile);
+	const mobileClamped = useCombinedMotionValue([mobileMotion.progress], ([value]) =>
+		Math.min(1, Math.max(0, value)),
+	);
+	const mobileOffset = -8;
+	const mobileX = useCombinedMotionValue(
+		[mobileClamped],
+		([value]) => mobileOffset + (0 - mobileOffset) * value,
+	);
+
+	// The closed sidebar deliberately stays MOUNTED (reversible animation),
+	// so it leaves the tab order and accessibility tree once the close
+	// SETTLES: `inert` does all three (tab order, SR tree, clicks). While open
+	// or still animating, inert stays off so an interrupted close remains
+	// fully interactive; on reopen it lifts immediately.
+	const settledHidden = !desktopMotion.mounted;
+
+	if (isMobile) {
+		// Composed from the Dialog primitives so the ONE floating spring owns
+		// the presentation. Base UI owns a11y: portal, modal focus trap, Esc
+		// and backdrop dismiss (onOpenChange), aria wiring from the title.
+		// The dialog's `open` is the controller's `mounted`, so the sheet
+		// stays mounted through the exit spring and unmounts exactly at
+		// progress zero (reduced motion: immediately).
+		return (
+			<SheetPrimitive.Root open={mobileMotion.mounted} onOpenChange={setOpenMobile}>
+				<SheetPrimitive.Portal container={container}>
+					{/* The scrim's fade rides the SAME progress as the panel. */}
+					<SheetPrimitive.Backdrop
+						data-slot="sheet-overlay"
+						render={renderMotionDiv({ opacity: mobileClamped })}
+						className="ib-sb-scrim"
+					/>
+					<SheetPrimitive.Popup
+						data-sidebar="sidebar"
+						data-slot="sidebar"
+						data-mobile="true"
+						render={renderMotionDiv({ opacity: mobileClamped, x: mobileX }, {
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties)}
+						className="ib-sb-sheet"
+					>
+						<SheetPrimitive.Title className="ib-sr">Sidebar</SheetPrimitive.Title>
+						<div className="ib-sb-sheet-in">{children}</div>
+					</SheetPrimitive.Popup>
+				</SheetPrimitive.Portal>
+			</SheetPrimitive.Root>
+		);
+	}
+
+	// Docked treatment: ONE animated allocation (accepted width × progress)
+	// carried by BOTH the in-flow spacer (so the flex:1 main sibling reflows
+	// continuously) and the fixed panel (which CLIPS). The inner content is
+	// HELD at the accepted width with opacity riding the same progress: text
+	// and icons never compress.
+	return (
+		<div
+			className="ib-sb"
+			data-state={state}
+			data-collapsible={state === "collapsed" ? "offcanvas" : ""}
+			data-slot="sidebar"
+		>
+			<MotionStyleDiv className="ib-sb-gap" motionStyle={{ width: allocation }} />
+			<MotionStyleDiv
+				inert={settledHidden}
+				data-hidden={settledHidden ? "" : undefined}
+				className={className ? `ib-sb-panel ${className}` : "ib-sb-panel"}
+				motionStyle={{ width: allocation }}
+				{...props}
+			>
+				<MotionStyleDiv
+					data-sidebar="sidebar"
+					className="ib-sb-inner"
+					motionStyle={{ opacity: desktopClamped, width: widthValue }}
+				>
+					{children}
+				</MotionStyleDiv>
+			</MotionStyleDiv>
+		</div>
+	);
+}
+
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<"button">) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			type="button"
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			className={className ? `ib-sb-trigger ${className}` : "ib-sb-trigger"}
+			aria-label="Toggle Sidebar"
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+		</button>
+	);
+}
+
+/**
+ * The sidebar-toggle glyph, from Workspaces
+ * apps/web/src/components/icons/PanelLeftIcon.tsx (0219b4694), which copied it
+ * from the Plannotator app sidebar reference.
+ */
+function PanelLeftIcon(props: React.SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			aria-hidden="true"
+			{...props}
+		>
+			<path
+				d="M2 12C2 8.31087 2 6.4663 2.81382 5.15877C3.1149 4.67502 3.48891 4.25427 3.91891 3.91554C5.08116 3 6.72077 3 10 3H14C17.2792 3 18.9188 3 20.0811 3.91554C20.5111 4.25427 20.8851 4.67502 21.1862 5.15877C22 6.4663 22 8.31087 22 12C22 15.6891 22 17.5337 21.1862 18.8412C20.8851 19.325 20.5111 19.7457 20.0811 20.0845C18.9188 21 17.2792 21 14 21H10C6.72077 21 5.08116 21 3.91891 20.0845C3.48891 19.7457 3.1149 19.325 2.81382 18.8412C2 17.5337 2 15.6891 2 12Z"
+				stroke="currentColor"
+				strokeWidth="2"
+			/>
+			<path d="M9.5 3L9.5 21" stroke="currentColor" strokeLinejoin="round" strokeWidth="2" />
+			<path
+				d="M5 7H6M5 10H6"
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="2"
+			/>
+		</svg>
+	);
+}
+
+export { Sidebar, SidebarProvider, SidebarTrigger, useSidebar };
diff --git a/packages/inbox/shell/useResizablePanel.ts b/packages/inbox/shell/useResizablePanel.ts
new file mode 100644
index 0000000000..937bd0f615
--- /dev/null
+++ b/packages/inbox/shell/useResizablePanel.ts
@@ -0,0 +1,289 @@
+// Copied from Workspaces apps/web/src/hooks/useResizablePanel.ts (a15a2839b) for
+// the Inbox sidebar (the owner, 2026-10-09: the same component and motion).
+// Port: the width persists through Plannotator's cookie storage instead of
+// localStorage, as every Plannotator setting does (a session's port changes).
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { storage } from "@plannotator/ui/utils/storage";
+
+interface UseResizablePanelOptions {
+	storageKey: string;
+	defaultWidth?: number;
+	minWidth?: number;
+	maxWidth?: number;
+	side?: "left" | "right";
+	/**
+	 * Dragging the raw pointer target below `minWidth * snapCloseRatio` calls
+	 * this IMMEDIATELY (mid-drag, not at pointer-up). When `onSnapOpen` is
+	 * also provided the gesture stays alive afterward so the still-held
+	 * pointer can reverse the close (design contract §3); without it the
+	 * legacy terminal behavior is kept (gesture ends at the snap).
+	 */
+	onSnapClose?: () => void;
+	/**
+	 * The reversal path: fires when a still-held drag crosses back ABOVE the
+	 * close threshold after a snap-close, so the consumer reopens the panel
+	 * and width tracking resumes. Providing this is what opts a callsite into
+	 * reversible (contract-shaped) dismissal.
+	 */
+	onSnapOpen?: () => void;
+	/** Close threshold as a fraction of minWidth. Contract §3: 0.5. */
+	snapCloseRatio?: number;
+	apply?: (width: number) => void;
+	/**
+	 * Fires on pointer-up when the pointer never traveled past
+	 * `clickThreshold` — a genuine click on the handle, not a drag. Mirrors
+	 * @plannotator/ui's 0.26.0 `useResizablePanel` seam exactly (UX backlog
+	 * #9: the whole handle is the click-to-collapse target): the hook owns
+	 * the pointer state machine, so this is the only reliable click signal.
+	 * Never fires on a snap-close or on `pointercancel` (aborted gestures).
+	 * When it fires, the width is left untouched (not committed/persisted).
+	 */
+	onClick?: () => void;
+	/** Max pointer travel (px) still counted as a click. Default 4 (upstream's). */
+	clickThreshold?: number;
+	/**
+	 * When set, the live maximum is `min(maxWidth, innerWidth - reserveViewport)`
+	 * so the panel can never squeeze the remaining content below this many px
+	 * (contract §3: the sidebar preserves ≥320px of main content). Applied at
+	 * restore, on every drag frame, and on keyboard resize; an idle window
+	 * resize is re-clamped by the next interaction, not reactively.
+	 */
+	reserveViewport?: number;
+}
+
+export interface ResizeHandleProps {
+	isDragging: boolean;
+	onPointerDown: (e: React.PointerEvent) => void;
+	style: React.CSSProperties;
+}
+
+function getStoredWidth(storageKey: string, minWidth: number, maxWidth: number) {
+	const saved = storage.getItem(storageKey);
+	if (!saved) return undefined;
+	const n = Number(saved);
+	// Clamp finite out-of-range values instead of rejecting (contract §3:
+	// "clamp on every restore") — a width persisted under an older viable
+	// range (e.g. the pre-polish 220 minimum) restores to the nearest viable
+	// width, not the default. Non-finite garbage still falls to the default.
+	if (!Number.isFinite(n)) return undefined;
+	return Math.min(maxWidth, Math.max(minWidth, n));
+}
+
+export function useResizablePanel({
+	storageKey,
+	defaultWidth = 288,
+	minWidth = 200,
+	maxWidth = 600,
+	side = "right",
+	onSnapClose,
+	onSnapOpen,
+	snapCloseRatio = 0.5,
+	apply,
+	onClick,
+	clickThreshold = 4,
+	reserveViewport,
+}: UseResizablePanelOptions) {
+	// The live maximum: static unless reserveViewport asks for the
+	// main-content floor. Computed at call time (never memoized) so a drag
+	// after a window resize clamps against the current viewport.
+	const effectiveMax = useCallback(
+		() =>
+			reserveViewport === undefined
+				? maxWidth
+				: Math.max(minWidth, Math.min(maxWidth, window.innerWidth - reserveViewport)),
+		[maxWidth, minWidth, reserveViewport],
+	);
+
+	const [width, setWidth] = useState(
+		() => getStoredWidth(storageKey, minWidth, effectiveMax()) ?? defaultWidth,
+	);
+	const [isDragging, setIsDragging] = useState(false);
+
+	// The ANNOUNCED maximum tracks the operable one (contract §3: correct
+	// aria-valuemax): with reserveViewport, drag and keyboard clamp to
+	// min(maxWidth, innerWidth - reserve), so the separator must announce
+	// that same bound — a static 520 on a 700px window would promise a range
+	// End cannot reach. Recomputed on window resize; without reserveViewport
+	// the design max is already the operable max and no listener mounts.
+	const [liveMax, setLiveMax] = useState(effectiveMax);
+	useEffect(() => {
+		if (reserveViewport === undefined) return;
+		const onResize = () => setLiveMax(effectiveMax());
+		onResize();
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [effectiveMax, reserveViewport]);
+
+	const widthRef = useRef(width);
+	const startXRef = useRef(0);
+	const startWidthRef = useRef(0);
+	const draggingRef = useRef(false);
+	// True while THIS gesture has snap-closed the panel and not yet reversed.
+	const closedRef = useRef(false);
+	// Latches true once the pointer travels past clickThreshold —
+	// distinguishes a click from a drag. Reset on each pointerdown.
+	const movedRef = useRef(false);
+	const latestXRef = useRef(0);
+	const rafRef = useRef<number | null>(null);
+
+	// Latest-refs via effect, NOT render-time writes: the React Compiler
+	// treats a ref mutated during render as a rules violation and bails out
+	// of compiling every consumer of this hook (the heaviest shell surfaces).
+	// The refs are only read inside pointer/keyboard handlers, which always
+	// run after the effect has stamped the latest values.
+	const applyRef = useRef(apply);
+	const onSnapCloseRef = useRef(onSnapClose);
+	const onSnapOpenRef = useRef(onSnapOpen);
+	const onClickRef = useRef(onClick);
+	useEffect(() => {
+		applyRef.current = apply;
+		onSnapCloseRef.current = onSnapClose;
+		onSnapOpenRef.current = onSnapOpen;
+		onClickRef.current = onClick;
+	});
+
+	const flush = useCallback(() => {
+		rafRef.current = null;
+		if (!draggingRef.current) return;
+		const delta =
+			side === "right"
+				? startXRef.current - latestXRef.current
+				: latestXRef.current - startXRef.current;
+		const raw = startWidthRef.current + delta;
+		const closeThreshold = minWidth * snapCloseRatio;
+
+		if (onSnapCloseRef.current) {
+			if (!closedRef.current && raw < closeThreshold) {
+				// Below the dismiss threshold: close NOW, mid-drag (contract §3 —
+				// never wait for pointer-up). Width state stays at the pre-drag
+				// value so a reversal (or the next open) lands somewhere sane.
+				widthRef.current = startWidthRef.current;
+				applyRef.current?.(startWidthRef.current);
+				setWidth(startWidthRef.current);
+				if (onSnapOpenRef.current) {
+					// Reversible close: the gesture stays alive so crossing back
+					// above the threshold reopens before release.
+					closedRef.current = true;
+					onSnapCloseRef.current();
+					return;
+				}
+				// Legacy terminal close (no reversal wired): end the gesture.
+				draggingRef.current = false;
+				setIsDragging(false);
+				onSnapCloseRef.current();
+				return;
+			}
+			if (closedRef.current) {
+				if (raw < closeThreshold) return; // still below — stay closed
+				// Reversal: the held pointer crossed back — reopen and resume
+				// tracking from the live raw target.
+				closedRef.current = false;
+				onSnapOpenRef.current?.();
+			}
+		}
+
+		const w = Math.min(effectiveMax(), Math.max(minWidth, raw));
+		widthRef.current = w;
+		if (applyRef.current) applyRef.current(w);
+		else setWidth(w);
+	}, [side, minWidth, snapCloseRatio, effectiveMax]);
+
+	const onPointerDown = useCallback(
+		(e: React.PointerEvent) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			startXRef.current = e.clientX;
+			startWidthRef.current = widthRef.current;
+			latestXRef.current = e.clientX;
+			closedRef.current = false;
+			movedRef.current = false;
+			draggingRef.current = true;
+			setIsDragging(true);
+
+			const onMove = (ev: PointerEvent) => {
+				if (!draggingRef.current) return;
+				latestXRef.current = ev.clientX;
+				if (Math.abs(latestXRef.current - startXRef.current) > clickThreshold)
+					movedRef.current = true;
+				if (rafRef.current == null) rafRef.current = requestAnimationFrame(flush);
+			};
+			const cleanup = () => {
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onUp);
+				window.removeEventListener("pointercancel", onUp);
+			};
+			function onUp(ev: PointerEvent) {
+				// pointercancel = the browser aborted the gesture (palm
+				// rejection, a system gesture, focus loss). It is NOT a
+				// completed click — only clean up drag state, never collapse.
+				const cancelled = ev.type === "pointercancel";
+				// Released (or aborted) while snap-closed: the close already
+				// happened and stands; never persist a below-threshold width
+				// (contract §3) and never double-fire collapse via onClick.
+				const endedClosed = closedRef.current;
+				draggingRef.current = false;
+				closedRef.current = false;
+				if (rafRef.current != null) {
+					cancelAnimationFrame(rafRef.current);
+					rafRef.current = null;
+				}
+				setIsDragging(false);
+				if (!endedClosed) {
+					if (onClickRef.current && !movedRef.current && !cancelled) {
+						// A pointerdown+up that never crossed the threshold is a
+						// click, not a resize — fire onClick (collapse) and leave
+						// the width untouched. Mirrors the package hook (0.26.0).
+						onClickRef.current();
+					} else {
+						// widthRef is always clamped ≥ minWidth here, so only
+						// accepted widths ever reach storage.
+						setWidth(widthRef.current);
+						storage.setItem(storageKey, String(widthRef.current));
+					}
+				}
+				cleanup();
+			}
+
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onUp);
+			window.addEventListener("pointercancel", onUp);
+		},
+		[flush, storageKey, clickThreshold],
+	);
+
+	/**
+	 * Keyboard/imperative resize (contract §3 separator behavior): clamps to
+	 * the viable range — the pointer-only dismissal threshold NEVER applies
+	 * here — applies, commits, and persists in one step.
+	 */
+	const resizeTo = useCallback(
+		(px: number) => {
+			const w = Math.min(effectiveMax(), Math.max(minWidth, px));
+			widthRef.current = w;
+			applyRef.current?.(w);
+			setWidth(w);
+			storage.setItem(storageKey, String(w));
+		},
+		[effectiveMax, minWidth, storageKey],
+	);
+
+	// No double-click handler on purpose (UX backlog #9): the old
+	// onDoubleClick auto-fit (resetWidth) is retired everywhere — double-click
+	// on an edge does nothing.
+	return {
+		width,
+		isDragging,
+		resizeTo,
+		/** Viable range for aria-valuemin/max on the separator. maxWidth is
+		 * the OPERABLE max (viewport-aware when reserveViewport is set), so
+		 * the announced range is always reachable. */
+		minWidth,
+		maxWidth: liveMax,
+		handleProps: {
+			isDragging,
+			onPointerDown,
+			style: { touchAction: "none" },
+		} as ResizeHandleProps,
+	};
+}
diff --git a/tests/e2e/inbox-sidebar.spec.ts b/tests/e2e/inbox-sidebar.spec.ts
new file mode 100644
index 0000000000..f904a3c385
--- /dev/null
+++ b/tests/e2e/inbox-sidebar.spec.ts
@@ -0,0 +1,313 @@
+/**
+ * The Inbox sidebar is Workspaces' sidebar primitive (packages/inbox/shell),
+ * proved in a real Chromium against the compiled binary under a temp
+ * PLANNOTATOR_DATA_DIR: the toggle closes and opens it on the shell spring
+ * (the width sampled every frame), ⌘B / Ctrl+B toggles it (not while typing), the choice
+ * survives a reload, the hover peek shows the navigation while it is closed,
+ * the edge collapses on a click and resizes on a drag (and closes past half
+ * the minimum, reopening when the held pointer comes back), reduced motion
+ * lands without travel, and a phone width gets the sheet.
+ *
+ * Build the binary first (see inbox.spec.ts), then `bun run test:e2e:inbox`.
+ * The PNGs, the video and the sampled curves land in .local/proof/sidebar/.
+ */
+
+import { expect, test, type Browser, type BrowserContext, type Page } from '@playwright/test';
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, readdirSync, realpathSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { DEMO_MESSAGES, SimAgent, scratchProject } from '../../scripts/inbox-sim';
+
+const repo = resolve(__dirname, '../..');
+const builtBinary = resolve(process.env.PLANNOTATOR_E2E_BINARY ?? join(repo, '.local/plannotator'));
+const proofDir = join(resolve(process.env.PLANNOTATOR_E2E_PROOF_DIR ?? join(repo, '.local/proof')), 'sidebar');
+const WIDTH = 232;
+
+interface World {
+  root: string;
+  dataDir: string;
+  url: string;
+  agent: SimAgent;
+  context: BrowserContext;
+  page: Page;
+  errors: string[];
+}
+
+let world: World;
+const curves: Record<string, Array<[number, number]>> = {};
+
+function registry(): { pid: number } {
+  return JSON.parse(readFileSync(join(world.dataDir, 'inbox', 'inbox.json'), 'utf8'));
+}
+
+function side(page: Page) {
+  return page.getByRole('complementary', { name: 'Inbox navigation' });
+}
+
+/** The in-flow spacer's width every animation frame for `ms`, while `act` runs. */
+async function sampleWidth(page: Page, act: () => Promise<void>, ms = 900): Promise<Array<[number, number]>> {
+  const sampling = page.evaluate(
+    (ms) =>
+      new Promise<Array<[number, number]>>((done) => {
+        const out: Array<[number, number]> = [];
+        const t0 = performance.now();
+        const tick = () => {
+          const gap = document.querySelector('.ib-sb-gap');
+          const t = performance.now() - t0;
+          out.push([Math.round(t), gap ? parseFloat(getComputedStyle(gap).width) : -1]);
+          if (t < ms) requestAnimationFrame(tick);
+          else done(out);
+        };
+        requestAnimationFrame(tick);
+      }),
+    ms,
+  );
+  await page.waitForTimeout(32);
+  await act();
+  return sampling;
+}
+
+/** The widths strictly between the ends: the frames the spring drew. */
+function travel(samples: Array<[number, number]>, end: number): number[] {
+  return samples.map(([, w]) => w).filter((w) => w > 0.5 && w < end - 0.5);
+}
+
+async function shot(name: string): Promise<void> {
+  const page = world.page;
+  for (const scheme of ['light', 'dark'] as const) {
+    await page.emulateMedia({ colorScheme: scheme, reducedMotion: 'reduce' });
+    await page.waitForTimeout(150);
+    await page.screenshot({ path: join(proofDir, `${name}-${scheme}.png`) });
+  }
+  await page.emulateMedia({ colorScheme: 'light', reducedMotion: 'no-preference' });
+}
+
+async function cookie(page: Page, name: string): Promise<string | undefined> {
+  return (await page.context().cookies()).find((c) => c.name === name)?.value;
+}
+
+test.describe.configure({ mode: 'serial' });
+
+test.beforeAll(async ({ browser }: { browser: Browser }) => {
+  expect(existsSync(builtBinary), `build the binary first: ${builtBinary}`).toBe(true);
+  mkdirSync(proofDir, { recursive: true });
+  for (const file of readdirSync(proofDir)) rmSync(join(proofDir, file), { recursive: true, force: true });
+  const root = realpathSync(mkdtempSync(join(tmpdir(), 'plannotator-inbox-sidebar-e2e-')));
+  const dataDir = join(root, 'data');
+  const home = join(root, 'home');
+  mkdirSync(home);
+  const env = { PATH: process.env.PATH ?? '', HOME: home, PLANNOTATOR_DATA_DIR: dataDir, PLANNOTATOR_BROWSER: 'none' };
+  // The data dir this run hands the binary is its own temp folder, never the person's.
+  expect(env.PLANNOTATOR_DATA_DIR.startsWith(root)).toBe(true);
+  const started = spawnSync(builtBinary, ['inbox', '--background'], { env, encoding: 'utf8', timeout: 60_000 });
+  expect(started.status, started.stderr).toBe(0);
+  const url = started.stdout.trim();
+  const agent = await SimAgent.connect({ binary: builtBinary, env, name: 'Claude Code', host: 'claude-code' });
+  await agent.send({ project_path: scratchProject(join(root, 'src'), 'billing-svc'), subject: 'Stripe 409', body: DEMO_MESSAGES.stopped });
+  await agent.send({ project_path: scratchProject(join(root, 'src'), 'docs-site'), subject: 'Install page', body: DEMO_MESSAGES.holding });
+  const context = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    colorScheme: 'light',
+    recordVideo: { dir: proofDir, size: { width: 1440, height: 900 } },
+  });
+  const page = await context.newPage();
+  const errors: string[] = [];
+  page.on('pageerror', (error) => errors.push(error.message));
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text());
+  });
+  world = { root, dataDir, url, agent, context, page, errors };
+});
+
+test.afterAll(async () => {
+  if (!world) return;
+  await world.agent.close().catch(() => {});
+  const video = world.page.video();
+  await world.context.close();
+  if (video) await video.saveAs(join(proofDir, 'sidebar.webm')).catch(() => {});
+  if (video) await video.delete().catch(() => {});
+  try {
+    process.kill(registry().pid, 'SIGTERM');
+  } catch {
+    // Already gone.
+  }
+  rmSync(world.root, { recursive: true, force: true });
+  writeFileSync(join(proofDir, 'curves.json'), JSON.stringify(curves, null, 1));
+});
+
+test('the toggle closes and opens the sidebar on the spring, and the list takes the width', async () => {
+  const { page, url } = world;
+  await page.goto(url);
+  await expect(side(page)).toBeVisible();
+  await expect(side(page).getByRole('button', { name: 'billing-svc' })).toBeVisible();
+  const list = page.locator('.ib-listcol');
+  await expect.poll(() => list.evaluate((el) => el.getBoundingClientRect().left)).toBe(WIDTH);
+  await shot('open');
+
+  const trigger = page.locator('.ib-lhead').getByRole('button', { name: 'Toggle Sidebar' });
+  const closing = await sampleWidth(page, () => trigger.click());
+  curves.close = closing;
+  expect(closing[0]?.[1]).toBe(WIDTH);
+  expect(closing.at(-1)?.[1]).toBe(0);
+  // A spring, not a jump: many frames between the ends, never growing on the way down.
+  expect(travel(closing, WIDTH).length).toBeGreaterThanOrEqual(10);
+  for (let i = 1; i < closing.length; i++) expect(closing[i]![1]).toBeLessThanOrEqual(closing[i - 1]![1]);
+  await expect(side(page)).toBeHidden();
+  await expect(page.locator('.ib-sb-panel')).toHaveAttribute('inert', '');
+  expect(await list.evaluate((el) => el.getBoundingClientRect().left)).toBe(0);
+  expect(await cookie(page, 'plannotator-inbox-sidebar-open')).toBe('false');
+  await shot('closed');
+
+  const opening = await sampleWidth(page, () => trigger.click());
+  curves.open = opening;
+  expect(opening.at(-1)?.[1]).toBe(WIDTH);
+  expect(travel(opening, WIDTH).length).toBeGreaterThanOrEqual(10);
+  // The bounce never draws the sidebar wider than its width.
+  expect(Math.max(...opening.map(([, w]) => w))).toBe(WIDTH);
+  await expect(side(page)).toBeVisible();
+  expect(await cookie(page, 'plannotator-inbox-sidebar-open')).toBe('true');
+});
+
+test('⌘B and Ctrl+B toggle it, and the choice survives a reload', async () => {
+  const { page } = world;
+  const closing = await sampleWidth(page, () => page.keyboard.press('Meta+b'));
+  expect(closing.at(-1)?.[1]).toBe(0);
+  await expect(side(page)).toBeHidden();
+  await page.reload();
+  await expect(page.locator('.ib-lhead h1')).toBeVisible();
+  // Closed from the first frame: a reload restores, it does not animate.
+  expect(await page.locator('.ib-sb-gap').evaluate((el) => getComputedStyle(el).width)).toBe('0px');
+  await expect(side(page)).toBeHidden();
+  const opening = await sampleWidth(page, () => page.keyboard.press('Control+b'));
+  expect(opening.at(-1)?.[1]).toBe(WIDTH);
+  await expect(side(page)).toBeVisible();
+  await page.reload();
+  await expect(side(page)).toBeVisible();
+});
+
+test('⌘B in the reply box is typing: the sidebar stays', async () => {
+  const { page, url } = world;
+  await page.locator('.ib-lbody [data-thread-id]').first().click();
+  await page.locator('.ib-pfoot').getByRole('button', { name: 'Reply', exact: true }).click();
+  const reply = page.locator('textarea.ib-rtext');
+  await reply.fill('Retry with the same key');
+  await reply.focus();
+  await page.keyboard.press('ControlOrMeta+b');
+  await page.waitForTimeout(700);
+  await expect(side(page)).toBeVisible();
+  await expect(page.locator('.ib-sb')).toHaveAttribute('data-state', 'expanded');
+  await expect(reply).toBeFocused();
+  await expect(reply).toHaveValue('Retry with the same key');
+  expect(await cookie(page, 'plannotator-inbox-sidebar-open')).toBe('true');
+  await page.goto(url);
+  await expect(side(page)).toBeVisible();
+});
+
+test('closed, the left edge peeks the navigation after a rest, and it works', async () => {
+  const { page } = world;
+  await page.keyboard.press('ControlOrMeta+b');
+  await expect(side(page)).toBeHidden();
+  await page.mouse.move(700, 450);
+  await page.mouse.move(6, 450, { steps: 8 });
+  // Hover intent: nothing in the first beat, the panel after 600 ms.
+  await page.waitForTimeout(250);
+  await expect(side(page)).toBeHidden();
+  const peek = page.locator('[data-sidebar-peek]');
+  await expect(peek).toHaveAttribute('data-visible', '');
+  await expect(side(page)).toBeVisible();
+  await page.mouse.move(120, 450, { steps: 4 });
+  await page.waitForTimeout(350);
+  await shot('peek');
+  await side(page).getByRole('button', { name: 'docs-site' }).click();
+  await expect(page.locator('.ib-lhead h1')).toHaveText('docs-site');
+  await page.mouse.move(900, 450, { steps: 6 });
+  await expect(peek).not.toHaveAttribute('data-visible', '');
+  await expect(side(page)).toBeHidden();
+  // The real sidebar stayed closed: the peek is an overlay, not a toggle.
+  expect(await cookie(page, 'plannotator-inbox-sidebar-open')).toBe('false');
+  await page.keyboard.press('ControlOrMeta+b');
+  await expect(side(page)).toBeVisible();
+  await expect(peek).toHaveCount(0);
+});
+
+test('the edge: a click collapses, a drag resizes, past half the minimum it closes and the held pointer reopens it', async () => {
+  const { page } = world;
+  const edge = page.getByRole('separator', { name: 'Sidebar width' });
+  await expect(edge).toHaveAttribute('aria-valuenow', String(WIDTH));
+  await page.mouse.move(WIDTH, 500);
+  await page.mouse.down();
+  await page.mouse.move(WIDTH + 68, 500, { steps: 6 });
+  await page.mouse.up();
+  await expect(edge).toHaveAttribute('aria-valuenow', '300');
+  await expect.poll(() => page.locator('.ib-listcol').evaluate((el) => el.getBoundingClientRect().left)).toBe(300);
+  expect(await cookie(page, 'plannotator-inbox-sidebar-width')).toBe('300');
+
+  // Below 100 px (half the 200 minimum) it closes mid-drag; back above, it reopens.
+  await page.mouse.move(300, 500);
+  await page.mouse.down();
+  await page.mouse.move(60, 500, { steps: 8 });
+  await expect(page.locator('.ib-sb')).toHaveAttribute('data-state', 'collapsed');
+  await page.mouse.move(260, 500, { steps: 8 });
+  await expect(page.locator('.ib-sb')).toHaveAttribute('data-state', 'expanded');
+  await page.mouse.up();
+  await expect(edge).toHaveAttribute('aria-valuenow', '260');
+
+  // The keyboard: arrows in 10 px steps, Home to the minimum.
+  await edge.focus();
+  await page.keyboard.press('ArrowRight');
+  await expect(edge).toHaveAttribute('aria-valuenow', '270');
+  await page.keyboard.press('Home');
+  await expect(edge).toHaveAttribute('aria-valuenow', '200');
+  await edge.evaluate((el) => (el as HTMLElement).blur());
+
+  // A click on the edge collapses.
+  await page.mouse.click(200, 500);
+  await expect(page.locator('.ib-sb')).toHaveAttribute('data-state', 'collapsed');
+  await expect(side(page)).toBeHidden();
+  await page.keyboard.press('ControlOrMeta+b');
+  await expect(side(page)).toBeVisible();
+  // Back to the record's width for the frames that follow.
+  await page.mouse.move(200, 500);
+  await page.mouse.down();
+  await page.mouse.move(WIDTH, 500, { steps: 4 });
+  await page.mouse.up();
+  await expect(edge).toHaveAttribute('aria-valuenow', String(WIDTH));
+});
+
+test('reduced motion: the toggle lands without travel', async () => {
+  const { page } = world;
+  const trigger = page.locator('.ib-lhead').getByRole('button', { name: 'Toggle Sidebar' });
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  const closing = await sampleWidth(page, () => trigger.click(), 400);
+  expect(closing.at(-1)?.[1]).toBe(0);
+  expect(travel(closing, WIDTH)).toEqual([]);
+  const opening = await sampleWidth(page, () => trigger.click(), 400);
+  expect(opening.at(-1)?.[1]).toBe(WIDTH);
+  expect(travel(opening, WIDTH)).toEqual([]);
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+});
+
+test('a phone width: the sidebar is a sheet the toggle opens, a pick and Escape close it', async () => {
+  const { page } = world;
+  await page.setViewportSize({ width: 600, height: 900 });
+  await expect(page.locator('.ib-sb')).toHaveCount(0);
+  await expect(side(page)).toHaveCount(0);
+  expect(await page.locator('.ib-listcol').evaluate((el) => el.getBoundingClientRect().left)).toBe(0);
+  await page.locator('.ib-lhead').getByRole('button', { name: 'Toggle Sidebar' }).click();
+  const sheet = page.getByRole('dialog');
+  await expect(sheet).toBeVisible();
+  await expect(sheet.getByRole('complementary', { name: 'Inbox navigation' })).toBeVisible();
+  await page.waitForTimeout(700);
+  await shot('narrow-sheet');
+  await sheet.getByRole('button', { name: 'Settings' }).click();
+  await expect(sheet).toHaveCount(0);
+  await expect(page.locator('.ib-spage h1')).toHaveText('Settings');
+  await page.keyboard.press('ControlOrMeta+b');
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('dialog')).toHaveCount(0);
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await expect(side(page)).toBeVisible();
+  expect(world.errors).toEqual([]);
+});
diff --git a/tests/e2e/playwright.config.ts b/tests/e2e/playwright.config.ts
index 33d607f661..cb9a13ff22 100644
--- a/tests/e2e/playwright.config.ts
+++ b/tests/e2e/playwright.config.ts
@@ -3,7 +3,7 @@
  * binary (`plannotator inbox`), under a temp PLANNOTATOR_DATA_DIR: the window
  * (inbox.spec.ts), notifications, decisions (inbox-decisions.spec.ts) and
  * guided reviews (inbox-guides.spec.ts), New message
- * (inbox-new-message.spec.ts), the order inside a section (inbox-order.spec.ts), phones (inbox-phones.spec.ts), and the
+ * (inbox-new-message.spec.ts), the order inside a section (inbox-order.spec.ts), phones (inbox-phones.spec.ts), the sidebar (inbox-sidebar.spec.ts), and the
  * surface a phone hosts, in WebKit (surface.spec.ts). Build the binary
  * first (see inbox.spec.ts), then `bun run test:e2e:inbox`.
  */
@@ -11,7 +11,7 @@ import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
   testDir: '.',
-  testMatch: ['inbox.spec.ts', 'notifications.spec.ts', 'inbox-decisions.spec.ts', 'inbox-attachments.spec.ts', 'inbox-guides.spec.ts', 'inbox-new-message.spec.ts', 'inbox-order.spec.ts', 'inbox-phones.spec.ts', 'surface.spec.ts'],
+  testMatch: ['inbox.spec.ts', 'notifications.spec.ts', 'inbox-decisions.spec.ts', 'inbox-attachments.spec.ts', 'inbox-guides.spec.ts', 'inbox-new-message.spec.ts', 'inbox-order.spec.ts', 'inbox-phones.spec.ts', 'inbox-sidebar.spec.ts', 'surface.spec.ts'],
   outputDir: '../../.local/test-results',
   fullyParallel: false,
   workers: 1,