@changfenhuang/dsh-genui 0.9.2 → 0.9.6

package/lib/index.js

@@ -667,7 +667,7 @@ function repairNode(value, ctx, depth) {
 		}
 		case "quiz": {
 			const question = str(v.question, GENUI_LIMITS.maxString);
-			const options = repairQuizOptions(v.options);
+			const options = repairQuizOptions(v.options, v.answer);
 			if (question === void 0 || options === void 0) return null;
 			return {
 				type: "quiz",
@@ -1128,13 +1128,13 @@ function walkTree(v, cap, depthLeft) {
 	}
 	return out;
 }
-function repairQuizOptions(v) {
+function repairQuizOptions(v, answer) {
 	if (!Array.isArray(v)) return void 0;
 	const out = [];
 	for (const optItem of v) {
 		if (out.length >= GENUI_LIMITS.maxQuizOptions) break;
 		const o = obj(optItem);
-		const label = o === void 0 ? void 0 : str(o.label, 512);
+		const label = typeof optItem === "string" ? str(optItem, 512) : o === void 0 ? void 0 : str(o.label, 512);
 		if (label === void 0) continue;
 		out.push({
 			label,
@@ -1142,7 +1142,14 @@ function repairQuizOptions(v) {
 			...opt("feedback", o === void 0 ? void 0 : str(o.feedback, GENUI_LIMITS.maxString))
 		});
 	}
-	return out;
+	if (out.length === 0) return void 0;
+	if (out.some((option) => option.correct === true)) return out;
+	const answerIndex = typeof answer === "number" && Number.isFinite(answer) ? Math.trunc(answer) : typeof answer === "string" ? out.findIndex((option) => option.label === answer.slice(0, 512)) : -1;
+	if (answerIndex < 0 || answerIndex >= out.length) return out;
+	return out.map((option, index) => index === answerIndex ? {
+		...option,
+		correct: true
+	} : option);
 }
 /**
 * Patterns that indicate HTML/script injection in a string field. ECharts

package/lib/types/client/TemplateDrawer.d.ts

@@ -0,0 +1,7 @@
+export interface TemplateDrawerProps {
+    /** 试用：把模板指令插入当前输入框草稿。 */
+    onUse: (instruction: string) => void;
+    /** 当前面板（模板中心/成就页），由面板 header 按钮控制。 */
+    tab: 'templates' | 'achievements';
+}
+export declare function TemplateDrawer({ onUse, tab }: TemplateDrawerProps): import("react").JSX.Element;

package/lib/types/client/achievement-store.d.ts

@@ -0,0 +1,35 @@
+/**
+ * achievement-store.ts — 成就状态存储与埋点入口（模块级单例）。
+ *
+ * 只存计数与解锁时间戳；绝不含消息/内容。localStorage 持久化，
+ * 订阅接口供 toast 与成就页消费。埋点入口：
+ *  - recordFence(spec)：一次「内容不重复」的界面渲染（按 spec 指纹去重，
+ *    LRU 指纹表跨刷新防重放重复计数）
+ *  - recordPanel()：面板 dock 出现
+ *  - recordInteraction()：组件动作回传（去抖后）
+ *  - recordTemplateUse()：模板中心试用
+ */
+import type { GenuiSpec } from './spec.ts';
+import { type AchieveState, type AchievementDef } from './achievements.ts';
+/** 记录一次「内容不重复」的 fence 渲染。 */
+export declare function recordFence(spec: GenuiSpec): void;
+/** 记录一次面板 dock 出现（仅会话从无到有时）。 */
+export declare function recordPanel(): void;
+/** 记录一次组件交互动作回传。 */
+export declare function recordInteraction(): void;
+/** 记录一次模板试用。 */
+export declare function recordTemplateUse(): void;
+/** 当前状态快照（订阅者读取）。 */
+export declare function getAchievementSnapshot(): {
+    state: AchieveState;
+    unlocked: Record<string, number>;
+};
+/** 取走新解锁（toast 消费；一次性）。 */
+export declare function consumeUnlocks(): AchievementDef[];
+/** 订阅状态变化（toast 与成就页）。 */
+export declare function subscribeAchievements(listener: () => void): () => void;
+/** 成就页 spec 数据源（面板内渲染用）。 */
+export declare function achievementCount(): {
+    total: number;
+    unlocked: number;
+};

package/lib/types/client/achievement-toast.d.ts

@@ -0,0 +1,2 @@
+/** 挂载 toast 栈（apply 调用；返回卸载函数）。 */
+export declare function mountAchievementToasts(): () => void;

package/lib/types/client/achievements.d.ts

@@ -0,0 +1,48 @@
+/**
+ * achievements.ts — GenUI 探索成就（0.9.5）。
+ *
+ * 轻量本地成就：只统计「使用事件计数」（渲染过的 fence、面板出现、
+ * 交互回传、模板试用），绝不读消息/内容；状态存 localStorage，跨会话
+ * 保留。解锁时进 toast 队列（achievement-toast 消费），面板「成就」
+ * tab 用 dsh-ui 渲染自己的成就页（dogfooding）。
+ *
+ * 设计与 dsh-achievements 的分层快照思路一致，但零宿主改动：埋点全部
+ * 在本包的渲染/交互路径上（GenuiBlock/TemplateDrawer/GenuiPanel）。
+ */
+import type { GenuiSpec } from './spec.ts';
+/** 累积使用计数（成就的输入）。 */
+export interface AchieveState {
+    /** 渲染过的不重复 fence 数。 */
+    fences: number;
+    /** 面板（panel dock）出现过的会话数。 */
+    panels: number;
+    /** 交互组件动作回传次数（去抖后）。 */
+    interactions: number;
+    /** 模板试用次数。 */
+    templates: number;
+    /** 图表节点（chart/plot/echart）出现过的 fence 数。 */
+    charts: number;
+    /** 高级节点（scene3d/mermaid/diagram）出现过的 fence 数。 */
+    advanced: number;
+}
+export declare function emptyState(): AchieveState;
+export interface AchievementDef {
+    id: string;
+    name: string;
+    description: string;
+    /** 解锁前隐藏名称/描述（彩蛋）。 */
+    hidden?: boolean;
+    /** 稀有度。 */
+    rarity: 'common' | 'rare' | 'legendary';
+    check: (s: AchieveState) => boolean;
+}
+export declare const ACHIEVEMENTS: readonly AchievementDef[];
+/** 统计一个 spec 里出现的相关节点类别（与 guard 同口径遍历）。 */
+export declare function countSpecKinds(spec: GenuiSpec): {
+    charts: number;
+    advanced: number;
+};
+/** 生成成就页 spec（dsh-ui 渲染）：进度 stat + 解锁列表 + 稀有度徽标。 */
+export declare function buildAchievementsSpec(state: AchieveState, unlocked: Record<string, number>): GenuiSpec;
+/** 检查给定状态下的新解锁（不受 hidden 限制——规则只管阈值）。 */
+export declare function checkAchievements(state: AchieveState, unlocked: Record<string, number>): AchievementDef[];

package/lib/types/client/panel.d.ts

@@ -4,6 +4,9 @@ import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
 export interface GenuiPanelInjected {
     sessionId: string;
     sendGenuiAction: GenuiActionHandler;
+    /** Template center "try it": insert the template instruction into the
+     *  current composer draft (standard conversation.input.for channel). */
+    insertTemplate: (text: string) => void;
 }
 export type GenuiPanelProps = PropsRuntime<'conversation.input.dock'> & GenuiPanelInjected;
 /**
@@ -12,4 +15,4 @@ export type GenuiPanelProps = PropsRuntime<'conversation.input.dock'> & GenuiPan
  * default so the dock never steals the message flow's scroll room; the
  * header always shows the current panel title.
  */
-export declare function GenuiPanel({ sessionId, sendGenuiAction }: GenuiPanelProps): import("react").JSX.Element | null;
+export declare function GenuiPanel({ sessionId, sendGenuiAction, insertTemplate }: GenuiPanelProps): import("react").JSX.Element | null;

package/lib/types/client/templates.d.ts

@@ -0,0 +1,22 @@
+/**
+ * templates.ts — GenUI 模板中心数据（0.9.4）。
+ *
+ * 每个模板 = 一段自然语言 `instruction`（试用时插入输入框，模型按 genui
+ * skill 生成对应界面）+ 一份**合法**的 `demo` spec（预览时由 GenuiBlock
+ * 直接渲染，用户先看到效果再决定试用）。字段对齐 spec.ts / guard.ts 的
+ * 实际 schema（tests/templates.spec.ts 用 validateGenuiSpec 逐条校验）。
+ *
+ * 模板即说明书：覆盖布局/数据/图表/交互/测验/高级各能力面。
+ */
+import type { GenuiSpec } from './spec.ts';
+export interface GenuiTemplate {
+    id: string;
+    category: '仪表盘' | '数据' | '流程' | '图表' | '交互' | '测验' | '高级';
+    name: string;
+    description: string;
+    /** 试用时插入输入框的自然语言指令。 */
+    instruction: string;
+    /** 预览用的合法 spec（≤200 节点、嵌套 ≤8 层）。 */
+    demo: GenuiSpec;
+}
+export declare const GENUI_TEMPLATES: readonly GenuiTemplate[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@changfenhuang/dsh-genui",
   "description": "GenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the ```dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.",
-  "version": "0.9.2",
+  "version": "0.9.6",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/plugin/index.d.ts",

package/src/client/GenuiBlock.module.css

@@ -16,8 +16,13 @@
    literals here are only last-resort fallbacks for hosts without the token
    sheets. */
 
-.block {
-  /* ── design tokens (design system v2) ── */
+.block,
+.panel {
+  /* ── design tokens (design system v2) ──
+     Declared on both the inline fence root and the session panel root: the
+     panel header sits OUTSIDE the inner .block, so without the shared
+     declaration its --dsl-g-* references resolved to undefined (the badge
+     gap/padding collapsed to zero). */
   --dsl-g-radius-surface: 12px;
   --dsl-g-radius-control: 8px;
   --dsl-g-radius-pill: 999px;
@@ -46,7 +51,9 @@
   --dsl-g-tint: 8%;
   --dsl-g-tint-strong: 14%;
   --dsl-g-font-mono: var(--ds-font-family-code, ui-monospace, 'SF Mono', monospace);
+}
 
+.block {
   /* Inline in the conversation: no canvas, no border, no padding — the
      components themselves (card/quiz/plot/…) carry the surfaces. A slab
      around every fence was tried and rejected: a lone stat or text node
@@ -637,7 +644,11 @@
 .gradeList { display: flex; flex-direction: column; gap: var(--dsl-g-gap-sm); }
 .gradeItem {
   display: grid;
-  grid-template-columns: auto auto 1fr;
+  /* Question on its own full row (see .gradeQ), then tag | answer. The
+     answer column must be minmax(0,1fr): a bare 1fr child defaults to
+     min-width:auto, so a long question in an auto column squeezes the
+     answer down to one CJK glyph per line (#62). */
+  grid-template-columns: auto minmax(0, 1fr);
   gap: 6px 10px;
   align-items: baseline;
   font-size: var(--dsl-g-font-title);
@@ -649,13 +660,13 @@
 }
 .gradeItemOk { border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary, #3ecf8e) 30%, transparent); }
 .gradeItemNo { border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary, #ff6b6b) 30%, transparent); }
-.gradeQ { font-weight: 600; color: var(--dsw-alias-label-primary); }
+.gradeQ { grid-column: 1 / -1; margin-bottom: 8px; overflow-wrap: anywhere; font-weight: 600; color: var(--dsw-alias-label-primary); }
 .gradeTag { font-weight: 700; }
 .gradeItemOk .gradeTag { color: var(--dsw-alias-state-success-primary, #3ecf8e); }
 .gradeItemNo .gradeTag { color: var(--dsw-alias-state-error-primary, #ff6b6b); }
-.gradeAns { color: var(--dsw-alias-label-secondary); }
+.gradeAns { overflow-wrap: anywhere; color: var(--dsw-alias-label-secondary); }
 .gradeRight { color: var(--dsw-alias-state-error-primary, #ffb3b3); }
-.gradeExp { grid-column: 1 / -1; font-size: var(--dsl-g-font-meta); color: var(--dsw-alias-label-tertiary); line-height: 1.5; }
+.gradeExp { grid-column: 1 / -1; overflow-wrap: anywhere; font-size: var(--dsl-g-font-meta); color: var(--dsw-alias-label-tertiary); line-height: 1.5; }
 
 .switchRow { display: flex; align-items: center; justify-content: space-between; gap: var(--dsl-g-gap-md); cursor: pointer; }
 .switchRow:focus-within .switch { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsl-g-accent) var(--dsl-g-tint-strong), transparent); }
@@ -948,12 +959,15 @@ button.ftNameBtn[aria-expanded] { cursor: pointer; }
 }
 
 .reveal {
-  animation: genuiReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation: genuiReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
 }
 
 /* "✓ 已触发" confirmation chip: appears next to the button without layout
-   shift risk (it inherits the flex row's gap). */
-.btnSent { animation: genuiPopIn 0.2s ease both; }
+   shift risk (it inherits the flex row's gap). `backwards`, not `both`: the
+   chip's natural (post-animation) style is already visible/no-transform, so
+   pinning the end keyframe would only keep a translateY(0) transform layer
+   alive forever — the exact mechanism behind issues #55/#69. */
+.btnSent { animation: genuiPopIn 0.2s ease backwards; }
 
 /* 尊重用户的减弱动效偏好 */
 @media (prefers-reduced-motion: reduce) {
@@ -1145,9 +1159,16 @@ button.ftNameBtn[aria-expanded] { cursor: pointer; }
 .panel {
   /* Distinct from ordinary inline fences: accent border + badge header so a
      session panel is recognizable at a glance. */
-  margin: 10px 14px 2px;
+  /* Align with the host's composer width axis (same geometry as the TodoDock
+     cards it shares conversation.input.dock with): centered, inset by the
+     side clearance and the dock inset chain, capped at the composer card
+     width. Falls back to safe literals when the host does not define the
+     --dsh-composer-* tokens. */
+  margin: 10px auto 2px;
+  width: calc(100% - var(--dsh-composer-side-clearance, 16px) * 2 - var(--dsh-composer-dock-inset, 8px) * 4);
+  max-width: calc(var(--dsh-composer-card-max-width, 780px) - var(--dsh-composer-dock-inset, 8px) * 4);
   border: 1px solid color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8ef7) 35%, transparent);
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.04));
   overflow: hidden;
 }
@@ -1155,12 +1176,18 @@ button.ftNameBtn[aria-expanded] { cursor: pointer; }
 .panelHeader {
   display: flex;
   align-items: center;
+  /* Header/body divider so the panel reads as a card with a title bar, not a
+     slab with text glued to it (user report: "body 缺少内边框"). */
+  border-bottom: 1px solid var(--dsw-alias-border-l1, rgba(127, 127, 127, 0.25));
 }
 
 .panelToggle {
   display: flex;
   align-items: center;
-  gap: var(--dsl-g-gap-sm);
+  /* 10px matches the TodoDock header rhythm (gap: 10px) — the badge and the
+     title no longer collapse together once the shared --dsl-g-gap-sm token
+     reaches this element. */
+  gap: 10px;
   flex: 1 1 auto;
   min-width: 0;
   padding: 9px 14px;
@@ -1207,6 +1234,112 @@ button.ftNameBtn[aria-expanded] { cursor: pointer; }
   opacity: 1;
 }
 
+/* ---- 0.9.4 template center & onboarding ---- */
+.panelTpl {
+  flex: 0 0 auto;
+  height: 26px;
+  margin-right: 4px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, rgba(255, 255, 255, 0.6));
+  font-size: 12px;
+  line-height: 1.5;
+  cursor: pointer;
+  opacity: 0.85;
+}
+
+.panelTpl:hover {
+  background: rgba(255, 255, 255, 0.08);
+  opacity: 1;
+}
+
+.panelTplActive {
+  border-color: var(--dsw-alias-state-business-primary, #4f8ef7);
+  color: var(--dsw-alias-state-business-primary, #4f8ef7);
+}
+
+.panelOnboard .panelHeader {
+  cursor: default;
+}
+
+.panelOnboardText {
+  flex: 1;
+  min-width: 0;
+  padding: 0 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.panelFlash {
+  padding: 6px 12px;
+  border-top: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-success-primary, #6ccb5f);
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary, #6ccb5f) 8%, transparent);
+}
+
+.panelHint {
+  padding: 6px 14px;
+  border-top: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-business-primary, #4f8ef7);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8ef7) 8%, transparent);
+}
+
+/* ---- 0.9.5 achievement toasts ---- */
+.achToasts {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.achToast {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 300px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8ef7) 35%, transparent);
+  border-radius: var(--dsl-g-radius-surface, 12px);
+  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.85));
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+.achToastBadge {
+  flex: none;
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.achToastBody {
+  min-width: 0;
+}
+
+.achToastName {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-state-business-primary, #4f8ef7);
+}
+
+.achToastDesc {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary, rgba(255, 255, 255, 0.6));
+}
+
 .panelBadge {
   flex: none;
   font-size: 11px;
@@ -1231,9 +1364,13 @@ button.ftNameBtn[aria-expanded] { cursor: pointer; }
 }
 
 .panelChevron {
+  /* Same glyph cell + color as the TodoDock header chevron (grid-centered,
+     label-tertiary), so the arrow reads as a host control, not typed text. */
+  display: grid;
+  place-items: center;
+  flex: none;
   margin-left: auto;
-  color: var(--dsw-alias-label-secondary, rgba(255, 255, 255, 0.55));
-  font-size: var(--dsl-g-font-meta);
+  color: var(--dsw-alias-label-tertiary);
 }
 
 .panelBody {

package/src/client/GenuiBlock.tsx

@@ -10,6 +10,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useGenuiAction } from './action-context.ts'
 import css from './GenuiBlock.module.css'
 import { loadBlockState, saveBlockState } from './interaction-store.ts'
+import { recordFence, recordInteraction } from './achievement-store.ts'
 import { renderNode } from './blocks/render-node.tsx'
 import type { AnswersState, GenuiBlockProps, QuestionMeta } from './blocks/state.ts'
 import type { GenuiSpec } from './spec.ts'
@@ -127,6 +128,15 @@ export const GenuiBlock = memo(function GenuiBlock({ spec, stateKey }: GenuiBloc
     }),
     [answers, fields, secretFields, meta, locked, round, setAnswer, setField, registerSecretField, registerMeta, clear],
   )
+  // Achievement telemetry: every emitted action counts as one interaction
+  // (the debounced emit fires once per real user action).
+  const trackedAction = useMemo(() => {
+    if (onAction === undefined) return undefined
+    return (action: string, payload: Record<string, unknown>): void => {
+      recordInteraction()
+      onAction(action, payload)
+    }
+  }, [onAction])
   // Durable save (debounced 300ms — typing in a field fires per keystroke).
   // Secret field values are stripped before writing: passwords never persist.
   useEffect(() => {
@@ -143,6 +153,11 @@ export const GenuiBlock = memo(function GenuiBlock({ spec, stateKey }: GenuiBloc
     }, 300)
     return () => clearTimeout(timer)
   }, [stateKey, answers, locked, fields, secretFields])
+  // Achievement telemetry (0.9.5): the store dedupes by spec fingerprint, so
+  // streaming re-renders and replays count once per distinct content.
+  useEffect(() => {
+    recordFence(spec)
+  }, [spec])
   return (
     <div className={css.block} data-genui>
       {spec.title !== undefined && <div className={css.banner}>{spec.title}</div>}
@@ -157,7 +172,7 @@ export const GenuiBlock = memo(function GenuiBlock({ spec, stateKey }: GenuiBloc
             className={css.reveal}
             style={{ animationDelay: `${Math.min(i * 90, 720)}ms` }}
           >
-            {renderNode(c, i, onAction, 0, answersState)}
+            {renderNode(c, i, trackedAction, 0, answersState)}
           </div>
         ))}
       </div>

package/src/client/PlotBlock.tsx

@@ -290,15 +290,28 @@ export const PlotBlock = memo(function PlotBlock({
     setView(prev => ({ xMin: d.xMin + dx, xMax: d.xMax + dx, yMin: prev.yMin, yMax: prev.yMax }))
   }
   const onPointerUp = (): void => { dragRef.current = null }
-  const onWheel = (e: React.WheelEvent): void => {
-    const span = xMax - xMin
-    const factor = e.deltaY > 0 ? 1.15 : 1 / 1.15
-    const next = span * factor
-    const rect = (e.currentTarget as Element).getBoundingClientRect()
-    const cx = fromX(((e.clientX - rect.left) / rect.width) * WIDTH)
-    const left = cx - ((cx - xMin) / span) * next
-    setView(prev => ({ xMin: left, xMax: left + next, yMin: prev.yMin, yMax: prev.yMax }))
-  }
+
+  // Wheel-to-zoom must not scroll the enclosing dialog (#63): React attaches
+  // onWheel as a passive listener, where preventDefault() is ignored and the
+  // event bubbles up to the scroll container. Register natively with
+  // { passive: false } instead — the same pattern as the 3D scene viewer.
+  const svgRef = useRef<SVGSVGElement | null>(null)
+  useEffect(() => {
+    const el = svgRef.current
+    if (el === null) return
+    const onWheel = (e: WheelEvent): void => {
+      e.preventDefault()
+      const span = xMax - xMin
+      const factor = e.deltaY > 0 ? 1.15 : 1 / 1.15
+      const next = span * factor
+      const rect = el.getBoundingClientRect()
+      const cx = fromX(((e.clientX - rect.left) / rect.width) * WIDTH)
+      const left = cx - ((cx - xMin) / span) * next
+      setView(prev => ({ xMin: left, xMax: left + next, yMin: prev.yMin, yMax: prev.yMax }))
+    }
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => el.removeEventListener('wheel', onWheel)
+  }, [xMin, xMax])
 
   const hasParams = series.some(s => (s.params?.length ?? 0) > 0)
 
@@ -312,11 +325,11 @@ export const PlotBlock = memo(function PlotBlock({
           role="img"
           aria-label={title ?? 'function plot'}
           className={css.surface}
+          ref={svgRef}
           onPointerDown={onPointerDown}
           onPointerMove={onPointerMove}
           onPointerUp={onPointerUp}
           onPointerLeave={onPointerUp}
-          onWheel={onWheel}
         >
           {/* y grid */}
           {yTicks.map(t => (

package/src/client/TemplateDrawer.module.css

@@ -0,0 +1,152 @@
+/* TemplateDrawer: the GenUI template center inside the session panel body.
+   Tokens mirror GenuiBlock.module.css (--dsw-alias-* sheets, fallbacks last). */
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 14px;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* ---- achievements tab ---- */
+.achievements {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* ---- category chips ---- */
+.cats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.cat {
+  padding: 4px 12px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, var(--dsl-g-font-muted-fallback, rgba(255, 255, 255, 0.6)));
+  font-size: 12px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.cat:hover {
+  background: var(--dsw-alias-fill-hover, rgba(255, 255, 255, 0.06));
+}
+
+.catActive {
+  border-color: var(--dsw-alias-state-business-primary, #4f8ef7);
+  color: var(--dsw-alias-state-business-primary, #4f8ef7);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8ef7) 14%, transparent);
+}
+
+/* ---- template cards ---- */
+.list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsl-g-radius-surface, 12px);
+  background: var(--dsw-alias-bg-layer-2, rgba(255, 255, 255, 0.04));
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.2));
+}
+
+.cardActive {
+  border-color: var(--dsw-alias-state-business-primary, #4f8ef7);
+}
+
+.cardName {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.cardMeta {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, rgba(255, 255, 255, 0.45));
+}
+
+.cardDesc {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary, rgba(255, 255, 255, 0.6));
+}
+
+/* ---- detail preview ---- */
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  padding-top: 12px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.toolbarTitle {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+
+.try,
+.copy {
+  padding: 5px 12px;
+  border-radius: var(--dsl-g-radius-control, 8px);
+  border: 1px solid transparent;
+  font-size: 12px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.try {
+  border-color: var(--dsw-alias-state-business-primary, #4f8ef7);
+  color: var(--dsw-alias-state-business-primary, #4f8ef7);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8ef7) 14%, transparent);
+}
+
+.try:hover {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8ef7) 22%, transparent);
+}
+
+.copy {
+  border-color: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.preview {
+  border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsl-g-radius-surface, 12px);
+  padding: 12px;
+  min-height: 0;
+  overflow: auto;
+  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.08));
+}