From d34099771cfa99b3b6e4850e7dbaf0b9b28784eb Mon Sep 17 00:00:00 2001
From: Alex Blank <alexblank@fastmail.com>
Date: Wed, 26 Aug 2026 15:26:03 +0200
Subject: [PATCH] feat(quick-pane): add chat-style exchange

---
 test/quick-pane-ui.test.js           |   81 +-
 ui/package-lock.json                 | 1468 +++++++++++++++++++++++++-
 ui/package.json                      |    4 +-
 ui/src/quick-pane/QuickPane.test.tsx |  422 +++++++-
 ui/src/quick-pane/QuickPane.tsx      |  462 +++++---
 ui/src/quick-pane/quick-pane.css     |  505 +++++++--
 6 files changed, 2655 insertions(+), 287 deletions(-)

diff --git a/test/quick-pane-ui.test.js b/test/quick-pane-ui.test.js
index b40f9ad..797dd47 100644
--- a/test/quick-pane-ui.test.js
+++ b/test/quick-pane-ui.test.js
@@ -9,9 +9,12 @@ test("Quick Pane polls snapshots, renders answers, and gates handoff", async ()
   );
   assert.match(source, /get_session_runtime_snapshot/);
   assert.match(source, /setInterval\(\(\) => void refresh\(\), 800\)/);
-  assert.match(source, /\{displayedAnswer && <pre>\{displayedAnswer\}<\/pre>\}/);
-  assert.match(source, /const canContinue = !!escalation \|\| \(!!runtime && !!error\)/);
-  assert.match(source, /\{canContinue && \(/);
+  assert.match(source, /<ReactMarkdown remarkPlugins=\{\[remarkGfm\]\}>/);
+  assert.match(source, /className="quick-pane-notice escalation"/);
+  assert.match(
+    source,
+    /<button type="button" onClick=\{continueFull\}>\s*Continue\s*<\/button>/,
+  );
 });
 
 test("main Settings uses shared catalog selectors with provider derived from models", async () => {
@@ -27,7 +30,10 @@ test("main Settings uses shared catalog selectors with provider derived from mod
       "utf8",
     ),
   ]);
-  assert.match(catalog, /invoke<\{ models\?: Model\[\] \}>\("get_model_catalog"\)/);
+  assert.match(
+    catalog,
+    /invoke<\{ models\?: Model\[\] \}>\("get_model_catalog"\)/,
+  );
   assert.match(app, /getModelCatalog\(\)/);
   assert.match(app, /Quick model[\s\S]*?<select/);
   assert.match(app, /Follow-up model[\s\S]*?<select/);
@@ -42,6 +48,8 @@ test("main Settings uses shared catalog selectors with provider derived from mod
   assert.doesNotMatch(pane, /Save Quick Pane settings/);
   assert.match(pane, /isStreaming === false/);
   assert.match(pane, /current === submitted\.request \? "" : current/);
+  assert.match(pane, /readOnly=\{runActive\}/);
+  assert.match(pane, /window\.requestAnimationFrame\(focusInput\)/);
   assert.match(pane, /\.slice\(0, 5\)/);
   assert.match(pane, /aria-label="Answer history"/);
   assert.doesNotMatch(pane, /localStorage|sessionStorage|save_ui_state/);
@@ -61,7 +69,10 @@ test("Quick Pane keeps slash-containing model IDs atomic and reloads catalog on
   assert.match(pane, /modelId: selectedModel\.modelId/);
   assert.doesNotMatch(pane, /selectedModel\.split/);
   assert.match(pane, /onFocusChanged[\s\S]*?void loadModelCatalog\(\)/);
-  assert.match(catalog, /JSON\.stringify\(\[identity\.provider, identity\.modelId\]\)/);
+  assert.match(
+    catalog,
+    /JSON\.stringify\(\[identity\.provider, identity\.modelId\]\)/,
+  );
   assert.match(catalog, /JSON\.parse\(value\)/);
 });
 
@@ -79,22 +90,31 @@ test("Quick Pane routes extension responses through existing bridge command", as
 });
 
 test("Quick Pane uses native dimensions and request-first compact layout", async () => {
-  const [source, stylesheet, configSource, nativeSource, capabilitySource] = await Promise.all([
-    readFile(
-      new URL("../ui/src/quick-pane/QuickPane.tsx", import.meta.url),
-      "utf8",
-    ),
-    readFile(
-      new URL("../ui/src/quick-pane/quick-pane.css", import.meta.url),
-      "utf8",
-    ),
-    readFile(new URL("../ui/src-tauri/tauri.conf.json", import.meta.url), "utf8"),
-    readFile(new URL("../ui/src-tauri/src/lib.rs", import.meta.url), "utf8"),
-    readFile(new URL("../ui/src-tauri/capabilities/default.json", import.meta.url), "utf8"),
-  ]);
+  const [source, stylesheet, configSource, nativeSource, capabilitySource] =
+    await Promise.all([
+      readFile(
+        new URL("../ui/src/quick-pane/QuickPane.tsx", import.meta.url),
+        "utf8",
+      ),
+      readFile(
+        new URL("../ui/src/quick-pane/quick-pane.css", import.meta.url),
+        "utf8",
+      ),
+      readFile(
+        new URL("../ui/src-tauri/tauri.conf.json", import.meta.url),
+        "utf8",
+      ),
+      readFile(new URL("../ui/src-tauri/src/lib.rs", import.meta.url), "utf8"),
+      readFile(
+        new URL("../ui/src-tauri/capabilities/default.json", import.meta.url),
+        "utf8",
+      ),
+    ]);
   const config = JSON.parse(configSource);
   const capability = JSON.parse(capabilitySource);
-  const quickPane = config.app.windows.find((window) => window.label === "quick-pane");
+  const quickPane = config.app.windows.find(
+    (window) => window.label === "quick-pane",
+  );
 
   assert.deepEqual(
     {
@@ -107,12 +127,16 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
   assert.ok(capability.windows.includes("quick-pane"));
   assert.match(nativeSource, /WindowEvent::CloseRequested/);
   assert.match(nativeSource, /api\.prevent_close\(\)/);
-  assert.match(nativeSource, /WebviewWindowBuilder::from_config\(app, config\)/);
+  assert.match(
+    nativeSource,
+    /WebviewWindowBuilder::from_config\(app, config\)/,
+  );
   assert.match(nativeSource, /get_or_create_quick_pane/);
   assert.doesNotMatch(source, /onCloseRequested/);
   assert.match(source, /className="quick-pane-request"/);
-  assert.match(source, /className="quick-pane-output"/);
-  assert.match(source, /<footer className="quick-pane-controls">/);
+  assert.match(source, /className="quick-pane-exchange"/);
+  assert.match(source, /className="quick-pane-composer"/);
+  assert.match(source, /className="quick-pane-send"/);
   assert.match(source, /ref=\{inputRef\}/);
   assert.match(source, /focusInput\(\)/);
   assert.doesNotMatch(source, /if \(!event\.payload\)[\s\S]*?hide\(/);
@@ -121,9 +145,16 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
     /event\.key === "Enter" &&\s*!event\.shiftKey &&\s*!event\.nativeEvent\.isComposing/,
   );
   assert.match(source, /event\.preventDefault\(\);\s*void run\(\);/);
-  assert.match(stylesheet, /\.quick-pane-request[\s\S]*?flex: 1 1 auto/);
-  assert.match(stylesheet, /\.quick-pane-output[\s\S]*?max-height: 108px[\s\S]*?overflow: auto/);
-  assert.match(stylesheet, /\.quick-pane-controls[\s\S]*?display: flex/);
+  assert.match(
+    stylesheet,
+    /\.quick-pane-exchange[\s\S]*?flex: 1 1 auto[\s\S]*?overflow-y: auto/,
+  );
+  assert.match(
+    stylesheet,
+    /\.quick-pane-composer[\s\S]*?height: 120px[\s\S]*?min-height: 110px[\s\S]*?max-height: 130px/,
+  );
+  assert.match(stylesheet, /\.quick-pane-send[\s\S]*?position: absolute/);
+  assert.match(stylesheet, /@media \(max-width: 400px\)/);
   assert.match(stylesheet, /#f0a347/);
   assert.doesNotMatch(stylesheet, /#8aa9d6|#46494f|#23252a/);
 });
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 2d3d1e1..5e3c1a7 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13,7 +13,9 @@
         "@tauri-apps/plugin-dialog": "^2.7.2",
         "@tauri-apps/plugin-opener": "^2",
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-markdown": "^10.1.0",
+        "remark-gfm": "^4.0.1"
       },
       "devDependencies": {
         "@tauri-apps/cli": "^2",
@@ -1766,6 +1768,15 @@
         "assertion-error": "^2.0.1"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/deep-eql": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -1777,14 +1788,45 @@
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
       "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz",
+      "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "19.2.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1800,6 +1842,18 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.4.tgz",
+      "integrity": "sha512-JL+CF0GeLHyPWI0rXu7UnxgiuOm9UQWzadi0OYOJNhNO2q6EZElpwlgXkNkfU1PzANDHq3YcwKVZprdvS+BrbQ==",
+      "license": "ISC"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1991,6 +2045,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.1.tgz",
@@ -2069,6 +2133,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
@@ -2086,6 +2160,46 @@
         "node": ">=18"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
@@ -2096,6 +2210,16 @@
         "node": ">= 16"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2128,7 +2252,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -2149,7 +2272,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2170,6 +2292,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -2184,12 +2319,24 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -2277,6 +2424,28 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -2297,6 +2466,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2340,6 +2515,46 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -2353,6 +2568,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -2404,6 +2629,68 @@
         "node": ">=8"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -2484,6 +2771,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loupe": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
@@ -2522,6 +2819,849 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -2536,7 +3676,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -2575,6 +3714,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
@@ -2670,6 +3834,16 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2709,6 +3883,33 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2733,6 +3934,72 @@
         "node": ">=8"
       }
     },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.62.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
@@ -2838,6 +4105,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -2852,6 +4129,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -2885,6 +4176,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -2999,6 +4308,26 @@
         "node": ">=18"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@@ -3013,6 +4342,93 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -3044,6 +4460,34 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "7.3.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz",
@@ -3338,6 +4782,16 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/ui/package.json b/ui/package.json
index a27ae0d..210bb9c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,7 +23,9 @@
     "@tauri-apps/plugin-dialog": "^2.7.2",
     "@tauri-apps/plugin-opener": "^2",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",
diff --git a/ui/src/quick-pane/QuickPane.test.tsx b/ui/src/quick-pane/QuickPane.test.tsx
index d7a3a17..7c3a848 100644
--- a/ui/src/quick-pane/QuickPane.test.tsx
+++ b/ui/src/quick-pane/QuickPane.test.tsx
@@ -112,8 +112,20 @@ describe("QuickPane", () => {
       screen.getByPlaceholderText(/Ask a quick question/),
       "Inspect",
     );
-    await user.click(screen.getByRole("button", { name: "Ask" }));
-    await screen.findByText(/Quick request running/);
+    await user.click(screen.getByRole("button", { name: "Send request" }));
+    const exchange = screen.getByRole("region", { name: "Quick exchange" });
+    expect(within(exchange).getByText("Inspect")).toBeInTheDocument();
+    const visualActivity = within(exchange).getByText(/Thinking · \d+s/);
+    expect(visualActivity.closest(".quick-pane-activity")).toHaveAttribute(
+      "aria-hidden",
+      "true",
+    );
+    const activityAnnouncement = within(exchange).getByText("Thinking", {
+      selector: ".quick-pane-activity-announcement",
+    });
+    expect(activityAnnouncement).toHaveAttribute("aria-live", "polite");
+    expect(activityAnnouncement).toHaveTextContent("Thinking");
+    expect(activityAnnouncement).not.toHaveTextContent("·");
 
     await act(async () => mocks.focusHandler?.({ payload: true }));
     expect(
@@ -167,7 +179,7 @@ describe("QuickPane", () => {
     render(<QuickPane />);
     const input = await screen.findByPlaceholderText(/Ask a quick question/);
     fireEvent.change(input, { target: { value: "Inspect once" } });
-    const ask = screen.getByRole("button", { name: "Ask" });
+    const ask = screen.getByRole("button", { name: "Send request" });
     fireEvent.click(ask);
     fireEvent.click(ask);
 
@@ -176,7 +188,11 @@ describe("QuickPane", () => {
         ([command]) => command === "create_quick_runtime",
       ),
     ).toHaveLength(1);
-    expect(screen.getByRole("button", { name: "Starting…" })).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "Starting request" }),
+    ).toBeDisabled();
+    expect(input).toHaveFocus();
+    expect(input).toHaveAttribute("readonly");
 
     await act(async () => {
       resolveCreate?.({
@@ -186,6 +202,65 @@ describe("QuickPane", () => {
     });
   });
 
+  it("mounts an empty busy live region before the first snapshot and keeps it through completion", async () => {
+    const user = userEvent.setup();
+    let resolveSnapshot!: (value: ReturnType<typeof snapshot>) => void;
+    const firstSnapshot = new Promise<ReturnType<typeof snapshot>>(
+      (resolve) => {
+        resolveSnapshot = resolve;
+      },
+    );
+    mocks.invoke.mockImplementation((command: string) => {
+      switch (command) {
+        case "load_ui_state":
+          return Promise.resolve(uiState);
+        case "get_model_catalog":
+          return Promise.resolve({
+            models: [{ provider: "provider", id: "quick/model" }],
+          });
+        case "create_quick_runtime":
+          return Promise.resolve({
+            runtime: { agentId: "agent-1", runtimeId: "runtime-1" },
+          });
+        case "get_session_runtime_snapshot":
+          return firstSnapshot;
+        default:
+          return Promise.resolve(undefined);
+      }
+    });
+
+    render(<QuickPane />);
+    const input = await screen.findByRole("textbox", { name: "Request" });
+    await user.type(input, "Inspect this");
+    await user.click(screen.getByRole("button", { name: "Send request" }));
+
+    const assistantResponse = screen.getByRole("region", {
+      name: "Assistant response",
+    });
+    expect(assistantResponse).toBeEmptyDOMElement();
+    expect(assistantResponse).toHaveAttribute("aria-live", "polite");
+    expect(assistantResponse).toHaveAttribute("aria-busy", "true");
+    await waitFor(() =>
+      expect(mocks.invoke).toHaveBeenCalledWith("submit_prompt", {
+        agentId: "agent-1",
+        message: expect.any(String),
+      }),
+    );
+
+    await act(async () => {
+      resolveSnapshot(snapshot("Final answer", false));
+      await firstSnapshot;
+    });
+    expect(await screen.findByText("Final answer")).toBeInTheDocument();
+    expect(screen.getByRole("region", { name: "Assistant response" })).toBe(
+      assistantResponse,
+    );
+    expect(assistantResponse).toHaveAttribute("aria-busy", "false");
+    expect(
+      within(assistantResponse).getByText("Response complete."),
+    ).toBeInTheDocument();
+  });
+
   it("clears only the submitted request after a completed non-streaming answer", async () => {
     const user = userEvent.setup();
     let currentSnapshot = snapshot("Partial answer", true);
@@ -211,20 +286,44 @@ describe("QuickPane", () => {
     render(<QuickPane />);
     const input = await screen.findByPlaceholderText(/Ask a quick question/);
     await user.type(input, "Inspect this");
-    await user.click(screen.getByRole("button", { name: "Ask" }));
+    await user.click(screen.getByRole("button", { name: "Send request" }));
 
     expect(await screen.findByText("Partial answer")).toBeInTheDocument();
+    expect(
+      within(screen.getByRole("region", { name: "Quick exchange" })).getByText(
+        "Inspect this",
+      ),
+    ).toBeInTheDocument();
+    const assistantResponse = screen.getByRole("region", {
+      name: "Assistant response",
+    });
+    expect(assistantResponse).toHaveAttribute("aria-live", "polite");
+    expect(assistantResponse).toHaveAttribute("aria-busy", "true");
+    expect(
+      within(assistantResponse).queryByText("Response complete."),
+    ).toBeNull();
     expect(input).toHaveValue("Inspect this");
+    expect(input).toHaveAttribute("readonly");
+    expect(input).toHaveFocus();
 
     currentSnapshot = snapshot("Final answer", false);
     expect(
       await screen.findByText("Final answer", {}, { timeout: 2_000 }),
     ).toBeInTheDocument();
     await waitFor(() => expect(input).toHaveValue(""));
+    expect(assistantResponse).toHaveAttribute("aria-busy", "false");
+    expect(
+      within(assistantResponse).getByText("Response complete."),
+    ).toBeInTheDocument();
+    expect(input).not.toHaveAttribute("readonly");
+    expect(input).toHaveFocus();
 
     await user.type(input, "Next draft");
     await new Promise((resolve) => window.setTimeout(resolve, 900));
     expect(input).toHaveValue("Next draft");
+    expect(
+      within(assistantResponse).getByText("Response complete."),
+    ).toBeInTheDocument();
   });
 
   it("keeps five in-memory answers and history selection preserves current answer", async () => {
@@ -263,7 +362,7 @@ describe("QuickPane", () => {
     const input = await screen.findByPlaceholderText(/Ask a quick question/);
     for (let index = 1; index <= 6; index += 1) {
       await user.type(input, `Request ${index}`);
-      await user.click(screen.getByRole("button", { name: "Ask" }));
+      await user.click(screen.getByRole("button", { name: "Send request" }));
       expect(await screen.findByText(`Answer ${index}`)).toBeInTheDocument();
       await waitFor(() => expect(input).toHaveValue(""));
     }
@@ -277,17 +376,320 @@ describe("QuickPane", () => {
       within(history).getByRole("option", { name: "Request 2" }),
     ).toBeInTheDocument();
 
+    await user.type(input, "Composer draft");
     await user.selectOptions(history, "runtime-2");
-    expect(screen.getByText("Answer 2")).toBeInTheDocument();
+    const exchange = screen.getByRole("region", { name: "Quick exchange" });
+    expect(within(exchange).getByText("Request 2")).toBeInTheDocument();
+    expect(within(exchange).getByText("Answer 2")).toBeInTheDocument();
     expect(screen.queryByText("Answer 6")).toBeNull();
+    expect(
+      within(exchange).getByRole("region", { name: "Assistant response" }),
+    ).toHaveAttribute("aria-live", "off");
+    expect(input).toHaveValue("Composer draft");
     await user.selectOptions(history, "");
-    expect(screen.getByText("Answer 6")).toBeInTheDocument();
+    expect(within(exchange).getByText("Request 6")).toBeInTheDocument();
+    expect(within(exchange).getByText("Answer 6")).toBeInTheDocument();
+    expect(
+      within(exchange).getByRole("region", { name: "Assistant response" }),
+    ).toHaveAttribute("aria-live", "polite");
+    expect(input).toHaveValue("Composer draft");
     expect(mocks.invoke).not.toHaveBeenCalledWith(
       "save_ui_state",
       expect.anything(),
     );
   });
 
+  it("suppresses partial escalation prefixes and delays its notice until completion", async () => {
+    const user = userEvent.setup();
+    let currentSnapshot = snapshot("", true);
+    mocks.invoke.mockImplementation((command: string) => {
+      switch (command) {
+        case "load_ui_state":
+          return Promise.resolve(uiState);
+        case "get_model_catalog":
+          return Promise.resolve({
+            models: [{ provider: "provider", id: "quick/model" }],
+          });
+        case "create_quick_runtime":
+          return Promise.resolve({
+            runtime: { agentId: "agent-1", runtimeId: "runtime-1" },
+          });
+        case "get_session_runtime_snapshot":
+          return Promise.resolve(currentSnapshot);
+        default:
+          return Promise.resolve(undefined);
+      }
+    });
+
+    render(<QuickPane />);
+    const input = await screen.findByRole("textbox", { name: "Request" });
+    await user.type(input, "Change files");
+    await user.click(screen.getByRole("button", { name: "Send request" }));
+
+    const assistantResponse = screen.getByRole("region", {
+      name: "Assistant response",
+    });
+    const prefixes = ["[", "[ESCAL", "[ESCALATE]"];
+    for (const [index, prefix] of prefixes.entries()) {
+      currentSnapshot = {
+        ...snapshot(prefix, true),
+        runtime: { activeTool: `functions.prefix_${index + 1}` },
+      };
+      expect(
+        await screen.findByText(
+          `Prefix ${index + 1}`,
+          { selector: ".quick-pane-activity > span:last-child" },
+          { timeout: 2_000 },
+        ),
+      ).toBeInTheDocument();
+      expect(assistantResponse).toBeEmptyDOMElement();
+      expect(
+        screen.queryByText("Continue in full session"),
+      ).not.toBeInTheDocument();
+    }
+
+    currentSnapshot = snapshot("[ESCALATE]Needs full session.", true);
+    expect(
+      await within(assistantResponse).findByText(
+        "Needs full session.",
+        {},
+        { timeout: 2_000 },
+      ),
+    ).toBeInTheDocument();
+    expect(assistantResponse).toHaveAttribute("aria-busy", "true");
+    expect(
+      screen.queryByText("Continue in full session"),
+    ).not.toBeInTheDocument();
+
+    currentSnapshot = snapshot("[ESCALATE]Needs full session.", false);
+    await waitFor(
+      () => expect(assistantResponse).toHaveAttribute("aria-busy", "false"),
+      { timeout: 2_000 },
+    );
+    expect(assistantResponse).toHaveAttribute("aria-live", "polite");
+    expect(assistantResponse).toHaveAttribute("aria-busy", "false");
+    expect(
+      within(assistantResponse).getAllByText("Response complete."),
+    ).toHaveLength(1);
+    expect(screen.getByText("Continue in full session")).toBeInTheDocument();
+  });
+
+  it("never renders or stores a completed partial escalation marker", async () => {
+    const user = userEvent.setup();
+    mocks.invoke.mockImplementation((command: string) => {
+      switch (command) {
+        case "load_ui_state":
+          return Promise.resolve(uiState);
+        case "get_model_catalog":
+          return Promise.resolve({
+            models: [{ provider: "provider", id: "quick/model" }],
+          });
+        case "create_quick_runtime":
+          return Promise.resolve({
+            runtime: { agentId: "agent-1", runtimeId: "runtime-1" },
+          });
+        case "get_session_runtime_snapshot":
+          return Promise.resolve(snapshot("[ESCAL", false));
+        default:
+          return Promise.resolve(undefined);
+      }
+    });
+
+    render(<QuickPane />);
+    const input = await screen.findByRole("textbox", { name: "Request" });
+    await user.type(input, "Needs review");
+    await user.click(screen.getByRole("button", { name: "Send request" }));
+
+    const assistantResponse = screen.getByRole("region", {
+      name: "Assistant response",
+    });
+    await waitFor(
+      () => expect(assistantResponse).toHaveAttribute("aria-busy", "false"),
+      { timeout: 2_000 },
+    );
+    expect(assistantResponse).not.toHaveTextContent("[ESCAL");
+    expect(screen.queryByText("Continue in full session")).toBeNull();
+    expect(
+      screen.getByRole("combobox", { name: "Answer history" }),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps runtime error and extension visible while viewing history", async () => {
+    const user = userEvent.setup();
+    let runtimeCount = 0;
+    let runtimeFailed = false;
+    mocks.invoke.mockImplementation(
+      (command: string, payload?: { runtimeId?: string }) => {
+        switch (command) {
+          case "load_ui_state":
+            return Promise.resolve(uiState);
+          case "get_model_catalog":
+            return Promise.resolve({
+              models: [{ provider: "provider", id: "quick/model" }],
+            });
+          case "create_quick_runtime":
+            runtimeCount += 1;
+            return Promise.resolve({
+              runtime: {
+                agentId: `agent-${runtimeCount}`,
+                runtimeId: `runtime-${runtimeCount}`,
+              },
+            });
+          case "get_session_runtime_snapshot":
+            if (payload?.runtimeId === "runtime-1")
+              return Promise.resolve(snapshot("First answer", false));
+            return Promise.resolve({
+              runtime: {
+                activeTool: "functions.read",
+                error: runtimeFailed
+                  ? { message: "Runtime disconnected." }
+                  : undefined,
+              },
+              state: { data: { isStreaming: true } },
+              transcript: { data: { messages: [] } },
+              extensions: [
+                {
+                  id: "permission-1",
+                  method: "confirm",
+                  title: "Run guarded command",
+                  message: "Approval needed",
+                },
+              ],
+            });
+          default:
+            return Promise.resolve(undefined);
+        }
+      },
+    );
+
+    render(<QuickPane />);
+    const input = await screen.findByRole("textbox", { name: "Request" });
+    await user.type(input, "First request");
+    await user.click(screen.getByRole("button", { name: "Send request" }));
+    expect(
+      await screen.findByText("First answer", {}, { timeout: 2_000 }),
+    ).toBeInTheDocument();
+    await waitFor(() => expect(input).toHaveValue(""));
+
+    const history = screen.getByRole("combobox", { name: "Answer history" });
+    await user.type(input, "Active request");
+    await user.click(screen.getByRole("button", { name: "Send request" }));
+    expect(
+      await screen.findByRole("dialog", { name: "Review request" }),
+    ).toBeInTheDocument();
+    expect(history).toBeDisabled();
+    expect(history).toHaveValue("");
+
+    runtimeFailed = true;
+    expect(
+      await screen.findByText("Runtime disconnected.", {}, { timeout: 2_000 }),
+    ).toBeInTheDocument();
+    await waitFor(() => expect(history).not.toBeDisabled());
+    await user.selectOptions(history, "runtime-1");
+
+    const exchange = screen.getByRole("region", { name: "Quick exchange" });
+    expect(within(exchange).getByText("First request")).toBeInTheDocument();
+    expect(within(exchange).getByText("First answer")).toBeInTheDocument();
+    expect(within(exchange).getByRole("alert")).toHaveTextContent(
+      "Runtime disconnected.",
+    );
+    expect(within(exchange).getByRole("status")).toHaveTextContent(
+      "Quick runtime failed.",
+    );
+    expect(
+      within(exchange).getByRole("dialog", { name: "Review request" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Run guarded command")).toBeInTheDocument();
+    expect(screen.getByText("Approval needed")).toBeInTheDocument();
+  });
+
+  it("renders safe GFM Markdown and reports active tools without tool cards", async () => {
+    const user = userEvent.setup();
+    let currentSnapshot: ReturnType<typeof snapshot> & {
+      runtime: { activeTool?: string };
+    } = {
+      ...snapshot("", true),
+      runtime: { activeTool: "functions.grep" },
+    };
+    mocks.invoke.mockImplementation((command: string) => {
+      switch (command) {
+        case "load_ui_state":
+          return Promise.resolve(uiState);
+        case "get_model_catalog":
+          return Promise.resolve({
+            models: [{ provider: "provider", id: "quick/model" }],
+          });
+        case "create_quick_runtime":
+          return Promise.resolve({
+            runtime: { agentId: "agent-1", runtimeId: "runtime-1" },
+          });
+        case "get_session_runtime_snapshot":
+          return Promise.resolve(currentSnapshot);
+        default:
+          return Promise.resolve(undefined);
+      }
+    });
+
+    render(<QuickPane />);
+    const input = await screen.findByRole("textbox", { name: "Request" });
+    await user.type(input, "Explain output");
+    await user.click(screen.getByRole("button", { name: "Send request" }));
+    expect(
+      await screen.findByText("Searching files", {
+        selector: ".quick-pane-activity > span:last-child",
+      }),
+    ).toBeInTheDocument();
+
+    currentSnapshot = snapshot(
+      "## Result\n\n- item\n\n`const safe = true`\n\n[unsafe](javascript:alert(1))\n\n<img src=x onerror=alert(1)>",
+      false,
+    );
+    expect(
+      await screen.findByRole(
+        "heading",
+        { name: "Result" },
+        { timeout: 2_000 },
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText("const safe = true")).toBeInTheDocument();
+    expect(screen.getByText("unsafe").closest("a")).toHaveAttribute("href", "");
+    expect(document.querySelector("img")).toBeNull();
+    expect(document.querySelector("details.tool-result")).toBeNull();
+  });
+
+  it("uses Enter to send and leaves Shift+Enter available for newlines", async () => {
+    mocks.invoke.mockImplementation((command: string) => {
+      if (command === "load_ui_state") return Promise.resolve(uiState);
+      if (command === "get_model_catalog")
+        return Promise.resolve({
+          models: [{ provider: "provider", id: "quick/model" }],
+        });
+      if (command === "create_quick_runtime")
+        return Promise.resolve({
+          runtime: { agentId: "agent-1", runtimeId: "runtime-1" },
+        });
+      if (command === "get_session_runtime_snapshot")
+        return Promise.resolve(snapshot("", true));
+      return Promise.resolve(undefined);
+    });
+
+    render(<QuickPane />);
+    const input = await screen.findByRole("textbox", { name: "Request" });
+    fireEvent.change(input, { target: { value: "Inspect" } });
+    fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
+    expect(mocks.invoke).not.toHaveBeenCalledWith(
+      "create_quick_runtime",
+      expect.anything(),
+    );
+
+    fireEvent.keyDown(input, { key: "Enter" });
+    await waitFor(() =>
+      expect(mocks.invoke).toHaveBeenCalledWith("create_quick_runtime", {
+        worktreePath: "/repo",
+      }),
+    );
+  });
+
   it("leaves close interception native while preserving close and Escape hiding", async () => {
     mocks.invoke.mockImplementation((command: string) => {
       if (command === "load_ui_state") return Promise.resolve(uiState);
@@ -300,7 +702,9 @@ describe("QuickPane", () => {
     await screen.findByPlaceholderText(/Ask a quick question/);
     expect(mocks.onCloseRequested).not.toHaveBeenCalled();
 
-    await userEvent.click(screen.getByRole("button", { name: "Close" }));
+    await userEvent.click(
+      screen.getByRole("button", { name: "Close Quick Pane" }),
+    );
     fireEvent.keyDown(window, { key: "Escape" });
     expect(mocks.hide).toHaveBeenCalledTimes(2);
   });
diff --git a/ui/src/quick-pane/QuickPane.tsx b/ui/src/quick-pane/QuickPane.tsx
index 2494ef7..7991003 100644
--- a/ui/src/quick-pane/QuickPane.tsx
+++ b/ui/src/quick-pane/QuickPane.tsx
@@ -2,6 +2,8 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { ExtensionDialog } from "../components/ExtensionDialog";
 import {
   catalogModels,
@@ -20,6 +22,8 @@ import type {
   UiState,
 } from "../workspace/types";
 
+const ESCALATION_MARKER = "[ESCALATE]";
+
 const defaults: QuickPaneSettings = {
   workspace: "",
   provider: "",
@@ -34,6 +38,10 @@ const defaults: QuickPaneSettings = {
 
 type Runtime = { agentId: string; runtimeId: string };
 type HistoryEntry = { id: string; request: string; answer: string };
+type ActivitySnapshot = {
+  activeTool?: string;
+  hasAssistantText: boolean;
+};
 
 function historyLabel(request: string) {
   const concise = request.replace(/\s+/g, " ").trim();
@@ -76,10 +84,29 @@ function assistantText(snapshot: RuntimeSnapshot) {
     .join("\n");
 }
 
+function toolActivityLabel(tool: string) {
+  const segments = tool.split(".");
+  const name = segments[segments.length - 1]?.replace(/[_-]+/g, " ") ?? tool;
+  const labels: Record<string, string> = {
+    bash: "Running command",
+    edit: "Editing file",
+    find: "Finding files",
+    grep: "Searching files",
+    ls: "Listing files",
+    read: "Reading file",
+    write: "Writing file",
+  };
+  return (
+    labels[name.toLowerCase()] ??
+    `${name.charAt(0).toUpperCase()}${name.slice(1)}`
+  );
+}
+
 export default function QuickPane() {
   const [settings, setSettings] = useState<QuickPaneSettings>(defaults);
   const [settingsLoaded, setSettingsLoaded] = useState(false);
   const [request, setRequest] = useState("");
+  const [currentRequest, setCurrentRequest] = useState("");
   const [submissionStarting, setSubmissionStarting] = useState(false);
   const [thinkingLevel, setThinkingLevel] = useState("medium");
   const [models, setModels] = useState<Model[]>([]);
@@ -87,22 +114,29 @@ export default function QuickPane() {
     provider: "",
     modelId: "",
   });
-  const [status, setStatus] = useState("Loading Quick Pane settings…");
+  const [notice, setNotice] = useState("Loading Quick Pane settings…");
   const [error, setError] = useState<string>();
   const [catalogError, setCatalogError] = useState<string>();
   const [runtime, setRuntime] = useState<Runtime>();
   const [answer, setAnswer] = useState("");
   const [completedRuntimeId, setCompletedRuntimeId] = useState<string>();
+  const [failedRuntimeId, setFailedRuntimeId] = useState<string>();
   const [history, setHistory] = useState<HistoryEntry[]>([]);
   const [selectedHistoryId, setSelectedHistoryId] = useState("");
   const [escalation, setEscalation] = useState<string>();
   const [extension, setExtension] = useState<Extension>();
+  const [activitySnapshot, setActivitySnapshot] = useState<ActivitySnapshot>({
+    hasAssistantText: false,
+  });
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const runtimeRef = useRef<Runtime | undefined>(undefined);
   const submittedRequestRef = useRef<
     { runtimeId: string; request: string } | undefined
   >(undefined);
+  const promptSubmittedRuntimeRef = useRef<string | undefined>(undefined);
   const completedRuntimeRef = useRef<string | undefined>(undefined);
   const submissionStartingRef = useRef(false);
+  const runStartedAtRef = useRef<number | undefined>(undefined);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const invalid = useMemo(() => settingsError(settings), [settings]);
   const modelOptions = useMemo(
@@ -113,11 +147,32 @@ export default function QuickPane() {
     selectedModel.provider && selectedModel.modelId
       ? modelIdentityValue(selectedModel)
       : "";
-  const canContinue = !!escalation || (!!runtime && !!error);
-  const displayedAnswer = selectedHistoryId
-    ? (history.find((entry) => entry.id === selectedHistoryId)?.answer ??
-      answer)
-    : answer;
+  const runActive =
+    submissionStarting ||
+    (!!runtime &&
+      completedRuntimeId !== runtime.runtimeId &&
+      failedRuntimeId !== runtime.runtimeId);
+  const viewingHistory = !!selectedHistoryId && !runActive;
+  const displayedEntry = viewingHistory
+    ? history.find((entry) => entry.id === selectedHistoryId)
+    : undefined;
+  const displayedRequest = displayedEntry?.request ?? currentRequest;
+  const displayedAnswer = displayedEntry?.answer ?? answer;
+  const displayedAnswerComplete =
+    !viewingHistory && !!runtime && completedRuntimeId === runtime.runtimeId;
+  const activityPhase = submissionStarting
+    ? "Starting"
+    : runActive && activitySnapshot.activeTool
+      ? toolActivityLabel(activitySnapshot.activeTool)
+      : runActive && activitySnapshot.hasAssistantText
+        ? "Answering"
+        : runActive
+          ? "Thinking"
+          : "";
+  const activity =
+    activityPhase === "Thinking"
+      ? `${activityPhase} · ${elapsedSeconds}s`
+      : activityPhase;
 
   const dismissPane = () => getCurrentWindow().hide();
   const focusInput = () => inputRef.current?.focus();
@@ -149,7 +204,7 @@ export default function QuickPane() {
         provider: nextSettings.provider,
         modelId: nextSettings.model,
       });
-      setStatus("");
+      setNotice("");
       if (active) await loadModelCatalog();
     })();
     return () => {
@@ -166,6 +221,22 @@ export default function QuickPane() {
     if (settingsLoaded) focusInput();
   }, [settingsLoaded]);
 
+  useEffect(() => {
+    if (!runActive) return;
+    const updateElapsed = () =>
+      setElapsedSeconds(
+        Math.max(
+          0,
+          Math.floor(
+            (Date.now() - (runStartedAtRef.current ?? Date.now())) / 1000,
+          ),
+        ),
+      );
+    updateElapsed();
+    const interval = window.setInterval(updateElapsed, 1_000);
+    return () => window.clearInterval(interval);
+  }, [runActive]);
+
   useEffect(() => {
     const paneWindow = getCurrentWindow();
     const settingsListener = listen<QuickPaneSettings>(
@@ -209,42 +280,58 @@ export default function QuickPane() {
         );
         if (!active) return;
         const text = assistantText(snapshot);
-        if (text) {
-          setAnswer(text);
-          if (text.includes("[ESCALATE]")) {
-            setEscalation(
-              text.replace("[ESCALATE]", "").trim() ||
-                "Quick agent requested a full session.",
+        const responseComplete =
+          snapshot.state?.data?.isStreaming === false &&
+          promptSubmittedRuntimeRef.current === runtime.runtimeId;
+        const escalated = text.startsWith(ESCALATION_MARKER);
+        const awaitingEscalationMarker =
+          !!text && ESCALATION_MARKER.startsWith(text);
+        const result = awaitingEscalationMarker
+          ? ""
+          : escalated
+            ? text.slice(ESCALATION_MARKER.length).trim()
+            : text;
+        setActivitySnapshot({
+          activeTool: snapshot.runtime.activeTool,
+          hasAssistantText: !!text,
+        });
+        if (awaitingEscalationMarker) {
+          setAnswer("");
+        } else if (text) {
+          setAnswer(result);
+        }
+        if (escalated && responseComplete) {
+          setEscalation(result || "Quick agent requested a full session.");
+        }
+        if (
+          responseComplete &&
+          completedRuntimeRef.current !== runtime.runtimeId
+        ) {
+          completedRuntimeRef.current = runtime.runtimeId;
+          setCompletedRuntimeId(runtime.runtimeId);
+          setNotice("");
+          const submitted = submittedRequestRef.current;
+          if (submitted?.runtimeId === runtime.runtimeId) {
+            setRequest((current) =>
+              current === submitted.request ? "" : current,
+            );
+            setHistory((current) =>
+              [
+                {
+                  id: runtime.runtimeId,
+                  request: submitted.request,
+                  answer: result,
+                },
+                ...current.filter((entry) => entry.id !== runtime.runtimeId),
+              ].slice(0, 5),
             );
           }
-          if (
-            snapshot.state?.data?.isStreaming === false &&
-            completedRuntimeRef.current !== runtime.runtimeId
-          ) {
-            completedRuntimeRef.current = runtime.runtimeId;
-            setCompletedRuntimeId(runtime.runtimeId);
-            setStatus("Quick answer ready.");
-            const submitted = submittedRequestRef.current;
-            if (submitted?.runtimeId === runtime.runtimeId) {
-              setRequest((current) =>
-                current === submitted.request ? "" : current,
-              );
-              setHistory((current) =>
-                [
-                  {
-                    id: runtime.runtimeId,
-                    request: submitted.request,
-                    answer: text,
-                  },
-                  ...current.filter((entry) => entry.id !== runtime.runtimeId),
-                ].slice(0, 5),
-              );
-            }
-          }
+          window.requestAnimationFrame(focusInput);
         }
         setExtension(snapshot.extensions[0]);
         if (snapshot.runtime.error?.message) {
           setError(snapshot.runtime.error.message);
+          setFailedRuntimeId(runtime.runtimeId);
           setEscalation(
             "Quick runtime failed. Continue in a full session if needed.",
           );
@@ -268,21 +355,23 @@ export default function QuickPane() {
       setEscalation(
         `Quick time budget of ${settings.maximumSeconds} seconds reached.`,
       );
-      setStatus(
-        "Quick time budget reached. Showing partial result if available.",
-      );
+      setFailedRuntimeId(runtime.runtimeId);
       invoke("abort", { agentId: runtime.agentId }).catch(() => undefined);
     }, settings.maximumSeconds * 1000);
     return () => window.clearTimeout(timeout);
   }, [completedRuntimeId, runtime, settings.maximumSeconds]);
 
   async function run() {
-    if (submissionStartingRef.current) return;
+    if (submissionStartingRef.current || runActive) return;
     if (invalid || !request.trim())
       return setError(invalid ?? "Enter a request.");
     submissionStartingRef.current = true;
     setSubmissionStarting(true);
     const submittedRequest = request;
+    setCurrentRequest(submittedRequest);
+    setSelectedHistoryId("");
+    runStartedAtRef.current = Date.now();
+    setElapsedSeconds(0);
     try {
       const previous = runtimeRef.current;
       if (previous)
@@ -291,15 +380,17 @@ export default function QuickPane() {
         }).catch(() => undefined);
       runtimeRef.current = undefined;
       submittedRequestRef.current = undefined;
+      promptSubmittedRuntimeRef.current = undefined;
       completedRuntimeRef.current = undefined;
       setRuntime(undefined);
       setCompletedRuntimeId(undefined);
-      setSelectedHistoryId("");
+      setFailedRuntimeId(undefined);
       setError(undefined);
       setAnswer("");
       setEscalation(undefined);
       setExtension(undefined);
-      setStatus("Starting advisory quick agent…");
+      setActivitySnapshot({ hasAssistantText: false });
+      setNotice("");
       const result = await invoke<{ runtime: Runtime }>(
         "create_quick_runtime",
         {
@@ -326,17 +417,15 @@ export default function QuickPane() {
         agentId: result.runtime.agentId,
         message: guardrails,
       });
-      if (completedRuntimeRef.current !== result.runtime.runtimeId) {
-        setStatus(
-          "Quick request running. Advisory limits are not trusted enforcement.",
-        );
-      }
+      promptSubmittedRuntimeRef.current = result.runtime.runtimeId;
     } catch (reason) {
       setError(`Could not start quick request: ${String(reason)}`);
-      setStatus("");
+      setFailedRuntimeId(runtimeRef.current?.runtimeId);
     } finally {
       submissionStartingRef.current = false;
       setSubmissionStarting(false);
+      focusInput();
+      window.requestAnimationFrame(focusInput);
     }
   }
 
@@ -356,7 +445,7 @@ export default function QuickPane() {
 
   async function continueFull() {
     const handoffRequest =
-      request.trim() || submittedRequestRef.current?.request || "";
+      request.trim() || submittedRequestRef.current?.request || currentRequest;
     if (invalid || !handoffRequest)
       return setError(invalid ?? "Enter a request.");
     try {
@@ -375,7 +464,7 @@ export default function QuickPane() {
         agentId: result.runtime.agentId,
         message: `${handoffRequest}\n\nQuick Pane escalation: ${escalation ?? "Continue this in a full session."}\n\nPartial quick result:\n${answer}`,
       });
-      setStatus("Full session started with follow-up model.");
+      setNotice("Full session started with follow-up model.");
     } catch (reason) {
       setError(`Could not start full session: ${String(reason)}`);
     }
@@ -383,20 +472,74 @@ export default function QuickPane() {
 
   return (
     <main className="quick-pane">
-      <header>
-        <strong>Quick Pane</strong>
-        <div className="quick-pane-header-controls">
+      <header className="quick-pane-toolbar">
+        <div className="quick-pane-primary-controls">
+          <label className="quick-pane-field quick-pane-model">
+            <span className="full-label">Model</span>
+            <span className="compact-label" aria-hidden="true">
+              M
+            </span>
+            <select
+              aria-label="Model"
+              value={selectedModelValue}
+              disabled={runActive}
+              onChange={(event) => {
+                const identity = modelIdentityFromValue(
+                  event.currentTarget.value,
+                );
+                if (identity) setSelectedModel(identity);
+              }}
+            >
+              <option value="" disabled>
+                Select model
+              </option>
+              {modelOptions.map((model) => {
+                const identity = modelIdentity(model);
+                if (!identity) return null;
+                return (
+                  <option
+                    key={modelIdentityValue(identity)}
+                    value={modelIdentityValue(identity)}
+                  >
+                    {identity.provider}/{identity.modelId}
+                  </option>
+                );
+              })}
+            </select>
+          </label>
+          <label className="quick-pane-field quick-pane-thinking">
+            <span className="full-label">Thinking</span>
+            <span className="compact-label" aria-hidden="true">
+              T
+            </span>
+            <select
+              aria-label="Thinking"
+              value={thinkingLevel}
+              disabled={runActive}
+              onChange={(event) => setThinkingLevel(event.currentTarget.value)}
+            >
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+            </select>
+          </label>
+        </div>
+        <div className="quick-pane-header-actions">
           {history.length > 0 && (
-            <label className="quick-pane-history">
-              <span>History</span>
+            <label className="quick-pane-field quick-pane-history">
+              <span className="full-label">History</span>
+              <span className="compact-label" aria-hidden="true">
+                H
+              </span>
               <select
                 aria-label="Answer history"
-                value={selectedHistoryId}
+                value={viewingHistory ? selectedHistoryId : ""}
+                disabled={runActive}
                 onChange={(event) =>
                   setSelectedHistoryId(event.currentTarget.value)
                 }
               >
-                <option value="">Current answer</option>
+                <option value="">Current</option>
                 {history.map((entry) => (
                   <option key={entry.id} value={entry.id}>
                     {historyLabel(entry.request)}
@@ -405,93 +548,142 @@ export default function QuickPane() {
               </select>
             </label>
           )}
-          <button onClick={dismissPane}>Close</button>
+          <button
+            className="quick-pane-close"
+            type="button"
+            aria-label="Close Quick Pane"
+            title="Close Quick Pane (Esc)"
+            onClick={dismissPane}
+          >
+            <span className="full-label">Close</span>
+            <span className="compact-label" aria-hidden="true">
+              ×
+            </span>
+          </button>
         </div>
       </header>
-      <textarea
-        className="quick-pane-request"
-        autoFocus
-        ref={inputRef}
-        value={request}
-        onChange={(event) => setRequest(event.currentTarget.value)}
-        onKeyDown={(event) => {
-          if (
-            event.key === "Enter" &&
-            !event.shiftKey &&
-            !event.nativeEvent.isComposing
-          ) {
-            event.preventDefault();
-            void run();
-          }
-        }}
-        placeholder="Ask a quick question or give a quick instruction"
-      />
-      <section className="quick-pane-output" aria-live="polite">
-        {status && <p>{status}</p>}
-        {displayedAnswer && <pre>{displayedAnswer}</pre>}
-        {error && <p role="alert">{error}</p>}
-        {catalogError && <p role="alert">{catalogError}</p>}
+
+      <section className="quick-pane-exchange" aria-label="Quick exchange">
+        {displayedRequest && (
+          <div className="quick-pane-user-row">
+            <article className="quick-pane-user-message">
+              <span className="message-author">You</span>
+              <p>{displayedRequest}</p>
+            </article>
+          </div>
+        )}
+        {(viewingHistory
+          ? !!displayedAnswer
+          : runActive || !!displayedAnswer || displayedAnswerComplete) && (
+          <article
+            className="quick-pane-assistant-message"
+            role="region"
+            aria-label="Assistant response"
+            aria-live={viewingHistory ? "off" : "polite"}
+            aria-busy={!viewingHistory && runActive}
+          >
+            {displayedAnswer && (
+              <>
+                <span className="message-author">Assistant</span>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {displayedAnswer}
+                </ReactMarkdown>
+              </>
+            )}
+            {displayedAnswerComplete && (
+              <span className="sr-only">Response complete.</span>
+            )}
+          </article>
+        )}
+        {!viewingHistory && activity && (
+          <div className="quick-pane-activity" aria-hidden="true">
+            <span className="typing-dots">
+              <i />
+              <i />
+              <i />
+            </span>
+            <span>{activity}</span>
+          </div>
+        )}
+        <span
+          className="quick-pane-activity-announcement sr-only"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {viewingHistory ? "" : activityPhase}
+        </span>
+        {escalation && (
+          <aside className="quick-pane-notice escalation" role="status">
+            <div>
+              <strong>Continue in full session</strong>
+              <p>{escalation}</p>
+            </div>
+            <button type="button" onClick={continueFull}>
+              Continue
+            </button>
+          </aside>
+        )}
+        {error && (
+          <aside className="quick-pane-notice error" role="alert">
+            <p>{error}</p>
+            {!!runtime && !escalation && (
+              <button type="button" onClick={continueFull}>
+                Continue
+              </button>
+            )}
+          </aside>
+        )}
+        {catalogError && (
+          <aside className="quick-pane-notice error" role="alert">
+            <p>{catalogError}</p>
+          </aside>
+        )}
+        {notice && (
+          <p className="quick-pane-system-notice" role="status">
+            {notice}
+          </p>
+        )}
         <ExtensionDialog extension={extension} onRespond={respond} />
       </section>
-      <footer className="quick-pane-controls">
-        <label>
-          <span>Model</span>
-          <select
-            aria-label="Model"
-            value={selectedModelValue}
-            onChange={(event) => {
-              const identity = modelIdentityFromValue(
-                event.currentTarget.value,
-              );
-              if (identity) setSelectedModel(identity);
-            }}
-          >
-            <option value="" disabled>
-              Select model
-            </option>
-            {modelOptions.map((model) => {
-              const identity = modelIdentity(model);
-              if (!identity) return null;
-              return (
-                <option
-                  key={modelIdentityValue(identity)}
-                  value={modelIdentityValue(identity)}
-                >
-                  {identity.provider}/{identity.modelId}
-                </option>
-              );
-            })}
-          </select>
-        </label>
-        <label>
-          <span>Thinking</span>
-          <select
-            aria-label="Thinking"
-            value={thinkingLevel}
-            onChange={(event) => setThinkingLevel(event.currentTarget.value)}
-          >
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-          </select>
-        </label>
+
+      <div className="quick-pane-composer">
+        <textarea
+          className="quick-pane-request"
+          aria-label="Request"
+          autoFocus
+          ref={inputRef}
+          readOnly={runActive}
+          aria-busy={runActive}
+          value={request}
+          onChange={(event) => setRequest(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (
+              event.key === "Enter" &&
+              !event.shiftKey &&
+              !event.nativeEvent.isComposing
+            ) {
+              event.preventDefault();
+              void run();
+            }
+          }}
+          placeholder="Ask a quick question or give a quick instruction"
+        />
         <button
+          className="quick-pane-send"
+          type="button"
+          aria-label={submissionStarting ? "Starting request" : "Send request"}
+          title="Send (Enter)"
           disabled={
-            submissionStarting ||
-            !settingsLoaded ||
-            !!invalid ||
-            !request.trim()
+            runActive || !settingsLoaded || !!invalid || !request.trim()
           }
           onClick={run}
         >
-          {submissionStarting ? "Starting…" : "Ask"}
+          <span aria-hidden="true">{submissionStarting ? "•••" : "↑"}</span>
         </button>
-        {canContinue && (
-          <button className="quiet" onClick={continueFull}>
-            Continue
-          </button>
-        )}
-      </footer>
+        <span className="quick-pane-composer-hint">
+          Shift+Enter for newline
+        </span>
+      </div>
     </main>
   );
 }
diff --git a/ui/src/quick-pane/quick-pane.css b/ui/src/quick-pane/quick-pane.css
index 725a7aa..b757f98 100644
--- a/ui/src/quick-pane/quick-pane.css
+++ b/ui/src/quick-pane/quick-pane.css
@@ -20,58 +20,82 @@ body {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 9px;
   height: 100vh;
   overflow: hidden;
   padding: 10px;
   color: #e6e3df;
-  font: 14px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
+  font:
+    14px / 1.4 Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
   background: rgba(34, 34, 34, 0.98);
   border: 1px solid #4b4b4b;
   border-radius: 8px;
   box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
 }
 
-.quick-pane header {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  color: #f0a347;
-  font-size: 11px;
-  font-weight: 900;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.quick-pane-header-controls,
-.quick-pane-history {
+.quick-pane-toolbar,
+.quick-pane-primary-controls,
+.quick-pane-header-actions,
+.quick-pane-field {
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: 5px;
 }
 
-.quick-pane-header-controls {
+.quick-pane-toolbar {
+  flex: 0 0 auto;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.quick-pane-primary-controls,
+.quick-pane-header-actions {
+  gap: 6px;
+}
+
+.quick-pane-primary-controls {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.quick-pane-header-actions {
+  flex: 0 1 auto;
   justify-content: end;
+  overflow: hidden;
+}
+
+.quick-pane-field {
+  gap: 4px;
+  color: #bbb7b0;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.quick-pane-model {
+  flex: 1 1 230px;
+  max-width: 310px;
+}
+
+.quick-pane-thinking {
+  flex: 0 1 122px;
 }
 
 .quick-pane-history {
-  color: #bbb7b0;
-  font-size: 9px;
+  flex: 0 1 205px;
 }
 
-.quick-pane-history select {
-  max-width: 240px;
-  padding-block: 3px;
-  font-size: 10px;
-  letter-spacing: 0;
-  text-transform: none;
+.quick-pane .compact-label {
+  display: none;
 }
 
 .quick-pane button,
 .quick-pane select {
+  box-sizing: border-box;
   min-width: 0;
   border: 0;
   border-radius: 5px;
@@ -79,10 +103,19 @@ body {
   font: inherit;
 }
 
+.quick-pane select {
+  width: 100%;
+  overflow: hidden;
+  color: #e6e3df;
+  background: #353535;
+  font-size: 11px;
+  text-overflow: ellipsis;
+}
+
 .quick-pane button {
   flex: 0 0 auto;
-  background: #f0a347;
   color: #25180b;
+  background: #f0a347;
   font-weight: 750;
   cursor: pointer;
 }
@@ -91,113 +124,365 @@ body {
   background: #ffc170;
 }
 
-.quick-pane button:disabled {
-  opacity: 0.6;
+.quick-pane button:disabled,
+.quick-pane select:disabled {
+  opacity: 0.58;
   cursor: wait;
 }
 
-.quick-pane button.quiet {
-  color: #e6e3df;
-  background: #45413c;
+.quick-pane button:focus-visible,
+.quick-pane select:focus-visible,
+.quick-pane-request:focus {
+  outline: 3px solid #f0a347;
+  outline-offset: 2px;
 }
 
-.quick-pane select {
-  color: #e6e3df;
-  background: #353535;
+.quick-pane-close {
+  color: #e6e3df !important;
+  background: #45413c !important;
+  font-size: 11px !important;
+}
+
+.quick-pane-exchange {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 9px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 2px 3px 8px;
+  scroll-behavior: smooth;
+}
+
+.quick-pane-user-row {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: end;
+}
+
+.quick-pane-user-message,
+.quick-pane-assistant-message {
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+}
+
+.quick-pane-user-message {
+  width: fit-content;
+  max-width: 78%;
+  padding: 7px 10px;
+  border: 1px solid #66513a;
+  border-radius: 12px 12px 3px 12px;
+  background: #3a3026;
+}
+
+.quick-pane-user-message p,
+.quick-pane-notice p,
+.quick-pane-system-notice {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.message-author {
+  display: block;
+  margin-bottom: 3px;
+  color: #bdb7ae;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+.quick-pane-assistant-message {
+  width: 100%;
+  flex: 0 0 auto;
+  padding: 10px 12px;
+  border: 1px solid #484848;
+  border-radius: 7px;
+  background: #292929;
+}
+
+.quick-pane-assistant-message > :last-child {
+  margin-bottom: 0;
+}
+
+.quick-pane-assistant-message p,
+.quick-pane-assistant-message ul,
+.quick-pane-assistant-message ol,
+.quick-pane-assistant-message blockquote,
+.quick-pane-assistant-message pre,
+.quick-pane-assistant-message table {
+  margin-block: 0 9px;
+}
+
+.quick-pane-assistant-message ul,
+.quick-pane-assistant-message ol {
+  padding-left: 22px;
+}
+
+.quick-pane-assistant-message a {
+  color: #ffc170;
+}
+
+.quick-pane-assistant-message code {
+  border-radius: 4px;
+  padding: 1px 4px;
+  color: #f3ded0;
+  background: #1d1d1d;
+  font:
+    0.9em / 1.45 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+}
+
+.quick-pane-assistant-message pre {
+  max-width: 100%;
+  overflow: auto;
+  border: 1px solid #414141;
+  border-radius: 6px;
+  padding: 9px;
+  background: #1d1d1d;
+}
+
+.quick-pane-assistant-message pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.quick-pane-assistant-message blockquote {
+  border-left: 3px solid #80613e;
+  padding-left: 9px;
+  color: #c6c0b8;
+}
+
+.quick-pane-assistant-message table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+
+.quick-pane-assistant-message th,
+.quick-pane-assistant-message td {
+  border: 1px solid #4b4b4b;
+  padding: 4px 7px;
+}
+
+.quick-pane-activity {
+  display: flex;
+  min-height: 22px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  padding-inline: 3px;
+  color: #c5beb5;
+  font-size: 12px;
+}
+
+.typing-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.typing-dots i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #f0a347;
+  animation: quick-pane-dot 1.15s infinite ease-in-out;
+}
+
+.typing-dots i:nth-child(2) {
+  animation-delay: 0.14s;
+}
+
+.typing-dots i:nth-child(3) {
+  animation-delay: 0.28s;
+}
+
+@keyframes quick-pane-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .typing-dots i {
+    animation: none;
+  }
+}
+
+.quick-pane-notice {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid #65533e;
+  border-radius: 7px;
+  padding: 8px 10px;
+  color: #f1e4d1;
+  background: #3b3228;
+}
+
+.quick-pane-notice strong {
+  display: block;
+  margin-bottom: 2px;
+}
+
+.quick-pane-notice.error {
+  border-color: #70424a;
+  color: #ffd7db;
+  background: #3d252b;
+}
+
+.quick-pane-notice button {
+  align-self: center;
+}
+
+.quick-pane-system-notice {
+  flex: 0 0 auto;
+  padding: 6px 8px;
+  color: #c5beb5;
+  font-size: 12px;
+}
+
+.quick-pane-exchange .extension-backdrop,
+.quick-pane-exchange .extension {
+  position: static;
+  display: block;
+  padding: 7px 9px;
+  background: transparent;
+}
+
+.quick-pane-exchange .extension-backdrop {
+  flex: 0 0 auto;
+  border: 1px solid #65533e;
+  border-radius: 7px;
+  background: #302b25;
+}
+
+.quick-pane-exchange .extension h2,
+.quick-pane-exchange .extension p {
+  margin: 0 0 5px;
+  font-size: 12px;
+}
+
+.quick-pane-composer {
+  position: relative;
+  box-sizing: border-box;
+  height: 120px;
+  min-height: 110px;
+  max-height: 130px;
+  flex: 0 0 120px;
 }
 
 .quick-pane-request {
   box-sizing: border-box;
   width: 100%;
-  min-height: 180px;
-  flex: 1 1 auto;
-  padding: 12px;
+  height: 100%;
+  padding: 11px 50px 29px 11px;
   resize: none;
-  border: 1px solid #484848;
-  border-radius: 6px;
+  border: 1px solid #55514c;
+  border-radius: 8px;
   color: #e6e3df;
   background: #292929;
   font: inherit;
-  font-size: 16px;
+  font-size: 15px;
 }
 
-.quick-pane-request:focus,
-.quick-pane button:focus-visible,
-.quick-pane select:focus-visible {
-  outline: 3px solid #f0a347;
-  outline-offset: 2px;
+.quick-pane-request[readonly] {
+  color: #d1cbc4;
+  background: #272727;
 }
 
-.quick-pane-output {
-  max-height: 108px;
-  min-height: 0;
-  flex: 0 1 auto;
-  overflow: auto;
-  border: 1px solid #484848;
-  border-radius: 6px;
-  background: #292929;
+.quick-pane-send {
+  position: absolute;
+  right: 8px;
+  bottom: 9px;
+  width: 34px;
+  height: 30px;
+  padding: 0 !important;
+  border-radius: 7px !important;
+  font-size: 20px !important;
+  line-height: 1 !important;
 }
 
-.quick-pane-output:empty {
-  display: none;
-}
-
-.quick-pane-output > pre,
-.quick-pane-output > p {
-  margin: 0;
-  padding: 6px 8px;
-  white-space: pre-wrap;
-}
-
-.quick-pane-output > :not(:last-child) {
-  border-bottom: 1px solid #484848;
-}
-
-.quick-pane-output [role="alert"] {
-  color: #ffd7db;
-  background: #3d252b;
-}
-
-.quick-pane-controls {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: end;
-  gap: 6px;
-  min-width: 0;
-}
-
-.quick-pane-controls label {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-  color: #bbb7b0;
+.quick-pane-composer-hint {
+  position: absolute;
+  left: 11px;
+  bottom: 8px;
+  color: #96918b;
   font-size: 10px;
-  line-height: 1;
+  pointer-events: none;
 }
 
-.quick-pane-controls label:first-child {
-  flex: 1 1 auto;
-}
+@media (max-width: 400px) {
+  .quick-pane {
+    padding: 8px;
+  }
 
-.quick-pane-controls label:nth-child(2) {
-  flex: 0 1 100px;
-}
+  .quick-pane .full-label {
+    display: none;
+  }
 
-.quick-pane-controls select {
-  width: 100%;
-  font-size: 12px;
-}
+  .quick-pane .compact-label {
+    display: inline;
+    flex: 0 0 auto;
+  }
 
-.quick-pane-output .extension-backdrop,
-.quick-pane-output .extension {
-  position: static;
-  display: block;
-  padding: 6px 8px;
-  background: transparent;
-}
+  .quick-pane-toolbar,
+  .quick-pane-primary-controls,
+  .quick-pane-header-actions {
+    gap: 4px;
+  }
 
-.quick-pane-output .extension h2,
-.quick-pane-output .extension p {
-  margin: 0 0 4px;
-  font-size: 12px;
+  .quick-pane-model {
+    flex-basis: 130px;
+  }
+
+  .quick-pane-thinking {
+    flex-basis: 74px;
+  }
+
+  .quick-pane-history {
+    max-width: 78px;
+  }
+
+  .quick-pane-field {
+    gap: 2px;
+  }
+
+  .quick-pane select {
+    padding-inline: 5px;
+    font-size: 10px;
+  }
+
+  .quick-pane-close {
+    width: 27px;
+    height: 27px;
+    padding: 0 !important;
+    font-size: 18px !important;
+  }
+
+  .quick-pane-user-message {
+    max-width: 88%;
+  }
 }