diff --git a/src/controller.ts b/src/controller.ts
index 9e384d7..be5c088 100644
--- a/src/controller.ts
+++ b/src/controller.ts
@@ -24,6 +24,7 @@ import type { DropTarget } from './page/dnd'
 import type { BlockEditorDef, BlockInfo, InlineSession } from './registry'
 import { createStore } from './store'
 import type { Store } from './store'
+import { readPersist, writePersist } from './persist'
 
 export interface Block extends BlockInfo {
   depth: number
@@ -123,7 +124,7 @@ export class Controller {
       canRedo: false,
       busy: 0,
       toast: null,
-      rail: false,
+      rail: readPersist('cms-onpage.rail', false),
       dev: false,
       assistant: false,
       inline: null,
@@ -155,6 +156,12 @@ export class Controller {
     this.reloadImpl = opts.reload ?? (() => this.softReload())
   }
 
+  /** Left panel open state, remembered across reloads. */
+  setRail(open: boolean): void {
+    writePersist('cms-onpage.rail', open)
+    this.store.set({ rail: open })
+  }
+
   // --- lifecycle ----------------------------------------------------------
 
   start(): void {
diff --git a/src/persist.ts b/src/persist.ts
new file mode 100644
index 0000000..12c17c1
--- /dev/null
+++ b/src/persist.ts
@@ -0,0 +1,21 @@
+// Remembering small UI preferences across reloads (rail open, section
+// collapsed). Editors reload the page constantly to preview; losing the
+// panel state every time is the papercut this removes. All access is
+// guarded: private mode, sandboxed iframes and some embeds throw.
+export function readPersist<T>(key: string, fallback: T): T {
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw === null) return fallback
+    return (typeof fallback === 'boolean' ? raw === 'true' : JSON.parse(raw)) as T
+  } catch {
+    return fallback
+  }
+}
+
+export function writePersist(key: string, value: unknown): void {
+  try {
+    localStorage.setItem(key, typeof value === 'string' ? value : JSON.stringify(value))
+  } catch {
+    // preferences are best-effort
+  }
+}
diff --git a/src/ui/Assistant.tsx b/src/ui/Assistant.tsx
index 5fd2ca2..b6bb2e3 100644
--- a/src/ui/Assistant.tsx
+++ b/src/ui/Assistant.tsx
@@ -69,6 +69,7 @@ function ProposalCard({ p, status, onResolve }: { p: Proposal; status: ProposalS
 export function Assistant() {
   const ctrl = useCtrl()
   const open = useEditorState((s) => s.assistant)
+  const devOpen = useEditorState((s) => s.dev)
   const selected = useEditorState((s) => s.selected)
   useEditorState((s) => s.labelsVersion)
   const store = conversationsFor(ctrl)
@@ -140,7 +141,7 @@ export function Assistant() {
   const starters = scope.rootId ? BLOCK_STARTERS : PAGE_STARTERS
 
   return (
-    <aside className="cms-assistant" aria-label="AI assistant">
+    <aside className={`cms-assistant${devOpen ? ' cms-assistant--shifted' : ''}`} aria-label="AI assistant">
       <header>
         <span className="cms-assistant__title">
           <Icon name="assistant" size={16} /> Assistant
diff --git a/src/ui/Dock.tsx b/src/ui/Dock.tsx
index 988e66e..1becb91 100644
--- a/src/ui/Dock.tsx
+++ b/src/ui/Dock.tsx
@@ -37,7 +37,7 @@ export function Dock() {
       ctrl.toast('error', (e as Error).message)
     }
   }
-  const panel = () => ctrl.store.set({ rail: !s.rail })
+  const panel = () => ctrl.setRail(!s.rail)
   return (
     <nav className="cms-dock" aria-label="Page editor">
       <button className={`cms-pill${s.mode === 'edit' ? ' is-on' : ''}`} onClick={() => ctrl.setMode(s.mode === 'edit' ? 'browse' : 'edit')} title="Toggle editing (links work in browse mode)">
diff --git a/src/ui/Rail.tsx b/src/ui/Rail.tsx
index cae46da..250a552 100644
--- a/src/ui/Rail.tsx
+++ b/src/ui/Rail.tsx
@@ -5,7 +5,7 @@ import { allowedChildren, connectionsOf, labelKey, sortGroups, typeName } from '
 import type { DropTarget } from '../page/dnd'
 import { Icon, TypeIcon } from './Icon'
 import { Summary } from './Summary'
-import { useCtrl, useEditorState } from './hooks'
+import { useCtrl, useEditorState, usePersistentState } from './hooks'
 import type { Block, Controller } from '../controller'
 
 /**
@@ -39,7 +39,7 @@ export function Rail() {
         <span className="cms-rail__title">
           <Icon name="outline" size={16} /> Page
         </span>
-        <button className="cms-ico" onClick={() => ctrl.store.set({ rail: false })} aria-label="Close panel">
+        <button className="cms-ico" onClick={() => ctrl.setRail(false)} aria-label="Close panel">
           <Icon name="close" />
         </button>
       </header>
@@ -108,16 +108,25 @@ function OutlineTree() {
   }, [drag])
 
   const roots = useMemo(() => blocks.filter((b) => !b.parentId), [blocks])
+  const [open, setOpen] = usePersistentState('cms-onpage.sec.outline', true)
   if (!blocks.length) return null
   return (
     <section aria-label="Outline">
-      <h4 className="cms-rail__sec">Outline</h4>
-      <ul className="cms-outline cms-outline--tree">
-        {roots.map((b) => (
-          <OutlineNode key={b.id} block={b} level={0} collapsed={collapsed} setCollapsed={setCollapsed} over={over} setOver={setOver} dragging={dragging} selected={selected} />
-        ))}
-      </ul>
-      {dragging && <OutlineGap parentId="" index={roots.length} over={over} setOver={setOver} />}
+      <h4 className="cms-rail__sec">
+        <button className="cms-sectoggle" aria-expanded={open} aria-label="Outline" onClick={() => setOpen((o) => !o)}>
+          Outline ({blocks.length})
+        </button>
+      </h4>
+      {open && (
+        <>
+          <ul className="cms-outline cms-outline--tree">
+            {roots.map((b) => (
+              <OutlineNode key={b.id} block={b} level={0} collapsed={collapsed} setCollapsed={setCollapsed} over={over} setOver={setOver} dragging={dragging} selected={selected} />
+            ))}
+          </ul>
+          {dragging && <OutlineGap parentId="" index={roots.length} over={over} setOver={setOver} />}
+        </>
+      )}
     </section>
   )
 }
@@ -389,9 +398,16 @@ function Palette() {
     doc.addEventListener('pointerup', stop, true)
   }
 
+  const [open, setOpen] = usePersistentState('cms-onpage.sec.blocks', true)
   return (
     <section aria-label="Blocks">
-      <h4 className="cms-rail__sec">Blocks</h4>
+      <h4 className="cms-rail__sec">
+        <button className="cms-sectoggle" aria-expanded={open} aria-label="Blocks" onClick={() => setOpen((o) => !o)}>
+          Blocks
+        </button>
+      </h4>
+      {open && (
+      <>
       <div className="cms-pad">
         <input className="cms-input" placeholder="Search blocks…" aria-label="Search blocks" value={q} onChange={(e) => setQ(e.target.value)} />
         <p className="cms-muted cms-hint">Drag onto the page or the outline, or click to add to the selection.</p>
@@ -426,6 +442,8 @@ function Palette() {
         </details>
       ))}
       {types && !shown.length && <p className="cms-muted cms-pad">Nothing matches.</p>}
+      </>
+      )}
     </section>
   )
 }
@@ -515,9 +533,16 @@ function NodeSearch() {
     doc.addEventListener('pointerup', stop, true)
   }
 
+  const [open, setOpen] = usePersistentState('cms-onpage.sec.nodes', true)
   return (
     <section aria-label="Nodes">
-      <h4 className="cms-rail__sec">Nodes</h4>
+      <h4 className="cms-rail__sec">
+        <button className="cms-sectoggle" aria-expanded={open} aria-label="Nodes" onClick={() => setOpen((o) => !o)}>
+          Nodes
+        </button>
+      </h4>
+      {open && (
+      <>
       <div className="cms-pad cms-nodefind">
         <input className="cms-input" placeholder="Search existing nodes…" aria-label="Search nodes" value={q} onChange={(e) => setQ(e.target.value)} />
         <select className="cms-input" aria-label="Filter by type" value={type} onChange={(e) => setType(e.target.value)}>
@@ -560,6 +585,8 @@ function NodeSearch() {
         </ul>
       )}
       {!!results?.length && total > results.length && <p className="cms-muted cms-pad">Showing {results.length} of {total} — refine the search.</p>}
+      </>
+      )}
     </section>
   )
 }
@@ -585,7 +612,7 @@ function ExperimentsPanel() {
   const [stats, setStats] = useState<Record<string, ExperimentAnalytics>>({})
   const [confirmOff, setConfirmOff] = useState<string | null>(null)
   const [tick, setTick] = useState(0) // re-read override cookies after set/clear
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = usePersistentState('cms-onpage.sec.experiments', false)
 
   useEffect(() => {
     if (!open) return
diff --git a/src/ui/hooks.ts b/src/ui/hooks.ts
index e2fd3c6..d00d17a 100644
--- a/src/ui/hooks.ts
+++ b/src/ui/hooks.ts
@@ -1,5 +1,6 @@
-import { createContext, useContext, useSyncExternalStore } from 'react'
+import { createContext, useContext, useState, useSyncExternalStore } from 'react'
 import type { Controller, EditorState } from '../controller'
+import { readPersist, writePersist } from '../persist'
 import { useStore } from '../store'
 import { blockEditors, fieldEditors } from '../registry'
 
@@ -10,6 +11,18 @@ export function useEditorState<S>(select: (s: EditorState) => S): S {
   return useStore(useCtrl().store, select)
 }
 
+/** Boolean UI state that survives reloads (rail sections, panel toggles). */
+export function usePersistentState(key: string, initial: boolean): [boolean, (update: boolean | ((prev: boolean) => boolean)) => void] {
+  const [value, setValue] = useState(() => readPersist(key, initial))
+  const set = (update: boolean | ((prev: boolean) => boolean)) =>
+    setValue((prev) => {
+      const next = typeof update === 'function' ? update(prev) : update
+      writePersist(key, next)
+      return next
+    })
+  return [value, set]
+}
+
 export function useRegistryVersion(): number {
   const subscribe = (f: () => void) => {
     const a = blockEditors.subscribe(f)
diff --git a/src/ui/styles.css b/src/ui/styles.css
index bfb939f..d44aa82 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -67,7 +67,7 @@ button:disabled { opacity: .35; cursor: default; }
 .cms-outline__type { font-weight: 600; }
 .cms-outline__text { color: #8b8fa0; overflow: hidden; text-overflow: ellipsis; }
 
-.cms-dev { right: 12px; top: 12px; bottom: 70px; width: 420px; display: flex; flex-direction: column; overflow: hidden; }
+.cms-dev { right: 12px; top: 12px; bottom: 70px; width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; }
 .cms-dev header { justify-content: flex-start; gap: 4px; }
 .cms-dev header button:not(.cms-ico) { background: none; border: 0; padding: 4px 10px; border-radius: 6px; text-transform: capitalize; }
 .cms-dev header button.is-on { background: #2b3350; }
@@ -226,7 +226,7 @@ input.cms-map__key { padding-top: 6px; }
 .cms-attrchip:hover { background: #1f3a2e; }
 
 /* left panel: outline + blocks + nodes, one scroll (no tabs) */
-.cms-rail { pointer-events: auto; position: fixed; z-index: 2147483001; left: 12px; top: 12px; bottom: 76px; width: 320px; display: flex; flex-direction: column; overflow: hidden; background: var(--cms-panel); border: 1px solid var(--cms-line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
+.cms-rail { pointer-events: auto; position: fixed; z-index: 2147483001; left: 12px; top: 12px; bottom: 76px; width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; background: var(--cms-panel); border: 1px solid var(--cms-line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
 .cms-rail > header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--cms-line); font-weight: 600; }
 .cms-rail__title { display: inline-flex; align-items: center; gap: 8px; }
 .cms-rail__body { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 12px; }
@@ -324,7 +324,10 @@ details[open] > summary > .cms-chev { transform: rotate(90deg); }
 .cms-ai__actions { display: flex; justify-content: flex-end; gap: 8px; }
 
 /* AI assistant panel */
-.cms-assistant { right: 12px; top: 12px; bottom: 70px; width: 380px; display: flex; flex-direction: column; overflow: hidden; }
+.cms-assistant { right: 12px; top: 12px; bottom: 70px; width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; }
+/* dev and assistant share the right edge: sit side by side instead of stacking */
+.cms-assistant--shifted { right: 444px; }
+@media (max-width: 900px) { .cms-assistant--shifted { right: 12px; } }
 .cms-assistant > header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--cms-line, #2a2d3a); font-weight: 600; }
 .cms-chat { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
 .cms-msg { max-width: 92%; padding: 6px 10px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; background: #1d2029; }
diff --git a/test/harness.ts b/test/harness.ts
index 7417a90..97591cd 100644
--- a/test/harness.ts
+++ b/test/harness.ts
@@ -20,7 +20,10 @@ export interface Harness {
 }
 
 /** `stale`: the DOM is the *published* page, and the store has moved on since (the base-page problem). */
-export async function setup(opts: { token?: string; auth?: boolean; stale?: boolean; noPreviewApi?: boolean } = {}): Promise<Harness> {
+export async function setup(opts: { token?: string; auth?: boolean; stale?: boolean; noPreviewApi?: boolean; keepStorage?: boolean } = {}): Promise<Harness> {
+  // Fresh profile by default: remembered panel state must not leak between tests.
+  // Pass keepStorage to simulate a reload with the same profile.
+  if (!opts.keepStorage) localStorage.clear()
   const cms = createMockCms({ token: opts.token, auth: opts.auth })
   document.head.innerHTML = ''
   window.open = () => null
diff --git a/test/rail-sections.test.tsx b/test/rail-sections.test.tsx
new file mode 100644
index 0000000..f6837a1
--- /dev/null
+++ b/test/rail-sections.test.tsx
@@ -0,0 +1,74 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { act } from 'react'
+import { setup } from './harness'
+import type { Harness } from './harness'
+
+let h: Harness
+beforeEach(() => localStorage.clear())
+afterEach(() => {
+  h?.cleanup()
+  delete (navigator as any).gpu
+})
+
+const q = (sel: string) => h.shadow.querySelector<HTMLElement>(sel)!
+const qa = (sel: string) => [...h.shadow.querySelectorAll<HTMLElement>(sel)]
+
+describe('rail sections', () => {
+  it('outline, blocks and nodes collapse via their headers', async () => {
+    h = await setup()
+    await h.settle()
+    await h.press('Panel')
+    await h.settle()
+    await h.settle()
+    expect(qa('.cms-outline').length).toBeGreaterThan(0)
+    // collapse outline: the tree leaves the DOM, palette stays
+    // (NB: the section itself shares the aria-label, so target the toggle button)
+    await act(async () => void q('button[aria-label="Outline"]').click())
+    await h.settle()
+    expect(qa('.cms-outline').length).toBe(0)
+    expect(q('[aria-label="Search blocks"]')).not.toBeNull()
+    // collapse blocks too
+    await act(async () => void q('button[aria-label="Blocks"]').click())
+    await h.settle()
+    expect(h.shadow.querySelector('[aria-label="Search blocks"]')).toBeNull()
+    // and back open
+    await act(async () => void q('button[aria-label="Blocks"]').click())
+    await h.settle()
+    expect(q('[aria-label="Search blocks"]')).not.toBeNull()
+    await act(async () => void q('button[aria-label="Outline"]').click())
+    await h.settle()
+    expect(qa('.cms-outline').length).toBeGreaterThan(0)
+  })
+
+  it('rail open state and collapsed sections survive a reload', async () => {
+    h = await setup()
+    await h.settle()
+    await h.press('Panel')
+    await h.settle()
+    await act(async () => void q('button[aria-label="Blocks"]').click()) // collapse blocks
+    await h.settle()
+    expect(localStorage.getItem('cms-onpage.rail')).toBe('true')
+    expect(localStorage.getItem('cms-onpage.sec.blocks')).toBe('false')
+    // reload with the same profile: rail reopens, blocks stays collapsed
+    h.cleanup()
+    h = await setup({ keepStorage: true })
+    await h.settle()
+    await h.settle()
+    expect(q('.cms-rail')).not.toBeNull()
+    expect(h.shadow.querySelector('[aria-label="Search blocks"]')).toBeNull()
+    expect(qa('.cms-outline').length).toBeGreaterThan(0)
+  })
+
+  it('assistant sits beside the dev panel instead of stacking under it', async () => {
+    ;(navigator as any).gpu = {} // aiSupported() checks for a WebGPU API
+    h = await setup()
+    await h.settle()
+    await act(async () => void h.editor.ctrl.store.set({ assistant: true, dev: true }))
+    await h.settle()
+    expect(q('.cms-dev')).not.toBeNull()
+    expect(q('.cms-assistant.cms-assistant--shifted')).not.toBeNull()
+    await act(async () => void h.editor.ctrl.store.set({ dev: false }))
+    await h.settle()
+    expect(h.shadow.querySelector('.cms-assistant--shifted')).toBeNull()
+  })
+})
diff --git a/test/setup.ts b/test/setup.ts
index 5b0fbe8..2362a35 100644
--- a/test/setup.ts
+++ b/test/setup.ts
@@ -1,5 +1,21 @@
 // jsdom has no layout: give the few APIs the editor touches harmless defaults.
 if (!('scrollIntoView' in Element.prototype)) (Element.prototype as any).scrollIntoView = () => {}
+
+// This jsdom runs origin-less, so there is no localStorage: provide an
+// in-memory one so UI persistence (rail/panel state) behaves like a browser.
+if (typeof (globalThis as any).localStorage === 'undefined') {
+  const store = new Map<string, string>()
+  ;(globalThis as any).localStorage = {
+    getItem: (k: string) => (store.has(k) ? store.get(k)! : null),
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+    key: (i: number) => [...store.keys()][i] ?? null,
+    get length() {
+      return store.size
+    },
+  }
+}
 ;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
 
 // Store updates arrive from fetch/timers outside act(); the harness settles them explicitly.