dsh-composer-ux 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 本项目遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [0.13.1] — 2026-09-30（面板分两半：优化提示词 / 快捷指令二选一；修「展开后看不到 插入/重新优化/复制」）
+
+起因（用户原话）：**「现在是点击提示词优化按钮才能展开优化输入框，我想要点开快捷指令分为两个部分：一部分是优化提示词部分，一部分是快捷指令部分。」**
+并附了一条真机发现的 bug：**「展开优化提示词内容之后我看不到复制和填入之类的按钮」**。
+
+### 改成什么样（开工前问清并确认过的三点）
+
+- **默认展开「快捷指令」**，标题行的**三档档位与 ✨ 优化提示词按钮始终露在外面** —— 跑一次优化永远是一步，不必先展开。
+- 中部**二选一**：`优化提示词`（结果框）或 `快捷指令`（分类标签 + 条目列表 + 底部计数），中间一个切换按钮（▸ / ▾）换着看。
+- **点 ✨ 或结果框出现时自动切到「优化提示词」那半**，否则刚跑出来的东西会被自己藏在收起状态里；
+  手动切回快捷指令不会被抢回去；点结果框的「✕」顺手切回快捷指令。
+
+### 修掉的 bug（用户报的那条）
+
+结果框原先和快捷指令列表**挤同一块固定高度**（面板 `max-height: min(60vh, 520px)` + `overflow: hidden`，
+而结果框自身没有滚动或高度上限）：内容一长（条目多 + 成品多行 + 输入框 30vh）就把列表挤到 0，
+再继续把**自己底部那排按钮（插入输入框 / 重新优化 / 复制）顶出面板边界裁掉**。修法两条：
+
+1. 结果框拆成「**可滚内容区 + 钉在底部的按钮行**」（`dockBody` + `dockButtonsPinned`）；
+2. 两半互斥、各自内部滚（`quickSectionBody` / `quickList` 都补上 `flex: 1 1 auto` + `min-height: 0`）。
+
+顺带一处实现改进：自动切换原本写在 `useEffect` 里，会**先渲染一帧"快捷指令"再切**（点 ✨ 会看到面板闪一下），
+而且 **SSR 里 effect 不跑**、渲染测试根本测不到 —— 改成 React 文档里"props 变化时同步调整 state"的渲染期写法，
+两边一起解决（这个决定是被渲染测试逼出来的：第一版这么写时新套件里 7 条全红，红的全是这一组）。
+
+### 内部
+
+- 新增 `test/panel-split-render.mjs`（**20 条**，`react-dom/server` **真渲染**）：默认展开哪半、两半互斥、
+  三个按钮**在最后一个滚动容器之后**、跑的时候看得到「取消」、锚点为空不渲染。
+- `client-registration.mjs` 新增 **2.0g 节（11 条）** 源码级护栏；两半规则抽成纯函数 `client/panel-sections.ts`。
+- 测试从 **21 套件 2160 条**涨到 **22 套件 2190 条**；变异从 **128 条**涨到 **132 条，全部咬住**
+  （EA 默认那半 / EB 有结果也不切 / EC 内容区不再自己滚 / ED 切换按钮不再换另一半）。
+
 ## [0.13.0] — 2026-09-30（结果框重启恢复 + 逐轮元数据台账 + 只读查证工具 + 发版门禁三脚本 + 证据登记表）
 
 > 起因：用户拿社区插件 [WestFox-AwA/dsh-prompt-optimizer](https://github.com/WestFox-AwA/dsh-prompt-optimizer)

package/README.en.md

@@ -188,10 +188,13 @@ edited in settings; the JSON output contract is always appended and cannot be ov
 | Read-only tool fence (including symlinks) / every cap / out-of-bounds rejection | `node test/optimize-tools.mjs` (66 checks against a **real temporary directory**) |
 | Tool-loop message shape / round cap / exceptions must degrade | same file, section 6 (a fake `llm.stream` drives the whole loop; `role:'tool'` and `toolCallId` are asserted) |
 | Tool path: off by default, fires only when enabled, **prose after lookups falls back**, no cwd ⇒ no tool at all | `test/quick-commands.mjs` 5g (13 checks) |
-| Mutation guards really bite, and **the *named* test must be the one going red** | `npm run test:mutations`: **128/128 bite** |
+| Mutation guards really bite, and **the *named* test must be the one going red** | `npm run test:mutations`: **132/132 bite** |
+| Panel split + pinned result-box buttons (0.13.1) | `node test/panel-split-render.mjs` (20 checks, real `react-dom/server` render) |
 | Release gates | `npm run gates` (tag target / packed file list / docs drift) |
 | Three-platform CI | GitHub Actions: ubuntu / windows / macos × Node 20 |
 
+> 0.13.1 split the panel into「优化提示词 / 快捷指令」halves with one toggle between them, and pinned the result
+
 ### Not verified (design intent, or verified on one machine only)
 
 | Gap | Note |

package/README.md

@@ -143,6 +143,13 @@ dsh plugin --profile web add <你克隆或解压出来的目录>
   - **0.12.0 起有记忆链**：你把成品插进输入框、改了几处、又点一次优化时，宿主会把**上一版成品**
     一起给模型（截断 1500 字），它只需围绕变化点调整、不必从零重写（你已确认过的地方不会被改回去）。
     不带的三种情况：同一段原文重跑（同文重试）、草稿就是上一轮成品（对成品重跑）、上一轮失败/取消；“重新优化”只在你手改过框里成品时才带。
+  - **面板分两半（0.13.1）**：中部现在是「**优化提示词**」（结果框）与「**快捷指令**」（分类 + 条目列表）**二选一**，
+    中间一个切换按钮（▸ / ▾）换着看；打开面板**默认展开快捷指令**，标题行的**三档档位与 ✨ 按钮始终露在外面**
+    —— 所以「跑一次优化」永远是一步，不必先展开。**点 ✨ 会自己切到优化那半**（否则结果被藏在收起的一半里，
+    看起来像没反应）；手动切回快捷指令不会被抢回去；点结果框的「✕」会顺手切回快捷指令。
+  - **修掉「展开后看不到按钮」（0.13.1）**：以前结果框和快捷指令列表**挤同一块固定高度**，结果框一长
+    （条目多 + 成品多行）就把列表挤没、再把自己底部的**「插入输入框 / 重新优化 / 复制」顶出面板边界被裁掉**。
+    现在两半互斥、各自内部滚，而且结果框拆成「可滚内容区 + **钉在底部的按钮行**」—— 面板再矮也不裁那排按钮。
   - **优化只从「快捷指令」面板进**（0.12.0 起）：工具行只有一枚「快捷指令」按钮，点开面板再点「✨ 优化提示词」。
     0.11.1 曾试过在工具行加一枚独立的「✨ 优化」按钮（点一下 = 开面板 + 立刻开跑），用户看到实机后明确否掉 ——
     「我让你集合到快捷指令里的提示词优化按钮里」，于是 0.12.0 删掉它，回到单一入口。
@@ -451,6 +458,7 @@ Windows 上 DSH 给模型的终端工具是 **PowerShell**（工具名 `pwsh`）
 |---|---|
 | 结果框持久化：原子写 / 损坏隔离 / 版本信封 / 净化边界 | `node test/optimize-state.mjs`（69 条，含真路由 `GET/POST` 往返与"太大拒写"）；变异 DL/DM/DN/DO/DP/DQ |
 | 重启后恢复的接线（只在框空着时恢复、去抖存盘、开关关掉不发请求） | 同上第 6 节（源码级断言 —— 组件行为在浏览器里，本仓测不到） |
+| **面板分两半 + 结果框按钮钉底**（0.13.1） | `node test/panel-split-render.mjs`（20 条，`react-dom/server` **真渲染**：默认展开哪半、两半互斥、三个按钮在滚动区之外）+ `client-registration.mjs` 2.0g 节（11 条源码级） |
 | 台账只记元数据、不落原文 | `node test/optimize-ledger.mjs`（50 条）+ `test/quick-commands.mjs` 5e 节：真路由跑一轮后**在磁盘上的台账文件里搜不到草稿里那个独特的词** |
 | 台账的原因消毒（模型给的引文不再被写进磁盘） | 同上；变异 DH（去掉消毒立刻红） |
 | 台账轮转 / 逐行容错 / 清空 | `node scripts/recap.mjs` 真进程跑：`--last` / `--session` / `--json` / `--clear` 与坏行计数都在 `test/optimize-ledger.mjs` 第 6 节 |
@@ -458,7 +466,7 @@ Windows 上 DSH 给模型的终端工具是 **PowerShell**（工具名 `pwsh`）
 | 工具循环的消息形状 / 轮次封顶 / 异常必须降级 | 同上第 6 节（假 llm 驱动整条循环，逐条检查 `role:'tool'` 与 `toolCallId`） |
 | 工具路径：默认关、开了才派、**查完吐散文必须回落**、拿不到工作目录就不派 | `test/quick-commands.mjs` 5g 节（13 条，真路由 + 假 llm） |
 | 工具读到的内容不进台账 | 同 5g 节：断言台账里只有工具名与次数、没有读到的文件内容 |
-| 变异守卫真的会咬人，且**必须是指定的那条测试变红** | `npm run test:mutations`：**128 条全部咬住**（判据是 `red.some(line => line.includes(item.expect))`，不是"有红就行"） |
+| 变异守卫真的会咬人，且**必须是指定的那条测试变红** | `npm run test:mutations`：**132 条全部咬住**（判据是 `red.some(line => line.includes(item.expect))`，不是"有红就行"） |
 | 发布门禁三条判据 | `npm run gates` 全过；`check:tag` 实测 `v0.12.0` 的 tag 名与所指提交里的版本一致 |
 | 三平台 CI | GitHub Actions：ubuntu / windows / macos × Node 20（`npm ci → typecheck → build → test → check:pack → check:docs`） |
 
@@ -588,9 +596,9 @@ node build.mjs                    # 产出 lib/index.js + lib/client.js
                                   #   ⚠️ 宿主半会**内联** schemastery / cosmokit：
                                   #   优先用 DSH 检出里的 vendor 副本，检出不在时退到 node_modules
                                   #   里同版本的 npm 包（两者逐字节相同）——CI 上走的就是退路
-npm test                          # 21 个套件；当前 2160 passed, 0 failed（2026-09-29 实测；CI 三平台同样全绿）
+npm test                          # 22 个套件；当前 2190 passed, 0 failed（2026-09-29 实测；CI 三平台同样全绿）
                                   #   走 scripts/run-tests.mjs：顺带把"多少套件/多少条"记进 test/.last-run.json
-npm run test:mutations            # 手动跑：变异测试，证明那套护栏真的在咬人（128 条，须单独跑）
+npm run test:mutations            # 手动跑：变异测试，证明那套护栏真的在咬人（132 条，须单独跑）
                                   #   同样记录结果，供下面的文档门禁核对
 npm run gates                     # 发版门禁三条一起跑：tag 指向 / 包内容 / 文档数字
 npm run check:tag                 #   ① tag 名里的版本 == 该 tag 所指提交里的 package.json 版本

package/lib/client.js

@@ -2770,6 +2770,9 @@ var quickPrimaryButtonDisabled = {
   cursor: "default"
 };
 var quickList = {
+  // `flex: 1 1 auto` + `minHeight: 0`：这一半被压时**自己滚**，而不是把内容顶出去。
+  flex: "1 1 auto",
+  minHeight: 0,
   overflowY: "auto",
   padding: "6px 6px 8px",
   display: "flex",
@@ -2833,6 +2836,32 @@ var quickEmpty = {
   padding: "14px 10px",
   textAlign: "center"
 };
+var quickSectionBody = {
+  flex: "1 1 auto",
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+};
+var quickSectionToggle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  width: "100%",
+  padding: "6px 12px",
+  border: 0,
+  borderTop: "0.5px solid var(--dsw-alias-border-l2)",
+  borderBottom: "0.5px solid var(--dsw-alias-border-l2)",
+  background: "transparent",
+  color: "var(--dsw-alias-label-secondary)",
+  fontSize: 11.5,
+  textAlign: "left",
+  cursor: "pointer"
+};
+var quickSectionToggleArrow = {
+  width: 10,
+  flex: "0 0 auto"
+};
 var quickCategoryRow = {
   display: "flex",
   alignItems: "center",
@@ -2866,6 +2895,10 @@ var quickCategoryAdd = {
   cursor: "pointer"
 };
 var dockBox = {
+  // 撑满中部容器（`minHeight: 0` 是关键：否则弹性子项按内容高度撑，又会被裁）。
+  flex: "1 1 auto",
+  minHeight: 0,
+  overflow: "hidden",
   display: "flex",
   flexDirection: "column",
   gap: 6,
@@ -2874,6 +2907,17 @@ var dockBox = {
   background: "var(--dsw-alias-bg-layer-1)",
   border: "0.5px solid var(--dsw-alias-border-l2)"
 };
+var dockBody = {
+  flex: "1 1 auto",
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  overflowY: "auto"
+};
+var dockButtonsPinned = {
+  flex: "0 0 auto"
+};
 var dockHead = {
   display: "flex",
   alignItems: "center",
@@ -6273,6 +6317,15 @@ function useOptimizeElapsed(startedAt) {
   return running ? seconds : 0;
 }
 
+// src/client/panel-sections.ts
+var DEFAULT_PANEL_SECTION = "quick";
+function toggleSection(current) {
+  return current === "quick" ? "optimize" : "quick";
+}
+function sectionForDock(dockPresent, current) {
+  return dockPresent ? "optimize" : current;
+}
+
 // src/client/OptimizeDock.tsx
 var import_react13 = require("react");
 
@@ -6527,28 +6580,30 @@ function OptimizeDock({ state: state2, seconds, actions }) {
         }
       )
     ] }),
-    state2.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ol", { style: dockList, children: state2.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { style: dockItemRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: dockKind, children: KIND_LABEL[item.kind] ?? item.kind }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: dockItemText, children: item.text }),
-      item.quote !== "" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: dockMeta, children: item.quoteSource === "none" ? `\uFF08\u6A21\u578B\u81EA\u5DF1\u8865\u7684\uFF0C\u4F9D\u636E\u4E0D\u662F\u4F60\u539F\u8BDD\uFF1A\u300C${item.quote}\u300D\uFF09` : `\uFF08\u4F9D\u636E\uFF1A"${item.quote}"\uFF09` })
-    ] }, item.id)) }),
-    state2.dropped.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: dockDropped, children: `\u4E22\u5F03 ${String(state2.dropped.length)} \u6761\uFF1A${state2.dropped.map((row2) => row2.reason).join("\uFF1B")}` }),
-    state2.phase === "error" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: dockError, role: "alert", children: state2.error === "" ? "\u4F18\u5316\u5931\u8D25" : state2.error }),
-    (state2.phase === "done" || state2.phase === "cancelled") && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "textarea",
-      {
-        value: state2.text,
-        onChange: (event) => {
-          actions.edit(event.target.value);
-        },
-        spellCheck: false,
-        "aria-label": "\u4F18\u5316\u540E\u7684\u63D0\u793A\u8BCD\uFF08\u53EF\u7F16\u8F91\uFF09",
-        placeholder: state2.phase === "cancelled" ? "\u53D6\u6D88\u65F6\u8FD8\u6CA1\u6709\u6210\u54C1\uFF1A\u4E0A\u9762\u662F\u5DF2\u751F\u6210\u7684\u90E8\u5206\u3002\u70B9\u300C\u91CD\u65B0\u4F18\u5316\u300D\u8DD1\u5B8C\u4E00\u8F6E\u5C31\u80FD\u62FF\u5230\u6210\u54C1\u3002" : "\uFF08\u6210\u54C1\u4E3A\u7A7A\uFF09",
-        style: dockEditor
-      }
-    ),
-    state2.phase === "done" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: dockSummaryLine, children: state2.route === "" ? dockSummary(state2) : `${dockSummary(state2)} \xB7 ${state2.route}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: dockButtons, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: dockBody, children: [
+      state2.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ol", { style: dockList, children: state2.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { style: dockItemRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: dockKind, children: KIND_LABEL[item.kind] ?? item.kind }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: dockItemText, children: item.text }),
+        item.quote !== "" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: dockMeta, children: item.quoteSource === "none" ? `\uFF08\u6A21\u578B\u81EA\u5DF1\u8865\u7684\uFF0C\u4F9D\u636E\u4E0D\u662F\u4F60\u539F\u8BDD\uFF1A\u300C${item.quote}\u300D\uFF09` : `\uFF08\u4F9D\u636E\uFF1A"${item.quote}"\uFF09` })
+      ] }, item.id)) }),
+      state2.dropped.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: dockDropped, children: `\u4E22\u5F03 ${String(state2.dropped.length)} \u6761\uFF1A${state2.dropped.map((row2) => row2.reason).join("\uFF1B")}` }),
+      state2.phase === "error" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: dockError, role: "alert", children: state2.error === "" ? "\u4F18\u5316\u5931\u8D25" : state2.error }),
+      (state2.phase === "done" || state2.phase === "cancelled") && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "textarea",
+        {
+          value: state2.text,
+          onChange: (event) => {
+            actions.edit(event.target.value);
+          },
+          spellCheck: false,
+          "aria-label": "\u4F18\u5316\u540E\u7684\u63D0\u793A\u8BCD\uFF08\u53EF\u7F16\u8F91\uFF09",
+          placeholder: state2.phase === "cancelled" ? "\u53D6\u6D88\u65F6\u8FD8\u6CA1\u6709\u6210\u54C1\uFF1A\u4E0A\u9762\u662F\u5DF2\u751F\u6210\u7684\u90E8\u5206\u3002\u70B9\u300C\u91CD\u65B0\u4F18\u5316\u300D\u8DD1\u5B8C\u4E00\u8F6E\u5C31\u80FD\u62FF\u5230\u6210\u54C1\u3002" : "\uFF08\u6210\u54C1\u4E3A\u7A7A\uFF09",
+          style: dockEditor
+        }
+      ),
+      state2.phase === "done" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: dockSummaryLine, children: state2.route === "" ? dockSummary(state2) : `${dockSummary(state2)} \xB7 ${state2.route}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...dockButtons, ...dockButtonsPinned }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
@@ -6621,6 +6676,8 @@ function QuickCommandsPanel({
   const ref = (0, import_react14.useRef)(null);
   const [position, setPosition] = (0, import_react14.useState)(null);
   const [activeId, setActiveId] = (0, import_react14.useState)("");
+  const [section, setSection] = (0, import_react14.useState)(DEFAULT_PANEL_SECTION);
+  const dockPresent = dock !== null;
   const seconds = useOptimizeElapsed(busy ? startedAt : 0);
   const dockRunning = dock !== null && dock.phase === "running";
   const dockSeconds = useOptimizeElapsed(dockRunning && dock !== null ? dock.startedAt : 0);
@@ -6639,7 +6696,7 @@ function QuickCommandsPanel({
     const above = anchor.bottom - height - GAP;
     const top = above >= MARGIN ? above : Math.min(anchor.bottom + GAP, window.innerHeight - height - MARGIN);
     setPosition({ left, top: Math.max(MARGIN, top) });
-  }, [anchor?.left, anchor?.bottom, counts.prompts, categories.length, busy]);
+  }, [anchor?.left, anchor?.bottom, counts.prompts, categories.length, busy, section, dock !== null]);
   (0, import_react14.useEffect)(() => {
     if (anchor === null) return;
     const onPointerDown = (event) => {
@@ -6666,6 +6723,12 @@ function QuickCommandsPanel({
       window.removeEventListener("resize", actions.close);
     };
   }, [anchor === null, actions, dockRunning]);
+  const prevDockPresent = (0, import_react14.useRef)(false);
+  if (prevDockPresent.current !== dockPresent) {
+    prevDockPresent.current = dockPresent;
+    const next = sectionForDock(dockPresent, section);
+    if (next !== section) setSection(next);
+  }
   if (anchor === null) return null;
   const tier = settings.optimizerTier;
   const items = active2?.prompts ?? [];
@@ -6717,108 +6780,143 @@ function QuickCommandsPanel({
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: busy ? `\u4F18\u5316\u4E2D\u2026\uFF08${String(seconds)}s\uFF09` : "\u4F18\u5316\u63D0\u793A\u8BCD" })
               ]
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickCategoryRow, children: [
-            categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "button",
-              {
-                type: "button",
-                title: `${category.name}\uFF08${String(category.prompts.length)} \u6761\uFF09`,
-                "aria-pressed": category.id === active2?.id,
-                style: category.id === active2?.id ? quickCategoryTabActive : quickCategoryTab,
-                onMouseDown: (event) => {
-                  event.preventDefault();
-                },
-                onClick: () => {
-                  setActiveId(category.id);
-                },
-                children: category.name
-              },
-              category.id
-            )),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "button",
-              {
-                type: "button",
-                style: quickCategoryAdd,
-                disabled: categories.length >= QUICK_CATEGORY_MAX,
-                title: "\u65B0\u589E\u4E00\u4E2A\u5206\u7C7B\uFF08\u540D\u5B57\u5230\u300C\u8BBE\u7F6E \u2192 \u8F93\u5165\u4F53\u9A8C\u300D\u91CC\u6539\uFF09",
-                onMouseDown: (event) => {
-                  event.preventDefault();
-                },
-                onClick: () => {
-                  actions.addCategory(DEFAULT_CATEGORY_NAME);
-                },
-                children: "\uFF0B"
-              }
-            )
-          ] })
+          )
         ] }),
-        dock !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "8px 12px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          OptimizeDock,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
           {
-            state: dock,
-            seconds: dockSeconds,
-            actions: {
-              insert: actions.dockInsert,
-              retry: actions.dockRetry,
-              cancel: actions.dockCancel,
-              close: actions.dockClose,
-              edit: actions.dockEdit
-            }
+            type: "button",
+            style: quickSectionToggle,
+            "aria-expanded": section === "optimize",
+            title: section === "optimize" ? "\u6536\u8D77\u300C\u4F18\u5316\u63D0\u793A\u8BCD\u300D\uFF0C\u56DE\u5230\u300C\u5FEB\u6377\u6307\u4EE4\u300D" : "\u5C55\u5F00\u300C\u4F18\u5316\u63D0\u793A\u8BCD\u300D\uFF08\u7ED3\u679C\u6846\u5C31\u5728\u91CC\u9762\uFF1B\u4E0A\u9762\u70B9 \u2728 \u4E5F\u4F1A\u81EA\u52A8\u5C55\u5F00\uFF09",
+            onMouseDown: (event) => {
+              event.preventDefault();
+            },
+            onClick: () => {
+              setSection(toggleSection(section));
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: quickSectionToggleArrow, "aria-hidden": true, children: section === "optimize" ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\u4F18\u5316\u63D0\u793A\u8BCD" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { marginLeft: "auto", color: "var(--dsw-alias-label-tertiary)" }, children: section === "optimize" ? "\u70B9\u6B64\u56DE\u5230\u5FEB\u6377\u6307\u4EE4" : dockPresent ? "\u4E0A\u6B21\u7684\u7ED3\u679C\u5728\u8FD9\u513F" : "\u8FD8\u6CA1\u6709\u7ED3\u679C" })
+            ]
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickList, children: [
-          items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickEmpty, children: [
-            "\u8FD9\u4E2A\u5206\u7C7B\u91CC\u8FD8\u6CA1\u6709\u6761\u76EE\u3002",
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickSectionBody, children: [
+          dock !== null && section === "optimize" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "8px 12px 8px", flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            OptimizeDock,
+            {
+              state: dock,
+              seconds: dockSeconds,
+              actions: {
+                insert: actions.dockInsert,
+                retry: actions.dockRetry,
+                cancel: actions.dockCancel,
+                // 关掉结果框顺手切回快捷指令那半：此时优化半已经没内容了。
+                close: () => {
+                  actions.dockClose();
+                  setSection(DEFAULT_PANEL_SECTION);
+                },
+                edit: actions.dockEdit
+              }
+            }
+          ) }),
+          section === "optimize" && dock === null && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickEmpty, children: [
+            "\u8FD8\u6CA1\u8DD1\u8FC7\u4F18\u5316\u3002",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
+            "\u70B9\u4E0A\u9762\u7684\u300C\u2728 \u4F18\u5316\u63D0\u793A\u8BCD\u300D\u628A\u8F93\u5165\u6846\u91CC\u7684\u8BDD\u4EA4\u7ED9\u53E6\u4E00\u4E2A AI \u6574\u7406\u6210\u4E00\u6761\u80FD\u76F4\u63A5\u53D1\u7684\u6E05\u6670\u6307\u4EE4 \u2014\u2014 \u7ED3\u679C\u4F1A\u51FA\u73B0\u5728\u8FD9\u91CC\uFF08\u53EF\u7F16\u8F91\u3001\u53EF\u63D2\u5165\u8F93\u5165\u6846\u3001\u53EF\u590D\u5236\uFF09\u3002",
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
-            "\u5728\u300C\u8BBE\u7F6E \u2192 \u8F93\u5165\u4F53\u9A8C \u2192 \u5FEB\u6377\u6307\u4EE4\u6E05\u5355\u300D\u91CC\u6DFB\u52A0\u3002"
+            "\u5F3A\u5EA6\u7528\u6807\u9898\u884C\u90A3\u4E09\u4E2A\u6863\u4F4D\uFF08\u666E\u901A / \u9AD8\u7EA7 / \u6781\u7AEF\uFF09\u3002"
           ] }),
-          items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              "button",
-              {
-                type: "button",
-                title: item.prompt,
-                style: quickItem,
-                onMouseDown: (event) => {
-                  event.preventDefault();
-                },
-                onClick: () => {
-                  actions.insert(item.prompt);
+          section === "quick" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "8px 12px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickCategoryRow, children: [
+              categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "button",
+                {
+                  type: "button",
+                  title: `${category.name}\uFF08${String(category.prompts.length)} \u6761\uFF09`,
+                  "aria-pressed": category.id === active2?.id,
+                  style: category.id === active2?.id ? quickCategoryTabActive : quickCategoryTab,
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                  },
+                  onClick: () => {
+                    setActiveId(category.id);
+                  },
+                  children: category.name
                 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: quickItemLabel, children: item.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: quickItemPreview, children: item.prompt.replace(/\s+/g, " ") })
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              InsertModeControl,
-              {
-                compact: true,
-                label: item.label,
-                mode: insertModeOf(item),
-                onChange: (mode) => {
-                  actions.setInsertMode(item.id, mode);
+                category.id
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: quickCategoryAdd,
+                  disabled: categories.length >= QUICK_CATEGORY_MAX,
+                  title: "\u65B0\u589E\u4E00\u4E2A\u5206\u7C7B\uFF08\u540D\u5B57\u5230\u300C\u8BBE\u7F6E \u2192 \u8F93\u5165\u4F53\u9A8C\u300D\u91CC\u6539\uFF09",
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                  },
+                  onClick: () => {
+                    actions.addCategory(DEFAULT_CATEGORY_NAME);
+                  },
+                  children: "\uFF0B"
                 }
-              }
-            )
-          ] }, item.id)),
-          active2 !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            AddPromptRow,
-            {
-              variant: "panel",
-              book,
-              categoryId: active2.id,
-              onAdd: () => {
-                actions.addPrompt(active2.id);
-              },
-              onMove: (promptId) => {
-                actions.movePrompt(promptId, active2.id);
-              }
-            }
-          )
+              )
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickList, children: [
+              items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickEmpty, children: [
+                "\u8FD9\u4E2A\u5206\u7C7B\u91CC\u8FD8\u6CA1\u6709\u6761\u76EE\u3002",
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
+                "\u5728\u300C\u8BBE\u7F6E \u2192 \u8F93\u5165\u4F53\u9A8C \u2192 \u5FEB\u6377\u6307\u4EE4\u6E05\u5355\u300D\u91CC\u6DFB\u52A0\u3002"
+              ] }),
+              items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    title: item.prompt,
+                    style: quickItem,
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                    },
+                    onClick: () => {
+                      actions.insert(item.prompt);
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: quickItemLabel, children: item.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: quickItemPreview, children: item.prompt.replace(/\s+/g, " ") })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  InsertModeControl,
+                  {
+                    compact: true,
+                    label: item.label,
+                    mode: insertModeOf(item),
+                    onChange: (mode) => {
+                      actions.setInsertMode(item.id, mode);
+                    }
+                  }
+                )
+              ] }, item.id)),
+              active2 !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                AddPromptRow,
+                {
+                  variant: "panel",
+                  book,
+                  categoryId: active2.id,
+                  onAdd: () => {
+                    actions.addPrompt(active2.id);
+                  },
+                  onMove: (promptId) => {
+                    actions.movePrompt(promptId, active2.id);
+                  }
+                }
+              )
+            ] })
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: quickPanelFoot, children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: quickNotice, role: "status", children: notice !== "" ? notice : failure }),