Data-Wise · Data-Wise · Feb 26, 2026 · Feb 25, 2026 · Feb 25, 2026 · Feb 25, 2026
diff --git a/.STATUS b/.STATUS
@@ -1,17 +1,17 @@
 ---
 status: active
 priority: P1
-version: 1.21.0
+version: 1.22.0
 sprint: 38
 started: 2026-01-08
-updated: 2026-02-25
+updated: 2026-02-26
 released: 2026-02-25
 editor: hybrid-markdown++
-next_focus: Fix 67 test file TypeScript errors
-tests: 2280
-unit_tests: 2280
+next_focus: Release v1.22.0 (responsive UI merged to dev)
+tests: 2322
+unit_tests: 2322
 e2e_tests: 109
-test_file_errors: 67 (non-blocking, documented in docs/planning/TEST-FILE-TYPESCRIPT-ERRORS-2026-01-24.md)
+test_file_errors: 0 (resolved)
 tags:
   - adhd-friendly
   - distraction-free
@@ -24,12 +24,15 @@ tags:
 
 > ADHD-friendly distraction-free writer with projects, academic features, and CLI-based AI.
 
-## Current Focus (Sprint 37)
+## Current Focus (Sprint 38)
+
+### In Progress
+
+1. **Release v1.22.0** — Responsive UI merged to dev. Pending: manual macOS testing (Stage Manager, split-screen, Sequoia snap zones), then release PR to main.
 
 ### Next Up
 
-1. **Fix 67 test file TypeScript errors** (~2.5h) — Non-blocking but noisy. Documented in `docs/planning/TEST-FILE-TYPESCRIPT-ERRORS-2026-01-24.md`
-2. **v1.17.0 Three-Tab Sidebar System** (~20h) — Add Explorer tree tab alongside Compact/Card. Spec approved: `docs/specs/SPEC-three-tab-sidebar-2026-01-10.md`
+1. **v1.17.0 Three-Tab Sidebar System** (~20h) — Add Explorer tree tab alongside Compact/Card. Spec approved: `docs/specs/SPEC-three-tab-sidebar-2026-01-10.md`
 
 ### Active Backlog
 
@@ -45,6 +48,24 @@ tags:
 
 ## Recently Completed
 
+### Responsive UI Enhancements (2026-02-25) — feature/responsive-ui
+
+- Minimum window size (350×350), supports macOS 4-pane tiling, window position memory (tauri-plugin-window-state)
+- Auto-collapse sidebars on resize (useResponsiveLayout hook, 500px editor minimum)
+- Right sidebar ResizeHandle + width constants (250–600px range)
+- Global zoom ⌘+/⌘- (50%–200%), zoom indicator in editor header
+- Touch resize support, .resizing class during drag, reduced-motion audit
+- 46 new tests (2,326 total)
+
+### v1.21.0 (2026-02-25) — Quarto Code Chunk Styling (Released)
+
+- VS Code-style code chunk visual treatment (background, accent border, language badges)
+- Supports all three Quarto fence syntaxes: `{r}`, `{{r}}`, `{.r}`
+- CodeMirror ViewPlugin with LanguageBadgeWidget for 15+ languages
+- 4 documentation screenshots captured and embedded
+- Merged PR #51, released v1.21.0, Homebrew cask auto-updated
+- 2,280 tests passing
+
 ### Session Timer Removal (2026-02-24) — PR #48
 
 - Removed legacy session timer from breadcrumb bar (⏸/▶/↺ controls)
@@ -139,6 +160,7 @@ tags:
 
 | Spec | Status | Target |
 |------|--------|--------|
+| Responsive UI | Feature Complete | v1.22.0 |
 | Pomodoro Timer | Released | v1.19.0 |
 | Settings Improvements | In Progress | v1.20.0 |
 | Three-Tab Sidebar | Design Approved | v1.17.0 |

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -19,7 +19,42 @@
       "Bash(git worktree:*)",
       "Bash(pkill:*)",
       "Bash(xargs kill:*)",
-      "Bash(tee:*)"
+      "Bash(tee:*)",
+      "mcp__Claude_Preview__preview_start",
+      "mcp__plugin_playwright_playwright__browser_navigate",
+      "mcp__plugin_playwright_playwright__browser_click",
+      "mcp__plugin_playwright_playwright__browser_close",
+      "Bash(git rm:*)",
+      "Bash(cargo generate-lockfile:*)",
+      "Bash(gh run list:*)",
+      "Bash(gh release create:*)",
+      "Bash(brew list:*)",
+      "Bash(mdfind:*)",
+      "Bash(mdls:*)",
+      "Bash(defaults read:*)",
+      "Bash(brew info:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(git -C /Users/dt/projects/dev-tools/scribe worktree list)",
+      "Bash(git -C /Users/dt/projects/dev-tools/scribe worktree add:*)",
+      "Bash(git -C /Users/dt/projects/dev-tools/scribe diff --stat)",
+      "Bash(git -C /Users/dt/projects/dev-tools/scribe diff src/renderer/src/lib/browser-api.ts src/renderer/src/lib/api.ts src/renderer/src/main.tsx)",
+      "Bash(git -C /Users/dt/projects/dev-tools/scribe log --oneline -3)",
+      "Bash(git -C /Users/dt/.git-worktrees/scribe/ai-integration diff --stat dev)",
+      "Bash(git -C /Users/dt/.git-worktrees/scribe/latex-v2 diff --stat dev)",
+      "Bash(git -C /Users/dt/.git-worktrees/scribe/quarto-v115 diff --stat dev)",
+      "Bash(git -C /Users/dt/.git-worktrees/scribe/dazzling-hoover diff --stat dev)",
+      "Bash(for f in \"src/renderer/src/store/__tests__/useAppViewStore.test.ts\" \"src/renderer/src/utils/deduplication.ts\" \"src/renderer/src/__tests__/deduplication.test.ts\" \"src/renderer/src/hooks/useSystemTheme.ts\" \"src/renderer/src/__tests__/useSystemTheme.test.ts\" \"src/renderer/src/store/useHistoryStore.ts\" \"src/renderer/src/components/Skeleton.tsx\" \"src/renderer/src/components/ErrorBoundary.tsx\" \"src/renderer/src/lib/logger.ts\" \"src/renderer/src/lib/quarto-completions.ts\" \"src/renderer/src/__tests__/QuartoCompletions.test.ts\" \"src/renderer/src/__tests__/QuartoCompletions.edge.test.ts\" \"src/renderer/src/__tests__/sanitize.test.ts\")",
+      "Bash(do)",
+      "Bash(if [ -f \"/Users/dt/projects/dev-tools/scribe/$f\" ])",
+      "Bash(then)",
+      "Bash(else)",
+      "Bash(fi)",
+      "Bash(done)",
+      "Bash(node -e:*)",
+      "Bash(mkdocs gh-deploy:*)",
+      "Bash(mkdocs build:*)",
+      "WebFetch(domain:quarto.org)",
+      "WebFetch(domain:raw.githubusercontent.com)"
     ]
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [v1.22.0] - 2026-02-25 — Responsive UI Enhancements
+
+### Added
+
+- **Minimum window size** — Enforced 350×350px minimum via `tauri.conf.json`, supporting macOS 4-pane tiling and all Sequoia snap zones.
+- **Window position memory** — `tauri-plugin-window-state` persists window size, position, and maximized state across restarts.
+- **Auto-collapse sidebars** — `useResponsiveLayout` hook auto-collapses sidebars when editor space drops below 500px. Right sidebar collapses first, then left (cascading in one pass). Re-expands when window grows. Respects user overrides. Triple resize detection: DOM `window.resize` + `ResizeObserver` + Tauri `onResized()` for reliable macOS tiling.
+- **Right sidebar resize handle** — Replaced inline mouse handler with shared `ResizeHandle` component for consistent behavior, ARIA attributes, and double-click-to-reset.
+- **Right sidebar width constants** — `RIGHT_SIDEBAR_WIDTHS` (min: 250, default: 320, max: 600) exported from store.
+- **Global zoom** — `useGlobalZoom` hook with ⌘+/⌘- shortcuts (50%–200% range, 10% steps). Persists to localStorage, applies via root font-size scaling. WCAG 1.4.4 compliant.
+- **Zoom indicator** — Appears in editor header when zoom ≠ 100%, click to reset.
+- **Touch resize support** — `ResizeHandle` now handles `touchstart`/`touchmove`/`touchend` events for trackpad and touch-screen resizing.
+- **`.resizing` class** — Applied to sidebar parents during drag, disabling CSS transitions for instant resize feedback.
+- **46 new tests** — ResponsiveFoundation (9), useResponsiveLayout (12), RightSidebarResize (6), useGlobalZoom (11), ResizeHandleTouch (8). Total: 2,326.
+
+### Changed
+
+- **Hidden title** — `hiddenTitle: true` removes redundant title bar text (breadcrumb serves this purpose).
+- **CSS transitions** — Right sidebar now has width transition matching left sidebar's 200ms cubic-bezier easing.
+- **Reduced-motion audit** — All new transitions (right sidebar, zoom indicator) covered by `prefers-reduced-motion: reduce`.
+- **ResizeHandle refactor** — `startX` changed from `useState` to `useRef` to fix stale closure bugs in touch handlers. Added `onDragStateChange` callback.
+
+---
+
 ## [v1.21.0] - 2026-02-25 — Quarto Code Chunk Styling
 
 ### Added

diff --git a/README.md b/README.md
@@ -3,9 +3,9 @@
 > **ADHD-Friendly Distraction-Free Writer**
 
 [![Status](https://img.shields.io/badge/status-active-brightgreen)]()
-[![Version](https://img.shields.io/badge/version-1.20.0-blue)]()
+[![Version](https://img.shields.io/badge/version-1.22.0-blue)]()
 [![Progress](https://img.shields.io/badge/progress-100%25-brightgreen)]()
-[![Tests](https://img.shields.io/badge/tests-2280%20passing-brightgreen)]()
+[![Tests](https://img.shields.io/badge/tests-2326%20passing-brightgreen)]()
 [![Tauri](https://img.shields.io/badge/tauri-2-blue)]()
 [![React](https://img.shields.io/badge/react-18-blue)]()
 
@@ -38,6 +38,8 @@ Scribe is a **distraction-free writing app** designed for academics and research
 | **CLI** | Terminal access via `scribe` command |
 | **Command Palette** | ⌘K quick actions |
 | **Global Hotkey** | ⌘⇧N opens from anywhere |
+| **Global Zoom** | ⌘+/⌘- zoom (50%–200%), WCAG 1.4.4 compliant |
+| **Responsive UI** | Auto-collapse sidebars, window position memory, right sidebar resize |
 
 ---
 
@@ -95,6 +97,8 @@ npm run build
 | **⌘⌥1-9** | Quick Actions (v1.9.0+) |
 | **⌘Alt+0-9** | Switch themes |
 | **⌘+Click** | Navigate WikiLink (Source mode) |
+| **⌘+** | Zoom in (10%) |
+| **⌘-** | Zoom out (10%) |
 
 ---
 
@@ -194,7 +198,7 @@ Theme picker, ADHD-friendly font recommendations, and typography controls.
 # Development
 npm run dev          # Start Tauri dev server
 npm run dev:vite     # Vite frontend only
-npm run test         # Run 2,255 tests
+npm run test         # Run 2,326 tests
 npm run lint         # Lint code
 
 # Build
@@ -241,9 +245,9 @@ scribe/
 
 ## Test Coverage
 
-**2,280 tests passing** across test files:
+**2,326 tests passing** across test files:
 
-76 test files with 2,280+ tests (Vitest + Testing Library + happy-dom).
+81 test files with 2,326 tests (Vitest + Testing Library + happy-dom).
 
 ---
 

diff --git a/docs/API.md b/docs/API.md
@@ -1,6 +1,6 @@
 # Scribe API Reference
 
-> Complete reference for Scribe's Tauri IPC commands (v1.20.0)
+> Complete reference for Scribe's Tauri IPC commands (v1.22.0)
 
 ---
 

diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
@@ -162,6 +162,61 @@ A husky `pre-commit` hook prevents accidental commits of `ORCHESTRATE-*.md` plan
 
 ---
 
+## Responsive Layout System
+
+The responsive layout system ensures the editor maintains a usable width (500px minimum) across all window sizes, including macOS Stage Manager, split-screen, Sequoia snap zones, and 4-pane tiling. Uses triple resize detection (DOM `window.resize` + `ResizeObserver` + Tauri `onResized()`) and a ref-based pattern to avoid React re-render loops.
+
+```mermaid
+flowchart TD
+    WR[Window Resize Event] -->|debounce 150ms| URL[useResponsiveLayout hook]
+    URL -->|calculate| EW["editorWidth = windowWidth - leftPx - rightPx"]
+    EW -->|< 500px| COLLAPSE{Collapse Priority}
+    COLLAPSE -->|1st| CR[Collapse Right Sidebar → 48px]
+    COLLAPSE -->|2nd| CL[Collapse Left Sidebar → 48px]
+    EW -->|≥ 500px| EXPAND[Re-expand auto-collapsed sidebars]
+    EXPAND -->|check| UO{User Override?}
+    UO -->|yes| SKIP[Skip — user controls this sidebar]
+    UO -->|no| RE[Restore to previous width]
+
+    KS["⌘+/⌘- Keyboard Events"] --> GZ[useGlobalZoom hook]
+    GZ -->|apply| FS["document.documentElement.style.fontSize"]
+    GZ -->|persist| LS["localStorage: scribe:zoomLevel"]
+
+    DRAG[ResizeHandle Drag] -->|deltaX| RW[Update rightSidebarWidth]
+    RW -->|persist| LS2["localStorage: rightSidebarWidth"]
+    DRAG -->|onDragStateChange| RC[".resizing CSS class"]
+```
+
+### Key Constants
+
+| Constant | Value | Source |
+|----------|-------|--------|
+| `MIN_EDITOR_WIDTH` | 500px | `useResponsiveLayout.ts` |
+| `RIGHT_SIDEBAR_WIDTHS.icon` | 48px | `useAppViewStore.ts` |
+| `RIGHT_SIDEBAR_WIDTHS.expanded.default` | 320px | `useAppViewStore.ts` |
+| `RIGHT_SIDEBAR_WIDTHS.expanded.min` | 250px | `useAppViewStore.ts` |
+| `RIGHT_SIDEBAR_WIDTHS.expanded.max` | 600px | `useAppViewStore.ts` |
+| Zoom range | 0.5–2.0 (10% steps) | `useGlobalZoom.ts` |
+| Resize debounce | 150ms | `useResponsiveLayout.ts` |
+| Min window size | 350×350 | `tauri.conf.json` |
+
+### User Intent Tracking
+
+The auto-collapse system tracks whether *it* collapsed a sidebar vs. the user manually toggling it. This prevents the system from fighting user intent:
+
+1. **System collapses right sidebar** → `autoCollapsedRight = true`
+2. **User manually re-expands** → `userOverrideRight = true` (system stops managing)
+3. **Window grows significantly** → user override resets, system can manage again
+
+### localStorage Keys (Responsive UI)
+
+| Key | Type | Default | Purpose |
+|-----|------|---------|---------|
+| `scribe:zoomLevel` | float | 1.0 | Global zoom factor |
+| `rightSidebarWidth` | number | 320 | Right sidebar pixel width |
+
+---
+
 ## Data Flow
 
 ```mermaid
@@ -286,6 +341,8 @@ scribe/
 │           │
 │           ├── hooks/
 │           │   ├── usePreferences.ts
+│           │   ├── useResponsiveLayout.ts  # Auto-collapse sidebars on resize
+│           │   ├── useGlobalZoom.ts         # ⌘+/⌘- zoom (0.5–2.0)
 │           │   ├── useIconGlowEffect.ts
 │           │   └── useForestTheme.ts
 │           │
@@ -307,7 +364,7 @@ scribe/
 │           │   ├── usePomodoroStore.ts
 │           │   └── useSettingsStore.ts
 │           │
-│           └── __tests__/            # 76 test files, 2280+ tests
+│           └── __tests__/            # 81 test files, 2326 tests
 │
 ├── src-tauri/
 │   └── src/