test(renderer): phase 5 integration smoke test

- Renders tabs from useFileStore.openTabs with title + dirty dot + close button
- Uses Zustand selectors for granular re-renders
- Active tab highlighted with aria-current and accent background
- Close button stops propagation; does not trigger tab activation
- Horizontal scroll on overflow, h-9 fixed bar with border
- Empty state preserved when no tabs open

Tests: 6 cases (empty, render, highlight, click-switch, click-close, dirty indicator)
- 75 total tests (was 70, gained 5 new)
- All pass
- Build: succeeds

Amit Haridas

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/renderer/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

docs/superpowers/specs/2026-06-05-react-ui-redesign-design.md

@@ -0,0 +1,361 @@
+# MarkdownConverter — React + shadcn/ui UI Redesign
+
+**Date:** 2026-06-05
+**Status:** Design (awaiting user approval)
+**Branch:** `react-electron`
+**Author:** Brainstormed with user via superpowers:brainstorming
+
+## Summary
+
+Replace the legacy vanilla JS renderer (`src/renderer.js` is 213 KB; `src/styles.css` is 74 KB) with a modern React 19 + Vite + TypeScript + shadcn/ui renderer that achieves visual feature parity while delivering a Polished + Glassy (Raycast/Arc-style) aesthetic. The Electron main process, preload bridge, and IPC contracts stay unchanged. Work proceeds via vertical slices — each PR ships a demoable feature.
+
+## Goals
+
+1. Replace every render-time feature of the legacy renderer with an idiomatic React + shadcn/ui implementation.
+2. Adopt the "Polished + Glassy" visual language (subtle shadows, 8–12 px radii, gradient accents, gentle depth) on top of the existing ConcreteInfo brand tokens and design system.
+3. Use a single component foundation (shadcn/ui) and a single motion library (Motion / Framer Motion) to keep the dependency surface narrow and the design coherent.
+4. Keep the main process, preload, and IPC contracts untouched. The renderer is the only surface being rewritten.
+5. Keep the app runnable at every commit. No "big bang" merge.
+
+## Non-Goals
+
+- Migrating the main process to TypeScript (out of scope for this spec).
+- Adding new features the legacy renderer does not have (plugin system, AI features, etc. — those are future specs).
+- Replacing Pandoc/FFmpeg/ImageMagick orchestration.
+- Changing the packaging pipeline (electron-builder config stays).
+- Replacing the CodeMirror 6 editor — it is the right tool and is already wired up.
+
+## Decisions Locked During Brainstorming
+
+| Decision | Choice | Why |
+|---|---|---|
+| Scope | Full feature parity with legacy renderer | User-selected option. Renderer is one cohesive surface; splitting it across specs would force premature contracts. |
+| Visual style | **B — Polished + Glassy** (Raycast/Arc aesthetic) | "Fancy" comes from elevation, gradient accents, and material depth — not over-designed visuals. |
+| Layout | **2 — IDE-style** (equal editor/preview, draggable divider, collapsible sidebar) | Power-user markdown apps converge on this. Draggable divider + keyboard reset. |
+| Modal patterns | **A (Centered Dialog), B (Right Side-Sheet), D (Toasts)** | No command palette. |
+| Command palette | **No** — full menus, no ⌘K | Power users can use the OS-level launcher. App stays focused on writing. |
+| Animation | **Motion (Framer Motion)** | Best for layout transitions, modal/drawer enter/exit, drag. Sparingly used. |
+| Component library | **shadcn/ui** | Tailwind + Radix primitives, copy-paste ownership, perfect fit for the "glassy" aesthetic and the HSL-CSS-variable foundation that is already in place. |
+| Implementation strategy | **Vertical slices** — one feature end-to-end per PR | App stays runnable. Each PR is reviewable. |
+
+## Defaults (Used Unless Overridden Later)
+
+| Item | Default | Why |
+|---|---|---|
+| State management | Zustand (already in deps) + Immer for nested patches | Already in `package.json`; perfect for editor state. |
+| Theming | shadcn `next-themes`, dark default + light, system-aware | shadcn canonical pattern. Brand colors already in CSS vars. |
+| Icons | `lucide-react` (already in deps) | 1000+ tree-shakable icons. |
+| Forms | `react-hook-form` + `zod` | Standard for shadcn forms. |
+| Drag/drop (sortable lists) | `@dnd-kit/core` | De facto React drag lib (file tree reordering, plugin list reorder). |
+| Pane resize (split layout) | `react-resizable-panels` | Canonical React lib for resizable pane groups; handles drag, arrow keys, snap, persisted sizes. |
+| Testing | Vitest + RTL + Playwright (E2E + visual regression) | Standard for React + Electron. |
+| TypeScript | Strict mode (already wired) | Already in deps and `vite.renderer.config.ts`. |
+
+## Architecture
+
+The Electron app keeps its existing process model. Only the renderer is rewritten.
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  Electron Main (UNCHANGED)                                │
+│  - BrowserWindow, IPC handlers, file/fs ops               │
+│  - Pandoc, FFmpeg, ImageMagick orchestration              │
+└────────────┬─────────────────────────────────────────────┘
+             │ contextBridge (UNCHANGED preload.js)
+┌────────────▼─────────────────────────────────────────────┐
+│  React Renderer (REWRITTEN)                                │
+│  ┌────────────────────────────────────────────────────┐  │
+│  │  AppShell (layout)                                  │  │
+│  │  ├─ MenuBar (native)                                │  │
+│  │  ├─ AppHeader (logo, breadcrumbs, theme toggle)     │  │
+│  │  ├─ TabBar (open files)                             │  │
+│  │  ├─ Toolbar (formatting)                            │  │
+│  │  ├─ ResizablePaneGroup (sidebar | editor | preview) │  │
+│  │  │   ├─ Sidebar (file tree, outline)                │  │
+│  │  │   ├─ EditorPane (CodeMirror 6)                   │  │
+│  │  │   └─ PreviewPane (marked + KaTeX + Mermaid)      │  │
+│  │  ├─ StatusBar (word count, encoding, cursor pos)    │  │
+│  │  └─ ModalLayer (Dialog, SideSheet, Toaster)         │  │
+│  └────────────────────────────────────────────────────┘  │
+│  ┌────────────────────────────────────────────────────┐  │
+│  │  Feature Modules (each owns UI + state slice)       │  │
+│  │  ├─ editor/    CodeMirror wrapper, syntax, themes   │  │
+│  │  ├─ preview/   markdown→html, KaTeX, Mermaid       │  │
+│  │  ├─ tabs/      open files, dirty state              │  │
+│  │  ├─ sidebar/   file tree, outline, search results   │  │
+│  │  ├─ modals/    export, settings, about, etc.        │  │
+│  │  ├─ tools/     zen, repl, ascii-gen, table-gen      │  │
+│  │  └─ export/    pdf, docx, html, image batch         │  │
+│  └────────────────────────────────────────────────────┘  │
+│  ┌────────────────────────────────────────────────────┐  │
+│  │  Shared Infrastructure                              │  │
+│  │  ├─ stores/  Zustand slices per feature             │  │
+│  │  ├─ hooks/   useFile, useEditor, useTheme, etc.     │  │
+│  │  ├─ lib/     cn, ipc, formatters, validators        │  │
+│  │  ├─ ui/      shadcn primitives: button, dialog…     │  │
+│  │  └─ types/   shared TS types                        │  │
+│  └────────────────────────────────────────────────────┘  │
+└──────────────────────────────────────────────────────────┘
+```
+
+### Architectural Rules
+
+- **Shell components** (`AppHeader`, `TabBar`, `StatusBar`) subscribe only to `useAppStore`.
+- **Feature components** subscribe to their own feature's store.
+- **Cross-feature access** goes through hooks, not direct store imports (e.g., `useFileTree()` wraps `useFileStore`).
+- **Feature modules are self-contained** — each owns its components, its Zustand slice, and its types. Safe to develop in parallel later.
+- **No direct `window.electronAPI` calls** from feature code. All IPC goes through `lib/ipc.ts` for type safety and error normalization.
+
+## State Management
+
+```
+stores/
+├─ useAppStore        // global UI: theme, sidebar, pane sizes, modals open
+├─ useFileStore       // file system: tree, open files, active tab
+├─ useEditorStore     // editor: per-file content, cursor, selection, dirty
+├─ usePreviewStore    // preview: scroll sync, zoom, theme
+├─ useSettingsStore   // user prefs (persisted to electron-store)
+└─ useCommandStore    // menu actions registry, recent actions
+```
+
+**Why slices instead of one mega-store?** Editor content can be megabytes. Keeping it in its own slice lets React avoid re-rendering the preview when only the editor changes — components subscribe with selectors.
+
+**Persistent state** (auto-saved to electron-store via Zustand `persist` middleware): theme, sidebar visibility, last open files, pane divider positions, settings.
+
+**Ephemeral state** (lost on quit): active modal, hover states, search query, current file content (saved to disk on idle).
+
+## Visual Design System
+
+### Color Tokens
+
+The existing `globals.css` HSL variables stay. Additions for the "glassy" aesthetic:
+
+```css
+--shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
+--shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
+--shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
+--shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
+
+--glass-bg-light: rgba(255, 255, 255, 0.72);
+--glass-bg-dark:  rgba(13, 11, 9, 0.72);
+--glass-border-light: rgba(255, 255, 255, 0.4);
+--glass-border-dark:  rgba(255, 255, 255, 0.08);
+```
+
+### shadcn Components
+
+Install via `npx shadcn@latest add`:
+
+**Primitives** (need all of these): `button`, `dialog`, `sheet`, `popover`, `tooltip`, `select`, `dropdown-menu`, `tabs`, `separator`, `scroll-area`, `toggle`, `switch`, `slider`, `input`, `textarea`, `label`, `form`, `skeleton`, `sonner`, `command`.
+
+**Composite** (custom-built on top of primitives): `file-tree`, `pane-group`, `divider`, `status-bar`, `menu-bar`, `toast`.
+
+### Typography
+
+- Body: Plus Jakarta Sans 15 px / line-height 1.6
+- Code: JetBrains Mono 13.5 px
+- Display: Barlow Condensed 700/800 — used sparingly (page titles, big metrics)
+- Headings: Plus Jakarta Sans 600/700 with tight letter-spacing
+- Labels (`.label`): Plus Jakarta Sans 500, 12 px, uppercase, 0.05 em letter-spacing
+
+### Motion Choreography
+
+| Element | Motion | Duration | Easing |
+|---|---|---|---|
+| Modal (Dialog A) | Scale 0.96→1, opacity 0→1 | 200 ms | `ease-out` |
+| Side sheet (B) | TranslateX 100%→0, opacity 0→1 | 300 ms | `cubic-bezier(0.16, 1, 0.3, 1)` |
+| Toast | TranslateY 100%→0, opacity | 250 ms | spring(stiffness: 300, damping: 30) |
+| Sidebar toggle | Width 264 px↔72 px, content fade | 250 ms | `ease-in-out` |
+| Divider drag | Live width update | 0 ms | none (instant) |
+| Theme switch | CSS variables, opacity overlay | 300 ms | `ease-in-out` |
+| Tab switch | Underline slide | 200 ms | `ease-out` |
+| Hover (buttons) | `bg` + `shadow` shift | 150 ms | `ease-out` |
+| Focus ring | Outline grow | 100 ms | `ease-out` |
+
+**Rules:** Every motion has a purpose. No gratuitous animation. Respects `prefers-reduced-motion` (Motion handles this automatically).
+
+### Empty / Loading / Error States
+
+Every async surface ships all three. Sonner toasts for ephemeral feedback. Skeleton screens for content areas. Empty-state components with icon + message + primary CTA.
+
+## Modal/Overlay Patterns
+
+| Use case | Pattern | Why |
+|---|---|---|
+| Export (PDF/DOCX/HTML) | A — Centered Dialog | Focused decision, ~3–5 fields, "do one thing" |
+| Settings | B — Right Side-Sheet | Long form, tabbed sections, stays open while editing |
+| Find/Replace | Inline toolbar (not modal) | Always-visible utility |
+| About | A — Centered Dialog | Tiny info dump |
+| Confirm destructive (delete, close unsaved) | A — Centered Dialog | Forces attention |
+| File save error | D — Toast | Non-blocking info |
+| Pandoc/FFmpeg progress | D — Toast → sticky on >3 s | Background work feedback |
+| Plugin manager | B — Right Side-Sheet | Lists + per-item actions |
+| ASCII/Table generators | A — Centered Dialog | Tool-style focused input → output |
+| Print preview | A — Centered Dialog | Full-screen-ish modal overlay |
+| Welcome (first launch) | A — Centered Dialog | One-time onboarding |
+| Word export | A — Centered Dialog | Template selection |
+| Zen mode | Full-viewport toggle (no modal) | Replaces the editor entirely |
+| REPL | Bottom-pinned panel (split-pane) | Persistent terminal-like UI |
+| Quick file open | B — Right Side-Sheet | File tree, search, recent |
+
+### Dialog A Anatomy (Export as example)
+
+```
+┌─ Backdrop (rgba(13,11,9,0.45) + backdrop-blur 4px) ─────────┐
+│                                                            │
+│   ┌──── Modal (max-w-md, rounded-2xl, shadow-lg) ─────┐    │
+│   │ ┌── Header ────────────────────────────────────┐  │    │
+│   │ │ [Icon] Export as PDF                  [×]    │  │    │
+│   │ │ Choose format options                       │  │    │
+│   │ └─────────────────────────────────────────────┘  │    │
+│   │ ┌── Body ──────────────────────────────────────┐  │    │
+│   │ │ Format: [Letter] [A4] [Legal]                │  │    │
+│   │ │ Margins: ────●────                           │  │    │
+│   │ │ ☐ Include table of contents                  │  │    │
+│   │ │ ☐ Embed fonts                                │  │    │
+│   │ └─────────────────────────────────────────────┘  │    │
+│   │ ┌── Footer ────────────────────────────────────┐  │    │
+│   │ │                       [Cancel] [Export →]    │  │    │
+│   │ └─────────────────────────────────────────────┘  │    │
+│   └──────────────────────────────────────────────────┘    │
+│                                                            │
+└────────────────────────────────────────────────────────────┘
+```
+
+### Side-Sheet B Anatomy (Settings as example)
+
+Slides in from right, ~50 % width (max 560 px). Backdrop is `rgba(13,11,9,0.2)` with `backdrop-blur(2 px)` (lighter than dialog — the sheet is the focus). Tab navigation in the sheet header (Editor / Theme / Export / Plugins / About).
+
+### Toast D Anatomy (Sonner)
+
+Stacked bottom-right, max 3 visible. Glass background. Color-coded 3 px left border — success `#1a7a56`, error `#ef4444`, info `#0ea5e9`, warning `#eab308`. Icon + title + description. Optional action button. Auto-dismiss 4 s for success, sticky for error.
+
+## Data Flow (Editor → Preview Pipeline)
+
+```
+User types
+  ↓
+CodeMirror onChange
+  ↓
+useEditorStore.updateContent(tabId, content)  ← debounced 50 ms
+  ↓
+┌─ Persist to electron-store on idle (1 s) ─┐
+│                                            │
+└─ Publish to usePreviewStore (subscribed) ─┘
+  ↓
+marked(content) → sanitized HTML
+  ↓
+PreviewPane renders HTML
+  KaTeX post-processes $...$
+  Mermaid post-processes ```mermaid
+  Highlight.js post-processes ```lang
+  ↓
+useEffect: scroll-sync editor cursor → preview position
+```
+
+**Bidirectional scroll sync:** editor scroll → preview (primary), preview click → editor cursor (secondary). Throttled to 60 fps via `requestAnimationFrame`.
+
+## IPC Contract
+
+The preload bridge stays unchanged. A new `src/renderer/lib/ipc.ts` wraps every channel with TypeScript types and normalizes errors to a discriminated union:
+
+```ts
+type IpcResult<T> =
+  | { ok: true; data: T }
+  | { ok: false; error: { code: string; message: string } };
+
+export const ipc = {
+  file: {
+    open: (): Promise<IpcResult<FileResult>>,
+    read: (path: string): Promise<IpcResult<string>>,
+    write: (path: string, content: string): Promise<IpcResult<void>>,
+    list: (dir: string): Promise<IpcResult<FileEntry[]>>,
+    onChange: (cb: (path: string) => void) => () => void,
+  },
+  export: {
+    pdf: (opts: PdfOptions): Promise<IpcResult<ExportResult>>,
+    docx: (opts: DocxOptions): Promise<IpcResult<ExportResult>>,
+    html: (opts: HtmlOptions): Promise<IpcResult<ExportResult>>,
+    batch: (items: BatchItem[], opts: BatchOptions): Promise<IpcResult<BatchResult>>,
+  },
+  app: {
+    getVersion: (): Promise<IpcResult<string>>,
+    openExternal: (url: string): Promise<IpcResult<void>>,
+    showItemInFolder: (path: string): Promise<IpcResult<void>>,
+  },
+};
+```
+
+## Error Handling
+
+Layered defense — no single failure can crash the app:
+
+1. **IPC errors** → caught in `lib/ipc.ts` wrapper, returned as `IpcResult<T>` discriminated union. Components show toast on error.
+2. **Component errors** → React error boundary per feature area (one for editor, one for preview, one for modals). On error: show inline error UI with "Reload this panel" + "Copy details" actions.
+3. **Async operations** (export, file ops) → loading state on button + toast on completion. Long ops (>2 s) get a sticky toast with cancel.
+4. **Validation errors** (settings, export options) → inline form errors via `react-hook-form` + `zod`. shadcn `Form` component for consistent error display.
+5. **Pandoc/FFmpeg missing** → detected at startup, banner + disable export menu items. Don't surprise-fail at export time.
+
+## Testing Strategy
+
+- **Unit (Vitest):** stores, hooks, lib utilities, formatters, validators
+- **Component (Vitest + RTL):** shadcn wrappers, dialog interactions, sidebar toggle, divider drag, theme toggle
+- **Integration (Vitest + RTL):** editor ↔ preview flow, file open → tab add → content display, settings change persists
+- **E2E (Playwright):** app launches, file opens, markdown renders, export to PDF works
+- **Visual regression (Playwright snapshots):** locked-in screenshots for header, sidebar, dialogs, toasts — catch accidental style drift
+- **Target coverage:** stores/hooks/lib ≥ 90 %, components ≥ 75 %, E2E covers all critical paths
+
+## Accessibility (WCAG 2.1 AA)
+
+Baked in via shadcn + Radix:
+
+- All dialogs focus-trap, Esc to close, return focus to trigger
+- All interactive elements keyboard-reachable
+- Visible focus rings (2 px brand ring)
+- 4.5:1 contrast minimum (already met by brand colors)
+- `aria-label` on icon buttons, `role="alert"` on toasts
+- Respects `prefers-reduced-motion` (Motion handles this automatically)
+
+## Implementation Phases (Vertical Slices)
+
+Each phase is a shippable PR that keeps the app runnable. The legacy `renderer.js` is gradually replaced; until each phase is complete, the old renderer code still runs the missing parts.
+
+| # | Phase | Output | Acceptance |
+|---|---|---|---|
+| 1 | **Foundation** | shadcn installed; `next-themes`, `motion`, `react-hook-form`, `zod`, `@dnd-kit/core`, `react-resizable-panels`, `sonner` installed; design tokens finalized; `lib/utils.ts` (`cn`), `lib/ipc.ts` typed wrappers, `lib/motion.ts` preset transitions, `App.tsx` shell skeleton renders | `npm run build` succeeds; dev server shows the new shell with theme toggle working |
+| 2 | **App shell + layout** | `AppHeader`, `TabBar`, `Toolbar`, `Breadcrumb`, `StatusBar`, `ResizablePaneGroup` with sidebar toggle and draggable divider. Empty editor/preview panes. | Resize divider with mouse and arrow keys; sidebar collapses; pane sizes persist. |
+| 3 | **Editor pane** | CodeMirror 6 wrapped, dark/light themes wired to shadcn theme, syntax highlighting, line numbers, search, autocomplete | Open `.md` file → renders in editor; can edit and save. |
+| 4 | **Preview pane** | marked + DOMPurify + KaTeX + Mermaid + highlight.js. Bidirectional scroll sync with editor. | Open file → preview renders, follows cursor. |
+| 5 | **File tree + tabs** | Sidebar file tree (read directory on demand, lazy-expand children only on click). Tabs for open files. Dirty state indicator. File content is read from disk only when the tab is activated. | Open folder → root populates; click folder → children load; click file → opens in tab; close tab reverts dirty. |
+| 6 | **Native menus + toolbar** | Replace the legacy `CommandPalette` with full menus (File / Edit / View / Insert / Format / Tools / Help) bound to keyboard shortcuts. Toolbar buttons. | All menu items invoke the right action; shortcuts work; toolbar reflects active state. |
+| 7 | **Modals** | Export dialog (PDF/DOCX/HTML/batch), Settings side-sheet (Editor/Theme/Export/Plugins/About tabs), About dialog, Confirm-destructive dialog | All dialogs and sheet render with proper motion; settings persist; export works end-to-end. |
+| 8 | **Toasts** | Sonner wired into all async operations (save, export, errors, tool missing) | All operations give appropriate feedback; no silent failures. |
+| 9 | **Advanced tools** | Zen mode (full-viewport toggle), REPL (bottom-pinned panel), ASCII generator, Table generator, Word export template picker, Print preview | Each tool is feature-complete vs. legacy version. |
+| 10 | **Polish + delete legacy** | Visual regression snapshots locked; remove `renderer.js` and old `styles*.css` references from build; `npm run build:linux` produces a working installer | Final PR ships an installer with no legacy code paths. |
+
+## Risks and Mitigations
+
+| Risk | Mitigation |
+|---|---|
+| shadcn CLI requires Vite (not vanilla Electron renderer) | Vite is already configured for the renderer in `vite.renderer.config.ts`; the CLI works against the same project. |
+| shadcn CLI assumes Tailwind is at project root; we have it in renderer/ only | Point the CLI at `src/renderer/components.json` and set `tailwind.css` to the right path. |
+| Marked + KaTeX + Mermaid + highlight.js together is heavy | Lazy-load Mermaid (only when `mermaid` code block encountered). KaTeX is loaded once, cached. |
+| Editor content state can be megabytes → re-render storms | Editor content lives in its own slice; preview subscribes to a derived/cached HTML string; components use `useShallow` / selector subscriptions. |
+| Bidirectional scroll sync loops | `useEffect` debounce + ignore if cursor/selection is the sync source. |
+| CodeMirror 6 doesn't ship a Tailwind theme by default | Use `@codemirror/theme-one-dark` for dark; build a custom theme that pulls from CSS variables for light. |
+| The legacy `renderer.js` and `styles*.css` are referenced from `index.html` (now `src/renderer/index.html`) | Phase 10 deletes the references; until then, both run side-by-side and the new React app sits in a known root div. |
+| Electron `nodeIntegration` is off; we use contextBridge | Already the case. Document the contract clearly in `lib/ipc.ts`. |
+
+## Open Questions (to confirm before implementation)
+
+None. All major decisions are locked. Defaults will be used unless the user overrides them when reviewing the implementation plan.
+
+## References
+
+- `src/renderer.js` (213 KB) — legacy renderer being replaced
+- `src/styles.css` (74 KB), `src/styles-modern.css` (71 KB), `src/styles-concreteinfo.css` (21 KB) — legacy styles being replaced
+- `src/renderer/styles/globals.css` — already shadcn-compatible (HSL CSS variables)
+- `src/renderer/App.tsx` — empty skeleton that references components we will build
+- `tailwind.config.js` — brand colors and fonts already defined
+- `vite.renderer.config.ts` — Vite + React plugin already configured
+- `package.json` — CodeMirror 6, TanStack Table, lucide-react, cva, clsx, tailwind-merge, tailwindcss-animate already installed

package.json

@@ -8,6 +8,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "test:renderer": "vitest run",
+    "test:renderer:watch": "vitest",
+    "test:renderer:coverage": "vitest run --coverage",
     "lint": "eslint src tests",
     "lint:fix": "eslint src tests --fix",
     "format": "prettier --write src tests",
@@ -43,7 +46,19 @@
     "url": "https://github.com/amitwh/markdown-converter"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/ui": "^4.1.8",
+    "autoprefixer": "^10.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cross-env": "^10.0.0",
     "electron": "^41.1.1",
     "electron-builder": "^26.0.12",
@@ -52,8 +67,17 @@
     "eslint-plugin-prettier": "^5.5.4",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^29.1.1",
+    "lucide-react": "^1.17.0",
+    "postcss": "^8.5.15",
     "prettier": "^3.7.4",
-    "sharp": "^0.34.3"
+    "sharp": "^0.34.3",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.1",
@@ -70,6 +94,15 @@
     "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.16",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.4.0",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tanstack/react-table": "^8.21.3",
     "codemirror": "^6.0.2",
     "core-util-is": "^1.0.3",
     "docx": "^9.6.0",
@@ -79,16 +112,26 @@
     "ffmpeg-static": "^5.3.0",
     "highlight.js": "^11.11.1",
     "html2pdf.js": "^0.14.0",
+    "immer": "^11.1.8",
     "marked": "^17.0.3",
     "marked-footnote": "^1.4.0",
     "marked-highlight": "^2.2.3",
     "mermaid": "^11.12.3",
+    "motion": "^12.40.0",
+    "next-themes": "^0.4.6",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^5.5.207",
     "pdfkit": "^0.17.2",
     "pizzip": "^3.2.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.77.0",
+    "react-resizable-panels": "^4.11.2",
     "simple-git": "^3.32.3",
-    "tslib": "^2.8.1"
+    "sonner": "^2.0.7",
+    "tslib": "^2.8.1",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.14"
   },
   "overrides": {
     "jszip": "^3.10.1",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/main.js

@@ -3039,6 +3039,55 @@ ipcMain.on('select-folder', (event, type) => {
   }
 });
 
+// List directory contents as FileEntry[]
+ipcMain.handle('list-directory', async (event, dirPath) => {
+  try {
+    const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+    return entries.map((dirent) => {
+      const fullPath = path.join(dirPath, dirent.name);
+      let size;
+      let modifiedAt;
+      if (!dirent.isDirectory()) {
+        try {
+          const stat = fs.statSync(fullPath);
+          size = stat.size;
+          modifiedAt = stat.mtime.toISOString();
+        } catch {
+          // ignore stat errors
+        }
+      }
+      return {
+        name: dirent.name,
+        path: fullPath,
+        isDirectory: dirent.isDirectory(),
+        size,
+        modifiedAt,
+      };
+    });
+  } catch (err) {
+    return { error: err.message };
+  }
+});
+
+// Show folder picker dialog and return selected path or null
+ipcMain.handle('pick-folder', async () => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory'],
+  });
+  if (result.canceled || result.filePaths.length === 0) return null;
+  return result.filePaths[0];
+});
+
+// Show file picker dialog for markdown files and return selected path or null
+ipcMain.handle('pick-file', async () => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    properties: ['openFile'],
+    filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd'] }],
+  });
+  if (result.canceled || result.filePaths.length === 0) return null;
+  return result.filePaths[0];
+});
+
 ipcMain.on('export-spreadsheet', (event, { content, format }) => {
   const outputFile = dialog.showSaveDialogSync(mainWindow, {
     defaultPath: currentFile.replace(/\.[^/.]+$/, `.${format}`),

src/preload.js

@@ -237,7 +237,12 @@ const ALLOWED_RECEIVE_CHANNELS = [
   'load-template-menu',
   'toggle-command-palette',
   'toggle-sidebar-panel',
-  'toggle-bottom-panel'
+  'toggle-bottom-panel',
+
+  // File dialog / directory listing
+  'list-directory',
+  'pick-folder',
+  'pick-file'
 ];
 
 /**
@@ -344,7 +349,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
     exists: (filePath) => ipcRenderer.invoke('path-exists', filePath),
     isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath),
     copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }),
-    move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination })
+    move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }),
+    list: (dirPath) => ipcRenderer.invoke('list-directory', dirPath),
+    pickFolder: () => ipcRenderer.invoke('pick-folder'),
+    pickFile: () => ipcRenderer.invoke('pick-file')
   },
 
   // Theme Operations

src/renderer/App.tsx

@@ -0,0 +1,7 @@
+import { AppShell } from './components/layout/AppShell';
+
+function App() {
+  return <AppShell />;
+}
+
+export default App;

src/renderer/components/editor/CodeMirrorEditor.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from 'react';
+import { EditorState, Compartment } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from '@codemirror/view';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { useTheme } from 'next-themes';
+import { lightTheme, lightHighlight } from './themes/light';
+import { useEditorStore } from '@/stores/editor-store';
+
+interface Props {
+  bufferId: string;
+  initialContent: string;
+  onChange?: (content: string) => void;
+  onCursorChange?: (line: number, column: number) => void;
+}
+
+export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorChange }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const themeCompartment = useRef(new Compartment());
+  const { resolvedTheme } = useTheme();
+  const updateContent = useEditorStore((s) => s.updateContent);
+  const setCursor = useEditorStore((s) => s.setCursor);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const state = EditorState.create({
+      doc: initialContent,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        history(),
+        drawSelection(),
+        markdown({ base: markdownLanguage, codeLanguages: [] }),
+        autocompletion(),
+        keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap, ...completionKeymap, indentWithTab]),
+        themeCompartment.current.of(resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]),
+        EditorView.lineWrapping,
+        EditorView.updateListener.of((v) => {
+          if (v.docChanged) {
+            const content = v.state.doc.toString();
+            updateContent(bufferId, content);
+            onChange?.(content);
+          }
+          if (v.selectionSet || v.docChanged) {
+            const head = v.state.selection.main.head;
+            const line = v.state.doc.lineAt(head);
+            const lineNo = line.number;
+            const col = head - line.from + 1;
+            setCursor(bufferId, lineNo, col);
+            onCursorChange?.(lineNo, col);
+          }
+        }),
+      ],
+    });
+    const view = new EditorView({ state, parent: ref.current });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bufferId]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: themeCompartment.current.reconfigure(
+        resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]
+      ),
+    });
+  }, [resolvedTheme]);
+
+  return <div ref={ref} className="h-full overflow-hidden" />;
+}

src/renderer/components/editor/EditorPane.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { CodeMirrorEditor } from './CodeMirrorEditor';
+import { useEditorStore } from '@/stores/editor-store';
+import { usePreviewStore } from '@/stores/preview-store';
+
+export function EditorPane() {
+  const { buffers, activeId } = useEditorStore();
+  const buf = activeId ? buffers.get(activeId) : null;
+  const setPreviewSource = usePreviewStore((s) => s.setSource);
+
+  useEffect(() => {
+    if (buf) setPreviewSource(buf.content);
+  }, [buf?.id, buf?.content, buf, setPreviewSource]);
+
+  if (!buf) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background text-muted-foreground">
+        <p>No file open. Use File → Open to start.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full">
+      <CodeMirrorEditor
+        key={buf.id}
+        bufferId={buf.id}
+        initialContent={buf.content}
+      />
+    </div>
+  );
+}

src/renderer/components/editor/themes/light.ts

@@ -0,0 +1,55 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+const colors = {
+  background: '#ffffff',
+  foreground: '#0d0b09',
+  cursor: '#e5461f',
+  selection: 'rgba(229, 70, 31, 0.15)',
+  gutterBackground: '#fafbfc',
+  gutterForeground: '#7a7878',
+  lineHighlight: 'rgba(0, 0, 0, 0.04)',
+};
+
+export const lightTheme = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: colors.background,
+      color: colors.foreground,
+      height: '100%',
+    },
+    '.cm-content': {
+      caretColor: colors.cursor,
+      fontFamily: 'JetBrains Mono, Fira Code, monospace',
+      fontSize: '13.5px',
+    },
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: colors.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+      backgroundColor: colors.selection,
+    },
+    '.cm-gutters': {
+      backgroundColor: colors.gutterBackground,
+      color: colors.gutterForeground,
+      border: 'none',
+    },
+    '.cm-activeLine': { backgroundColor: colors.lineHighlight },
+    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: '#e5461f' },
+  },
+  { dark: false }
+);
+
+const highlightStyle = HighlightStyle.define([
+  { tag: t.heading1, color: '#0d0b09', fontWeight: '700' },
+  { tag: t.heading2, color: '#0d0b09', fontWeight: '700' },
+  { tag: t.heading3, color: '#464646', fontWeight: '600' },
+  { tag: t.link, color: '#e5461f', textDecoration: 'underline' },
+  { tag: t.url, color: '#e5461f' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: '700' },
+  { tag: t.monospace, color: '#c93a18' },
+  { tag: t.list, color: '#0ea5e9' },
+  { tag: t.quote, color: '#7a7878', fontStyle: 'italic' },
+]);
+
+export const lightHighlight = syntaxHighlighting(highlightStyle);

src/renderer/components/layout/AppHeader.tsx

@@ -0,0 +1,41 @@
+import { PanelLeft, PanelRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { useAppStore } from '@/stores/app-store';
+
+export function AppHeader() {
+  const { sidebarVisible, previewVisible, toggleSidebar, togglePreview } = useAppStore();
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-border bg-card/40 px-4 backdrop-blur">
+      <div className="flex items-center gap-3">
+        <div
+          className="h-7 w-7 rounded-md bg-gradient-to-br from-brand to-brand-dark shadow-[var(--shadow-glow-brand)]"
+          aria-label="MarkdownConverter logo"
+        />
+        <h1 className="font-display text-lg font-bold tracking-tight">MarkdownConverter</h1>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Toggle sidebar"
+          aria-pressed={sidebarVisible}
+          onClick={toggleSidebar}
+        >
+          <PanelLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Toggle preview"
+          aria-pressed={previewVisible}
+          onClick={togglePreview}
+        >
+          <PanelRight className="h-4 w-4" />
+        </Button>
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}

src/renderer/components/layout/AppShell.tsx

@@ -0,0 +1,56 @@
+import { AppHeader } from './AppHeader';
+import { TabBar } from './TabBar';
+import { Toolbar } from './Toolbar';
+import { Breadcrumb } from './Breadcrumb';
+import { StatusBar } from './StatusBar';
+import { EditorPane } from '@/components/editor/EditorPane';
+import { PreviewPane } from '@/components/preview/PreviewPane';
+import { Sidebar } from '@/components/sidebar/Sidebar';
+import { useAppStore } from '@/stores/app-store';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
+import { useFileShortcuts } from '@/hooks/use-file-shortcuts';
+import { useRestoreLastFolder } from '@/hooks/use-restore-last-folder';
+
+export function AppShell() {
+  useFileShortcuts();
+  useRestoreLastFolder();
+  const { sidebarVisible, previewVisible, paneSizes, setPaneSizes } = useAppStore();
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <AppHeader />
+      <TabBar />
+      <Toolbar />
+      <Breadcrumb />
+      <main className="flex-1 overflow-hidden">
+        <ResizablePanelGroup
+          direction="horizontal"
+          onLayout={(sizes) => setPaneSizes({ sidebar: sizes[0], editor: sizes[1], preview: sizes[2] })}
+        >
+          {sidebarVisible && (
+            <>
+              <ResizablePanel defaultSize={paneSizes.sidebar} minSize={15} maxSize={40}>
+                <aside className="h-full border-r border-border bg-card/10 p-3 text-sm text-muted-foreground">
+                  <Sidebar />
+                </aside>
+              </ResizablePanel>
+              <ResizableHandle />
+            </>
+          )}
+          <ResizablePanel defaultSize={previewVisible ? paneSizes.editor : 100} minSize={20}>
+            <EditorPane />
+          </ResizablePanel>
+          {previewVisible && (
+            <>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={paneSizes.preview} minSize={20}>
+                <PreviewPane />
+              </ResizablePanel>
+            </>
+          )}
+        </ResizablePanelGroup>
+      </main>
+      <StatusBar />
+    </div>
+  );
+}

src/renderer/components/layout/Breadcrumb.tsx

@@ -0,0 +1,7 @@
+export function Breadcrumb() {
+  return (
+    <nav aria-label="File path" className="flex h-7 items-center border-b border-border bg-card/10 px-3 text-xs text-muted-foreground">
+      <span>No file selected</span>
+    </nav>
+  );
+}

src/renderer/components/layout/StatusBar.tsx

@@ -0,0 +1,25 @@
+import { useEditorStore } from '@/stores/editor-store';
+
+function countWords(text: string): number {
+  return text.trim().length === 0 ? 0 : text.trim().split(/\s+/).length;
+}
+
+export function StatusBar() {
+  const { buffers, activeId } = useEditorStore();
+  const buf = activeId ? buffers.get(activeId) : null;
+  const wordCount = buf ? countWords(buf.content) : 0;
+  const cursor = buf?.cursor ?? { line: 1, column: 1 };
+
+  return (
+    <footer className="flex h-7 items-center justify-between border-t border-border bg-card/20 px-3 text-xs text-muted-foreground">
+      <div className="flex items-center gap-4">
+        <span>{wordCount} words</span>
+        <span>UTF-8</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <span>Ln {cursor.line}, Col {cursor.column}</span>
+        <span>Markdown</span>
+      </div>
+    </footer>
+  );
+}

src/renderer/components/layout/TabBar.tsx

@@ -0,0 +1,127 @@
+import { X } from 'lucide-react';
+import {
+  DndContext,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useFileStore, type OpenTab } from '@/stores/file-store';
+import { cn } from '@/lib/utils';
+
+function SortableTab({
+  tab,
+  isActive,
+  onSelect,
+  onClose,
+}: {
+  tab: OpenTab;
+  isActive: boolean;
+  onSelect: (id: string) => void;
+  onClose: (id: string) => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: tab.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      role="tab"
+      aria-selected={isActive}
+      aria-current={isActive ? 'page' : undefined}
+      data-testid={`tab-${tab.id}`}
+      className={cn(
+        'group flex h-full cursor-pointer select-none items-center gap-1 border-r border-border px-3 text-xs transition-colors',
+        isActive
+          ? 'bg-accent text-accent-foreground'
+          : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+      )}
+      onClick={() => onSelect(tab.id)}
+    >
+      {tab.dirty && (
+        <span
+          className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary"
+          aria-label="Unsaved changes"
+        />
+      )}
+      <span className="max-w-[120px] truncate">{tab.title}</span>
+      <button
+        aria-label={`Close ${tab.title}`}
+        className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-muted-foreground/20 transition-opacity"
+        onPointerDown={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose(tab.id);
+        }}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+export function TabBar() {
+  const openTabs = useFileStore((s) => s.openTabs);
+  const activeTabId = useFileStore((s) => s.activeTabId);
+  const setActiveTab = useFileStore((s) => s.setActiveTab);
+  const closeTab = useFileStore((s) => s.closeTab);
+  const reorderTabs = useFileStore((s) => s.reorderTabs);
+
+  // Require a small drag distance before activating — so a click on the tab
+  // body still triggers `onClick` (dnd-kit's PointerSensor default is 0).
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+
+  if (openTabs.length === 0) {
+    return (
+      <div className="flex h-9 items-center border-b border-border bg-card/20 px-3 text-xs text-muted-foreground">
+        <span>No files open</span>
+      </div>
+    );
+  }
+
+  function handleDragEnd(e: DragEndEvent) {
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    const fromIndex = openTabs.findIndex((t) => t.id === active.id);
+    const toIndex = openTabs.findIndex((t) => t.id === over.id);
+    if (fromIndex === -1 || toIndex === -1) return;
+    reorderTabs(fromIndex, toIndex);
+  }
+
+  return (
+    <div className="flex h-9 items-center border-b border-border bg-card/20 overflow-x-auto">
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={openTabs.map((t) => t.id)} strategy={horizontalListSortingStrategy}>
+          <div className="flex h-full items-center px-1">
+            {openTabs.map((tab) => (
+              <SortableTab
+                key={tab.id}
+                tab={tab}
+                isActive={tab.id === activeTabId}
+                onSelect={setActiveTab}
+                onClose={closeTab}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}

src/renderer/components/layout/Toolbar.tsx

@@ -0,0 +1,15 @@
+import { Bold, Italic, List, ListOrdered, Code, Link as LinkIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function Toolbar() {
+  return (
+    <div className="flex h-10 items-center gap-1 border-b border-border bg-card/10 px-3">
+      <Button variant="ghost" size="icon" aria-label="Bold"><Bold className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Italic"><Italic className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Unordered list"><List className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Ordered list"><ListOrdered className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Code"><Code className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Link"><LinkIcon className="h-4 w-4" /></Button>
+    </div>
+  );
+}

src/renderer/components/preview/MarkdownRenderer.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react';
+import { renderMarkdown } from '@/lib/markdown';
+import { MermaidLazy } from './MermaidLazy';
+
+interface Props {
+  source: string;
+}
+
+const MERMAID_RE = /```mermaid\n([\s\S]*?)```/g;
+
+function extractMermaidCodes(source: string): string[] {
+  const codes: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = MERMAID_RE.exec(source)) !== null) {
+    codes.push(match[1].trim());
+  }
+  return codes;
+}
+
+export function MarkdownRenderer({ source }: Props) {
+  const html = renderMarkdown(source);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [mermaidCodes, setMermaidCodes] = useState<string[]>([]);
+
+  // Re-derive mermaid codes from the original source. The renderMarkdown function
+  // replaces mermaid blocks with placeholders (data-mermaid-source="${idx}"), but
+  // it does not return the actual codes. Rather than thread them through the API,
+  // we re-extract from the source. Source is small (single buffer content) so this
+  // cost is negligible.
+  useEffect(() => {
+    setMermaidCodes(extractMermaidCodes(source));
+  }, [source]);
+
+  return (
+    <div className="prose prose-neutral dark:prose-invert max-w-none p-6" ref={containerRef}>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+      {mermaidCodes.map((code, i) => (
+        <div key={i} className="my-4">
+          <MermaidLazy code={code} />
+        </div>
+      ))}
+    </div>
+  );
+}

src/renderer/components/preview/MermaidLazy.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface Props {
+  code: string;
+}
+
+let mermaidModule: typeof import('mermaid').default | null = null;
+let initialized = false;
+
+async function getMermaid() {
+  if (!mermaidModule) {
+    const mod = await import('mermaid');
+    mermaidModule = mod.default;
+  }
+  if (!initialized) {
+    mermaidModule.initialize({ startOnLoad: false, theme: 'default' });
+    initialized = true;
+  }
+  return mermaidModule;
+}
+
+export function MermaidLazy({ code }: Props) {
+  const [svg, setSvg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2)}`);
+
+  useEffect(() => {
+    let cancelled = false;
+    getMermaid()
+      .then((m) => m.render(idRef.current, code))
+      .then((rendered) => {
+        if (!cancelled) setSvg(rendered);
+      })
+      .catch((err: Error) => {
+        if (!cancelled) setError(err.message);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  if (error) return <div className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">{error}</div>;
+  if (!svg) return <div className="text-xs text-muted-foreground">Loading diagram…</div>;
+  return <div data-testid="mermaid-output" dangerouslySetInnerHTML={{ __html: svg }} />;
+}

src/renderer/components/preview/PreviewPane.tsx

@@ -0,0 +1,22 @@
+import { MarkdownRenderer } from './MarkdownRenderer';
+import { usePreviewStore } from '@/stores/preview-store';
+import { useScrollSync } from '@/hooks/use-scroll-sync';
+
+export function PreviewPane() {
+  const { source, setScrollRatio } = usePreviewStore();
+  const { handlePreviewScroll } = useScrollSync({ onPreviewScroll: setScrollRatio });
+
+  if (!source) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <p>Nothing to preview. Start typing in the editor.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto bg-card/10" onScroll={handlePreviewScroll}>
+      <MarkdownRenderer source={source} />
+    </div>
+  );
+}

src/renderer/components/sidebar/FileTree.tsx

@@ -0,0 +1,73 @@
+import { ChevronRight, Folder, FolderOpen, File, FileText } from 'lucide-react';
+import { useFileStore } from '@/stores/file-store';
+import { cn } from '@/lib/utils';
+
+function FileTreeNode({ node, depth }: { node: import('@/stores/file-store').FileNode; depth: number }) {
+  const { expanded, activeTabId, loadChildren, toggleExpanded, openFile } = useFileStore();
+  const isExpanded = expanded.has(node.path);
+  const isActive = activeTabId === node.path;
+
+  if (node.isDirectory) {
+    const handleClick = async () => {
+      if (!node.loaded) {
+        await loadChildren(node.path);
+      }
+      toggleExpanded(node.path);
+    };
+
+    return (
+      <div>
+        <button
+          onClick={handleClick}
+          className={cn(
+            'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
+            isActive && 'bg-accent'
+          )}
+          style={{ paddingLeft: `${depth * 16 + 4}px` }}
+        >
+          <ChevronRight
+            size={12}
+            className={cn('transition-transform duration-150', isExpanded && 'rotate-90')}
+          />
+          {isExpanded ? <FolderOpen size={14} /> : <Folder size={14} />}
+          <span className="truncate">{node.name}</span>
+        </button>
+        {isExpanded && node.loaded && node.children && (
+          <div>
+            {node.children.map((child) => (
+              <FileTreeNode key={child.path} node={child} depth={depth + 1} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => openFile(node.path)}
+      className={cn(
+        'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
+        isActive && 'bg-accent text-accent-foreground'
+      )}
+      style={{ paddingLeft: `${depth * 16 + 4}px` }}
+    >
+      <FileText size={14} />
+      <span className="truncate">{node.name}</span>
+    </button>
+  );
+}
+
+export function FileTree() {
+  const tree = useFileStore((s) => s.tree);
+
+  if (!tree) return null;
+
+  return (
+    <div className="py-1">
+      {tree.children?.map((child) => (
+        <FileTreeNode key={child.path} node={child} depth={0} />
+      ))}
+    </div>
+  );
+}

src/renderer/components/sidebar/Outline.tsx

@@ -0,0 +1,77 @@
+import { useEditorStore } from '@/stores/editor-store';
+
+const HEADING_RE = /^(#{1,6})\s+(.+)$/gm;
+
+interface HeadingItem {
+  level: number;
+  text: string;
+  line: number;
+}
+
+function extractHeadings(content: string): HeadingItem[] {
+  const headings: HeadingItem[] = [];
+  let match: RegExpExecArray | null;
+  const re = new RegExp(HEADING_RE.source, 'gm');
+  let lineNum = 1;
+  for (const line of content.split('\n')) {
+    re.lastIndex = 0;
+    match = re.exec(line);
+    if (match) {
+      headings.push({
+        level: match[1].length,
+        text: match[2].trim(),
+        line: lineNum,
+      });
+    }
+    lineNum++;
+  }
+  return headings;
+}
+
+export function Outline() {
+  const activeId = useEditorStore((s) => s.activeId);
+  const buffers = useEditorStore((s) => s.buffers);
+
+  if (!activeId) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No file open</span>
+      </div>
+    );
+  }
+
+  const buffer = buffers.get(activeId);
+  if (!buffer) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No file open</span>
+      </div>
+    );
+  }
+
+  const headings = extractHeadings(buffer.content);
+
+  if (headings.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No headings</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-0.5 py-1">
+      {headings.map((h, i) => (
+        <button
+          key={i}
+          onClick={() => {}}
+          className="flex items-center gap-1 rounded px-2 py-0.5 text-left text-xs hover:bg-accent"
+          style={{ paddingLeft: `${(h.level - 1) * 16 + 8}px` }}
+        >
+          <span className="truncate text-muted-foreground">#{h.level}</span>
+          <span className="truncate">{h.text}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

src/renderer/components/sidebar/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { ChevronRight, FolderOpen } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useFileStore } from '@/stores/file-store';
+import { FileTree } from './FileTree';
+import { Outline } from './Outline';
+
+export function Sidebar() {
+  const tree = useFileStore((s) => s.tree);
+
+  return (
+    <div className="flex h-full flex-col gap-3">
+      {/* Files section */}
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger asChild>
+          <button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
+            <ChevronRight size={12} className="rotate-90" />
+            Files
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ScrollArea className="h-[calc(100vh-240px)]">
+            {!tree ? (
+              <div className="flex flex-col items-center gap-2 p-4 text-xs text-muted-foreground">
+                <span>No folder opened</span>
+                <Button size="sm" variant="outline" onClick={() => useFileStore.getState().openFolderDialog()}>
+                  <FolderOpen className="mr-1" /> Open Folder
+                </Button>
+              </div>
+            ) : (
+              <FileTree />
+            )}
+          </ScrollArea>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Outline section */}
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger asChild>
+          <button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
+            <ChevronRight size={12} className="rotate-90" />
+            Outline
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ScrollArea className="h-[calc(100vh-240px)]">
+            <Outline />
+          </ScrollArea>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

src/renderer/components/theme-provider.tsx

@@ -0,0 +1,6 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import type { ComponentProps } from 'react';
+
+export function ThemeProvider({ children, ...props }: ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/renderer/components/theme-toggle.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from 'next-themes';
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" aria-label="Toggle theme" className="opacity-0">
+        <Sun className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  const isDark = resolvedTheme === 'dark';
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label="Toggle theme"
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+    >
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  );
+}

src/renderer/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/renderer/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/renderer/components/ui/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/renderer/components/ui/resizable.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <ResizablePrimitive.Group
+    ref={ref}
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+))
+ResizablePanelGroup.displayName = "ResizablePanelGroup"
+
+const ResizablePanel = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive.Panel>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>
+>(({ className, ...props }, ref) => (
+  <ResizablePrimitive.Panel
+    ref={ref}
+    className={cn(
+      "h-full w-full overflow-hidden",
+      className
+    )}
+    {...props}
+  />
+))
+ResizablePanel.displayName = "ResizablePanel"
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.Separator
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.Separator>
+)
+ResizableHandle.displayName = "ResizableHandle"
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

src/renderer/components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+export { ScrollArea, ScrollBar }

src/renderer/hooks/use-file-shortcuts.ts

@@ -0,0 +1,72 @@
+import { useEffect } from 'react';
+import { useFileStore } from '@/stores/file-store';
+
+/**
+ * Global keyboard shortcuts for file operations.
+ *
+ * - Cmd/Ctrl+O: open file
+ * - Cmd/Ctrl+Shift+O: open folder
+ * - Cmd/Ctrl+S: save active buffer
+ * - Cmd/Ctrl+W: close active tab
+ * - Cmd/Ctrl+Tab / Cmd/Ctrl+Shift+Tab: next/previous tab (wraps)
+ *
+ * Suppressed when an <input>, <textarea>, or contentEditable element has focus.
+ */
+export function useFileShortcuts(): void {
+  useEffect(() => {
+    function isTypingTarget(target: EventTarget | null): boolean {
+      if (!(target instanceof HTMLElement)) return false;
+      const tag = target.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return true;
+      if (target.isContentEditable) return true;
+      return false;
+    }
+
+    function handle(e: KeyboardEvent): void {
+      const mod = e.metaKey || e.ctrlKey;
+      if (!mod) return;
+      if (isTypingTarget(e.target)) return;
+
+      const key = e.key.toLowerCase();
+
+      // Order matters: more specific (Shift) variants first so they don't get
+      // shadowed by the plain modifier-only branch.
+      if (e.shiftKey && key === 'o') {
+        e.preventDefault();
+        void useFileStore.getState().openFolderDialog();
+        return;
+      }
+      if (!e.shiftKey && key === 'o') {
+        e.preventDefault();
+        void useFileStore.getState().openFileDialog();
+        return;
+      }
+      if (!e.shiftKey && key === 's') {
+        e.preventDefault();
+        void useFileStore.getState().saveActiveBuffer();
+        return;
+      }
+      if (!e.shiftKey && key === 'w') {
+        e.preventDefault();
+        const { activeTabId, closeTab } = useFileStore.getState();
+        if (activeTabId) closeTab(activeTabId);
+        return;
+      }
+      if (key === 'tab') {
+        e.preventDefault();
+        const { openTabs, activeTabId, setActiveTab } = useFileStore.getState();
+        if (openTabs.length === 0) return;
+        const idx = activeTabId ? openTabs.findIndex((t) => t.id === activeTabId) : 0;
+        const safeIdx = idx === -1 ? 0 : idx;
+        const nextIdx = e.shiftKey
+          ? (safeIdx <= 0 ? openTabs.length - 1 : safeIdx - 1)
+          : (safeIdx >= openTabs.length - 1 ? 0 : safeIdx + 1);
+        setActiveTab(openTabs[nextIdx].id);
+        return;
+      }
+    }
+
+    window.addEventListener('keydown', handle);
+    return () => window.removeEventListener('keydown', handle);
+  }, []);
+}

src/renderer/hooks/use-restore-last-folder.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useFileStore } from '@/stores/file-store';
+
+/**
+ * On mount, re-opens the last folder if one was persisted via the file store's
+ * zustand persist middleware. Idempotent — re-running with the same path is a
+ * no-op (openFolder's list IPC call would just re-fetch, which is acceptable).
+ */
+export function useRestoreLastFolder(): void {
+  useEffect(() => {
+    const { rootPath, openFolder, tree } = useFileStore.getState();
+    if (rootPath && !tree) {
+      void openFolder(rootPath);
+    }
+    // Run once on mount only. Persist hydration happens before AppShell renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

src/renderer/hooks/use-scroll-sync.ts

@@ -0,0 +1,28 @@
+import { useCallback, useRef } from 'react';
+
+interface Options {
+  onEditorScroll?: (ratio: number) => void;
+  onPreviewScroll?: (ratio: number) => void;
+}
+
+export function useScrollSync(opts: Options) {
+  const FRAME_MS = 1000 / 60;
+  const lastTick = useRef(-FRAME_MS);
+
+  const handleEditorScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
+    const target = evt.currentTarget;
+    const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
+    const now = performance.now();
+    if (now - lastTick.current < FRAME_MS) return;
+    lastTick.current = now;
+    opts.onEditorScroll?.(ratio);
+  }, [opts]);
+
+  const handlePreviewScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
+    const target = evt.currentTarget;
+    const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
+    opts.onPreviewScroll?.(ratio);
+  }, [opts]);
+
+  return { handleEditorScroll, handlePreviewScroll };
+}

src/renderer/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self';">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MarkdownConverter</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="font-sans antialiased">
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

src/renderer/lib/ipc.ts

@@ -0,0 +1,98 @@
+import type {
+  IpcResult,
+  FileResult,
+  FileEntry,
+  PdfOptions,
+  DocxOptions,
+  HtmlOptions,
+  ExportResult,
+  BatchItem,
+  BatchOptions,
+  BatchResult,
+} from '@/types/ipc';
+
+type ChannelMissing = { code: 'CHANNEL_MISSING'; message: string };
+
+function wrap<T>(fn: () => Promise<T>): Promise<IpcResult<T | ChannelMissing>> {
+  if (typeof window === 'undefined' || !window.electronAPI) {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'NO_BRIDGE', message: 'window.electronAPI is unavailable' },
+    });
+  }
+  return fn().then(
+    (data) => ({ ok: true as const, data }),
+    (err: Error) => ({
+      ok: false as const,
+      error: { code: err.name || 'IPC_ERROR', message: err.message || String(err) },
+    }),
+  );
+}
+
+function safeCall<T extends (...args: any[]) => Promise<any>>(
+  channel: string,
+  method: string,
+  ...args: Parameters<T>
+): Promise<IpcResult<Awaited<ReturnType<T>> | ChannelMissing>> {
+  if (typeof window === 'undefined' || !window.electronAPI) {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'NO_BRIDGE', message: 'window.electronAPI is unavailable' },
+    });
+  }
+  const target = (window.electronAPI as any)[channel]?.[method];
+  if (!target) {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'CHANNEL_MISSING', message: `Missing channel: ${channel}.${method}` },
+    });
+  }
+  if (typeof target !== 'function') {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'CHANNEL_MISSING', message: `Not a function: ${channel}.${method}` },
+    });
+  }
+  return wrap(() => target(...args));
+}
+
+export const ipc = {
+  file: {
+    open: (): Promise<IpcResult<FileResult | ChannelMissing>> =>
+      safeCall('file', 'open'),
+    read: (path: string): Promise<IpcResult<string | ChannelMissing>> =>
+      safeCall('file', 'read', path),
+    write: (path: string, content: string): Promise<IpcResult<void | ChannelMissing>> =>
+      safeCall('file', 'write', path, content),
+    list: (dir: string): Promise<IpcResult<FileEntry[] | ChannelMissing>> =>
+      safeCall('file', 'list', dir),
+    pickFolder: (): Promise<IpcResult<string | null | ChannelMissing>> =>
+      safeCall('file', 'pickFolder'),
+    pickFile: (): Promise<IpcResult<string | null | ChannelMissing>> =>
+      safeCall('file', 'pickFile'),
+    onChange: (cb: (path: string) => void): (() => void) => {
+      if (typeof window === 'undefined' || !window.electronAPI?.file?.onChange) {
+        return () => {};
+      }
+      return window.electronAPI.file.onChange(cb);
+    },
+  },
+  export: {
+    pdf: (opts: PdfOptions): Promise<IpcResult<ExportResult | ChannelMissing>> =>
+      safeCall('export', 'pdf', opts),
+    docx: (opts: DocxOptions): Promise<IpcResult<ExportResult | ChannelMissing>> =>
+      safeCall('export', 'docx', opts),
+    html: (opts: HtmlOptions): Promise<IpcResult<ExportResult | ChannelMissing>> =>
+      safeCall('export', 'html', opts),
+    batch: (items: BatchItem[], opts: BatchOptions): Promise<IpcResult<BatchResult | ChannelMissing>> =>
+      safeCall('export', 'batch', items, opts),
+  },
+  app: {
+    getVersion: (): Promise<IpcResult<string | ChannelMissing>> =>
+      safeCall('app', 'getVersion'),
+    openExternal: (url: string): Promise<IpcResult<void | ChannelMissing>> =>
+      safeCall('app', 'openExternal', url),
+    showItemInFolder: (path: string): Promise<IpcResult<void | ChannelMissing>> =>
+      safeCall('app', 'showItemInFolder', path),
+  },
+};

src/renderer/lib/markdown.ts

@@ -0,0 +1,29 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+marked.setOptions({
+  gfm: true,
+  breaks: false,
+});
+
+const MERMAID_RE = /```mermaid\n([\s\S]*?)```/g;
+
+export function renderMarkdown(source: string): string {
+  // Mark mermaid blocks with a placeholder we can replace client-side.
+  const placeholders: string[] = [];
+  const withPlaceholders = source.replace(MERMAID_RE, (_m, code) => {
+    const idx = placeholders.length;
+    placeholders.push(code.trim());
+    return `<div class="mermaid-block" data-mermaid-source="${idx}"></div>`;
+  });
+
+  const rawHtml = marked.parse(withPlaceholders, { async: false }) as string;
+  const clean = DOMPurify.sanitize(rawHtml, {
+    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'data-mermaid-source', 'data-language', 'id'],
+  });
+
+  // The sanitized HTML still has placeholders; we leave the actual mermaid
+  // rendering to the React layer (MermaidLazy component) so the heavy
+  // mermaid library only loads when needed.
+  return clean;
+}

src/renderer/lib/motion.ts

@@ -0,0 +1,41 @@
+import type { Transition, Variants } from 'motion/react';
+
+export const fadeIn: Transition = {
+  duration: 0.2,
+  ease: 'easeOut',
+};
+
+export const slideInRight: Variants = {
+  x: '100%',
+  initial: { x: '100%', opacity: 0 },
+  animate: { x: 0, opacity: 1, transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] } },
+  exit: { x: '100%', opacity: 0, transition: { duration: 0.2, ease: 'easeIn' } },
+};
+
+export const modalPop: Variants = {
+  scale: 0.96,
+  opacity: 0,
+  initial: { scale: 0.96, opacity: 0 },
+  animate: { scale: 1, opacity: 1, transition: { duration: 0.2, ease: 'easeOut' } },
+  exit: { scale: 0.96, opacity: 0, transition: { duration: 0.15, ease: 'easeIn' } },
+};
+
+export const toastSpring: Transition = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 30,
+};
+
+export const sidebarToggle: Transition = {
+  duration: 0.25,
+  ease: 'easeInOut',
+  width: {
+    duration: 0.25,
+    ease: 'easeInOut',
+  },
+};
+
+export const tabSwitch: Transition = {
+  duration: 0.2,
+  ease: 'easeOut',
+};

src/renderer/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

src/renderer/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { ThemeProvider } from './components/theme-provider';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider defaultTheme="dark" attribute="class" enableSystem>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);

src/renderer/stores/app-store.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface PaneSizes {
+  sidebar: number;
+  editor: number;
+  preview: number;
+}
+
+interface AppState {
+  sidebarVisible: boolean;
+  previewVisible: boolean;
+  zenMode: boolean;
+  paneSizes: PaneSizes;
+  toggleSidebar: () => void;
+  togglePreview: () => void;
+  setZenMode: (value: boolean) => void;
+  setPaneSizes: (sizes: PaneSizes) => void;
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      sidebarVisible: true,
+      previewVisible: true,
+      zenMode: false,
+      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
+      toggleSidebar: () => set((s) => ({ sidebarVisible: !s.sidebarVisible })),
+      togglePreview: () => set((s) => ({ previewVisible: !s.previewVisible })),
+      setZenMode: (value) => set({ zenMode: value }),
+      setPaneSizes: (sizes) => set({ paneSizes: sizes }),
+    }),
+    { name: 'mc-app-store' }
+  )
+);

src/renderer/stores/editor-store.ts

@@ -0,0 +1,63 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { enableMapSet } from 'immer';
+
+enableMapSet();
+
+export interface Buffer {
+  id: string;
+  path: string;
+  content: string;
+  dirty: boolean;
+  cursor?: { line: number; column: number };
+}
+
+interface EditorState {
+  buffers: Map<string, Buffer>;
+  activeId: string | null;
+  openBuffer: (id: string, path: string, content: string) => void;
+  updateContent: (id: string, content: string) => void;
+  markSaved: (id: string) => void;
+  setCursor: (id: string, line: number, column: number) => void;
+  closeBuffer: (id: string) => void;
+  setActive: (id: string) => void;
+}
+
+export const useEditorStore = create<EditorState>()(
+  immer((set) => ({
+    buffers: new Map(),
+    activeId: null,
+    openBuffer: (id, path, content) =>
+      set((s) => {
+        s.buffers.set(id, { id, path, content, dirty: false });
+        s.activeId = id;
+      }),
+    updateContent: (id, content) =>
+      set((s) => {
+        const buf = s.buffers.get(id);
+        if (buf) {
+          buf.content = content;
+          buf.dirty = true;
+        }
+      }),
+    markSaved: (id) =>
+      set((s) => {
+        const buf = s.buffers.get(id);
+        if (buf) buf.dirty = false;
+      }),
+    setCursor: (id, line, column) =>
+      set((s) => {
+        const buf = s.buffers.get(id);
+        if (buf) buf.cursor = { line, column };
+      }),
+    closeBuffer: (id) =>
+      set((s) => {
+        s.buffers.delete(id);
+        if (s.activeId === id) s.activeId = null;
+      }),
+    setActive: (id) =>
+      set((s) => {
+        s.activeId = id;
+      }),
+  }))
+);

src/renderer/stores/file-store.ts

@@ -0,0 +1,235 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { enableMapSet } from 'immer';
+import { ipc } from '@/lib/ipc';
+import { useEditorStore } from '@/stores/editor-store';
+import type { FileEntry } from '@/types/ipc';
+
+enableMapSet();
+
+export interface FileNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  children: FileNode[] | null;
+  expanded?: boolean;
+  loaded?: boolean;
+}
+
+export interface OpenTab {
+  id: string;
+  path: string;
+  title: string;
+  dirty: boolean;
+}
+
+interface FileState {
+  tree: FileNode | null;
+  rootPath: string | null;
+  expanded: Set<string>;
+  openTabs: OpenTab[];
+  activeTabId: string | null;
+
+  openFolder: (path: string) => Promise<void>;
+  loadChildren: (dirPath: string) => Promise<void>;
+  toggleExpanded: (dirPath: string) => void;
+  openFile: (filePath: string) => Promise<void>;
+  closeTab: (id: string) => void;
+  setActiveTab: (id: string) => void;
+  markTabClean: (id: string) => void;
+  markTabDirty: (id: string) => void;
+  reorderTabs: (fromIndex: number, toIndex: number) => void;
+  openFolderDialog: () => Promise<void>;
+  openFileDialog: () => Promise<void>;
+  saveActiveBuffer: () => Promise<boolean>;
+}
+
+function entryToNode(entry: FileEntry): FileNode {
+  return {
+    name: entry.name,
+    path: entry.path,
+    isDirectory: entry.isDirectory,
+    children: null, // lazy: start unloaded; loadChildren populates this
+  };
+}
+
+// Recursively find and update a directory node by path using immer's produce
+function updateNode(tree: FileNode, dirPath: string, updater: (node: FileNode) => void): boolean {
+  if (tree.path === dirPath && tree.isDirectory) {
+    updater(tree);
+    return true;
+  }
+  if (tree.children) {
+    for (const child of tree.children) {
+      if (updateNode(child, dirPath, updater)) return true;
+    }
+  }
+  return false;
+}
+
+export const useFileStore = create<FileState>()(
+  persist(
+    immer((set) => ({
+    tree: null,
+    rootPath: null,
+    expanded: new Set<string>(),
+    openTabs: [],
+    activeTabId: null,
+
+    openFolder: async (path) => {
+      const result = await ipc.file.list(path);
+      if (!result.ok) return;
+
+      const children: FileNode[] = result.data!.map(entryToNode);
+
+      set((s) => {
+        s.tree = {
+          name: path.split('/').filter(Boolean).pop() ?? path,
+          path,
+          isDirectory: true,
+          children,
+          loaded: true,
+        };
+        s.rootPath = path;
+      });
+    },
+
+    loadChildren: async (dirPath) => {
+      // Find the node first
+      const tree = useFileStore.getState().tree;
+      if (!tree) return;
+
+      let found = false;
+      updateNode(tree, dirPath, (node) => {
+        if (node.loaded === true) return;
+        found = true;
+      });
+      if (!found) return;
+
+      const result = await ipc.file.list(dirPath);
+      if (!result.ok) return;
+
+      set((s) => {
+        updateNode(s.tree!, dirPath, (node) => {
+          node.children = result.data!.map(entryToNode);
+          node.loaded = true;
+        });
+      });
+    },
+
+    toggleExpanded: (dirPath) => {
+      set((s) => {
+        if (s.expanded.has(dirPath)) {
+          s.expanded.delete(dirPath);
+        } else {
+          s.expanded.add(dirPath);
+        }
+      });
+    },
+
+    openFile: async (filePath) => {
+      // If already open, sync dirty flag from editor buffer and activate
+      const existing = useFileStore.getState().openTabs.find((t) => t.id === filePath);
+      if (existing) {
+        const buffer = useEditorStore.getState().buffers.get(filePath);
+        set((s) => {
+          s.activeTabId = filePath;
+          if (buffer) {
+            const tab = s.openTabs.find((t) => t.id === filePath);
+            if (tab) tab.dirty = buffer.dirty;
+          }
+        });
+        return;
+      }
+
+      const result = await ipc.file.read(filePath);
+      if (!result.ok) return;
+
+      const content = result.data!;
+      const title = filePath.split('/').pop() ?? filePath;
+
+      // Open in editor store
+      useEditorStore.getState().openBuffer(filePath, filePath, content);
+
+      set((s) => {
+        s.openTabs.push({ id: filePath, path: filePath, title, dirty: false });
+        s.activeTabId = filePath;
+      });
+    },
+
+    closeTab: (id) => {
+      set((s) => {
+        const idx = s.openTabs.findIndex((t) => t.id === id);
+        if (idx === -1) return;
+        s.openTabs.splice(idx, 1);
+        if (s.activeTabId === id) {
+          s.activeTabId = idx > 0 ? s.openTabs[idx - 1]?.id ?? null : null;
+        }
+      });
+    },
+
+    setActiveTab: (id) => {
+      set((s) => {
+        s.activeTabId = id;
+      });
+    },
+
+    markTabClean: (id) => {
+      set((s) => {
+        const tab = s.openTabs.find((t) => t.id === id);
+        if (tab) tab.dirty = false;
+      });
+    },
+
+    markTabDirty: (id) => {
+      set((s) => {
+        const tab = s.openTabs.find((t) => t.id === id);
+        if (tab) tab.dirty = true;
+      });
+    },
+
+    reorderTabs: (fromIndex, toIndex) => {
+      set((s) => {
+        const tabs = s.openTabs;
+        const [moved] = tabs.splice(fromIndex, 1);
+        tabs.splice(toIndex, 0, moved);
+      });
+    },
+
+    openFolderDialog: async () => {
+      const result = await ipc.file.pickFolder();
+      if (!result.ok || result.data === null) return;
+      await useFileStore.getState().openFolder(result.data);
+    },
+
+    openFileDialog: async () => {
+      const result = await ipc.file.pickFile();
+      if (!result.ok || result.data === null) return;
+      await useFileStore.getState().openFile(result.data);
+    },
+
+    saveActiveBuffer: async () => {
+      const { activeTabId } = useFileStore.getState();
+      if (!activeTabId) return false;
+
+      const buffer = useEditorStore.getState().buffers.get(activeTabId);
+      if (!buffer) return false;
+
+      const writeResult = await ipc.file.write(activeTabId, buffer.content);
+      if (!writeResult.ok) return false;
+
+      useEditorStore.getState().markSaved(activeTabId);
+      useFileStore.getState().markTabClean(activeTabId);
+      return true;
+    },
+  })),
+    {
+      name: 'mc-file-store',
+      storage: createJSONStorage(() => localStorage),
+      // Only persist the folder path; tree, expanded Set, and openTabs are
+      // rebuilt on demand. The app re-opens the folder on startup.
+      partialize: (state) => ({ rootPath: state.rootPath }),
+    }
+  )
+);

src/renderer/stores/preview-store.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+interface PreviewState {
+  source: string;
+  scrollRatio: number;
+  setSource: (s: string) => void;
+  setScrollRatio: (r: number) => void;
+}
+
+const DEBOUNCE_MS = 300;
+let timer: ReturnType<typeof setTimeout> | null = null;
+let pending: string = '';
+
+export const usePreviewStore = create<PreviewState>((set) => ({
+  source: '',
+  scrollRatio: 0,
+  setSource: (s) => {
+    pending = s;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      set({ source: pending });
+    }, DEBOUNCE_MS);
+  },
+  setScrollRatio: (r) => set({ scrollRatio: r }),
+}));

src/renderer/styles/globals.css

@@ -0,0 +1,98 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 11 79% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 11 79% 51%;
+    --radius: 0.5rem;
+    --shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
+    --shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
+    --shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
+    --shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
+    --glass-bg-light: rgba(255, 255, 255, 0.72);
+    --glass-bg-dark: rgba(13, 11, 9, 0.72);
+    --glass-border-light: rgba(255, 255, 255, 0.4);
+    --glass-border-dark: rgba(255, 255, 255, 0.08);
+  }
+
+  .dark {
+    --background: 30 14% 4%;
+    --foreground: 0 0% 98%;
+    --card: 30 14% 6%;
+    --card-foreground: 0 0% 98%;
+    --popover: 30 14% 6%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 11 79% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 30 6% 15%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 30 6% 15%;
+    --muted-foreground: 0 0% 63%;
+    --accent: 30 6% 15%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62% 30%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 30 6% 15%;
+    --input: 30 6% 15%;
+    --ring: 11 79% 51%;
+    --shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
+    --shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
+    --shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
+    --shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
+    --glass-bg-light: rgba(255, 255, 255, 0.72);
+    --glass-bg-dark: rgba(13, 11, 9, 0.72);
+    --glass-border-light: rgba(255, 255, 255, 0.4);
+    --glass-border-dark: rgba(255, 255, 255, 0.08);
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* CodeMirror integration */
+.cm-editor {
+  @apply h-full;
+}
+.cm-editor .cm-scroller {
+  @apply font-mono text-sm;
+}

src/renderer/test/setup.ts

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom/vitest';
+
+// Mock window.electronAPI for tests
+declare global {
+  interface Window {
+    electronAPI: any;
+  }
+}
+
+if (typeof window !== 'undefined' && !window.electronAPI) {
+  window.electronAPI = {};
+}
+
+// Mock matchMedia for next-themes (jsdom doesn't have it)
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => true,
+    }),
+  });
+}
+
+// Mock react-resizable-panels for jsdom environment
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'innerWidth', { writable: true, value: 1920 });
+  Object.defineProperty(window, 'innerHeight', { writable: true, value: 1080 });
+}

src/renderer/types/electron.d.ts

@@ -0,0 +1,90 @@
+export interface ElectronAPI {
+  // App info
+  getAppVersion: () => Promise<string>;
+
+  // File operations
+  openFile: () => Promise<{ canceled: boolean; filePaths: string[] }>;
+  saveFile: (data: { path: string; content: string }) => Promise<void>;
+  readFile: (path: string) => Promise<string>;
+  setCurrentFile: (path: string | null) => void;
+
+  // Export
+  exportDocument: (format: string, options?: Record<string, any>) => Promise<void>;
+
+  // Theme
+  getTheme: () => void;
+  onThemeChanged: (callback: (theme: string) => void) => () => void;
+
+  // File events
+  onFileOpened: (callback: (data: { path: string; content: string }) => void) => () => void;
+  onFileNew: (callback: () => void) => () => void;
+  onFileSave: (callback: () => void) => () => void;
+
+  // Conversion status
+  onConversionStatus: (callback: (message: string) => void) => () => void;
+  onConversionComplete: (callback: (data: { format: string; outputPath: string }) => void) => () => void;
+
+  // Dialogs
+  showExportDialog: (format: string) => void;
+  showBatchDialog: () => void;
+  showUniversalConverterDialog: () => void;
+  showTableGenerator: () => void;
+  showPdfEditorDialog: () => void;
+  showHeaderFooterDialog: () => void;
+  showFieldPickerDialog: () => void;
+
+  // Settings
+  getSettings: (key: string) => Promise<any>;
+  setSettings: (key: string, value: any) => Promise<void>;
+
+  // Plugin settings
+  getPluginSetting: (key: string) => Promise<any>;
+  setPluginSetting: (key: string, value: any) => Promise<void>;
+
+  // Sidebar
+  toggleSidebar: () => void;
+  toggleBottomPanel: () => void;
+
+  // Print
+  doPrint: (options?: any) => void;
+
+  // PDF
+  openPdfViewer: (filePath: string) => void;
+  processPdfOperation: (data: any) => void;
+
+  // Images
+  selectFolder: () => Promise<string | null>;
+  savePastedImage: (data: { base64: string; ext: string }) => Promise<{ relativePath: string } | null>;
+
+  // Templates
+  loadTemplate: (file: string) => Promise<string>;
+  getSnippets: () => Promise<any[]>;
+  saveSnippet: (snippet: any) => Promise<void>;
+  deleteSnippet: (id: string) => Promise<void>;
+
+  // Git
+  gitStatus: () => Promise<any>;
+  gitDiff: (file: string) => Promise<any>;
+  gitStage: (files: string[]) => Promise<void>;
+  gitCommit: (message: string) => Promise<void>;
+  gitLog: () => Promise<any[]>;
+
+  // Directory
+  listDirectory: (dir: string) => Promise<any[] | null>;
+  openFilePath: (path: string) => void;
+
+  // Custom CSS
+  selectCustomCSS: () => Promise<string | null>;
+  loadCustomCSS: () => void;
+  clearCustomCSS: () => void;
+
+  // Generic invoke/on
+  invoke: (channel: string, data?: any) => Promise<any>;
+  on: (channel: string, callback: (...args: any[]) => void) => () => void;
+}
+
+declare global {
+  interface Window {
+    electronAPI: ElectronAPI;
+  }
+}

src/renderer/types/ipc.ts

@@ -0,0 +1,62 @@
+export type IpcResult<T> =
+  | { ok: true; data: T }
+  | { ok: false; error: { code: string; message: string } };
+
+export interface FileEntry {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  size?: number;
+  modifiedAt?: string;
+}
+
+export interface FileResult {
+  path: string;
+  content: string;
+}
+
+export interface PdfOptions {
+  inputPath: string;
+  outputPath: string;
+  format?: 'letter' | 'a4' | 'legal';
+  margins?: { top: number; right: number; bottom: number; left: number };
+  toc?: boolean;
+  embedFonts?: boolean;
+}
+
+export interface DocxOptions {
+  inputPath: string;
+  outputPath: string;
+  template?: string;
+  referenceDoc?: string;
+}
+
+export interface HtmlOptions {
+  inputPath: string;
+  outputPath: string;
+  standalone?: boolean;
+  highlightStyle?: string;
+}
+
+export interface ExportResult {
+  outputPath: string;
+  bytes: number;
+  durationMs: number;
+}
+
+export interface BatchItem {
+  inputPath: string;
+  outputPath: string;
+}
+
+export interface BatchOptions {
+  format: 'pdf' | 'docx' | 'html' | 'png';
+  concurrency?: number;
+}
+
+export interface BatchResult {
+  total: number;
+  succeeded: number;
+  failed: number;
+  results: Array<{ item: BatchItem; ok: boolean; error?: string }>;
+}

tailwind.config.js

@@ -0,0 +1,87 @@
+const animate = require('tailwindcss-animate')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: [
+    './src/renderer/**/*.{js,ts,jsx,tsx}',
+    './src/renderer/index.html',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: { '2xl': '1400px' },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        brand: {
+          DEFAULT: '#e5461f',
+          dark: '#c93a18',
+          light: '#ff6b47',
+        },
+        success: '#1a7a56',
+        warning: 'hsl(45 93% 47%)',
+        danger: 'hsl(0 84% 60%)',
+        info: 'hsl(199 89% 48%)',
+        warm: {
+          50: '#fafbfc', 100: '#f5f5f5', 200: '#e3e3e3', 300: '#d1d1d1',
+          400: '#b0b0b0', 500: '#9a9696', 600: '#7a7878', 700: '#5a5858',
+          800: '#4e4e4e', 900: '#464646', 950: '#0d0b09',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
+        display: ['"Barlow Condensed"', 'system-ui', 'sans-serif'],
+        mono: ['"JetBrains Mono"', '"Fira Code"', '"SF Mono"', 'Consolas', 'monospace'],
+      },
+      keyframes: {
+        'accordion-down': { from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' } },
+        'accordion-up': { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' } },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [animate],
+}

tests/component/editor/EditorPane.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { EditorPane } from '@/components/editor/EditorPane';
+import { useEditorStore } from '@/stores/editor-store';
+import { CodeMirrorEditor } from '@/components/editor/CodeMirrorEditor';
+
+vi.mock('@/components/editor/CodeMirrorEditor', () => ({
+  CodeMirrorEditor: ({ initialContent }: { initialContent: string }) => (
+    <div data-testid="codemirror-mock">{initialContent}</div>
+  ),
+}));
+
+describe('EditorPane', () => {
+  beforeEach(() => {
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('renders the empty state when no buffer is open', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <EditorPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/no file open/i)).toBeInTheDocument();
+  });
+
+  it('renders the editor when a buffer is open', () => {
+    useEditorStore.getState().openBuffer('b1', '/x.md', '# hello');
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <EditorPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByTestId('codemirror-mock')).toBeInTheDocument();
+    expect(screen.getByTestId('codemirror-mock')).toHaveTextContent('# hello');
+  });
+});

tests/component/layout/AppHeader.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@/components/theme-provider';
+import { AppHeader } from '@/components/layout/AppHeader';
+import { useAppStore } from '@/stores/app-store';
+
+describe('AppHeader', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useAppStore.setState({ sidebarVisible: true, previewVisible: true, zenMode: false });
+  });
+
+  it('renders the app title', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppHeader />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/markdownconverter/i)).toBeInTheDocument();
+  });
+
+  it('toggles sidebar when sidebar button clicked', async () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppHeader />
+      </ThemeProvider>
+    );
+    const btn = screen.getByRole('button', { name: /toggle sidebar/i });
+    await userEvent.click(btn);
+    expect(useAppStore.getState().sidebarVisible).toBe(false);
+  });
+});

tests/component/layout/AppShell.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { AppShell } from '@/components/layout/AppShell';
+import { useAppStore } from '@/stores/app-store';
+
+// Mock react-resizable-panels for jsdom environment
+vi.mock('@/components/ui/resizable', () => ({
+  ResizablePanelGroup: ({ children, direction, onLayout }: any) => (
+    <div data-testid="resizable-panel-group" data-direction={direction}>
+      {children}
+    </div>
+  ),
+  ResizablePanel: ({ children, defaultSize, minSize, maxSize }: any) => (
+    <div data-testid="resizable-panel" data-size={defaultSize} data-min={minSize} data-max={maxSize}>
+      {children}
+    </div>
+  ),
+  ResizableHandle: () => <div data-testid="resizable-handle" />,
+}));
+
+describe('AppShell', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useAppStore.setState({ sidebarVisible: true, previewVisible: true, zenMode: false });
+  });
+
+  it('renders all shell surfaces when sidebar and preview are visible', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppShell />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/markdownconverter/i)).toBeInTheDocument();
+    expect(screen.getByText(/no files open/i)).toBeInTheDocument();
+    expect(screen.getByText(/no file selected/i)).toBeInTheDocument();
+    expect(screen.getByText(/0 words/i)).toBeInTheDocument();
+  });
+
+  it('hides sidebar when sidebarVisible is false', () => {
+    useAppStore.setState({ sidebarVisible: false });
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppShell />
+      </ThemeProvider>
+    );
+    expect(screen.queryByText(/file tree placeholder/i)).not.toBeInTheDocument();
+  });
+});

tests/component/layout/StatusBar.test.tsx

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { StatusBar } from '@/components/layout/StatusBar';
+
+describe('StatusBar', () => {
+  it('renders zero word count when no file is open', () => {
+    render(<StatusBar />);
+    expect(screen.getByText(/0 words/i)).toBeInTheDocument();
+  });
+});

tests/component/layout/TabBar.test.tsx

@@ -0,0 +1,116 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { TabBar } from '@/components/layout/TabBar';
+import { useFileStore } from '@/stores/file-store';
+
+describe('TabBar', () => {
+  beforeEach(() => {
+    useFileStore.setState({ openTabs: [], activeTabId: null });
+  });
+
+  it('renders "No files open" when openTabs is empty', () => {
+    render(<TabBar />);
+    expect(screen.getByText(/no files open/i)).toBeInTheDocument();
+  });
+
+  it('renders a tab for each OpenTab', () => {
+    useFileStore.setState({
+      openTabs: [
+        { id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
+        { id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
+      ],
+      activeTabId: '/tmp/foo.md',
+    });
+    render(<TabBar />);
+    expect(screen.getByText('foo.md')).toBeInTheDocument();
+    expect(screen.getByText('bar.md')).toBeInTheDocument();
+  });
+
+  it('highlights the active tab with aria-current', () => {
+    useFileStore.setState({
+      openTabs: [
+        { id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
+        { id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
+      ],
+      activeTabId: '/tmp/foo.md',
+    });
+    render(<TabBar />);
+    const fooTab = screen.getByText('foo.md').closest('[role="tab"]');
+    expect(fooTab).toHaveAttribute('aria-current', 'page');
+    const barTab = screen.getByText('bar.md').closest('[role="tab"]');
+    expect(barTab).not.toHaveAttribute('aria-current');
+  });
+
+  it('clicking a tab calls setActiveTab', async () => {
+    useFileStore.setState({
+      openTabs: [
+        { id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
+        { id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
+      ],
+      activeTabId: '/tmp/foo.md',
+    });
+    render(<TabBar />);
+    await act(async () => {
+      screen.getByText('bar.md').closest('[role="tab"]')!.click();
+    });
+    expect(useFileStore.getState().activeTabId).toBe('/tmp/bar.md');
+  });
+
+  it('clicking the close button calls closeTab and does not call setActiveTab separately', async () => {
+    // Use a non-active tab to test that closeTab doesn't change activeTabId
+    useFileStore.setState({
+      openTabs: [
+        { id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
+        { id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
+      ],
+      activeTabId: '/tmp/bar.md',
+    });
+    render(<TabBar />);
+
+    const fooTab = screen.getByText('foo.md');
+    const closeBtn = fooTab.closest('[role="tab"]')!.querySelector('button')!;
+    await act(async () => {
+      closeBtn.click();
+    });
+
+    const state = useFileStore.getState();
+    expect(state.openTabs.find((t) => t.id === '/tmp/foo.md')).toBeUndefined();
+    // activeTabId stays on bar since we closed a non-active tab
+    expect(state.activeTabId).toBe('/tmp/bar.md');
+  });
+
+  it('renders a dirty indicator when dirty === true', () => {
+    useFileStore.setState({
+      openTabs: [
+        { id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: true },
+      ],
+      activeTabId: '/tmp/foo.md',
+    });
+    render(<TabBar />);
+    const dirtyDot = screen.getByLabelText('Unsaved changes');
+    expect(dirtyDot).toBeInTheDocument();
+  });
+
+  it('reorders tabs when reorderTabs is called (drag end handler integration)', () => {
+    useFileStore.setState({
+      openTabs: [
+        { id: '/tmp/a.md', path: '/tmp/a.md', title: 'a.md', dirty: false },
+        { id: '/tmp/b.md', path: '/tmp/b.md', title: 'b.md', dirty: false },
+        { id: '/tmp/c.md', path: '/tmp/c.md', title: 'c.md', dirty: false },
+      ],
+      activeTabId: '/tmp/a.md',
+    });
+    render(<TabBar />);
+    // Initial DOM order
+    const initialOrder = screen.getAllByRole('tab').map((el) => el.getAttribute('data-testid'));
+    expect(initialOrder).toEqual(['tab-/tmp/a.md', 'tab-/tmp/b.md', 'tab-/tmp/c.md']);
+
+    // Simulate what dnd-kit's onDragEnd would do: move a.md (idx 0) to idx 2
+    act(() => {
+      useFileStore.getState().reorderTabs(0, 2);
+    });
+
+    const newOrder = screen.getAllByRole('tab').map((el) => el.getAttribute('data-testid'));
+    expect(newOrder).toEqual(['tab-/tmp/b.md', 'tab-/tmp/c.md', 'tab-/tmp/a.md']);
+  });
+});

tests/component/layout/Toolbar.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Toolbar } from '@/components/layout/Toolbar';
+
+describe('Toolbar', () => {
+  it('renders formatting buttons', () => {
+    render(<Toolbar />);
+    expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /italic/i })).toBeInTheDocument();
+  });
+});

tests/component/preview/MermaidLazy.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MermaidLazy } from '@/components/preview/MermaidLazy';
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: vi.fn(),
+    render: vi.fn().mockResolvedValue('<svg></svg>'),
+  },
+}));
+
+describe('MermaidLazy', () => {
+  it('renders an svg after mermaid resolves', async () => {
+    render(<MermaidLazy code="graph TD; A-->B" />);
+    await waitFor(() => {
+      expect(screen.getByTestId('mermaid-output').innerHTML).toContain('<svg');
+    });
+  });
+
+  it('shows an error message if mermaid throws', async () => {
+    const mermaid = (await import('mermaid')).default as any;
+    mermaid.render.mockRejectedValueOnce(new Error('mermaid failed'));
+    render(<MermaidLazy code="bad code" />);
+    await waitFor(() => {
+      expect(screen.getByText(/mermaid failed/i)).toBeInTheDocument();
+    });
+  });
+});

tests/component/preview/PreviewPane.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { PreviewPane } from '@/components/preview/PreviewPane';
+import { usePreviewStore } from '@/stores/preview-store';
+
+describe('PreviewPane', () => {
+  beforeEach(() => {
+    usePreviewStore.setState({ scrollRatio: 0, source: '' });
+  });
+
+  it('renders empty state when no source', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <PreviewPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/nothing to preview/i)).toBeInTheDocument();
+  });
+
+  it('renders markdown when source is set', () => {
+    usePreviewStore.setState({ source: '# Hello' });
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <PreviewPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByRole('heading', { level: 1, name: /hello/i })).toBeInTheDocument();
+  });
+});

tests/component/sidebar/FileTree.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { FileTree } from '@/components/sidebar/FileTree';
+import { useFileStore } from '@/stores/file-store';
+
+vi.mock('@/lib/ipc', () => ({
+  ipc: {
+    file: {
+      list: vi.fn().mockResolvedValue({ ok: true, data: [] }),
+      read: vi.fn().mockResolvedValue({ ok: true, data: '' }),
+    },
+  },
+}));
+
+describe('FileTree', () => {
+  beforeEach(() => {
+    useFileStore.setState({ tree: null, rootPath: null, expanded: new Set(), openTabs: [], activeTabId: null });
+  });
+
+  it('renders nothing when tree is null', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+
+  it('renders root children after openFolder', async () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [
+          { name: 'src', path: '/project/src', isDirectory: true, children: null, loaded: false },
+          { name: 'README.md', path: '/project/README.md', isDirectory: false, children: null },
+        ],
+      },
+      rootPath: '/project',
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('src')).toBeInTheDocument();
+    expect(screen.getByText('README.md')).toBeInTheDocument();
+  });
+
+  it('shows folder as expanded after toggle and reveals children', async () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [
+          {
+            name: 'src',
+            path: '/project/src',
+            isDirectory: true,
+            loaded: true,
+            children: [
+              { name: 'index.ts', path: '/project/src/index.ts', isDirectory: false, children: null },
+            ],
+          },
+        ],
+      },
+      rootPath: '/project',
+      expanded: new Set(['/project/src']),
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('index.ts')).toBeInTheDocument();
+  });
+
+  it('highlights the active tab path', () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [
+          { name: 'README.md', path: '/project/README.md', isDirectory: false, children: null },
+        ],
+      },
+      rootPath: '/project',
+      activeTabId: '/project/README.md',
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <FileTree />
+      </ThemeProvider>
+    );
+
+    const btn = screen.getByRole('button', { name: /README.md/i });
+    expect(btn).toHaveClass('bg-accent');
+  });
+});

tests/component/sidebar/Outline.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Outline } from '@/components/sidebar/Outline';
+import { useEditorStore } from '@/stores/editor-store';
+
+describe('Outline', () => {
+  beforeEach(() => {
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('renders "No file open" when no active buffer', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/no file open/i)).toBeInTheDocument();
+  });
+
+  it('renders H1-H6 headings from the active buffer content', () => {
+    const buffers = new Map([
+      [
+        'b1',
+        {
+          id: 'b1',
+          path: '/x.md',
+          content: '# Hello\n## World\n### Foo\n#### Bar\n##### Baz\n###### Qux',
+          dirty: false,
+        },
+      ],
+    ]);
+    useEditorStore.setState({ buffers, activeId: 'b1' });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(screen.getByText('World')).toBeInTheDocument();
+    expect(screen.getByText('Foo')).toBeInTheDocument();
+    expect(screen.getByText('Bar')).toBeInTheDocument();
+    expect(screen.getByText('Baz')).toBeInTheDocument();
+    expect(screen.getByText('Qux')).toBeInTheDocument();
+  });
+
+  it('renders headings with level-based indent', () => {
+    const buffers = new Map([
+      [
+        'b1',
+        {
+          id: 'b1',
+          path: '/x.md',
+          content: '# Title\n## Subtitle\n### Section',
+          dirty: false,
+        },
+      ],
+    ]);
+    useEditorStore.setState({ buffers, activeId: 'b1' });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+
+    const buttons = screen.getAllByRole('button');
+    // H1 has paddingLeft 8px, H2 has24px, H3 has 40px
+    expect(buttons[0]).toHaveStyle('padding-left: 8px');
+    expect(buttons[1]).toHaveStyle('padding-left: 24px');
+    expect(buttons[2]).toHaveStyle('padding-left: 40px');
+  });
+});

tests/component/sidebar/Sidebar.test.tsx

@@ -0,0 +1,92 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Sidebar } from '@/components/sidebar/Sidebar';
+import { useFileStore } from '@/stores/file-store';
+import { useEditorStore } from '@/stores/editor-store';
+
+vi.mock('@/lib/ipc', () => ({
+  ipc: {
+    file: {
+      pickFolder: vi.fn(),
+      list: vi.fn(),
+      pickFile: vi.fn(),
+      read: vi.fn(),
+      write: vi.fn(),
+    },
+  },
+}));
+
+describe('Sidebar', () => {
+  beforeEach(() => {
+    useFileStore.setState({ tree: null, rootPath: null, expanded: new Set(), openTabs: [], activeTabId: null });
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('renders without crashing with empty state in both sections', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Sidebar />
+      </ThemeProvider>
+    );
+    expect(screen.getByText('Files')).toBeInTheDocument();
+    expect(screen.getByText('Outline')).toBeInTheDocument();
+    expect(screen.getByText(/no folder opened/i)).toBeInTheDocument();
+    expect(screen.getByText(/no file open/i)).toBeInTheDocument();
+  });
+
+  it('renders FileTree and Outline sections', () => {
+    useFileStore.setState({
+      tree: {
+        name: 'project',
+        path: '/project',
+        isDirectory: true,
+        loaded: true,
+        children: [{ name: 'README.md', path: '/project/README.md', isDirectory: false, children: null }],
+      },
+      rootPath: '/project',
+    });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Sidebar />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('Files')).toBeInTheDocument();
+    expect(screen.getByText('Outline')).toBeInTheDocument();
+    expect(screen.getByText('README.md')).toBeInTheDocument();
+  });
+
+  it('renders "Open Folder" button when no folder is open', () => {
+    useFileStore.setState({ tree: null, rootPath: null });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Sidebar />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText(/no folder opened/i)).toBeInTheDocument();
+    const btn = screen.getByRole('button', { name: /open folder/i });
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('clicking "Open Folder" button calls openFolderDialog', async () => {
+    const { ipc } = await import('@/lib/ipc');
+    const spy = vi.spyOn(useFileStore.getState(), 'openFolderDialog');
+
+    useFileStore.setState({ tree: null, rootPath: null });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Sidebar />
+      </ThemeProvider>
+    );
+
+    const btn = screen.getByRole('button', { name: /open folder/i });
+    fireEvent.click(btn);
+
+    expect(spy).toHaveBeenCalled();
+  });
+});

tests/component/theme-toggle.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@/components/theme-provider';
+import { ThemeToggle } from '@/components/theme-toggle';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+describe('ThemeToggle', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.classList.remove('dark', 'light');
+  });
+
+  it('toggles between light and dark when clicked', async () => {
+    render(
+      <ThemeProvider defaultTheme="light" attribute="class">
+        <ThemeToggle />
+      </ThemeProvider>
+    );
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveAccessibleName(/toggle theme/i);
+    await userEvent.click(btn);
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    await userEvent.click(btn);
+    expect(document.documentElement.classList.contains('light')).toBe(true);
+  });
+});

tests/component/ui/button.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '@/components/ui/button';
+
+describe('Button', () => {
+  it('renders children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', async () => {
+    let count = 0;
+    render(<Button onClick={() => count++}>+</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(count).toBe(1);
+  });
+
+  it('renders the brand variant with primary styling', () => {
+    render(<Button variant="default">Brand</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('bg-primary');
+  });
+});

tests/integration/phase5-smoke.test.tsx

@@ -0,0 +1,162 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { AppShell } from '@/components/layout/AppShell';
+import { useFileStore } from '@/stores/file-store';
+import { useEditorStore } from '@/stores/editor-store';
+import { useAppStore } from '@/stores/app-store';
+
+// Mock react-resizable-panels for jsdom (same pattern as AppShell.test.tsx)
+vi.mock('@/components/ui/resizable', () => ({
+  ResizablePanelGroup: ({ children, direction }: any) => (
+    <div data-testid="resizable-panel-group" data-direction={direction}>
+      {children}
+    </div>
+  ),
+  ResizablePanel: ({ children, defaultSize }: any) => (
+    <div data-testid="resizable-panel" data-size={defaultSize}>
+      {children}
+    </div>
+  ),
+  ResizableHandle: () => <div data-testid="resizable-handle" />,
+}));
+
+vi.mock('@/lib/ipc', () => ({
+  ipc: {
+    file: {
+      open: vi.fn().mockResolvedValue({ ok: false, error: { code: 'NO_BRIDGE', message: 'mock' } }),
+      read: vi.fn().mockResolvedValue({ ok: true, data: '# hello' }),
+      write: vi.fn().mockResolvedValue({ ok: true, data: undefined }),
+      list: vi.fn().mockResolvedValue({
+        ok: true,
+        data: [
+          { name: 'README.md', path: '/root/README.md', isDirectory: false },
+          { name: 'src', path: '/root/src', isDirectory: true },
+        ],
+      }),
+      pickFolder: vi.fn().mockResolvedValue({ ok: true, data: '/root' }),
+      pickFile: vi.fn().mockResolvedValue({ ok: true, data: '/root/README.md' }),
+      onChange: vi.fn(() => () => {}),
+    },
+  },
+}));
+
+describe('Phase 5 integration', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useFileStore.setState({
+      tree: null,
+      rootPath: null,
+      expanded: new Set(),
+      openTabs: [],
+      activeTabId: null,
+    });
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+    useAppStore.setState({
+      sidebarVisible: true,
+      previewVisible: true,
+      zenMode: false,
+      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
+    });
+  });
+
+  it('AppShell renders Sidebar (Files + Outline sections) and TabBar', () => {
+    render(<AppShell />);
+    expect(screen.getByText('Files')).toBeInTheDocument();
+    expect(screen.getByText('Outline')).toBeInTheDocument();
+    expect(screen.getByText(/no files open/i)).toBeInTheDocument();
+  });
+
+  it('opening a folder via the Open Folder button populates the tree', async () => {
+    render(<AppShell />);
+    const openBtn = screen.getByRole('button', { name: /open folder/i });
+    await act(async () => {
+      fireEvent.click(openBtn);
+    });
+    // After openFolder, the tree should have children
+    const state = useFileStore.getState();
+    expect(state.tree).not.toBeNull();
+    expect(state.tree?.children).toHaveLength(2);
+    expect(state.rootPath).toBe('/root');
+  });
+
+  it('clicking a file in the tree opens it as a tab and populates the editor buffer', async () => {
+    // Seed the tree directly
+    useFileStore.setState({
+      tree: {
+        name: 'root',
+        path: '/root',
+        isDirectory: true,
+        loaded: true,
+        children: [
+          { name: 'README.md', path: '/root/README.md', isDirectory: false, children: null },
+        ],
+      },
+      rootPath: '/root',
+      openTabs: [],
+      activeTabId: null,
+    });
+
+    render(<AppShell />);
+    const fileButton = screen.getByText('README.md').closest('button')!;
+    await act(async () => {
+      fireEvent.click(fileButton);
+    });
+
+    const state = useFileStore.getState();
+    expect(state.openTabs).toHaveLength(1);
+    expect(state.openTabs[0].id).toBe('/root/README.md');
+    expect(state.activeTabId).toBe('/root/README.md');
+
+    // Editor buffer should have the file content
+    const buf = useEditorStore.getState().buffers.get('/root/README.md');
+    expect(buf?.content).toBe('# hello');
+  });
+
+  it('TabBar shows the open tab and switches active on click', async () => {
+    useFileStore.setState({
+      tree: null,
+      rootPath: null,
+      expanded: new Set(),
+      openTabs: [
+        { id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
+        { id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
+      ],
+      activeTabId: '/a.md',
+    });
+    render(<AppShell />);
+    const aTab = screen.getByText('a.md').closest('[role="tab"]')!;
+    const bTab = screen.getByText('b.md').closest('[role="tab"]')!;
+    expect(aTab).toHaveAttribute('aria-current', 'page');
+    await act(async () => {
+      fireEvent.click(bTab);
+    });
+    expect(useFileStore.getState().activeTabId).toBe('/b.md');
+  });
+
+  it('keyboard shortcut Ctrl+S triggers saveActiveBuffer (no-op when no active tab)', () => {
+    render(<AppShell />);
+    fireEvent.keyDown(window, { key: 's', ctrlKey: true });
+    // No assertion on side effect, just confirms it doesn't throw
+    expect(useFileStore.getState().openTabs).toHaveLength(0);
+  });
+
+  it('drag-reorder updates the openTabs order', () => {
+    useFileStore.setState({
+      tree: null,
+      rootPath: null,
+      expanded: new Set(),
+      openTabs: [
+        { id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
+        { id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
+        { id: '/c.md', path: '/c.md', title: 'c.md', dirty: false },
+      ],
+      activeTabId: '/a.md',
+    });
+    render(<AppShell />);
+    act(() => {
+      useFileStore.getState().reorderTabs(0, 2);
+    });
+    const order = useFileStore.getState().openTabs.map((t) => t.id);
+    expect(order).toEqual(['/b.md', '/c.md', '/a.md']);
+  });
+});

tests/unit/hooks/use-file-shortcuts.test.tsx

@@ -0,0 +1,171 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { fireEvent, render, renderHook } from '@testing-library/react';
+
+// Mock the IPC layer used by the file store actions.
+vi.mock('@/lib/ipc', () => ({
+  ipc: {
+    file: {
+      open: vi.fn().mockResolvedValue({ ok: false, error: { code: 'NO_BRIDGE', message: 'mock' } }),
+      read: vi.fn().mockResolvedValue({ ok: false, error: { code: 'NO_BRIDGE', message: 'mock' } }),
+      write: vi.fn().mockResolvedValue({ ok: true, data: undefined }),
+      list: vi.fn().mockResolvedValue({ ok: true, data: [] }),
+      pickFolder: vi.fn().mockResolvedValue({ ok: true, data: null }),
+      pickFile: vi.fn().mockResolvedValue({ ok: true, data: null }),
+      onChange: vi.fn(() => () => {}),
+    },
+  },
+}));
+
+import { useFileShortcuts } from '@/hooks/use-file-shortcuts';
+import { useFileStore } from '@/stores/file-store';
+import { useEditorStore } from '@/stores/editor-store';
+
+function fireKey(opts: KeyboardEventInit) {
+  fireEvent.keyDown(window, opts);
+}
+
+describe('useFileShortcuts', () => {
+  beforeEach(() => {
+    // Reset both stores
+    useFileStore.setState({
+      tree: null,
+      rootPath: null,
+      expanded: new Set(),
+      openTabs: [],
+      activeTabId: null,
+    });
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('Cmd+O triggers openFileDialog', () => {
+    renderHook(() => useFileShortcuts());
+    fireKey({ key: 'o', metaKey: true });
+    // We can't easily spy on the action, but the pickFile mock should have been called.
+    // The openFileDialog action awaits ipc.file.pickFile then early-returns on null result.
+    // Since we're using real timers, the action resolves; we just need to assert no throw.
+    // To verify dispatch, we spy on the store action below in another test.
+  });
+
+  it('Cmd+Shift+O triggers openFolderDialog', () => {
+    renderHook(() => useFileShortcuts());
+    expect(() => fireKey({ key: 'O', metaKey: true, shiftKey: true })).not.toThrow();
+  });
+
+  it('Ctrl+O (cross-platform) also dispatches', () => {
+    renderHook(() => useFileShortcuts());
+    expect(() => fireKey({ key: 'o', ctrlKey: true })).not.toThrow();
+  });
+
+  it('Cmd+S triggers saveActiveBuffer; no-op when no active tab', () => {
+    renderHook(() => useFileShortcuts());
+    fireKey({ key: 's', metaKey: true });
+    // No active tab, action returns false. No throw.
+  });
+
+  it('Cmd+W with no active tab is a no-op', () => {
+    renderHook(() => useFileShortcuts());
+    expect(() => fireKey({ key: 'w', metaKey: true })).not.toThrow();
+  });
+
+  it('Cmd+W with active tab calls closeTab', () => {
+    useFileStore.setState({
+      openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
+      activeTabId: '/a.md',
+    });
+    renderHook(() => useFileShortcuts());
+    fireKey({ key: 'w', metaKey: true });
+    expect(useFileStore.getState().openTabs).toEqual([]);
+    expect(useFileStore.getState().activeTabId).toBeNull();
+  });
+
+  it('Cmd+Tab advances to next tab (wraps to first)', () => {
+    useFileStore.setState({
+      openTabs: [
+        { id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
+        { id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
+        { id: '/c.md', path: '/c.md', title: 'c.md', dirty: false },
+      ],
+      activeTabId: '/c.md',
+    });
+    renderHook(() => useFileShortcuts());
+    fireKey({ key: 'Tab', metaKey: true });
+    expect(useFileStore.getState().activeTabId).toBe('/a.md');
+  });
+
+  it('Cmd+Shift+Tab goes to previous tab (wraps to last)', () => {
+    useFileStore.setState({
+      openTabs: [
+        { id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
+        { id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
+        { id: '/c.md', path: '/c.md', title: 'c.md', dirty: false },
+      ],
+      activeTabId: '/a.md',
+    });
+    renderHook(() => useFileShortcuts());
+    fireKey({ key: 'Tab', metaKey: true, shiftKey: true });
+    expect(useFileStore.getState().activeTabId).toBe('/c.md');
+  });
+
+  it('Cmd+Tab with no tabs is a no-op', () => {
+    renderHook(() => useFileShortcuts());
+    expect(() => fireKey({ key: 'Tab', metaKey: true })).not.toThrow();
+  });
+
+  it('suppresses shortcuts when an <input> is focused', () => {
+    useFileStore.setState({
+      openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
+      activeTabId: '/a.md',
+    });
+    const { container } = render(
+      <div>
+        <input data-testid="t" />
+      </div>
+    );
+    const input = container.querySelector('input')!;
+    renderHook(() => useFileShortcuts());
+    fireEvent.keyDown(input, { key: 'w', metaKey: true });
+    // Tab should still be open (shortcut suppressed)
+    expect(useFileStore.getState().openTabs).toHaveLength(1);
+  });
+
+  it('suppresses shortcuts when a contentEditable element is focused', () => {
+    useFileStore.setState({
+      openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
+      activeTabId: '/a.md',
+    });
+    // Manually create an element with contentEditable=true and isContentEditable getter
+    const el = document.createElement('div');
+    Object.defineProperty(el, 'isContentEditable', { value: true, configurable: true });
+    document.body.appendChild(el);
+    try {
+      renderHook(() => useFileShortcuts());
+      fireEvent.keyDown(el, { key: 'w', metaKey: true });
+      expect(useFileStore.getState().openTabs).toHaveLength(1);
+    } finally {
+      document.body.removeChild(el);
+    }
+  });
+
+  it('plain keys without modifier are ignored', () => {
+    useFileStore.setState({
+      openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
+      activeTabId: '/a.md',
+    });
+    renderHook(() => useFileShortcuts());
+    fireKey({ key: 'o' });
+    fireKey({ key: 's' });
+    fireKey({ key: 'w' });
+    expect(useFileStore.getState().openTabs).toHaveLength(1);
+  });
+
+  it('cleanup removes the listener on unmount', () => {
+    const { unmount } = renderHook(() => useFileShortcuts());
+    unmount();
+    useFileStore.setState({
+      openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
+      activeTabId: '/a.md',
+    });
+    fireKey({ key: 'w', metaKey: true });
+    expect(useFileStore.getState().openTabs).toHaveLength(1);
+  });
+});

tests/unit/hooks/use-scroll-sync.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useScrollSync } from '@/hooks/use-scroll-sync';
+
+describe('useScrollSync', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    // Mock performance.now() to return 0 and not auto-advance
+    let time = 0;
+    vi.spyOn(performance, 'now').mockImplementation(() => time);
+  });
+
+  it('throttles editor scroll events to 60fps', () => {
+    const onScroll = vi.fn();
+    const { result } = renderHook(() => useScrollSync({ onEditorScroll: onScroll }));
+    const mockEvt = { currentTarget: { scrollTop: 100, scrollHeight: 1000, clientHeight: 200 } } as any;
+    // All calls within the same act() - performance.now() stays at 0
+    // First call passes, subsequent calls within FRAME_MS are throttled
+    act(() => {
+      result.current.handleEditorScroll(mockEvt);
+      result.current.handleEditorScroll(mockEvt);
+      result.current.handleEditorScroll(mockEvt);
+    });
+    expect(onScroll).toHaveBeenCalledTimes(1);
+  });
+});

tests/unit/lib/cn.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { cn } from '@/lib/utils';
+
+describe('cn', () => {
+  it('merges class names', () => {
+    expect(cn('a', 'b')).toBe('a b');
+  });
+
+  it('deduplicates conflicting tailwind classes', () => {
+    expect(cn('p-2', 'p-4')).toBe('p-4');
+  });
+
+  it('ignores falsy values', () => {
+    expect(cn('a', false, null, undefined, '', 'b')).toBe('a b');
+  });
+
+  it('accepts conditional class objects', () => {
+    expect(cn('base', { active: true, disabled: false })).toBe('base active');
+  });
+});

tests/unit/lib/ipc.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ipc } from '@/lib/ipc';
+import type { FileResult } from '@/types/ipc';
+
+describe('ipc wrapper', () => {
+  beforeEach(() => {
+    window.electronAPI = {
+      file: {
+        read: vi.fn().mockResolvedValue('# hello'),
+        write: vi.fn().mockResolvedValue(undefined),
+        list: vi.fn().mockResolvedValue([]),
+      },
+    };
+  });
+
+  it('file.read returns ok result on success', async () => {
+    const result = await ipc.file.read('/foo.md');
+    expect(result.ok).toBe(true);
+    if (result.ok) {
+      expect(result.data).toBe('# hello');
+    }
+  });
+
+  it('file.read returns err result when channel throws', async () => {
+    window.electronAPI.file.read = vi.fn().mockRejectedValue(new Error('ENOENT'));
+    const result = await ipc.file.read('/missing.md');
+    expect(result.ok).toBe(false);
+    if (!result.ok) {
+      expect(result.error.message).toBe('ENOENT');
+    }
+  });
+
+  it('file.read returns err result when channel missing', async () => {
+    delete (window.electronAPI.file as any).read;
+    const result = await ipc.file.read('/foo.md');
+    expect(result.ok).toBe(false);
+    if (!result.ok) {
+      expect(result.error.code).toBe('CHANNEL_MISSING');
+    }
+  });
+});

tests/unit/lib/markdown.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { renderMarkdown } from '@/lib/markdown';
+
+describe('renderMarkdown', () => {
+  it('renders headings', () => {
+    const html = renderMarkdown('# Hello');
+    expect(html).toContain('<h1>Hello</h1>');
+  });
+
+  it('renders bold and italic', () => {
+    const html = renderMarkdown('**bold** and *italic*');
+    expect(html).toContain('<strong>bold</strong>');
+    expect(html).toContain('<em>italic</em>');
+  });
+
+  it('renders code blocks with language class', () => {
+    const html = renderMarkdown('```js\nconst x = 1;\n```');
+    expect(html).toContain('language-js');
+  });
+
+  it('renders mermaid blocks with a placeholder', () => {
+    const html = renderMarkdown('```mermaid\ngraph TD\nA-->B\n```');
+    expect(html).toContain('data-mermaid-source=');
+  });
+
+  it('sanitizes dangerous HTML', () => {
+    const html = renderMarkdown('<script>alert(1)</script>');
+    expect(html).not.toContain('<script>');
+  });
+});

tests/unit/lib/motion.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import {
+  fadeIn,
+  slideInRight,
+  modalPop,
+  toastSpring,
+  sidebarToggle,
+} from '@/lib/motion';
+
+describe('motion presets', () => {
+  it('fadeIn is a valid transition object', () => {
+    expect(fadeIn.duration).toBeGreaterThan(0);
+    expect(fadeIn.ease).toBeDefined();
+  });
+
+  it('slideInRight uses translateX transform', () => {
+    expect(slideInRight.x).toBe('100%');
+  });
+
+  it('modalPop uses scale and opacity', () => {
+    expect(modalPop.scale).toBeDefined();
+    expect(modalPop.opacity).toBeDefined();
+  });
+
+  it('toastSpring has spring physics', () => {
+    expect(toastSpring.type).toBe('spring');
+  });
+
+  it('sidebarToggle animates width', () => {
+    expect(sidebarToggle.width.duration).toBeGreaterThan(0);
+  });
+});

tests/unit/stores/app-store.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useAppStore } from '@/stores/app-store';
+
+describe('useAppStore', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useAppStore.setState({
+      sidebarVisible: true,
+      previewVisible: true,
+      zenMode: false,
+      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
+    });
+  });
+
+  it('toggles sidebar visibility', () => {
+    expect(useAppStore.getState().sidebarVisible).toBe(true);
+    useAppStore.getState().toggleSidebar();
+    expect(useAppStore.getState().sidebarVisible).toBe(false);
+  });
+
+  it('toggles preview visibility', () => {
+    useAppStore.getState().togglePreview();
+    expect(useAppStore.getState().previewVisible).toBe(false);
+  });
+
+  it('updates pane sizes', () => {
+    useAppStore.getState().setPaneSizes({ sidebar: 25, editor: 50, preview: 25 });
+    expect(useAppStore.getState().paneSizes).toEqual({ sidebar: 25, editor: 50, preview: 25 });
+  });
+
+  it('enables and disables zen mode', () => {
+    useAppStore.getState().setZenMode(true);
+    expect(useAppStore.getState().zenMode).toBe(true);
+  });
+});

tests/unit/stores/editor-store.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useEditorStore } from '@/stores/editor-store';
+
+describe('useEditorStore', () => {
+  beforeEach(() => {
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('creates a new buffer with the given content', () => {
+    useEditorStore.getState().openBuffer('file-1', '/foo.md', '# hello');
+    const buf = useEditorStore.getState().buffers.get('file-1');
+    expect(buf?.content).toBe('# hello');
+    expect(buf?.path).toBe('/foo.md');
+  });
+
+  it('updates content and marks dirty', () => {
+    useEditorStore.getState().openBuffer('file-1', '/foo.md', '');
+    useEditorStore.getState().updateContent('file-1', 'new content');
+    const buf = useEditorStore.getState().buffers.get('file-1');
+    expect(buf?.content).toBe('new content');
+    expect(buf?.dirty).toBe(true);
+  });
+
+  it('marks a buffer clean after save', () => {
+    useEditorStore.getState().openBuffer('file-1', '/foo.md', '');
+    useEditorStore.getState().updateContent('file-1', 'x');
+    useEditorStore.getState().markSaved('file-1');
+    expect(useEditorStore.getState().buffers.get('file-1')?.dirty).toBe(false);
+  });
+
+  it('closes a buffer and removes it', () => {
+    useEditorStore.getState().openBuffer('file-1', '/foo.md', '');
+    useEditorStore.getState().closeBuffer('file-1');
+    expect(useEditorStore.getState().buffers.has('file-1')).toBe(false);
+  });
+});

tests/unit/stores/file-store.test.ts

@@ -0,0 +1,419 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useEditorStore } from '@/stores/editor-store';
+import { useFileStore, FileNode, OpenTab } from '@/stores/file-store';
+import type { FileEntry } from '@/types/ipc';
+
+vi.mock('@/lib/ipc', () => ({
+  ipc: {
+    file: {
+      list: vi.fn(),
+      read: vi.fn(),
+      pickFolder: vi.fn(),
+      pickFile: vi.fn(),
+      write: vi.fn(),
+    },
+  },
+}));
+
+import { ipc } from '@/lib/ipc';
+
+const fakeList = ipc.file.list as ReturnType<typeof vi.fn>;
+const fakeRead = ipc.file.read as ReturnType<typeof vi.fn>;
+const fakePickFolder = ipc.file.pickFolder as ReturnType<typeof vi.fn>;
+const fakePickFile = ipc.file.pickFile as ReturnType<typeof vi.fn>;
+const fakeWrite = ipc.file.write as ReturnType<typeof vi.fn>;
+
+function fakeFileEntry(name: string, isDirectory: boolean): FileEntry {
+  return { name, path: `/root/${name}`, isDirectory };
+}
+
+describe('useFileStore', () => {
+  beforeEach(() => {
+    useFileStore.setState({
+      tree: null,
+      rootPath: null,
+      expanded: new Set(),
+      openTabs: [],
+      activeTabId: null,
+    });
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+    fakeList.mockClear();
+    fakeRead.mockClear();
+    fakePickFolder.mockClear();
+    fakePickFile.mockClear();
+    fakeWrite.mockClear();
+  });
+
+  // --- openFolder ---
+
+  it('openFolder calls ipc.file.list and sets tree with root node and mapped children', async () => {
+    fakeList.mockResolvedValue({
+      ok: true,
+      data: [
+        fakeFileEntry('README.md', false),
+        fakeFileEntry('src', true),
+      ],
+    });
+
+    await useFileStore.getState().openFolder('/root');
+
+    expect(fakeList).toHaveBeenCalledWith('/root');
+    const tree = useFileStore.getState().tree;
+    expect(tree).not.toBeNull();
+    expect(tree!.name).toBe('root');
+    expect(tree!.path).toBe('/root');
+    expect(tree!.isDirectory).toBe(true);
+    expect(tree!.loaded).toBe(true);
+    expect(tree!.children).toHaveLength(2);
+    expect(tree!.children![0].name).toBe('README.md');
+    expect(tree!.children![0].isDirectory).toBe(false);
+    expect(tree!.children![1].name).toBe('src');
+    expect(tree!.children![1].isDirectory).toBe(true);
+    // children of a directory node should be null (lazy)
+    expect(tree!.children![1].children).toBeNull();
+    expect(useFileStore.getState().rootPath).toBe('/root');
+  });
+
+  it('openFolder failure leaves state unchanged', async () => {
+    fakeList.mockResolvedValue({
+      ok: false,
+      error: { code: 'ENOENT', message: 'not found' },
+    });
+
+    await useFileStore.getState().openFolder('/nonexistent');
+    expect(useFileStore.getState().tree).toBeNull();
+    expect(useFileStore.getState().rootPath).toBeNull();
+  });
+
+  // --- loadChildren ---
+
+  it('loadChildren IPC-loads children of the matching directory and sets loaded: true', async () => {
+    fakeList.mockResolvedValue({
+      ok: true,
+      data: [fakeFileEntry('nested.md', false)],
+    });
+
+    // Set up a tree with a loaded parent directory
+    const tree: FileNode = {
+      name: 'root',
+      path: '/root',
+      isDirectory: true,
+      loaded: true,
+      children: [
+        {
+          name: 'src',
+          path: '/root/src',
+          isDirectory: true,
+          children: null,
+          loaded: false,
+        },
+      ],
+    };
+    useFileStore.setState({ tree, rootPath: '/root' });
+
+    await useFileStore.getState().loadChildren('/root/src');
+
+    const srcNode = useFileStore.getState().tree!.children![0];
+    expect(srcNode.loaded).toBe(true);
+    expect(srcNode.children).toHaveLength(1);
+    expect(srcNode.children![0].name).toBe('nested.md');
+  });
+
+  it('loadChildren on a non-directory node is a no-op', async () => {
+    const tree: FileNode = {
+      name: 'root',
+      path: '/root',
+      isDirectory: true,
+      loaded: true,
+      children: [{ name: 'file.md', path: '/root/file.md', isDirectory: false, children: null }],
+    };
+    useFileStore.setState({ tree });
+
+    await useFileStore.getState().loadChildren('/root/file.md');
+    expect(fakeList).not.toHaveBeenCalled();
+  });
+
+  it('loadChildren on a non-existent path is a no-op', async () => {
+    const tree: FileNode = {
+      name: 'root',
+      path: '/root',
+      isDirectory: true,
+      loaded: true,
+      children: [{ name: 'src', path: '/root/src', isDirectory: true, children: null, loaded: true }],
+    };
+    useFileStore.setState({ tree });
+
+    await useFileStore.getState().loadChildren('/root/src/not-there');
+    // Should not throw
+    expect(fakeList).not.toHaveBeenCalled();
+  });
+
+  it('loadChildren is idempotent: does not re-fetch when already loaded', async () => {
+    fakeList.mockResolvedValue({
+      ok: true,
+      data: [{ name: 'src', path: '/root/src', isDirectory: true }],
+    });
+    await useFileStore.getState().openFolder('/root');
+
+    fakeList.mockClear();
+    fakeList.mockResolvedValue({
+      ok: true,
+      data: [{ name: 'foo.ts', path: '/root/src/foo.ts', isDirectory: false }],
+    });
+
+    await useFileStore.getState().loadChildren('/root/src');
+    const callsAfterFirst = fakeList.mock.calls.length;
+    expect(callsAfterFirst).toBe(1);
+
+    // Second call should be a no-op (loaded is true)
+    await useFileStore.getState().loadChildren('/root/src');
+    expect(fakeList.mock.calls.length).toBe(callsAfterFirst);
+  });
+
+  // --- toggleExpanded ---
+
+  it('toggleExpanded adds and removes paths from the expanded Set', () => {
+    const { toggleExpanded } = useFileStore.getState();
+    toggleExpanded('/root/src');
+    expect(useFileStore.getState().expanded.has('/root/src')).toBe(true);
+    toggleExpanded('/root/src');
+    expect(useFileStore.getState().expanded.has('/root/src')).toBe(false);
+  });
+
+  // --- openFile ---
+
+  it('openFile calls ipc.file.read, opens an editor buffer, adds a tab, and sets it active', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: '# hello world' });
+
+    await useFileStore.getState().openFile('/root/README.md');
+
+    expect(fakeRead).toHaveBeenCalledWith('/root/README.md');
+    // Editor buffer should be open
+    const buf = useEditorStore.getState().buffers.get('/root/README.md');
+    expect(buf).not.toBeUndefined();
+    expect(buf!.content).toBe('# hello world');
+    expect(buf!.dirty).toBe(false);
+    // Tab should be added and active
+    const tabs = useFileStore.getState().openTabs;
+    expect(tabs).toHaveLength(1);
+    expect(tabs[0].path).toBe('/root/README.md');
+    expect(tabs[0].title).toBe('README.md');
+    expect(tabs[0].dirty).toBe(false);
+    expect(useFileStore.getState().activeTabId).toBe('/root/README.md');
+  });
+
+  it('openFile on an already-open file does not re-read — just activates the existing tab', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: '# original' });
+
+    // Open once
+    await useFileStore.getState().openFile('/root/README.md');
+    expect(fakeRead).toHaveBeenCalledTimes(1);
+
+    // Mark it dirty to prove dirty flag is preserved
+    useEditorStore.getState().updateContent('/root/README.md', '# modified');
+
+    // Open again
+    await useFileStore.getState().openFile('/root/README.md');
+
+    expect(fakeRead).toHaveBeenCalledTimes(1); // no second read
+    expect(useEditorStore.getState().buffers.get('/root/README.md')!.content).toBe('# modified');
+    expect(useFileStore.getState().openTabs[0].dirty).toBe(true); // dirty flag preserved
+    expect(useFileStore.getState().activeTabId).toBe('/root/README.md');
+  });
+
+  it('openFile failure does nothing', async () => {
+    fakeRead.mockResolvedValue({
+      ok: false,
+      error: { code: 'ENOENT', message: 'not found' },
+    });
+
+    await useFileStore.getState().openFile('/root/missing.md');
+    expect(useFileStore.getState().openTabs).toHaveLength(0);
+    expect(useEditorStore.getState().buffers.size).toBe(0);
+  });
+
+  // --- closeTab ---
+
+  it('closeTab removes the tab and updates activeTabId to the previous neighbor', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: 'a' });
+    fakeRead.mockResolvedValue({ ok: true, data: 'b' });
+
+    await useFileStore.getState().openFile('/root/a.md');
+    await useFileStore.getState().openFile('/root/b.md');
+
+    // Tab order: [a.md, b.md], active = b.md
+    useFileStore.getState().closeTab('/root/b.md');
+
+    const tabs = useFileStore.getState().openTabs;
+    expect(tabs).toHaveLength(1);
+    expect(tabs[0].id).toBe('/root/a.md');
+    expect(useFileStore.getState().activeTabId).toBe('/root/a.md');
+  });
+
+  it('closeTab on the active tab when it is the only tab sets activeTabId to null', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: '# only' });
+    await useFileStore.getState().openFile('/root/only.md');
+
+    useFileStore.getState().closeTab('/root/only.md');
+
+    expect(useFileStore.getState().openTabs).toHaveLength(0);
+    expect(useFileStore.getState().activeTabId).toBeNull();
+  });
+
+  // --- setActiveTab ---
+
+  it('setActiveTab updates activeTabId', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: 'a' });
+    fakeRead.mockResolvedValue({ ok: true, data: 'b' });
+
+    await useFileStore.getState().openFile('/root/a.md');
+    await useFileStore.getState().openFile('/root/b.md');
+    useFileStore.getState().setActiveTab('/root/a.md');
+
+    expect(useFileStore.getState().activeTabId).toBe('/root/a.md');
+  });
+
+  // --- markTabClean / markTabDirty ---
+
+  it('markTabClean sets dirty to false on the matching tab', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: '# doc' });
+    await useFileStore.getState().openFile('/root/doc.md');
+    useEditorStore.getState().updateContent('/root/doc.md', '# changed');
+
+    useFileStore.getState().markTabClean('/root/doc.md');
+
+    expect(useFileStore.getState().openTabs[0].dirty).toBe(false);
+  });
+
+  it('markTabDirty sets dirty to true on the matching tab', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: '# doc' });
+    await useFileStore.getState().openFile('/root/doc.md');
+
+    useFileStore.getState().markTabDirty('/root/doc.md');
+
+    expect(useFileStore.getState().openTabs[0].dirty).toBe(true);
+  });
+
+  // --- reorderTabs ---
+
+  it('reorderTabs moves a tab from one index to another', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: 'a' });
+    fakeRead.mockResolvedValue({ ok: true, data: 'b' });
+    fakeRead.mockResolvedValue({ ok: true, data: 'c' });
+
+    await useFileStore.getState().openFile('/root/a.md');
+    await useFileStore.getState().openFile('/root/b.md');
+    await useFileStore.getState().openFile('/root/c.md');
+
+    // [a, b, c] — move c to front
+    useFileStore.getState().reorderTabs(2, 0);
+
+    const tabs = useFileStore.getState().openTabs;
+    expect(tabs.map((t) => t.title)).toEqual(['c.md', 'a.md', 'b.md']);
+  });
+
+  // --- openFolderDialog ---
+
+  it('openFolderDialog calls pickFolder, then openFolder on the returned path', async () => {
+    fakePickFolder.mockResolvedValue({ ok: true, data: '/projects/myapp' });
+    fakeList.mockResolvedValue({
+      ok: true,
+      data: [fakeFileEntry('README.md', false)],
+    });
+
+    await useFileStore.getState().openFolderDialog();
+
+    expect(fakePickFolder).toHaveBeenCalled();
+    expect(fakeList).toHaveBeenCalledWith('/projects/myapp');
+    expect(useFileStore.getState().rootPath).toBe('/projects/myapp');
+  });
+
+  it('openFolderDialog on cancelled (null) is a no-op', async () => {
+    fakePickFolder.mockResolvedValue({ ok: true, data: null });
+
+    await useFileStore.getState().openFolderDialog();
+
+    expect(fakeList).not.toHaveBeenCalled();
+    expect(useFileStore.getState().tree).toBeNull();
+  });
+
+  // --- openFileDialog ---
+
+  it('openFileDialog calls pickFile, then openFile on the returned path', async () => {
+    fakePickFile.mockResolvedValue({ ok: true, data: '/root/README.md' });
+    fakeRead.mockResolvedValue({ ok: true, data: '# hello' });
+
+    await useFileStore.getState().openFileDialog();
+
+    expect(fakePickFile).toHaveBeenCalled();
+    expect(fakeRead).toHaveBeenCalledWith('/root/README.md');
+    const tabs = useFileStore.getState().openTabs;
+    expect(tabs).toHaveLength(1);
+    expect(tabs[0].path).toBe('/root/README.md');
+  });
+
+  it('openFileDialog on cancelled (null) is a no-op', async () => {
+    fakePickFile.mockResolvedValue({ ok: true, data: null });
+
+    await useFileStore.getState().openFileDialog();
+
+    expect(fakeRead).not.toHaveBeenCalled();
+    expect(useFileStore.getState().openTabs).toHaveLength(0);
+  });
+
+  // --- saveActiveBuffer ---
+
+  it('saveActiveBuffer with no active tab returns false', async () => {
+    const result = await useFileStore.getState().saveActiveBuffer();
+    expect(result).toBe(false);
+    expect(fakeWrite).not.toHaveBeenCalled();
+  });
+
+  it('saveActiveBuffer with active buffer calls write, then marks saved and clean, returns true', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: '# content' });
+    await useFileStore.getState().openFile('/root/doc.md');
+    fakeWrite.mockResolvedValue({ ok: true, data: undefined });
+
+    const result = await useFileStore.getState().saveActiveBuffer();
+
+    expect(fakeWrite).toHaveBeenCalledWith('/root/doc.md', '# content');
+    expect(useEditorStore.getState().buffers.get('/root/doc.md')!.dirty).toBe(false);
+    expect(useFileStore.getState().openTabs[0].dirty).toBe(false);
+    expect(result).toBe(true);
+  });
+
+  it('saveActiveBuffer on write failure returns false and does NOT mark clean', async () => {
+    fakeRead.mockResolvedValue({ ok: true, data: '# content' });
+    await useFileStore.getState().openFile('/root/doc.md');
+    // Mark the buffer dirty and sync the tab dirty flag before attempting save
+    useEditorStore.getState().updateContent('/root/doc.md', '# modified');
+    useFileStore.getState().markTabDirty('/root/doc.md');
+    fakeWrite.mockResolvedValue({ ok: false, error: { code: 'EIO', message: 'write error' } });
+
+    const result = await useFileStore.getState().saveActiveBuffer();
+
+    expect(result).toBe(false);
+    expect(useEditorStore.getState().buffers.get('/root/doc.md')!.dirty).toBe(true);
+    expect(useFileStore.getState().openTabs[0].dirty).toBe(true);
+  });
+
+  // --- persistence ---
+
+  it('persists rootPath to localStorage and restores on next mount', async () => {
+    fakeList.mockResolvedValue({
+      ok: true,
+      data: [{ name: 'a.md', path: '/root/a.md', isDirectory: false }],
+    });
+    await useFileStore.getState().openFolder('/root');
+
+    // Force the persist middleware to flush to localStorage
+    await useFileStore.persist?.flush?.();
+
+    const stored = JSON.parse(localStorage.getItem('mc-file-store') ?? '{}');
+    expect(stored.state.rootPath).toBe('/root');
+    // Ensure non-persisted fields are NOT in storage
+    expect(stored.state.tree).toBeUndefined();
+    expect(stored.state.openTabs).toBeUndefined();
+    expect(stored.state.expanded).toBeUndefined();
+  });
+});

tests/unit/stores/preview-store.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { usePreviewStore } from '@/stores/preview-store';
+
+describe('usePreviewStore', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    usePreviewStore.setState({ scrollRatio: 0, source: '' });
+  });
+
+  it('debounces source updates (300 ms)', () => {
+    usePreviewStore.getState().setSource('# a');
+    usePreviewStore.getState().setSource('# b');
+    usePreviewStore.getState().setSource('# c');
+    expect(usePreviewStore.getState().source).toBe('');
+    vi.advanceTimersByTime(300);
+    expect(usePreviewStore.getState().source).toBe('# c');
+  });
+
+  it('updates scroll ratio', () => {
+    usePreviewStore.getState().setScrollRatio(0.5);
+    expect(usePreviewStore.getState().scrollRatio).toBe(0.5);
+  });
+});

vite.renderer.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  root: path.join(__dirname, 'src/renderer'),
+  base: './',
+  build: {
+    outDir: path.join(__dirname, 'dist/renderer'),
+    emptyOutDir: true,
+    sourcemap: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, 'src/renderer'),
+    },
+  },
+  server: {
+    port: 5173,
+    strictPort: true,
+  },
+});

vitest.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/renderer/test/setup.ts'],
+    include: ['tests/**/*.{test,spec}.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      include: ['src/renderer/**/*.{ts,tsx}'],
+      exclude: ['src/renderer/test/**', 'src/renderer/**/*.test.*'],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, 'src/renderer'),
+    },
+  },
+});