@changfenhuang/dsh-genui 0.9.3 → 0.9.6

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.3",
+  "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
@@ -956,8 +963,11 @@ button.ftNameBtn[aria-expanded] { cursor: pointer; }
 }
 
 /* "✓ 已触发" 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) {
@@ -1149,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;
 }
@@ -1159,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;
@@ -1211,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;
@@ -1235,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/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));
+}

package/src/client/TemplateDrawer.tsx

@@ -0,0 +1,137 @@
+/**
+ * TemplateDrawer — GenUI 模板中心（0.9.4 新手引导）。
+ *
+ * 分类浏览 → 点击卡片 → 内嵌预览（demo spec 由 GenuiBlock 直接渲染，
+ * dogfooding）+「试用」插入输入框 /「复制指令」。用户先看到效果，
+ * 再决定把指令发给模型——genui 能力说明书。
+ */
+import { useMemo, useRef, useState } from 'react'
+import { GENUI_TEMPLATES, type GenuiTemplate } from './templates.ts'
+import { GenuiBlock } from './GenuiBlock.tsx'
+import { ErrorBoundary } from './ErrorBoundary.tsx'
+import { panelStateKey } from './interaction-store.ts'
+import { buildAchievementsSpec } from './achievements.ts'
+import { getAchievementSnapshot, subscribeAchievements } from './achievement-store.ts'
+import { useSyncExternalStore } from 'react'
+import css from './TemplateDrawer.module.css'
+
+export interface TemplateDrawerProps {
+  /** 试用：把模板指令插入当前输入框草稿。 */
+  onUse: (instruction: string) => void
+  /** 当前面板（模板中心/成就页），由面板 header 按钮控制。 */
+  tab: 'templates' | 'achievements'
+}
+
+const CATEGORIES = ['全部', '仪表盘', '数据', '流程', '图表', '交互', '测验', '高级'] as const
+type Category = (typeof CATEGORIES)[number]
+
+/** Copy to clipboard with a legacy fallback (like GenuiCopy). */
+function copyText(text: string): Promise<void> {
+  if (navigator.clipboard !== undefined) return navigator.clipboard.writeText(text)
+  return new Promise((resolve, reject) => {
+    try {
+      const ta = document.createElement('textarea')
+      ta.value = text
+      ta.style.position = 'fixed'
+      ta.style.opacity = '0'
+      document.body.appendChild(ta)
+      ta.select()
+      document.execCommand('copy')
+      ta.remove()
+      resolve()
+    } catch (error) {
+      reject(error instanceof Error ? error : new Error(String(error)))
+    }
+  })
+}
+
+export function TemplateDrawer({ onUse, tab }: TemplateDrawerProps) {
+  const [category, setCategory] = useState<Category>('全部')
+  const [selected, setSelected] = useState<GenuiTemplate | null>(null)
+  const [copied, setCopied] = useState(false)
+  const timer = useRef(0)
+  // Achievements tab: live state snapshot.
+  const achievements = useSyncExternalStore(subscribeAchievements, () => getAchievementSnapshot())
+  const achievementSpec = useMemo(
+    () => buildAchievementsSpec(achievements.state, achievements.unlocked),
+    [achievements],
+  )
+
+  const items = useMemo(
+    () => (category === '全部' ? [...GENUI_TEMPLATES] : GENUI_TEMPLATES.filter(t => t.category === category)),
+    [category],
+  )
+
+  const copy = async (text: string): Promise<void> => {
+    try {
+      await copyText(text)
+      setCopied(true)
+      window.clearTimeout(timer.current)
+      timer.current = window.setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // Clipboard denied: the instruction stays in the drawer; nothing else
+      // to do — the use flow does not depend on it.
+    }
+  }
+
+  return (
+    <div className={css.wrap} data-genui-templates={tab === 'templates' ? undefined : 'achievements'}>
+      {tab === 'achievements' ? (
+        <div className={css.achievements} data-genui-achievements>
+          <ErrorBoundary label="成就页">
+            <GenuiBlock spec={achievementSpec} stateKey={panelStateKey('genui-achievements', JSON.stringify(achievementSpec))} />
+          </ErrorBoundary>
+        </div>
+      ) : (
+        <>
+          <div className={css.cats} role="tablist" aria-label="模板分类">
+            {CATEGORIES.map(c => (
+              <button
+                key={c}
+                type="button"
+                role="tab"
+                aria-selected={category === c}
+                className={`${css.cat}${category === c ? ` ${css.catActive}` : ''}`}
+                onClick={() => { setCategory(c); setSelected(null) }}
+              >
+                {c}
+              </button>
+            ))}
+          </div>
+          <div className={css.list}>
+            {items.map(tpl => (
+              <button
+                key={tpl.id}
+                type="button"
+                className={`${css.card}${selected?.id === tpl.id ? ` ${css.cardActive}` : ''}`}
+                onClick={() => setSelected(prev => (prev?.id === tpl.id ? null : tpl))}
+              >
+                <span className={css.cardName}>{tpl.name}</span>
+                <span className={css.cardMeta}>{tpl.category}</span>
+                <span className={css.cardDesc}>{tpl.description}</span>
+              </button>
+            ))}
+          </div>
+          {selected !== null && (
+            <div className={css.detail} data-genui-template-preview>
+              <div className={css.toolbar}>
+                <span className={css.toolbarTitle}>{selected.name}</span>
+                <button type="button" className={css.try} onClick={() => onUse(selected.instruction)}>
+                  试用：插入输入框
+                </button>
+                <button type="button" className={css.copy} onClick={() => void copy(selected.instruction)}>
+                  {copied ? '✓ 已复制' : '复制指令'}
+                </button>
+              </div>
+              <div className={css.preview}>
+                <ErrorBoundary label="模板预览">
+                  <GenuiBlock spec={selected.demo} stateKey={panelStateKey('genui-tpl', selected.id)} />
+                </ErrorBoundary>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}