From 9e1847329bfb33c47922b363003ab464a0838dd1 Mon Sep 17 00:00:00 2001
From: bboysoul <bboysoulcn@gmail.com>
Date: Tue, 15 Sep 2026 13:56:44 +0800
Subject: [PATCH] fix: render task notes with standard markdown

---
 frontend/package.json                    |   2 +-
 frontend/pnpm-lock.yaml                  |  73 ++++++++++++++++
 frontend/src/lib/task-utils.test.ts      |  16 ++--
 frontend/src/lib/task-utils.ts           | 103 ++++-------------------
 frontend/src/markdown-it-task-lists.d.ts |  12 +++
 frontend/src/style.css                   |   2 +-
 frontend/src/style.test.ts               |   2 +
 7 files changed, 117 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/markdown-it-task-lists.d.ts

diff --git a/frontend/package.json b/frontend/package.json
index 81ab0f2..e5d9650 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1 +1 @@
-{"name":"dodo-frontend","private":true,"version":"0.1.0","type":"module","packageManager":"pnpm@9.15.9","scripts":{"dev":"vite --host 0.0.0.0","build":"vue-tsc -b && vite build","test":"vitest run"},"dependencies":{"@vitejs/plugin-vue":"latest","class-variance-authority":"latest","clsx":"latest","lucide-vue-next":"^0.468.0","reka-ui":"latest","tailwind-merge":"latest","vue":"latest","vue-router":"latest"},"devDependencies":{"@tailwindcss/vite":"latest","@types/node":"latest","jsdom":"^30.0.1","tailwindcss":"latest","typescript":"^5.7.2","vite":"latest","vitest":"latest","vue-tsc":"latest"},"pnpm":{"onlyBuiltDependencies":["vue-demi"]}}
\ No newline at end of file
+{"name":"dodo-frontend","private":true,"version":"0.1.0","type":"module","packageManager":"pnpm@9.15.9","scripts":{"dev":"vite --host 0.0.0.0","build":"vue-tsc -b && vite build","test":"vitest run"},"dependencies":{"@vitejs/plugin-vue":"latest","class-variance-authority":"latest","clsx":"latest","lucide-vue-next":"^0.468.0","markdown-it":"^15.0.2","markdown-it-task-lists":"^2.1.1","reka-ui":"latest","tailwind-merge":"latest","vue":"latest","vue-router":"latest"},"devDependencies":{"@tailwindcss/vite":"latest","@types/markdown-it":"^14.2.0","@types/node":"latest","jsdom":"^30.0.1","tailwindcss":"latest","typescript":"^5.7.2","vite":"latest","vitest":"latest","vue-tsc":"latest"},"pnpm":{"onlyBuiltDependencies":["vue-demi"]}}
\ No newline at end of file
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 78861a2..f5a122d 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -20,6 +20,12 @@ importers:
       lucide-vue-next:
         specifier: ^0.468.0
         version: 0.468.0(vue@3.5.42(typescript@5.9.3))
+      markdown-it:
+        specifier: ^15.0.2
+        version: 15.0.2
+      markdown-it-task-lists:
+        specifier: ^2.1.1
+        version: 2.1.1
       reka-ui:
         specifier: latest
         version: 2.10.4(vue@3.5.42(typescript@5.9.3))
@@ -36,6 +42,9 @@ importers:
       '@tailwindcss/vite':
         specifier: latest
         version: 4.3.3(vite@8.2.2(@types/node@26.4.1)(jiti@2.7.0))
+      '@types/markdown-it':
+        specifier: ^14.2.0
+        version: 14.2.0
       '@types/node':
         specifier: latest
         version: 26.4.1
@@ -384,6 +393,15 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
+  '@types/markdown-it@14.2.0':
+    resolution: {integrity: sha512-NoQ2yGlLWj4wpxMs+TYmRKk3thDrQ97agr7sFqfLsAlvoS8SNQuTrlObhFqG9iugdTtgOE9jpJ6FNM4ZGsa5xQ==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/node@26.4.1':
     resolution: {integrity: sha512-k97ENvZWtvA6yqz5/FS6a7duDgOPEeOQOc2iKS/nY6mX6qJUKtLnWzQS+Xj6tXweyj6ZcTAK2Qecetnvi9nCLA==}
 
@@ -489,6 +507,9 @@ packages:
   alien-signals@3.2.1:
     resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
 
+  argparse@3.0.2:
+    resolution: {integrity: sha512-mFdDM6WqWKraGLsVb+C9CahPnzTXOefAOLq3jYcca2YZ8bEWpr++Tzj+zSaKW9+X9L5uSxcm1AZ3Y6aZJ09OhQ==}
+
   aria-hidden@1.2.6:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
@@ -772,6 +793,9 @@ packages:
     resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
     engines: {node: '>= 12.0.0'}
 
+  linkify-it@6.1.0:
+    resolution: {integrity: sha512-wJ/TwpSDTLepCrQoYWYIExIKg5Zchex2Nn5yk2mFnB+6PtdkHtyLx742md9csRjjOnGkKIS/RrbY7l8D6gT9Vw==}
+
   local-pkg@1.2.1:
     resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
     engines: {node: '>=14'}
@@ -795,9 +819,19 @@ packages:
   magic-string@1.2.3:
     resolution: {integrity: sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==}
 
+  markdown-it-task-lists@2.1.1:
+    resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==}
+
+  markdown-it@15.0.2:
+    resolution: {integrity: sha512-q4IGxMv56jCqT4OCRCADBoDP3LO4MhmTXjFbphHPXs4g3j9Xg5RDnxqN8IF/3vIWEU+VCnUq+7JUg/cfy2E6Qw==}
+    hasBin: true
+
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
+  mdurl@2.1.0:
+    resolution: {integrity: sha512-1+HBaOx0zi/dQWht8rNv9MYf9qqpqL/kxI0hXImU6Y547zM6Sni8BQibt7ifgMcYtQg41ao3Ivd6cnSM86inpg==}
+
   mlly@1.8.2:
     resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
@@ -848,6 +882,10 @@ packages:
     resolution: {integrity: sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -941,6 +979,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@3.0.0:
+    resolution: {integrity: sha512-U3PppEkleoTnIfi8BozMx3yju3qc/L6SwqWo2Sw+54PX+PX0q9I+r1Um5HCmqD7n9VDX5/v3vQH/AjA6deDdtw==}
+
   ufo@1.6.4:
     resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
 
@@ -1397,6 +1438,15 @@ snapshots:
 
   '@types/estree@1.0.9': {}
 
+  '@types/linkify-it@5.0.0': {}
+
+  '@types/markdown-it@14.2.0':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdurl@2.0.0': {}
+
   '@types/node@26.4.1':
     dependencies:
       undici-types: 8.3.0
@@ -1536,6 +1586,8 @@ snapshots:
 
   alien-signals@3.2.1: {}
 
+  argparse@3.0.2: {}
+
   aria-hidden@1.2.6:
     dependencies:
       tslib: 2.8.1
@@ -1763,6 +1815,10 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.33.0
       lightningcss-win32-x64-msvc: 1.33.0
 
+  linkify-it@6.1.0:
+    dependencies:
+      uc.micro: 3.0.0
+
   local-pkg@1.2.1:
     dependencies:
       mlly: 1.8.2
@@ -1787,8 +1843,21 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.6.0
 
+  markdown-it-task-lists@2.1.1: {}
+
+  markdown-it@15.0.2:
+    dependencies:
+      argparse: 3.0.2
+      entities: 8.0.0
+      linkify-it: 6.1.0
+      mdurl: 2.1.0
+      punycode.js: 2.3.1
+      uc.micro: 3.0.0
+
   mdn-data@2.27.1: {}
 
+  mdurl@2.1.0: {}
+
   mlly@1.8.2:
     dependencies:
       acorn: 8.18.0
@@ -1838,6 +1907,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   quansync@0.2.11: {}
@@ -1932,6 +2003,8 @@ snapshots:
 
   typescript@5.9.3: {}
 
+  uc.micro@3.0.0: {}
+
   ufo@1.6.4: {}
 
   undici-types@8.3.0: {}
diff --git a/frontend/src/lib/task-utils.test.ts b/frontend/src/lib/task-utils.test.ts
index 595cc57..bb97fe0 100644
--- a/frontend/src/lib/task-utils.test.ts
+++ b/frontend/src/lib/task-utils.test.ts
@@ -86,16 +86,20 @@ describe('task utilities', () => {
     expect(buildTaskRecurrencePayload('none', { afterCompletionDays: '1' })).toEqual({})
   })
 
-  it('renders safe practical markdown and strips unsafe html', () => {
-    const html = renderMarkdown('# Plan\n> Note\n1. first\n- [x] done\n\n```js\nconst x = 1\n```\n**bold** [link](https://example.com)\n<script>alert(1)</script>')
+  it('renders safe standard markdown with paragraphs, nesting, tasks, and fenced code', () => {
+    const html = renderMarkdown('# Plan\n\nFirst line\nsecond line\n\n- parent\n  - child\n\n- [x] done\n\n```js\nconst x = 1\n```\n\n**bold** [link](https://example.com)\n<script>alert(1)</script>')
     expect(html).toContain('<h1>Plan</h1>')
-    expect(html).toContain('<blockquote>Note</blockquote>')
-    expect(html).toContain('<ol><li>first</li></ol>')
-    expect(html).toContain('type="checkbox" disabled checked')
-    expect(html).toContain('<pre><code class="language-js">const x = 1</code></pre>')
+    expect(html).toContain('<p>First line<br>\nsecond line</p>')
+    expect(html).toMatch(/<li>\s*<p>parent<\/p>\s*<ul>\s*<li>child<\/li>\s*<\/ul>\s*<\/li>/)
+    expect(html).toContain('class="task-list-item')
+    expect(html).toContain('type="checkbox"')
+    expect(html).toContain('checked=""')
+    expect(html).toContain('<pre><code class="language-js">const x = 1\n</code></pre>')
     expect(html).toContain('<strong>bold</strong>')
+    expect(html).toContain('target="_blank"')
     expect(html).toContain('rel="noopener noreferrer"')
     expect(html).not.toContain('<script>')
+    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;')
   })
 
   it('inserts markdown around selections and prefixes selected lines', () => {
diff --git a/frontend/src/lib/task-utils.ts b/frontend/src/lib/task-utils.ts
index f0aa885..0cac3db 100644
--- a/frontend/src/lib/task-utils.ts
+++ b/frontend/src/lib/task-utils.ts
@@ -1,3 +1,6 @@
+import MarkdownIt from 'markdown-it'
+import taskLists from 'markdown-it-task-lists'
+
 export type MinimalTask = {
   id: string
   title: string
@@ -49,94 +52,24 @@ export function applyMarkdownFormat(value: string, start: number, end: number, f
   return prefixLines('> ', '引用')
 }
 
-const renderInline = (value: string) => {
-  let out = escapeHtml(value)
-  out = out.replace(/`([^`]+)`/g, '<code>$1</code>')
-  out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-  out = out.replace(/\*([^*]+)\*/g, '<em>$1</em>')
-  out = out.replace(
-    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
-    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-  )
-  return out
+const markdownRenderer = new MarkdownIt({
+  breaks: true,
+  html: false,
+  linkify: true,
+  typographer: false,
+})
+markdownRenderer.use(taskLists, { enabled: false, label: false })
+
+const defaultLinkOpen = markdownRenderer.renderer.rules.link_open
+markdownRenderer.renderer.rules.link_open = (tokens, index, options, env, self) => {
+  const token = tokens[index]
+  token.attrSet('target', '_blank')
+  token.attrSet('rel', 'noopener noreferrer')
+  return defaultLinkOpen ? defaultLinkOpen(tokens, index, options, env, self) : self.renderToken(tokens, index, options)
 }
 
 export function renderMarkdown(markdown = '') {
-  const lines = markdown.replace(/\r\n/g, '\n').split('\n')
-  const html: string[] = []
-  let listType: 'ul' | 'ol' | null = null
-  let inCode = false
-  let codeLanguage = ''
-  const codeLines: string[] = []
-
-  const closeList = () => {
-    if (listType) {
-      html.push(`</${listType}>`)
-      listType = null
-    }
-  }
-  const openList = (type: 'ul' | 'ol') => {
-    if (listType === type) return
-    closeList()
-    html.push(`<${type}>`)
-    listType = type
-  }
-
-  for (const raw of lines) {
-    const line = raw.trimEnd()
-    const fence = line.match(/^```([\w-]*)\s*$/)
-    if (fence) {
-      closeList()
-      if (inCode) {
-        const languageClass = codeLanguage ? ` class="language-${escapeHtml(codeLanguage)}"` : ''
-        html.push(`<pre><code${languageClass}>${escapeHtml(codeLines.join('\n'))}</code></pre>`)
-        codeLines.length = 0
-        codeLanguage = ''
-        inCode = false
-      } else {
-        inCode = true
-        codeLanguage = fence[1]
-      }
-      continue
-    }
-    if (inCode) {
-      codeLines.push(raw)
-      continue
-    }
-    if (!line.trim()) {
-      closeList()
-      continue
-    }
-    if (line.startsWith('# ')) {
-      closeList()
-      html.push(`<h1>${renderInline(line.slice(2))}</h1>`)
-    } else if (line.startsWith('## ')) {
-      closeList()
-      html.push(`<h2>${renderInline(line.slice(3))}</h2>`)
-    } else if (line.startsWith('> ')) {
-      closeList()
-      html.push(`<blockquote>${renderInline(line.slice(2))}</blockquote>`)
-    } else if (/^\d+\. /.test(line)) {
-      openList('ol')
-      html.push(`<li>${renderInline(line.replace(/^\d+\. /, ''))}</li>`)
-    } else if (/^[-*] \[[ xX]\] /.test(line)) {
-      openList('ul')
-      const checked = /^[-*] \[[xX]\] /.test(line)
-      html.push(`<li class="task-list-item"><input type="checkbox" disabled${checked ? ' checked' : ''}>${renderInline(line.replace(/^[-*] \[[ xX]\] /, ''))}</li>`)
-    } else if (/^[-*] /.test(line)) {
-      openList('ul')
-      html.push(`<li>${renderInline(line.slice(2))}</li>`)
-    } else if (/^(---|\*\*\*)$/.test(line.trim())) {
-      closeList()
-      html.push('<hr>')
-    } else {
-      closeList()
-      html.push(`<p>${renderInline(line)}</p>`)
-    }
-  }
-  closeList()
-  if (inCode) html.push(`<pre><code>${escapeHtml(['```' + codeLanguage, ...codeLines].join('\n'))}</code></pre>`)
-  return html.join('')
+  return markdownRenderer.render(markdown)
 }
 
 export function filterTasks<T extends MinimalTask>(tasks: T[], query: string) {
diff --git a/frontend/src/markdown-it-task-lists.d.ts b/frontend/src/markdown-it-task-lists.d.ts
new file mode 100644
index 0000000..33311f3
--- /dev/null
+++ b/frontend/src/markdown-it-task-lists.d.ts
@@ -0,0 +1,12 @@
+declare module 'markdown-it-task-lists' {
+  import type MarkdownIt from 'markdown-it'
+
+  type TaskListOptions = {
+    enabled?: boolean
+    label?: boolean
+    labelAfter?: boolean
+  }
+
+  const taskLists: MarkdownIt.PluginWithOptions<TaskListOptions>
+  export default taskLists
+}
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 92a16bf..b3f7136 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -9,7 +9,7 @@ main{container-type:inline-size;min-width:0;padding:27px 34px 50px;overflow:auto
 .drag-handle{width:44px;min-width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;background:transparent;color:#b3a795;cursor:grab;touch-action:none;border-radius:8px}.drag-handle:active{cursor:grabbing}.drag-handle:disabled{opacity:.3;cursor:not-allowed}.drag-handle svg{width:17px;height:17px}.reordering{opacity:.78;z-index:4;box-shadow:0 12px 28px rgba(78,58,34,.18)!important;transition:none!important;pointer-events:none}.reorder-target{box-shadow:inset 0 2px 0 var(--accent)}
 .list-drag-handle{width:44px;min-width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#ad9f8c;cursor:grab;touch-action:none;border-radius:8px}.list-drag-handle svg{width:15px;height:15px}.list-row{touch-action:pan-y}.list-row.list-dragging{position:relative;z-index:8;opacity:.8;box-shadow:0 10px 24px rgba(78,58,34,.2);transform:translateY(var(--list-drag-y));transition:none;pointer-events:none;background:#fffaf4}.folder-row.list-drop-target{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.list-root-drop.list-drop-target{background:var(--accent-soft);color:#b7421e;border-radius:9px}.list-row.list-reorder-target{box-shadow:inset 0 2px 0 var(--accent)}.list-move-menu{display:grid;gap:2px;padding:0}.list-move-menu button{min-height:44px}.list-move-menu button:disabled,.sidebar-action-sheet .app-sheet__body button:disabled{opacity:.55;cursor:default}.sidebar-action-sheet{width:min(320px,calc(100vw - 24px));margin:12px;border:1px solid var(--border-cream);border-radius:18px;box-shadow:var(--highlight-inner),var(--shadow-raised);overflow:hidden}.sidebar-action-header.app-sheet__header,.sidebar-action-move-view.app-sheet__header{align-items:flex-start;min-height:64px;padding:13px 14px 12px}.sidebar-action-header>div,.sidebar-action-move-view>div{min-width:0;display:grid;gap:2px}.sidebar-action-header b,.sidebar-action-move-view b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.sidebar-action-kind,.sidebar-action-group-title{font-size:11px;font-weight:750;letter-spacing:.04em;color:var(--muted)}.sidebar-action-body.app-sheet__body{gap:8px;padding:10px}.sidebar-action-group{display:grid;gap:2px;padding:6px;border:1px solid var(--border-cream);border-radius:14px;background:#fffaf4}.sidebar-action-group button,.sidebar-action-danger button,.list-move-menu button{width:100%;min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-radius:11px;background:transparent;padding:0 10px;text-align:left}.sidebar-action-group button:hover:not(:disabled),.list-move-menu button:hover:not(:disabled){background:#fff3e6}.sidebar-action-group button span,.sidebar-action-danger button span,.list-move-menu button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-action-chevron{color:#b3a795}.sidebar-action-up{transform:rotate(180deg)}.sidebar-action-danger{border-top:1px solid #efd6cf;padding:9px 6px 6px;display:grid;gap:7px}.sidebar-action-danger>span{font-size:11px;line-height:1.4;color:#9a6a5f;padding:0 4px}.sidebar-action-danger button.danger{color:var(--danger);background:#fff6f2}.sidebar-action-move-back{min-height:44px;width:44px;border:0;border-radius:12px;background:transparent;color:#8a7e70;display:grid;place-items:center}.sidebar-action-move-back svg{transform:rotate(180deg)}.list-move-current{background:#fbe6dc!important;color:#7b351e;font-weight:750}
 .archived-lists{position:relative;margin-top:4px}.archived-lists-toggle{min-height:44px;width:100%;display:flex;align-items:center;gap:8px;border:0;border-radius:9px;background:transparent;padding:0 12px;color:#81786c;text-align:left;font-size:12px;font-weight:650}.archived-lists-toggle:hover:not(:disabled){background:rgba(255,255,255,.52)}.archived-lists-toggle:focus-visible,.archived-row-menu-trigger:focus-visible,.archived-row-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.archived-lists-toggle:disabled{cursor:default;color:#aaa196}.archived-lists-toggle svg{width:15px;height:15px;transition:transform .16s ease}.archived-lists-toggle svg.expanded{transform:rotate(90deg)}.archived-list-items{display:grid;transition:opacity .16s ease}.archived-row{min-height:44px;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;padding-left:35px;color:#746c61}.archived-row-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.archived-row-menu{display:grid;place-items:center}.archived-row-menu-trigger{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#8e8477}.archived-row-menu-trigger svg{width:15px;height:15px}.archived-action-mask{display:contents}.archived-row-actions{position:fixed;z-index:70;width:164px;display:grid;gap:2px;padding:6px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.archived-row-actions button{min-height:44px;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;background:transparent;padding:8px 10px;text-align:left;font-size:12px}.archived-row-actions button:hover{background:#f8f1e8}.archived-row-actions svg{width:15px;height:15px}@media(max-width:930px){.archived-action-mask{display:block;position:fixed;z-index:60;inset:0;background:rgba(45,38,31,.3)}.archived-row-actions{position:fixed;z-index:61;left:0;right:0;top:auto;bottom:0;width:100%;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}.archived-row-actions button{font-size:14px}}@media(prefers-reduced-motion:reduce){.archived-lists-toggle svg,.archived-list-items{transition:none}}
-.detail{min-width:0;border-left:1px solid var(--line);background:#faf7f0;overflow:auto}.detail-head{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:#80766a;text-transform:uppercase;letter-spacing:.08em}.paper{margin:22px;padding:28px 20px;min-height:180px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 4px 18px rgba(76,57,34,.05);display:grid;place-items:center;align-content:center;text-align:center;color:#8f8578}.paper svg{width:32px;height:32px;color:#ceb8a4;margin-bottom:12px}.paper b{color:#625b50}.paper p{font-size:13px;line-height:1.6}.detail-form{min-width:0;grid-template-columns:minmax(0,1fr);padding:19px;display:grid;gap:12px}.detail-form>*{min-width:0}.detail-title{display:flex;align-items:flex-start;gap:10px}.check.large{margin-top:8px;width:22px;height:22px;flex-basis:22px}.detail-title textarea{flex:1;border:0;background:transparent;resize:none;outline:none;font-size:19px;line-height:1.4;font-weight:700}.detail-form>label{grid-template-columns:80px 1fr;align-items:center}.detail-form>label input,.detail-form>label select{padding:8px}.task-detail-field-input{width:190px!important;max-width:100%;justify-self:end}.task-detail-due-input{padding-inline:9px!important}.field{display:grid;gap:7px}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#756d61}.hint{font-size:12px;color:#a49a8d}.markdown-mode-switch{display:flex;background:#eee7dc;padding:2px;border-radius:7px}.markdown-mode-switch button{min-height:30px;border:0;background:transparent;padding:4px 9px;border-radius:6px;font-size:11px}.markdown-mode-switch button.active{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(78,58,34,.08)}.markdown-editor-shell{min-width:0;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.markdown-toolbar{display:flex;align-items:center;gap:2px;overflow-x:auto;padding:4px;background:#f7f0e5;border-bottom:1px solid var(--line);scrollbar-width:none}.markdown-toolbar::-webkit-scrollbar{display:none}.markdown-toolbar button{min-width:44px;min-height:44px;flex:0 0 44px;border:0;border-radius:8px;background:transparent;color:#70675c;display:grid;place-items:center;padding:0}.markdown-toolbar button:hover{background:#fff;color:var(--accent)}.markdown-toolbar button svg{width:16px;height:16px}.markdown-toolbar .markdown-codeblock{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea{width:100%;min-height:180px;border:0;background:#fff;border-radius:0;padding:12px;resize:vertical;outline:none;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea:focus{box-shadow:inset 0 0 0 2px rgba(241,90,41,.15)}.markdown-preview{min-height:180px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:11px;font-size:13px;line-height:1.65;overflow-wrap:anywhere}.markdown-preview-empty{color:var(--muted)}.markdown-preview h1{margin:4px 0 12px;font-size:20px}.markdown-preview h2{margin:12px 0 8px;font-size:16px}.markdown-preview p{margin:8px 0}.markdown-preview ul,.markdown-preview ol{margin:8px 0;padding-left:22px}.markdown-preview blockquote{margin:10px 0;padding:7px 11px;border-left:3px solid #d7aa8f;background:#fff7ed;color:#665c51}.markdown-preview code{background:#f2ece2;padding:2px 4px;border-radius:4px}.markdown-preview pre{max-width:100%;overflow:auto;padding:11px;background:#332f2b;color:#f8f1e7;border-radius:9px}.markdown-preview pre code{padding:0;background:transparent;color:inherit}.markdown-preview a{color:var(--accent)}.markdown-preview hr{border:0;border-top:1px solid var(--line);margin:14px 0}.markdown-preview .task-list-item{list-style:none;margin-left:-20px;display:flex;align-items:flex-start;gap:7px}.markdown-preview .task-list-item input{margin-top:5px;accent-color:var(--accent)}.subtasks{display:grid;gap:5px}.subtask-detail{width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;display:flex;align-items:center;gap:8px;border:0;background:#fff;padding:8px;border-radius:7px;text-align:left}.subtask-detail .subtask-check{width:44px;height:44px;flex:0 0 44px;margin:-8px 0 -8px -8px;cursor:pointer;pointer-events:auto}.strike{text-decoration:line-through;color:var(--muted)}.detail-actions{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line)}.secondary{border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:8px;font-weight:650}.danger-text{border:0;background:transparent;color:var(--danger);display:flex;align-items:center;gap:5px;font-size:12px}.danger-text svg{width:14px}
+.detail{min-width:0;border-left:1px solid var(--line);background:#faf7f0;overflow:auto}.detail-head{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:#80766a;text-transform:uppercase;letter-spacing:.08em}.paper{margin:22px;padding:28px 20px;min-height:180px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 4px 18px rgba(76,57,34,.05);display:grid;place-items:center;align-content:center;text-align:center;color:#8f8578}.paper svg{width:32px;height:32px;color:#ceb8a4;margin-bottom:12px}.paper b{color:#625b50}.paper p{font-size:13px;line-height:1.6}.detail-form{min-width:0;grid-template-columns:minmax(0,1fr);padding:19px;display:grid;gap:12px}.detail-form>*{min-width:0}.detail-title{display:flex;align-items:flex-start;gap:10px}.check.large{margin-top:8px;width:22px;height:22px;flex-basis:22px}.detail-title textarea{flex:1;border:0;background:transparent;resize:none;outline:none;font-size:19px;line-height:1.4;font-weight:700}.detail-form>label{grid-template-columns:80px 1fr;align-items:center}.detail-form>label input,.detail-form>label select{padding:8px}.task-detail-field-input{width:190px!important;max-width:100%;justify-self:end}.task-detail-due-input{padding-inline:9px!important}.field{display:grid;gap:7px}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#756d61}.hint{font-size:12px;color:#a49a8d}.markdown-mode-switch{display:flex;background:#eee7dc;padding:2px;border-radius:7px}.markdown-mode-switch button{min-height:30px;border:0;background:transparent;padding:4px 9px;border-radius:6px;font-size:11px}.markdown-mode-switch button.active{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(78,58,34,.08)}.markdown-editor-shell{min-width:0;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.markdown-toolbar{display:flex;align-items:center;gap:2px;overflow-x:auto;padding:4px;background:#f7f0e5;border-bottom:1px solid var(--line);scrollbar-width:none}.markdown-toolbar::-webkit-scrollbar{display:none}.markdown-toolbar button{min-width:44px;min-height:44px;flex:0 0 44px;border:0;border-radius:8px;background:transparent;color:#70675c;display:grid;place-items:center;padding:0}.markdown-toolbar button:hover{background:#fff;color:var(--accent)}.markdown-toolbar button svg{width:16px;height:16px}.markdown-toolbar .markdown-codeblock{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea{width:100%;min-height:180px;border:0;background:#fff;border-radius:0;padding:12px;resize:vertical;outline:none;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea:focus{box-shadow:inset 0 0 0 2px rgba(241,90,41,.15)}.markdown-preview{min-height:180px;max-height:360px;overflow:auto;padding:14px 15px;background:#fff;border:1px solid var(--line);border-radius:11px;color:#39332d;font-size:13px;line-height:1.65;overflow-wrap:anywhere}.markdown-preview-empty{color:var(--muted);display:grid;place-items:center}.markdown-preview>:first-child{margin-top:0}.markdown-preview>:last-child{margin-bottom:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{line-height:1.3;color:#2f2924}.markdown-preview h1{margin:4px 0 12px;font-size:21px}.markdown-preview h2{margin:16px 0 9px;font-size:18px}.markdown-preview h3{margin:14px 0 8px;font-size:16px}.markdown-preview p{margin:0 0 10px}.markdown-preview ul,.markdown-preview ol{margin:8px 0 12px;padding-left:24px}.markdown-preview li{margin:4px 0}.markdown-preview li>p{margin:0}.markdown-preview blockquote{margin:10px 0;padding:7px 12px;border-left:3px solid #d7aa8f;background:#fff7ed;color:#665c51}.markdown-preview code{background:#f2ece2;padding:2px 5px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}.markdown-preview pre{max-width:100%;overflow:auto;margin:10px 0;padding:12px;background:#332f2b;color:#f8f1e7;border:1px solid #e4dacb;border-radius:9px;font-size:12px;line-height:1.55}.markdown-preview pre code{padding:0;background:transparent;color:inherit}.markdown-preview a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.markdown-preview hr{border:0;border-top:1px solid var(--line);margin:16px 0}.markdown-preview>.contains-task-list{list-style:none;padding-left:3px}.markdown-preview .contains-task-list .contains-task-list{padding-left:24px}.markdown-preview .task-list-item{list-style:none;margin:4px 0}.markdown-preview .task-list-item-checkbox{width:16px;height:16px;margin:0 7px 0 0;vertical-align:-3px;accent-color:var(--accent)}.subtasks{display:grid;gap:5px}.subtask-detail{width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;display:flex;align-items:center;gap:8px;border:0;background:#fff;padding:8px;border-radius:7px;text-align:left}.subtask-detail .subtask-check{width:44px;height:44px;flex:0 0 44px;margin:-8px 0 -8px -8px;cursor:pointer;pointer-events:auto}.strike{text-decoration:line-through;color:var(--muted)}.detail-actions{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line)}.secondary{border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:8px;font-weight:650}.danger-text{border:0;background:transparent;color:var(--danger);display:flex;align-items:center;gap:5px;font-size:12px}.danger-text svg{width:14px}
 .field-hint{color:var(--muted);font-size:11px;font-weight:400}.after-completion-fields{display:grid;gap:5px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fffaf4;color:#675f54;font-size:12px}.after-completion-fields>div{display:flex;align-items:center;gap:7px;min-height:44px}.after-completion-fields input{width:76px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px}.after-completion-fields small{color:var(--muted);line-height:1.5}.repeat-save{width:100%;min-height:44px}.repeat-custom-fields{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fffaf4}.repeat-custom-fields>div,.repeat-custom-fields>label{display:flex;align-items:center;gap:8px;color:#675f54;font-size:12px}.repeat-custom-fields input[type="number"]{width:72px}.repeat-custom-fields input,.repeat-custom-fields select{min-height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 9px}.weekday-picker{display:flex;gap:4px;flex-wrap:wrap}.weekday-picker label{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff}.weekday-picker input{position:absolute;opacity:0;pointer-events:none}.weekday-picker label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}.toast,.error-toast{position:fixed;z-index:50;left:50%;bottom:24px;transform:translateX(-50%);background:#322d28;color:#fff;border-radius:9px;padding:10px 15px;box-shadow:var(--shadow);font-size:13px}.error-toast{background:var(--danger);display:flex;align-items:center;gap:10px}.error-toast button{border:0;background:transparent;color:#fff;padding:0}.toast-enter-active,.toast-leave-active{transition:.2s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,8px)}
 @media(max-width:1050px) and (min-width:931px){.shell.detail-open{grid-template-columns:220px minmax(400px,1fr) minmax(280px,30vw)}.shell.sidebar-collapsed.detail-open{grid-template-columns:0 minmax(400px,1fr) minmax(280px,30vw)}main{padding-inline:24px}}
 @media(max-width:930px){.shell{height:100dvh;display:block;overflow:auto}.shell.mobile-sidebar-open{overflow:hidden}.shell.mobile-sidebar-open main{overflow:hidden;touch-action:none}.sidebar{position:fixed;z-index:50;display:flex;top:0;bottom:0;transition:transform .22s ease;box-shadow:var(--shadow);left:0;width:min(300px,86vw);transform:translateX(-105%);overscroll-behavior:contain}.sidebar.open{transform:none}.detail{position:fixed;z-index:40;display:block;left:0;right:0;top:auto;bottom:0;width:100%;max-height:min(88dvh,760px);overflow:auto;background:#fffdf8;border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -14px 38px rgba(56,40,24,.2);transform:translateY(105%);transition:transform .22s ease;padding-bottom:max(16px,env(safe-area-inset-bottom))}.detail.open{transform:none}.detail-head{position:sticky;z-index:2;top:0;height:62px;background:#fffdf8;border-bottom:1px solid var(--line);padding:0 18px}.detail-head .icon{display:grid;width:42px;height:42px;background:var(--accent-soft);color:var(--accent);border-radius:50%}.detail-form{padding:18px}.detail-title textarea{font-size:21px}.more-mask{position:fixed;z-index:45;inset:0;background:rgba(45,38,31,.32);display:flex;align-items:flex-end}.more-sheet{width:100%;background:#fffdf8;border-radius:22px 22px 0 0;padding:14px 16px max(22px,env(safe-area-inset-bottom));display:grid;gap:6px}.more-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px}.more-sheet>button{display:flex;align-items:center;gap:12px;border:0;background:#fff;padding:13px;border-radius:12px;text-align:left}.scrim{position:fixed;z-index:35;inset:0;background:rgba(45,38,31,.32);display:block}.mobile-only{display:grid}main{min-height:100dvh;padding:20px 17px 112px}.topbar{grid-template-rows:auto auto;row-gap:0}.topbar h1{font-size:24px}.search-reveal{max-height:0;opacity:0;overflow:hidden;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:max-height .2s ease,opacity .16s ease,transform .2s ease}.search-reveal.mobile-search-open{max-height:52px;opacity:1;visibility:visible;pointer-events:auto;transform:none;overflow:visible}.search-reveal.mobile-search-pulling{max-height:var(--search-pull);opacity:var(--search-pull-opacity);visibility:visible;transform:translateY(calc(var(--search-pull) - 56px))}.search-pull-hint{display:block;height:16px;margin-top:-16px;text-align:center;color:var(--muted);font-size:11px;line-height:16px;opacity:0;pointer-events:none}.search-reveal.mobile-search-pulling .search-pull-hint{opacity:1}.completed-filter-pill{min-width:138px;height:44px}.completed-filter-pill__track{width:36px;height:22px}.completed-filter-pill__thumb{width:18px;height:18px}.today-board{gap:1px;margin:14px 0 4px;padding:5px}.today-track{min-height:58px;padding:8px 9px;gap:7px}.today-track-head{align-items:flex-start;flex-direction:column;gap:2px}.today-track-head strong{font-size:13px}.search{width:100%;margin:0;padding:8px}.search input{width:100%}.search kbd{display:none}.list-toolbar{height:auto;min-height:36px}.section-heading{margin:12px 0 8px}.empty{min-height:190px}.today-empty-panel{min-height:104px}.row-actions{position:static;opacity:1;pointer-events:auto}.row-actions button{padding:7px;min-height:34px}.list-row{padding:6px 4px}.archived-row{padding:9px 7px;border:1px dashed #e0cfae;border-radius:8px;color:#8a6d3b;background:#fbf3e2}.archived-row .list-row-main{padding-left:14px}.archived-row .list-row-main>svg{color:#c9a45c}.bottom{display:flex;position:fixed;z-index:15;left:0;right:0;bottom:0;justify-content:space-around;background:rgba(255,253,248,.96);border-top:1px solid var(--line);padding:8px 5px max(8px,env(safe-area-inset-bottom));box-shadow:0 -5px 18px rgba(79,59,34,.06)}.bottom button{min-height:44px;min-width:60px;border:0;background:transparent;color:#81786d;display:grid;place-items:center;gap:2px;font-size:10px}.bottom button.active{color:var(--accent);font-weight:700}.bottom svg{width:20px}.toast,.error-toast{bottom:142px}.task-row{padding-inline:2px}.subtask{padding-left:35px}.ghost{opacity:.45}}
diff --git a/frontend/src/style.test.ts b/frontend/src/style.test.ts
index f5d18f7..b1e3b8e 100644
--- a/frontend/src/style.test.ts
+++ b/frontend/src/style.test.ts
@@ -288,6 +288,8 @@ describe('completion feedback motion', () => {
     expect(css).toContain('.markdown-toolbar{display:flex;')
     expect(css).toContain('overflow-x:auto')
     expect(css).toContain('.markdown-toolbar button{min-width:44px;min-height:44px;')
+    expect(css).toContain('.markdown-preview>.contains-task-list{list-style:none;padding-left:3px}')
+    expect(css).toContain('.markdown-preview .contains-task-list .contains-task-list{padding-left:24px}')
   })
 
   it('keeps all task detail changes on the unified save button', () => {