From a65ab711ef6ddb668e60e7d51b1b909053340227 Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Wed, 21 Oct 2026 21:35:41 +0200
Subject: [PATCH] W2 web expenses, search and CSV export
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

W-5 expense editor (S-7): amount, description, category quick row and
"Alla" grid with the §9.11 suggestion for a new expense (CS-1 to CS-7),
the four fixed option rows (D-102), split modes default, ratio, exact and
full with live shares, notes, inline §9.6 validation, one POST /sync per
save, delete with confirmation, the discard dialog on Cancel, Esc and
in-app navigation (D-080), rejection and network failures shown on the
page with the form kept (§15.5). Defaults per AC-8.6 with this browser's
last account and category; ?account= preselects the opener's account.

W-6 expense detail (S-8): hero, facts, shares and mode, recurring
template badge, the AC-12.4 timeline, deleted and missing states.

W-12 search with filters in the URL query, count and sum, rows a hundred
at a time, and the CSV export (UTF-8 BOM, semicolons, CRLF, decimal
comma, ISO dates, header in the page language), built in the browser.

The §9.11 port passes contracts/test-vectors/suggest_category.json (65
cases); the keyword table is a Vite raw import of
contracts/category-keywords.csv, which needs ../contracts in
server.fs.allow (vite.config.ts).

Shared editor fields of design-spec §3.7 in web/src/components/editor/
for W5's template editor.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TQd3pEP9UeN2uifbHknQ7B
---
 web/src/components/editor/AccountDot.tsx      |  30 +
 web/src/components/editor/CategoryPicker.tsx  | 115 +++
 web/src/components/editor/ConfirmDialog.tsx   |  73 ++
 web/src/components/editor/DateField.tsx       |  89 +++
 web/src/components/editor/Editor.module.css   | 379 ++++++++++
 web/src/components/editor/NotesField.tsx      |  65 ++
 web/src/components/editor/OptionRows.tsx      |  78 +++
 web/src/components/editor/PayerRow.tsx        |  38 +
 web/src/components/editor/SelectField.tsx     | 103 +++
 web/src/components/editor/SplitSection.tsx    | 411 +++++++++++
 web/src/components/editor/categories.test.ts  |  66 ++
 web/src/components/editor/categories.ts       |  66 ++
 web/src/components/editor/index.ts            |  49 ++
 web/src/components/editor/people.ts           |  12 +
 web/src/components/editor/split.test.ts       | 152 ++++
 web/src/components/editor/split.ts            | 219 ++++++
 .../expenses/ExpenseDetailPage.test.tsx       | 175 +++++
 .../features/expenses/ExpenseDetailPage.tsx   | 248 ++++++-
 .../expenses/ExpenseEditorPage.test.tsx       | 456 ++++++++++++
 .../features/expenses/ExpenseEditorPage.tsx   | 661 +++++++++++++++++-
 web/src/features/expenses/Expenses.module.css | 191 +++++
 web/src/features/expenses/PageStates.tsx      |  32 +
 web/src/features/expenses/Timeline.tsx        |  25 +
 web/src/features/expenses/i18n/en.json        |   5 +
 web/src/features/expenses/i18n/sv.json        |   5 +
 web/src/features/expenses/messages.ts         |  60 ++
 web/src/features/expenses/model.ts            | 134 ++++
 .../features/expenses/suggest/forLedger.ts    |  35 +
 web/src/features/expenses/suggest/keywords.ts |   8 +
 .../features/expenses/suggest/suggest.test.ts |  76 ++
 web/src/features/expenses/suggest/suggest.ts  | 170 +++++
 web/src/features/expenses/testLedger.ts       | 233 ++++++
 .../features/expenses/timelineLines.test.ts   |  93 +++
 web/src/features/expenses/timelineLines.ts    | 169 +++++
 web/src/features/expenses/usePushExpense.ts   |  45 ++
 web/src/features/export/ExportCsvButton.tsx   |  25 +
 web/src/features/export/csv.test.ts           | 109 +++
 web/src/features/export/csv.ts                |  76 ++
 web/src/features/export/download.ts           |  18 +
 web/src/features/export/i18n/en.json          |   5 +
 web/src/features/export/i18n/sv.json          |   5 +
 web/src/features/search/Search.module.css     |  40 ++
 web/src/features/search/SearchPage.test.tsx   | 180 +++++
 web/src/features/search/SearchPage.tsx        | 251 ++++++-
 web/src/features/search/filter.test.ts        | 103 +++
 web/src/features/search/filter.ts             | 116 +++
 web/src/features/search/i18n/en.json          |  18 +
 web/src/features/search/i18n/sv.json          |  18 +
 web/vite.config.ts                            |   4 +
 49 files changed, 5721 insertions(+), 13 deletions(-)
 create mode 100644 web/src/components/editor/AccountDot.tsx
 create mode 100644 web/src/components/editor/CategoryPicker.tsx
 create mode 100644 web/src/components/editor/ConfirmDialog.tsx
 create mode 100644 web/src/components/editor/DateField.tsx
 create mode 100644 web/src/components/editor/Editor.module.css
 create mode 100644 web/src/components/editor/NotesField.tsx
 create mode 100644 web/src/components/editor/OptionRows.tsx
 create mode 100644 web/src/components/editor/PayerRow.tsx
 create mode 100644 web/src/components/editor/SelectField.tsx
 create mode 100644 web/src/components/editor/SplitSection.tsx
 create mode 100644 web/src/components/editor/categories.test.ts
 create mode 100644 web/src/components/editor/categories.ts
 create mode 100644 web/src/components/editor/index.ts
 create mode 100644 web/src/components/editor/people.ts
 create mode 100644 web/src/components/editor/split.test.ts
 create mode 100644 web/src/components/editor/split.ts
 create mode 100644 web/src/features/expenses/ExpenseDetailPage.test.tsx
 create mode 100644 web/src/features/expenses/ExpenseEditorPage.test.tsx
 create mode 100644 web/src/features/expenses/Expenses.module.css
 create mode 100644 web/src/features/expenses/PageStates.tsx
 create mode 100644 web/src/features/expenses/Timeline.tsx
 create mode 100644 web/src/features/expenses/i18n/en.json
 create mode 100644 web/src/features/expenses/i18n/sv.json
 create mode 100644 web/src/features/expenses/messages.ts
 create mode 100644 web/src/features/expenses/model.ts
 create mode 100644 web/src/features/expenses/suggest/forLedger.ts
 create mode 100644 web/src/features/expenses/suggest/keywords.ts
 create mode 100644 web/src/features/expenses/suggest/suggest.test.ts
 create mode 100644 web/src/features/expenses/suggest/suggest.ts
 create mode 100644 web/src/features/expenses/testLedger.ts
 create mode 100644 web/src/features/expenses/timelineLines.test.ts
 create mode 100644 web/src/features/expenses/timelineLines.ts
 create mode 100644 web/src/features/expenses/usePushExpense.ts
 create mode 100644 web/src/features/export/ExportCsvButton.tsx
 create mode 100644 web/src/features/export/csv.test.ts
 create mode 100644 web/src/features/export/csv.ts
 create mode 100644 web/src/features/export/download.ts
 create mode 100644 web/src/features/export/i18n/en.json
 create mode 100644 web/src/features/export/i18n/sv.json
 create mode 100644 web/src/features/search/Search.module.css
 create mode 100644 web/src/features/search/SearchPage.test.tsx
 create mode 100644 web/src/features/search/filter.test.ts
 create mode 100644 web/src/features/search/filter.ts
 create mode 100644 web/src/features/search/i18n/en.json
 create mode 100644 web/src/features/search/i18n/sv.json

diff --git a/web/src/components/editor/AccountDot.tsx b/web/src/components/editor/AccountDot.tsx
new file mode 100644
index 0000000..7d9925f
--- /dev/null
+++ b/web/src/components/editor/AccountDot.tsx
@@ -0,0 +1,30 @@
+import styles from './Editor.module.css';
+
+/** Chart colours for accounts (design-spec §2.4): `--chart-cat-(position mod 8 + 1)`. */
+const CHART_COLOURS = 8;
+
+/** An account's colour position: its index among the household's accounts in created order (then id). */
+export function accountColorIndex(accountId: string, accounts: Iterable<{ id: string; created_at: string }>): number {
+  const ordered = [...accounts].sort((a, b) =>
+    a.created_at < b.created_at ? -1 : a.created_at > b.created_at ? 1 : a.id < b.id ? -1 : a.id > b.id ? 1 : 0,
+  );
+  return Math.max(
+    0,
+    ordered.findIndex((a) => a.id === accountId),
+  );
+}
+
+/** The account chip's leading dot (design-spec §3.7): a 12 px circle in the account's chart colour. Decorative. */
+export function AccountDot({ colorIndex, size = 12 }: { colorIndex: number; size?: number }) {
+  return (
+    <span
+      className={styles.accountDot}
+      aria-hidden="true"
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: `var(--chart-cat-${(colorIndex % CHART_COLOURS) + 1})`,
+      }}
+    />
+  );
+}
diff --git a/web/src/components/editor/CategoryPicker.tsx b/web/src/components/editor/CategoryPicker.tsx
new file mode 100644
index 0000000..3d27e42
--- /dev/null
+++ b/web/src/components/editor/CategoryPicker.tsx
@@ -0,0 +1,115 @@
+import { useId, useState } from 'react';
+import type { Category } from '../../api/types';
+import { Icon } from '../../design/Icon';
+import { useI18n } from '../../i18n/useI18n';
+import { CategoryIcon } from '../CategoryIcon';
+import { Dialog } from '../Dialog';
+import { categoryName } from './categories';
+import styles from './Editor.module.css';
+
+/** Tile size in the quick row and the grid (design-spec §3.4: 52). */
+const TILE = 52;
+
+function CategoryItem({ category, selected, onPick }: { category: Category; selected: boolean; onPick: () => void }) {
+  const { t } = useI18n();
+  const name = categoryName(category, t);
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected}
+      className={[styles.categoryItem, selected ? styles.categoryItemSelected : undefined].filter(Boolean).join(' ')}
+      onClick={onPick}
+      title={name}
+    >
+      <span className={styles.categoryTileBox}>
+        <CategoryIcon
+          icon={category.icon}
+          color={category.color}
+          size={TILE}
+          variant={selected ? 'solid' : 'container'}
+          archived={category.archived_at !== null}
+        />
+        {selected ? (
+          <span className={styles.checkBadge} aria-hidden="true">
+            <Icon name="check" size={14} />
+          </span>
+        ) : null}
+      </span>
+      <span className={styles.categoryLabel}>{name}</span>
+    </button>
+  );
+}
+
+interface Props {
+  /** The five quick-row categories (`quickRowCategories`). */
+  quick: readonly Category[];
+  /** Every active category in `sort_order`, for the "Alla" grid. */
+  all: readonly Category[];
+  selectedId: string | null;
+  /** Called on every pick, also of the category already selected (CS-2's "picked by hand" flag). */
+  onPick: (categoryId: string) => void;
+}
+
+/**
+ * `CategoryQuickRow` and `CategoryGridSheet` (design-spec §3.7): a radio group "Kategori" of five tiles and "Alla",
+ * which opens a dialog "Välj kategori" with every active category; picking there selects and closes.
+ */
+export function CategoryPicker({ quick, all, selectedId, onPick }: Props) {
+  const { t } = useI18n();
+  const labelId = useId();
+  const [gridOpen, setGridOpen] = useState(false);
+  const close = () => {
+    setGridOpen(false);
+  };
+  return (
+    <div className={styles.fieldRoot}>
+      <span className={styles.fieldLabel} id={labelId}>
+        {t('editor_category')}
+      </span>
+      <div className={styles.categoryRow} role="radiogroup" aria-labelledby={labelId}>
+        {quick.map((category) => (
+          <CategoryItem
+            key={category.id}
+            category={category}
+            selected={category.id === selectedId}
+            onPick={() => {
+              onPick(category.id);
+            }}
+          />
+        ))}
+        <button
+          type="button"
+          className={styles.categoryItem}
+          aria-label={t('editor_category_all_spoken')}
+          aria-haspopup="dialog"
+          onClick={() => {
+            setGridOpen(true);
+          }}
+        >
+          <span className={styles.allTile} style={{ width: TILE, height: TILE }} aria-hidden="true">
+            <Icon name="apps" size={26} />
+          </span>
+          <span className={styles.categoryLabel} aria-hidden="true">
+            {t('editor_category_all')}
+          </span>
+        </button>
+      </div>
+      <Dialog open={gridOpen} title={t('editor_pick_category')} onClose={close}>
+        <div className={styles.categoryGrid} role="radiogroup" aria-label={t('editor_category')}>
+          {all.map((category) => (
+            <CategoryItem
+              key={category.id}
+              category={category}
+              selected={category.id === selectedId}
+              onPick={() => {
+                onPick(category.id);
+                close();
+              }}
+            />
+          ))}
+        </div>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/web/src/components/editor/ConfirmDialog.tsx b/web/src/components/editor/ConfirmDialog.tsx
new file mode 100644
index 0000000..01e572e
--- /dev/null
+++ b/web/src/components/editor/ConfirmDialog.tsx
@@ -0,0 +1,73 @@
+import { Button } from '../Button';
+import { Dialog } from '../Dialog';
+import { Icon } from '../../design/Icon';
+import type { OutlineIconName } from '../../design/icons.generated';
+import styles from './Editor.module.css';
+
+interface Props {
+  open: boolean;
+  title: string;
+  /** Body text; discard dialogs have none (D-080). */
+  body?: string;
+  confirmLabel: string;
+  dismissLabel: string;
+  onConfirm: () => void;
+  onDismiss: () => void;
+  /** Error colours for the icon and the confirm button (deletes). */
+  destructive?: boolean;
+  icon?: OutlineIconName;
+  /** Disables the confirm button while the action runs. */
+  busy?: boolean;
+}
+
+/**
+ * `ConfirmDialog` (design-spec §3.11): an alert dialog with an optional icon tile, title, optional body, dismiss (text)
+ * and confirm (filled, or error filled when destructive). Esc and the scrim dismiss.
+ */
+export function ConfirmDialog({
+  open,
+  title,
+  body,
+  confirmLabel,
+  dismissLabel,
+  onConfirm,
+  onDismiss,
+  destructive = false,
+  icon,
+  busy = false,
+}: Props) {
+  return (
+    <Dialog
+      open={open}
+      alert
+      title={title}
+      onClose={onDismiss}
+      actions={
+        <>
+          <Button variant="text" onClick={onDismiss}>
+            {dismissLabel}
+          </Button>
+          <Button variant={destructive ? 'danger' : 'filled'} onClick={onConfirm} disabled={busy} aria-busy={busy}>
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      {icon === undefined && body === undefined ? undefined : (
+        <>
+          {icon === undefined ? null : (
+            <span
+              className={[styles.confirmIcon, destructive ? styles.confirmIconDestructive : undefined]
+                .filter(Boolean)
+                .join(' ')}
+              aria-hidden="true"
+            >
+              <Icon name={icon} size={28} />
+            </span>
+          )}
+          {body === undefined ? null : <p>{body}</p>}
+        </>
+      )}
+    </Dialog>
+  );
+}
diff --git a/web/src/components/editor/DateField.tsx b/web/src/components/editor/DateField.tsx
new file mode 100644
index 0000000..7ceb64a
--- /dev/null
+++ b/web/src/components/editor/DateField.tsx
@@ -0,0 +1,89 @@
+import { useId } from 'react';
+import styles from './Editor.module.css';
+
+interface Props {
+  label: string;
+  /** `YYYY-MM-DD`, or '' when empty. */
+  value: string;
+  onChange: (value: string) => void;
+  /** Inclusive bounds, `YYYY-MM-DD` (SPEC §9.6 for expense dates: 2000-01-01 to today + 365 days). */
+  min?: string;
+  max?: string;
+  error?: string | null;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * A labelled native date input in the filled field style: the browser's own date picker and keyboard entry, the value
+ * always ISO (`YYYY-MM-DD`). Used for the search date range and wherever a plain date field is needed.
+ */
+export function DateField({ label, value, onChange, min, max, error, id, className }: Props) {
+  const generated = useId();
+  const inputId = id ?? generated;
+  const errorId = `${inputId}-error`;
+  return (
+    <div className={[styles.fieldRoot, error ? styles.fieldInvalid : undefined, className].filter(Boolean).join(' ')}>
+      <label className={styles.fieldLabel} htmlFor={inputId}>
+        {label}
+      </label>
+      <div className={styles.fieldBox}>
+        <DateControl
+          id={inputId}
+          value={value}
+          onChange={onChange}
+          min={min}
+          max={max}
+          invalid={Boolean(error)}
+          describedBy={error ? errorId : undefined}
+          className={styles.control}
+        />
+      </div>
+      {error ? (
+        <p id={errorId} className={styles.fieldError} role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/** The bare date input (no label), for a row that renders its own label (`OptionRow` with `controlId`). */
+export function DateControl({
+  id,
+  value,
+  onChange,
+  min,
+  max,
+  invalid,
+  describedBy,
+  className,
+  required,
+}: {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  min?: string;
+  max?: string;
+  invalid?: boolean;
+  describedBy?: string;
+  className?: string;
+  required?: boolean;
+}) {
+  return (
+    <input
+      id={id}
+      type="date"
+      className={className}
+      value={value}
+      min={min}
+      max={max}
+      required={required}
+      aria-invalid={invalid ? true : undefined}
+      aria-describedby={describedBy}
+      onChange={(event) => {
+        onChange(event.target.value);
+      }}
+    />
+  );
+}
diff --git a/web/src/components/editor/Editor.module.css b/web/src/components/editor/Editor.module.css
new file mode 100644
index 0000000..f6da01c
--- /dev/null
+++ b/web/src/components/editor/Editor.module.css
@@ -0,0 +1,379 @@
+/* Shared expense-editor fields (design-spec §3.7). Tokens only. */
+
+/* Native select and date controls, filled like TextField (design-spec §2.9). */
+.fieldRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  min-width: 0;
+}
+.fieldLabel {
+  font: var(--type-label-medium);
+  letter-spacing: var(--tracking-label-small);
+  color: var(--on-surface-variant);
+}
+.fieldBox {
+  display: flex;
+  align-items: center;
+  min-height: var(--row-min);
+  padding: 0 var(--s4);
+  border-radius: var(--radius-large);
+  background: var(--surface-container-high);
+  color: var(--on-surface);
+}
+.fieldBox:focus-within {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+.fieldInvalid .fieldLabel {
+  color: var(--error);
+}
+.fieldInvalid .fieldBox {
+  box-shadow: inset 0 0 0 2px var(--error);
+}
+.fieldError {
+  padding: 0 var(--s4);
+  font: var(--type-body-small);
+  letter-spacing: var(--tracking-body-small);
+  color: var(--error);
+}
+.control {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: var(--type-body-large);
+  padding: var(--s3) 0;
+  outline: none;
+  text-overflow: ellipsis;
+}
+.control option {
+  background: var(--surface-container-high);
+  color: var(--on-surface);
+}
+
+/* EditorOptionRows (D-102): four fixed full-width rows in a segmented group. */
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-segmented);
+}
+.row {
+  display: grid;
+  grid-template-columns: var(--s6) minmax(5.5rem, max-content) minmax(0, 1fr) var(--s6);
+  align-items: center;
+  column-gap: var(--s3);
+  width: 100%;
+  min-height: var(--touch-target);
+  padding: var(--s2) var(--s4);
+  border: none;
+  border-radius: var(--radius-group-inner);
+  background: var(--surface-container-high);
+  color: var(--on-surface);
+  font: inherit;
+  text-align: start;
+}
+.rows > .row:first-child {
+  border-top-left-radius: var(--radius-group-outer);
+  border-top-right-radius: var(--radius-group-outer);
+}
+.rows > .row:last-child {
+  border-bottom-left-radius: var(--radius-group-outer);
+  border-bottom-right-radius: var(--radius-group-outer);
+}
+button.row {
+  cursor: pointer;
+}
+button.row:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+.row:focus-within {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+.rowActive {
+  background: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+.rowLeading,
+.rowTrailing {
+  display: inline-grid;
+  place-items: center;
+  color: var(--on-surface-variant);
+}
+.rowLabel {
+  font: var(--type-label-large);
+  letter-spacing: var(--tracking-label);
+  color: var(--on-surface-variant);
+}
+.rowValue {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  min-width: 0;
+  font: var(--type-body-large);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rowValueText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rowHint {
+  color: var(--on-surface-variant);
+  font: var(--type-body-medium);
+}
+.rowControl {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: var(--type-body-large);
+  padding: 0;
+  outline: none;
+}
+.accountDot {
+  display: inline-block;
+  border-radius: 50%;
+}
+
+/* CategoryQuickRow and the "Alla" grid (design-spec §3.7). */
+.categoryRow,
+.categoryGrid {
+  display: grid;
+  gap: var(--s1);
+}
+.categoryRow {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.categoryGrid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  row-gap: var(--s3);
+}
+.categoryItem {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s1);
+  min-width: 0;
+  padding: var(--s1) 0;
+  border: none;
+  border-radius: var(--radius-medium);
+  background: transparent;
+  color: var(--on-surface-variant);
+  cursor: pointer;
+  font: var(--type-label-small);
+  text-align: center;
+}
+.categoryItem:focus-visible {
+  outline: 2px solid var(--primary);
+}
+.categoryItemSelected {
+  color: var(--on-surface);
+  font-weight: 700;
+}
+.categoryTileBox {
+  position: relative;
+  display: inline-grid;
+}
+.categoryLabel {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  hyphens: auto;
+  max-width: 100%;
+}
+.checkBadge {
+  position: absolute;
+  top: calc(-1 * var(--s1));
+  right: calc(-1 * var(--s2));
+  display: inline-grid;
+  place-items: center;
+  width: var(--s5);
+  height: var(--s5);
+  border-radius: 50%;
+  background: var(--on-surface);
+  color: var(--surface);
+  box-shadow: 0 0 0 2px var(--surface);
+}
+.allTile {
+  display: inline-grid;
+  place-items: center;
+  border-radius: var(--radius-category-tile);
+  background: var(--surface-container-highest);
+  color: var(--on-surface-variant);
+}
+
+/* SplitSection (design-spec §3.7). */
+.splitSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  padding: var(--s4);
+  border-radius: var(--radius-extra-large);
+  background: var(--surface-container-low);
+}
+.splitHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font: var(--type-title-small);
+}
+.iconButton {
+  display: inline-grid;
+  place-items: center;
+  width: var(--touch-target);
+  height: var(--touch-target);
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--on-surface-variant);
+  cursor: pointer;
+}
+.iconButton:focus-visible {
+  outline: 2px solid var(--primary);
+}
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s2);
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s1);
+  min-height: var(--s8);
+  padding: 0 var(--s3);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-small);
+  background: transparent;
+  color: var(--on-surface-variant);
+  font: var(--type-label-large);
+  cursor: pointer;
+}
+.chip:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+.chipSelected {
+  border-color: transparent;
+  background: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+.splitPair {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--s3);
+}
+.splitPerson {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s3);
+}
+.splitPerson > :last-child {
+  flex: 1;
+  min-width: 0;
+}
+.presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s2);
+}
+.derived input {
+  color: var(--on-surface-variant);
+}
+.errorBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  padding: var(--s3) var(--s4);
+  border-radius: var(--radius-medium);
+  background: var(--error-container);
+  color: var(--on-error-container);
+  font: var(--type-title-small);
+}
+.question {
+  font: var(--type-label-large);
+  color: var(--on-surface-variant);
+}
+.bearers {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--s2);
+}
+.bearer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s2);
+  min-height: var(--s12);
+  padding: 0 var(--s3);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--on-surface);
+  font: var(--type-label-large);
+  cursor: pointer;
+}
+.bearer:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+.bearerSelected {
+  border-color: transparent;
+  background: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+.splitBar {
+  display: flex;
+  gap: 3px;
+  width: 100%;
+}
+.splitBarThin {
+  max-width: 72px;
+}
+.splitSegment {
+  border-radius: var(--radius-full);
+  min-width: 0;
+}
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+  font: var(--type-body-medium);
+  letter-spacing: var(--tracking-body-medium);
+  color: var(--on-surface-variant);
+}
+.preview strong {
+  font-weight: 700;
+  color: var(--on-surface);
+}
+
+/* NotesField. */
+.notesButton {
+  align-self: flex-start;
+}
+
+/* ConfirmDialog (design-spec §3.11). */
+.confirmIcon {
+  display: inline-grid;
+  place-items: center;
+  align-self: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+.confirmIconDestructive {
+  background: var(--error-container);
+  color: var(--on-error-container);
+}
diff --git a/web/src/components/editor/NotesField.tsx b/web/src/components/editor/NotesField.tsx
new file mode 100644
index 0000000..6e936d2
--- /dev/null
+++ b/web/src/components/editor/NotesField.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+import { Icon } from '../../design/Icon';
+import { useI18n } from '../../i18n/useI18n';
+import { Button } from '../Button';
+import { TextField } from '../TextField';
+import styles from './Editor.module.css';
+
+/** Notes limit of SPEC §9.6 (code points). */
+export const NOTES_MAX = 1000;
+
+/** Length in Unicode code points (SPEC §9.6 counts code points). */
+export function codePoints(text: string): number {
+  return Array.from(text).length;
+}
+
+/**
+ * `NotesField` (design-spec §3.7): collapsed as "Lägg till anteckning"; expanded (or when there are notes) a multi-line
+ * field "Anteckningar" with the counter "120 / 1000" as supporting text.
+ */
+export function NotesField({
+  value,
+  onChange,
+  error,
+  max = NOTES_MAX,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string | null;
+  max?: number;
+}) {
+  const { t } = useI18n();
+  const [expanded, setExpanded] = useState(value !== '');
+  const [focusOnOpen, setFocusOnOpen] = useState(false);
+  const ref = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (expanded && focusOnOpen) ref.current?.focus();
+  }, [expanded, focusOnOpen]);
+  if (!expanded) {
+    return (
+      <Button
+        variant="text"
+        className={styles.notesButton}
+        icon={<Icon name="notes" size={20} />}
+        onClick={() => {
+          setExpanded(true);
+          setFocusOnOpen(true);
+        }}
+      >
+        {t('editor_add_note')}
+      </Button>
+    );
+  }
+  return (
+    <TextField
+      ref={ref}
+      multiline
+      rows={4}
+      label={t('editor_notes')}
+      value={value}
+      onChange={onChange}
+      error={error}
+      supporting={`${codePoints(value)} / ${max}`}
+    />
+  );
+}
diff --git a/web/src/components/editor/OptionRows.tsx b/web/src/components/editor/OptionRows.tsx
new file mode 100644
index 0000000..5fa5470
--- /dev/null
+++ b/web/src/components/editor/OptionRows.tsx
@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+import styles from './Editor.module.css';
+
+/**
+ * `EditorOptionRows` (design-spec §3.7, D-102): full-width rows in a fixed order (Konto, Datum, Betalt av, Delning) as
+ * a segmented group; a row's place and size never depend on its value.
+ */
+export function OptionRows({ label, children }: { label?: string; children: ReactNode }) {
+  return (
+    <div className={styles.rows} role="group" aria-label={label}>
+      {children}
+    </div>
+  );
+}
+
+interface OptionRowProps {
+  /** The row's label ("Konto", "Datum", "Betalt av", "Delning"). */
+  label: string;
+  /** A 24 px element: an icon, an account dot, an avatar. */
+  leading: ReactNode;
+  /** The value: text, or a native control whose id is `controlId`. */
+  children: ReactNode;
+  trailing?: ReactNode;
+  /** The row is one button (payer toggle, split section); omit for a row holding a control. */
+  onClick?: () => void;
+  /** The id of the control inside the row; the label is then its `<label>`. */
+  controlId?: string;
+  /** Accessible name of a button row (e.g. "Betalt av du. Byt till Anna."). */
+  ariaLabel?: string;
+  /** `aria-expanded` of a button row that opens a section in place. */
+  expanded?: boolean;
+  /** Secondary-container fill (the Delning row while the split section is open). */
+  active?: boolean;
+}
+
+/** One row: leading element, label column, value (one line, ellipsis) and trailing affordance. */
+export function OptionRow({
+  label,
+  leading,
+  children,
+  trailing,
+  onClick,
+  controlId,
+  ariaLabel,
+  expanded,
+  active = false,
+}: OptionRowProps) {
+  const className = [styles.row, active ? styles.rowActive : undefined].filter(Boolean).join(' ');
+  const content = (
+    <>
+      <span className={styles.rowLeading} aria-hidden="true">
+        {leading}
+      </span>
+      {controlId === undefined ? (
+        <span className={styles.rowLabel}>{label}</span>
+      ) : (
+        <label className={styles.rowLabel} htmlFor={controlId}>
+          {label}
+        </label>
+      )}
+      <span className={styles.rowValue}>{children}</span>
+      <span className={styles.rowTrailing} aria-hidden="true">
+        {trailing}
+      </span>
+    </>
+  );
+  if (onClick === undefined) return <div className={className}>{content}</div>;
+  return (
+    <button type="button" className={className} onClick={onClick} aria-label={ariaLabel} aria-expanded={expanded}>
+      {content}
+    </button>
+  );
+}
+
+/** The value class for a native control inside a row (no fill, inherits the row's type). */
+export const optionRowControlClass = styles.rowControl;
+/** Muted text after a row's value ("Idag"). */
+export const optionRowHintClass = styles.rowHint;
diff --git a/web/src/components/editor/PayerRow.tsx b/web/src/components/editor/PayerRow.tsx
new file mode 100644
index 0000000..5ef6a38
--- /dev/null
+++ b/web/src/components/editor/PayerRow.tsx
@@ -0,0 +1,38 @@
+import { Icon } from '../../design/Icon';
+import { useI18n } from '../../i18n/useI18n';
+import { Avatar } from '../Avatar';
+import { OptionRow } from './OptionRows';
+import type { EditorPeople } from './people';
+
+/**
+ * The "Betalt av" row (design-spec §3.7, D-102): the payer's avatar and "Du" / "Anna"; a tap switches to the other user
+ * (AC-8.3), no picker. Announced as "Betalt av du. Dubbeltryck för att byta till Anna." (`editor_paid_by_toggle`).
+ */
+export function PayerRow({
+  people,
+  payerId,
+  onChange,
+}: {
+  people: EditorPeople;
+  payerId: string;
+  onChange: (payerId: string) => void;
+}) {
+  const { t } = useI18n();
+  const payer = payerId === people.viewer.id ? people.viewer : people.partner;
+  const other = payerId === people.viewer.id ? people.partner : people.viewer;
+  const name = (person: typeof payer, lower: boolean) =>
+    person.id === people.viewer.id ? t(lower ? 'common_you_lower' : 'common_you') : person.displayName;
+  return (
+    <OptionRow
+      label={t('editor_paid_by')}
+      leading={<Avatar displayName={payer.displayName} slot={payer.slot} size={24} />}
+      trailing={<Icon name="swap_horiz" />}
+      ariaLabel={t('editor_paid_by_toggle', name(payer, true), name(other, true))}
+      onClick={() => {
+        onChange(other.id);
+      }}
+    >
+      <span>{name(payer, false)}</span>
+    </OptionRow>
+  );
+}
diff --git a/web/src/components/editor/SelectField.tsx b/web/src/components/editor/SelectField.tsx
new file mode 100644
index 0000000..cda8ac9
--- /dev/null
+++ b/web/src/components/editor/SelectField.tsx
@@ -0,0 +1,103 @@
+import { useId } from 'react';
+import styles from './Editor.module.css';
+
+export interface SelectOption<T extends string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+
+interface Props<T extends string> {
+  label: string;
+  value: T;
+  options: readonly SelectOption<T>[];
+  onChange: (value: T) => void;
+  error?: string | null;
+  id?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+/**
+ * A labelled native `<select>` in the filled field style (design-spec §2.9): keyboard and screen-reader behaviour come
+ * from the browser. Used for the editor's account row, the search filters and the template editor.
+ */
+export function SelectField<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  error,
+  id,
+  className,
+  disabled,
+}: Props<T>) {
+  const generated = useId();
+  const selectId = id ?? generated;
+  const errorId = `${selectId}-error`;
+  return (
+    <div className={[styles.fieldRoot, error ? styles.fieldInvalid : undefined, className].filter(Boolean).join(' ')}>
+      <label className={styles.fieldLabel} htmlFor={selectId}>
+        {label}
+      </label>
+      <div className={styles.fieldBox}>
+        <SelectControl
+          id={selectId}
+          value={value}
+          options={options}
+          onChange={onChange}
+          disabled={disabled}
+          invalid={Boolean(error)}
+          describedBy={error ? errorId : undefined}
+        />
+      </div>
+      {error ? (
+        <p id={errorId} className={styles.fieldError} role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/** The bare `<select>` (no label), for a row that renders its own label (`OptionRow` with `controlId`). */
+export function SelectControl<T extends string>({
+  id,
+  value,
+  options,
+  onChange,
+  disabled,
+  invalid,
+  describedBy,
+  className,
+}: {
+  id: string;
+  value: T;
+  options: readonly SelectOption<T>[];
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedBy?: string;
+  className?: string;
+}) {
+  return (
+    <select
+      id={id}
+      className={[styles.control, className].filter(Boolean).join(' ')}
+      value={value}
+      disabled={disabled}
+      aria-invalid={invalid ? true : undefined}
+      aria-describedby={describedBy}
+      onChange={(event) => {
+        const next = options.find((o) => o.value === event.target.value);
+        if (next !== undefined) onChange(next.value);
+      }}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+}
diff --git a/web/src/components/editor/SplitSection.tsx b/web/src/components/editor/SplitSection.tsx
new file mode 100644
index 0000000..3d19955
--- /dev/null
+++ b/web/src/components/editor/SplitSection.tsx
@@ -0,0 +1,411 @@
+import { useId } from 'react';
+import type { SplitMode } from '../../api/types';
+import { Icon } from '../../design/Icon';
+import { useI18n } from '../../i18n/useI18n';
+import { basisPoints, BP_TOTAL, formatMoney } from '../../lib/money';
+import { AmountField } from '../AmountField';
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import { TextField } from '../TextField';
+import styles from './Editor.module.css';
+import type { EditorPeople, EditorPerson } from './people';
+import {
+  exactDerivedOre,
+  moneyText,
+  moneyTextOre,
+  percentText,
+  percentTextBp,
+  ratioDerivedBp,
+  viewerBpOf,
+  withMode,
+  type SplitDraft,
+  type SplitResolution,
+} from './split';
+
+const MODES: readonly SplitMode[] = ['default', 'ratio', 'exact', 'full'];
+/** Ratio presets (design-spec §3.7), the viewer's percent first. */
+const PRESETS = [40, 50, 60] as const;
+
+type T = ReturnType<typeof useI18n>['t'];
+
+/** "60/40" from the viewer's basis points (`common_ratio`). */
+function ratioText(viewerBp: number, t: T, language: 'sv' | 'en'): string {
+  return t('common_ratio', basisPoints(viewerBp, language), basisPoints(BP_TOTAL - viewerBp, language));
+}
+
+/** "Kontots standard 60/40" (`editor_split_mode_default`) with the viewer's share of the account default first. */
+export function defaultModeLabel(viewerBp: number, t: T, language: 'sv' | 'en'): string {
+  return t('editor_split_mode_default', ratioText(viewerBp, t, language));
+}
+
+/** "Allt på dig" / "Allt på Anna" (`editor_split_full_on_you`, `editor_split_full_on`). */
+export function fullOnLabel(bearerId: string, people: EditorPeople, t: T): string {
+  return bearerId === people.viewer.id
+    ? t('editor_split_full_on_you')
+    : t('editor_split_full_on', people.partner.displayName);
+}
+
+/**
+ * The split as one line (the Delning row, S-8's split fact): "Kontots standard 50/50", "Egen fördelning 70/30",
+ * "Exakta belopp", "Allt på Anna". `viewerBp` is the viewer's basis points (modes `default` and `ratio`), when known.
+ */
+export function splitLabel(
+  mode: SplitMode,
+  viewerBp: number | null,
+  bearerId: string | null,
+  people: EditorPeople,
+  t: T,
+  language: 'sv' | 'en',
+): string {
+  switch (mode) {
+    case 'default':
+      return defaultModeLabel(viewerBp ?? BP_TOTAL / 2, t, language);
+    case 'ratio':
+      return viewerBp === null
+        ? t('editor_split_mode_ratio')
+        : `${t('editor_split_mode_ratio')} ${ratioText(viewerBp, t, language)}`;
+    case 'exact':
+      return t('editor_split_mode_exact');
+    case 'full':
+      return bearerId === null ? t('editor_split_mode_full') : fullOnLabel(bearerId, people, t);
+  }
+}
+
+/** The label of a draft for the Delning row. */
+export function draftSplitLabel(
+  draft: SplitDraft,
+  accountBp: Readonly<Record<string, number>> | null,
+  people: EditorPeople,
+  t: T,
+  language: 'sv' | 'en',
+): string {
+  const ratioViewerBp = (() => {
+    const typed = percentTextBp(draft.ratio.text);
+    if (typed === null) return null;
+    return draft.ratio.userId === people.viewer.id ? typed : BP_TOTAL - typed;
+  })();
+  const viewerBp = draft.mode === 'default' ? viewerBpOf(accountBp, people.viewer.id) : ratioViewerBp;
+  return splitLabel(draft.mode, viewerBp, draft.fullOn, people, t, language);
+}
+
+/**
+ * `SplitBar` (design-spec §3.7): the viewer's segment in the viewer's avatar colour, the partner's in theirs, widths
+ * proportional; `thin` is 8 px high (72 px wide), else 16. Decorative: the numbers are printed beside it.
+ */
+export function SplitBar({
+  viewerShare,
+  people,
+  thin = false,
+  error = false,
+}: {
+  /** The viewer's share of the whole, 0 to 1. */
+  viewerShare: number;
+  people: EditorPeople;
+  thin?: boolean;
+  error?: boolean;
+}) {
+  const share = Math.min(1, Math.max(0, viewerShare));
+  const height = thin ? 8 : 16;
+  const segment = (person: EditorPerson, fraction: number, isViewer: boolean) =>
+    fraction <= 0 ? null : (
+      <span
+        className={styles.splitSegment}
+        style={{
+          flexGrow: fraction,
+          flexBasis: 0,
+          height,
+          backgroundColor: error && isViewer ? 'var(--error)' : `var(--avatar-${person.slot})`,
+        }}
+      />
+    );
+  return (
+    <span
+      className={[styles.splitBar, thin ? styles.splitBarThin : undefined].filter(Boolean).join(' ')}
+      aria-hidden="true"
+    >
+      {segment(people.viewer, share, true)}
+      {segment(people.partner, 1 - share, false)}
+    </span>
+  );
+}
+
+/** `SplitPreview` (design-spec §3.7): a thin bar, then "Du **206,00 kr** · Anna **206,00 kr**". */
+export function SplitPreview({
+  shares,
+  people,
+  bar = true,
+}: {
+  shares: Readonly<Record<string, number>>;
+  people: EditorPeople;
+  bar?: boolean;
+}) {
+  const { t, language } = useI18n();
+  const viewerOre = shares[people.viewer.id] ?? 0;
+  const partnerOre = shares[people.partner.id] ?? 0;
+  const total = viewerOre + partnerOre;
+  return (
+    <div className={styles.preview}>
+      {bar ? <SplitBar viewerShare={total === 0 ? 0.5 : viewerOre / total} people={people} thin /> : null}
+      <span>
+        {t('common_you')} <strong className="amount">{formatMoney(viewerOre, language)}</strong>
+        {t('common_separator_dot')}
+        {people.partner.displayName} <strong className="amount">{formatMoney(partnerOre, language)}</strong>
+      </span>
+    </div>
+  );
+}
+
+interface Props {
+  draft: SplitDraft;
+  onChange: (draft: SplitDraft) => void;
+  people: EditorPeople;
+  amountOre: number | null;
+  payerId: string;
+  /** The selected account's default ratio (mode `default`). */
+  accountBp: Readonly<Record<string, number>> | null;
+  resolution: SplitResolution;
+  onCollapse: () => void;
+}
+
+/**
+ * `SplitSection` (design-spec §3.7, §5.4): header "Delning" with a collapse button, the four mode chips, and the
+ * controls of the chosen mode with a live preview of each person's share.
+ */
+export function SplitSection({
+  draft,
+  onChange,
+  people,
+  amountOre,
+  payerId,
+  accountBp,
+  resolution,
+  onCollapse,
+}: Props) {
+  const { t, language } = useI18n();
+  const ctx = { viewerId: people.viewer.id, partnerId: people.partner.id, payerId, accountBp };
+  const modeLabel = (mode: SplitMode) =>
+    mode === 'default'
+      ? defaultModeLabel(viewerBpOf(accountBp, people.viewer.id), t, language)
+      : t(
+          mode === 'ratio'
+            ? 'editor_split_mode_ratio'
+            : mode === 'exact'
+              ? 'editor_split_mode_exact'
+              : 'editor_split_mode_full',
+        );
+  const preview = resolution.kind === 'ok' ? <SplitPreview shares={resolution.shares} people={people} /> : null;
+  return (
+    <section className={styles.splitSection} aria-label={t('editor_split')}>
+      <div className={styles.splitHeader}>
+        <h2>{t('editor_split')}</h2>
+        <button
+          type="button"
+          className={styles.iconButton}
+          aria-label={t('editor_split_collapse')}
+          onClick={onCollapse}
+        >
+          <Icon name="expand_less" />
+        </button>
+      </div>
+      <div className={styles.chips} role="radiogroup" aria-label={t('editor_split')}>
+        {MODES.map((mode) => {
+          const checked = draft.mode === mode;
+          return (
+            <button
+              key={mode}
+              type="button"
+              role="radio"
+              aria-checked={checked}
+              className={[styles.chip, checked ? styles.chipSelected : undefined].filter(Boolean).join(' ')}
+              onClick={() => {
+                onChange(withMode(draft, mode, ctx, language));
+              }}
+            >
+              {checked ? <Icon name="check" size={18} /> : null}
+              {modeLabel(mode)}
+            </button>
+          );
+        })}
+      </div>
+      {draft.mode === 'ratio' ? (
+        <RatioEditor draft={draft} onChange={onChange} people={people} />
+      ) : draft.mode === 'exact' ? (
+        <ExactEditor draft={draft} onChange={onChange} people={people} amountOre={amountOre} />
+      ) : draft.mode === 'full' ? (
+        <FullPicker draft={draft} onChange={onChange} people={people} />
+      ) : null}
+      {draft.mode === 'default' && resolution.kind === 'ok' ? (
+        <SplitBar viewerShare={viewerBpOf(accountBp, people.viewer.id) / BP_TOTAL} people={people} />
+      ) : null}
+      {preview}
+    </section>
+  );
+}
+
+function RatioEditor({
+  draft,
+  onChange,
+  people,
+}: {
+  draft: SplitDraft;
+  onChange: (d: SplitDraft) => void;
+  people: EditorPeople;
+}) {
+  const { t, language } = useI18n();
+  const derived = ratioDerivedBp(draft);
+  const textOf = (person: EditorPerson) =>
+    person.id === draft.ratio.userId ? draft.ratio.text : derived === null ? '' : percentText(derived, language);
+  const field = (person: EditorPerson) => (
+    <div className={styles.splitPerson} key={person.id}>
+      <Avatar displayName={person.displayName} slot={person.slot} size={32} />
+      <TextField
+        label={person.id === people.viewer.id ? t('common_you') : person.displayName}
+        value={textOf(person)}
+        inputMode="decimal"
+        autoComplete="off"
+        inputClassName="amount"
+        suffix={<span aria-hidden="true">{t('editor_percent_suffix')}</span>}
+        onChange={(text) => {
+          if (percentTextBp(text) !== null || text.trim() === '')
+            onChange({ ...draft, ratio: { userId: person.id, text } });
+        }}
+      />
+    </div>
+  );
+  return (
+    <>
+      <div className={styles.splitPair}>
+        {field(people.viewer)}
+        {field(people.partner)}
+      </div>
+      <div className={styles.presets}>
+        {PRESETS.map((percent) => (
+          <Button
+            key={percent}
+            variant="outlined"
+            onClick={() => {
+              onChange({ ...draft, ratio: { userId: people.viewer.id, text: String(percent) } });
+            }}
+          >
+            {t('common_ratio', String(percent), String(100 - percent))}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}
+
+function ExactEditor({
+  draft,
+  onChange,
+  people,
+  amountOre,
+}: {
+  draft: SplitDraft;
+  onChange: (d: SplitDraft) => void;
+  people: EditorPeople;
+  amountOre: number | null;
+}) {
+  const { t, language } = useI18n();
+  const typedOre = moneyTextOre(draft.exact.text);
+  const derived = exactDerivedOre(draft, amountOre);
+  const tooLarge = typedOre !== null && amountOre !== null && typedOre > amountOre;
+  const nameOf = (person: EditorPerson) => (person.id === people.viewer.id ? t('common_you') : person.displayName);
+  const field = (person: EditorPerson) => {
+    const typed = person.id === draft.exact.userId;
+    return (
+      <div className={styles.splitPerson} key={person.id}>
+        <Avatar displayName={person.displayName} slot={person.slot} size={40} />
+        {typed ? (
+          <AmountField
+            label={nameOf(person)}
+            value={draft.exact.text}
+            error={tooLarge ? t('error_exact_share_too_large') : null}
+            onChange={(text) => {
+              onChange({ ...draft, exact: { userId: person.id, text } });
+            }}
+          />
+        ) : (
+          <TextField
+            className={styles.derived}
+            label={nameOf(person)}
+            value={derived === null ? '—' : moneyText(derived, language)}
+            readOnly
+            onChange={() => undefined}
+            inputClassName="amount"
+            supporting={t('editor_split_exact_computed')}
+            onFocus={() => {
+              onChange({
+                ...draft,
+                exact: { userId: person.id, text: derived === null ? '' : moneyText(derived, language) },
+              });
+            }}
+          />
+        )}
+      </div>
+    );
+  };
+  const typedPerson = draft.exact.userId === people.viewer.id ? people.viewer : people.partner;
+  return (
+    <>
+      <div className={styles.splitPair}>
+        {field(people.viewer)}
+        {field(people.partner)}
+      </div>
+      {tooLarge ? (
+        <div className={styles.errorBox} role="alert">
+          <span>
+            {t(
+              'editor_split_exact_of',
+              typedPerson.id === people.viewer.id ? t('common_you') : typedPerson.displayName,
+              formatMoney(typedOre, language),
+              formatMoney(amountOre, language),
+            )}
+          </span>
+          <span>{t('common_too_much', formatMoney(typedOre - amountOre, language))}</span>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function FullPicker({
+  draft,
+  onChange,
+  people,
+}: {
+  draft: SplitDraft;
+  onChange: (d: SplitDraft) => void;
+  people: EditorPeople;
+}) {
+  const { t } = useI18n();
+  const questionId = useId();
+  return (
+    <>
+      <span className={styles.question} id={questionId}>
+        {t('editor_split_full_question')}
+      </span>
+      <div className={styles.bearers} role="radiogroup" aria-labelledby={questionId}>
+        {[people.viewer, people.partner].map((person) => {
+          const checked = draft.fullOn === person.id;
+          return (
+            <button
+              key={person.id}
+              type="button"
+              role="radio"
+              aria-checked={checked}
+              className={[styles.bearer, checked ? styles.bearerSelected : undefined].filter(Boolean).join(' ')}
+              onClick={() => {
+                onChange({ ...draft, fullOn: person.id });
+              }}
+            >
+              <Avatar displayName={person.displayName} slot={person.slot} size={28} />
+              {person.id === people.viewer.id ? t('common_you') : person.displayName}
+            </button>
+          );
+        })}
+      </div>
+      <SplitBar viewerShare={draft.fullOn === people.viewer.id ? 1 : 0} people={people} />
+    </>
+  );
+}
diff --git a/web/src/components/editor/categories.test.ts b/web/src/components/editor/categories.test.ts
new file mode 100644
index 0000000..99bfad8
--- /dev/null
+++ b/web/src/components/editor/categories.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import type { Category } from '../../api/types';
+import { activeCategoriesOf, frequentCategoryIds, quickRowCategories } from './categories';
+
+function category(id: string, sortOrder: number, archived = false): Category {
+  return {
+    id,
+    default_key: null,
+    name: id,
+    icon: 'category',
+    color: 'grey',
+    sort_order: sortOrder,
+    created_at: '2026-10-01T00:00:00.000Z',
+    updated_at: '2026-10-01T00:00:00.000Z',
+    archived_at: archived ? '2026-10-02T00:00:00.000Z' : null,
+    deleted_at: null,
+    server_version: 1,
+  };
+}
+
+const CATS = [
+  category('a', 10),
+  category('b', 20),
+  category('c', 30),
+  category('d', 40),
+  category('e', 50),
+  category('f', 60),
+  category('g', 70),
+  category('x', 5, true),
+];
+const use = (category_id: string, account_id = 'acc', deleted_at: string | null = null) => ({
+  account_id,
+  category_id,
+  deleted_at,
+});
+
+describe('frequentCategoryIds (UX-9, D-060)', () => {
+  it('counts the account’s live expenses per active category, ties by sort_order, at most five', () => {
+    const active = activeCategoriesOf(CATS);
+    const expenses = [
+      use('g'),
+      use('g'),
+      use('f'),
+      use('c'),
+      use('e'),
+      use('d'),
+      use('b'),
+      use('x'),
+      use('a', 'other-account'),
+      use('a', 'acc', '2026-10-03T00:00:00.000Z'),
+    ];
+    expect(frequentCategoryIds(expenses, 'acc', active)).toEqual(['g', 'b', 'c', 'd', 'e']);
+    expect(frequentCategoryIds([], 'acc', active)).toEqual([]);
+    expect(frequentCategoryIds(expenses, null, active)).toEqual([]);
+  });
+});
+
+describe('quickRowCategories (D-075)', () => {
+  it('fills up from sort_order and gives the selected category the fifth place when absent', () => {
+    expect(quickRowCategories(CATS, ['g'], 'g').map((c) => c.id)).toEqual(['g', 'a', 'b', 'c', 'd']);
+    expect(quickRowCategories(CATS, ['g'], 'f').map((c) => c.id)).toEqual(['g', 'a', 'b', 'c', 'f']);
+    expect(quickRowCategories(CATS, [], null).map((c) => c.id)).toEqual(['a', 'b', 'c', 'd', 'e']);
+    // An archived category (edit mode) still shows in the fifth place while selected.
+    expect(quickRowCategories(CATS, [], 'x').map((c) => c.id)).toEqual(['a', 'b', 'c', 'd', 'x']);
+  });
+});
diff --git a/web/src/components/editor/categories.ts b/web/src/components/editor/categories.ts
new file mode 100644
index 0000000..608ac73
--- /dev/null
+++ b/web/src/components/editor/categories.ts
@@ -0,0 +1,66 @@
+/**
+ * Category helpers for editors (design-spec §3.7 `CategoryQuickRow`; D-060, D-075): display names, the per-account
+ * usage list (`frequentCategoryIds`) and the quick-row fill. Pure.
+ */
+import type { Category, DefaultCategoryKey, Expense } from '../../api/types';
+import type { I18n } from '../../i18n/I18nProvider';
+
+/** Tiles in the quick row besides "Alla" (design-spec §3.7). */
+export const QUICK_ROW_TILES = 5;
+
+/** A category's name: the custom name, else the default category's name in the page language (AC-7.2). */
+export function categoryName(category: Pick<Category, 'name' | 'default_key'>, t: I18n['t']): string {
+  if (category.name !== null) return category.name;
+  const key: DefaultCategoryKey = category.default_key ?? 'other';
+  return t(`category_default_${key}`);
+}
+
+/** Categories offered in pickers: neither archived nor deleted, in `sort_order` (then id). */
+export function activeCategoriesOf(categories: Iterable<Category>): Category[] {
+  return [...categories]
+    .filter((c) => c.archived_at === null && c.deleted_at === null)
+    .sort((a, b) => a.sort_order - b.sort_order || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+}
+
+/**
+ * UX-9 `frequentCategoryIds` for one account (D-060): the active categories used by the account's non-deleted
+ * expenses, most used first, ties by `sort_order`; at most five, possibly fewer or none.
+ */
+export function frequentCategoryIds(
+  expenses: Iterable<Pick<Expense, 'account_id' | 'category_id' | 'deleted_at'>>,
+  accountId: string | null,
+  activeCategories: readonly Category[],
+): string[] {
+  if (accountId === null) return [];
+  const order = new Map(activeCategories.map((c, index) => [c.id, index]));
+  const counts = new Map<string, number>();
+  for (const e of expenses) {
+    if (e.deleted_at !== null || e.account_id !== accountId || !order.has(e.category_id)) continue;
+    counts.set(e.category_id, (counts.get(e.category_id) ?? 0) + 1);
+  }
+  return [...counts.entries()]
+    .sort(([a, ca], [b, cb]) => cb - ca || (order.get(a) ?? 0) - (order.get(b) ?? 0))
+    .slice(0, QUICK_ROW_TILES)
+    .map(([id]) => id);
+}
+
+/**
+ * The quick row's five categories (D-075 `quickRowCategories`): the frequent ones, filled up from `sort_order`; the
+ * selected category takes the fifth place when it is not among them (it may be archived in edit mode).
+ */
+export function quickRowCategories(
+  categories: readonly Category[],
+  frequent: readonly string[],
+  selectedId: string | null,
+): Category[] {
+  const active = activeCategoriesOf(categories);
+  const byId = new Map(active.map((c) => [c.id, c]));
+  const chosen: Category[] = [];
+  for (const candidate of [...frequent.flatMap((id) => byId.get(id) ?? []), ...active]) {
+    if (chosen.length === QUICK_ROW_TILES) break;
+    if (!chosen.some((c) => c.id === candidate.id)) chosen.push(candidate);
+  }
+  const selected = selectedId === null ? undefined : categories.find((c) => c.id === selectedId);
+  if (selected === undefined || chosen.some((c) => c.id === selected.id)) return chosen;
+  return [...chosen.slice(0, QUICK_ROW_TILES - 1), selected];
+}
diff --git a/web/src/components/editor/index.ts b/web/src/components/editor/index.ts
new file mode 100644
index 0000000..f662839
--- /dev/null
+++ b/web/src/components/editor/index.ts
@@ -0,0 +1,49 @@
+/**
+ * The shared expense-editor fields of design-spec §3.7 (D-019), used by the expense editor (W2, S-7 / W-5) and the
+ * recurring-template editor (W5, S-19 / W-16). Generic: every component takes props, none holds expense state.
+ */
+export { AccountDot, accountColorIndex } from './AccountDot';
+export {
+  activeCategoriesOf,
+  categoryName,
+  frequentCategoryIds,
+  quickRowCategories,
+  QUICK_ROW_TILES,
+} from './categories';
+export { CategoryPicker } from './CategoryPicker';
+export { ConfirmDialog } from './ConfirmDialog';
+export { DateControl, DateField } from './DateField';
+export { codePoints, NotesField, NOTES_MAX } from './NotesField';
+export { OptionRow, OptionRows, optionRowControlClass, optionRowHintClass } from './OptionRows';
+export { PayerRow } from './PayerRow';
+export type { EditorPeople, EditorPerson } from './people';
+export { SelectControl, SelectField, type SelectOption } from './SelectField';
+export {
+  exactDerivedOre,
+  moneyText,
+  moneyTextOre,
+  newSplitDraft,
+  percentText,
+  percentTextBp,
+  ratioDerivedBp,
+  resolveSplit,
+  splitDraftOf,
+  viewerBpOf,
+  wireSplits,
+  withMode,
+  type SplitContext,
+  type SplitDraft,
+  type SplitPeople,
+  type SplitResolution,
+  type TypedShare,
+  type WireSplit,
+} from './split';
+export {
+  defaultModeLabel,
+  draftSplitLabel,
+  fullOnLabel,
+  SplitBar,
+  SplitPreview,
+  SplitSection,
+  splitLabel,
+} from './SplitSection';
diff --git a/web/src/components/editor/people.ts b/web/src/components/editor/people.ts
new file mode 100644
index 0000000..bdd5ff0
--- /dev/null
+++ b/web/src/components/editor/people.ts
@@ -0,0 +1,12 @@
+/** A household user as editor fields show them: id, display name and avatar slot (design-spec §2.5). */
+export interface EditorPerson {
+  id: string;
+  displayName: string;
+  slot: 1 | 2;
+}
+
+/** The viewer and the partner (SPEC: a household has exactly two users). */
+export interface EditorPeople {
+  viewer: EditorPerson;
+  partner: EditorPerson;
+}
diff --git a/web/src/components/editor/split.test.ts b/web/src/components/editor/split.test.ts
new file mode 100644
index 0000000..824f1df
--- /dev/null
+++ b/web/src/components/editor/split.test.ts
@@ -0,0 +1,152 @@
+import { describe, expect, it } from 'vitest';
+import {
+  exactDerivedOre,
+  newSplitDraft,
+  resolveSplit,
+  splitDraftOf,
+  wireSplits,
+  withMode,
+  type SplitContext,
+  type SplitDraft,
+} from './split';
+
+const ME = '01929c5e-0000-7000-8000-000000000a01';
+const ANNA = '01929c5e-0000-7000-8000-000000000a02';
+const people = { viewerId: ME, partnerId: ANNA };
+const fiftyFifty = { [ME]: 5000, [ANNA]: 5000 };
+const sixtyForty = { [ME]: 6000, [ANNA]: 4000 };
+
+function ctx(patch: Partial<SplitContext> = {}): SplitContext {
+  return { ...people, amountOre: 41_200, payerId: ME, accountBp: fiftyFifty, ...patch };
+}
+
+function draft(patch: Partial<SplitDraft> = {}): SplitDraft {
+  return { ...newSplitDraft(people, fiftyFifty, 'sv'), ...patch };
+}
+
+describe('resolveSplit (SPEC §9.1 through computeSplit)', () => {
+  it('default: copies the account ratio; the payer absorbs the odd öre', () => {
+    expect(resolveSplit(draft(), ctx({ amountOre: 1001 }))).toEqual({
+      kind: 'ok',
+      shares: { [ME]: 501, [ANNA]: 500 },
+      bp: fiftyFifty,
+    });
+    expect(resolveSplit(draft(), ctx({ accountBp: sixtyForty, payerId: ANNA, amountOre: 100 }))).toEqual({
+      kind: 'ok',
+      shares: { [ME]: 60, [ANNA]: 40 },
+      bp: sixtyForty,
+    });
+  });
+
+  it('ratio: the typed percent (with decimals) and 100 minus it for the other', () => {
+    const ratio = draft({ mode: 'ratio', ratio: { userId: ANNA, text: '33,33' } });
+    expect(resolveSplit(ratio, ctx({ amountOre: 999 }))).toEqual({
+      kind: 'ok',
+      shares: { [ME]: 667, [ANNA]: 332 },
+      bp: { [ANNA]: 3333, [ME]: 6667 },
+    });
+    expect(resolveSplit({ ...ratio, ratio: { userId: ME, text: '' } }, ctx())).toEqual({ kind: 'incomplete' });
+  });
+
+  it('exact: one typed share, the other derived; a typed share above the amount is an error (AC-8.7)', () => {
+    const exact = draft({ mode: 'exact', exact: { userId: ME, text: '1 200,00' } });
+    expect(resolveSplit(exact, ctx({ amountOre: 106_000 }))).toEqual({
+      kind: 'error',
+      error: 'exact_share_too_large',
+    });
+    expect(exactDerivedOre(exact, 106_000)).toBeNull();
+    const ok = { ...exact, exact: { userId: ME, text: '400,5' } };
+    expect(resolveSplit(ok, ctx({ amountOre: 106_000 }))).toEqual({
+      kind: 'ok',
+      shares: { [ME]: 40_050, [ANNA]: 65_950 },
+      bp: null,
+    });
+    expect(exactDerivedOre(ok, 106_000)).toBe(65_950);
+    expect(resolveSplit({ ...exact, exact: { userId: ME, text: '' } }, ctx())).toEqual({ kind: 'incomplete' });
+  });
+
+  it('full: the bearer carries the whole amount, payer or not', () => {
+    expect(resolveSplit(draft({ mode: 'full', fullOn: ANNA }), ctx())).toEqual({
+      kind: 'ok',
+      shares: { [ME]: 0, [ANNA]: 41_200 },
+      bp: { [ANNA]: 10_000, [ME]: 0 },
+    });
+    expect(resolveSplit(draft({ mode: 'full', fullOn: ME }), ctx())).toEqual({
+      kind: 'ok',
+      shares: { [ME]: 41_200, [ANNA]: 0 },
+      bp: { [ME]: 10_000, [ANNA]: 0 },
+    });
+  });
+
+  it('is incomplete without an amount or an account (mode default)', () => {
+    expect(resolveSplit(draft(), ctx({ amountOre: null }))).toEqual({ kind: 'incomplete' });
+    expect(resolveSplit(draft(), ctx({ accountBp: null }))).toEqual({ kind: 'incomplete' });
+  });
+
+  it('reports the domain errors of computeSplit', () => {
+    expect(resolveSplit(draft(), ctx({ amountOre: 0 }))).toEqual({ kind: 'error', error: 'amount_out_of_range' });
+  });
+});
+
+describe('wire splits and drafts', () => {
+  it('sorts by user id, share_bp null in mode exact', () => {
+    const resolved = resolveSplit(draft({ mode: 'exact', exact: { userId: ANNA, text: '12' } }), ctx());
+    if (resolved.kind !== 'ok') throw new Error('expected ok');
+    expect(wireSplits(resolved)).toEqual([
+      { user_id: ME, share_ore: 40_000, share_bp: null },
+      { user_id: ANNA, share_ore: 1_200, share_bp: null },
+    ]);
+  });
+
+  it('reopens a saved split in its mode with the viewer typed', () => {
+    const ratio = splitDraftOf(
+      'ratio',
+      [
+        { user_id: ME, share_ore: 700, share_bp: 7000 },
+        { user_id: ANNA, share_ore: 300, share_bp: 3000 },
+      ],
+      people,
+      fiftyFifty,
+      'sv',
+    );
+    expect(ratio.mode).toBe('ratio');
+    expect(ratio.ratio).toEqual({ userId: ME, text: '70' });
+    const exact = splitDraftOf(
+      'exact',
+      [
+        { user_id: ME, share_ore: 124_760, share_bp: null },
+        { user_id: ANNA, share_ore: 0, share_bp: null },
+      ],
+      people,
+      fiftyFifty,
+      'sv',
+    );
+    expect(exact.exact).toEqual({ userId: ME, text: '1\u00A0247,60' });
+    const full = splitDraftOf(
+      'full',
+      [
+        { user_id: ME, share_ore: 0, share_bp: 0 },
+        { user_id: ANNA, share_ore: 500, share_bp: 10_000 },
+      ],
+      people,
+      fiftyFifty,
+      'sv',
+    );
+    expect(full.fullOn).toBe(ANNA);
+  });
+
+  it('picks modes as design-spec §5.4 says: ratio at the account ratio, full on the one who did not pay', () => {
+    const start = newSplitDraft(people, sixtyForty, 'sv');
+    expect(start.ratio.text).toBe('60');
+    expect(withMode(start, 'full', { ...people, payerId: ME, accountBp: sixtyForty }, 'sv').fullOn).toBe(ANNA);
+    expect(withMode(start, 'full', { ...people, payerId: ANNA, accountBp: sixtyForty }, 'sv').fullOn).toBe(ME);
+    expect(
+      withMode(
+        { ...start, ratio: { userId: ME, text: '' } },
+        'ratio',
+        { ...people, payerId: ME, accountBp: sixtyForty },
+        'en',
+      ).ratio.text,
+    ).toBe('60');
+  });
+});
diff --git a/web/src/components/editor/split.ts b/web/src/components/editor/split.ts
new file mode 100644
index 0000000..d9336a3
--- /dev/null
+++ b/web/src/components/editor/split.ts
@@ -0,0 +1,219 @@
+/**
+ * The split state of an editor (SPEC §9.1, AC-8.5, AC-8.7, AC-8.8; design-spec §3.7 `SplitSection`, §5.4): one draft
+ * holds the four modes' inputs as typed, and `resolveSplit` turns it into each user's share through `computeSplit`.
+ * Pure and generic: the expense editor (W2) and the recurring-template editor (W5) use the same state.
+ */
+import type { SplitMode } from '../../api/types';
+import {
+  amountInputDisplay,
+  amountInputFromText,
+  amountInputOf,
+  amountInputOre,
+  BP_TOTAL,
+  percentInputOf,
+} from '../../lib/money';
+import { computeSplit, type SplitError } from '../../lib/split';
+import type { Language } from '../../i18n/language';
+
+/** A typed money or percent field: whose value was typed (the other is derived) and the text as typed. */
+export interface TypedShare {
+  userId: string;
+  text: string;
+}
+
+export interface SplitDraft {
+  mode: SplitMode;
+  /** `ratio`: one user's percent as typed ("60", "60,5"); the other is 100 minus it. */
+  ratio: TypedShare;
+  /** `exact`: one user's share in kronor as typed; the other is the amount minus it (AC-8.7). */
+  exact: TypedShare;
+  /** `full`: the user who bears the whole amount. */
+  fullOn: string;
+}
+
+/** The two household users: the viewer and the partner (ids). */
+export interface SplitPeople {
+  viewerId: string;
+  partnerId: string;
+}
+
+export interface SplitContext extends SplitPeople {
+  /** The amount in öre, null while empty. */
+  amountOre: number | null;
+  payerId: string;
+  /** The account's default ratio in basis points per user (mode `default`), null when there is no account. */
+  accountBp: Readonly<Record<string, number>> | null;
+}
+
+export type SplitResolution =
+  | { kind: 'ok'; shares: Record<string, number>; bp: Record<string, number> | null }
+  /** Something needed is still empty (the amount, the typed field, the account). */
+  | { kind: 'incomplete' }
+  /** `exact_share_too_large`: the typed exact share is larger than the amount (AC-8.7, `error_exact_share_too_large`). */
+  | { kind: 'error'; error: SplitError | 'exact_share_too_large' };
+
+/** A wire `Split` row (§14.3.3): sorted by user id, `share_bp` null in mode `exact`. */
+export interface WireSplit {
+  user_id: string;
+  share_ore: number;
+  share_bp: number | null;
+}
+
+function otherOf(people: SplitPeople, userId: string): string {
+  return userId === people.viewerId ? people.partnerId : people.viewerId;
+}
+
+/** Basis points of a typed percent ("60,5" -> 6050), or null when empty. */
+export function percentTextBp(text: string): number | null {
+  const input = amountInputFromText(text, BP_TOTAL);
+  return input === null ? null : amountInputOre(input);
+}
+
+/** Öre of a typed money field, or null when empty or not an amount. */
+export function moneyTextOre(text: string): number | null {
+  const input = amountInputFromText(text, Number.MAX_SAFE_INTEGER);
+  return input === null ? null : amountInputOre(input);
+}
+
+/** A percent for a field, from basis points: 6000 -> "60", 6050 -> "60,5" (sv). */
+export function percentText(bp: number, language: Language): string {
+  return amountInputDisplay(percentInputOf(bp), language);
+}
+
+/** Money for a field, from öre, with both decimals: 124 760 -> "1 247,60" (sv). */
+export function moneyText(ore: number, language: Language): string {
+  return amountInputDisplay(amountInputOf(ore), language);
+}
+
+/** The viewer's basis points of an account default (`default_shares`), 5000 when the account lacks them. */
+export function viewerBpOf(accountBp: Readonly<Record<string, number>> | null, viewerId: string): number {
+  return accountBp?.[viewerId] ?? BP_TOTAL / 2;
+}
+
+/** A new draft: mode `default`, the ratio fields at the account's ratio, the exact field empty, full on the partner. */
+export function newSplitDraft(
+  people: SplitPeople,
+  accountBp: Readonly<Record<string, number>> | null,
+  language: Language,
+): SplitDraft {
+  return {
+    mode: 'default',
+    ratio: { userId: people.viewerId, text: percentText(viewerBpOf(accountBp, people.viewerId), language) },
+    exact: { userId: people.viewerId, text: '' },
+    fullOn: people.partnerId,
+  };
+}
+
+/** A draft from a saved split (edit mode): the stored mode with its values in the viewer's field. */
+export function splitDraftOf(
+  mode: SplitMode,
+  splits: readonly WireSplit[],
+  people: SplitPeople,
+  accountBp: Readonly<Record<string, number>> | null,
+  language: Language,
+): SplitDraft {
+  const base = newSplitDraft(people, accountBp, language);
+  const viewer = splits.find((s) => s.user_id === people.viewerId);
+  switch (mode) {
+    case 'default':
+      return base;
+    case 'ratio':
+      return { ...base, mode, ratio: { userId: people.viewerId, text: percentText(viewer?.share_bp ?? 0, language) } };
+    case 'exact':
+      return { ...base, mode, exact: { userId: people.viewerId, text: moneyText(viewer?.share_ore ?? 0, language) } };
+    case 'full': {
+      const bearer = splits.find((s) => s.share_bp === BP_TOTAL) ?? splits.find((s) => s.share_ore > 0);
+      return { ...base, mode, fullOn: bearer?.user_id ?? people.partnerId };
+    }
+  }
+}
+
+/**
+ * Picks a mode (design-spec §5.4): `ratio` starts at the account's ratio unless one was typed, `exact` keeps what was
+ * typed (empty at first), `full` starts on the person who did not pay.
+ */
+export function withMode(
+  draft: SplitDraft,
+  mode: SplitMode,
+  ctx: { payerId: string; accountBp: Readonly<Record<string, number>> | null } & SplitPeople,
+  language: Language,
+): SplitDraft {
+  if (draft.mode === mode) return draft;
+  switch (mode) {
+    case 'ratio':
+      return draft.ratio.text === ''
+        ? {
+            ...draft,
+            mode,
+            ratio: { userId: ctx.viewerId, text: percentText(viewerBpOf(ctx.accountBp, ctx.viewerId), language) },
+          }
+        : { ...draft, mode };
+    case 'full':
+      return { ...draft, mode, fullOn: otherOf(ctx, ctx.payerId) };
+    default:
+      return { ...draft, mode };
+  }
+}
+
+/** The basis points of the two users in modes `default`, `ratio` and `full`, or null when incomplete. */
+function bpOf(draft: SplitDraft, ctx: SplitContext): Record<string, number> | null {
+  switch (draft.mode) {
+    case 'default':
+      return ctx.accountBp === null ? null : { ...ctx.accountBp };
+    case 'ratio': {
+      const typed = percentTextBp(draft.ratio.text);
+      if (typed === null) return null;
+      return { [draft.ratio.userId]: typed, [otherOf(ctx, draft.ratio.userId)]: BP_TOTAL - typed };
+    }
+    case 'full':
+      return { [draft.fullOn]: BP_TOTAL, [otherOf(ctx, draft.fullOn)]: 0 };
+    case 'exact':
+      return null;
+  }
+}
+
+/** Each user's share (SPEC §9.1) for the draft, or why there is none yet. */
+export function resolveSplit(draft: SplitDraft, ctx: SplitContext): SplitResolution {
+  const amount = ctx.amountOre;
+  if (amount === null) return { kind: 'incomplete' };
+  const users = [ctx.viewerId, ctx.partnerId];
+  if (draft.mode === 'exact') {
+    const typed = moneyTextOre(draft.exact.text);
+    if (typed === null) return { kind: 'incomplete' };
+    if (typed > amount) return { kind: 'error', error: 'exact_share_too_large' };
+    const ore = { [draft.exact.userId]: typed, [otherOf(ctx, draft.exact.userId)]: amount - typed };
+    const result = computeSplit(amount, ctx.payerId, users, { mode: 'exact', ore });
+    return 'error' in result ? { kind: 'error', error: result.error } : { kind: 'ok', shares: result.ok, bp: null };
+  }
+  const bp = bpOf(draft, ctx);
+  if (bp === null) return { kind: 'incomplete' };
+  const result =
+    draft.mode === 'full'
+      ? computeSplit(amount, ctx.payerId, users, { mode: 'full', bearer_user_id: draft.fullOn })
+      : computeSplit(amount, ctx.payerId, users, { mode: 'ratio', bp });
+  return 'error' in result ? { kind: 'error', error: result.error } : { kind: 'ok', shares: result.ok, bp };
+}
+
+/** The wire `splits` of a resolved split, sorted by user id (§14.4.7). */
+export function wireSplits(resolution: Extract<SplitResolution, { kind: 'ok' }>): WireSplit[] {
+  return Object.keys(resolution.shares)
+    .sort()
+    .map((userId) => ({
+      user_id: userId,
+      share_ore: resolution.shares[userId] ?? 0,
+      share_bp: resolution.bp === null ? null : (resolution.bp[userId] ?? 0),
+    }));
+}
+
+/** The derived (not typed) value of an exact split: the amount minus the typed share, or null. */
+export function exactDerivedOre(draft: SplitDraft, amountOre: number | null): number | null {
+  const typed = moneyTextOre(draft.exact.text);
+  if (typed === null || amountOre === null || typed > amountOre) return null;
+  return amountOre - typed;
+}
+
+/** The derived percent of a ratio split: 100 minus the typed percent, in basis points, or null. */
+export function ratioDerivedBp(draft: SplitDraft): number | null {
+  const typed = percentTextBp(draft.ratio.text);
+  return typed === null ? null : BP_TOTAL - typed;
+}
diff --git a/web/src/features/expenses/ExpenseDetailPage.test.tsx b/web/src/features/expenses/ExpenseDetailPage.test.tsx
new file mode 100644
index 0000000..433013e
--- /dev/null
+++ b/web/src/features/expenses/ExpenseDetailPage.test.tsx
@@ -0,0 +1,175 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import type { PushedExpense } from '../../api/types';
+import { errorResponse, FakeServer } from '../../test/fakeServer';
+import { renderApp } from '../../test/render';
+import {
+  ANNA_ID,
+  audit,
+  expenseRow,
+  GROCERIES,
+  HOME,
+  householdServer,
+  HUSET,
+  JACOB_ID,
+  OTHER,
+  pushedMutations,
+  template,
+} from './testLedger';
+
+const SP = ' ';
+
+/** An element whose whole text (children included) is `text`, U+00A0 read as a space. */
+const whole = (text: string) => (_: string, element: Element | null) =>
+  element?.tagName === 'SPAN' && element.textContent.replaceAll('\u00A0', ' ') === text;
+
+const timelineItems = (name = 'Historik') => within(screen.getByRole('region', { name })).getAllByRole('listitem');
+const ID = '01929c5e-0000-7000-8000-00000000e301';
+const EXPENSE = expenseRow(ID, {
+  amount_ore: 124_760,
+  notes: 'Storhandling inför helgen',
+  created_by_user_id: ANNA_ID,
+});
+const CREATED = audit('d1', ID, 'create', ANNA_ID, '2026-10-16T12:02:00.000Z');
+const CHANGED = audit('d2', ID, 'update', JACOB_ID, '2026-10-16T17:40:00.000Z', [
+  { field: 'category_id', old: OTHER.id, new: GROCERIES.id },
+  { field: 'amount_ore', old: 114_760, new: 124_760 },
+]);
+
+function openDetail(server: FakeServer, id = ID) {
+  const result = renderApp(`/expenses/${id}`, { server });
+  return { ...result, user: userEvent.setup() };
+}
+
+describe('W-6 expense detail (S-8)', () => {
+  it('shows every field, the shares and mode, and the timeline oldest first', async () => {
+    openDetail(householdServer({ expenses: [EXPENSE], auditEntries: [CHANGED, CREATED] }));
+    expect(await screen.findByRole('heading', { level: 1, name: 'ICA Maxi Lindhagen' })).toBeInTheDocument();
+    const hero = screen.getByRole('region', { name: 'ICA Maxi Lindhagen' });
+    expect(hero).toHaveTextContent('Mat & hushåll · Vardag');
+    expect(hero).toHaveTextContent(`1${SP}247,60${SP}kr`);
+    expect(screen.getByText('fredag 16 oktober 2026')).toBeInTheDocument();
+    expect(screen.getByText('Storhandling inför helgen')).toBeInTheDocument();
+    expect(screen.getByText('Kontots standard 50/50')).toBeInTheDocument();
+    expect(screen.getByText(whole(`Du 623,80${SP}kr · Anna 623,80${SP}kr`))).toBeInTheDocument();
+    const timeline = screen.getByRole('region', { name: 'Historik' });
+    const items = within(timeline)
+      .getAllByRole('listitem')
+      .map((li) => li.textContent);
+    expect(items).toHaveLength(3);
+    expect(items[0]).toMatch(/^Anna skapade den här · 16 okt\. \d\d:02/);
+    expect(items[1]).toMatch(/^Du ändrade kategorin från Övrigt till Mat & hushåll · /);
+    expect(items[2]).toMatch(/^Du ändrade beloppet från 1.147,60.kr till 1.247,60.kr · /);
+    expect(screen.getByRole('link', { name: 'Ändra utgift' })).toHaveAttribute('href', `/app/expenses/${ID}/edit`);
+    expect(screen.getByRole('button', { name: 'Ta bort utgift' })).toBeInTheDocument();
+  });
+
+  it('names a generated expense’s template and shows the other split modes from the viewer’s side', async () => {
+    const hyra = template('01929c5e-0000-7000-8000-00000000f001', 'Hyra');
+    const generated = expenseRow(ID, {
+      description: 'Hyra september',
+      account_id: HUSET.id,
+      category_id: HOME.id,
+      amount_ore: 1_200_000,
+      split_mode: 'ratio',
+      splits: [
+        { user_id: JACOB_ID, share_ore: 840_000, share_bp: 7000 },
+        { user_id: ANNA_ID, share_ore: 360_000, share_bp: 3000 },
+      ],
+      recurring_template_id: hyra.id,
+      recurring_period: '2026-09',
+    });
+    openDetail(
+      householdServer({
+        expenses: [generated],
+        templates: [hyra],
+        auditEntries: [audit('r1', ID, 'create', JACOB_ID, '2026-09-25T04:00:00.000Z', [], 'recurring')],
+      }),
+    );
+    expect(await screen.findByText('Återkommande: Hyra')).toBeInTheDocument();
+    expect(screen.getByText('Egen fördelning 70/30')).toBeInTheDocument();
+    expect(timelineItems()[0]).toHaveTextContent(/^Skapad automatiskt \(återkommande\) · 25 sep\./);
+  });
+
+  it('says "Allt på Anna" for a full split borne by the partner', async () => {
+    const full = expenseRow(ID, {
+      split_mode: 'full',
+      splits: [
+        { user_id: JACOB_ID, share_ore: 0, share_bp: 0 },
+        { user_id: ANNA_ID, share_ore: 41_200, share_bp: 10_000 },
+      ],
+    });
+    openDetail(householdServer({ expenses: [full] }));
+    expect(await screen.findByText('Allt på Anna')).toBeInTheDocument();
+  });
+
+  it('shows the deleted state with who and when, without Edit and Delete', async () => {
+    const deleted = { ...EXPENSE, deleted_at: '2026-10-17T07:12:00.000Z', updated_by_user_id: ANNA_ID };
+    openDetail(
+      householdServer({
+        expenses: [deleted],
+        auditEntries: [
+          CREATED,
+          audit('d3', ID, 'delete', ANNA_ID, '2026-10-17T07:12:00.000Z', [
+            { field: 'deleted_at', old: null, new: '2026-10-17T07:12:00.000Z' },
+          ]),
+        ],
+      }),
+    );
+    expect(await screen.findByText(/^Anna tog bort den här utgiften · 17 okt\. \d\d:12$/)).toBeInTheDocument();
+    expect(screen.getByText('Den räknas inte längre i saldon eller statistik.')).toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Ändra utgift' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Ta bort utgift' })).not.toBeInTheDocument();
+    expect(timelineItems().at(-1)).toHaveTextContent(/^Anna tog bort den här · /);
+  });
+
+  it('deletes after confirming and goes back with "Utgiften togs bort"', async () => {
+    const server = householdServer({ expenses: [EXPENSE] });
+    const { user, router } = openDetail(server);
+    await user.click(await screen.findByRole('button', { name: 'Ta bort utgift' }));
+    const dialog = await screen.findByRole('alertdialog', { name: 'Ta bort utgiften?' });
+    await user.click(within(dialog).getByRole('button', { name: 'Ta bort' }));
+    expect(await screen.findByText('Utgiften togs bort')).toBeInTheDocument();
+    const push = server.calls('POST', '/sync')[0];
+    const entity = pushedMutations(push ?? ({ body: { mutations: [] } } as never))[0]?.entity as PushedExpense;
+    expect(entity).toMatchObject({ id: ID, amount_ore: 124_760, notes: EXPENSE.notes });
+    expect(entity.deleted_at).toBe(entity.updated_at);
+    await waitFor(() => {
+      expect(router.state.location.pathname).toMatch(/^\/app\/?$/);
+    });
+  });
+
+  it('shows a missing expense with "Uppdatera nu", which pulls again', async () => {
+    const server = householdServer();
+    const { user } = openDetail(server, '01929c5e-0000-7000-8000-00000000dead');
+    const heading = await screen.findByRole('heading', { name: 'Utgiften finns inte' });
+    const before = server.calls('GET', '/sync').length;
+    await user.click(within(heading.parentElement ?? document.body).getByRole('button', { name: 'Uppdatera nu' }));
+    await waitFor(() => {
+      expect(server.calls('GET', '/sync').length).toBeGreaterThan(before);
+    });
+  });
+
+  it('shows the loading and error states', async () => {
+    const pending = new FakeServer().on('GET', '/sync', () => new Promise<Response>(() => undefined));
+    const first = renderApp(`/expenses/${ID}`, { server: pending });
+    expect(await screen.findByText('Hämtar era utgifter…')).toBeInTheDocument();
+    first.unmount();
+    renderApp(`/expenses/${ID}`, {
+      server: new FakeServer().on('GET', '/sync', () => errorResponse('unavailable', 503)),
+    });
+    expect(await screen.findByText('Något gick fel på servern. Försök igen senare.')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Försök igen' })).toBeInTheDocument();
+  });
+
+  it('works in English', async () => {
+    renderApp(`/expenses/${ID}`, {
+      server: householdServer({ expenses: [EXPENSE], auditEntries: [CREATED] }),
+      language: 'en',
+    });
+    expect(await screen.findByText('Friday, 16 October 2026')).toBeInTheDocument();
+    expect(screen.getByText('Account default 50/50')).toBeInTheDocument();
+    expect(timelineItems('History')[0]).toHaveTextContent(/^Anna created this · 16 Oct /);
+  });
+});
diff --git a/web/src/features/expenses/ExpenseDetailPage.tsx b/web/src/features/expenses/ExpenseDetailPage.tsx
index ef15e5d..492f624 100644
--- a/web/src/features/expenses/ExpenseDetailPage.tsx
+++ b/web/src/features/expenses/ExpenseDetailPage.tsx
@@ -1,9 +1,251 @@
-import { PlaceholderPage } from '../../app/PlaceholderPage';
+import { useMemo, useState, type ReactNode } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useLedger, useLedgerWriter, type Ledger } from '../../api/ledger';
+import type { Expense } from '../../api/types';
 import { paths } from '../../app/routes';
+import { TopBar } from '../../app/TopBar';
+import { useSession } from '../../app/useSession';
+import { Avatar } from '../../components/Avatar';
+import { Button, ButtonLink } from '../../components/Button';
+import { CategoryIcon, isColorToken } from '../../components/CategoryIcon';
+import { categoryName, ConfirmDialog, SplitBar, splitLabel, type EditorPeople } from '../../components/editor';
+import { EmptyState } from '../../components/EmptyState';
+import { SegmentedGroup, SegmentedItem } from '../../components/LedgerRow';
+import { Money } from '../../components/Money';
+import { useToast } from '../../components/Toast';
+import { Icon } from '../../design/Icon';
+import type { OutlineIconName } from '../../design/icons.generated';
 import { useI18n } from '../../i18n/useI18n';
+import { detailDate, listDateTime, parseDate } from '../../lib/dates';
+import { BP_TOTAL, formatMoney } from '../../lib/money';
+import { requestErrorMessage, rejectionMessage } from './messages';
+import { peopleOf, pushedExpense } from './model';
+import { ErrorState, LoadingState } from './PageStates';
+import { Timeline } from './Timeline';
+import { auditEntriesOf, localToday, timelineLines } from './timelineLines';
+import styles from './Expenses.module.css';
+import { usePushExpense } from './usePushExpense';
 
-/** S-8 Expense detail, /app/expenses/:id. */
+function FactRow({ icon, label, children }: { icon: OutlineIconName; label: string; children: ReactNode }) {
+  return (
+    <SegmentedItem>
+      <div className={styles.fact}>
+        <Icon name={icon} />
+        <div className={styles.factText}>
+          <span className={styles.factLabel}>{label}</span>
+          <span className={styles.factValue}>{children}</span>
+        </div>
+      </div>
+    </SegmentedItem>
+  );
+}
+
+/** S-8 Expense detail (W-6), /app/expenses/:id: hero, facts, the audit timeline; deleted and missing states. */
 export default function ExpenseDetailPage() {
   const { t } = useI18n();
-  return <PlaceholderPage title={t('web_expense_detail_title')} back={paths.home} />;
+  const { id = '' } = useParams();
+  const session = useSession();
+  const ledger = useLedger();
+  const { refresh } = useLedgerWriter();
+  const title = t('web_expense_detail_title');
+
+  if (ledger.isPending) {
+    return (
+      <>
+        <TopBar title={title} back={paths.home} />
+        <LoadingState />
+      </>
+    );
+  }
+  if (ledger.isError) {
+    return (
+      <>
+        <TopBar title={title} back={paths.home} />
+        <ErrorState error={ledger.error} onRetry={() => void ledger.refetch()} />
+      </>
+    );
+  }
+  const expense = ledger.data.expenses.get(id);
+  const people = peopleOf(ledger.data, session?.userId ?? '');
+  if (expense === undefined || people === null) {
+    return (
+      <>
+        <TopBar title={title} back={paths.home} />
+        <EmptyState
+          icon="sync_problem"
+          title={t('web_expenses_missing_title')}
+          body={t('web_expenses_missing_body')}
+          action={
+            <Button variant="tonal" icon={<Icon name="sync" size={20} />} onClick={() => void refresh()}>
+              {t('web_update_now')}
+            </Button>
+          }
+        />
+      </>
+    );
+  }
+  return <ExpenseDetail ledger={ledger.data} expense={expense} people={people} />;
+}
+
+function ExpenseDetail({ ledger, expense, people }: { ledger: Ledger; expense: Expense; people: EditorPeople }) {
+  const { t, language } = useI18n();
+  const toast = useToast();
+  const navigate = useNavigate();
+  const push = usePushExpense();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const today = localToday();
+  const ctx = { ledger, viewerId: people.viewer.id, t, language, today };
+  const entries = useMemo(() => auditEntriesOf(ledger, 'expense', expense.id), [ledger, expense.id]);
+  const lines = timelineLines(entries, ctx);
+  const deleted = expense.deleted_at !== null;
+  const category = ledger.categories.get(expense.category_id);
+  const account = ledger.accounts.get(expense.account_id);
+  const payer = expense.payer_user_id === people.viewer.id ? people.viewer : people.partner;
+  const shares = Object.fromEntries(expense.splits.map((s) => [s.user_id, s.share_ore]));
+  const viewerSplit = expense.splits.find((s) => s.user_id === people.viewer.id);
+  const bearer = expense.splits.find((s) => s.share_bp === BP_TOTAL)?.user_id ?? null;
+  const template =
+    expense.recurring_template_id === null ? undefined : ledger.recurringTemplates.get(expense.recurring_template_id);
+  const colour = category !== undefined && isColorToken(category.color) ? category.color : 'grey';
+  const categoryLabel = category === undefined ? '' : categoryName(category, t);
+  const deletion = entries.findLast((e) => e.action === 'delete');
+  const deleterId = deletion?.actor_user_id ?? expense.updated_by_user_id;
+  const deleter = deleterId === people.viewer.id ? t('common_you') : (ledger.users.get(deleterId)?.display_name ?? '');
+  const deletedAt = deletion?.client_at ?? expense.deleted_at;
+  const viewerOre = shares[people.viewer.id] ?? 0;
+
+  const remove = async () => {
+    setBusy(true);
+    const now = new Date().toISOString();
+    const outcome = await push({ ...pushedExpense(expense), updated_at: now, deleted_at: now });
+    setBusy(false);
+    setConfirmDelete(false);
+    if (outcome.kind === 'accepted') {
+      toast({ message: t('snackbar_expense_deleted') });
+      const index = (window.history.state as { idx?: number } | null)?.idx ?? 0;
+      if (index > 0) void navigate(-1);
+      else void navigate(paths.home, { replace: true });
+    } else if (outcome.kind === 'rejected') {
+      toast({ message: rejectionMessage(outcome.reason, outcome.current, ledger, people.viewer.id, t) });
+    } else {
+      toast({ message: requestErrorMessage(outcome.error, t) });
+    }
+  };
+
+  return (
+    <>
+      <TopBar
+        title={expense.description}
+        back={paths.home}
+        actions={
+          deleted ? undefined : (
+            <div className={styles.actions}>
+              <ButtonLink
+                to={paths.expenseEdit(expense.id)}
+                variant="tonal"
+                icon={<Icon name="edit" size={20} />}
+                aria-label={t('expense_editor_edit')}
+              >
+                {t('common_edit')}
+              </ButtonLink>
+              <Button
+                variant="text"
+                className={styles.deleteButton}
+                icon={<Icon name="delete" size={20} />}
+                aria-label={t('expense_editor_delete')}
+                onClick={() => {
+                  setConfirmDelete(true);
+                }}
+              >
+                {t('common_delete')}
+              </Button>
+            </div>
+          )
+        }
+      />
+      <div className={styles.detail}>
+        {deleted && deletedAt !== null ? (
+          <div className={styles.deletedBanner} role="status">
+            <Icon name="delete" />
+            <div>
+              <p>{t('expense_detail_deleted_banner', deleter, listDateTime(new Date(deletedAt), today, language))}</p>
+              <p>{t('expense_detail_deleted_body')}</p>
+            </div>
+          </div>
+        ) : null}
+        <div className={deleted ? styles.dimmed : undefined}>
+          <section
+            className={styles.hero}
+            style={{ backgroundColor: `var(--cat-${colour}-container)` }}
+            aria-label={expense.description}
+          >
+            <div className={styles.heroTop}>
+              {category === undefined ? null : (
+                <CategoryIcon icon={category.icon} color={category.color} size={60} archived={deleted} />
+              )}
+              <div className={styles.heroText}>
+                <span className={styles.heroTitle}>{expense.description}</span>
+                <span className={styles.heroMeta}>
+                  {[categoryLabel, account?.name ?? ''].filter((part) => part !== '').join(t('common_separator_dot'))}
+                </span>
+              </div>
+            </div>
+            <Money ore={expense.amount_ore} amountStyle="large" />
+            {template === undefined ? null : (
+              <span className={styles.badge}>
+                <Icon name="event_repeat" size={14} />
+                {t('expense_detail_recurring', template.description)}
+              </span>
+            )}
+          </section>
+        </div>
+        <div className={deleted ? styles.dimmed : undefined}>
+          <SegmentedGroup>
+            <FactRow icon="event" label={t('expense_detail_date')}>
+              {detailDate(parseDate(expense.expense_date), language)}
+            </FactRow>
+            <FactRow icon="person" label={t('expense_detail_paid_by')}>
+              <Avatar displayName={payer.displayName} slot={payer.slot} size={24} />
+              {payer.id === people.viewer.id ? t('common_you') : payer.displayName}
+            </FactRow>
+            <FactRow icon="call_split" label={t('expense_detail_split')}>
+              <span>{splitLabel(expense.split_mode, viewerSplit?.share_bp ?? null, bearer, people, t, language)}</span>
+              <SplitBar
+                viewerShare={expense.amount_ore === 0 ? 0.5 : viewerOre / expense.amount_ore}
+                people={people}
+                thin
+              />
+              <span>
+                {t('common_you')} <span className="amount">{formatMoney(viewerOre, language)}</span>
+                {t('common_separator_dot')}
+                {people.partner.displayName}{' '}
+                <span className="amount">{formatMoney(shares[people.partner.id] ?? 0, language)}</span>
+              </span>
+            </FactRow>
+            {expense.notes === '' ? null : (
+              <FactRow icon="notes" label={t('expense_detail_notes')}>
+                {expense.notes}
+              </FactRow>
+            )}
+          </SegmentedGroup>
+        </div>
+        <Timeline lines={lines} />
+      </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        destructive
+        icon="delete"
+        title={t('expense_detail_delete_title')}
+        body={t('expense_detail_delete_body')}
+        confirmLabel={t('common_delete')}
+        dismissLabel={t('common_cancel')}
+        busy={busy}
+        onConfirm={() => void remove()}
+        onDismiss={() => {
+          setConfirmDelete(false);
+        }}
+      />
+    </>
+  );
 }
diff --git a/web/src/features/expenses/ExpenseEditorPage.test.tsx b/web/src/features/expenses/ExpenseEditorPage.test.tsx
new file mode 100644
index 0000000..2a30f19
--- /dev/null
+++ b/web/src/features/expenses/ExpenseEditorPage.test.tsx
@@ -0,0 +1,456 @@
+import { act, fireEvent, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import type { PushedExpense } from '../../api/types';
+import { todayIso } from '../../lib/dates';
+import { errorResponse, FakeServer, json } from '../../test/fakeServer';
+import { ANNA, JACOB, page } from '../../test/fixtures';
+import { renderApp } from '../../test/render';
+import {
+  ANNA_ID,
+  ENTERTAINMENT,
+  expenseRow,
+  GROCERIES,
+  HEALTH,
+  HOME,
+  householdServer,
+  HUSET,
+  JACOB_ID,
+  OTHER,
+  pushedMutations,
+  SHOPPING,
+  TRANSPORT,
+  VARDAG,
+} from './testLedger';
+
+const NBSP = '\u00A0';
+/** Testing Library normalises the page's U+00A0 to a space; matchers do the same. */
+const SP = ' ';
+const HOME_PATH = /^\/app\/?$/;
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-7[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
+
+/** The text of an element, exactly (money uses U+00A0). */
+const exactText = (text: string) => (_: string, element: Element | null) =>
+  element?.tagName === 'SPAN' && element.textContent === text;
+
+async function openEditor(path: string, server: FakeServer, language: 'sv' | 'en' = 'sv') {
+  const result = renderApp(path, { server, language });
+  await screen.findByLabelText(language === 'sv' ? 'Belopp' : 'Amount');
+  return { ...result, user: userEvent.setup() };
+}
+
+function lastPushed(server: FakeServer): PushedExpense {
+  const push = server.calls('POST', '/sync').at(-1);
+  if (push === undefined) throw new Error('nothing pushed');
+  const [mutation] = pushedMutations(push);
+  return mutation?.entity as PushedExpense;
+}
+
+function categoryRadios() {
+  return within(screen.getByRole('radiogroup', { name: 'Kategori' })).getAllByRole('radio');
+}
+
+describe('W-5 new expense (S-7)', () => {
+  it('opens with the defaults, suggests the category, previews the shares and saves one mutation', async () => {
+    const server = householdServer();
+    const { user, router } = await openEditor('/expenses/new', server);
+    expect(screen.getByRole('heading', { level: 1, name: 'Ny utgift' })).toBeInTheDocument();
+    const amount = screen.getByLabelText('Belopp');
+    expect(amount).toHaveFocus();
+    // AC-8.6: the oldest active account; archived accounts are not offered (AC-6.4).
+    const accountSelect = screen.getByLabelText('Konto');
+    expect(accountSelect).toHaveValue(VARDAG.id);
+    expect(
+      within(accountSelect)
+        .getAllByRole('option')
+        .map((o) => o.textContent),
+    ).toEqual(['Vardag', 'Huset']);
+    expect(screen.getByLabelText('Datum')).toHaveValue(todayIso());
+    expect(screen.getByText('Idag')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Betalt av du. Dubbeltryck för att byta till Anna.' }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Delning/ })).toHaveTextContent('Kontots standard 50/50');
+    // CS-5 step 4 for an empty description: `other`.
+    expect(screen.getByRole('radio', { name: 'Övrigt' })).toHaveAttribute('aria-checked', 'true');
+    const save = screen.getByRole('button', { name: 'Spara' });
+    expect(save).toBeDisabled();
+
+    await user.type(amount, '412');
+    expect(screen.getByText(exactText(`Du 206,00${NBSP}kr · Anna 206,00${NBSP}kr`))).toBeInTheDocument();
+    expect(save).toBeDisabled();
+    await user.type(screen.getByLabelText('Beskrivning'), 'Bio Filmstaden');
+    // CS-6: the keyword `bio` (token) gives Nöje, with no marker (CS-7).
+    expect(screen.getByRole('radio', { name: 'Nöje' })).toHaveAttribute('aria-checked', 'true');
+    expect(save).toBeEnabled();
+
+    await user.click(save);
+    expect(await screen.findByText('Utgiften sparades')).toBeInTheDocument();
+    const entity = lastPushed(server);
+    expect(entity).toMatchObject({
+      account_id: VARDAG.id,
+      category_id: ENTERTAINMENT.id,
+      amount_ore: 41_200,
+      description: 'Bio Filmstaden',
+      notes: '',
+      expense_date: todayIso(),
+      payer_user_id: JACOB_ID,
+      split_mode: 'default',
+      splits: [
+        { user_id: JACOB_ID, share_ore: 20_600, share_bp: 5000 },
+        { user_id: ANNA_ID, share_ore: 20_600, share_bp: 5000 },
+      ],
+      deleted_at: null,
+    });
+    expect(entity.id).toMatch(UUID);
+    expect(entity.created_at).toBe(entity.updated_at);
+    expect(pushedMutations(server.calls('POST', '/sync')[0] ?? ({} as never))).toHaveLength(1);
+    await waitFor(() => {
+      expect(router.state.location.pathname).toMatch(HOME_PATH);
+    });
+    // AC-8.6 "on this phone": this browser remembers the account and its category.
+    expect(window.localStorage.getItem('kvitt.editor.lastAccount')).toBe(VARDAG.id);
+    expect(window.localStorage.getItem('kvitt.editor.lastCategory')).toBe(
+      JSON.stringify({ [VARDAG.id]: ENTERTAINMENT.id }),
+    );
+  });
+
+  it('takes ?account= from the opener and copies its default ratio (AC-8.8 on account change)', async () => {
+    const server = householdServer();
+    const { user } = await openEditor(`/expenses/new?account=${HUSET.id}`, server);
+    expect(screen.getByLabelText('Konto')).toHaveValue(HUSET.id);
+    expect(screen.getByRole('button', { name: /Delning/ })).toHaveTextContent('Kontots standard 60/40');
+    await user.selectOptions(screen.getByLabelText('Konto'), VARDAG.id);
+    expect(screen.getByRole('button', { name: /Delning/ })).toHaveTextContent('Kontots standard 50/50');
+    await user.click(screen.getByRole('button', { name: /Betalt av du/ }));
+    expect(
+      screen.getByRole('button', { name: 'Betalt av Anna. Dubbeltryck för att byta till du.' }),
+    ).toBeInTheDocument();
+  });
+
+  it('follows the history first, and a hand pick wins for the rest of the session (CS-2, CS-3)', async () => {
+    const server = householdServer({
+      expenses: [
+        expenseRow('01929c5e-0000-7000-8000-00000000e101', {
+          description: 'Willys Hornsberg',
+          category_id: SHOPPING.id,
+        }),
+        expenseRow('01929c5e-0000-7000-8000-00000000e102', {
+          description: 'willys hornsberg',
+          category_id: SHOPPING.id,
+        }),
+      ],
+    });
+    const { user } = await openEditor('/expenses/new', server);
+    const description = screen.getByLabelText('Beskrivning');
+    await user.type(description, 'Willys: Hornsberg');
+    expect(screen.getByRole('radio', { name: 'Shopping' })).toHaveAttribute('aria-checked', 'true');
+    await user.clear(description);
+    // CS-7: clearing returns to the step-4 default.
+    expect(screen.getByRole('radio', { name: 'Övrigt' })).toHaveAttribute('aria-checked', 'true');
+    await user.type(description, 'Willys');
+    // History, first token (CS-5 step 2) beats the keyword `willys` (groceries).
+    expect(screen.getByRole('radio', { name: 'Shopping' })).toHaveAttribute('aria-checked', 'true');
+    await user.click(screen.getByRole('radio', { name: 'Shopping' }));
+    await user.clear(description);
+    await user.type(description, 'Bio');
+    expect(screen.getByRole('radio', { name: 'Shopping' })).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('fills the quick row from the account’s most used categories and opens "Alla" (D-060, D-075)', async () => {
+    const used = (n: number, categoryId: string) =>
+      expenseRow(`01929c5e-0000-7000-8000-0000000e${String(n).padStart(4, '0')}`, { category_id: categoryId });
+    const server = householdServer({
+      expenses: [
+        used(1, HEALTH.id),
+        used(2, HEALTH.id),
+        used(3, HEALTH.id),
+        used(4, TRANSPORT.id),
+        used(5, TRANSPORT.id),
+        used(6, HOME.id),
+        { ...used(7, SHOPPING.id), account_id: HUSET.id },
+      ],
+    });
+    const { user } = await openEditor('/expenses/new', server);
+    // Three used in Vardag, filled from sort_order, the selected `other` in the fifth place.
+    expect(categoryRadios().map((r) => r.textContent)).toEqual([
+      'Hälsa',
+      'Transport',
+      'Hem',
+      'Mat & hushåll',
+      'Övrigt',
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Alla kategorier' }));
+    const grid = await screen.findByRole('dialog', { name: 'Välj kategori' });
+    // Every active category in sort_order; the archived Resor is not offered.
+    expect(
+      within(grid)
+        .getAllByRole('radio')
+        .map((r) => r.textContent),
+    ).toEqual(['Mat & hushåll', 'Restaurang & café', 'Hem', 'Transport', 'Nöje', 'Hälsa', 'Shopping', 'Övrigt']);
+    await user.click(within(grid).getByRole('radio', { name: 'Restaurang & café' }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(categoryRadios().map((r) => r.textContent)).toEqual([
+      'Hälsa',
+      'Transport',
+      'Hem',
+      'Mat & hushåll',
+      'Restaurang & café',
+    ]);
+    expect(screen.getByRole('radio', { name: 'Restaurang & café' })).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('computes every split mode live and blocks saving on a too large exact share (AC-8.7)', async () => {
+    const server = householdServer();
+    const { user } = await openEditor('/expenses/new', server);
+    await user.type(screen.getByLabelText('Belopp'), '1060');
+    await user.type(screen.getByLabelText('Beskrivning'), 'Ullared');
+    const splitRow = screen.getByRole('button', { name: /Delning/ });
+    await user.click(splitRow);
+    expect(splitRow).toHaveAttribute('aria-expanded', 'true');
+    const section = screen.getByRole('region', { name: 'Delning' });
+
+    await user.click(within(section).getByRole('radio', { name: 'Exakta belopp' }));
+    await user.type(within(section).getByLabelText('Du'), '1200');
+    const box = within(section).getByText(`140,00${SP}kr för mycket`).parentElement;
+    expect(box).toHaveAttribute('role', 'alert');
+    expect(box).toHaveTextContent(`Du 1${SP}200,00${SP}kr av 1${SP}060,00${SP}kr`);
+    expect(within(section).getByText('Andelen är större än beloppet')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Spara' })).toBeDisabled();
+    await user.clear(within(section).getByLabelText('Du'));
+    await user.type(within(section).getByLabelText('Du'), '400');
+    expect(within(section).getByLabelText('Anna')).toHaveValue('660,00');
+    expect(screen.getByRole('button', { name: 'Spara' })).toBeEnabled();
+
+    await user.click(within(section).getByRole('radio', { name: 'Allt på en person' }));
+    // Default bearer: the one who did not pay (design-spec §5.4).
+    expect(within(section).getByRole('radio', { name: /Anna/ })).toHaveAttribute('aria-checked', 'true');
+    expect(within(section).getByText(exactText(`Du 0,00${NBSP}kr · Anna 1${NBSP}060,00${NBSP}kr`))).toBeInTheDocument();
+    expect(splitRow).toHaveTextContent('Allt på Anna');
+
+    await user.click(within(section).getByRole('radio', { name: 'Egen fördelning' }));
+    const mine = within(section).getByLabelText('Du');
+    expect(mine).toHaveValue('50');
+    await user.clear(mine);
+    await user.type(mine, '60');
+    expect(within(section).getByLabelText('Anna')).toHaveValue('40');
+    expect(within(section).getByText(exactText(`Du 636,00${NBSP}kr · Anna 424,00${NBSP}kr`))).toBeInTheDocument();
+    expect(splitRow).toHaveTextContent('Egen fördelning 60/40');
+
+    await user.click(screen.getByRole('button', { name: 'Spara' }));
+    await screen.findByText('Utgiften sparades');
+    expect(lastPushed(server)).toMatchObject({
+      amount_ore: 106_000,
+      split_mode: 'ratio',
+      splits: [
+        { user_id: JACOB_ID, share_ore: 63_600, share_bp: 6000 },
+        { user_id: ANNA_ID, share_ore: 42_400, share_bp: 4000 },
+      ],
+    });
+  });
+
+  it('asks before discarding changes (title only, D-080) and closes at once without changes', async () => {
+    const { user, router } = await openEditor('/expenses/new', householdServer());
+    await user.click(screen.getByRole('button', { name: 'Avbryt' }));
+    await waitFor(() => {
+      expect(router.state.location.pathname).toMatch(HOME_PATH);
+    });
+
+    await act(async () => {
+      await router.navigate('/expenses/new');
+    });
+    await user.type(await screen.findByLabelText('Belopp'), '99');
+    await user.click(screen.getByRole('button', { name: 'Avbryt' }));
+    const dialog = await screen.findByRole('alertdialog', { name: 'Slänga utgiften?' });
+    expect(within(dialog).queryByRole('paragraph')).not.toBeInTheDocument();
+    expect(dialog.textContent).toBe('Slänga utgiften?Fortsätt redigeraSläng');
+    await user.click(within(dialog).getByRole('button', { name: 'Fortsätt redigera' }));
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('Belopp')).toHaveValue('99');
+    // Esc follows the same rule (AC-21.9).
+    await user.keyboard('{Escape}');
+    const again = await screen.findByRole('alertdialog', { name: 'Slänga utgiften?' });
+    await user.click(within(again).getByRole('button', { name: 'Släng' }));
+    await waitFor(() => {
+      expect(router.state.location.pathname).toMatch(HOME_PATH);
+    });
+  });
+
+  it('validates inline and moves focus to the first field in error (§9.6)', async () => {
+    const server = householdServer();
+    const { user } = await openEditor('/expenses/new', server);
+    await user.type(screen.getByLabelText('Belopp'), '0');
+    expect(
+      screen.getByText(`Beloppet måste vara mellan 0,01${SP}kr och 10${SP}000${SP}000,00${SP}kr`),
+    ).toBeInTheDocument();
+    await user.clear(screen.getByLabelText('Belopp'));
+    await user.type(screen.getByLabelText('Belopp'), '12');
+    const description = screen.getByLabelText('Beskrivning');
+    await user.type(description, 'x'.repeat(101));
+    fireEvent.change(screen.getByLabelText('Datum'), { target: { value: '1999-12-31' } });
+    await user.click(screen.getByRole('button', { name: 'Spara' }));
+    expect(screen.getByText('Högst 100 tecken')).toBeInTheDocument();
+    expect(screen.getByText('Datumet ligger för långt fram eller bak')).toBeInTheDocument();
+    expect(description).toHaveFocus();
+    expect(server.calls('POST', '/sync')).toHaveLength(0);
+    // Enter in the description tries to save the same way.
+    await user.clear(description);
+    await user.type(description, 'Kaffe{Enter}');
+    expect(screen.getByText('Datumet ligger för långt fram eller bak')).toBeInTheDocument();
+    expect(screen.getByLabelText('Datum')).toHaveFocus();
+  });
+
+  it('keeps the form and says so when the server cannot be reached (§15.5)', async () => {
+    const server = householdServer().on('POST', '/sync', () => {
+      throw new TypeError('Failed to fetch');
+    });
+    const { user } = await openEditor('/expenses/new', server);
+    await user.type(screen.getByLabelText('Belopp'), '25');
+    await user.type(screen.getByLabelText('Beskrivning'), 'Kaffe');
+    await user.click(screen.getByRole('button', { name: 'Spara' }));
+    expect(await screen.findByText('Kunde inte nå servern')).toBeInTheDocument();
+    expect(screen.getByLabelText('Beskrivning')).toHaveValue('Kaffe');
+    expect(screen.getByRole('heading', { level: 1, name: 'Ny utgift' })).toBeInTheDocument();
+  });
+
+  it('shows the loading, error and no-account states (SPEC §15.6)', async () => {
+    const pending = new FakeServer().on('GET', '/sync', () => new Promise<Response>(() => undefined));
+    const first = renderApp('/expenses/new', { server: pending });
+    expect(await screen.findByText('Hämtar era utgifter…')).toBeInTheDocument();
+    first.unmount();
+
+    let fail = true;
+    const flaky = householdServer().on('GET', '/sync', () =>
+      fail
+        ? errorResponse('internal', 500)
+        : json(page(0, { users: [JACOB, ANNA], accounts: [VARDAG], categories: [OTHER] })),
+    );
+    const second = renderApp('/expenses/new', { server: flaky });
+    expect(await screen.findByText('Något gick fel på servern. Försök igen senare.')).toBeInTheDocument();
+    fail = false;
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Försök igen' }));
+    expect(await screen.findByLabelText('Belopp')).toBeInTheDocument();
+    second.unmount();
+
+    const empty = new FakeServer().on('GET', '/sync', () =>
+      json(page(0, { users: [JACOB, ANNA], categories: [OTHER] })),
+    );
+    renderApp('/expenses/new', { server: empty });
+    expect(await screen.findByRole('heading', { name: 'Skapa ert första konto' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Nytt konto' })).toHaveAttribute('href', '/app/accounts/new');
+  });
+
+  it('works in English', async () => {
+    await openEditor('/expenses/new', householdServer(), 'en');
+    expect(screen.getByRole('heading', { level: 1, name: 'New expense' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Split/ })).toHaveTextContent('Account default 50/50');
+    expect(screen.getByRole('button', { name: 'Paid by you. Double-tap to switch to Anna.' })).toBeInTheDocument();
+  });
+});
+
+describe('W-5 edit mode', () => {
+  const EXISTING = expenseRow('01929c5e-0000-7000-8000-00000000e201', {
+    amount_ore: 124_760,
+    description: 'ICA Maxi Lindhagen',
+    notes: 'Storhandling',
+    payer_user_id: ANNA_ID,
+    split_mode: 'full',
+    splits: [
+      { user_id: JACOB_ID, share_ore: 0, share_bp: 0 },
+      { user_id: ANNA_ID, share_ore: 124_760, share_bp: 10_000 },
+    ],
+  });
+
+  it('loads the saved values without focus, the split section open for a non-default mode', async () => {
+    await openEditor(`/expenses/${EXISTING.id}/edit`, householdServer({ expenses: [EXISTING] }));
+    expect(screen.getByRole('heading', { level: 1, name: 'Ändra utgift' })).toBeInTheDocument();
+    const amount = screen.getByLabelText('Belopp');
+    expect(amount).toHaveValue(`1${NBSP}247,60`);
+    expect(amount).not.toHaveFocus();
+    expect(screen.getByLabelText('Beskrivning')).toHaveValue('ICA Maxi Lindhagen');
+    expect(screen.getByLabelText('Anteckningar')).toHaveValue('Storhandling');
+    expect(screen.getByRole('radio', { name: 'Mat & hushåll' })).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByRole('button', { name: /Betalt av Anna/ })).toBeInTheDocument();
+    const section = screen.getByRole('region', { name: 'Delning' });
+    expect(within(section).getByRole('radio', { name: 'Allt på en person' })).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByRole('button', { name: 'Ta bort utgift' })).toBeInTheDocument();
+  });
+
+  it('never suggests in edit mode (CS-1) and pushes the edit with the stored created_at', async () => {
+    const server = householdServer({ expenses: [EXISTING] });
+    const { user } = await openEditor(`/expenses/${EXISTING.id}/edit`, server);
+    const description = screen.getByLabelText('Beskrivning');
+    await user.clear(description);
+    await user.type(description, 'Bio');
+    expect(screen.getByRole('radio', { name: 'Mat & hushåll' })).toHaveAttribute('aria-checked', 'true');
+    await user.click(screen.getByRole('button', { name: 'Spara' }));
+    await screen.findByText('Utgiften sparades');
+    const entity = lastPushed(server);
+    expect(entity).toMatchObject({
+      id: EXISTING.id,
+      description: 'Bio',
+      created_at: EXISTING.created_at,
+      split_mode: 'full',
+    });
+    expect(entity.updated_at > EXISTING.updated_at).toBe(true);
+  });
+
+  it('shows a stale rejection with S-16’s copy, reloads the row and keeps the form', async () => {
+    const current = { ...EXISTING, description: 'ICA Kvantum', updated_by_user_id: ANNA_ID, server_version: 999 };
+    const server = householdServer({ expenses: [EXISTING] }, (mutation) => ({
+      mutation_id: mutation.mutation_id,
+      entity_type: 'expense',
+      entity_id: EXISTING.id,
+      status: 'rejected',
+      reason: 'stale',
+      message: 'a newer version exists',
+      current,
+    }));
+    const { user, queryClient } = await openEditor(`/expenses/${EXISTING.id}/edit`, server);
+    await user.type(screen.getByLabelText('Beskrivning'), ' 2');
+    await user.click(screen.getByRole('button', { name: 'Spara' }));
+    const alert = await screen.findByText('Din ändring ersattes av en nyare ändring från Anna');
+    expect(alert).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Visa nuvarande version' })).toHaveAttribute(
+      'href',
+      `/app/expenses/${EXISTING.id}`,
+    );
+    expect(screen.getByLabelText('Beskrivning')).toHaveValue('ICA Maxi Lindhagen 2');
+    const ledger = queryClient.getQueryData<{ expenses: Map<string, { description: string }> }>(['ledger']);
+    expect(ledger?.expenses.get(EXISTING.id)?.description).toBe('ICA Kvantum');
+  });
+
+  it('deletes after confirming, as a tombstone of the stored row', async () => {
+    const server = householdServer({ expenses: [EXISTING] });
+    const { user, router } = await openEditor(`/expenses/${EXISTING.id}/edit`, server);
+    await user.click(screen.getByRole('button', { name: 'Ta bort utgift' }));
+    const dialog = await screen.findByRole('alertdialog', { name: 'Ta bort utgiften?' });
+    expect(dialog).toHaveTextContent('Den försvinner för er båda.');
+    await user.click(within(dialog).getByRole('button', { name: 'Ta bort' }));
+    expect(await screen.findByText('Utgiften togs bort')).toBeInTheDocument();
+    const entity = lastPushed(server);
+    expect(entity).toMatchObject({ id: EXISTING.id, description: EXISTING.description, amount_ore: 124_760 });
+    expect(entity.deleted_at).not.toBeNull();
+    expect(entity.deleted_at).toBe(entity.updated_at);
+    await waitFor(() => {
+      expect(router.state.location.pathname).toMatch(HOME_PATH);
+    });
+  });
+
+  it('says so when the expense does not exist', async () => {
+    renderApp('/expenses/01929c5e-0000-7000-8000-00000000dead/edit', { server: householdServer() });
+    expect(await screen.findByText('Det här finns inte längre')).toBeInTheDocument();
+  });
+});
+
+describe('category fallback', () => {
+  it('uses the category last used in the account in this browser (AC-8.6)', async () => {
+    window.localStorage.setItem('kvitt.editor.lastCategory', JSON.stringify({ [VARDAG.id]: GROCERIES.id }));
+    window.localStorage.setItem('kvitt.editor.lastAccount', HUSET.id);
+    await openEditor('/expenses/new', householdServer());
+    expect(screen.getByLabelText('Konto')).toHaveValue(HUSET.id);
+    expect(screen.getByRole('radio', { name: 'Övrigt' })).toHaveAttribute('aria-checked', 'true');
+    await userEvent.setup().selectOptions(screen.getByLabelText('Konto'), VARDAG.id);
+    expect(screen.getByRole('radio', { name: 'Mat & hushåll' })).toHaveAttribute('aria-checked', 'true');
+  });
+});
diff --git a/web/src/features/expenses/ExpenseEditorPage.tsx b/web/src/features/expenses/ExpenseEditorPage.tsx
index fbd24a6..750687e 100644
--- a/web/src/features/expenses/ExpenseEditorPage.tsx
+++ b/web/src/features/expenses/ExpenseEditorPage.tsx
@@ -1,15 +1,662 @@
-import { useParams } from 'react-router';
-import { PlaceholderPage } from '../../app/PlaceholderPage';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { useBlocker, useNavigate, useParams, useSearchParams } from 'react-router';
+import { live, useLedger, type Ledger } from '../../api/ledger';
+import type { Expense, PushedExpense } from '../../api/types';
 import { paths } from '../../app/routes';
+import { useShortcut } from '../../app/shortcuts';
+import { TopBar } from '../../app/TopBar';
+import { useSession } from '../../app/useSession';
+import { AmountField } from '../../components/AmountField';
+import { Button, ButtonLink } from '../../components/Button';
+import {
+  AccountDot,
+  accountColorIndex,
+  CategoryPicker,
+  codePoints,
+  ConfirmDialog,
+  DateControl,
+  draftSplitLabel,
+  frequentCategoryIds,
+  newSplitDraft,
+  NOTES_MAX,
+  NotesField,
+  OptionRow,
+  OptionRows,
+  optionRowControlClass,
+  optionRowHintClass,
+  PayerRow,
+  quickRowCategories,
+  resolveSplit,
+  SelectControl,
+  splitDraftOf,
+  SplitPreview,
+  SplitSection,
+  wireSplits,
+  type EditorPeople,
+  type SplitDraft,
+} from '../../components/editor';
+import { EmptyState } from '../../components/EmptyState';
+import { TextField } from '../../components/TextField';
+import { useToast } from '../../components/Toast';
+import { Icon } from '../../design/Icon';
 import { useI18n } from '../../i18n/useI18n';
+import { todayIso } from '../../lib/dates';
+import { uuidv7, timestamp } from '../../lib/ids';
+import {
+  AMOUNT_MAX_ORE,
+  AMOUNT_MIN_ORE,
+  amountInputDisplay,
+  amountInputOf,
+  amountInRange,
+  formatMoney,
+} from '../../lib/money';
+import { requestErrorMessage, rejectionMessage } from './messages';
+import {
+  accountBpOf,
+  activeAccountsOf,
+  activeCategories,
+  DATE_MIN,
+  dateInRange,
+  dateMax,
+  defaultAccountId,
+  DESCRIPTION_MAX,
+  peopleOf,
+  pushedExpense,
+  rememberEditorChoice,
+  yesterdayOf,
+} from './model';
+import { ErrorState, LoadingState } from './PageStates';
+import { suggestFor, suggestionHistory } from './suggest/forLedger';
+import styles from './Expenses.module.css';
+import { usePushExpense, type PushOutcome } from './usePushExpense';
 
-/** S-7 Expense editor: /app/expenses/new and /app/expenses/:id/edit. */
+interface Form {
+  amountText: string;
+  amountOre: number | null;
+  description: string;
+  categoryId: string | null;
+  /** CS-2: set by any pick in the category picker; the suggestion then never changes the category. */
+  pickedByHand: boolean;
+  accountId: string;
+  date: string;
+  payerId: string;
+  split: SplitDraft;
+  notes: string;
+}
+
+type FieldName = 'amount' | 'description' | 'category' | 'date' | 'notes';
+type Errors = Partial<Record<FieldName, string>>;
+
+/** A banner over the form after a failed write; `currentId` links to the server's version (stale, deleted). */
+interface Problem {
+  message: string;
+  currentId: string | null;
+}
+
+/** The comparable part of a form, for the discard rule (S-7: close with changes asks first). */
+function fingerprint(form: Form): string {
+  return JSON.stringify([
+    form.amountText,
+    form.description,
+    form.categoryId,
+    form.accountId,
+    form.date,
+    form.payerId,
+    form.split,
+    form.notes,
+  ]);
+}
+
+/** Back to where the editor was opened from, or to `fallback` when it was the first page of the visit. */
+function useLeave(fallback: string) {
+  const navigate = useNavigate();
+  return useCallback(
+    (steps = 1, otherwise: string = fallback) => {
+      const index = (window.history.state as { idx?: number } | null)?.idx ?? 0;
+      if (index >= steps) void navigate(-steps);
+      else void navigate(otherwise, { replace: true });
+    },
+    [navigate, fallback],
+  );
+}
+
+/** S-7 Expense editor (W-5): /app/expenses/new (optionally `?account=<id>`) and /app/expenses/:id/edit. */
 export default function ExpenseEditorPage() {
   const { t } = useI18n();
   const { id } = useParams();
-  return id === undefined ? (
-    <PlaceholderPage title={t('expense_editor_new')} back={paths.home} />
-  ) : (
-    <PlaceholderPage title={t('expense_editor_edit')} back={paths.expense(id)} />
+  const [searchParams] = useSearchParams();
+  const session = useSession();
+  const ledger = useLedger();
+  const title = id === undefined ? t('expense_editor_new') : t('expense_editor_edit');
+  const back = id === undefined ? paths.home : paths.expense(id);
+
+  if (ledger.isPending) {
+    return (
+      <>
+        <TopBar title={title} back={back} />
+        <LoadingState />
+      </>
+    );
+  }
+  if (ledger.isError) {
+    return (
+      <>
+        <TopBar title={title} back={back} />
+        <ErrorState error={ledger.error} onRetry={() => void ledger.refetch()} />
+      </>
+    );
+  }
+  const viewerId = session?.userId ?? '';
+  const people = peopleOf(ledger.data, viewerId);
+  if (people === null) {
+    return (
+      <>
+        <TopBar title={title} back={back} />
+        <EmptyState icon="person_add" title={t('error_household_incomplete')} />
+      </>
+    );
+  }
+  const existing = id === undefined ? undefined : ledger.data.expenses.get(id);
+  if (id !== undefined && (existing === undefined || existing.deleted_at !== null)) {
+    return (
+      <>
+        <TopBar title={title} back={paths.home} />
+        <EmptyState icon="sync_problem" title={t('error_not_found')} />
+      </>
+    );
+  }
+  if (existing === undefined && activeAccountsOf(ledger.data).length === 0) {
+    return (
+      <>
+        <TopBar title={title} back={back} />
+        <EmptyState
+          icon="account_balance"
+          title={t('home_empty_title')}
+          body={t('home_empty_subtitle')}
+          action={
+            <ButtonLink to={paths.accountNew} variant="tonal" icon={<Icon name="add" size={20} />}>
+              {t('account_editor_new')}
+            </ButtonLink>
+          }
+        />
+      </>
+    );
+  }
+  return (
+    <ExpenseEditor
+      key={id ?? 'new'}
+      ledger={ledger.data}
+      people={people}
+      existing={existing}
+      requestedAccountId={searchParams.get('account')}
+      title={title}
+    />
+  );
+}
+
+function initialForm(
+  ledger: Ledger,
+  people: EditorPeople,
+  existing: Expense | undefined,
+  requestedAccountId: string | null,
+  language: 'sv' | 'en',
+): Form {
+  const ids = { viewerId: people.viewer.id, partnerId: people.partner.id };
+  if (existing !== undefined) {
+    const account = ledger.accounts.get(existing.account_id);
+    const amount = amountInputOf(existing.amount_ore);
+    return {
+      amountText: amountInputDisplay(amount, language),
+      amountOre: existing.amount_ore,
+      description: existing.description,
+      categoryId: existing.category_id,
+      pickedByHand: true,
+      accountId: existing.account_id,
+      date: existing.expense_date,
+      payerId: existing.payer_user_id,
+      split: splitDraftOf(existing.split_mode, existing.splits, ids, accountBpOf(account), language),
+      notes: existing.notes,
+    };
+  }
+  const accountId = defaultAccountId(activeAccountsOf(ledger), requestedAccountId) ?? '';
+  return {
+    amountText: '',
+    amountOre: null,
+    description: '',
+    categoryId: suggestFor(ledger, [], '', accountId),
+    pickedByHand: false,
+    accountId,
+    date: todayIso(),
+    payerId: people.viewer.id,
+    split: newSplitDraft(ids, accountBpOf(ledger.accounts.get(accountId)), language),
+    notes: '',
+  };
+}
+
+function ExpenseEditor({
+  ledger,
+  people,
+  existing,
+  requestedAccountId,
+  title,
+}: {
+  ledger: Ledger;
+  people: EditorPeople;
+  existing: Expense | undefined;
+  requestedAccountId: string | null;
+  title: string;
+}) {
+  const { t, tp, language } = useI18n();
+  const toast = useToast();
+  const push = usePushExpense();
+  const isNew = existing === undefined;
+  const leave = useLeave(isNew ? paths.home : paths.expense(existing.id));
+  const [initial] = useState(() => initialForm(ledger, people, existing, requestedAccountId, language));
+  const [form, setForm] = useState<Form>(initial);
+  const [errors, setErrors] = useState<Errors>({});
+  const [problem, setProblem] = useState<Problem | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [splitOpen, setSplitOpen] = useState(existing !== undefined && existing.split_mode !== 'default');
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const leaving = useRef(false);
+  const ids = { amount: useId(), description: useId(), account: useId(), date: useId() };
+
+  const today = todayIso();
+  const history = useMemo(() => (isNew ? suggestionHistory(ledger) : []), [isNew, ledger]);
+  const accounts = useMemo(() => {
+    const active = activeAccountsOf(ledger);
+    // Edit mode keeps an archived account selectable for this expense (AC-6.4 hides it from new expenses only).
+    const current = ledger.accounts.get(form.accountId);
+    return current !== undefined && !active.some((a) => a.id === current.id) ? [...active, current] : active;
+  }, [ledger, form.accountId]);
+  const allAccounts = useMemo(() => live(ledger.accounts), [ledger]);
+  const categories = useMemo(() => activeCategories(ledger), [ledger]);
+  const quick = useMemo(
+    () =>
+      quickRowCategories(
+        [...ledger.categories.values()],
+        frequentCategoryIds(ledger.expenses.values(), form.accountId, categories),
+        form.categoryId,
+      ),
+    [ledger, form.accountId, form.categoryId, categories],
+  );
+  const accountBp = accountBpOf(ledger.accounts.get(form.accountId));
+  const resolution = resolveSplit(form.split, {
+    amountOre: form.amountOre,
+    payerId: form.payerId,
+    accountBp,
+    viewerId: people.viewer.id,
+    partnerId: people.partner.id,
+  });
+  const dirty = fingerprint(form) !== fingerprint(initial);
+
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      dirty && !leaving.current && currentLocation.pathname !== nextLocation.pathname,
+  );
+
+  const update = (patch: Partial<Form>) => {
+    setForm((current) => ({ ...current, ...patch }));
+    setErrors((current) => {
+      const next = { ...current };
+      for (const key of Object.keys(patch)) {
+        if (key === 'amountText') delete next.amount;
+        if (key === 'description') delete next.description;
+        if (key === 'categoryId') delete next.category;
+        if (key === 'date') delete next.date;
+        if (key === 'notes') delete next.notes;
+      }
+      return next;
+    });
+  };
+
+  /** CS-3: while nothing was picked by hand, a new expense's category follows the description and the account. */
+  const suggested = (description: string, accountId: string): Partial<Form> =>
+    isNew && !form.pickedByHand ? { categoryId: suggestFor(ledger, history, description, accountId) } : {};
+
+  const cancel = () => {
+    leave();
+  };
+  useShortcut('Escape', cancel);
+
+  const validate = (): Errors => {
+    const next: Errors = {};
+    if (form.amountOre === null) next.amount = t('error_amount_required');
+    else if (!amountInRange(form.amountOre))
+      next.amount = t(
+        'error_amount_out_of_range',
+        formatMoney(AMOUNT_MIN_ORE, language),
+        formatMoney(AMOUNT_MAX_ORE, language),
+      );
+    const description = form.description.trim();
+    if (description === '') next.description = t('error_description_required');
+    else if (codePoints(description) > DESCRIPTION_MAX) next.description = tp('error_too_long', DESCRIPTION_MAX);
+    if (form.categoryId === null) next.category = t('editor_pick_category');
+    if (!dateInRange(form.date, today)) next.date = t('error_date_out_of_range');
+    if (codePoints(form.notes.trim()) > NOTES_MAX) next.notes = tp('error_too_long', NOTES_MAX);
+    return next;
+  };
+
+  const focusFirst = (found: Errors) => {
+    const order: [FieldName, string][] = [
+      ['amount', ids.amount],
+      ['description', ids.description],
+      ['date', ids.date],
+    ];
+    const first = order.find(([field]) => found[field] !== undefined);
+    if (first !== undefined) document.getElementById(first[1])?.focus();
+  };
+
+  const finish = (outcome: PushOutcome, onAccepted: () => void) => {
+    if (outcome.kind === 'accepted') {
+      onAccepted();
+      return;
+    }
+    leaving.current = false;
+    setSaving(false);
+    if (outcome.kind === 'rejected') {
+      setProblem({
+        message: rejectionMessage(outcome.reason, outcome.current, ledger, people.viewer.id, t),
+        currentId: !isNew && outcome.current !== null ? outcome.current.id : null,
+      });
+    } else {
+      setProblem({ message: requestErrorMessage(outcome.error, t), currentId: null });
+    }
+  };
+
+  const save = async () => {
+    if (saving) return;
+    const found = validate();
+    setErrors(found);
+    if (
+      Object.keys(found).length > 0 ||
+      resolution.kind !== 'ok' ||
+      form.amountOre === null ||
+      form.categoryId === null
+    ) {
+      focusFirst(found);
+      return;
+    }
+    const now = timestamp();
+    const entity: PushedExpense = {
+      id: existing?.id ?? uuidv7(),
+      account_id: form.accountId,
+      category_id: form.categoryId,
+      amount_ore: form.amountOre,
+      description: form.description.trim(),
+      notes: form.notes.trim(),
+      expense_date: form.date,
+      payer_user_id: form.payerId,
+      split_mode: form.split.mode,
+      splits: wireSplits(resolution),
+      created_at: existing?.created_at ?? now,
+      updated_at: now,
+      deleted_at: null,
+    };
+    setSaving(true);
+    setProblem(null);
+    const outcome = await push(entity);
+    finish(outcome, () => {
+      rememberEditorChoice(entity.account_id, entity.category_id);
+      leaving.current = true;
+      toast({ message: t('snackbar_expense_saved') });
+      leave();
+    });
+  };
+
+  const remove = async () => {
+    if (existing === undefined || saving) return;
+    const now = timestamp();
+    setSaving(true);
+    setProblem(null);
+    const outcome = await push({ ...pushedExpense(existing), updated_at: now, deleted_at: now });
+    setConfirmDelete(false);
+    finish(outcome, () => {
+      leaving.current = true;
+      toast({ message: t('snackbar_expense_deleted') });
+      // Back past the detail page to its opener (S-7 "Ta bort utgift").
+      leave(2, paths.home);
+    });
+  };
+
+  const canSave =
+    !saving &&
+    form.amountOre !== null &&
+    form.amountOre > 0 &&
+    form.description.trim() !== '' &&
+    resolution.kind === 'ok';
+  const amountZero = form.amountOre === 0;
+  const dateHint =
+    form.date === today ? t('common_today') : form.date === yesterdayOf(today) ? t('common_yesterday') : null;
+
+  return (
+    <>
+      <TopBar
+        title={title}
+        actions={
+          <>
+            <Button variant="text" onClick={cancel}>
+              {t('common_cancel')}
+            </Button>
+            <Button
+              icon={<Icon name="check" size={20} />}
+              disabled={!canSave}
+              aria-busy={saving}
+              onClick={() => void save()}
+            >
+              {t('common_save')}
+            </Button>
+          </>
+        }
+      />
+      <form
+        className={styles.editor}
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault();
+          void save();
+        }}
+      >
+        {problem === null ? null : (
+          <div className={styles.problem} role="alert">
+            <Icon name="error" size={20} />
+            <span className={styles.problemText}>{problem.message}</span>
+            {problem.currentId === null ? null : (
+              <ButtonLink
+                to={paths.expense(problem.currentId)}
+                variant="text"
+                onClick={() => {
+                  leaving.current = true;
+                }}
+              >
+                {t('home_sync_lost_show_current')}
+              </ButtonLink>
+            )}
+          </div>
+        )}
+        <AmountField
+          id={ids.amount}
+          className={styles.amount}
+          label={t('editor_amount')}
+          value={form.amountText}
+          autoFocus={isNew}
+          error={
+            errors.amount ??
+            (amountZero
+              ? t(
+                  'error_amount_out_of_range',
+                  formatMoney(AMOUNT_MIN_ORE, language),
+                  formatMoney(AMOUNT_MAX_ORE, language),
+                )
+              : null)
+          }
+          onChange={(text, ore) => {
+            update({ amountText: text, amountOre: ore });
+          }}
+        />
+        <TextField
+          id={ids.description}
+          label={t('editor_description')}
+          value={form.description}
+          error={errors.description}
+          autoComplete="off"
+          enterKeyHint="done"
+          onChange={(description) => {
+            update({ description, ...suggested(description, form.accountId) });
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              void save();
+            }
+          }}
+        />
+        <CategoryPicker
+          quick={quick}
+          all={categories}
+          selectedId={form.categoryId}
+          onPick={(categoryId) => {
+            update({ categoryId, pickedByHand: true });
+          }}
+        />
+        {errors.category === undefined ? null : (
+          <p className={styles.fieldError} role="alert">
+            {errors.category}
+          </p>
+        )}
+        <OptionRows>
+          <OptionRow
+            label={t('editor_account')}
+            controlId={ids.account}
+            leading={<AccountDot colorIndex={accountColorIndex(form.accountId, allAccounts)} />}
+            trailing={<Icon name="expand_more" />}
+          >
+            <SelectControl
+              id={ids.account}
+              className={optionRowControlClass}
+              value={form.accountId}
+              options={accounts.map((a) => ({ value: a.id, label: a.name }))}
+              onChange={(accountId) => {
+                const next = accountBpOf(ledger.accounts.get(accountId));
+                update({
+                  accountId,
+                  ...suggested(form.description, accountId),
+                  // AC-8.8: mode `default` takes the new account's ratio (resolved from the account); the ratio field
+                  // follows it until the user types one.
+                  split:
+                    form.split.mode === 'default'
+                      ? newSplitDraft({ viewerId: people.viewer.id, partnerId: people.partner.id }, next, language)
+                      : form.split,
+                });
+              }}
+            />
+          </OptionRow>
+          <OptionRow label={t('expense_editor_date')} controlId={ids.date} leading={<Icon name="event" />}>
+            <DateControl
+              id={ids.date}
+              className={optionRowControlClass}
+              value={form.date}
+              min={DATE_MIN}
+              max={dateMax(today)}
+              required
+              invalid={errors.date !== undefined}
+              describedBy={errors.date === undefined ? undefined : `${ids.date}-error`}
+              onChange={(date) => {
+                update({ date });
+              }}
+            />
+            {dateHint === null ? null : <span className={optionRowHintClass}>{dateHint}</span>}
+          </OptionRow>
+          <PayerRow
+            people={people}
+            payerId={form.payerId}
+            onChange={(payerId) => {
+              update({ payerId });
+            }}
+          />
+          <OptionRow
+            label={t('editor_split')}
+            leading={<Icon name="call_split" />}
+            trailing={<Icon name={splitOpen ? 'expand_less' : 'expand_more'} />}
+            expanded={splitOpen}
+            active={splitOpen}
+            onClick={() => {
+              setSplitOpen((open) => !open);
+            }}
+          >
+            <span>{draftSplitLabel(form.split, accountBp, people, t, language)}</span>
+          </OptionRow>
+        </OptionRows>
+        {errors.date === undefined ? null : (
+          <p id={`${ids.date}-error`} className={styles.fieldError} role="alert">
+            {errors.date}
+          </p>
+        )}
+        {splitOpen ? (
+          <SplitSection
+            draft={form.split}
+            onChange={(split) => {
+              update({ split });
+            }}
+            people={people}
+            amountOre={form.amountOre}
+            payerId={form.payerId}
+            accountBp={accountBp}
+            resolution={resolution}
+            onCollapse={() => {
+              setSplitOpen(false);
+            }}
+          />
+        ) : resolution.kind === 'ok' ? (
+          <SplitPreview shares={resolution.shares} people={people} />
+        ) : null}
+        <NotesField
+          value={form.notes}
+          error={errors.notes}
+          onChange={(notes) => {
+            update({ notes });
+          }}
+        />
+        {existing === undefined ? null : (
+          <Button
+            variant="text"
+            className={styles.deleteButton}
+            icon={<Icon name="delete" size={20} />}
+            onClick={() => {
+              setConfirmDelete(true);
+            }}
+          >
+            {t('expense_editor_delete')}
+          </Button>
+        )}
+      </form>
+      <ConfirmDialog
+        open={blocker.state === 'blocked'}
+        title={isNew ? t('expense_editor_discard_title') : t('common_discard_title')}
+        confirmLabel={t('common_discard')}
+        dismissLabel={t('common_keep_editing')}
+        onConfirm={() => {
+          leaving.current = true;
+          blocker.proceed?.();
+        }}
+        onDismiss={() => {
+          blocker.reset?.();
+        }}
+      />
+      <ConfirmDialog
+        open={confirmDelete}
+        destructive
+        icon="delete"
+        title={t('expense_detail_delete_title')}
+        body={t('expense_detail_delete_body')}
+        confirmLabel={t('common_delete')}
+        dismissLabel={t('common_cancel')}
+        busy={saving}
+        onConfirm={() => void remove()}
+        onDismiss={() => {
+          setConfirmDelete(false);
+        }}
+      />
+    </>
   );
 }
diff --git a/web/src/features/expenses/Expenses.module.css b/web/src/features/expenses/Expenses.module.css
new file mode 100644
index 0000000..93a9a93
--- /dev/null
+++ b/web/src/features/expenses/Expenses.module.css
@@ -0,0 +1,191 @@
+/* W-5 editor, W-6 detail (design-spec S-7, S-8, §3.9, §3.11). Tokens only. */
+.loading {
+  padding: var(--s6) var(--gutter);
+  font: var(--type-body-large);
+  color: var(--on-surface-variant);
+}
+
+.editor,
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-section);
+  max-width: 40rem;
+  padding: 0 var(--gutter) var(--s6);
+}
+.amount input {
+  font: var(--type-amount-hero);
+  letter-spacing: var(--tracking-amount-hero);
+}
+.fieldError {
+  padding: 0 var(--s4);
+  font: var(--type-body-small);
+  letter-spacing: var(--tracking-body-small);
+  color: var(--error);
+}
+.problem {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s2) var(--s3);
+  padding: var(--s3) var(--s4);
+  border-radius: var(--radius-large);
+  background: var(--error-container);
+  color: var(--on-error-container);
+  font: var(--type-body-medium);
+}
+.problemText {
+  flex: 1;
+  min-width: 12rem;
+}
+.deleteButton {
+  align-self: flex-start;
+  color: var(--error);
+}
+
+/* S-8 hero card: category tint, tile 60, description, "Kategori · Konto", amount, recurring badge. */
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  padding: var(--s5);
+  border-radius: var(--radius-extra-large);
+  color: var(--on-surface);
+}
+.heroTop {
+  display: flex;
+  align-items: center;
+  gap: var(--s4);
+}
+.heroText {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  min-width: 0;
+}
+.heroTitle {
+  font: var(--type-title-large);
+  overflow-wrap: anywhere;
+}
+.heroMeta {
+  font: var(--type-body-medium);
+  color: var(--on-surface-variant);
+  overflow-wrap: anywhere;
+}
+.badge {
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  gap: var(--s1);
+  padding: 2px var(--s3);
+  border-radius: var(--radius-full);
+  background: var(--tertiary-container);
+  color: var(--on-tertiary-container);
+  font: var(--type-label-small);
+  font-weight: 600;
+}
+.dimmed {
+  opacity: 0.62;
+}
+.deletedBanner {
+  display: flex;
+  gap: var(--s3);
+  padding: var(--s3) var(--s4);
+  border-radius: var(--radius-large);
+  background: var(--surface-container-high);
+  color: var(--on-surface);
+  font: var(--type-body-medium);
+}
+.deletedBanner > :first-child {
+  flex: none;
+  color: var(--error);
+}
+.deletedBanner p + p {
+  color: var(--on-surface-variant);
+}
+.actions {
+  display: flex;
+  gap: var(--s2);
+}
+
+/* FactRow (design-spec §3.11). */
+.fact {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s4);
+  min-height: var(--row-min);
+  padding: var(--s3) var(--s4);
+  background: var(--card);
+}
+.fact > :first-child {
+  flex: none;
+  margin-top: var(--s1);
+  color: var(--on-surface-variant);
+}
+.factText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.factLabel {
+  font: var(--type-label-medium);
+  color: var(--on-surface-variant);
+}
+.factValue {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s2);
+  font: var(--type-body-large);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+/* Timeline (design-spec §3.9). */
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+}
+.timelineTitle {
+  padding: 0 var(--s2);
+  font: var(--type-title-small);
+}
+.timelineCard {
+  margin: 0;
+  padding: var(--s4) var(--s4) var(--s3);
+  border-radius: var(--radius-extra-large);
+  background: var(--card);
+  box-shadow: var(--elevation-card);
+  list-style: none;
+}
+.timelineItem {
+  position: relative;
+  padding: 0 0 var(--s4) var(--s8);
+  font: var(--type-body-medium);
+  letter-spacing: var(--tracking-body-medium);
+  color: var(--on-surface);
+}
+.timelineItem:last-child {
+  padding-bottom: var(--s1);
+}
+.timelineItem::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--secondary);
+}
+.timelineItem:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 11px;
+  top: 20px;
+  bottom: 2px;
+  width: 2px;
+  background: var(--outline-variant);
+}
diff --git a/web/src/features/expenses/PageStates.tsx b/web/src/features/expenses/PageStates.tsx
new file mode 100644
index 0000000..bab7df1
--- /dev/null
+++ b/web/src/features/expenses/PageStates.tsx
@@ -0,0 +1,32 @@
+import { Button } from '../../components/Button';
+import { EmptyState } from '../../components/EmptyState';
+import { Icon } from '../../design/Icon';
+import { useI18n } from '../../i18n/useI18n';
+import { requestErrorMessage } from './messages';
+import styles from './Expenses.module.css';
+
+/** The first snapshot pull (SPEC §15.6 "loading"): a polite status line. */
+export function LoadingState() {
+  const { t } = useI18n();
+  return (
+    <p className={styles.loading} role="status">
+      {t('home_loading')}
+    </p>
+  );
+}
+
+/** A failed read (SPEC §15.6 "error"): the error's text and "Försök igen". */
+export function ErrorState({ error, onRetry }: { error: unknown; onRetry: () => void }) {
+  const { t } = useI18n();
+  return (
+    <EmptyState
+      icon="cloud_off"
+      title={requestErrorMessage(error, t)}
+      action={
+        <Button variant="tonal" icon={<Icon name="refresh" size={20} />} onClick={onRetry}>
+          {t('common_retry')}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/web/src/features/expenses/Timeline.tsx b/web/src/features/expenses/Timeline.tsx
new file mode 100644
index 0000000..8826312
--- /dev/null
+++ b/web/src/features/expenses/Timeline.tsx
@@ -0,0 +1,25 @@
+import { useId } from 'react';
+import { useI18n } from '../../i18n/useI18n';
+import styles from './Expenses.module.css';
+import type { TimelineLine } from './timelineLines';
+
+/** `Timeline` (design-spec §3.9): heading "Historik", then a card with one item per line, oldest first. */
+export function Timeline({ lines }: { lines: readonly TimelineLine[] }) {
+  const { t } = useI18n();
+  const titleId = useId();
+  if (lines.length === 0) return null;
+  return (
+    <section className={styles.timeline} aria-labelledby={titleId}>
+      <h2 id={titleId} className={styles.timelineTitle}>
+        {t('timeline_title')}
+      </h2>
+      <ol className={styles.timelineCard}>
+        {lines.map((line) => (
+          <li key={line.key} className={styles.timelineItem}>
+            {line.text}
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
diff --git a/web/src/features/expenses/i18n/en.json b/web/src/features/expenses/i18n/en.json
new file mode 100644
index 0000000..efddc5c
--- /dev/null
+++ b/web/src/features/expenses/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "web_expenses_missing_title": "Expense not found",
+  "web_expenses_missing_body": "It may have been added a moment ago. Update to fetch it.",
+  "web_expenses_reject_clock_skew": "This computer's clock is more than 10 minutes ahead. Fix it and try again."
+}
diff --git a/web/src/features/expenses/i18n/sv.json b/web/src/features/expenses/i18n/sv.json
new file mode 100644
index 0000000..2a994ee
--- /dev/null
+++ b/web/src/features/expenses/i18n/sv.json
@@ -0,0 +1,5 @@
+{
+  "web_expenses_missing_title": "Utgiften finns inte",
+  "web_expenses_missing_body": "Den kan ha lagts till nyss. Uppdatera för att hämta den.",
+  "web_expenses_reject_clock_skew": "Datorns klocka går mer än 10 minuter före. Rätta den och försök igen."
+}
diff --git a/web/src/features/expenses/messages.ts b/web/src/features/expenses/messages.ts
new file mode 100644
index 0000000..f76c963
--- /dev/null
+++ b/web/src/features/expenses/messages.ts
@@ -0,0 +1,60 @@
+/** User-facing texts of failed writes (SPEC §14.4.6 rejection reasons with S-16's copy; §14.3.2 error codes). */
+import type { Ledger } from '../../api/ledger';
+import { ApiError } from '../../api/client';
+import type { Expense, MutationResult, Settlement } from '../../api/types';
+import type { I18n } from '../../i18n/I18nProvider';
+
+type Rejection = Extract<MutationResult, { status: 'rejected' }>;
+
+/**
+ * S-16's explanation of a rejection; for `stale` the actor is the `updated_by_user_id` of the stored row, the partner
+ * when unknown (D-089). `clock_skew` names the computer's clock, not the phone's.
+ */
+export function rejectionMessage(
+  reason: Rejection['reason'],
+  current: Expense | Settlement | null,
+  ledger: Ledger | undefined,
+  viewerId: string,
+  t: I18n['t'],
+): string {
+  switch (reason) {
+    case 'stale': {
+      const users = ledger === undefined ? [] : [...ledger.users.values()];
+      const actor =
+        users.find((u) => u.id === current?.updated_by_user_id) ?? users.find((u) => u.id !== viewerId) ?? null;
+      return t('home_sync_reject_stale', actor?.display_name ?? t('common_partner'));
+    }
+    case 'deleted':
+      return t('home_sync_reject_deleted');
+    case 'validation_failed':
+      return t('home_sync_reject_validation');
+    case 'reference_not_found':
+      return t('home_sync_reject_reference');
+    case 'clock_skew':
+      return t('web_expenses_reject_clock_skew');
+  }
+}
+
+/** A failed request: "Kunde inte nå servern" for a network error (§15.5), the `error_*` text of a code otherwise. */
+export function requestErrorMessage(error: unknown, t: I18n['t']): string {
+  if (!(error instanceof ApiError)) return t('error_server');
+  switch (error.code) {
+    case 'network':
+      return t('common_could_not_reach_server');
+    case 'household_incomplete':
+      return t('error_household_incomplete');
+    case 'rate_limited':
+      return t('error_rate_limited');
+    case 'forbidden':
+      return t('error_forbidden');
+    case 'protocol_unsupported':
+      return t('error_app_too_old');
+    case 'validation_failed':
+    case 'invalid_request':
+    case 'batch_too_large':
+    case 'payload_too_large':
+      return t('error_validation');
+    default:
+      return t('error_server');
+  }
+}
diff --git a/web/src/features/expenses/model.ts b/web/src/features/expenses/model.ts
new file mode 100644
index 0000000..462b021
--- /dev/null
+++ b/web/src/features/expenses/model.ts
@@ -0,0 +1,134 @@
+/**
+ * Pure helpers of the expense pages over the ledger snapshot (SPEC §15.5): the editor's defaults (AC-8.6), the
+ * category suggestion's inputs (§9.11), the pushed entity (§14.4.3) and the list order (AC-8.10).
+ */
+import type { Ledger } from '../../api/ledger';
+import { householdUserIds, live } from '../../api/ledger';
+import type { Account, Category, Expense, PushedExpense } from '../../api/types';
+import { avatarSlot } from '../../components/Avatar';
+import { activeCategoriesOf, type EditorPeople } from '../../components/editor';
+import { formatDate, fromEpochDays, parseDate, toEpochDays } from '../../lib/dates';
+import { readStored, writeStored } from '../../lib/storage';
+
+/** SPEC §9.6: description 1 to 100 code points, notes 0 to 1000, dates 2000-01-01 to today + 365 days. */
+export const DESCRIPTION_MAX = 100;
+export const DATE_MIN = '2000-01-01';
+export const DATE_DAYS_AHEAD = 365;
+
+const LAST_ACCOUNT_KEY = 'kvitt.editor.lastAccount';
+const LAST_CATEGORY_KEY = 'kvitt.editor.lastCategory';
+
+function compareText(a: string, b: string): number {
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+
+/** Accounts offered in the editor (AC-6.4): neither archived nor deleted, oldest first. */
+export function activeAccountsOf(ledger: Ledger): Account[] {
+  return live(ledger.accounts)
+    .filter((a) => a.archived_at === null)
+    .sort((a, b) => compareText(a.created_at, b.created_at) || compareText(a.id, b.id));
+}
+
+export function activeCategories(ledger: Ledger): Category[] {
+  return activeCategoriesOf(ledger.categories.values());
+}
+
+/** An account's default ratio as basis points per user. */
+export function accountBpOf(account: Account | undefined): Record<string, number> | null {
+  if (account === undefined) return null;
+  return Object.fromEntries(account.default_shares.map((s) => [s.user_id, s.share_bp]));
+}
+
+/** The viewer and the partner, or null while the household has fewer than two users. */
+export function peopleOf(ledger: Ledger, viewerId: string): EditorPeople | null {
+  const ids = householdUserIds(ledger);
+  const viewer = ledger.users.get(viewerId);
+  const partner = [...ledger.users.values()].find((u) => u.id !== viewerId);
+  if (viewer === undefined || partner === undefined) return null;
+  return {
+    viewer: { id: viewer.id, displayName: viewer.display_name, slot: avatarSlot(viewer.id, ids) },
+    partner: { id: partner.id, displayName: partner.display_name, slot: avatarSlot(partner.id, ids) },
+  };
+}
+
+/** The last day an expense may have (SPEC §9.6): today + 365 days. */
+export function dateMax(today: string): string {
+  return formatDate(fromEpochDays(toEpochDays(parseDate(today)) + DATE_DAYS_AHEAD));
+}
+
+export function dateInRange(date: string, today: string): boolean {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return false;
+  const parsed = parseDate(date);
+  if (formatDate(fromEpochDays(toEpochDays(parsed))) !== date) return false;
+  return date >= DATE_MIN && date <= dateMax(today);
+}
+
+/** The day before `today`, `YYYY-MM-DD`. */
+export function yesterdayOf(today: string): string {
+  return formatDate(fromEpochDays(toEpochDays(parseDate(today)) - 1));
+}
+
+function lastCategories(): Record<string, string> {
+  const raw = readStored(LAST_CATEGORY_KEY);
+  if (raw === null) return {};
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    if (typeof parsed !== 'object' || parsed === null) return {};
+    return Object.fromEntries(Object.entries(parsed).filter((e): e is [string, string] => typeof e[1] === 'string'));
+  } catch (error) {
+    if (error instanceof SyntaxError) return {};
+    throw error;
+  }
+}
+
+/** AC-8.6 "on this phone": the browser remembers the account and, per account, the category of the last save. */
+export function rememberEditorChoice(accountId: string, categoryId: string): void {
+  writeStored(LAST_ACCOUNT_KEY, accountId);
+  writeStored(LAST_CATEGORY_KEY, JSON.stringify({ ...lastCategories(), [accountId]: categoryId }));
+}
+
+/** AC-8.6: the requested account (`?account=`) if active, else the last used if active, else the oldest active. */
+export function defaultAccountId(active: readonly Account[], requested: string | null): string | null {
+  const ids = new Set(active.map((a) => a.id));
+  if (requested !== null && ids.has(requested)) return requested;
+  const last = readStored(LAST_ACCOUNT_KEY);
+  if (last !== null && ids.has(last)) return last;
+  return active[0]?.id ?? null;
+}
+
+/**
+ * AC-8.6 / CS-5 step 4: the category last used in the account in this browser if still active, else `other`, else
+ * none (when `other` is archived too).
+ */
+export function fallbackCategoryId(ledger: Ledger, accountId: string | null): string | null {
+  const active = activeCategories(ledger);
+  const last = accountId === null ? undefined : lastCategories()[accountId];
+  if (last !== undefined && active.some((c) => c.id === last)) return last;
+  return active.find((c) => c.default_key === 'other')?.id ?? null;
+}
+
+/** AC-8.10: date descending, then `created_at` descending (then id, for a stable order). */
+export function compareExpensesNewestFirst(a: Expense, b: Expense): number {
+  return (
+    compareText(b.expense_date, a.expense_date) || compareText(b.created_at, a.created_at) || compareText(b.id, a.id)
+  );
+}
+
+/** The client-writable fields of an expense (SPEC §14.4.3), as pushed. */
+export function pushedExpense(expense: Expense): PushedExpense {
+  return {
+    id: expense.id,
+    account_id: expense.account_id,
+    category_id: expense.category_id,
+    amount_ore: expense.amount_ore,
+    description: expense.description,
+    notes: expense.notes,
+    expense_date: expense.expense_date,
+    payer_user_id: expense.payer_user_id,
+    split_mode: expense.split_mode,
+    splits: expense.splits.map((s) => ({ ...s })),
+    created_at: expense.created_at,
+    updated_at: expense.updated_at,
+    deleted_at: expense.deleted_at,
+  };
+}
diff --git a/web/src/features/expenses/suggest/forLedger.ts b/web/src/features/expenses/suggest/forLedger.ts
new file mode 100644
index 0000000..1f7990e
--- /dev/null
+++ b/web/src/features/expenses/suggest/forLedger.ts
@@ -0,0 +1,35 @@
+/**
+ * The §9.11 suggestion over the ledger snapshot (CS-3: local, no network): the history of CS-5 and the step-4
+ * default. Only the editor imports this module, so only its chunk carries the keyword table.
+ */
+import type { Ledger } from '../../../api/ledger';
+import { live } from '../../../api/ledger';
+import { activeCategories, fallbackCategoryId } from '../model';
+import { CATEGORY_KEYWORDS } from './keywords';
+import { suggestCategory, type SuggestionHistoryEntry } from './suggest';
+
+/** CS-5's history: every non-deleted expense (all accounts, both users). */
+export function suggestionHistory(ledger: Ledger): SuggestionHistoryEntry[] {
+  return live(ledger.expenses).map((e) => ({
+    description: e.description,
+    categoryId: e.category_id,
+    expenseDate: e.expense_date,
+    createdAt: e.created_at,
+  }));
+}
+
+/** The §9.11 suggestion for a new expense: the description and the account's step-4 default. */
+export function suggestFor(
+  ledger: Ledger,
+  history: readonly SuggestionHistoryEntry[],
+  description: string,
+  accountId: string | null,
+): string | null {
+  return suggestCategory(
+    description,
+    history,
+    CATEGORY_KEYWORDS,
+    activeCategories(ledger).map((c) => ({ id: c.id, defaultKey: c.default_key })),
+    fallbackCategoryId(ledger, accountId),
+  );
+}
diff --git a/web/src/features/expenses/suggest/keywords.ts b/web/src/features/expenses/suggest/keywords.ts
new file mode 100644
index 0000000..4aa2d3a
--- /dev/null
+++ b/web/src/features/expenses/suggest/keywords.ts
@@ -0,0 +1,8 @@
+/**
+ * The keyword table of SPEC §9.11 CS-6, read at build time from the repository's `contracts/category-keywords.csv`
+ * (Vite raw import of the contract file itself, never a copy; §15.7, D-055) and parsed once with the §14.8 rules.
+ */
+import csv from '../../../../../contracts/category-keywords.csv?raw';
+import { parseCategoryKeywords, type CategoryKeyword } from './suggest';
+
+export const CATEGORY_KEYWORDS: readonly CategoryKeyword[] = parseCategoryKeywords(csv);
diff --git a/web/src/features/expenses/suggest/suggest.test.ts b/web/src/features/expenses/suggest/suggest.test.ts
new file mode 100644
index 0000000..33166c5
--- /dev/null
+++ b/web/src/features/expenses/suggest/suggest.test.ts
@@ -0,0 +1,76 @@
+/**
+ * `contracts/test-vectors/suggest_category.json` against the web's port (SPEC §15.3, AC-21.6), like the `:domain`
+ * VectorTest; plus the keyword table's parse of the real contract file.
+ */
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { CATEGORY_KEYWORDS } from './keywords';
+import { normalizeDescription, parseCategoryKeywords, suggestCategory, type KeywordMatch } from './suggest';
+
+interface VectorInput {
+  description: string;
+  history: { description: string; category_id: string; expense_date: string; created_at: string }[];
+  keywords: { keyword: string; match: KeywordMatch; default_key: string }[];
+  active_categories: { id: string; default_key: string | null }[];
+  fallback: string | null;
+}
+interface VectorFile {
+  format: number;
+  function: string;
+  cases: { name: string; input: VectorInput; expected: { ok: string | null } }[];
+}
+
+const vectors = JSON.parse(
+  readFileSync(resolve(process.cwd(), '..', 'contracts', 'test-vectors', 'suggest_category.json'), 'utf-8'),
+) as VectorFile;
+
+describe('suggest_category.json', () => {
+  it('is format 1 with its 65 cases', () => {
+    expect(vectors.format).toBe(1);
+    expect(vectors.function).toBe('suggest_category');
+    expect(vectors.cases).toHaveLength(65);
+  });
+
+  it.each(vectors.cases.map((c) => [c.name, c] as const))('%s', (_name, { input, expected }) => {
+    const result = suggestCategory(
+      input.description,
+      input.history.map((h) => ({
+        description: h.description,
+        categoryId: h.category_id,
+        expenseDate: h.expense_date,
+        createdAt: h.created_at,
+      })),
+      input.keywords.map((k) => ({ keyword: k.keyword, match: k.match, defaultKey: k.default_key })),
+      input.active_categories.map((c) => ({ id: c.id, defaultKey: c.default_key })),
+      input.fallback,
+    );
+    expect({ ok: result }).toEqual(expected);
+  });
+});
+
+describe('normalizeDescription (CS-4)', () => {
+  it('folds case, drops apostrophes and colons, keeps & and diacritics', () => {
+    expect(normalizeDescription("  Willy:s  McDonald's ")).toBe('willys mcdonalds');
+    expect(normalizeDescription('H&M, Åhléns!')).toBe('h&m åhléns');
+    expect(normalizeDescription('Ångström')).toBe('ångström');
+    expect(normalizeDescription('SL-kort 30 dagar')).toBe('sl kort 30 dagar');
+  });
+});
+
+describe('the keyword table (contracts/category-keywords.csv)', () => {
+  it('parses the contract file, every keyword already normalised and none for `other`', () => {
+    expect(CATEGORY_KEYWORDS.length).toBeGreaterThan(100);
+    for (const entry of CATEGORY_KEYWORDS) {
+      expect(normalizeDescription(entry.keyword)).toBe(entry.keyword);
+      expect(entry.defaultKey).not.toBe('other');
+      expect(entry.keyword.includes(' ')).toBe(entry.match === 'phrase');
+    }
+  });
+
+  it('refuses a malformed table', () => {
+    expect(() => parseCategoryKeywords('keyword,match\nica,token')).toThrow(/header/);
+    expect(() => parseCategoryKeywords('keyword,match,default_key,source\nica,token,groceries')).toThrow(/fields/);
+    expect(() => parseCategoryKeywords('keyword,match,default_key,source\nica,exact,groceries,data')).toThrow(/match/);
+  });
+});
diff --git a/web/src/features/expenses/suggest/suggest.ts b/web/src/features/expenses/suggest/suggest.ts
new file mode 100644
index 0000000..561a83f
--- /dev/null
+++ b/web/src/features/expenses/suggest/suggest.ts
@@ -0,0 +1,170 @@
+/**
+ * Category suggestion from the description (SPEC §9.11 CS-4 to CS-6, §14.5.6): a port of `:domain`'s
+ * `CategorySuggestion.kt`. Pure; passes `contracts/test-vectors/suggest_category.json`. The Unicode services of
+ * `UnicodeText` are the platform's: `String.prototype.normalize('NFC')`, `toLowerCase()` (locale-free, like Kotlin's
+ * `lowercase()`), and the `\p{L}` / `\p{Nd}` classes for letters and decimal digits.
+ */
+
+export type KeywordMatch = 'token' | 'prefix' | 'phrase';
+
+/** One row of the keyword table, `keyword` already normalised (CS-6). */
+export interface CategoryKeyword {
+  keyword: string;
+  match: KeywordMatch;
+  defaultKey: string;
+}
+
+/** One non-deleted expense (every account, either user). */
+export interface SuggestionHistoryEntry {
+  description: string;
+  categoryId: string;
+  /** `YYYY-MM-DD`, so string order is date order. */
+  expenseDate: string;
+  /** Fixed RFC 3339 form (`YYYY-MM-DDTHH:MM:SS.mmmZ`), so string order is time order. */
+  createdAt: string;
+}
+
+/** A category that is neither archived nor deleted; `defaultKey` null for a user-created one. */
+export interface ActiveCategory {
+  id: string;
+  defaultKey: string | null;
+}
+
+const KEPT = /^[\p{L}\p{Nd}&]$/u;
+const DELETED = new Set(["'", '’', ':']);
+
+/**
+ * CS-4: NFC, lowercase without locale rules, delete `'`, `’` and `:`, every other code point that is not a letter,
+ * a decimal digit or `&` becomes a space, then spaces are collapsed and trimmed. Iterates code points.
+ */
+export function normalizeDescription(text: string): string {
+  const lowered = text.normalize('NFC').toLowerCase();
+  let out = '';
+  for (const codePoint of lowered) {
+    if (DELETED.has(codePoint)) continue;
+    out += KEPT.test(codePoint) ? codePoint : ' ';
+  }
+  return out
+    .split(' ')
+    .filter((token) => token !== '')
+    .join(' ');
+}
+
+function codePointLength(text: string): number {
+  return Array.from(text).length;
+}
+
+function compareText(a: string, b: string): number {
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+
+/** Most recent first by (`expenseDate`, `createdAt`), the expense-list order of AC-8.10. */
+function compareRecency(a: SuggestionHistoryEntry, b: SuggestionHistoryEntry): number {
+  return compareText(a.expenseDate, b.expenseDate) || compareText(a.createdAt, b.createdAt);
+}
+
+/** CS-5 steps 1 and 2: most used category among `rows`; ties by the latest expense, then the lower id. */
+function pickFromHistory(rows: readonly SuggestionHistoryEntry[], active: ReadonlySet<string>): string | null {
+  const tallies = new Map<string, { count: number; latest: SuggestionHistoryEntry }>();
+  for (const row of rows) {
+    if (!active.has(row.categoryId)) continue;
+    const tally = tallies.get(row.categoryId);
+    if (tally === undefined) tallies.set(row.categoryId, { count: 1, latest: row });
+    else {
+      tally.count += 1;
+      if (compareRecency(row, tally.latest) > 0) tally.latest = row;
+    }
+  }
+  let best: { id: string; count: number; latest: SuggestionHistoryEntry } | null = null;
+  for (const [id, tally] of tallies) {
+    if (
+      best === null ||
+      tally.count > best.count ||
+      (tally.count === best.count &&
+        (compareRecency(tally.latest, best.latest) > 0 ||
+          (compareRecency(tally.latest, best.latest) === 0 && compareText(id, best.id) < 0)))
+    ) {
+      best = { id, ...tally };
+    }
+  }
+  return best?.id ?? null;
+}
+
+function matches(entry: CategoryKeyword, tokens: readonly string[]): boolean {
+  switch (entry.match) {
+    case 'token':
+      return tokens.includes(entry.keyword);
+    case 'prefix':
+      return tokens.some((token) => token.startsWith(entry.keyword));
+    case 'phrase': {
+      const phrase = entry.keyword.split(' ');
+      for (let start = 0; start + phrase.length <= tokens.length; start += 1) {
+        if (phrase.every((word, offset) => tokens[start + offset] === word)) return true;
+      }
+      return false;
+    }
+  }
+}
+
+/**
+ * CS-5: history exact, then history first token, then the keyword table (CS-6), then `fallback` (the AC-8.6 default).
+ * An empty normalised description gives `fallback`. History counts only categories in `activeCategories`.
+ */
+export function suggestCategory(
+  description: string,
+  history: readonly SuggestionHistoryEntry[],
+  keywords: readonly CategoryKeyword[],
+  activeCategories: readonly ActiveCategory[],
+  fallback: string | null,
+): string | null {
+  const normalised = normalizeDescription(description);
+  if (normalised === '') return fallback;
+  const tokens = normalised.split(' ');
+  const firstToken = tokens[0];
+  const active = new Set(activeCategories.map((c) => c.id));
+  const stored = history.map((entry) => ({ normalised: normalizeDescription(entry.description), entry }));
+  const exact = pickFromHistory(
+    stored.filter((s) => s.normalised === normalised).map((s) => s.entry),
+    active,
+  );
+  if (exact !== null) return exact;
+  const byFirstToken = pickFromHistory(
+    stored.filter((s) => s.normalised !== '' && s.normalised.split(' ')[0] === firstToken).map((s) => s.entry),
+    active,
+  );
+  if (byFirstToken !== null) return byFirstToken;
+  const byKey = new Map<string, string>();
+  for (const category of activeCategories)
+    if (category.defaultKey !== null) byKey.set(category.defaultKey, category.id);
+  const ranked = keywords
+    .map((entry, index) => ({ entry, index }))
+    .filter(({ entry }) => matches(entry, tokens))
+    .sort((a, b) => codePointLength(b.entry.keyword) - codePointLength(a.entry.keyword) || a.index - b.index);
+  for (const { entry } of ranked) {
+    const id = byKey.get(entry.defaultKey);
+    if (id !== undefined) return id;
+  }
+  return fallback;
+}
+
+const KEYWORDS_HEADER = 'keyword,match,default_key,source';
+const MATCHES: readonly KeywordMatch[] = ['token', 'prefix', 'phrase'];
+
+/**
+ * Parses `contracts/category-keywords.csv` (SPEC §14.8, D-056): header `keyword,match,default_key,source`, entries in
+ * file order (table order), no quoting. Throws on a malformed table, which is a build defect.
+ */
+export function parseCategoryKeywords(csv: string): CategoryKeyword[] {
+  const lines = csv.split(/\r\n|\n|\r/).filter((line) => line !== '');
+  if (lines[0] !== KEYWORDS_HEADER) throw new Error(`category keywords: header is not ${KEYWORDS_HEADER}`);
+  const columns = KEYWORDS_HEADER.split(',').length;
+  return lines.slice(1).map((line, index) => {
+    const fields = line.split(',');
+    const [keyword = '', match = '', defaultKey = ''] = fields;
+    if (fields.length !== columns) throw new Error(`category keywords: line ${index + 2} has ${fields.length} fields`);
+    const known = MATCHES.find((m) => m === match);
+    if (known === undefined) throw new Error(`category keywords: line ${index + 2} has match ${match}`);
+    if (keyword === '' || defaultKey === '') throw new Error(`category keywords: line ${index + 2} is incomplete`);
+    return { keyword, match: known, defaultKey };
+  });
+}
diff --git a/web/src/features/expenses/testLedger.ts b/web/src/features/expenses/testLedger.ts
new file mode 100644
index 0000000..06ef8fa
--- /dev/null
+++ b/web/src/features/expenses/testLedger.ts
@@ -0,0 +1,233 @@
+/**
+ * Test data for W2's page tests: a household (Jacob is the viewer, as in `TEST_SESSION`), categories, accounts,
+ * expenses and audit entries shaped like `contracts/examples/sync`, and a `FakeServer` that answers `GET /sync` with
+ * them and accepts or rejects `POST /sync` mutations. No mocking library.
+ */
+import type {
+  Account,
+  AuditEntry,
+  Category,
+  DefaultCategoryKey,
+  Expense,
+  Mutation,
+  MutationResult,
+  PushedExpense,
+  RecurringTemplate,
+} from '../../api/types';
+import { FakeServer, json, type RecordedRequest } from '../../test/fakeServer';
+import { ANNA, ANNA_ID, JACOB, JACOB_ID, page, TS } from '../../test/fixtures';
+
+export { ANNA_ID, JACOB_ID };
+
+let version = 100;
+const nextVersion = () => (version += 1);
+
+export function category(
+  id: string,
+  key: DefaultCategoryKey | null,
+  icon: string,
+  color: string,
+  sortOrder: number,
+  extra: Partial<Category> = {},
+): Category {
+  return {
+    id,
+    default_key: key,
+    name: null,
+    icon,
+    color,
+    sort_order: sortOrder,
+    created_at: TS,
+    updated_at: TS,
+    archived_at: null,
+    deleted_at: null,
+    server_version: nextVersion(),
+    ...extra,
+  };
+}
+
+const C = (n: number) => `01920000-0000-7000-8000-0000000000${String(n).padStart(2, '0')}`;
+export const GROCERIES = category(C(1), 'groceries', 'shopping_cart', 'green', 10);
+export const RESTAURANTS = category(C(2), 'restaurants', 'restaurant', 'orange', 20);
+export const HOME = category(C(3), 'home', 'chair', 'brown', 30);
+export const TRANSPORT = category(C(5), 'transport', 'train', 'blue', 50);
+export const TRAVEL = category(C(6), 'travel', 'flight', 'teal', 60, { archived_at: TS });
+export const ENTERTAINMENT = category(C(7), 'entertainment', 'movie', 'purple', 70);
+export const HEALTH = category(C(8), 'health', 'medical_services', 'red', 80);
+export const SHOPPING = category(C(9), 'shopping', 'shopping_bag', 'pink', 90);
+export const OTHER = category(C(10), 'other', 'category', 'grey', 140);
+export const CATEGORIES = [GROCERIES, RESTAURANTS, HOME, TRANSPORT, TRAVEL, ENTERTAINMENT, HEALTH, SHOPPING, OTHER];
+
+export function account(id: string, name: string, jacobBp = 5000, extra: Partial<Account> = {}): Account {
+  return {
+    id,
+    name,
+    default_shares: [
+      { user_id: JACOB_ID, share_bp: jacobBp },
+      { user_id: ANNA_ID, share_bp: 10_000 - jacobBp },
+    ],
+    created_by_user_id: JACOB_ID,
+    created_at: TS,
+    updated_at: TS,
+    archived_at: null,
+    deleted_at: null,
+    server_version: nextVersion(),
+    ...extra,
+  };
+}
+
+export const VARDAG = account('01929c5e-0000-7000-8000-00000000b001', 'Vardag');
+export const HUSET = account('01929c5e-0000-7000-8000-00000000b002', 'Huset', 6000, {
+  created_at: '2026-10-17T07:00:00.000Z',
+});
+export const JAPAN = account('01929c5e-0000-7000-8000-00000000b003', 'Japan 2027', 5000, { archived_at: TS });
+
+export function expenseRow(id: string, patch: Partial<Expense> = {}): Expense {
+  const amount = patch.amount_ore ?? 41_200;
+  return {
+    id,
+    account_id: VARDAG.id,
+    category_id: GROCERIES.id,
+    amount_ore: amount,
+    description: 'ICA Maxi Lindhagen',
+    notes: '',
+    expense_date: '2026-10-16',
+    payer_user_id: JACOB_ID,
+    split_mode: 'default',
+    splits: [
+      { user_id: JACOB_ID, share_ore: amount - Math.floor(amount / 2), share_bp: 5000 },
+      { user_id: ANNA_ID, share_ore: Math.floor(amount / 2), share_bp: 5000 },
+    ],
+    recurring_template_id: null,
+    recurring_period: null,
+    created_by_user_id: JACOB_ID,
+    updated_by_user_id: JACOB_ID,
+    created_at: '2026-10-16T17:02:11.123Z',
+    updated_at: '2026-10-16T17:02:11.123Z',
+    deleted_at: null,
+    server_version: nextVersion(),
+    ...patch,
+  };
+}
+
+export function audit(
+  id: string,
+  entityId: string,
+  action: AuditEntry['action'],
+  actor: string,
+  clientAt: string,
+  changes: AuditEntry['changes'] = [],
+  source: AuditEntry['source'] = 'app',
+): AuditEntry {
+  return {
+    id,
+    entity_type: 'expense',
+    entity_id: entityId,
+    action,
+    source,
+    actor_user_id: actor,
+    client_at: clientAt,
+    server_at: clientAt,
+    changes,
+    server_version: nextVersion(),
+  };
+}
+
+export function template(id: string, description: string): RecurringTemplate {
+  return {
+    id,
+    account_id: HUSET.id,
+    category_id: HOME.id,
+    amount_ore: 1_200_000,
+    description,
+    notes: '',
+    payer_user_id: JACOB_ID,
+    split_mode: 'default',
+    splits: [
+      { user_id: JACOB_ID, share_ore: 720_000, share_bp: 6000 },
+      { user_id: ANNA_ID, share_ore: 480_000, share_bp: 4000 },
+    ],
+    day_of_month: 25,
+    start_period: '2026-09',
+    end_period: null,
+    paused: false,
+    created_by_user_id: JACOB_ID,
+    created_at: TS,
+    updated_at: TS,
+    deleted_at: null,
+    server_version: nextVersion(),
+  } as RecurringTemplate;
+}
+
+export interface Household {
+  accounts?: Account[];
+  categories?: Category[];
+  expenses?: Expense[];
+  auditEntries?: AuditEntry[];
+  templates?: RecurringTemplate[];
+}
+
+/** The stored row a server makes of a pushed expense (server-owned fields from the caller). */
+export function stored(entity: PushedExpense, previous: Expense | undefined): Expense {
+  return {
+    ...entity,
+    recurring_template_id: previous?.recurring_template_id ?? null,
+    recurring_period: previous?.recurring_period ?? null,
+    created_by_user_id: previous?.created_by_user_id ?? JACOB_ID,
+    updated_by_user_id: JACOB_ID,
+    created_at: previous?.created_at ?? entity.created_at,
+    server_version: nextVersion(),
+  };
+}
+
+/** `POST /sync` bodies as sent. */
+export function pushedMutations(request: RecordedRequest): Mutation[] {
+  return (request.body as { mutations: Mutation[] }).mutations;
+}
+
+/**
+ * A server holding `household`: the first pull returns everything, later pulls nothing new; a push is accepted
+ * unless `respond` answers it.
+ */
+export function householdServer(
+  household: Household = {},
+  respond?: (mutation: Mutation) => MutationResult | Response | undefined,
+): FakeServer {
+  const expenses = new Map((household.expenses ?? []).map((e) => [e.id, e]));
+  const full = page(0, {
+    users: [JACOB, ANNA],
+    categories: household.categories ?? CATEGORIES,
+    accounts: household.accounts ?? [VARDAG, HUSET, JAPAN],
+    expenses: household.expenses ?? [],
+    audit_entries: household.auditEntries ?? [],
+    recurring_templates: household.templates ?? [],
+  });
+  return new FakeServer()
+    .on('GET', '/sync', (request) => {
+      const since = Number(new URLSearchParams(request.search).get('since') ?? '0');
+      return json(since === 0 ? full : page(since, {}));
+    })
+    .on('POST', '/sync', (request) => {
+      const results: MutationResult[] = [];
+      for (const mutation of pushedMutations(request)) {
+        const answer = respond?.(mutation);
+        if (answer instanceof Response) return answer;
+        if (answer !== undefined) {
+          results.push(answer);
+          continue;
+        }
+        const entity = mutation.entity as PushedExpense;
+        const row = stored(entity, expenses.get(entity.id));
+        expenses.set(row.id, row);
+        results.push({
+          mutation_id: mutation.mutation_id,
+          entity_type: 'expense',
+          entity_id: row.id,
+          status: 'accepted',
+          server_version: row.server_version,
+          entity: row,
+        });
+      }
+      return json({ server_time: TS, results });
+    });
+}
diff --git a/web/src/features/expenses/timelineLines.test.ts b/web/src/features/expenses/timelineLines.test.ts
new file mode 100644
index 0000000..7c15276
--- /dev/null
+++ b/web/src/features/expenses/timelineLines.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest';
+import { applyRows, emptyLedger } from '../../api/ledger';
+import { translate } from '../../i18n/catalog';
+import { ANNA, JACOB } from '../../test/fixtures';
+import { ANNA_ID, audit, CATEGORIES, expenseRow, GROCERIES, HUSET, JACOB_ID, OTHER, VARDAG } from './testLedger';
+import { auditEntriesOf, timelineLines } from './timelineLines';
+
+const E = '01929c5e-0000-7000-8000-00000000e001';
+const created = audit('a1', E, 'create', ANNA_ID, '2026-10-16T12:02:00.000Z');
+const changed = audit('a2', E, 'update', JACOB_ID, '2026-10-16T17:40:00.000Z', [
+  { field: 'account_id', old: HUSET.id, new: VARDAG.id },
+  { field: 'category_id', old: OTHER.id, new: GROCERIES.id },
+  { field: 'amount_ore', old: 114_760, new: 124_760 },
+  { field: 'notes', old: '', new: 'Till festen' },
+  { field: 'description', old: 'ICA', new: '' },
+  { field: 'expense_date', old: '2026-10-15', new: '2026-10-16' },
+  { field: 'split_mode', old: 'default', new: 'full' },
+  {
+    field: 'splits',
+    old: [
+      { user_id: JACOB_ID, share_ore: 62_380, share_bp: 5000 },
+      { user_id: ANNA_ID, share_ore: 62_380, share_bp: 5000 },
+    ],
+    new: [
+      { user_id: JACOB_ID, share_ore: 0, share_bp: 0 },
+      { user_id: ANNA_ID, share_ore: 124_760, share_bp: 10_000 },
+    ],
+  },
+  { field: 'payer_user_id', old: JACOB_ID, new: ANNA_ID },
+]);
+const deleted = audit('a3', E, 'delete', ANNA_ID, '2026-10-17T07:12:00.000Z', [
+  { field: 'deleted_at', old: null, new: '2026-10-17T07:12:00.000Z' },
+]);
+const ledger = applyRows(emptyLedger('e'), {
+  users: [JACOB, ANNA],
+  categories: CATEGORIES,
+  accounts: [VARDAG, HUSET],
+  expenses: [expenseRow(E)],
+  // Out of order on purpose: the timeline follows server_version (the server's insert order).
+  auditEntries: [deleted, created, changed],
+});
+
+function lines(language: 'sv' | 'en') {
+  return timelineLines(auditEntriesOf(ledger, 'expense', E), {
+    ledger,
+    viewerId: JACOB_ID,
+    t: (key, ...args) => translate(language, key, args),
+    language,
+    today: { year: 2026, month: 10, day: 21 },
+    timeZone: 'Europe/Stockholm',
+  }).map((l) => l.text);
+}
+
+describe('timeline (AC-12.4, design-spec §3.9)', () => {
+  it('writes one line per entry and per changed field, oldest first, with names and formatted values', () => {
+    expect(lines('sv')).toEqual([
+      'Anna skapade den här · 16 okt. 14:02',
+      'Du ändrade kontot från Huset till Vardag · 16 okt. 19:40',
+      'Du ändrade kategorin från Övrigt till Mat & hushåll · 16 okt. 19:40',
+      'Du ändrade beloppet från 1\u00A0147,60\u00A0kr till 1\u00A0247,60\u00A0kr · 16 okt. 19:40',
+      'Du lade till anteckningen: Till festen · 16 okt. 19:40',
+      'Du tog bort beskrivningen · 16 okt. 19:40',
+      'Du ändrade datumet från 15 okt. till 16 okt. · 16 okt. 19:40',
+      'Du ändrade delningen från Kontots standard till Allt på en person · 16 okt. 19:40',
+      'Du ändrade andelarna från Jacob 623,80\u00A0kr; Anna 623,80\u00A0kr till Jacob 0,00\u00A0kr; Anna 1\u00A0247,60\u00A0kr · 16 okt. 19:40',
+      'Du ändrade betalaren från Jacob till Anna · 16 okt. 19:40',
+      'Anna tog bort den här · 17 okt. 09:12',
+    ]);
+  });
+
+  it('speaks English too, and names recurring and imported creations', () => {
+    expect(lines('en')[0]).toBe('Anna created this · 16 Oct 14:02');
+    const recurring = applyRows(emptyLedger('e'), {
+      auditEntries: [audit('r1', 'x', 'create', JACOB_ID, '2026-09-25T04:00:00.000Z', [], 'recurring')],
+    });
+    const imported = applyRows(emptyLedger('e'), {
+      auditEntries: [audit('i1', 'y', 'create', JACOB_ID, '2026-09-25T04:00:00.000Z', [], 'import')],
+    });
+    const ctx = {
+      viewerId: JACOB_ID,
+      t: (key: Parameters<typeof translate>[1], ...args: (string | number)[]) => translate('sv', key, args),
+      language: 'sv' as const,
+      today: { year: 2026, month: 10, day: 21 },
+      timeZone: 'Europe/Stockholm',
+    };
+    expect(timelineLines(auditEntriesOf(recurring, 'expense', 'x'), { ...ctx, ledger: recurring })[0]?.text).toBe(
+      'Skapad automatiskt (återkommande) · 25 sep. 06:00',
+    );
+    expect(timelineLines(auditEntriesOf(imported, 'expense', 'y'), { ...ctx, ledger: imported })[0]?.text).toBe(
+      'Importerad från Splitwise · 25 sep. 06:00',
+    );
+  });
+});
diff --git a/web/src/features/expenses/timelineLines.ts b/web/src/features/expenses/timelineLines.ts
new file mode 100644
index 0000000..b7ecc1f
--- /dev/null
+++ b/web/src/features/expenses/timelineLines.ts
@@ -0,0 +1,169 @@
+/**
+ * Timeline sentences of FR-12 (AC-12.4, design-spec §3.9), a port of the app's `Timeline.kt` and `data/repo/Timeline.kt`:
+ * one line per audit entry, oldest first; an update gives one line per changed field with the same time; ids are
+ * resolved to names, amounts and dates formatted (§9.8), field names in the page language (`timeline_field_*`).
+ * AC-12.5's pending line does not exist on the web (no local changes).
+ */
+import type { Ledger } from '../../api/ledger';
+import type { AuditEntry } from '../../api/types';
+import { categoryName } from '../../components/editor';
+import type { I18n } from '../../i18n/I18nProvider';
+import type { StringKey } from '../../i18n/catalog';
+import { listDate, listDateTime, localDateTime, parseDate, type LocalDate } from '../../lib/dates';
+import { formatMoney } from '../../lib/money';
+
+export interface TimelineContext {
+  ledger: Ledger;
+  viewerId: string;
+  t: I18n['t'];
+  language: I18n['language'];
+  /** Today, for list dates (the year is shown when it differs). */
+  today: LocalDate;
+  /** IANA zone for times; undefined = the browser's. */
+  timeZone?: string;
+}
+
+export interface TimelineLine {
+  key: string;
+  text: string;
+}
+
+const FIELD_NAMES: Readonly<Record<string, StringKey>> = {
+  account_id: 'timeline_field_account',
+  category_id: 'timeline_field_category',
+  payer_user_id: 'timeline_field_payer',
+  amount_ore: 'timeline_field_amount',
+  description: 'timeline_field_description',
+  notes: 'timeline_field_notes',
+  expense_date: 'timeline_field_date',
+  settlement_date: 'timeline_field_date',
+  split_mode: 'timeline_field_split_mode',
+  splits: 'timeline_field_splits',
+  from_user_id: 'timeline_field_from',
+  to_user_id: 'timeline_field_to',
+  note: 'timeline_field_note',
+  allocations: 'timeline_field_allocations',
+};
+
+/** The audit entries of one entity, in server order (oldest first, newest last). */
+export function auditEntriesOf(ledger: Ledger, entityType: AuditEntry['entity_type'], entityId: string): AuditEntry[] {
+  return [...ledger.auditEntries.values()]
+    .filter((e) => e.entity_type === entityType && e.entity_id === entityId)
+    .sort((a, b) => a.server_version - b.server_version);
+}
+
+function personName(userId: string, ctx: TimelineContext): string {
+  if (userId === ctx.viewerId) return ctx.t('common_you');
+  return ctx.ledger.users.get(userId)?.display_name ?? ctx.t('common_partner');
+}
+
+function text(value: unknown): string | null {
+  if (value === null || value === undefined) return null;
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  return JSON.stringify(value);
+}
+
+function record(value: unknown): Record<string, unknown> {
+  return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : {};
+}
+
+/** A diff value for display, or null when absent or empty (an added or removed value). */
+export function fieldValue(field: string, value: unknown, ctx: TimelineContext): string | null {
+  const { ledger, t, language } = ctx;
+  if (value === null || value === undefined || value === '') return null;
+  switch (field) {
+    case 'amount_ore':
+      return typeof value === 'number' ? formatMoney(value, language) : text(value);
+    case 'expense_date':
+    case 'settlement_date':
+      return typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)
+        ? listDate(parseDate(value), ctx.today, language)
+        : text(value);
+    case 'split_mode':
+      switch (value) {
+        case 'default':
+          return t('editor_split_mode_default', '').trim();
+        case 'ratio':
+          return t('editor_split_mode_ratio');
+        case 'exact':
+          return t('editor_split_mode_exact');
+        case 'full':
+          return t('editor_split_mode_full');
+        default:
+          return text(value);
+      }
+    case 'category_id': {
+      const category = typeof value === 'string' ? ledger.categories.get(value) : undefined;
+      return category === undefined ? text(value) : categoryName(category, t);
+    }
+    case 'account_id':
+      return typeof value === 'string' ? (ledger.accounts.get(value)?.name ?? value) : text(value);
+    case 'payer_user_id':
+    case 'from_user_id':
+    case 'to_user_id':
+      return typeof value === 'string' ? (ledger.users.get(value)?.display_name ?? value) : text(value);
+    case 'splits':
+      return Array.isArray(value)
+        ? value
+            .map((item) => {
+              const split = record(item);
+              const userId = text(split.user_id) ?? '';
+              const ore = split.share_ore;
+              const name = ledger.users.get(userId)?.display_name ?? userId;
+              return `${name} ${typeof ore === 'number' ? formatMoney(ore, language) : (text(ore) ?? '')}`;
+            })
+            .join('; ')
+        : text(value);
+    case 'allocations':
+      return Array.isArray(value)
+        ? value
+            .map((item) => {
+              const allocation = record(item);
+              const accountId = text(allocation.account_id) ?? '';
+              const ore = allocation.amount_ore;
+              const name = ledger.accounts.get(accountId)?.name ?? accountId;
+              return `${name} ${typeof ore === 'number' ? formatMoney(ore, language) : (text(ore) ?? '')}`;
+            })
+            .join('; ')
+        : text(value);
+    default:
+      return text(value);
+  }
+}
+
+/** The sentences of one entry, without the time (several changes: one sentence each). */
+export function entrySentences(entry: AuditEntry, ctx: TimelineContext): string[] {
+  const { t } = ctx;
+  const actor = personName(entry.actor_user_id, ctx);
+  if (entry.action === 'create' && entry.source === 'recurring') return [t('timeline_recurring')];
+  if (entry.action === 'create' && entry.source === 'import') return [t('timeline_import')];
+  if (entry.action === 'create') return [t('timeline_created', actor)];
+  if (entry.action === 'delete') return [t('timeline_deleted', actor)];
+  return entry.changes.map((change) => {
+    const key = FIELD_NAMES[change.field];
+    const name = key === undefined ? change.field : t(key);
+    const oldValue = fieldValue(change.field, change.old, ctx);
+    const newValue = fieldValue(change.field, change.new, ctx);
+    if (oldValue === null && newValue !== null) return t('timeline_changed_added', actor, name, newValue);
+    if (newValue === null) return t('timeline_changed_removed', actor, name);
+    return t('timeline_changed', actor, name, oldValue ?? '', newValue);
+  });
+}
+
+/** Every line of the timeline, oldest first: "Anna skapade den här · 16 okt. 14:02". */
+export function timelineLines(entries: readonly AuditEntry[], ctx: TimelineContext): TimelineLine[] {
+  return entries.flatMap((entry) => {
+    const time = listDateTime(new Date(entry.client_at), ctx.today, ctx.language, ctx.timeZone);
+    return entrySentences(entry, ctx).map((sentence, index) => ({
+      key: `${entry.id}-${index}`,
+      text: `${sentence} ${ctx.t('timeline_time', time)}`,
+    }));
+  });
+}
+
+/** Today as a local date in `timeZone`. */
+export function localToday(now: Date = new Date(), timeZone?: string): LocalDate {
+  const { year, month, day } = localDateTime(now, timeZone);
+  return { year, month, day };
+}
diff --git a/web/src/features/expenses/usePushExpense.ts b/web/src/features/expenses/usePushExpense.ts
new file mode 100644
index 0000000..3a3be8e
--- /dev/null
+++ b/web/src/features/expenses/usePushExpense.ts
@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { useLedgerWriter } from '../../api/ledger';
+import { expenseMutation, pushMutations, rowsOfResults } from '../../api/push';
+import type { Expense, MutationResult, PushedExpense } from '../../api/types';
+import { useApi } from '../../api/useApi';
+
+export type PushOutcome =
+  | { kind: 'accepted'; expense: Expense }
+  | { kind: 'rejected'; reason: Extract<MutationResult, { status: 'rejected' }>['reason']; current: Expense | null }
+  | { kind: 'failed'; error: unknown };
+
+function isExpense(row: unknown): row is Expense {
+  return typeof row === 'object' && row !== null && 'expense_date' in row;
+}
+
+/**
+ * One `POST /sync` mutation for an expense (SPEC §15.5): the result is merged into the snapshot at once (an accepted
+ * entity, or a rejection's `current` row, which reloads the row from the server), then the snapshot pulls what else
+ * changed (the audit entries). Nothing is queued: a failure is returned for the page to show.
+ */
+export function usePushExpense() {
+  const api = useApi();
+  const { apply, refresh } = useLedgerWriter();
+  return useCallback(
+    async (entity: PushedExpense): Promise<PushOutcome> => {
+      let results: MutationResult[];
+      try {
+        results = await pushMutations(api, [expenseMutation(entity)]);
+      } catch (error) {
+        return { kind: 'failed', error };
+      }
+      apply(rowsOfResults(results));
+      void refresh();
+      const result = results[0];
+      if (result === undefined) return { kind: 'failed', error: new Error('empty push response') };
+      if (result.status === 'accepted') {
+        return isExpense(result.entity)
+          ? { kind: 'accepted', expense: result.entity }
+          : { kind: 'failed', error: new Error('not an expense') };
+      }
+      return { kind: 'rejected', reason: result.reason, current: isExpense(result.current) ? result.current : null };
+    },
+    [api, apply, refresh],
+  );
+}
diff --git a/web/src/features/export/ExportCsvButton.tsx b/web/src/features/export/ExportCsvButton.tsx
new file mode 100644
index 0000000..b92179c
--- /dev/null
+++ b/web/src/features/export/ExportCsvButton.tsx
@@ -0,0 +1,25 @@
+import type { Ledger } from '../../api/ledger';
+import type { Expense } from '../../api/types';
+import { Button } from '../../components/Button';
+import { Icon } from '../../design/Icon';
+import { useI18n } from '../../i18n/useI18n';
+import { todayIso } from '../../lib/dates';
+import { CSV_MIME, expensesCsv, exportFileName } from './csv';
+import { downloadFile } from './download';
+
+/** "Exportera CSV" (W-12): downloads `expenses`, the filtered list in its shown order; disabled when empty. */
+export function ExportCsvButton({ expenses, ledger }: { expenses: readonly Expense[]; ledger: Ledger }) {
+  const { t } = useI18n();
+  return (
+    <Button
+      variant="tonal"
+      icon={<Icon name="download" size={20} />}
+      disabled={expenses.length === 0}
+      onClick={() => {
+        downloadFile(exportFileName(todayIso(), t), expensesCsv(expenses, ledger, t), CSV_MIME);
+      }}
+    >
+      {t('web_export_csv')}
+    </Button>
+  );
+}
diff --git a/web/src/features/export/csv.test.ts b/web/src/features/export/csv.test.ts
new file mode 100644
index 0000000..6bac138
--- /dev/null
+++ b/web/src/features/export/csv.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest';
+import { applyRows, emptyLedger } from '../../api/ledger';
+import { translate } from '../../i18n/catalog';
+import { ANNA, ANNA_ID, GROCERIES, JACOB, JACOB_ID, account, expense } from '../../test/fixtures';
+import { csvAmount, csvDocument, csvText, expensesCsv, exportFileName } from './csv';
+
+const sv = (key: Parameters<typeof translate>[1], ...args: (string | number)[]) => translate('sv', key, args);
+const en = (key: Parameters<typeof translate>[1], ...args: (string | number)[]) => translate('en', key, args);
+
+describe('CSV cells', () => {
+  it('formats öre as kronor with a decimal comma, two decimals and no grouping', () => {
+    expect(csvAmount(123_450)).toBe('1234,50');
+    expect(csvAmount(5)).toBe('0,05');
+    expect(csvAmount(1_000_000_000)).toBe('10000000,00');
+    expect(csvAmount(0)).toBe('0,00');
+  });
+
+  it('quotes fields holding the separator, quotes, line breaks or edge spaces, doubling quotes', () => {
+    expect(csvText('ICA Maxi')).toBe('ICA Maxi');
+    expect(csvText('a;b')).toBe('"a;b"');
+    expect(csvText('say "hi"')).toBe('"say ""hi"""');
+    expect(csvText('line 1\nline 2')).toBe('"line 1\nline 2"');
+    expect(csvText('crlf\r\n')).toBe('"crlf\r\n"');
+    expect(csvText(' padded')).toBe('" padded"');
+    expect(csvText('a,b')).toBe('a,b');
+    expect(csvText('')).toBe('');
+  });
+
+  it('neutralises cells a spreadsheet would run as a formula', () => {
+    expect(csvText('=SUM(A1)')).toBe("'=SUM(A1)");
+    expect(csvText('+46 70')).toBe("'+46 70");
+    expect(csvText('-50 rabatt')).toBe("'-50 rabatt");
+    expect(csvText('@home')).toBe("'@home");
+    expect(csvText('=a;b')).toBe('"\'=a;b"');
+  });
+
+  it('writes a BOM, semicolons and CRLF after every row', () => {
+    expect(
+      csvDocument([
+        ['a', 'b'],
+        ['c', 'd'],
+      ]),
+    ).toBe('a;b\r\nc;d\r\n');
+  });
+});
+
+describe('expensesCsv', () => {
+  const vardag = account('01929c5e-0000-7000-8000-00000000b001', 'Vardag', 20);
+  const first = {
+    ...expense(
+      '01929c5e-0000-7000-8000-00000000e001',
+      vardag.id,
+      41_200,
+      JACOB_ID,
+      { [JACOB_ID]: 20_600, [ANNA_ID]: 20_600 },
+      30,
+    ),
+    description: 'ICA Maxi; Lindhagen',
+    expense_date: '2026-10-16',
+  };
+  const second = {
+    ...expense(
+      '01929c5e-0000-7000-8000-00000000e002',
+      vardag.id,
+      124_760,
+      ANNA_ID,
+      { [JACOB_ID]: 0, [ANNA_ID]: 124_760 },
+      31,
+    ),
+    description: 'Hyra "oktober"',
+    notes: 'Rad 1\nRad 2',
+    expense_date: '2026-10-01',
+  };
+  const ledger = applyRows(emptyLedger('e'), {
+    users: [JACOB, ANNA],
+    accounts: [vardag],
+    categories: [GROCERIES],
+    expenses: [first, second],
+  });
+
+  it('is byte for byte the agreed two-row sample (Swedish page)', () => {
+    const text = expensesCsv([first, second], ledger, sv);
+    const expected =
+      '' +
+      'Datum;Beskrivning;Kategori;Konto;Betalt av;Belopp;Andel Jacob;Andel Anna;Anteckningar\r\n' +
+      '2026-10-16;"ICA Maxi; Lindhagen";Mat & hushåll;Vardag;Jacob;412,00;206,00;206,00;\r\n' +
+      '2026-10-01;"Hyra ""oktober""";Mat & hushåll;Vardag;Anna;1247,60;0,00;1247,60;"Rad 1\nRad 2"\r\n';
+    expect(text).toBe(expected);
+    const bytes = new TextEncoder().encode(text);
+    expect([...bytes.slice(0, 3)]).toEqual([0xef, 0xbb, 0xbf]);
+    expect(bytes).toEqual(new TextEncoder().encode(expected));
+    // "å" in "hushåll" is the two UTF-8 bytes C3 A5.
+    const index = expected.indexOf('å');
+    expect([...new TextEncoder().encode(expected.slice(0, index + 1)).slice(-2)]).toEqual([0xc3, 0xa5]);
+  });
+
+  it('writes the header in the page language and keeps the number format', () => {
+    const text = expensesCsv([first], ledger, en);
+    expect(text.split('\r\n')[0]).toBe(
+      "Date;Description;Category;Account;Paid by;Amount;Jacob's share;Anna's share;Notes",
+    );
+    expect(text.split('\r\n')[1]).toBe('2026-10-16;"ICA Maxi; Lindhagen";Groceries;Vardag;Jacob;412,00;206,00;206,00;');
+  });
+
+  it('names the file by language and date', () => {
+    expect(exportFileName('2026-10-21', sv)).toBe('kvitt-utgifter-2026-10-21.csv');
+    expect(exportFileName('2026-10-21', en)).toBe('kvitt-expenses-2026-10-21.csv');
+  });
+});
diff --git a/web/src/features/export/csv.ts b/web/src/features/export/csv.ts
new file mode 100644
index 0000000..5a1d6d8
--- /dev/null
+++ b/web/src/features/export/csv.ts
@@ -0,0 +1,76 @@
+/**
+ * The CSV export of W-12 (SPEC §15.7), built in the browser. Format (proposed decision): UTF-8 with a byte-order mark,
+ * `;` between fields, CRLF line ends, a header row in the page's language, RFC 4180 quoting (a field holding `;`, `"`,
+ * CR or LF, or starting or ending with a space, is quoted, `"` doubled), amounts as kronor with a decimal comma and two
+ * decimals and no grouping ("1234,50"), dates ISO (`2026-10-16`). Excel and Numbers with a Swedish locale read the
+ * BOM as UTF-8, split on `;` and take "1234,50" as a number; text cells that a spreadsheet would run as a formula
+ * (starting with `=`, `+`, `-`, `@`, TAB or CR) get a leading `'` (OWASP CSV injection).
+ */
+import type { Ledger } from '../../api/ledger';
+import { householdUserIds } from '../../api/ledger';
+import type { Expense } from '../../api/types';
+import { categoryName } from '../../components/editor';
+import type { I18n } from '../../i18n/I18nProvider';
+
+export const CSV_BOM = '';
+export const CSV_SEPARATOR = ';';
+export const CSV_EOL = '\r\n';
+export const CSV_MIME = 'text/csv;charset=utf-8';
+
+const FORMULA_START = /^[=+\-@\t\r]/;
+
+/** One text cell: formula-neutralised, then quoted when needed. */
+export function csvText(value: string): string {
+  const safe = FORMULA_START.test(value) ? `'${value}` : value;
+  return /[;"\r\n]/.test(safe) || safe.startsWith(' ') || safe.endsWith(' ') ? `"${safe.replaceAll('"', '""')}"` : safe;
+}
+
+/** Öre as kronor for a Swedish-locale spreadsheet: 123450 -> "1234,50", 5 -> "0,05". Never grouped, never signed. */
+export function csvAmount(ore: number): string {
+  const magnitude = Math.abs(Math.trunc(ore));
+  return `${Math.floor(magnitude / 100)},${String(magnitude % 100).padStart(2, '0')}`;
+}
+
+/** Rows of already-formatted cells into a document: BOM, `;`, CRLF after every row. */
+export function csvDocument(rows: readonly (readonly string[])[]): string {
+  return CSV_BOM + rows.map((row) => row.join(CSV_SEPARATOR) + CSV_EOL).join('');
+}
+
+/**
+ * The export of `expenses` (in the order given): date, description, category, account, payer, amount, each household
+ * user's share (users in avatar-slot order, design-spec §2.5), notes.
+ */
+export function expensesCsv(expenses: readonly Expense[], ledger: Ledger, t: I18n['t']): string {
+  const users = householdUserIds(ledger);
+  const name = (userId: string) => ledger.users.get(userId)?.display_name ?? userId;
+  const header = [
+    t('expense_detail_date'),
+    t('editor_description'),
+    t('editor_category'),
+    t('editor_account'),
+    t('editor_paid_by'),
+    t('editor_amount'),
+    ...users.map((u) => t('web_export_share', name(u))),
+    t('editor_notes'),
+  ].map(csvText);
+  const rows = expenses.map((e) => {
+    const category = ledger.categories.get(e.category_id);
+    const shares = new Map(e.splits.map((s) => [s.user_id, s.share_ore]));
+    return [
+      e.expense_date,
+      csvText(e.description),
+      csvText(category === undefined ? '' : categoryName(category, t)),
+      csvText(ledger.accounts.get(e.account_id)?.name ?? ''),
+      csvText(name(e.payer_user_id)),
+      csvAmount(e.amount_ore),
+      ...users.map((u) => csvAmount(shares.get(u) ?? 0)),
+      csvText(e.notes),
+    ];
+  });
+  return csvDocument([header, ...rows]);
+}
+
+/** `kvitt-utgifter-2026-10-21.csv` / `kvitt-expenses-2026-10-21.csv`. */
+export function exportFileName(today: string, t: I18n['t']): string {
+  return t('web_export_file_name', today);
+}
diff --git a/web/src/features/export/download.ts b/web/src/features/export/download.ts
new file mode 100644
index 0000000..f431510
--- /dev/null
+++ b/web/src/features/export/download.ts
@@ -0,0 +1,18 @@
+/**
+ * Hands the viewer a file built in the browser (SPEC §15.7: no server endpoint): a `Blob`, an object URL and a
+ * temporary `<a download>` link. The URL is revoked once the click has been handled.
+ */
+export function downloadFile(fileName: string, content: string, type: string): void {
+  const url = URL.createObjectURL(new Blob([content], { type }));
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  link.rel = 'noopener';
+  link.hidden = true;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  window.setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 0);
+}
diff --git a/web/src/features/export/i18n/en.json b/web/src/features/export/i18n/en.json
new file mode 100644
index 0000000..87c097e
--- /dev/null
+++ b/web/src/features/export/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "web_export_csv": "Export CSV",
+  "web_export_file_name": "kvitt-expenses-{1}.csv",
+  "web_export_share": "{1}'s share"
+}
diff --git a/web/src/features/export/i18n/sv.json b/web/src/features/export/i18n/sv.json
new file mode 100644
index 0000000..787684f
--- /dev/null
+++ b/web/src/features/export/i18n/sv.json
@@ -0,0 +1,5 @@
+{
+  "web_export_csv": "Exportera CSV",
+  "web_export_file_name": "kvitt-utgifter-{1}.csv",
+  "web_export_share": "Andel {1}"
+}
diff --git a/web/src/features/search/Search.module.css b/web/src/features/search/Search.module.css
new file mode 100644
index 0000000..2f85130
--- /dev/null
+++ b/web/src/features/search/Search.module.css
@@ -0,0 +1,40 @@
+/* W-12 Search. Tokens only. */
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-section);
+  padding: 0 var(--gutter) var(--s6);
+}
+.filters {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+}
+.query input {
+  font: var(--type-body-large);
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  gap: var(--s3);
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-width: 0;
+}
+.legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.clear,
+.more {
+  align-self: flex-start;
+}
+.summary {
+  font: var(--type-title-small);
+  color: var(--on-surface-variant);
+}
diff --git a/web/src/features/search/SearchPage.test.tsx b/web/src/features/search/SearchPage.test.tsx
new file mode 100644
index 0000000..d7d6fb1
--- /dev/null
+++ b/web/src/features/search/SearchPage.test.tsx
@@ -0,0 +1,180 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import type { Expense } from '../../api/types';
+import { todayIso } from '../../lib/dates';
+import { FakeServer, json } from '../../test/fakeServer';
+import { ANNA, JACOB, page } from '../../test/fixtures';
+import { renderApp } from '../../test/render';
+import { ANNA_ID, expenseRow, householdServer, HUSET, SHOPPING, VARDAG } from '../expenses/testLedger';
+
+const SP = ' ';
+const e = (n: number, patch: Partial<Expense>) =>
+  expenseRow(`01929c5e-0000-7000-8000-0000000c${String(n).padStart(4, '0')}`, patch);
+
+const ICA = e(1, { description: 'ICA Maxi', amount_ore: 41_200, expense_date: '2026-10-16' });
+const BOLAGET = e(2, {
+  description: 'Systembolaget',
+  notes: 'Vin till ICA-festen',
+  amount_ore: 30_000,
+  expense_date: '2026-10-14',
+});
+const HYRA = e(3, {
+  description: 'Hyra',
+  account_id: HUSET.id,
+  payer_user_id: ANNA_ID,
+  amount_ore: 1_200_000,
+  expense_date: '2026-10-01',
+});
+const KLADER = e(4, {
+  description: 'Kläder',
+  category_id: SHOPPING.id,
+  amount_ore: 99_950,
+  expense_date: '2026-09-20',
+});
+const GONE = e(5, { description: 'ICA borttagen', deleted_at: '2026-10-17T00:00:00.000Z' });
+const ALL = [ICA, BOLAGET, HYRA, KLADER, GONE];
+
+function rows() {
+  return within(screen.getByRole('list', { name: 'Resultat' }))
+    .getAllByRole('link')
+    .map((link) => link.getAttribute('href'));
+}
+
+async function openSearch(path = '/search', server = householdServer({ expenses: ALL })) {
+  const result = renderApp(path, { server });
+  await screen.findByLabelText('Sök i beskrivningar och anteckningar');
+  return { ...result, user: userEvent.setup() };
+}
+
+describe('W-12 search', () => {
+  it('lists every live expense newest first with the count and sum, the field focused', async () => {
+    await openSearch();
+    expect(screen.getByRole('heading', { level: 1, name: 'Sök' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Sök i beskrivningar och anteckningar')).toHaveFocus();
+    expect(screen.getByText(`4 utgifter · 13${SP}711,50${SP}kr`)).toHaveAttribute('role', 'status');
+    expect(rows()).toEqual([ICA, BOLAGET, HYRA, KLADER].map((x) => `/app/expenses/${x.id}`));
+  });
+
+  it('narrows by text in the description or notes and keeps the filters in the URL', async () => {
+    const { user, router } = await openSearch();
+    await user.type(screen.getByLabelText('Sök i beskrivningar och anteckningar'), 'ica');
+    expect(rows()).toEqual([ICA, BOLAGET].map((x) => `/app/expenses/${x.id}`));
+    expect(screen.getByText(`2 utgifter · 712,00${SP}kr`)).toBeInTheDocument();
+    expect(router.state.location.search).toBe('?q=ica');
+
+    await user.selectOptions(screen.getByLabelText('Konto'), VARDAG.id);
+    await user.type(screen.getByLabelText('Belopp från'), '350');
+    expect(rows()).toEqual([`/app/expenses/${ICA.id}`]);
+    expect(screen.getByText(`1 utgift · 412,00${SP}kr`)).toBeInTheDocument();
+    expect(router.state.location.search).toBe(`?q=ica&min=35000&account=${VARDAG.id}`);
+
+    await user.click(screen.getByRole('button', { name: 'Rensa filter' }));
+    expect(rows()).toHaveLength(2);
+    expect(router.state.location.search).toBe('?q=ica');
+  });
+
+  it('opens a bookmarked search with its filters, payer and dates included', async () => {
+    await openSearch(`/search?payer=${ANNA_ID}&from=2026-10-01&to=2026-10-31&max=2000000`);
+    expect(screen.getByLabelText('Betalt av')).toHaveValue(ANNA_ID);
+    expect(screen.getByLabelText('Från datum')).toHaveValue('2026-10-01');
+    expect(screen.getByLabelText('Belopp till')).toHaveValue('20\u00A0000,00');
+    expect(rows()).toEqual([`/app/expenses/${HYRA.id}`]);
+  });
+
+  it('says when nothing matches, and when there are no expenses at all', async () => {
+    const { user } = await openSearch();
+    await user.type(screen.getByLabelText('Sök i beskrivningar och anteckningar'), 'zzz');
+    expect(screen.getByRole('heading', { name: 'Inga utgifter matchar' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Exportera CSV' })).toBeDisabled();
+  });
+
+  it('shows the empty household state', async () => {
+    renderApp('/search', {
+      server: new FakeServer().on('GET', '/sync', () => json(page(0, { users: [JACOB, ANNA] }))),
+    });
+    expect(await screen.findByRole('heading', { name: 'Inga utgifter än' })).toBeInTheDocument();
+  });
+
+  it('shows long result lists a hundred at a time', async () => {
+    const many = Array.from({ length: 150 }, (_, i) =>
+      e(100 + i, { description: `Kaffe ${i}`, expense_date: '2026-10-01', amount_ore: 100 }),
+    );
+    const { user } = await openSearch('/search', householdServer({ expenses: many }));
+    expect(rows()).toHaveLength(100);
+    expect(screen.getByText(`150 utgifter · 150,00${SP}kr`)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Visa fler' }));
+    expect(rows()).toHaveLength(150);
+    expect(screen.queryByRole('button', { name: 'Visa fler' })).not.toBeInTheDocument();
+  });
+
+  it('focuses the search field on / while on the page', async () => {
+    const { user } = await openSearch();
+    const field = screen.getByLabelText('Sök i beskrivningar och anteckningar');
+    await user.click(screen.getByRole('heading', { level: 1, name: 'Sök' }));
+    expect(field).not.toHaveFocus();
+    await user.keyboard('/');
+    expect(field).toHaveFocus();
+  });
+});
+
+describe('W-12 CSV export', () => {
+  const created: Blob[] = [];
+  const revoked: string[] = [];
+  const clicked: HTMLAnchorElement[] = [];
+  const original = {
+    create: Object.getOwnPropertyDescriptor(URL, 'createObjectURL'),
+    revoke: Object.getOwnPropertyDescriptor(URL, 'revokeObjectURL'),
+  };
+  const restore = (name: 'createObjectURL' | 'revokeObjectURL', descriptor: PropertyDescriptor | undefined) => {
+    if (descriptor === undefined) Reflect.deleteProperty(URL, name);
+    else Object.defineProperty(URL, name, descriptor);
+  };
+  const onClick = (event: MouseEvent) => {
+    if (event.target instanceof HTMLAnchorElement && event.target.download !== '') {
+      clicked.push(event.target);
+      event.preventDefault();
+    }
+  };
+
+  beforeEach(() => {
+    created.length = 0;
+    revoked.length = 0;
+    clicked.length = 0;
+    // jsdom has no object URLs; a recording stand-in (no mocking library).
+    URL.createObjectURL = (blob: Blob) => {
+      created.push(blob);
+      return `blob:kvitt.test/${created.length}`;
+    };
+    URL.revokeObjectURL = (url: string) => {
+      revoked.push(url);
+    };
+    document.addEventListener('click', onClick, true);
+  });
+
+  afterEach(() => {
+    restore('createObjectURL', original.create);
+    restore('revokeObjectURL', original.revoke);
+    document.removeEventListener('click', onClick, true);
+  });
+
+  it('downloads the filtered list as a Swedish-locale CSV, byte for byte', async () => {
+    const { user } = await openSearch();
+    await user.type(screen.getByLabelText('Sök i beskrivningar och anteckningar'), 'ica');
+    await user.click(screen.getByRole('button', { name: 'Exportera CSV' }));
+    expect(clicked).toHaveLength(1);
+    expect(clicked[0]?.download).toBe(`kvitt-utgifter-${todayIso()}.csv`);
+    expect(clicked[0]?.getAttribute('href')).toBe('blob:kvitt.test/1');
+    expect(created[0]?.type).toBe('text/csv;charset=utf-8');
+    const bytes = new Uint8Array(await (created[0] as Blob).arrayBuffer());
+    const expected =
+      'Datum;Beskrivning;Kategori;Konto;Betalt av;Belopp;Andel Jacob;Andel Anna;Anteckningar\r\n' +
+      '2026-10-16;ICA Maxi;Mat & hushåll;Vardag;Jacob;412,00;206,00;206,00;\r\n' +
+      '2026-10-14;Systembolaget;Mat & hushåll;Vardag;Jacob;300,00;150,00;150,00;Vin till ICA-festen\r\n';
+    expect([...bytes]).toEqual([...new TextEncoder().encode(expected)]);
+    await waitFor(() => {
+      expect(revoked).toEqual(['blob:kvitt.test/1']);
+    });
+    expect(document.querySelector('a[download]')).toBeNull();
+  });
+});
diff --git a/web/src/features/search/SearchPage.tsx b/web/src/features/search/SearchPage.tsx
index e275fe1..53e8c02 100644
--- a/web/src/features/search/SearchPage.tsx
+++ b/web/src/features/search/SearchPage.tsx
@@ -1,8 +1,253 @@
-import { PlaceholderPage } from '../../app/PlaceholderPage';
+import { useMemo, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router';
+import { live, useLedger, type Ledger } from '../../api/ledger';
+import type { Expense } from '../../api/types';
+import { paths } from '../../app/routes';
+import { useShortcut } from '../../app/shortcuts';
+import { TopBar } from '../../app/TopBar';
+import { useSession } from '../../app/useSession';
+import { AmountField } from '../../components/AmountField';
+import { Button } from '../../components/Button';
+import { CategoryIcon } from '../../components/CategoryIcon';
+import { categoryName, DateField, SelectField } from '../../components/editor';
+import { EmptyState } from '../../components/EmptyState';
+import { LedgerRow, SegmentedGroup, SegmentedItem } from '../../components/LedgerRow';
+import { TextField } from '../../components/TextField';
+import { Icon } from '../../design/Icon';
 import { useI18n } from '../../i18n/useI18n';
+import { listDate, parseDate } from '../../lib/dates';
+import { expenseEffect } from '../../lib/effect';
+import { amountInputDisplay, amountInputOf, formatMoney } from '../../lib/money';
+import { ExportCsvButton } from '../export/ExportCsvButton';
+import { localToday } from '../expenses/timelineLines';
+import { ErrorState, LoadingState } from '../expenses/PageStates';
+import {
+  filtersFromParams,
+  hasFilters,
+  NO_FILTERS,
+  paramsFromFilters,
+  searchExpenses,
+  type SearchFilters,
+} from './filter';
+import styles from './Search.module.css';
 
-/** Search, /app/search (web only; the / shortcut). */
+/** Rows rendered at first and per "Visa fler" (long content stays fast). */
+export const PAGE_SIZE = 100;
+
+/** Search, /app/search (W-12, web only; the / shortcut focuses the field). */
 export default function SearchPage() {
   const { t } = useI18n();
-  return <PlaceholderPage title={t('web_search_title')} />;
+  const ledger = useLedger();
+  const title = t('web_search_title');
+  if (ledger.isPending) {
+    return (
+      <>
+        <TopBar title={title} />
+        <LoadingState />
+      </>
+    );
+  }
+  if (ledger.isError) {
+    return (
+      <>
+        <TopBar title={title} />
+        <ErrorState error={ledger.error} onRetry={() => void ledger.refetch()} />
+      </>
+    );
+  }
+  return <Search ledger={ledger.data} title={title} />;
+}
+
+function amountText(ore: number | null, language: 'sv' | 'en'): string {
+  return ore === null ? '' : amountInputDisplay(amountInputOf(ore), language);
+}
+
+function Search({ ledger, title }: { ledger: Ledger; title: string }) {
+  const { t, tp, language } = useI18n();
+  const session = useSession();
+  const viewerId = session?.userId ?? '';
+  const [params, setParams] = useSearchParams();
+  const filters = filtersFromParams(params);
+  // Amount fields keep the text as typed (no reformatting under the caret); the URL holds öre.
+  const [minText, setMinText] = useState(() => amountText(filters.minOre, language));
+  const [maxText, setMaxText] = useState(() => amountText(filters.maxOre, language));
+  const [shown, setShown] = useState(PAGE_SIZE);
+  const queryRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+  useShortcut('/', () => {
+    queryRef.current?.focus();
+  });
+
+  const setFilters = (patch: Partial<SearchFilters>) => {
+    setParams(paramsFromFilters({ ...filters, ...patch }), { replace: true });
+    setShown(PAGE_SIZE);
+  };
+
+  const results = useMemo(() => searchExpenses(ledger.expenses.values(), filtersFromParams(params)), [ledger, params]);
+  const sum = results.reduce((total, e) => total + e.amount_ore, 0);
+  const anyExpenses = live(ledger.expenses).length > 0;
+  const accounts = live(ledger.accounts).sort((a, b) => a.name.localeCompare(b.name, language));
+  const categories = live(ledger.categories).sort((a, b) => a.sort_order - b.sort_order);
+  const users = [...ledger.users.values()].sort((a, b) => (a.id === viewerId ? -1 : b.id === viewerId ? 1 : 0));
+  const today = localToday();
+
+  return (
+    <>
+      <TopBar title={title} actions={<ExportCsvButton expenses={results} ledger={ledger} />} />
+      <div className={styles.page}>
+        <search className={styles.filters}>
+          <TextField
+            ref={queryRef}
+            className={styles.query}
+            type="search"
+            label={t('web_search_field')}
+            value={filters.query}
+            autoFocus
+            autoComplete="off"
+            prefix={<Icon name="search" />}
+            onChange={(query) => {
+              setFilters({ query });
+            }}
+          />
+          <fieldset className={styles.grid}>
+            <legend className={styles.legend}>{t('web_search_filters')}</legend>
+            <AmountField
+              label={t('web_search_amount_from')}
+              value={minText}
+              onChange={(text, ore) => {
+                setMinText(text);
+                setFilters({ minOre: ore });
+              }}
+            />
+            <AmountField
+              label={t('web_search_amount_to')}
+              value={maxText}
+              onChange={(text, ore) => {
+                setMaxText(text);
+                setFilters({ maxOre: ore });
+              }}
+            />
+            <DateField
+              label={t('web_search_date_from')}
+              value={filters.from}
+              max={filters.to === '' ? undefined : filters.to}
+              onChange={(from) => {
+                setFilters({ from });
+              }}
+            />
+            <DateField
+              label={t('web_search_date_to')}
+              value={filters.to}
+              min={filters.from === '' ? undefined : filters.from}
+              onChange={(to) => {
+                setFilters({ to });
+              }}
+            />
+            <SelectField
+              label={t('editor_account')}
+              value={filters.accountId}
+              options={[
+                { value: '', label: t('web_search_any_account') },
+                ...accounts.map((a) => ({ value: a.id, label: a.name })),
+              ]}
+              onChange={(accountId) => {
+                setFilters({ accountId });
+              }}
+            />
+            <SelectField
+              label={t('editor_category')}
+              value={filters.categoryId}
+              options={[
+                { value: '', label: t('web_search_any_category') },
+                ...categories.map((c) => ({ value: c.id, label: categoryName(c, t) })),
+              ]}
+              onChange={(categoryId) => {
+                setFilters({ categoryId });
+              }}
+            />
+            <SelectField
+              label={t('editor_paid_by')}
+              value={filters.payerId}
+              options={[
+                { value: '', label: t('web_search_any_payer') },
+                ...users.map((u) => ({ value: u.id, label: u.id === viewerId ? t('common_you') : u.display_name })),
+              ]}
+              onChange={(payerId) => {
+                setFilters({ payerId });
+              }}
+            />
+          </fieldset>
+          {hasFilters(filters) ? (
+            <Button
+              variant="text"
+              className={styles.clear}
+              icon={<Icon name="close" size={20} />}
+              onClick={() => {
+                setMinText('');
+                setMaxText('');
+                setFilters({ ...NO_FILTERS, query: filters.query });
+              }}
+            >
+              {t('web_search_clear')}
+            </Button>
+          ) : null}
+        </search>
+        <p className={styles.summary} role="status" aria-live="polite">
+          {tp('web_search_count', results.length, results.length, formatMoney(sum, language))}
+        </p>
+        {!anyExpenses ? (
+          <EmptyState icon="receipt_long" title={t('account_empty_title')} />
+        ) : results.length === 0 ? (
+          <EmptyState icon="search" title={t('web_search_no_match_title')} body={t('web_search_no_match_body')} />
+        ) : (
+          <>
+            <SegmentedGroup label={t('web_search_results')}>
+              {results.slice(0, shown).map((expense) => (
+                <SegmentedItem key={expense.id}>
+                  <ResultRow expense={expense} ledger={ledger} viewerId={viewerId} today={today} />
+                </SegmentedItem>
+              ))}
+            </SegmentedGroup>
+            {results.length > shown ? (
+              <Button
+                variant="outlined"
+                className={styles.more}
+                onClick={() => {
+                  setShown((n) => n + PAGE_SIZE);
+                }}
+              >
+                {t('web_search_show_more')}
+              </Button>
+            ) : null}
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+function ResultRow({
+  expense,
+  ledger,
+  viewerId,
+  today,
+}: {
+  expense: Expense;
+  ledger: Ledger;
+  viewerId: string;
+  today: ReturnType<typeof localToday>;
+}) {
+  const { language } = useI18n();
+  const category = ledger.categories.get(expense.category_id);
+  const shares = Object.fromEntries(expense.splits.map((s) => [s.user_id, s.share_ore]));
+  return (
+    <LedgerRow
+      kind="expense"
+      to={paths.expense(expense.id)}
+      leading={<CategoryIcon icon={category?.icon ?? 'category'} color={category?.color ?? 'grey'} size={40} />}
+      description={expense.description}
+      amountOre={expense.amount_ore}
+      effect={expenseEffect(viewerId, expense.payer_user_id, shares)}
+      date={listDate(parseDate(expense.expense_date), today, language)}
+    />
+  );
 }
diff --git a/web/src/features/search/filter.test.ts b/web/src/features/search/filter.test.ts
new file mode 100644
index 0000000..6817d70
--- /dev/null
+++ b/web/src/features/search/filter.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import type { Expense } from '../../api/types';
+import { ANNA_ID, JACOB_ID, expense } from '../../test/fixtures';
+import { filtersFromParams, matchesQuery, NO_FILTERS, paramsFromFilters, searchExpenses } from './filter';
+
+const A1 = 'acc-1';
+const A2 = 'acc-2';
+const shares = { [JACOB_ID]: 50, [ANNA_ID]: 50 };
+
+function row(id: string, patch: Partial<Expense>): Expense {
+  return { ...expense(id, A1, 100, JACOB_ID, shares, 1), ...patch };
+}
+
+const ROWS = [
+  row('e1', {
+    description: 'ICA Maxi',
+    amount_ore: 41_200,
+    expense_date: '2026-10-16',
+    created_at: '2026-10-16T10:00:00.000Z',
+  }),
+  row('e2', {
+    description: 'Systembolaget',
+    notes: 'till festen på ICA-gården',
+    amount_ore: 30_000,
+    expense_date: '2026-10-16',
+    created_at: '2026-10-16T12:00:00.000Z',
+  }),
+  row('e3', {
+    description: 'Hyra',
+    account_id: A2,
+    category_id: 'cat-housing',
+    payer_user_id: ANNA_ID,
+    amount_ore: 1_200_000,
+    expense_date: '2026-10-01',
+  }),
+  row('e4', { description: 'Ica nära', amount_ore: 9_900, expense_date: '2026-09-30' }),
+  row('e5', { description: 'ICA borttagen', deleted_at: '2026-10-17T00:00:00.000Z' }),
+];
+
+const ids = (list: Expense[]) => list.map((e) => e.id);
+
+describe('search (SPEC §15.7, AC-21.10)', () => {
+  it('matches the description or the notes, ignoring case, and leaves deleted expenses out', () => {
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, query: 'ica' }))).toEqual(['e2', 'e1', 'e4']);
+    expect(matchesQuery({ description: 'ÅHLÉNS', notes: '' }, 'åhléns')).toBe(true);
+    expect(matchesQuery({ description: 'x', notes: 'Rad 1\nPresent till Anna' }, 'present')).toBe(true);
+    expect(matchesQuery({ description: 'x', notes: '' }, '   ')).toBe(true);
+  });
+
+  it('sorts newest first by date, then created_at', () => {
+    expect(ids(searchExpenses(ROWS, NO_FILTERS))).toEqual(['e2', 'e1', 'e3', 'e4']);
+  });
+
+  it('filters by amount range, inclusive', () => {
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, minOre: 30_000, maxOre: 41_200 }))).toEqual(['e2', 'e1']);
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, minOre: 1_000_000 }))).toEqual(['e3']);
+  });
+
+  it('filters by date range, inclusive', () => {
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, from: '2026-10-01', to: '2026-10-15' }))).toEqual(['e3']);
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, to: '2026-09-30' }))).toEqual(['e4']);
+  });
+
+  it('filters by account, category and payer', () => {
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, accountId: A2 }))).toEqual(['e3']);
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, categoryId: 'cat-housing' }))).toEqual(['e3']);
+    expect(ids(searchExpenses(ROWS, { ...NO_FILTERS, payerId: ANNA_ID }))).toEqual(['e3']);
+  });
+
+  it('combines every filter with AND', () => {
+    const filters = {
+      ...NO_FILTERS,
+      query: 'ica',
+      accountId: A1,
+      payerId: JACOB_ID,
+      minOre: 10_000,
+      from: '2026-10-01',
+    };
+    expect(ids(searchExpenses(ROWS, filters))).toEqual(['e2', 'e1']);
+    expect(ids(searchExpenses(ROWS, { ...filters, maxOre: 30_000 }))).toEqual(['e2']);
+    expect(ids(searchExpenses(ROWS, { ...filters, payerId: ANNA_ID }))).toEqual([]);
+  });
+
+  it('round-trips the filters through the URL query and ignores malformed values', () => {
+    const filters = {
+      query: 'ica maxi',
+      minOre: 100,
+      maxOre: 50_000,
+      from: '2026-10-01',
+      to: '2026-10-31',
+      accountId: A1,
+      categoryId: 'c',
+      payerId: ANNA_ID,
+    };
+    const params = paramsFromFilters(filters);
+    expect(params.toString()).toBe(
+      `q=ica+maxi&min=100&max=50000&from=2026-10-01&to=2026-10-31&account=${A1}&category=c&payer=${ANNA_ID}`,
+    );
+    expect(filtersFromParams(params)).toEqual(filters);
+    expect(paramsFromFilters(NO_FILTERS).toString()).toBe('');
+    expect(filtersFromParams(new URLSearchParams('min=-5&max=1.5&from=yesterday'))).toEqual(NO_FILTERS);
+  });
+});
diff --git a/web/src/features/search/filter.ts b/web/src/features/search/filter.ts
new file mode 100644
index 0000000..6e78d80
--- /dev/null
+++ b/web/src/features/search/filter.ts
@@ -0,0 +1,116 @@
+/**
+ * W-12 search (SPEC §15.7, AC-21.10): over the snapshot, non-deleted expenses whose description or notes contain the
+ * query (ignoring case), filtered by amount range, date range, account, category and payer, all combined with AND,
+ * newest first. The filters live in the URL query so a search can be bookmarked (W2's choice).
+ */
+import type { Expense } from '../../api/types';
+import { compareExpensesNewestFirst } from '../expenses/model';
+
+export interface SearchFilters {
+  query: string;
+  /** Amount bounds in öre, inclusive; null = open. */
+  minOre: number | null;
+  maxOre: number | null;
+  /** Date bounds `YYYY-MM-DD`, inclusive; '' = open. */
+  from: string;
+  to: string;
+  /** '' = any. */
+  accountId: string;
+  categoryId: string;
+  payerId: string;
+}
+
+export const NO_FILTERS: SearchFilters = {
+  query: '',
+  minOre: null,
+  maxOre: null,
+  from: '',
+  to: '',
+  accountId: '',
+  categoryId: '',
+  payerId: '',
+};
+
+const DATE = /^\d{4}-\d{2}-\d{2}$/;
+
+function ore(value: string | null): number | null {
+  if (value === null || !/^\d{1,13}$/.test(value)) return null;
+  return Number(value);
+}
+
+/** Filters from the page's query string: `q`, `min`, `max` (öre), `from`, `to`, `account`, `category`, `payer`. */
+export function filtersFromParams(params: URLSearchParams): SearchFilters {
+  const date = (key: string) => {
+    const value = params.get(key) ?? '';
+    return DATE.test(value) ? value : '';
+  };
+  return {
+    query: params.get('q') ?? '',
+    minOre: ore(params.get('min')),
+    maxOre: ore(params.get('max')),
+    from: date('from'),
+    to: date('to'),
+    accountId: params.get('account') ?? '',
+    categoryId: params.get('category') ?? '',
+    payerId: params.get('payer') ?? '',
+  };
+}
+
+/** The query string of the filters, without empty ones. */
+export function paramsFromFilters(filters: SearchFilters): URLSearchParams {
+  const params = new URLSearchParams();
+  const set = (key: string, value: string | number | null) => {
+    if (value !== null && value !== '') params.set(key, String(value));
+  };
+  set('q', filters.query);
+  set('min', filters.minOre);
+  set('max', filters.maxOre);
+  set('from', filters.from);
+  set('to', filters.to);
+  set('account', filters.accountId);
+  set('category', filters.categoryId);
+  set('payer', filters.payerId);
+  return params;
+}
+
+function folded(text: string): string {
+  return text.normalize('NFC').toLowerCase();
+}
+
+/** True when the description or the notes contain the query, ignoring case; an empty query matches everything. */
+export function matchesQuery(expense: Pick<Expense, 'description' | 'notes'>, query: string): boolean {
+  const needle = folded(query.trim());
+  if (needle === '') return true;
+  return folded(expense.description).includes(needle) || folded(expense.notes).includes(needle);
+}
+
+/** The non-deleted expenses that pass every filter, newest first (AC-8.10 order). */
+export function searchExpenses(expenses: Iterable<Expense>, filters: SearchFilters): Expense[] {
+  const result: Expense[] = [];
+  for (const e of expenses) {
+    if (e.deleted_at !== null) continue;
+    if (filters.minOre !== null && e.amount_ore < filters.minOre) continue;
+    if (filters.maxOre !== null && e.amount_ore > filters.maxOre) continue;
+    if (filters.from !== '' && e.expense_date < filters.from) continue;
+    if (filters.to !== '' && e.expense_date > filters.to) continue;
+    if (filters.accountId !== '' && e.account_id !== filters.accountId) continue;
+    if (filters.categoryId !== '' && e.category_id !== filters.categoryId) continue;
+    if (filters.payerId !== '' && e.payer_user_id !== filters.payerId) continue;
+    if (!matchesQuery(e, filters.query)) continue;
+    result.push(e);
+  }
+  return result.sort(compareExpensesNewestFirst);
+}
+
+/** True when any filter besides the query is set. */
+export function hasFilters(filters: SearchFilters): boolean {
+  return (
+    filters.minOre !== null ||
+    filters.maxOre !== null ||
+    filters.from !== '' ||
+    filters.to !== '' ||
+    filters.accountId !== '' ||
+    filters.categoryId !== '' ||
+    filters.payerId !== ''
+  );
+}
diff --git a/web/src/features/search/i18n/en.json b/web/src/features/search/i18n/en.json
new file mode 100644
index 0000000..e0bf022
--- /dev/null
+++ b/web/src/features/search/i18n/en.json
@@ -0,0 +1,18 @@
+{
+  "web_search_field": "Search descriptions and notes",
+  "web_search_filters": "Filters",
+  "web_search_amount_from": "Amount from",
+  "web_search_amount_to": "Amount to",
+  "web_search_date_from": "From date",
+  "web_search_date_to": "To date",
+  "web_search_any_account": "All accounts",
+  "web_search_any_category": "All categories",
+  "web_search_any_payer": "Either of you",
+  "web_search_clear": "Clear filters",
+  "web_search_count:one": "{1} expense · {2}",
+  "web_search_count:other": "{1} expenses · {2}",
+  "web_search_results": "Results",
+  "web_search_no_match_title": "No expenses match",
+  "web_search_no_match_body": "Try other words or fewer filters.",
+  "web_search_show_more": "Show more"
+}
diff --git a/web/src/features/search/i18n/sv.json b/web/src/features/search/i18n/sv.json
new file mode 100644
index 0000000..237a747
--- /dev/null
+++ b/web/src/features/search/i18n/sv.json
@@ -0,0 +1,18 @@
+{
+  "web_search_field": "Sök i beskrivningar och anteckningar",
+  "web_search_filters": "Filter",
+  "web_search_amount_from": "Belopp från",
+  "web_search_amount_to": "Belopp till",
+  "web_search_date_from": "Från datum",
+  "web_search_date_to": "Till datum",
+  "web_search_any_account": "Alla konton",
+  "web_search_any_category": "Alla kategorier",
+  "web_search_any_payer": "Någon av er",
+  "web_search_clear": "Rensa filter",
+  "web_search_count:one": "{1} utgift · {2}",
+  "web_search_count:other": "{1} utgifter · {2}",
+  "web_search_results": "Resultat",
+  "web_search_no_match_title": "Inga utgifter matchar",
+  "web_search_no_match_body": "Prova andra ord eller färre filter.",
+  "web_search_show_more": "Visa fler"
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 2b864a1..669a4de 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -34,6 +34,10 @@ export default defineConfig({
     __KVITT_VERSION_CODE__: JSON.stringify(pkg.kvitt.versionCode),
   },
   server: {
+    // web/ itself, plus contracts/ for the one contract file the app imports at build time: W2's keyword table
+    // (SPEC §15.7, D-055). Vite refuses `?raw` imports outside these paths, in Vitest as well as the dev server, and
+    // matches the id with its query, so the entry must be the directory, not the file.
+    fs: { allow: ['.', '../contracts'] },
     proxy: Object.fromEntries(API_PREFIXES.map((prefix) => [prefix, { target: devApi, changeOrigin: true }])),
   },
   build: {