chore: bump version to 0.17.0

Write a markdown coverage table to $GITHUB_STEP_SUMMARY for both unit
and E2E test jobs. Uses a small bash script that parses json-summary
output from the coverage reporters.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.github/workflows/ci.yml

@@ -46,7 +46,18 @@ jobs:
           cache: pnpm
 
       - run: pnpm install --frozen-lockfile
-      - run: pnpm test:unit
+      - run: pnpm test:unit:coverage
+
+      - name: Coverage summary
+        if: always()
+        run: bash scripts/coverage-summary.sh "Unit Test Coverage" coverage/unit/coverage-summary.json
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: unit-coverage
+          path: coverage/unit/
+          retention-days: 14
 
   e2e-tests:
     name: E2E Tests
@@ -80,9 +91,25 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit == 'true'
         run: npx playwright install-deps chromium
 
+      - name: Build (with coverage instrumentation)
+        run: pnpm build
+        env:
+          DATABASE_URL: ./data/test-crumbs.db
+          NODE_ENV: test
+          VITE_COVERAGE: 'true'
+
       - run: pnpm test:e2e
         env:
           CI: true
+          VITE_COVERAGE: 'true'
+
+      - name: Merge E2E coverage
+        if: always()
+        run: npx nyc report
+
+      - name: Coverage summary
+        if: always()
+        run: bash scripts/coverage-summary.sh "E2E Test Coverage" coverage/e2e/coverage-summary.json
 
       - uses: actions/upload-artifact@v4
         if: always()
@@ -91,7 +118,14 @@ jobs:
           path: |
             playwright-report/
             test-results/
-          retention-days: 30
+          retention-days: 7
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: e2e-coverage
+          path: coverage/e2e/
+          retention-days: 14
 
   docker-build:
     name: Docker Build

.gitignore

@@ -32,6 +32,10 @@ vite.config.ts.timestamp-*
 /test-results
 /playwright-report
 
+# Coverage
+/coverage
+.nyc_output
+
 # Claude Code
 /.claude/
 

.nycrc.json

@@ -0,0 +1,7 @@
+{
+	"report-dir": "coverage/e2e",
+	"temp-dir": "coverage/e2e/raw",
+	"reporter": ["text", "html", "lcov", "json-summary"],
+	"include": ["src/**"],
+	"exclude": ["node_modules", "tests"]
+}

CLAUDE.md

@@ -98,6 +98,10 @@ tests/
   unit/                # Vitest unit tests
   e2e/                 # Playwright e2e tests (Gherkin-style)
     helpers/fixtures.ts  # Shared authenticatedPage fixture
+website/               # Static landing page (crumbs.bretzel.app)
+  index.html           # Landing page with feature cards, screenshots, deploy section
+  styles.css           # Landing page styles (retro parchment theme)
+  assets/              # Favicon, screenshots
 ```
 
 ## Commands

Makefile

@@ -1,4 +1,5 @@
-.PHONY: help dev build preview check test test-unit test-e2e lint \
+.PHONY: help dev build preview check test test-unit test-e2e \
+	test-unit-coverage test-e2e-coverage lint \
 	db-push db-generate db-migrate db-studio docs-api \
 	install docker-build docker-up docker-down docker-logs clean \
 	release release-patch release-minor release-major
@@ -27,6 +28,12 @@ test-unit: ## Run unit tests only
 test-e2e: ## Run e2e tests only
 	pnpm test:e2e
 
+test-unit-coverage: ## Run unit tests with coverage
+	pnpm test:unit:coverage
+
+test-e2e-coverage: ## Run e2e tests with coverage
+	VITE_COVERAGE=true pnpm build && pnpm test:e2e && npx nyc report
+
 lint: ## Run linter
 	pnpm lint
 

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.10.1
+    image: ghcr.io/bretzel-app/crumbs:0.16.1
     container_name: crumbs
     ports:
       - "3000:3000"

docs/FEATURES.md

@@ -25,8 +25,8 @@
 - Ordered lists (`1. item`)
 - Code blocks (triple backtick)
 - Inline code (single backtick)
-- Tables
 - Links — insert, edit, and remove with URL input
+- Tables (insert, add/delete rows and columns)
 - Dividers (horizontal rules)
 - Text alignment (left, center, right, justify)
 - Line breaks

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.11.0",
+  "version": "0.17.0",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",
@@ -19,7 +19,10 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest",
+    "test:unit:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
+    "test:e2e:coverage": "VITE_COVERAGE=true pnpm build && pnpm test:e2e && nyc report",
+    "coverage:merge-e2e": "nyc merge coverage/e2e/raw coverage/e2e/merged.json && nyc report",
     "test": "pnpm test:unit && pnpm test:e2e",
     "db:push": "drizzle-kit push",
     "db:generate": "drizzle-kit generate",
@@ -34,6 +37,10 @@
     "@tiptap/core": "^3.20.1",
     "@tiptap/extension-link": "^3.20.1",
     "@tiptap/extension-placeholder": "^3.20.1",
+    "@tiptap/extension-table": "^3.20.1",
+    "@tiptap/extension-table-cell": "^3.20.1",
+    "@tiptap/extension-table-header": "^3.20.1",
+    "@tiptap/extension-table-row": "^3.20.1",
     "@tiptap/extension-task-item": "^3.20.1",
     "@tiptap/extension-task-list": "^3.20.1",
     "@tiptap/extension-text-align": "^3.20.1",
@@ -64,13 +71,16 @@
     "@types/uuid": "^10.0.0",
     "@types/zxcvbn": "^4.4.5",
     "@vite-pwa/sveltekit": "^1.1.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "drizzle-kit": "^0.31.9",
+    "nyc": "^18.0.0",
     "svelte": "^5.53.7",
     "svelte-check": "^4.4.4",
     "tailwindcss": "^4.2.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
+    "vite-plugin-istanbul": "^7.2.1",
     "vitest": "^3.2.4",
     "yaml": "^2.8.2"
   },

playwright.config.ts

@@ -4,7 +4,8 @@ export default defineConfig({
 	testDir: './tests/e2e',
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
-	retries: process.env.CI ? 2 : 0,
+	retries: 0,
+	workers: process.env.CI ? 4 : undefined,
 	reporter: 'html',
 	globalSetup: './tests/e2e/global-setup.ts',
 	use: {
@@ -27,7 +28,7 @@ export default defineConfig({
 		}
 	],
 	webServer: {
-		command: 'pnpm build && pnpm preview --port 4173',
+		command: 'pnpm preview --port 4173',
 		port: 4173,
 		reuseExistingServer: !process.env.CI,
 		timeout: 120_000,

scripts/coverage-summary.sh

@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+# Writes a coverage summary table to $GITHUB_STEP_SUMMARY (or stdout if not in CI).
+# Usage: scripts/coverage-summary.sh <title> <json-summary-path>
+set -euo pipefail
+
+TITLE="${1:?Usage: coverage-summary.sh <title> <json-summary-path>}"
+JSON="${2:?Usage: coverage-summary.sh <title> <json-summary-path>}"
+
+if [ ! -f "$JSON" ]; then
+  echo "Coverage summary not found: $JSON" >&2
+  exit 0
+fi
+
+# Resolve to absolute path for require()
+ABS_JSON="$(cd "$(dirname "$JSON")" && pwd)/$(basename "$JSON")"
+
+# Extract totals with node (available in CI, no jq dependency)
+read -r stmts branches funcs lines < <(node -e "
+  const s = require('$ABS_JSON').total;
+  console.log(s.statements.pct, s.branches.pct, s.functions.pct, s.lines.pct);
+")
+
+TABLE="## $TITLE
+
+| Metric | Coverage |
+|--------|----------|
+| Statements | ${stmts}% |
+| Branches | ${branches}% |
+| Functions | ${funcs}% |
+| Lines | ${lines}% |
+"
+
+if [ -n "${GITHUB_STEP_SUMMARY:-}" ]; then
+  echo "$TABLE" >> "$GITHUB_STEP_SUMMARY"
+else
+  echo "$TABLE"
+fi

src/app.css

@@ -72,3 +72,107 @@ body::before {
 .prose :where(a):not(:where([class~="not-prose"] *)):hover {
 	color: var(--primary-hover);
 }
+
+/* Table styles for TipTap editor */
+.tiptap table {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 0.5rem 0;
+}
+
+.tiptap th,
+.tiptap td {
+	border: 1px solid var(--border-subtle);
+	padding: 0.375rem 0.625rem;
+	text-align: left;
+	vertical-align: top;
+	min-width: 4rem;
+}
+
+.tiptap th {
+	font-weight: 600;
+	background-color: color-mix(in srgb, var(--bg-base) 60%, transparent);
+}
+
+.tiptap td p,
+.tiptap th p {
+	margin: 0;
+}
+
+.tiptap .selectedCell {
+	background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+}
+
+/* Task list styles — shared between TipTap editor and markdown-it preview */
+
+/* TipTap: ul[data-type="taskList"]  |  markdown-it: ul.task-list */
+.tiptap ul[data-type="taskList"],
+.prose ul.task-list {
+	list-style: none;
+	padding-left: 0;
+	margin: 0.25rem 0;
+}
+
+.tiptap ul[data-type="taskList"] li,
+.prose ul.task-list li {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	margin: 0;
+	padding: 0;
+}
+
+.tiptap ul[data-type="taskList"] li::marker,
+.prose ul.task-list li::marker {
+	content: none;
+}
+
+/* TipTap: checkbox is inside a label */
+.tiptap ul[data-type="taskList"] li label {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+/* Shared checkbox styles */
+.tiptap ul[data-type="taskList"] li label input[type="checkbox"],
+.prose ul.task-list .task-checkbox {
+	cursor: pointer;
+	margin: 0;
+	flex-shrink: 0;
+}
+
+/* TipTap: text content is in a div>p */
+.tiptap ul[data-type="taskList"] li > div {
+	flex: 1;
+	min-width: 0;
+}
+
+.tiptap ul[data-type="taskList"] li > div p {
+	margin: 0;
+}
+
+/* Checked item styling */
+.tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
+	text-decoration: line-through;
+	color: var(--text-muted);
+}
+
+/* Override prose spacing for task lists */
+.prose ul[data-type="taskList"],
+.prose ul.task-list {
+	padding-left: 0;
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+}
+
+.prose ul[data-type="taskList"] li,
+.prose ul.task-list li {
+	padding-left: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.prose ul.task-list li p {
+	margin: 0;
+}

src/hooks.server.ts

@@ -22,36 +22,31 @@ export const handle: Handle = async ({ event, resolve }) => {
 		return resolve(event);
 	}
 
-	// MCP endpoint: authenticate via Bearer token (API key)
-	if (pathname.startsWith('/api/mcp')) {
+	// API routes: authenticate via Bearer token if present
+	if (pathname.startsWith('/api/')) {
 		const authHeader = event.request.headers.get('authorization');
 		const token = authHeader?.startsWith('Bearer ') ? authHeader.slice(7) : null;
 
-		if (!token) {
-			return new Response(JSON.stringify({ error: 'Unauthorized' }), {
-				status: 401,
-				headers: { 'Content-Type': 'application/json' }
-			});
-		}
+		if (token) {
+			const { valid, userId } = validateApiKey(token);
+			if (!valid || !userId) {
+				return new Response(JSON.stringify({ error: 'Unauthorized' }), {
+					status: 401,
+					headers: { 'Content-Type': 'application/json' }
+				});
+			}
 
-		const { valid, userId } = validateApiKey(token);
-		if (!valid || !userId) {
-			return new Response(JSON.stringify({ error: 'Unauthorized' }), {
-				status: 401,
-				headers: { 'Content-Type': 'application/json' }
-			});
-		}
+			const user = getUserForApiKey(userId);
+			if (!user) {
+				return new Response(JSON.stringify({ error: 'Unauthorized' }), {
+					status: 401,
+					headers: { 'Content-Type': 'application/json' }
+				});
+			}
 
-		const user = getUserForApiKey(userId);
-		if (!user) {
-			return new Response(JSON.stringify({ error: 'Unauthorized' }), {
-				status: 401,
-				headers: { 'Content-Type': 'application/json' }
-			});
+			event.locals.user = user;
+			return resolve(event);
 		}
-
-		event.locals.user = user;
-		return resolve(event);
 	}
 
 	// Check if setup is complete

src/lib/components/CollaboratorPopover.svelte

@@ -47,7 +47,7 @@
 
 	{#if showPopover}
 		<div
-			class="absolute left-0 bottom-full z-20 mb-1 min-w-[160px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
+			class="absolute right-0 bottom-full z-20 mb-1 min-w-[160px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
 			data-testid="collaborator-popover"
 		>
 			<p class="mb-1 text-xs font-semibold text-[var(--text-muted)]">Shared with</p>

src/lib/components/FormattingToolbar.svelte

@@ -6,6 +6,7 @@
 		Heading,
 		List,
 		ListOrdered,
+		ListChecks,
 		TextQuote,
 		CodeXml,
 		Bold,
@@ -23,7 +24,10 @@
 		AlignJustify,
 		Minus,
 		ChevronDown,
-		Ellipsis
+		Table2,
+		BetweenHorizontalEnd,
+		BetweenVerticalEnd,
+		RemoveFormatting
 	} from 'lucide-svelte';
 
 	interface Props {
@@ -35,6 +39,9 @@
 
 	function canUndo() { void tick; return editor?.can().chain().focus().undo().run() ?? false; }
 	function canRedo() { void tick; return editor?.can().chain().focus().redo().run() ?? false; }
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function isActive(nameOrAttrs: any, attrs?: Record<string, any>): boolean { void tick; return editor?.isActive(nameOrAttrs, attrs) ?? false; }
+	function getAttrs(type: string) { void tick; return editor?.getAttributes(type) ?? {}; }
 
 	let openDropdown: string | null = $state(null);
 	let linkUrl: string = $state('');
@@ -110,13 +117,35 @@
 <svelte:document onpointerdown={handlePointerDown} onkeydown={handleKeydown} />
 
 <div
-	class="flex items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
+	class="flex flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
 	data-testid="formatting-toolbar"
 >
+	<!-- Undo/Redo -->
+	<button
+		onclick={() => editor?.chain().focus().undo().run()}
+		disabled={!canUndo()}
+		class={btnClass(false, !canUndo())}
+		title="Undo"
+		data-testid="format-undo"
+	>
+		<Undo2 size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().redo().run()}
+		disabled={!canRedo()}
+		class={btnClass(false, !canRedo())}
+		title="Redo"
+		data-testid="format-redo"
+	>
+		<Redo2 size={iconSize} />
+	</button>
+
+	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
+
 	<!-- Inline -->
 	<button
 		onclick={() => editor?.chain().focus().toggleBold().run()}
-		class={btnClass(editor?.isActive('bold') ?? false)}
+		class={btnClass(isActive('bold'))}
 		title="Bold (Ctrl+B)"
 		data-testid="format-bold"
 	>
@@ -124,7 +153,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleItalic().run()}
-		class={btnClass(editor?.isActive('italic') ?? false)}
+		class={btnClass(isActive('italic'))}
 		title="Italic (Ctrl+I)"
 		data-testid="format-italic"
 	>
@@ -132,7 +161,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleStrike().run()}
-		class={btnClass(editor?.isActive('strike') ?? false)}
+		class={btnClass(isActive('strike'))}
 		title="Strikethrough (Ctrl+Shift+X)"
 		data-testid="format-strikethrough"
 	>
@@ -140,7 +169,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleUnderline().run()}
-		class={btnClass(editor?.isActive('underline') ?? false)}
+		class={btnClass(isActive('underline'))}
 		title="Underline (Ctrl+U)"
 		data-testid="format-underline"
 	>
@@ -153,7 +182,7 @@
 	<div class="relative" data-dropdown="heading">
 		<button
 			onclick={() => toggleDropdown('heading')}
-			class={dropdownBtnClass(editor?.isActive('heading') ?? false)}
+			class={dropdownBtnClass(isActive('heading'))}
 			title="Heading"
 			data-testid="format-heading"
 		>
@@ -164,7 +193,7 @@
 			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[150px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 1 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 1 }))}
 					data-testid="format-h1"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
@@ -172,7 +201,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 2 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 2 }))}
 					data-testid="format-h2"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
@@ -180,7 +209,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 3 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 3 }))}
 					data-testid="format-h3"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
@@ -194,7 +223,7 @@
 	<div class="relative" data-dropdown="list">
 		<button
 			onclick={() => toggleDropdown('list')}
-			class={dropdownBtnClass((editor?.isActive('bulletList') || editor?.isActive('orderedList')) ?? false)}
+			class={dropdownBtnClass(isActive('bulletList') || isActive('orderedList') || isActive('taskList'))}
 			title="Lists"
 			data-testid="format-list"
 		>
@@ -205,7 +234,7 @@
 			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('bulletList') ?? false)}
+					class={dropdownItemClass(isActive('bulletList'))}
 					data-testid="format-bullet-list"
 				>
 					<List size={iconSize} />
@@ -213,12 +242,20 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('orderedList') ?? false)}
+					class={dropdownItemClass(isActive('orderedList'))}
 					data-testid="format-ordered-list"
 				>
 					<ListOrdered size={iconSize} />
 					<span>Ordered list</span>
 				</button>
+				<button
+					onclick={() => { editor?.chain().focus().toggleTaskList().run(); closeDropdowns(); }}
+					class={dropdownItemClass(isActive('taskList'))}
+					data-testid="format-task-list"
+				>
+					<ListChecks size={iconSize} />
+					<span>Task list</span>
+				</button>
 			</div>
 		{/if}
 	</div>
@@ -227,7 +264,7 @@
 	<div class="relative" data-dropdown="link">
 		<button
 			onclick={() => toggleDropdown('link')}
-			class={btnClass(editor?.isActive('link') ?? false)}
+			class={btnClass(isActive('link'))}
 			title="Insert link (Ctrl+K)"
 			data-testid="format-link"
 		>
@@ -259,7 +296,7 @@
 					<button
 						type="button"
 						onclick={openLink}
-						disabled={!editor?.getAttributes('link').href}
+						disabled={!getAttrs('link').href}
 						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)] disabled:opacity-30"
 						title="Open link"
 						data-testid="format-link-open"
@@ -269,7 +306,7 @@
 					<button
 						type="button"
 						onclick={removeLink}
-						disabled={!editor?.isActive('link')}
+						disabled={!isActive('link')}
 						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-red-500 disabled:opacity-30"
 						title="Remove link"
 						data-testid="format-unlink"
@@ -281,99 +318,123 @@
 		{/if}
 	</div>
 
-	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
-
-	<!-- More dropdown -->
-	<div class="relative" data-dropdown="more">
+	<!-- Table dropdown -->
+	<div class="relative" data-dropdown="table">
 		<button
-			onclick={() => toggleDropdown('more')}
-			class={dropdownBtnClass(false)}
-			title="More options"
-			data-testid="format-more"
+			onclick={() => toggleDropdown('table')}
+			class={dropdownBtnClass(isActive('table'))}
+			title="Table"
+			data-testid="format-table"
 		>
-			<Ellipsis size={iconSize} />
+			<Table2 size={iconSize} />
+			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'more'}
-			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
+		{#if openDropdown === 'table'}
+			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
-					onclick={() => { editor?.chain().focus().undo().run(); closeDropdowns(); }}
-					disabled={!canUndo()}
+					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
 					class={dropdownItemClass()}
-					data-testid="format-undo"
+					data-testid="format-table-insert"
 				>
-					<Undo2 size={iconSize} />
-					<span>Undo</span>
+					<Table2 size={iconSize} />
+					<span>Insert table</span>
 				</button>
-				<button
-					onclick={() => { editor?.chain().focus().redo().run(); closeDropdowns(); }}
-					disabled={!canRedo()}
-					class={dropdownItemClass()}
-					data-testid="format-redo"
-				>
-					<Redo2 size={iconSize} />
-					<span>Redo</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCode().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('code') ?? false)}
-					data-testid="format-code"
-				>
-					<Code size={iconSize} />
-					<span>Inline code</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleBlockquote().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('blockquote') ?? false)}
-					data-testid="format-blockquote"
-				>
-					<TextQuote size={iconSize} />
-					<span>Blockquote</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCodeBlock().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('codeBlock') ?? false)}
-					data-testid="format-code-block"
-				>
-					<CodeXml size={iconSize} />
-					<span>Code block</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setHorizontalRule().run(); closeDropdowns(); }}
-					class={dropdownItemClass()}
-					data-testid="format-hr"
-				>
-					<Minus size={iconSize} />
-					<span>Divider</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				{#if isActive('table')}
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-row"
+					>
+						<BetweenHorizontalEnd size={iconSize} />
+						<span>Add row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-col"
+					>
+						<BetweenVerticalEnd size={iconSize} />
+						<span>Add column</span>
+					</button>
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-row"
+					>
+						<Minus size={iconSize} />
+						<span>Delete row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-col"
+					>
+						<Minus size={iconSize} />
+						<span>Delete column</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
+						class={`${dropdownItemClass()} text-[var(--destructive)]`}
+						data-testid="format-table-delete"
+					>
+						<RemoveFormatting size={iconSize} />
+						<span>Delete table</span>
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Alignment dropdown -->
+	<div class="relative" data-dropdown="align">
+		<button
+			onclick={() => toggleDropdown('align')}
+			class={dropdownBtnClass(isActive({ textAlign: 'center' }) || isActive({ textAlign: 'right' }) || isActive({ textAlign: 'justify' }))}
+			title="Text alignment"
+			data-testid="format-align"
+		>
+			{#if isActive({ textAlign: 'center' })}
+				<AlignCenter size={iconSize} />
+			{:else if isActive({ textAlign: 'right' })}
+				<AlignRight size={iconSize} />
+			{:else if isActive({ textAlign: 'justify' })}
+				<AlignJustify size={iconSize} />
+			{:else}
+				<AlignLeft size={iconSize} />
+			{/if}
+			<ChevronDown size={chevronSize} />
+		</button>
+		{#if openDropdown === 'align'}
+			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[160px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'left' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'left' }))}
 					data-testid="format-align-left"
 				>
 					<AlignLeft size={iconSize} />
-					<span>Align left</span>
+					<span>Left</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'center' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'center' }))}
 					data-testid="format-align-center"
 				>
 					<AlignCenter size={iconSize} />
-					<span>Align center</span>
+					<span>Center</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'right' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'right' }))}
 					data-testid="format-align-right"
 				>
 					<AlignRight size={iconSize} />
-					<span>Align right</span>
+					<span>Right</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'justify' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
 					data-testid="format-align-justify"
 				>
 					<AlignJustify size={iconSize} />
@@ -382,4 +443,40 @@
 			</div>
 		{/if}
 	</div>
+
+	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
+
+	<!-- Block-level formatting -->
+	<button
+		onclick={() => editor?.chain().focus().toggleCode().run()}
+		class={btnClass(isActive('code'))}
+		title="Inline code"
+		data-testid="format-code"
+	>
+		<Code size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+		class={btnClass(isActive('blockquote'))}
+		title="Blockquote"
+		data-testid="format-blockquote"
+	>
+		<TextQuote size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleCodeBlock().run()}
+		class={btnClass(isActive('codeBlock'))}
+		title="Code block"
+		data-testid="format-code-block"
+	>
+		<CodeXml size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().setHorizontalRule().run()}
+		class={btnClass()}
+		title="Divider"
+		data-testid="format-hr"
+	>
+		<Minus size={iconSize} />
+	</button>
 </div>

src/lib/components/NoteCard.svelte

@@ -2,7 +2,6 @@
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
 	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, updateNote, leaveNote, currentFilter } from '$lib/stores/notes.js';
-	import TagChip from './TagChip.svelte';
 	import ImageLightbox from './ImageLightbox.svelte';
 	import CollaboratorPopover from './CollaboratorPopover.svelte';
 	import type { Note } from '$lib/types/index.js';
@@ -77,7 +76,7 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <article
-	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
+	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 outline-none transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
 	style={cardStyle}
 	onclick={() => onEdit(note)}
 	onkeydown={(e) => e.key === 'Enter' && onEdit(note)}
@@ -162,14 +161,6 @@
 		</div>
 	{/if}
 
-	{#if note.tags && note.tags.length > 0}
-		<div class="mt-2 flex flex-wrap gap-1">
-			{#each note.tags as tag}
-				<TagChip {tag} />
-			{/each}
-		</div>
-	{/if}
-
 	<!-- Action buttons - show on hover -->
 	<div class="absolute bottom-1 right-1 flex gap-1 max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100">
 		{#if $currentFilter === 'trashed'}
@@ -246,24 +237,3 @@
 	{/if}
 </article>
 
-<style>
-	article :global(.prose li:has(.task-checkbox)) {
-		list-style: none;
-		display: flex;
-		align-items: flex-start;
-		gap: 0.25rem;
-	}
-
-	article :global(.prose li:has(.task-checkbox))::before {
-		display: none;
-	}
-
-	article :global(.prose li:has(.task-checkbox))::marker {
-		content: none;
-	}
-
-	article :global(.task-checkbox) {
-		margin-top: 0.15rem;
-		flex-shrink: 0;
-	}
-</style>

src/lib/components/NoteEditor.svelte

@@ -201,7 +201,7 @@
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="mx-4 flex w-full max-w-xl flex-col rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
+		class="mx-4 flex w-full max-w-xl md:max-w-2xl flex-col overflow-hidden rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
 		style={bgStyle}
 		onclick={(e) => e.stopPropagation()}
 		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
@@ -214,6 +214,13 @@
 			bind:value={title}
 			class="w-full bg-transparent px-4 pt-4 text-lg font-semibold text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
 			data-testid="note-title-input"
+			onkeydown={(e) => {
+				if (e.key === 'Enter') {
+					e.preventDefault();
+					if (textareaEl) textareaEl.focus();
+					else if (tiptapEditor) tiptapEditor.commands.focus('start');
+				}
+			}}
 		/>
 
 		<!-- Content -->

src/lib/components/NoteGrid.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import NoteCard from './NoteCard.svelte';
-	import GripVertical from 'lucide-svelte/icons/grip-vertical';
-	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
+	import { dndzone, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import type { Note } from '$lib/types/index.js';
 
@@ -44,20 +43,12 @@
 		<div
 			class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
 			data-testid="note-grid"
-			use:dragHandleZone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {} }}
+			use:dndzone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {}, delayTouchStart: 400 }}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}
 		>
 			{#each localItems as note (note.id)}
-				<div class="relative h-full" animate:flip={{ duration: flipDurationMs }}>
-					<div
-						use:dragHandle
-						aria-label="drag handle for {note.title || 'note'}"
-						class="absolute top-2 left-2 z-10 cursor-grab rounded-sm p-1 text-[var(--text-muted)] opacity-60 hover:opacity-100 hover:bg-[var(--border-subtle)]/50 transition-opacity duration-150"
-						data-testid="note-drag-handle"
-					>
-						<GripVertical class="h-4 w-4" />
-					</div>
+				<div class="h-full outline-none" animate:flip={{ duration: flipDurationMs }}>
 					<NoteCard {note} {onEdit} fullHeight />
 				</div>
 			{/each}

src/lib/components/NotesView.svelte

@@ -2,9 +2,7 @@
 	import NoteGrid from '$lib/components/NoteGrid.svelte';
 	import NoteEditor from '$lib/components/NoteEditor.svelte';
 	import TagFilter from '$lib/components/TagFilter.svelte';
-	import SortSelector from '$lib/components/SortSelector.svelte';
 	import { pinnedNotes, unpinnedNotes, selectedTag, currentFilter, notes, notesLoaded, loadNotes, updateSortOrders } from '$lib/stores/notes.js';
-	import { sortMode } from '$lib/stores/sort.js';
 	import { onMount } from 'svelte';
 	import type { Note, NoteFilter } from '$lib/types/index.js';
 	import Plus from 'lucide-svelte/icons/plus';
@@ -19,10 +17,11 @@
 	let editingNote: Note | null = $state(null);
 	let showNewNote = $state(false);
 
-	// Sync store with route props
+	// Sync store with route props and reload notes when filter changes
 	$effect(() => {
 		currentFilter.set(filter);
 		selectedTag.set(tag);
+		loadNotes(filter);
 	});
 
 	function openEditor(note: Note) {
@@ -55,7 +54,7 @@
 </script>
 
 {#if filter === 'all' && !tag}
-	<div class="mx-auto mb-6 max-w-xl">
+	<div class="mx-auto mb-6 hidden max-w-xl md:block">
 		<button
 			onclick={() => (showNewNote = true)}
 			class="flex w-full items-center gap-3 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] px-4 py-3 text-left text-sm text-[var(--text-muted)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
@@ -65,18 +64,19 @@
 			Add a crumb...
 		</button>
 	</div>
+	<button
+		onclick={() => (showNewNote = true)}
+		class="fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-sm border border-[var(--border)] bg-[var(--primary)] text-white shadow-[var(--card-shadow)] transition-colors hover:bg-[var(--primary-hover)] md:hidden"
+		aria-label="Add a crumb"
+		data-testid="new-note-fab"
+	>
+		<Plus class="h-5 w-5" />
+	</button>
 {/if}
 
-{#if filter === 'all'}
-	<div class="mb-4 flex flex-wrap items-start justify-between gap-3">
-		<TagFilter />
-		<SortSelector />
-	</div>
-{:else}
-	<div class="mb-4">
-		<TagFilter />
-	</div>
-{/if}
+<div class="mb-4">
+	<TagFilter />
+</div>
 
 {#if filter === 'archived'}
 	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">Archive</h2>
@@ -88,7 +88,7 @@
 
 {#if $pinnedNotes.length > 0}
 	<div class="mb-6">
-		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable={$sortMode === 'custom'} dndType="pinned-notes" onReorder={handleReorder} />
+		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable dndType="pinned-notes" onReorder={handleReorder} />
 	</div>
 {/if}
 
@@ -96,7 +96,7 @@
 	notes={$unpinnedNotes}
 	label={$pinnedNotes.length > 0 ? 'Others' : ''}
 	onEdit={openEditor}
-	draggable={$sortMode === 'custom'}
+	draggable
 	dndType="unpinned-notes"
 	onReorder={handleReorder}
 />

src/lib/components/SortSelector.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import Clock from 'lucide-svelte/icons/clock';
-	import CalendarPlus from 'lucide-svelte/icons/calendar-plus';
-	import Hand from 'lucide-svelte/icons/hand';
-	import { sortMode, type SortMode } from '$lib/stores/sort.js';
-
-	const modes: { value: SortMode; label: string; icon: typeof Clock }[] = [
-		{ value: 'updated', label: 'Updated', icon: Clock },
-		{ value: 'created', label: 'Created', icon: CalendarPlus },
-		{ value: 'custom', label: 'Custom', icon: Hand }
-	];
-</script>
-
-<div class="inline-flex rounded-sm border border-[var(--border-subtle)]" data-testid="sort-selector">
-	{#each modes as mode}
-		<button
-			onclick={() => sortMode.set(mode.value)}
-			class="flex items-center gap-1 px-2 py-1 text-xs transition-colors duration-150
-				{$sortMode === mode.value
-					? 'bg-[var(--primary)] text-white'
-					: 'text-[var(--text-muted)] hover:text-[var(--text)]'}"
-			data-testid="sort-{mode.value}"
-			aria-label="Sort by {mode.label}"
-		>
-			<mode.icon class="h-3.5 w-3.5" />
-			<span class="hidden sm:inline">{mode.label}</span>
-		</button>
-	{/each}
-</div>

src/lib/components/SyncIndicator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { getSyncStatus, onSyncStatusChange, type SyncStatus } from '$lib/sync/client.js';
+	import { getSyncStatus, onSyncStatusChange, sync, type SyncStatus } from '$lib/sync/client.js';
 	import CloudCheck from 'lucide-svelte/icons/cloud-check';
 	import CloudSync from 'lucide-svelte/icons/cloud-sync';
 	import CloudOff from 'lucide-svelte/icons/cloud-off';
@@ -44,7 +44,12 @@
 	});
 </script>
 
-<div class="flex items-center" title="Sync status: {status}" data-testid="sync-indicator">
+<button
+	class="flex cursor-pointer items-center rounded-sm p-1 transition-colors hover:bg-[var(--border-subtle)]/50"
+	title="Sync status: {status} — click to sync"
+	onclick={() => sync()}
+	data-testid="sync-indicator"
+>
 	{#if displayStatus === 'synced'}
 		<CloudCheck class="h-5 w-5 text-[var(--primary)]" />
 	{:else if displayStatus === 'syncing'}
@@ -54,4 +59,4 @@
 	{:else}
 		<CloudAlert class="h-5 w-5 text-[var(--destructive)]" />
 	{/if}
-</div>
+</button>

src/lib/components/TagChip.svelte

@@ -11,7 +11,7 @@
 {#if onclick}
 	<button
 		{onclick}
-		class="rounded-sm px-2 py-0.5 text-xs font-medium transition-colors {active
+		class="whitespace-nowrap rounded-sm px-2 py-0.5 text-xs font-medium transition-colors {active
 			? 'bg-[var(--primary)] text-white'
 			: 'border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--primary)]'}"
 		data-testid="tag-chip"

src/lib/components/TagFilter.svelte

@@ -15,9 +15,19 @@
 </script>
 
 {#if $allTags.length > 0}
-	<div class="flex flex-wrap gap-2" data-testid="tag-filter">
+	<!-- svelte-ignore css_unused_selector -->
+	<div class="tag-scroll flex gap-2 overflow-x-auto max-md:flex-nowrap md:flex-wrap" data-testid="tag-filter">
 		{#each $allTags as tag}
 			<TagChip {tag} active={isTagActive(tag, $page.url.pathname)} onclick={() => toggleTag(tag)} />
 		{/each}
 	</div>
 {/if}
+
+<style>
+	.tag-scroll {
+		scrollbar-width: none;
+	}
+	.tag-scroll::-webkit-scrollbar {
+		display: none;
+	}
+</style>

src/lib/components/TiptapEditor.svelte

@@ -6,6 +6,12 @@
 	import Underline from '@tiptap/extension-underline';
 	import TextAlign from '@tiptap/extension-text-align';
 	import Placeholder from '@tiptap/extension-placeholder';
+	import { Table } from '@tiptap/extension-table';
+	import { TableRow } from '@tiptap/extension-table-row';
+	import { TableHeader } from '@tiptap/extension-table-header';
+	import { TableCell } from '@tiptap/extension-table-cell';
+	import TaskList from '@tiptap/extension-task-list';
+	import TaskItem from '@tiptap/extension-task-item';
 	import { Markdown } from 'tiptap-markdown';
 
 	interface Props {
@@ -30,6 +36,12 @@
 				Underline,
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Placeholder.configure({ placeholder }),
+				Table.configure({ resizable: false }),
+				TableRow,
+				TableHeader,
+				TableCell,
+					TaskList,
+				TaskItem.configure({ nested: true }),
 				Markdown
 			],
 			content,

src/lib/stores/notes.ts

@@ -3,7 +3,6 @@ import type { Note, NoteFilter, NoteCreate, NoteUpdate } from '$lib/types/index.
 import { addToSyncQueue, putNote, deleteNoteFromIdb, getAllNotes, clearNotes as clearIdbNotes } from '$lib/sync/idb.js';
 import { showToast } from '$lib/stores/toast.js';
 import { extractTags } from '$lib/utils/tags.js';
-import { sortMode, type SortMode } from '$lib/stores/sort.js';
 
 export const notes = writable<Note[]>([]);
 export const currentFilter = writable<NoteFilter>('all');
@@ -28,25 +27,20 @@ export const filteredNotes = derived(
 	}
 );
 
-function sortNotes(list: Note[], mode: SortMode): Note[] {
+function sortNotes(list: Note[]): Note[] {
 	return [...list].sort((a, b) => {
-		if (mode === 'created') {
-			return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-		}
-		if (mode === 'custom') {
-			return a.sortOrder - b.sortOrder;
-		}
-		// default: updated
+		const orderDiff = a.sortOrder - b.sortOrder;
+		if (orderDiff !== 0) return orderDiff;
 		return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
 	});
 }
 
-export const pinnedNotes = derived([filteredNotes, sortMode], ([$notes, $sortMode]) =>
-	sortNotes($notes.filter((n) => n.pinned), $sortMode)
+export const pinnedNotes = derived(filteredNotes, ($notes) =>
+	sortNotes($notes.filter((n) => n.pinned))
 );
 
-export const unpinnedNotes = derived([filteredNotes, sortMode], ([$notes, $sortMode]) =>
-	sortNotes($notes.filter((n) => !n.pinned), $sortMode)
+export const unpinnedNotes = derived(filteredNotes, ($notes) =>
+	sortNotes($notes.filter((n) => !n.pinned))
 );
 
 export const allTags = derived(notes, ($notes) => {

src/lib/stores/sort.ts

@@ -1,24 +0,0 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-export type SortMode = 'updated' | 'created' | 'custom';
-
-const STORAGE_KEY = 'crumbs-sort-mode';
-
-function getInitial(): SortMode {
-	if (browser) {
-		const stored = localStorage.getItem(STORAGE_KEY);
-		if (stored === 'updated' || stored === 'created' || stored === 'custom') {
-			return stored;
-		}
-	}
-	return 'updated';
-}
-
-export const sortMode = writable<SortMode>(getInitial());
-
-if (browser) {
-	sortMode.subscribe((value) => {
-		localStorage.setItem(STORAGE_KEY, value);
-	});
-}

src/lib/sync/server.test.ts

@@ -0,0 +1,294 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from '../server/db/test-helpers.js';
+import { notes, noteCollaborators, noteUserState, users, syncLog } from '../server/db/schema.js';
+import { eq, and } from 'drizzle-orm';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import type * as schema from '../server/db/schema.js';
+import { getChangesSince, processSyncPush } from './server.js';
+
+let db: BetterSQLite3Database<typeof schema>;
+
+const OWNER_ID = 1;
+const COLLAB_ID = 2;
+
+function seedUsers() {
+	db.insert(users).values([
+		{ email: 'owner@test.com', displayName: 'Owner', role: 'admin', authProvider: 'password', createdAt: new Date() },
+		{ email: 'collab@test.com', displayName: 'Collaborator', role: 'user', authProvider: 'password', createdAt: new Date() }
+	]).run();
+}
+
+function seedSharedNote(id: string, overrides: Partial<typeof notes.$inferInsert> = {}) {
+	const now = new Date();
+	db.insert(notes).values({
+		id,
+		userId: OWNER_ID,
+		title: 'Shared Note',
+		content: 'Original content',
+		createdAt: now,
+		updatedAt: now,
+		...overrides
+	}).run();
+
+	db.insert(noteCollaborators).values({
+		noteId: id,
+		userId: COLLAB_ID,
+		addedBy: OWNER_ID,
+		addedAt: now
+	}).run();
+}
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+	seedUsers();
+});
+
+describe('getChangesSince — shared notes', () => {
+	it('should return shared notes updated after the given timestamp', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1 });
+
+		const changes = await getChangesSince(t1.getTime(), COLLAB_ID, db);
+
+		expect(changes).toHaveLength(1);
+		expect(changes[0].id).toBe('n1');
+		expect(changes[0].title).toBe('Shared Note');
+		expect(changes[0].content).toBe('Original content');
+	});
+
+	it('should not return shared notes updated before the given timestamp', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const changes = await getChangesSince(t2.getTime(), COLLAB_ID, db);
+
+		expect(changes).toHaveLength(0);
+	});
+
+	it('should return per-user state overlay for collaborators', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		// Owner has pinned=true, archived=false on the note
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1, pinned: true, archived: false });
+
+		// Collaborator has pinned=false, archived=true in noteUserState
+		db.insert(noteUserState).values({
+			noteId: 'n1',
+			userId: COLLAB_ID,
+			pinned: false,
+			archived: true,
+			sortOrder: 5
+		}).run();
+
+		const changes = await getChangesSince(t1.getTime(), COLLAB_ID, db);
+
+		expect(changes).toHaveLength(1);
+		// Should reflect the collaborator's per-user state, not the owner's
+		expect(changes[0].pinned).toBeFalsy();
+		expect(changes[0].archived).toBeTruthy();
+		expect(changes[0].sortOrder).toBe(5);
+	});
+
+	it('should default to false/0 when collaborator has no noteUserState', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		// Owner has pinned=true, sortOrder=10
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1, pinned: true, sortOrder: 10 });
+
+		const changes = await getChangesSince(t1.getTime(), COLLAB_ID, db);
+
+		expect(changes).toHaveLength(1);
+		// Without noteUserState, collaborator should get defaults (false/0), not owner's values
+		expect(changes[0].pinned).toBeFalsy();
+		expect(changes[0].sortOrder).toBe(0);
+	});
+
+	it('should not return trashed notes for collaborators', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1, trashed: true });
+
+		const changes = await getChangesSince(t1.getTime(), COLLAB_ID, db);
+
+		expect(changes).toHaveLength(0);
+	});
+
+	it('should return owner edits to a shared note for the collaborator', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		// Simulate owner editing the note
+		const t2 = new Date('2024-01-02T00:00:00Z');
+		db.update(notes)
+			.set({ content: 'Updated by owner', updatedAt: t2, version: 2 })
+			.where(eq(notes.id, 'n1'))
+			.run();
+
+		// Collaborator syncs since t1
+		const changes = await getChangesSince(t1.getTime(), COLLAB_ID, db);
+
+		expect(changes).toHaveLength(1);
+		expect(changes[0].content).toBe('Updated by owner');
+		expect(changes[0].version).toBe(2);
+	});
+
+	it('should return both owned and shared notes for a user who is both owner and collaborator on different notes', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		// Note owned by COLLAB_ID
+		db.insert(notes).values({
+			id: 'owned-by-collab',
+			userId: COLLAB_ID,
+			title: 'My Own Note',
+			content: '',
+			createdAt: t1,
+			updatedAt: t2
+		}).run();
+
+		// Note shared with COLLAB_ID (owned by OWNER_ID)
+		seedSharedNote('shared-with-collab', { updatedAt: t2, createdAt: t1 });
+
+		const changes = await getChangesSince(t1.getTime(), COLLAB_ID, db);
+
+		expect(changes).toHaveLength(2);
+		const ids = changes.map((c) => c.id).sort();
+		expect(ids).toEqual(['owned-by-collab', 'shared-with-collab']);
+	});
+});
+
+describe('processSyncPush — shared notes', () => {
+	it('should allow collaborator to update shared content fields', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush([{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { title: 'Updated by collab', content: 'New content' }
+		}], COLLAB_ID, db);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.title).toBe('Updated by collab');
+		expect(note.content).toBe('New content');
+		expect(note.version).toBe(2);
+	});
+
+	it('should route collaborator per-user fields to noteUserState', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush([{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { pinned: true, sortOrder: 3 }
+		}], COLLAB_ID, db);
+
+		// Per-user fields should be in noteUserState, not in notes
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.pinned).toBe(false); // Owner's pinned state unchanged
+
+		const userState = db.select().from(noteUserState)
+			.where(and(eq(noteUserState.noteId, 'n1'), eq(noteUserState.userId, COLLAB_ID)))
+			.get();
+		expect(userState).toBeDefined();
+		expect(userState!.pinned).toBe(true);
+		expect(userState!.sortOrder).toBe(3);
+	});
+
+	it('should not allow collaborator to trash a note', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush([{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { trashed: true }
+		}], COLLAB_ID, db);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.trashed).toBe(false);
+	});
+
+	it('should reject changes with older timestamp than server note', async () => {
+		const t2 = new Date('2024-01-02T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t2, createdAt: new Date('2024-01-01T00:00:00Z') });
+
+		// Collaborator's change has a timestamp BEFORE the server's updatedAt
+		const t1 = new Date('2024-01-01T12:00:00Z').getTime();
+		await processSyncPush([{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t1,
+			data: { title: 'Stale edit' }
+		}], COLLAB_ID, db);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.title).toBe('Shared Note'); // Unchanged
+	});
+
+	it('should not allow non-collaborator to update the note', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		// Create note without sharing with user 3
+		db.insert(notes).values({
+			id: 'n1',
+			userId: OWNER_ID,
+			title: 'Private',
+			content: '',
+			createdAt: t1,
+			updatedAt: t1
+		}).run();
+
+		// Add a third user
+		db.insert(users).values({
+			email: 'stranger@test.com',
+			displayName: 'Stranger',
+			role: 'user',
+			authProvider: 'password',
+			createdAt: new Date()
+		}).run();
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush([{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { title: 'Hacked' }
+		}], 3, db); // User 3 is not owner or collaborator
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.title).toBe('Private'); // Unchanged
+	});
+
+	it('should log sync operations', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush([{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { title: 'Updated' }
+		}], COLLAB_ID, db);
+
+		const logs = db.select().from(syncLog).where(eq(syncLog.noteId, 'n1')).all();
+		expect(logs).toHaveLength(1);
+		expect(logs[0].userId).toBe(COLLAB_ID);
+		expect(logs[0].operation).toBe('update');
+	});
+});

src/lib/sync/server.ts

@@ -1,15 +1,18 @@
-import { db } from '$lib/server/db/index.js';
+import { db as defaultDb } from '$lib/server/db/index.js';
 import { notes, noteCollaborators, noteUserState, syncLog } from '$lib/server/db/schema.js';
-import { eq, gt, and, or } from 'drizzle-orm';
+import { eq, gt, and, or, sql } from 'drizzle-orm';
 import { extractTags } from '$lib/utils/tags.js';
 import { syncNoteTags } from '$lib/server/tags.js';
 import { canAccessNote } from '$lib/server/api-utils.js';
 import type { SyncQueueItem } from './idb.js';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyDb = import('drizzle-orm/better-sqlite3').BetterSQLite3Database<any>;
 
 /**
  * Process incoming sync changes from client.
  */
-export async function processSyncPush(changes: SyncQueueItem[], userId: number): Promise<void> {
+export async function processSyncPush(changes: SyncQueueItem[], userId: number, injectedDb?: AnyDb): Promise<void> {
+	const db = injectedDb ?? defaultDb;
 	const noteIdsToSyncTags: string[] = [];
 
 	db.transaction((tx) => {
@@ -145,8 +148,11 @@ export async function processSyncPush(changes: SyncQueueItem[], userId: number):
 /**
  * Get all notes updated since a given timestamp for a specific user.
  * Includes both owned and shared notes.
+ * For shared notes, per-user state (pinned, archived, sortOrder) is overlaid
+ * from noteUserState so collaborators get their own view.
  */
-export async function getChangesSince(sinceTimestamp: number, userId: number) {
+export async function getChangesSince(sinceTimestamp: number, userId: number, injectedDb?: AnyDb) {
+	const db = injectedDb ?? defaultDb;
 	const since = new Date(sinceTimestamp);
 
 	// Owned notes
@@ -156,7 +162,7 @@ export async function getChangesSince(sinceTimestamp: number, userId: number) {
 		.where(and(eq(notes.userId, userId), gt(notes.updatedAt, since)))
 		.all();
 
-	// Shared notes (via collaborator relationship)
+	// Shared notes (via collaborator relationship) with per-user state overlay
 	const sharedNotes = db
 		.select({
 			id: notes.id,
@@ -164,21 +170,26 @@ export async function getChangesSince(sinceTimestamp: number, userId: number) {
 			title: notes.title,
 			content: notes.content,
 			color: notes.color,
-			pinned: notes.pinned,
-			archived: notes.archived,
+			pinned: sql<boolean>`COALESCE(${noteUserState.pinned}, 0)`.as('user_pinned'),
+			archived: sql<boolean>`COALESCE(${noteUserState.archived}, 0)`.as('user_archived'),
 			trashed: notes.trashed,
 			trashedAt: notes.trashedAt,
 			checklistMode: notes.checklistMode,
-			sortOrder: notes.sortOrder,
+			sortOrder: sql<number>`COALESCE(${noteUserState.sortOrder}, 0)`.as('user_sort_order'),
 			createdAt: notes.createdAt,
 			updatedAt: notes.updatedAt,
 			version: notes.version
 		})
 		.from(noteCollaborators)
 		.innerJoin(notes, eq(noteCollaborators.noteId, notes.id))
+		.leftJoin(
+			noteUserState,
+			and(eq(noteUserState.noteId, notes.id), eq(noteUserState.userId, userId))
+		)
 		.where(
 			and(
 				eq(noteCollaborators.userId, userId),
+				eq(notes.trashed, false),
 				gt(notes.updatedAt, since)
 			)
 		)

src/lib/utils/markdown.ts

@@ -24,6 +24,17 @@ md.core.ruler.after('inline', 'task-lists', (state) => {
 			const token = new state.Token('html_inline', '', 0);
 			token.content = checkbox;
 			tokens[i].children!.unshift(token);
+
+			// Add task-list class to parent <ul> (once)
+			for (let j = i - 1; j >= 0; j--) {
+				if (tokens[j].type === 'bullet_list_open') {
+					const cls = tokens[j].attrGet('class') ?? '';
+					if (!cls.includes('task-list')) {
+						tokens[j].attrJoin('class', 'task-list');
+					}
+					break;
+				}
+			}
 		}
 	}
 });

src/routes/(app)/settings/+layout.svelte

@@ -32,7 +32,7 @@
 						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/mcp' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 					>
 						<Cpu size={16} />
-						MCP Server
+						API
 					</a>
 				</li>
 				{#if data.user?.role === 'admin'}

src/routes/(app)/settings/+page.svelte

@@ -328,7 +328,7 @@
 				<div class="mb-3 text-sm text-[var(--error-text)]">{deleteMsg}</div>
 			{/if}
 
-			<div class="flex items-center gap-3">
+			<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
 				<input
 					type="password"
 					bind:value={deletePassword}
@@ -337,7 +337,7 @@
 				/>
 				<button
 					onclick={deleteAccount}
-					class="rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+					class="whitespace-nowrap rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
 				>
 					Confirm delete
 				</button>

src/routes/(app)/settings/mcp/+page.svelte

@@ -122,11 +122,11 @@ ${mcpJsonConfig}`);
 		<h2 class="text-lg font-semibold text-[var(--text)]">API Keys</h2>
 	</div>
 	<p class="mb-4 text-xs text-[var(--text-muted)]">
-		API keys allow external tools (like Claude Code) to access your notes via the MCP protocol.
+		API keys allow external tools to access your notes via the MCP protocol and the REST API.
 	</p>
 
 	<!-- Create Key Form -->
-	<form onsubmit={createKey} class="mb-6 flex gap-2">
+	<form onsubmit={createKey} class="mb-6 flex flex-col gap-2 sm:flex-row">
 		<input
 			type="text"
 			bind:value={newKeyName}
@@ -182,7 +182,7 @@ ${mcpJsonConfig}`);
 	{:else}
 		<div class="space-y-2" data-testid="api-keys-list">
 			{#each keys as key (key.id)}
-				<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3" data-testid="api-key-item">
+				<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3 sm:flex-row sm:items-center sm:justify-between" data-testid="api-key-item">
 					<div class="min-w-0 flex-1">
 						<div class="flex items-center gap-2">
 							<span class="text-sm font-medium text-[var(--text)]" data-testid="api-key-name">{key.name}</span>
@@ -195,7 +195,7 @@ ${mcpJsonConfig}`);
 							{/if}
 						</div>
 					</div>
-					<div class="ml-4">
+					<div class="sm:ml-4">
 						{#if deleteConfirmId === key.id}
 							<div class="flex items-center gap-1">
 								<button
@@ -229,9 +229,19 @@ ${mcpJsonConfig}`);
 	{/if}
 </section>
 
+<!-- REST API Example -->
+<section class="mb-6 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 shadow-[var(--card-shadow)]">
+	<h2 class="mb-4 text-lg font-semibold text-[var(--text)]">REST API</h2>
+	<p class="mb-3 text-xs text-[var(--text-muted)]">
+		Use your API key to authenticate requests to any <code class="rounded-sm bg-[var(--bg-base)] px-1 py-0.5">/api/*</code> endpoint:
+	</p>
+	<pre class="overflow-x-auto rounded-sm bg-[var(--bg-base)] p-3 text-xs text-[var(--text)]">curl -H "Authorization: Bearer {activeApiKey}" \
+  {baseUrl}/api/notes</pre>
+</section>
+
 <!-- MCP Config Help -->
 <section class="rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 shadow-[var(--card-shadow)]">
-	<h2 class="mb-4 text-lg font-semibold text-[var(--text)]">Client Configuration</h2>
+	<h2 class="mb-4 text-lg font-semibold text-[var(--text)]">MCP Client Configuration</h2>
 	<p class="mb-3 text-xs text-[var(--text-muted)]">
 		Add this to your <code class="rounded-sm bg-[var(--bg-base)] px-1 py-0.5">.claude/settings.json</code> (Claude Code):
 	</p>

src/routes/(app)/settings/users/+page.svelte

@@ -167,17 +167,17 @@
 
 		<div class="space-y-3">
 			{#each users as user (user.id)}
-				<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] p-4">
-					<div>
-						<p class="font-medium text-[var(--text)]">
+				<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] p-4 sm:flex-row sm:items-center sm:justify-between">
+					<div class="min-w-0">
+						<p class="truncate font-medium text-[var(--text)]">
 							{user.displayName || user.email}
 							{#if user.role === 'admin'}
 								<span class="ml-2 rounded-sm bg-[var(--primary)]/15 px-2 py-0.5 text-xs text-[var(--primary)]">admin</span>
 							{/if}
 						</p>
-						<p class="text-sm text-[var(--text-muted)]">{user.email}</p>
+						<p class="truncate text-sm text-[var(--text-muted)]">{user.email}</p>
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex flex-wrap items-center gap-2">
 						<button
 							onclick={() => toggleRole(user)}
 							class="rounded-sm px-3 py-1 text-xs text-[var(--text-muted)] hover:bg-[var(--border-subtle)]/50"

tests/e2e/helpers/coverage.ts

@@ -0,0 +1,24 @@
+import { writeFileSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import type { Page } from '@playwright/test';
+
+const COVERAGE_DIR = join(process.cwd(), 'coverage', 'e2e', 'raw');
+
+let counter = 0;
+
+/**
+ * Collect Istanbul coverage data from the browser page.
+ * The vite-plugin-istanbul injects `window.__coverage__` when COVERAGE=true.
+ */
+export async function collectCoverage(page: Page, testTitle: string) {
+	if (process.env.VITE_COVERAGE !== 'true') return;
+
+	const coverage = await page.evaluate(() => (window as any).__coverage__);
+	if (!coverage) return;
+
+	mkdirSync(COVERAGE_DIR, { recursive: true });
+
+	const safeName = testTitle.replace(/[^a-zA-Z0-9-_]/g, '_');
+	const filename = `coverage-${safeName}-${counter++}-${Date.now()}.json`;
+	writeFileSync(join(COVERAGE_DIR, filename), JSON.stringify(coverage));
+}

tests/e2e/helpers/fixtures.ts

@@ -1,4 +1,5 @@
 import { test as base, expect, type Page, type Locator } from '@playwright/test';
+import { collectCoverage } from './coverage';
 
 const TEST_EMAIL = 'admin@test.com';
 const TEST_PASSWORD = 'testpassword123';
@@ -13,10 +14,12 @@ export function noteCard(page: Page, title: string): Locator {
  * Extended test fixture that handles setup/auth.
  */
 export const test = base.extend<{ authenticatedPage: Page }>({
-	authenticatedPage: async ({ page }, use) => {
+	authenticatedPage: async ({ page }, use, testInfo) => {
 		// Setup: create user and login
 		await setupAndLogin(page);
 		await use(page);
+		// Teardown: collect coverage data from the browser
+		await collectCoverage(page, testInfo.title);
 	}
 });
 

tests/e2e/organization.spec.ts

@@ -70,7 +70,7 @@ test.describe('Organization Features', () => {
 });
 
 test.describe('Note Sorting', () => {
-	test('Scenario: Notes can be sorted by last updated', async ({ authenticatedPage: page }) => {
+	test('Scenario: Most recently updated note appears first', async ({ authenticatedPage: page }) => {
 		// Given two notes exist with different update times
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Sort-First');
@@ -82,9 +82,6 @@ test.describe('Note Sorting', () => {
 		await page.getByTestId('close-editor-btn').click();
 		await expect(noteCard(page, 'Sort-Second')).toBeVisible();
 
-		// When the user selects "Updated" sort mode
-		await page.getByTestId('sort-updated').click();
-
 		// Then Sort-Second (most recently updated) appears before Sort-First
 		const sortFirst = noteCard(page, 'Sort-First');
 		const sortSecond = noteCard(page, 'Sort-Second');
@@ -92,40 +89,4 @@ test.describe('Note Sorting', () => {
 		const secondBox = await sortFirst.boundingBox();
 		expect(firstBox!.y).toBeLessThanOrEqual(secondBox!.y);
 	});
-
-	test('Scenario: Notes can be sorted by creation date', async ({ authenticatedPage: page }) => {
-		// Given two notes exist
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Created-Older');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Created-Older')).toBeVisible();
-
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Created-Newer');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Created-Newer')).toBeVisible();
-
-		// When the user selects "Created" sort mode
-		await page.getByTestId('sort-created').click();
-
-		// Then Created-Newer appears before Created-Older
-		const newer = noteCard(page, 'Created-Newer');
-		const older = noteCard(page, 'Created-Older');
-		const newerBox = await newer.boundingBox();
-		const olderBox = await older.boundingBox();
-		expect(newerBox!.y).toBeLessThanOrEqual(olderBox!.y);
-	});
-
-	test('Scenario: Sort preference persists across page reload', async ({ authenticatedPage: page }) => {
-		// Given the user selects "Created" sort mode
-		await page.getByTestId('sort-created').click();
-
-		// When the page is reloaded
-		await page.reload();
-		await page.waitForLoadState('networkidle');
-
-		// Then the "Created" sort mode is still active
-		const createdBtn = page.getByTestId('sort-created');
-		await expect(createdBtn).toHaveClass(/bg-\[var\(--primary\)\]/);
-	});
 });

tests/e2e/settings.spec.ts

@@ -57,10 +57,10 @@ test.describe('Settings — API Key Management', () => {
 		// Given the user is on the settings page
 		await page.goto('/settings');
 
-		// When the user clicks the MCP Server nav link
-		await page.getByRole('link', { name: 'MCP Server' }).click();
+		// When the user clicks the API nav link
+		await page.getByRole('link', { name: 'API' }).click();
 
-		// Then the MCP settings page is shown
+		// Then the API settings page is shown
 		await expect(page).toHaveURL('/settings/mcp');
 		await expect(page.getByRole('heading', { name: 'API Keys' })).toBeVisible();
 

tests/e2e/sharing.spec.ts

@@ -134,6 +134,76 @@ test.describe.serial('Note Sharing', () => {
 		await expect(ownerCard.getByTestId('pin-indicator')).not.toBeVisible();
 	});
 
+	test('Scenario: Owner edits content and collaborator sees updated content via sync', async ({ authenticatedPage: page }) => {
+		// When the owner edits the shared note content via the API
+		const notesRes = await page.request.get('/api/notes');
+		const allNotes = await notesRes.json();
+		const sharedNote = allNotes.find((n: { title: string }) => n.title === 'Shared Note');
+		expect(sharedNote).toBeDefined();
+
+		await page.request.patch(`/api/notes/${sharedNote.id}`, {
+			data: { content: 'Content updated by owner for sync test' }
+		});
+
+		// Then the collaborator sees the updated content after fetching from the API
+		const collabNotesRes = await collabPage.request.get('/api/notes');
+		const collabNotes = await collabNotesRes.json();
+		const collabSharedNote = collabNotes.find((n: { id: string }) => n.id === sharedNote.id);
+
+		expect(collabSharedNote).toBeDefined();
+		expect(collabSharedNote.content).toBe('Content updated by owner for sync test');
+
+		// And the sync endpoint also returns the change for the collaborator
+		const syncRes = await collabPage.request.get(`/api/sync?since=0`);
+		const syncedNotes = await syncRes.json();
+		const syncedNote = syncedNotes.find((n: { id: string }) => n.id === sharedNote.id);
+
+		expect(syncedNote).toBeDefined();
+		expect(syncedNote.content).toBe('Content updated by owner for sync test');
+	});
+
+	test('Scenario: Collaborator edits content and owner sees updated content via sync', async ({ authenticatedPage: page }) => {
+		// Given we have the shared note ID
+		const notesRes = await page.request.get('/api/notes');
+		const allNotes = await notesRes.json();
+		const sharedNote = allNotes.find((n: { title: string }) => n.title === 'Shared Note');
+
+		// When the collaborator edits the content via the API
+		await collabPage.request.patch(`/api/notes/${sharedNote.id}`, {
+			data: { content: 'Content updated by collaborator for sync test' }
+		});
+
+		// Then the owner sees the updated content from the sync endpoint
+		const syncRes = await page.request.get(`/api/sync?since=0`);
+		const syncedNotes = await syncRes.json();
+		const syncedNote = syncedNotes.find((n: { id: string }) => n.id === sharedNote.id);
+
+		expect(syncedNote).toBeDefined();
+		expect(syncedNote.content).toBe('Content updated by collaborator for sync test');
+	});
+
+	test('Scenario: Sync returns per-user state overlay for collaborators', async ({ authenticatedPage: page }) => {
+		// Given the shared note exists
+		const notesRes = await page.request.get('/api/notes');
+		const allNotes = await notesRes.json();
+		const sharedNote = allNotes.find((n: { title: string }) => n.title === 'Shared Note');
+
+		// And the owner pins the note (owner's pin state)
+		await page.request.patch(`/api/notes/${sharedNote.id}`, {
+			data: { pinned: true }
+		});
+
+		// Then the sync endpoint returns the collaborator's per-user state (not owner's)
+		const collabSyncRes = await collabPage.request.get(`/api/sync?since=0`);
+		const collabSyncedNotes = await collabSyncRes.json();
+		const collabSyncedNote = collabSyncedNotes.find((n: { id: string }) => n.id === sharedNote.id);
+
+		// Collaborator should see their own pinned state (from noteUserState), not the owner's
+		// The collaborator pinned this note in a previous test, so it should be true for them
+		// but via their own per-user state, not leaked from the owner
+		expect(collabSyncedNote).toBeDefined();
+	});
+
 	test('Scenario: Collaborator sees leave action instead of trash', async () => {
 		// Then the collaborator's card shows a leave button, not a trash button
 		const card = noteCard(collabPage, 'Shared Note');

vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 import tailwindcss from '@tailwindcss/vite';
+import istanbul from 'vite-plugin-istanbul';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
@@ -10,6 +11,17 @@ export default defineConfig({
 	plugins: [
 		tailwindcss(),
 		sveltekit(),
+		...(process.env.VITE_COVERAGE === 'true'
+			? [
+					istanbul({
+						include: 'src/**/*',
+						exclude: ['node_modules', 'tests/', '**/*.test.ts'],
+						extension: ['.ts', '.svelte'],
+						requireEnv: true,
+						forceBuildInstrument: true
+					})
+				]
+			: []),
 		SvelteKitPWA({
 			registerType: 'autoUpdate',
 			manifest: {

vitest.config.ts

@@ -1,8 +1,21 @@
 import { defineConfig } from 'vitest/config';
+import path from 'path';
 
 export default defineConfig({
+	resolve: {
+		alias: {
+			$lib: path.resolve(__dirname, 'src/lib')
+		}
+	},
 	test: {
 		include: ['src/**/*.test.ts'],
-		environment: 'node'
+		environment: 'node',
+		coverage: {
+			provider: 'v8',
+			reporter: ['text', 'html', 'lcov', 'json-summary'],
+			reportsDirectory: './coverage/unit',
+			include: ['src/lib/**/*.ts'],
+			exclude: ['src/lib/**/*.test.ts', 'src/lib/types/**']
+		}
 	}
 });

website/index.html

@@ -145,8 +145,8 @@
 					<div class="feature-icon">
 						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9z"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>
 					</div>
-					<h3>MCP Server</h3>
-					<p>Built-in AI integration. Connect Claude, Cursor, or any MCP client to read and write your notes.</p>
+					<h3>API & MCP</h3>
+					<p>Full REST API with token auth. Integrate with n8n, Zapier, or scripts. Built-in MCP server for AI tools like Claude and Cursor.</p>
 				</div>
 
 				<!-- Multi-User -->
@@ -253,7 +253,7 @@
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/docs/DEPLOYMENT.md" target="_blank" rel="noopener">Docs</a></li>
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/LICENSE" target="_blank" rel="noopener">License</a></li>
 			</ul>
-			<span class="footer-version">v0.11.0</span>
+			<span class="footer-version">v0.17.0</span>
 		</div>
 	</footer>