feat(frontend): AI写作三槽——文风 / 剧情需求 / 自定义要求，写章前按需组合

Phase 2（写作工作台重构）：把写章指令升级为三槽——文风预设 + 新增剧情需求预设
（打脸反转/章末钩子/高潮/转折/扮猪吃虎，源自 plan §4.2 分类法，tianyayu6/oh-story MIT）
+ 自定义自由文本。三者经 composeDirective 合并为单条 directive→volatile（MVP 纯前端、
零契约、不动 write_craft.md 字节，金标准零回归）。DirectivePanel 拆成文风/剧情两组 chips。

apps/web/components/workbench/Workbench.tsx

@@ -33,7 +33,12 @@ import {
   WORKBENCH_CHAPTER_NO,
   type ChapterEntry,
 } from "@/lib/workbench/chapter";
-import { composeDirective, STYLE_PRESETS } from "@/lib/workbench/directive";
+import {
+  composeDirective,
+  PLOT_PRESETS,
+  STYLE_PRESETS,
+  type Preset,
+} from "@/lib/workbench/directive";
 import { applyRefinement } from "@/lib/workbench/refineApply";
 import { buttonClass } from "@/lib/ui/variants";
 import { ChapterList, ChapterListContent } from "./ChapterList";
@@ -381,11 +386,23 @@ function DirectivePanel({
       </summary>
       <div id={panelId} className="mt-3 space-y-3">
         <SectionHeader
-          title="写作指令"
-          description="用于补充或覆盖本章大纲节拍，只影响本次生成。"
+          title="AI 写作诉求"
+          description="选文风、点剧情需求、写自己的要求，只影响本次生成。"
+        />
+        <PresetGroup
+          label="文风"
+          presets={STYLE_PRESETS}
+          presetIds={presetIds}
+          onToggle={onTogglePreset}
+        />
+        <PresetGroup
+          label="剧情需求"
+          presets={PLOT_PRESETS}
+          presetIds={presetIds}
+          onToggle={onTogglePreset}
         />
         <label className="block">
-          <span className="sr-only">本章指令</span>
+          <span className="mb-1 block text-sm text-ink-soft">自己的要求</span>
           <TextArea
             value={directive}
             onChange={(e) => onDirectiveChange(e.target.value)}
@@ -393,26 +410,9 @@ function DirectivePanel({
             placeholder="本章想怎么写？（可选，覆盖/补充大纲节拍）"
           />
         </label>
-        <div className="flex flex-wrap gap-2" role="group" aria-label="风格预设">
-          {STYLE_PRESETS.map((preset) => {
-            const active = presetIds.includes(preset.id);
-            return (
-              <Button
-                key={preset.id}
-                type="button"
-                aria-pressed={active}
-                onClick={() => onTogglePreset(preset.id)}
-                variant={active ? "outline" : "secondary"}
-                size="sm"
-              >
-                {preset.label}
-              </Button>
-            );
-          })}
-        </div>
         {activeCount > 0 ? (
           <StatusNote variant="info">
-            写本章时会把已选预设和自由指令合并进本次生成请求。
+            写本章时会把已选文风/剧情预设和你的要求合并进本次生成请求。
           </StatusNote>
         ) : null}
       </div>
@@ -420,6 +420,39 @@ function DirectivePanel({
   );
 }
 
+interface PresetGroupProps {
+  label: string;
+  presets: readonly Preset[];
+  presetIds: readonly string[];
+  onToggle: (id: string) => void;
+}
+
+// 一组预设 chips（文风 / 剧情需求）：点选 toggle，选中高亮。id 统一进 presetIds。
+function PresetGroup({ label, presets, presetIds, onToggle }: PresetGroupProps) {
+  return (
+    <div>
+      <p className="mb-1 text-sm text-ink-soft">{label}</p>
+      <div className="flex flex-wrap gap-2" role="group" aria-label={label}>
+        {presets.map((preset) => {
+          const active = presetIds.includes(preset.id);
+          return (
+            <Button
+              key={preset.id}
+              type="button"
+              aria-pressed={active}
+              onClick={() => onToggle(preset.id)}
+              variant={active ? "outline" : "secondary"}
+              size="sm"
+            >
+              {preset.label}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 // 写章失败提示：友好文案（不暴露 raw code）+ 可选「去设置」动作（F4）。
 function StreamErrorNote({
   streamError,