From 758af6f0bcfeee76aae3d2bc6cde0b531e61b75f Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 21 Sep 2026 18:08:13 +0200
Subject: [PATCH] web: replace markdown forms editor with a textarea toolbar,
 mentions and references

Signed-off-by: eti <eti@eti.tf>
---
 web/package.json                              |   4 +-
 web/pnpm-lock.yaml                            |  16 +
 web/src/lib/api/records.ts                    |  15 +
 .../components/comment/CommentEditor.svelte   |   6 +-
 .../repo/pulls/PullReviewCommentEditor.svelte |   4 +-
 .../repo/tickets/TicketStatePill.svelte       |   4 +-
 .../ui/MarkdownEditor.stories.svelte          |  85 ++++-
 .../lib/components/ui/MarkdownEditor.svelte   | 348 ++++++++++++++----
 .../components/ui/MarkdownTypeahead.svelte    | 268 ++++++++++++++
 .../lib/components/ui/markdownFormat.test.ts  | 133 +++++++
 web/src/lib/components/ui/markdownFormat.ts   | 203 ++++++++++
 .../lib/components/ui/markdownScroll.test.ts  |  45 +++
 web/src/lib/components/ui/markdownScroll.ts   |  84 +++++
 .../lib/components/ui/markdownSuggestions.ts  |  99 +++++
 web/src/lib/markup/markdown.test.ts           |  14 +
 web/src/lib/markup/markdown.ts                |  24 +-
 web/src/lib/markup/paths.ts                   |   1 +
 web/src/lib/markup/render.ts                  |  11 +-
 web/src/lib/markup/sanitize.ts                |   4 +-
 web/src/routes/+error.svelte                  |   2 +-
 web/vite.config.ts                            |   2 +-
 21 files changed, 1276 insertions(+), 96 deletions(-)
 create mode 100644 web/src/lib/components/ui/MarkdownTypeahead.svelte
 create mode 100644 web/src/lib/components/ui/markdownFormat.test.ts
 create mode 100644 web/src/lib/components/ui/markdownFormat.ts
 create mode 100644 web/src/lib/components/ui/markdownScroll.test.ts
 create mode 100644 web/src/lib/components/ui/markdownScroll.ts
 create mode 100644 web/src/lib/components/ui/markdownSuggestions.ts

diff --git a/web/package.json b/web/package.json
index f625b5867..31c141bc4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -40,6 +40,7 @@
 		"@types/markdown-it-emoji": "^3.0.1",
 		"@types/node": "^24.13.3",
 		"@types/sanitize-html": "^2.16.1",
+		"@types/textarea-caret": "^3.0.4",
 		"@vitest/browser-playwright": "4.1.10",
 		"@vitest/coverage-v8": "4.1.10",
 		"eslint": "^10.7.0",
@@ -87,6 +88,7 @@
 		"markdown-it-emoji": "^3.1.0",
 		"sanitize-html": "^2.17.6",
 		"tailwind-merge": "^3.6.0",
-		"tailwind-variants": "^3.2.2"
+		"tailwind-variants": "^3.2.2",
+		"textarea-caret": "^3.1.0"
 	}
 }
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index b04268c44..2a7f448b7 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -78,6 +78,9 @@ importers:
       tailwind-variants:
         specifier: ^3.2.2
         version: 3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.2)
+      textarea-caret:
+        specifier: ^3.1.0
+        version: 3.1.0
     devDependencies:
       '@atcute/lex-cli':
         specifier: 3.2.1
@@ -133,6 +136,9 @@ importers:
       '@types/sanitize-html':
         specifier: ^2.16.1
         version: 2.16.1
+      '@types/textarea-caret':
+        specifier: ^3.0.4
+        version: 3.0.4
       '@vitest/browser-playwright':
         specifier: 4.1.10
         version: 4.1.10(playwright@1.61.1)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.10)
@@ -1861,6 +1867,9 @@ packages:
   '@types/sanitize-html@2.16.1':
     resolution: {integrity: sha512-n9wjs8bCOTyN/ynwD8s/nTcTreIHB1vf31vhLMGqUPNHaweKC4/fAl4Dj+hUlCTKYgm4P3k83fmiFfzkZ6sgMA==}
 
+  '@types/textarea-caret@3.0.4':
+    resolution: {integrity: sha512-epJGYB37/sNrTDbhfyRjHkXsQSAcO6zby0JBDS0QMt6HQ1f1W2E4YpSc7TQkNmWaWmYXv92zOIfN5PHA8CmThg==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -3280,6 +3289,9 @@ packages:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
+  textarea-caret@3.1.0:
+    resolution: {integrity: sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -5046,6 +5058,8 @@ snapshots:
     dependencies:
       htmlparser2: 10.1.0
 
+  '@types/textarea-caret@3.0.4': {}
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/unist@3.0.3': {}
@@ -6526,6 +6540,8 @@ snapshots:
 
   tapable@2.3.3: {}
 
+  textarea-caret@3.1.0: {}
+
   tiny-invariant@1.3.3: {}
 
   tinybench@2.9.0: {}
diff --git a/web/src/lib/api/records.ts b/web/src/lib/api/records.ts
index 93a74690d..b717ea391 100644
--- a/web/src/lib/api/records.ts
+++ b/web/src/lib/api/records.ts
@@ -89,6 +89,21 @@ export interface PullListPage {
 	items: PullListItem[];
 }
 
+export interface ListPullsFilter {
+	status?: PullState;
+	author?: string;
+	limit?: number;
+	cursor?: string;
+	order?: "asc" | "desc";
+}
+
+export const listPulls = (
+	ctx: BobbinContext,
+	subject: string,
+	filter: ListPullsFilter = {},
+	init?: XrpcRequestInit
+) => jsonGet<PullListPage>(ctx, "sh.tangled.repo.listPulls", { subject, ...filter }, init);
+
 export const getRepos = (ctx: BobbinContext, repos: readonly string[], init?: XrpcRequestInit) =>
 	jsonGet<RecordList<RepoRecord>>(ctx, "sh.tangled.repo.getRepos", { repos }, init);
 
diff --git a/web/src/lib/components/comment/CommentEditor.svelte b/web/src/lib/components/comment/CommentEditor.svelte
index 1c7ad6cea..07a81e24e 100644
--- a/web/src/lib/components/comment/CommentEditor.svelte
+++ b/web/src/lib/components/comment/CommentEditor.svelte
@@ -80,7 +80,7 @@
 	);
 
 	let body = $state(untrack(() => initialBody));
-	let tab = $state<"write" | "preview">("write");
+	let preview = $state(false);
 
 	const publish = createAction(async (event: SubmitEvent) => {
 		event.preventDefault();
@@ -130,7 +130,7 @@
 		// keep the prefilled body when editing; reset when composing a fresh comment
 		if (!rkey) {
 			body = "";
-			tab = "write";
+			preview = false;
 		}
 	});
 	const canSubmit = $derived(body.trim() !== "" && !publish.loading);
@@ -145,7 +145,7 @@
 		{autofocus}
 		transparent
 		bind:value={body}
-		bind:tab
+		bind:preview
 		disabled={publish.loading}
 	/>
 
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
index e30123f87..611fba5e3 100644
--- a/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
@@ -32,7 +32,7 @@
 	}: Props = $props();
 
 	let body = $state(untrack(() => initialBody));
-	let tab = $state<"write" | "preview">("write");
+	let preview = $state(false);
 
 	const publish = createAction(async (event: SubmitEvent) => {
 		event.preventDefault();
@@ -51,7 +51,7 @@
 		{markup}
 		transparent
 		bind:value={body}
-		bind:tab
+		bind:preview
 		disabled={publish.loading}
 	/>
 
diff --git a/web/src/lib/components/repo/tickets/TicketStatePill.svelte b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
index dac748226..fc806944b 100644
--- a/web/src/lib/components/repo/tickets/TicketStatePill.svelte
+++ b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
@@ -35,7 +35,7 @@
 	export type StatePillVariants = VariantProps<typeof statePill>;
 	export type TicketState = NonNullable<StatePillVariants["state"]>;
 
-	const ICONS = {
+	export const TICKET_STATE_ICONS = {
 		issue: {
 			open: CircleDot,
 			closed: CircleX,
@@ -66,7 +66,7 @@
 	let { isPull = false, state = "open", class: className, size }: Props = $props();
 
 	const kind = $derived(isPull ? "pull" : "issue");
-	const Icon = $derived(ICONS[kind][state]);
+	const Icon = $derived(TICKET_STATE_ICONS[kind][state]);
 	const label = $derived(LABELS[state]);
 	const style = $derived(statePill({ state, size }));
 </script>
diff --git a/web/src/lib/components/ui/MarkdownEditor.stories.svelte b/web/src/lib/components/ui/MarkdownEditor.stories.svelte
index 74b38a276..052a00ad5 100644
--- a/web/src/lib/components/ui/MarkdownEditor.stories.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.stories.svelte
@@ -1,6 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
 	import MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte";
+	import { editorLine, scrollEditorToLine } from "$lib/components/ui/markdownScroll";
 
 	const { Story } = defineMeta({
 		title: "UI/MarkdownEditor",
@@ -8,16 +10,91 @@
 		tags: ["autodocs"],
 		args: {
 			markup: { repo: "tangled.org/core", ref: "main", host: "tangled.org" },
-			placeholder: "Write some **markdown**. Switch to Preview to render it.",
+			placeholder: "Describe your issue. Markdown is supported.",
 			rows: 8
 		}
 	});
+
+	const sections = Array.from(
+		{ length: 60 },
+		(_, index) => `## Section ${index}\n\nParagraph ${index}.\n`
+	).join("\n");
+
+	const offsetIn = (pane: HTMLElement, element: Element) =>
+		element.getBoundingClientRect().top - pane.getBoundingClientRect().top;
+
+	const content = "## Hello\n\nThis is a `MarkdownEditor` with some **content**.\n\n- one\n- two";
 </script>
 
 <Story name="Empty" />
+<Story name="With content" args={{ value: content }} />
+<Story name="Preview" args={{ value: content, preview: true }} />
+<Story name="Disabled" args={{ value: content, disabled: true }} />
+<Story
+	name="Formatting"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const textarea = canvas.getByPlaceholderText<HTMLTextAreaElement>(/describe your issue/i);
+		await userEvent.type(textarea, "hello");
+		textarea.setSelectionRange(0, 5);
+		await userEvent.click(canvas.getByRole("button", { name: "Bold" }));
+		await expect(textarea).toHaveValue("**hello**");
+		await userEvent.keyboard("{Control>}i{/Control}");
+		await expect(textarea).toHaveValue("**_hello_**");
+	}}
+/>
 <Story
-	name="With content"
-	args={{
-		value: "## Hello\n\nThis is a `MarkdownEditor` with some **content**.\n\n- one\n- two"
+	name="Preview keeps height"
+	args={{ value: `${content}\n\n${"More text.\n\n".repeat(40)}` }}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const textarea = canvas.getByPlaceholderText<HTMLTextAreaElement>(/describe your issue/i);
+		textarea.style.height = "240px";
+		const field = textarea.parentElement!;
+		const height = field.offsetHeight;
+		const toggle = canvas.getByRole("switch", { name: "Preview" });
+		await userEvent.click(toggle);
+		await expect(textarea).not.toBeVisible();
+		const pane = field.nextElementSibling as HTMLElement;
+		await expect(pane.offsetHeight).toBe(height);
+		await expect(field.parentElement!.offsetHeight).toBe(height);
+		await waitFor(() => expect(pane.scrollHeight).toBeGreaterThan(pane.clientHeight));
+		await userEvent.click(toggle);
+		await expect(textarea).toBeVisible();
+		await expect(field.offsetHeight).toBe(height);
+	}}
+/>
+<Story
+	name="Preview keeps scroll position"
+	args={{ value: sections }}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const textarea = canvas.getByPlaceholderText<HTMLTextAreaElement>(/describe your issue/i);
+		const toggle = canvas.getByRole("switch", { name: "Preview" });
+		scrollEditorToLine(textarea, 80);
+		const editorScroll = textarea.scrollTop;
+
+		const paneOf = () => textarea.parentElement!.nextElementSibling as HTMLElement;
+		await userEvent.click(toggle);
+		const pane = paneOf();
+		await waitFor(() => expect(pane.querySelector('[data-line="80"]')).not.toBeNull());
+		await waitFor(() =>
+			expect(Math.abs(offsetIn(pane, pane.querySelector('[data-line="80"]')!))).toBeLessThan(
+				24
+			)
+		);
+		await userEvent.click(toggle);
+		await expect(textarea.scrollTop).toBe(editorScroll);
+
+		await userEvent.click(toggle);
+		const again = paneOf();
+		await waitFor(() =>
+			expect(
+				Math.abs(offsetIn(again, again.querySelector('[data-line="80"]')!))
+			).toBeLessThan(24)
+		);
+		again.scrollTop += offsetIn(again, again.querySelector('[data-line="160"]')!);
+		await userEvent.click(toggle);
+		await expect(Math.abs(editorLine(textarea) - 160)).toBeLessThan(1);
 	}}
 />
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index 20bd5827c..aa68d988a 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -1,33 +1,105 @@
 <script lang="ts">
-	import type { KeyboardEventHandler } from "svelte/elements";
+	import { onMount, untrack, type Component } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import type { KeyboardEventHandler, SvelteHTMLElements } from "svelte/elements";
+	import Bold from "$icon/bold";
+	import ChevronDown from "$icon/chevron-down";
+	import Code from "$icon/code";
 	import Eye from "$icon/eye";
-	import Pencil from "$icon/pencil";
+	import ImageUp from "$icon/image-up";
+	import Italic from "$icon/italic";
+	import Link from "$icon/link";
+	import List from "$icon/list";
+	import ListOrdered from "$icon/list-ordered";
+	import ListTodo from "$icon/list-todo";
+	import SeparatorHorizontal from "$icon/separator-horizontal";
+	import SquareCode from "$icon/square-code";
+	import Strikethrough from "$icon/strikethrough";
+	import Table from "$icon/table";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import MarkdownTypeahead from "$lib/components/ui/MarkdownTypeahead.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
-	import Textarea, { textareaMinHeight } from "$lib/components/ui/Textarea.svelte";
+	import Textarea from "$lib/components/ui/Textarea.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import Tooltip from "$lib/components/ui/Tooltip.svelte";
+	import {
+		applyEdit,
+		code,
+		codeBlock,
+		image,
+		link,
+		list,
+		separator,
+		table,
+		wrap,
+		type Edit,
+		type ListKind,
+		type Selection
+	} from "$lib/components/ui/markdownFormat";
+	import {
+		editorLine,
+		previewLine,
+		scrollEditorToLine,
+		scrollPreviewToLine
+	} from "$lib/components/ui/markdownScroll";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
 	import { enhanceCodeblocks } from "$lib/markup/highlight";
 
+	interface Tool {
+		label: string;
+		icon: Component<SvelteHTMLElements["svg"]>;
+		format: (selection: Selection) => Edit;
+		key?: string;
+		shift?: boolean;
+	}
+
+	const INLINE_TOOLS: Tool[] = [
+		{ label: "Bold", icon: Bold, key: "b", format: (s) => wrap(s, "**") },
+		{ label: "Italic", icon: Italic, key: "i", format: (s) => wrap(s, "_") },
+		{
+			label: "Strikethrough",
+			icon: Strikethrough,
+			key: "x",
+			shift: true,
+			format: (s) => wrap(s, "~~")
+		},
+		{ label: "Code", icon: Code, key: "e", format: code },
+		{ label: "Link", icon: Link, key: "k", format: link },
+		{ label: "Image", icon: ImageUp, format: image }
+	];
+
+	const BLOCK_TOOLS: Tool[] = [
+		{ label: "Code block", icon: SquareCode, format: codeBlock },
+		{ label: "Table", icon: Table, format: table },
+		{ label: "Separator", icon: SeparatorHorizontal, format: separator }
+	];
+
+	const LISTS: { kind: ListKind; label: string; icon: Tool["icon"] }[] = [
+		{ kind: "bullet", label: "Bulleted list", icon: List },
+		{ kind: "ordered", label: "Numbered list", icon: ListOrdered },
+		{ kind: "task", label: "Task list", icon: ListTodo }
+	];
+
 	interface Props {
 		value?: string;
 		markup: MarkupContext;
-		tab?: "write" | "preview";
+		preview?: boolean;
 		id?: string;
 		name?: string;
 		rows?: number;
 		placeholder?: string;
 		disabled?: boolean;
 		autofocus?: boolean;
-		// drop the textarea/preview background so the editor blends into its surroundings
 		transparent?: boolean;
 	}
 
 	let {
 		value = $bindable(""),
 		markup,
-		tab = $bindable("write"),
+		preview = $bindable(false),
 		id,
 		name,
 		rows = 12,
@@ -37,59 +109,164 @@
 		transparent = false
 	}: Props = $props();
 
+	const uid = $props.id();
+	const textareaId = $derived(id ?? `${uid}-textarea`);
+	const previewId = `${uid}-preview`;
+	const listId = `${uid}-suggestions`;
 	const surface = $derived(transparent ? "bg-transparent" : "bg-background-default");
-	const pane = `rounded border border-border-default px-2.5 py-xs ${textareaMinHeight}`;
 
-	let preview = $state<Promise<string> | null>(null);
 	let textareaEl = $state<HTMLTextAreaElement>();
+	let typeahead = $state<ReturnType<typeof MarkdownTypeahead>>();
+	let pane = $state<HTMLElement>();
+	let entryLine = 0;
+	let alignedScroll = 0;
+	let previewScrollLine: number | null = null;
+	let modifier = $state("Ctrl+");
+
+	onMount(() => {
+		if (/Mac|iPhone|iPad/.test(navigator.platform)) modifier = "⌘";
+	});
 
-	// focus on mount (and when returning to the write tab) if requested
 	$effect(() => {
 		if (autofocus) textareaEl?.focus();
 	});
 
-	$effect(() => {
-		if (tab !== "preview") {
-			preview = null;
-			return;
-		}
-		const source = value;
-		if (!source.trim()) {
-			preview = null;
+	const rendered = $derived(
+		preview && value.trim()
+			? renderMarkup(value, { ...markup, sourceLines: true }).then((html) => html ?? "")
+			: null
+	);
+
+	const shortcut = (tool: Tool) =>
+		tool.key ? `${modifier}${tool.shift ? "Shift+" : ""}${tool.key.toUpperCase()}` : undefined;
+
+	const apply = (format: (selection: Selection) => Edit) => {
+		if (!textareaEl) return;
+		const { value: text, selectionStart: start, selectionEnd: end } = textareaEl;
+		applyEdit(textareaEl, format({ value: text, start, end }));
+	};
+
+	const handleKeydown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
+		if (typeahead?.keydown(event)) return;
+		if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			event.currentTarget.form?.requestSubmit();
 			return;
 		}
-		preview = renderMarkup(source, markup).then((html) => html ?? "");
+		const key = event.key.toLowerCase();
+		const tool = INLINE_TOOLS.find((t) => t.key === key && !!t.shift === event.shiftKey);
+		if (!tool) return;
+		event.preventDefault();
+		apply(tool.format);
+	};
+
+	let previewShown = untrack(() => preview);
+
+	$effect.pre(() => {
+		const shown = preview;
+		untrack(() => {
+			if (shown === previewShown) return;
+			previewShown = shown;
+			typeahead?.close();
+			if (!textareaEl) return;
+			if (shown) {
+				entryLine = editorLine(textareaEl);
+				alignedScroll = 0;
+				previewScrollLine = null;
+			} else if (previewScrollLine !== null) {
+				scrollEditorToLine(textareaEl, previewScrollLine);
+			}
+		});
 	});
-	// ctrl/cmd+enter submits the enclosing form, mirroring the old htmx editor
-	const handleKeydown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
-		if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-			e.preventDefault();
-			e.currentTarget.form?.requestSubmit();
-		}
+
+	const alignPreview: Attachment<HTMLElement> = () => {
+		untrack(() => {
+			if (!pane) return;
+			scrollPreviewToLine(pane, value, entryLine);
+			alignedScroll = pane.scrollTop;
+		});
+	};
+
+	const handlePreviewScroll = () => {
+		if (!pane) return;
+		previewScrollLine = pane.scrollTop === alignedScroll ? null : previewLine(pane, value);
+	};
+
+	const handleKeyup = (event: KeyboardEvent) => {
+		if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) typeahead?.refresh();
 	};
 </script>
 
-<div class="flex flex-col gap-1.5">
-	<ButtonGroup class="self-start">
-		<Button
-			icon={Pencil}
-			{...segmentProps(tab === "write")}
-			onclick={() => (tab = "write")}
-		>
-			Write
-		</Button>
+{#snippet toolButton(tool: Tool)}
+	{@const hint = shortcut(tool)}
+	<Tooltip content={hint ? `${tool.label} (${hint})` : tool.label}>
 		<Button
-			icon={Eye}
-			{...segmentProps(tab === "preview")}
-			onclick={() => (tab = "preview")}
+			variant="ghost"
+			size="mini"
+			icon={tool.icon}
+			aria-label={tool.label}
+			aria-keyshortcuts={hint}
+			disabled={disabled || preview}
+			onclick={() => apply(tool.format)}
+		/>
+	</Tooltip>
+{/snippet}
+
+<div
+	class={[
+		"flex flex-col overflow-hidden rounded-sm border transition-colors",
+		surface,
+		disabled
+			? "cursor-not-allowed border-border-disabled"
+			: "border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong"
+	]}
+>
+	<div
+		class="flex items-center justify-between gap-md border-b border-border-default bg-background-subtle p-2xs"
+	>
+		<div
+			role="toolbar"
+			aria-label="Formatting"
+			aria-controls={textareaId}
+			class="flex min-w-0 flex-wrap items-center gap-xs"
 		>
-			Preview
-		</Button>
-	</ButtonGroup>
+			{#each INLINE_TOOLS as tool (tool.label)}
+				{@render toolButton(tool)}
+			{/each}
+			<Dropdown
+				variant="button"
+				buttonVariant="ghost"
+				size="mini"
+				label="List"
+				disabled={disabled || preview}
+			>
+				{#snippet trigger()}
+					<List class="size-3 shrink-0" aria-hidden="true" />
+					<ChevronDown class="size-3 shrink-0" aria-hidden="true" />
+				{/snippet}
+				{#each LISTS as item (item.kind)}
+					<DropdownItem icon={item.icon} onclick={() => apply((s) => list(s, item.kind))}>
+						{item.label}
+					</DropdownItem>
+				{/each}
+			</Dropdown>
+			{#each BLOCK_TOOLS as tool (tool.label)}
+				{@render toolButton(tool)}
+			{/each}
+		</div>
+		<div class="flex shrink-0 items-center gap-xs px-xs">
+			<label for={previewId} class="flex items-center gap-1.5 typography-paragraph-regular">
+				<Eye class="size-3.5 shrink-0" aria-hidden="true" />
+				Preview
+			</label>
+			<Toggle id={previewId} bind:checked={preview} {disabled} />
+		</div>
+	</div>
 
-	{#if tab === "write"}
+	<div class="relative flex flex-col">
 		<Textarea
-			{id}
+			id={textareaId}
 			{name}
 			{rows}
 			resizeable
@@ -97,38 +274,61 @@
 			bind:value
 			bind:element={textareaEl}
 			{disabled}
+			aria-autocomplete="list"
+			aria-controls={listId}
+			aria-activedescendant={typeahead?.activeDescendant()}
 			onkeydown={handleKeydown}
-			class={transparent ? "bg-transparent" : undefined}
+			onkeyup={handleKeyup}
+			oninput={() => typeahead?.refresh()}
+			onclick={() => typeahead?.refresh()}
+			onscroll={() => typeahead?.refresh()}
+			onblur={() => typeahead?.close()}
+			class={preview
+				? "invisible rounded-none border-0 bg-transparent focus-within:ring-0"
+				: "rounded-none border-0 bg-transparent focus-within:ring-0"}
 		/>
-	{:else}
-		<Pending>
-			{#snippet skeleton()}
-				<div
-					class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}
-				>
-					Rendering…
-				</div>
-			{/snippet}
-			{#snippet failed()}
-				<div
-					class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}
-				>
-					Could not render preview.
-				</div>
-			{/snippet}
-			{@const html = await preview}
-			{#if html}
-				<div class={`markup ${pane} ${surface}`} use:enhanceCodeblocks={html}>
-					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-					{@html html}
-				</div>
-			{:else}
-				<EmptyState
-					size="inline"
-					message="Nothing to preview."
-					class={`justify-center italic ${pane} ${surface}`}
-				/>
-			{/if}
-		</Pending>
-	{/if}
+		{#if preview}
+			<div
+				bind:this={pane}
+				onscroll={handlePreviewScroll}
+				class="absolute inset-0 flex flex-col overflow-y-auto"
+			>
+				<Pending>
+					{#snippet skeleton()}
+						<div
+							class="px-2.5 py-xs typography-paragraph-small text-foreground-subtle italic"
+						>
+							Rendering…
+						</div>
+					{/snippet}
+					{#snippet failed()}
+						<div
+							class="px-2.5 py-xs typography-paragraph-small text-foreground-subtle italic"
+						>
+							Could not render preview.
+						</div>
+					{/snippet}
+					{@const html = await rendered}
+					{#if html}
+						<div
+							class="markup px-2.5 py-xs"
+							use:enhanceCodeblocks={html}
+							{@attach alignPreview}
+						>
+							<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+							{@html html}
+						</div>
+					{:else}
+						<EmptyState
+							size="inline"
+							message="Nothing to preview."
+							class="flex-1 justify-center italic"
+						/>
+					{/if}
+				</Pending>
+			</div>
+		{/if}
+	</div>
 </div>
+
+<MarkdownTypeahead bind:this={typeahead} textarea={textareaEl} {listId} />
diff --git a/web/src/lib/components/ui/MarkdownTypeahead.svelte b/web/src/lib/components/ui/MarkdownTypeahead.svelte
new file mode 100644
index 000000000..627c46e07
--- /dev/null
+++ b/web/src/lib/components/ui/MarkdownTypeahead.svelte
@@ -0,0 +1,268 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import getCaretCoordinates from "textarea-caret";
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+	import { createBobbinClient } from "$lib/api/client";
+	import type { RepoInfo } from "$lib/components/repo/types";
+	import { TICKET_STATE_ICONS } from "$lib/components/repo/tickets/TicketStatePill.svelte";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import { tagInput } from "$lib/components/ui/TagInput.svelte";
+	import { applyEdit, findTrigger, type Trigger } from "$lib/components/ui/markdownFormat";
+	import {
+		filterTickets,
+		loadTickets,
+		suggestUsers,
+		type Suggestion,
+		type TicketSuggestion
+	} from "$lib/components/ui/markdownSuggestions";
+
+	const VIEWPORT_INSET = 8;
+	const PANEL_GAP = 4;
+	const SEARCH_DELAY = 150;
+
+	interface Props {
+		textarea?: HTMLTextAreaElement;
+		listId: string;
+	}
+
+	let { textarea, listId }: Props = $props();
+
+	const bobbinUrl = $derived(page.data.publicConfig?.bobbinUrl as string | undefined);
+	const bobbin = $derived(bobbinUrl ? createBobbinClient({ serviceUrl: bobbinUrl }) : undefined);
+	const repo = $derived(page.data.repo as Promise<RepoInfo> | RepoInfo | undefined);
+	const slots = tagInput({ size: "regular" });
+
+	let trigger = $state<Trigger | null>(null);
+	let items = $state<Suggestion[]>([]);
+	let status = $state<"loading" | "ready" | "failed">("ready");
+	let activeIndex = $state(0);
+	let position = $state<{ left: number; top?: number; bottom?: number }>({ left: 0 });
+	let panelEl = $state<HTMLElement>();
+	let dismissedAt = -1;
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let request: AbortController | undefined;
+	let tickets: Promise<TicketSuggestion[]> | undefined;
+
+	const open = $derived(
+		trigger !== null && (items.length > 0 || status !== "ready" || trigger.query !== "")
+	);
+
+	const cancel = () => {
+		if (timer !== undefined) clearTimeout(timer);
+		request?.abort();
+	};
+
+	export const close = () => {
+		cancel();
+		trigger = null;
+		items = [];
+		status = "ready";
+	};
+
+	const ticketList = () => {
+		tickets ??= Promise.resolve(repo).then((info) => {
+			if (!info?.repoDid || !bobbin) return [];
+			const url = `${page.url.origin}${resolve(`/${info.ownerHandle}/${info.name}` as "/")}`;
+			return loadTickets(bobbin, { did: info.repoDid, url });
+		});
+		tickets.catch(() => {
+			tickets = undefined;
+		});
+		return tickets;
+	};
+
+	const settle = async (controller: AbortController, pending: Promise<Suggestion[]>) => {
+		try {
+			const result = await pending;
+			if (controller.signal.aborted) return;
+			items = result;
+			status = "ready";
+		} catch {
+			if (controller.signal.aborted) return;
+			items = [];
+			status = "failed";
+		}
+	};
+
+	const search = (next: Trigger) => {
+		cancel();
+		const controller = new AbortController();
+		request = controller;
+		activeIndex = 0;
+		if (next.char === "#") {
+			status = "loading";
+			void settle(
+				controller,
+				ticketList().then((all) => filterTickets(all, next.query))
+			);
+			return;
+		}
+		if (next.query === "" || !bobbin) {
+			items = [];
+			status = "ready";
+			return;
+		}
+		const ctx = bobbin;
+		status = "loading";
+		timer = setTimeout(
+			() => void settle(controller, suggestUsers(ctx, next.query, controller.signal)),
+			SEARCH_DELAY
+		);
+	};
+
+	const place = (next: Trigger) => {
+		if (!textarea) return;
+		const caret = getCaretCoordinates(textarea, next.from);
+		const rect = textarea.getBoundingClientRect();
+		const caretTop = rect.top + caret.top - textarea.scrollTop;
+		const caretBottom = caretTop + caret.height;
+		const viewport = document.documentElement;
+		const panelHeight = panelEl?.offsetHeight ?? 0;
+		const panelWidth = panelEl?.offsetWidth ?? 0;
+		const left = Math.max(
+			VIEWPORT_INSET,
+			Math.min(
+				rect.left + caret.left - textarea.scrollLeft,
+				viewport.clientWidth - panelWidth - VIEWPORT_INSET
+			)
+		);
+		const fitsBelow = caretBottom + PANEL_GAP + panelHeight <= viewport.clientHeight;
+		position =
+			fitsBelow || caretTop < viewport.clientHeight - caretBottom
+				? { left, top: caretBottom + PANEL_GAP }
+				: { left, bottom: viewport.clientHeight - caretTop + PANEL_GAP };
+	};
+
+	export const refresh = () => {
+		const next =
+			textarea && textarea.selectionStart === textarea.selectionEnd
+				? findTrigger(textarea.value, textarea.selectionStart)
+				: null;
+		const available = next && (next.char === "#" ? repo !== undefined : bobbin !== undefined);
+		if (!next || !available || next.from === dismissedAt) {
+			if (!next || next.from !== dismissedAt) dismissedAt = -1;
+			if (trigger) close();
+			return;
+		}
+		const changed = trigger?.char !== next.char || trigger.query !== next.query;
+		trigger = next;
+		if (changed) search(next);
+		place(next);
+	};
+
+	const select = (item: Suggestion) => {
+		if (!textarea || !trigger) return;
+		const caret = trigger.from + item.insert.length;
+		applyEdit(textarea, {
+			from: trigger.from,
+			to: trigger.to,
+			insert: item.insert,
+			selectionStart: caret,
+			selectionEnd: caret
+		});
+		close();
+	};
+
+	export const activeDescendant = () =>
+		open && items[activeIndex] ? `${listId}-${activeIndex}` : undefined;
+
+	export const keydown = (event: KeyboardEvent): boolean => {
+		if (!open || !trigger) return false;
+		switch (event.key) {
+			case "ArrowDown":
+				if (items.length === 0) return false;
+				activeIndex = (activeIndex + 1) % items.length;
+				break;
+			case "ArrowUp":
+				if (items.length === 0) return false;
+				activeIndex = (activeIndex - 1 + items.length) % items.length;
+				break;
+			case "Enter":
+			case "Tab": {
+				const item = items[activeIndex];
+				if (!item) return false;
+				select(item);
+				break;
+			}
+			case "Escape":
+				event.stopPropagation();
+				dismissedAt = trigger.from;
+				close();
+				break;
+			default:
+				return false;
+		}
+		event.preventDefault();
+		return true;
+	};
+
+	$effect(() => {
+		const panel = panelEl;
+		if (!panel) return;
+		const shown = panel.matches(":popover-open");
+		if (open && !shown) panel.showPopover();
+		else if (!open && shown) panel.hidePopover();
+	});
+
+	$effect(() => {
+		if (!open || !trigger) return;
+		void items.length;
+		const current = trigger;
+		place(current);
+		const reposition = () => place(current);
+		window.addEventListener("scroll", reposition, true);
+		window.addEventListener("resize", reposition);
+		return () => {
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	});
+
+	onDestroy(cancel);
+</script>
+
+<div
+	bind:this={panelEl}
+	popover="manual"
+	style:left="{position.left}px"
+	style:top={position.top === undefined ? "auto" : `${position.top}px`}
+	style:bottom={position.bottom === undefined ? "auto" : `${position.bottom}px`}
+	class={slots.panel({ class: "typography-paragraph-regular shadow-regular dark:shadow-none" })}
+>
+	<div id={listId} role="listbox" aria-label="Suggestions" class={slots.options()}>
+		{#if items.length > 0}
+			{#each items as item, index (item.key)}
+				<button
+					id={`${listId}-${index}`}
+					type="button"
+					role="option"
+					tabindex={-1}
+					aria-selected={index === activeIndex}
+					class={slots.option()}
+					data-active={index === activeIndex || undefined}
+					onpointerdown={(event) => event.preventDefault()}
+					onpointermove={() => (activeIndex = index)}
+					onclick={() => select(item)}
+				>
+					{#if item.kind === "user"}
+						<Avatar did={item.did} handle={item.handle} size="regular" />
+						<span class={slots.optionLabel()}>{item.handle}</span>
+					{:else}
+						{@const Icon =
+							TICKET_STATE_ICONS[item.isPull ? "pull" : "issue"][item.state]}
+						<Icon class="size-3.5 shrink-0" aria-hidden="true" />
+						<span class={slots.optionLabel()}>{item.title}</span>
+						<span class="shrink-0 text-foreground-muted">#{item.rkey}</span>
+					{/if}
+				</button>
+			{/each}
+		{:else if status === "loading"}
+			<p class={slots.empty()}>Searching…</p>
+		{:else if status === "failed"}
+			<p class={slots.empty()}>Couldn’t load suggestions</p>
+		{:else}
+			<p class={slots.empty()}>No matches</p>
+		{/if}
+	</div>
+</div>
diff --git a/web/src/lib/components/ui/markdownFormat.test.ts b/web/src/lib/components/ui/markdownFormat.test.ts
new file mode 100644
index 000000000..38a742cf6
--- /dev/null
+++ b/web/src/lib/components/ui/markdownFormat.test.ts
@@ -0,0 +1,133 @@
+import { describe, expect, it } from "vitest";
+import {
+	code,
+	codeBlock,
+	findTrigger,
+	link,
+	list,
+	separator,
+	table,
+	wrap,
+	type Edit,
+	type Selection
+} from "$lib/components/ui/markdownFormat";
+
+const select = (marked: string): Selection => {
+	const start = marked.indexOf("«");
+	const end = marked.indexOf("»") - 1;
+	return { value: marked.replace("«", "").replace("»", ""), start, end };
+};
+
+const result = ({ value }: Selection, edit: Edit) => {
+	const next = value.slice(0, edit.from) + edit.insert + value.slice(edit.to);
+	return `${next.slice(0, edit.selectionStart)}«${next.slice(edit.selectionStart, edit.selectionEnd)}»${next.slice(edit.selectionEnd)}`;
+};
+
+const run = (marked: string, format: (selection: Selection) => Edit) => {
+	const selection = select(marked);
+	return result(selection, format(selection));
+};
+
+describe("wrap", () => {
+	it("wraps the selection and keeps it selected", () => {
+		expect(run("say «hello» there", (s) => wrap(s, "**"))).toBe("say **«hello»** there");
+	});
+
+	it("places the caret between the markers when nothing is selected", () => {
+		expect(run("say «»", (s) => wrap(s, "_"))).toBe("say _«»_");
+	});
+
+	it("unwraps when the markers surround the selection", () => {
+		expect(run("say **«hello»** there", (s) => wrap(s, "**"))).toBe("say «hello» there");
+	});
+
+	it("unwraps when the selection includes the markers", () => {
+		expect(run("say «~~hello~~» there", (s) => wrap(s, "~~"))).toBe("say «hello» there");
+	});
+});
+
+describe("code", () => {
+	it("uses backticks for a single line", () => {
+		expect(run("run «make» now", code)).toBe("run `«make»` now");
+	});
+
+	it("uses a fence for several lines", () => {
+		expect(run("«a\nb»", code)).toBe("```\n«a\nb»\n```");
+	});
+});
+
+describe("codeBlock", () => {
+	it("pads the fence with blank lines", () => {
+		expect(run("intro\n«x»\noutro", codeBlock)).toBe("intro\n\n```\n«x»\n```\n\noutro");
+	});
+});
+
+describe("link", () => {
+	it("selects the url placeholder around selected text", () => {
+		expect(run("see «docs»", link)).toBe("see [docs](«url»)");
+	});
+
+	it("puts a selected url in the destination", () => {
+		expect(run("«https://tangled.org»", link)).toBe("[«»](https://tangled.org)");
+	});
+});
+
+describe("separator", () => {
+	it("inserts a rule after the selection on its own paragraph", () => {
+		expect(run("para«»", separator)).toBe("para\n\n---«»");
+	});
+
+	it("keeps following text a paragraph away", () => {
+		expect(run("one«»\ntwo", separator)).toBe("one\n\n---«»\n\ntwo");
+	});
+});
+
+describe("table", () => {
+	it("selects the first header cell", () => {
+		expect(run("«»", table)).toBe(
+			"| «Column» | Column |\n| ------ | ------ |\n| Cell   | Cell   |"
+		);
+	});
+});
+
+describe("list", () => {
+	it("prefixes every selected line", () => {
+		expect(run("«one\ntwo»", (s) => list(s, "ordered"))).toBe("«1. one\n2. two»");
+	});
+
+	it("removes the prefix when every line already has it", () => {
+		expect(run("«- [ ] one\n- [ ] two»", (s) => list(s, "task"))).toBe("«one\ntwo»");
+	});
+
+	it("keeps the caret on the same text for a single line", () => {
+		expect(run("item«»", (s) => list(s, "bullet"))).toBe("- item«»");
+	});
+
+	it("does not treat a task item as a bullet", () => {
+		expect(run("«- [ ] one»", (s) => list(s, "bullet"))).toBe("- «- [ ] one»");
+	});
+});
+
+describe("findTrigger", () => {
+	it("finds a mention being typed", () => {
+		expect(findTrigger("hi @ada.te", 10)).toEqual({
+			char: "@",
+			query: "ada.te",
+			from: 3,
+			to: 10
+		});
+	});
+
+	it("finds a reference at the start of a line", () => {
+		expect(findTrigger("one\n#12", 7)).toEqual({ char: "#", query: "12", from: 4, to: 7 });
+	});
+
+	it("ignores markers glued to other text", () => {
+		expect(findTrigger("mail@ada", 8)).toBeNull();
+		expect(findTrigger("##", 2)).toBeNull();
+	});
+
+	it("stops at whitespace", () => {
+		expect(findTrigger("# heading", 9)).toBeNull();
+	});
+});
diff --git a/web/src/lib/components/ui/markdownFormat.ts b/web/src/lib/components/ui/markdownFormat.ts
new file mode 100644
index 000000000..33b3d09c4
--- /dev/null
+++ b/web/src/lib/components/ui/markdownFormat.ts
@@ -0,0 +1,203 @@
+export interface Selection {
+	value: string;
+	start: number;
+	end: number;
+}
+
+export interface Edit {
+	from: number;
+	to: number;
+	insert: string;
+	selectionStart: number;
+	selectionEnd: number;
+}
+
+export type ListKind = "bullet" | "ordered" | "task";
+
+const URL_PATTERN = /^https?:\/\/\S+$/;
+
+export const wrap = ({ value, start, end }: Selection, marker: string): Edit => {
+	const selected = value.slice(start, end);
+	const before = value.slice(start - marker.length, start);
+	const after = value.slice(end, end + marker.length);
+	if (before === marker && after === marker) {
+		return {
+			from: start - marker.length,
+			to: end + marker.length,
+			insert: selected,
+			selectionStart: start - marker.length,
+			selectionEnd: end - marker.length
+		};
+	}
+	if (
+		selected.length >= marker.length * 2 &&
+		selected.startsWith(marker) &&
+		selected.endsWith(marker)
+	) {
+		const inner = selected.slice(marker.length, -marker.length);
+		return {
+			from: start,
+			to: end,
+			insert: inner,
+			selectionStart: start,
+			selectionEnd: start + inner.length
+		};
+	}
+	return {
+		from: start,
+		to: end,
+		insert: `${marker}${selected}${marker}`,
+		selectionStart: start + marker.length,
+		selectionEnd: end + marker.length
+	};
+};
+
+const blockPadding = (value: string, from: number, to: number) => {
+	const before = value.slice(0, from);
+	const after = value.slice(to);
+	const leading =
+		before === "" || before.endsWith("\n\n") ? "" : before.endsWith("\n") ? "\n" : "\n\n";
+	const trailing =
+		after === "" || after.startsWith("\n\n") ? "" : after.startsWith("\n") ? "\n" : "\n\n";
+	return { leading, trailing };
+};
+
+const insertBlock = (
+	{ value, start, end }: Selection,
+	block: string,
+	select: [number, number]
+): Edit => {
+	const { leading, trailing } = blockPadding(value, start, end);
+	const offset = start + leading.length;
+	return {
+		from: start,
+		to: end,
+		insert: `${leading}${block}${trailing}`,
+		selectionStart: offset + select[0],
+		selectionEnd: offset + select[1]
+	};
+};
+
+export const code = (selection: Selection): Edit =>
+	selection.value.slice(selection.start, selection.end).includes("\n")
+		? codeBlock(selection)
+		: wrap(selection, "`");
+
+export const codeBlock = (selection: Selection): Edit => {
+	const selected = selection.value.slice(selection.start, selection.end);
+	return insertBlock(selection, `\`\`\`\n${selected}\n\`\`\``, [4, 4 + selected.length]);
+};
+
+export const link = ({ value, start, end }: Selection): Edit => {
+	const selected = value.slice(start, end);
+	if (URL_PATTERN.test(selected)) {
+		return {
+			from: start,
+			to: end,
+			insert: `[](${selected})`,
+			selectionStart: start + 1,
+			selectionEnd: start + 1
+		};
+	}
+	const urlStart = start + selected.length + 3;
+	return {
+		from: start,
+		to: end,
+		insert: `[${selected}](url)`,
+		selectionStart: urlStart,
+		selectionEnd: urlStart + 3
+	};
+};
+
+export const image = ({ value, start, end }: Selection): Edit => {
+	const selected = value.slice(start, end);
+	const urlStart = start + selected.length + 4;
+	return {
+		from: start,
+		to: end,
+		insert: `![${selected}](url)`,
+		selectionStart: urlStart,
+		selectionEnd: urlStart + 3
+	};
+};
+
+export const separator = (selection: Selection): Edit =>
+	insertBlock({ ...selection, start: selection.end }, "---", [3, 3]);
+
+export const table = (selection: Selection): Edit =>
+	insertBlock(
+		{ ...selection, start: selection.end },
+		"| Column | Column |\n| ------ | ------ |\n| Cell   | Cell   |",
+		[2, 8]
+	);
+
+const LIST_PREFIX: Record<ListKind, (index: number) => string> = {
+	bullet: () => "- ",
+	ordered: (index) => `${index + 1}. `,
+	task: () => "- [ ] "
+};
+
+const LIST_MATCH: Record<ListKind, RegExp> = {
+	bullet: /^- (?!\[[ xX]\] )/,
+	ordered: /^\d+\. /,
+	task: /^- \[[ xX]\] /
+};
+
+export const list = ({ value, start, end }: Selection, kind: ListKind): Edit => {
+	const from = value.lastIndexOf("\n", start - 1) + 1;
+	const lineEnd = value.indexOf("\n", end);
+	const to = lineEnd === -1 ? value.length : lineEnd;
+	const lines = value.slice(from, to).split("\n");
+	const listed = lines.every((line) => LIST_MATCH[kind].test(line));
+	const next = lines.map((line, index) =>
+		listed ? line.replace(LIST_MATCH[kind], "") : `${LIST_PREFIX[kind](index)}${line}`
+	);
+	const insert = next.join("\n");
+	if (lines.length === 1) {
+		const shift = insert.length - lines[0].length;
+		return {
+			from,
+			to,
+			insert,
+			selectionStart: Math.max(from, start + shift),
+			selectionEnd: Math.max(from, end + shift)
+		};
+	}
+	return { from, to, insert, selectionStart: from, selectionEnd: from + insert.length };
+};
+
+export interface Trigger {
+	char: "@" | "#";
+	query: string;
+	from: number;
+	to: number;
+}
+
+const TRIGGER_PATTERN = /(?:^|[\s(])([@#])([\w.-]*)$/;
+
+export const findTrigger = (value: string, caret: number): Trigger | null => {
+	const lineStart = value.lastIndexOf("\n", caret - 1) + 1;
+	const match = TRIGGER_PATTERN.exec(value.slice(lineStart, caret));
+	if (!match) return null;
+	const query = match[2];
+	return {
+		char: match[1] as Trigger["char"],
+		query,
+		from: caret - query.length - 1,
+		to: caret
+	};
+};
+
+export const applyEdit = (textarea: HTMLTextAreaElement, edit: Edit) => {
+	textarea.focus();
+	textarea.setSelectionRange(edit.from, edit.to);
+	const applied =
+		edit.insert === ""
+			? document.execCommand("delete")
+			: document.execCommand("insertText", false, edit.insert);
+	if (!applied) {
+		textarea.setRangeText(edit.insert, edit.from, edit.to, "end");
+		textarea.dispatchEvent(new Event("input", { bubbles: true }));
+	}
+	textarea.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+};
diff --git a/web/src/lib/components/ui/markdownScroll.test.ts b/web/src/lib/components/ui/markdownScroll.test.ts
new file mode 100644
index 000000000..ce232693e
--- /dev/null
+++ b/web/src/lib/components/ui/markdownScroll.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { lineForTop, monotonic, topForLine } from "$lib/components/ui/markdownScroll";
+
+const anchors = [
+	{ line: 0, top: 0 },
+	{ line: 4, top: 100 },
+	{ line: 10, top: 400 }
+];
+
+describe("topForLine", () => {
+	it("interpolates between the surrounding anchors", () => {
+		expect(topForLine(anchors, 2)).toBe(50);
+		expect(topForLine(anchors, 7)).toBe(250);
+	});
+
+	it("clamps past the last anchor", () => {
+		expect(topForLine(anchors, 20)).toBe(400);
+	});
+});
+
+describe("lineForTop", () => {
+	it("inverts topForLine", () => {
+		expect(lineForTop(anchors, 250)).toBe(7);
+		expect(lineForTop(anchors, topForLine(anchors, 3.5))).toBe(3.5);
+	});
+});
+
+describe("monotonic", () => {
+	it("drops anchors that go back in lines or position", () => {
+		expect(
+			monotonic([
+				{ line: 0, top: 0 },
+				{ line: 2, top: 40 },
+				{ line: 2, top: 60 },
+				{ line: 1, top: 80 },
+				{ line: 5, top: 30 },
+				{ line: 6, top: 90 }
+			])
+		).toEqual([
+			{ line: 0, top: 0 },
+			{ line: 2, top: 40 },
+			{ line: 6, top: 90 }
+		]);
+	});
+});
diff --git a/web/src/lib/components/ui/markdownScroll.ts b/web/src/lib/components/ui/markdownScroll.ts
new file mode 100644
index 000000000..5c49ecdad
--- /dev/null
+++ b/web/src/lib/components/ui/markdownScroll.ts
@@ -0,0 +1,84 @@
+import getCaretCoordinates from "textarea-caret";
+
+export interface Anchor {
+	line: number;
+	top: number;
+}
+
+const project = (anchors: Anchor[], value: number, from: keyof Anchor, to: keyof Anchor) => {
+	for (let i = 1; i < anchors.length; i++) {
+		const prev = anchors[i - 1];
+		const next = anchors[i];
+		if (value > next[from]) continue;
+		const span = next[from] - prev[from];
+		if (span <= 0) return prev[to];
+		return prev[to] + ((value - prev[from]) / span) * (next[to] - prev[to]);
+	}
+	return anchors.at(-1)?.[to] ?? 0;
+};
+
+export const topForLine = (anchors: Anchor[], line: number) =>
+	project(anchors, line, "line", "top");
+
+export const lineForTop = (anchors: Anchor[], top: number) => project(anchors, top, "top", "line");
+
+export const monotonic = (anchors: Anchor[]): Anchor[] =>
+	anchors.reduce<Anchor[]>((kept, anchor) => {
+		const last = kept.at(-1);
+		if (!last || (anchor.line > last.line && anchor.top >= last.top)) kept.push(anchor);
+		return kept;
+	}, []);
+
+const lineCount = (value: string) => value.split("\n").length;
+
+const previewAnchors = (pane: HTMLElement, lines: number): Anchor[] => {
+	const origin = pane.getBoundingClientRect().top - pane.scrollTop;
+	const found = Array.from(pane.querySelectorAll<HTMLElement>("[data-line]"), (element) => ({
+		line: Number(element.dataset.line),
+		top: element.getBoundingClientRect().top - origin
+	}));
+	return monotonic([{ line: 0, top: 0 }, ...found, { line: lines, top: pane.scrollHeight }]);
+};
+
+export const previewLine = (pane: HTMLElement, value: string) =>
+	lineForTop(previewAnchors(pane, lineCount(value)), pane.scrollTop);
+
+export const scrollPreviewToLine = (pane: HTMLElement, value: string, line: number) => {
+	pane.scrollTop = topForLine(previewAnchors(pane, lineCount(value)), line);
+};
+
+const editorGeometry = (textarea: HTMLTextAreaElement) => {
+	const starts = [0];
+	for (let i = 0; i < textarea.value.length; i++) {
+		if (textarea.value[i] === "\n") starts.push(i + 1);
+	}
+	const origin = getCaretCoordinates(textarea, 0).top;
+	const lineTop = (line: number) =>
+		line >= starts.length
+			? textarea.scrollHeight
+			: getCaretCoordinates(textarea, starts[line]).top - origin;
+	const around = (line: number): Anchor[] => [
+		{ line, top: lineTop(line) },
+		{ line: line + 1, top: lineTop(line + 1) }
+	];
+	return { count: starts.length, lineTop, around };
+};
+
+export const editorLine = (textarea: HTMLTextAreaElement) => {
+	const { count, lineTop, around } = editorGeometry(textarea);
+	const target = textarea.scrollTop;
+	let low = 0;
+	let high = count - 1;
+	while (low < high) {
+		const mid = Math.ceil((low + high) / 2);
+		if (lineTop(mid) <= target) low = mid;
+		else high = mid - 1;
+	}
+	return lineForTop(around(low), target);
+};
+
+export const scrollEditorToLine = (textarea: HTMLTextAreaElement, line: number) => {
+	const { count, around } = editorGeometry(textarea);
+	const base = Math.min(Math.max(0, Math.floor(line)), count - 1);
+	textarea.scrollTop = topForLine(around(base), line);
+};
diff --git a/web/src/lib/components/ui/markdownSuggestions.ts b/web/src/lib/components/ui/markdownSuggestions.ts
new file mode 100644
index 000000000..65c2da56a
--- /dev/null
+++ b/web/src/lib/components/ui/markdownSuggestions.ts
@@ -0,0 +1,99 @@
+import type { BobbinContext } from "$lib/api/client";
+import { listIssues } from "$lib/api/issue";
+import { listPulls } from "$lib/api/records";
+import { searchActorsTypeahead } from "$lib/api/search";
+import { rkeyFromUri } from "$lib/api/uri";
+import type { TicketState } from "$lib/components/repo/tickets/TicketStatePill.svelte";
+
+export interface UserSuggestion {
+	kind: "user";
+	key: string;
+	did: string;
+	handle: string;
+	insert: string;
+}
+
+export interface TicketSuggestion {
+	kind: "ticket";
+	key: string;
+	isPull: boolean;
+	state: TicketState;
+	title: string;
+	rkey: string;
+	createdAt: string;
+	insert: string;
+}
+
+export type Suggestion = UserSuggestion | TicketSuggestion;
+
+export interface TicketRepo {
+	did: string;
+	url: string;
+}
+
+const SUGGESTION_LIMIT = 8;
+const TICKET_FETCH_LIMIT = 100;
+
+export const suggestUsers = async (
+	ctx: BobbinContext,
+	query: string,
+	signal: AbortSignal
+): Promise<UserSuggestion[]> => {
+	if (query === "") return [];
+	const { actors } = await searchActorsTypeahead(
+		ctx,
+		{ q: query, limit: SUGGESTION_LIMIT },
+		{ signal }
+	);
+	return actors.map((actor) => ({
+		kind: "user",
+		key: actor.did,
+		did: actor.did,
+		handle: actor.handle,
+		insert: `@${actor.handle} `
+	}));
+};
+
+const ticket = (
+	repo: TicketRepo,
+	isPull: boolean,
+	item: { uri: string; state: string; value: { title: string; createdAt: string } }
+): TicketSuggestion => {
+	const rkey = rkeyFromUri(item.uri);
+	const state: TicketState =
+		item.state === "closed" || (isPull && item.state === "merged") ? item.state : "open";
+	return {
+		kind: "ticket",
+		key: item.uri,
+		isPull,
+		state,
+		title: item.value.title,
+		rkey,
+		createdAt: item.value.createdAt,
+		insert: `[#${rkey}](${repo.url}/${isPull ? "pulls" : "issues"}/${item.uri}) `
+	};
+};
+
+export const loadTickets = async (
+	ctx: BobbinContext,
+	repo: TicketRepo
+): Promise<TicketSuggestion[]> => {
+	const [issues, pulls] = await Promise.all([
+		listIssues(ctx, repo.did, { limit: TICKET_FETCH_LIMIT }),
+		listPulls(ctx, repo.did, { limit: TICKET_FETCH_LIMIT })
+	]);
+	return [
+		...issues.items.map((item) => ticket(repo, false, item)),
+		...pulls.items.map((item) => ticket(repo, true, item))
+	].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+};
+
+export const filterTickets = (tickets: TicketSuggestion[], query: string): TicketSuggestion[] => {
+	const needle = query.toLowerCase();
+	return tickets
+		.filter(
+			(ticket) =>
+				ticket.rkey.startsWith(needle) || ticket.title.toLowerCase().includes(needle)
+		)
+		.slice(0, SUGGESTION_LIMIT);
+};
diff --git a/web/src/lib/markup/markdown.test.ts b/web/src/lib/markup/markdown.test.ts
index 4b3562892..f28d1acb7 100644
--- a/web/src/lib/markup/markdown.test.ts
+++ b/web/src/lib/markup/markdown.test.ts
@@ -236,4 +236,18 @@ describe("renderMarkdown", () => {
 		expect(html).toContain('<div align="center">');
 		expect(html).toContain("<details><summary>more</summary>");
 	});
+
+	it("tags blocks with their source line only when asked", async () => {
+		const source = "# Title\n\ntext\n\n- one\n- two\n\n```\ncode\n```";
+		const lines = await render(source, { sourceLines: true });
+		expect(lines).toContain('<h1 id="title" data-line="0">');
+		expect(lines).toContain('<p data-line="2">');
+		expect(lines).toContain('<li data-line="5">');
+		expect(lines).toContain('data-line="7"');
+		expect(await render(source)).not.toContain("data-line");
+	});
+
+	it("drops source lines written as raw html", async () => {
+		expect(await render('<p data-line="9">x</p>')).not.toContain("data-line");
+	});
 });
diff --git a/web/src/lib/markup/markdown.ts b/web/src/lib/markup/markdown.ts
index 5135effdb..a9984f983 100644
--- a/web/src/lib/markup/markdown.ts
+++ b/web/src/lib/markup/markdown.ts
@@ -87,9 +87,19 @@ const commitLinks =
 		});
 	};
 
+const sourceLines = (md: MarkdownIt): void => {
+	md.core.ruler.push("source_line", (state) => {
+		for (const token of state.tokens) {
+			if (token.map && token.nesting >= 0 && token.block && token.type !== "html_block") {
+				token.attrSet("data-line", String(token.map[0]));
+			}
+		}
+	});
+};
+
 // todo: mermaid and math still want a client side renderer, math wants mathjax
 // loaded on demand the way the appview does it
-const build = (host: string): MarkdownIt => {
+const build = (host: string, lines: boolean): MarkdownIt => {
 	const md = new MarkdownIt({
 		html: true,
 		linkify: true,
@@ -107,23 +117,25 @@ const build = (host: string): MarkdownIt => {
 		.use(mentions);
 
 	if (host) md.use(commitLinks(host));
+	if (lines) md.use(sourceLines);
 	return md;
 };
 
 const renderers = new Map<string, MarkdownIt>();
 
 // building an instance means running every plugin, so keep one per host
-const rendererFor = (host: string): MarkdownIt => {
-	let md = renderers.get(host);
+const rendererFor = (host: string, lines: boolean): MarkdownIt => {
+	const key = `${host}\n${lines}`;
+	let md = renderers.get(key);
 	if (!md) {
-		md = build(host);
-		renderers.set(host, md);
+		md = build(host, lines);
+		renderers.set(key, md);
 	}
 	return md;
 };
 
 export const renderMarkdown = async (source: string, ctx: MarkupContext): Promise<string> => {
-	const raw = rendererFor(ctx.host ?? "").render(source);
+	const raw = rendererFor(ctx.host ?? "", !!ctx.sourceLines).render(source);
 	// sanitize before highlighting so the allowlist doesn't have to allow spans
 	return highlightCodeblocks(sanitizeMarkup(raw, ctx));
 };
diff --git a/web/src/lib/markup/paths.ts b/web/src/lib/markup/paths.ts
index a68dfccb8..934417722 100644
--- a/web/src/lib/markup/paths.ts
+++ b/web/src/lib/markup/paths.ts
@@ -5,6 +5,7 @@ export interface MarkupContext {
 	dir?: string;
 	host?: string;
 	camo?: boolean;
+	sourceLines?: boolean;
 }
 
 const ABSOLUTE = /^[a-z][a-z0-9+.-]*:|^\/\//i;
diff --git a/web/src/lib/markup/render.ts b/web/src/lib/markup/render.ts
index 22fcad805..fc5717551 100644
--- a/web/src/lib/markup/render.ts
+++ b/web/src/lib/markup/render.ts
@@ -17,7 +17,16 @@ const digest = (value: string): string => {
 
 const keyOf = (filename: string, contents: string, ctx: MarkupContext): string =>
 	[
-		digest([ctx.host ?? "", ctx.repo, ctx.ref, ctx.dir ?? "", filename].join("\n")),
+		digest(
+			[
+				ctx.host ?? "",
+				ctx.repo,
+				ctx.ref,
+				ctx.dir ?? "",
+				String(!!ctx.sourceLines),
+				filename
+			].join("\n")
+		),
 		contents.length.toString(36),
 		digest(contents)
 	].join(".");
diff --git a/web/src/lib/markup/sanitize.ts b/web/src/lib/markup/sanitize.ts
index 4f437387c..9e3f73336 100644
--- a/web/src/lib/markup/sanitize.ts
+++ b/web/src/lib/markup/sanitize.ts
@@ -118,7 +118,9 @@ const externalRel = (href: string): string | undefined =>
 
 const optionsFor = (ctx: MarkupContext): sanitizeHtml.IOptions => ({
 	allowedTags: ALLOWED_TAGS,
-	allowedAttributes: ALLOWED_ATTRIBUTES,
+	allowedAttributes: ctx.sourceLines
+		? { ...ALLOWED_ATTRIBUTES, "*": [...GLOBAL_ATTRIBUTES, "data-line"] }
+		: ALLOWED_ATTRIBUTES,
 	allowedClasses: ALLOWED_CLASSES,
 	allowedSchemes: ["http", "https", "mailto"],
 	allowedSchemesAppliedToAttributes: ["href", "src", "srcset", "poster"],
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index c83ebef97..56c68dc62 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -12,7 +12,7 @@
 					message:
 						"The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.",
 					mark: "?",
-					tone: "bg-background-inset text-foreground-subtle"
+					tone: "bg-background-inset text-foreground-muted"
 				};
 			case 503:
 				return {
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 283769f8c..3b8cc351f 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -96,7 +96,7 @@ export default defineConfig({
 				// optimize mid-run and wedge chromium; sanitize-html is cjs
 				optimizeDeps: {
 					noDiscovery: true,
-					include: ["storybook/test", "sanitize-html"]
+					include: ["storybook/test", "sanitize-html", "textarea-caret"]
 				},
 				test: {
 					name: "storybook",
-- 
2.51.2