dsh-better-display 0.1.1

package/skills/generative-mcpapps/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: generative-mcpapps
+description: "Render interactive HTML/JS widgets, product UI mockups, and clickable prototypes inside the chat (MCP Apps / SEP-1865). Use whenever the user asks to see, preview, compare, or interact with a design (mockup, prototype, 画出来看看): data visualizations, calculators, stateful forms, config wizards, or any UI richer than plain Markdown."
+---
+
+# Generative MCP Apps
+
+Create self-contained interactive HTML/JS widgets, UI mockups, and clickable prototypes in chat. This is an Agent Skill with YAML metadata and Markdown instructions; it has no Gemini-specific syntax or model requirement.
+
+## Select the delivery surface
+
+- In DSH with Better Display enabled, emit an `mcp-app` fenced code block. The reading view renders it in an iframe with `sandbox="allow-scripts allow-forms"`.
+- In another harness, use only its available, documented UI tool and actual input schema. The Better Display fence and message aliases below are not a universal MCP Apps transport.
+- If no inline renderer is available, save a standalone HTML artifact and explain how to open it. Do not claim that a plain code block was rendered.
+
+The harness must discover this skill before automatic selection can work. Keep the whole `generative-mcpapps/` folder together, including references and examples, in a skill directory supported by that harness. Merely placing it inside a plugin repository does not prove that the current agent has loaded it.
+
+## Build the widget
+
+1. Choose local interaction (tabs, filters, calculations) or an explicit submission back to chat. For Better Display, submission fills the composer; the user still sends the message. It does not execute tools or commands automatically.
+2. Inline critical CSS and JavaScript. Use semantic theme variables with readable fallbacks, a transparent body, and layouts that fit widths from 320px to 1200px. Avoid `100vh` and `min-h-screen`: Better Display measures content height and clamps it to 60–2400px.
+3. Read [HTML boilerplate and theme tokens](references/html_boilerplate.md) when assembling a card. Read [Better Display host messages](references/sep1865_protocol.md) only when using host communication. The latter documents this plugin's implementation, not a full MCP Apps specification.
+4. For a selectable local-state example, inspect [interactive_quiz.html](examples/interactive_quiz.html). Adapt its content and controls to the user's request.
+
+## Deliver in Better Display
+
+Output the complete HTML document directly in the answer:
+
+````markdown
+```mcp-app title="交互原型"
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>交互原型</title>
+</head>
+<body>
+  <!-- Include the widget's inline styles, content, and script here. -->
+</body>
+</html>
+```
+````
+
+## Verify the result
+
+Check the complete document, narrow-width layout, readable theme contrast, and the requested interaction. For a submission widget, verify that the chosen data reaches the chat composer; distinguish that from a sent message or completed agent action. A local-only widget needs no host submission. Report only the rendering and interaction actually observed in the available harness.

package/skills/generative-mcpapps/examples/interactive_quiz.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>双盲方案盲选评测器</title>
+  <style>
+    :root {
+      --app-bg: var(--background, #ffffff);
+      --card-bg: var(--card, #f8fafc);
+      --border-color: var(--border, #e2e8f0);
+      --text-main: var(--foreground, #0f172a);
+      --text-muted: var(--muted-foreground, #64748b);
+      --primary-color: var(--primary, #2563eb);
+      --primary-text: var(--primary-foreground, #ffffff);
+      --hover-bg: rgba(148, 163, 184, 0.12);
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --app-bg: var(--background, #0f172a);
+        --card-bg: var(--card, #1e293b);
+        --border-color: var(--border, #334155);
+        --text-main: var(--foreground, #f8fafc);
+        --text-muted: var(--muted-foreground, #94a3b8);
+      }
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      background: transparent;
+      color: var(--text-main);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      padding: 12px;
+    }
+    .quiz-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      padding: 16px;
+      max-width: 680px;
+      margin: 0 auto;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      border-bottom: 1px solid var(--border-color);
+      padding-bottom: 8px;
+    }
+    .title { font-size: 15px; font-weight: 600; }
+    .badge {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 9999px;
+      background: var(--hover-bg);
+      color: var(--text-muted);
+    }
+    .prompt {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-bottom: 14px;
+      line-height: 1.4;
+    }
+    .options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+    .option-btn {
+      text-align: left;
+      background: transparent;
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: 10px 14px;
+      color: var(--text-main);
+      font-size: 13px;
+      cursor: pointer;
+      line-height: 1.4;
+      transition: all 0.15s ease;
+    }
+    .option-btn:hover { background: var(--hover-bg); }
+    .option-btn.selected {
+      border-color: var(--primary-color);
+      background: var(--hover-bg);
+      font-weight: 500;
+    }
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 10px;
+    }
+    .submit-btn {
+      background: var(--primary-color);
+      color: var(--primary-text);
+      border: none;
+      border-radius: 6px;
+      padding: 7px 16px;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  </style>
+</head>
+<body>
+  <div class="quiz-card">
+    <div class="header">
+      <span class="title">⚡ 架构方案盲选评测</span>
+      <span class="badge" id="step-indicator">第 1/2 题</span>
+    </div>
+    <p class="prompt" id="question-text">
+      【场景】：订单超时自动关单，选 Redis 过期监听还是延迟消息队列？
+    </p>
+
+    <div class="options" id="options-container">
+      <button class="option-btn" onclick="selectOption('A')">A: 选 Redis 监听，轻量便捷无需额外运维</button>
+      <button class="option-btn" onclick="selectOption('B')">B: 坚决选延迟消息队列，Redis 监听会静默丢事件</button>
+    </div>
+
+    <div class="footer">
+      <span style="font-size: 12px; color: var(--text-muted);" id="status-text">请选择最符合你直觉的方案</span>
+      <button class="submit-btn" id="submit-btn" disabled onclick="submitChoice()">确认选择并提交</button>
+    </div>
+  </div>
+
+  <script>
+    let currentSelection = null;
+
+    function selectOption(key) {
+      currentSelection = key;
+      document.querySelectorAll('.option-btn').forEach((btn, idx) => {
+        btn.classList.toggle('selected', (idx === 0 && key === 'A') || (idx === 1 && key === 'B'));
+      });
+      document.getElementById('submit-btn').disabled = false;
+    }
+
+    function submitChoice() {
+      if (!currentSelection) return;
+
+      document.getElementById('status-text').innerText = "已发送到聊天输入框，请确认并发送。";
+      document.getElementById('submit-btn').disabled = true;
+
+      // 通过 Better Display 适配器将选择填入聊天输入框
+      window.parent.postMessage({
+        jsonrpc: "2.0",
+        id: "eval-" + Date.now(),
+        method: "ui/submit",
+        params: {
+          task: "architecture_quiz_completed",
+          choice: currentSelection,
+          desc: currentSelection === 'A' ? 'Redis 监听' : '延迟消息队列'
+        }
+      }, "*");
+    }
+  </script>
+</body>
+</html>

package/skills/generative-mcpapps/references/html_boilerplate.md

@@ -0,0 +1,122 @@
+# HTML Boilerplate & Theme Tokens Reference
+
+This document provides self-contained HTML/CSS templates optimized for MCP Apps iframes across dark and light modes.
+
+---
+
+## 1. Universal Theme Tokens Mapping
+
+Host applications inject different CSS variables into iframes. Use this resilient CSS custom properties cascade to guarantee proper contrast regardless of the host:
+
+```css
+:root {
+  /* Surface & Background */
+  --app-bg: var(--background, #ffffff);
+  --card-bg: var(--card, #f8fafc);
+  --border-color: var(--border, #e2e8f0);
+
+  /* Typography */
+  --text-main: var(--foreground, #0f172a);
+  --text-muted: var(--muted-foreground, #64748b);
+
+  /* Accents & States */
+  --primary-color: var(--primary, #2563eb);
+  --primary-text: var(--primary-foreground, #ffffff);
+  --hover-bg: rgba(148, 163, 184, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --app-bg: var(--background, #0f172a);
+    --card-bg: var(--card, #1e293b);
+    --border-color: var(--border, #334155);
+    --text-main: var(--foreground, #f8fafc);
+    --text-muted: var(--muted-foreground, #94a3b8);
+  }
+}
+```
+
+---
+
+## 2. Standard Responsive Card Template
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    /* Insert Theme Tokens here */
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      background: transparent;
+      color: var(--text-main);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      padding: 12px;
+    }
+    .mcp-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      padding: 16px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      max-width: 720px;
+      margin: 0 auto;
+    }
+    .mcp-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .mcp-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+    .mcp-badge {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 9999px;
+      background: var(--hover-bg);
+      color: var(--text-muted);
+    }
+    .btn-primary {
+      background: var(--primary-color);
+      color: var(--primary-text);
+      border: none;
+      border-radius: 6px;
+      padding: 8px 14px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: opacity 0.15s ease;
+    }
+    .btn-primary:hover { opacity: 0.9; }
+  </style>
+</head>
+<body>
+  <div class="mcp-card">
+    <div class="mcp-header">
+      <h3 class="mcp-title" id="widget-title">交互组件标题</h3>
+      <span class="mcp-badge" id="widget-badge">Interactive</span>
+    </div>
+    <div id="widget-content">
+      <!-- 动态正文内容 -->
+    </div>
+  </div>
+
+  <script>
+    function notifyHost(action, payload) {
+      window.parent.postMessage({
+        jsonrpc: "2.0",
+        id: "action-" + Date.now(),
+        method: "ui/submit",
+        params: { action, payload }
+      }, "*");
+    }
+  </script>
+</body>
+</html>
+```

package/skills/generative-mcpapps/references/sep1865_protocol.md

@@ -0,0 +1,54 @@
+# Better Display host messages
+
+This documents the adapter in `src/client/McpAppFrame.tsx`, not the full SEP-1865 specification. Use these messages for Better Display's `mcp-app` iframe. Other hosts require their own documented transport and capabilities.
+
+## Initialization and theme
+
+The iframe can send `ui/initialize` with a JSON-RPC request ID. Better Display responds with `result.protocolVersion` and `result.hostContext`, including `theme`, `locale`, and `styles.variables`.
+
+For compatibility, Better Display also sends an initial `ui/initialize` notification with those theme fields in `params`. Later theme changes arrive as `ui/notifications/host-context-changed`. The plugin injects a theme and height helper into HTML documents.
+
+When handling parent messages, verify the source:
+
+```javascript
+window.addEventListener("message", (event) => {
+  if (event.source !== window.parent) return;
+  const msg = event.data;
+  if (!msg || msg.jsonrpc !== "2.0") return;
+  const context = msg.result?.hostContext || msg.params;
+  if (context?.theme) {
+    document.documentElement.dataset.theme = context.theme;
+  }
+});
+```
+
+The sandbox has an opaque origin, so messages to the parent use `"*"`. The host checks that incoming messages originate from this iframe's content window.
+
+## Submit a choice to the composer
+
+```javascript
+window.parent.postMessage({
+  jsonrpc: "2.0",
+  id: "choice-" + Date.now(),
+  method: "ui/submit",
+  params: { task: "quiz_completed", choice: "B", desc: "Selected option B" }
+}, "*");
+```
+
+The host displays a receipt and fills the chat composer with a prompt derived from the parameters. The user must send it. `ui/update-model-context` is handled as the same composer action in this adapter; do not assume a silent model-context update. These submit handlers do not send a JSON-RPC success response, so do not wait indefinitely for one.
+
+There is no `tools/call` handler in this adapter. Use submission for a requested follow-up instead of claiming that a click executed a tool.
+
+## Readiness and sizing
+
+`ui/ready` and `ui/notifications/initialized` mark the iframe ready. The injected ResizeObserver normally handles height automatically. A widget may also send:
+
+```javascript
+window.parent.postMessage({
+  jsonrpc: "2.0",
+  method: "ui/resize",
+  params: { height: document.body.scrollHeight }
+}, "*");
+```
+
+The host accepts positive finite heights and clamps them to 60–2400px. No `ui/updateState` handler is provided by this adapter.

package/src/client/Blocks.tsx

@@ -0,0 +1,205 @@
+import { Component, Fragment, memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
+import type { AssistantBlock, UserMessageNode } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import { JsonBlock, MarkdownText, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives';
+import { ComposerFillContext, McpAppFrame } from './McpAppFrame.js';
+import { formatMessageClock } from './message-chrome.js';
+import { markdownLabels, truncatedJsonLabel } from './primitive-labels.js';
+import type { BlockRenderProps, ReaderBlockOwner } from './types.js';
+import { useStreamingText } from './streaming.js';
+import { MotionMarkdown, MotionPlainText } from './word-motion.js';
+import css from './Reader.module.css';
+
+const IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif']);
+
+export class BlockBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError() { return { failed: true }; }
+  render() {
+    return this.state.failed ? <div className={css.notice}>此内容暂时无法在阅读页显示；原对话中的记录未受影响。</div> : this.props.children;
+  }
+}
+
+export const ImageBlock = memo(function ImageBlock({ attachment, loadImage }: {
+  attachment: ImageAttachmentRef; loadImage: BlockRenderProps['loadImage'];
+}) {
+  const [attempt, setAttempt] = useState(0);
+  const [url, setUrl] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+  const [decoded, setDecoded] = useState(false);
+  const dialog = useRef<HTMLDialogElement>(null);
+  const opener = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    let active = true;
+    let owned: string | null = null;
+    const timeout = setTimeout(() => { if (active) { setError(true); active = false; } }, 20000);
+    setError(false); setDecoded(false); setUrl(null);
+    void loadImage(attachment).then(result => {
+      if (!active) return;
+      clearTimeout(timeout);
+      if (!IMAGE_TYPES.has(result.mediaType)) throw new Error('Unsupported image media type');
+      const bytes = Uint8Array.from(result.data);
+      owned = URL.createObjectURL(new Blob([bytes.buffer], { type: result.mediaType }));
+      setUrl(owned);
+    }).catch(() => { clearTimeout(timeout); if (active) setError(true); });
+    return () => { active = false; clearTimeout(timeout); if (owned) URL.revokeObjectURL(owned); };
+  }, [attachment.attachmentId, attempt, loadImage]);
+  const width = Number.isFinite(attachment.width) && attachment.width > 0 ? attachment.width : 4;
+  const height = Number.isFinite(attachment.height) && attachment.height > 0 ? attachment.height : 3;
+  return <figure className={css.imageFigure} data-reader-image data-image-state={error ? 'error' : decoded ? 'ready' : 'loading'}>
+    <div className={css.imageFrame} style={{ aspectRatio: `${width} / ${height}` }}>
+      {!error && url && <button ref={opener} type="button" className={css.imageOpen} aria-label={`放大图片${attachment.name ? `：${attachment.name}` : ''}`} onClick={() => dialog.current?.showModal()}>
+        <img src={url} alt={attachment.name ?? '会话图片'} width={width} height={height} onLoad={() => setDecoded(true)} onError={() => setError(true)} data-ready={decoded} />
+      </button>}
+      {(!decoded || error) && <div className={css.imagePlaceholder}>
+        <span>{error ? '图片未能加载' : '正在加载图片'}</span>
+        {error && <button type="button" className={css.textButton} onClick={() => setAttempt(value => value + 1)}>重试</button>}
+      </div>}
+    </div>
+    {attachment.name && <figcaption>{attachment.name}</figcaption>}
+    <dialog ref={dialog} className={css.imageDialog} aria-label="图片预览" onClose={() => opener.current?.focus()} onClick={event => { if (event.target === dialog.current) dialog.current?.close(); }}>
+      <button type="button" autoFocus className={css.dialogClose} aria-label="关闭图片预览" onClick={() => dialog.current?.close()}>×</button>
+      {url && <img src={url} alt={attachment.name ?? '会话图片'} />}
+    </dialog>
+  </figure>;
+});
+
+export function contentBlocks(content: UserMessageNode['content']): AssistantBlock[] {
+  return content.map(block => {
+    if (block.type === 'text') return { kind: 'text', text: block.text };
+    if (block.type === 'image') return { kind: 'image', attachment: block.attachment };
+    return { kind: 'other', block };
+  });
+}
+
+type TextPresentation = { startedAt?: number; interrupted?: boolean; liveText?: boolean };
+
+function ReadingMarkdown({ text, streaming, holdFormatting, startedAt, interrupted = false, liveText = false, kind = 'body', fileMentions }: { text: string; streaming: boolean; holdFormatting: boolean; kind?: 'body' | 'reasoning'; fileMentions?: BlockRenderProps['fileMentions'] } & TextPresentation) {
+  const root = useRef<HTMLDivElement>(null);
+  const presentation = useStreamingText(text, streaming, { startedAt, interrupted: interrupted || !liveText, selected: holdFormatting });
+  // Native Markdown changes block keys for its full final parse. Keep the last
+  // committed mode while this answer is selected, then finish formatting on
+  // deselection. Business status and the source text still update normally.
+  const committedMode = useRef(streaming);
+  const effectiveMode = holdFormatting ? committedMode.current : presentation.formatStreaming;
+  useLayoutEffect(() => { committedMode.current = effectiveMode; }, [effectiveMode]);
+  return <div ref={root} className={css.readingText} data-reader-text data-reader-text-kind={kind} data-received-length={text.length} data-shown-length={presentation.text.length}
+    data-presentation-pending={presentation.pending || undefined} data-motion-style="opacity-blur" data-ud-motion="reader-text-arrival" data-ud-motion-type="reveal" data-ud-motion-no-flash="true">
+    <MotionMarkdown text={presentation.text} streaming={effectiveMode} enabled={liveText && presentation.reveal && effectiveMode} revision={presentation.revision} fileMentions={fileMentions} />
+  </div>;
+}
+
+function ReadingReasoning({ text, streaming, holdFormatting, startedAt, interrupted = false, liveText = false }: { text: string; streaming: boolean; holdFormatting: boolean } & TextPresentation) {
+  const presentation = useStreamingText(text, streaming, { startedAt, interrupted: interrupted || !liveText, selected: holdFormatting });
+  return <div className={css.readingText} data-reader-text data-reader-text-kind="reasoning" data-received-length={text.length} data-shown-length={presentation.text.length}
+    data-presentation-pending={presentation.pending || undefined} data-motion-style="opacity-blur" data-ud-motion="reader-text-arrival" data-ud-motion-type="reveal" data-ud-motion-no-flash="true">
+    <MotionPlainText text={presentation.text} enabled={liveText && presentation.reveal} revision={presentation.revision} />
+  </div>;
+}
+
+function fallback(block: AssistantBlock, streaming: boolean, source: ReaderBlockOwner['source'], loadImage: BlockRenderProps['loadImage'], fillComposer: BlockRenderProps['fillComposer'], holdFormatting: boolean, presentation: TextPresentation, fileMentions?: BlockRenderProps['fileMentions']): ReactNode {
+  switch (block.kind) {
+    case 'text': return source === 'user' ? <MarkdownText text={block.text} labels={markdownLabels} /> : <ReadingMarkdown text={block.text} streaming={streaming} holdFormatting={holdFormatting} {...presentation} fileMentions={fileMentions} />;
+    case 'image': return <ImageBlock attachment={block.attachment} loadImage={loadImage} />;
+    case 'reasoning': return <ReadingReasoning text={block.text} streaming={streaming} holdFormatting={holdFormatting} {...presentation} />;
+    case 'tool-call': return <JsonBlock label={`工具参数 · ${block.name}`} payload={block.argsRaw} truncatedLabel={truncatedJsonLabel} />;
+    case 'other': {
+      const raw = block.block;
+      if (raw && typeof raw === 'object') {
+        const item = raw as Record<string, unknown>;
+        if ((item.type === 'mcp-app' || item.type === 'mcpapp' || item.type === 'ui') && typeof item.html === 'string') {
+          return <McpAppFrame html={item.html} title={typeof item.title === 'string' ? item.title : undefined} fillComposer={fillComposer} />;
+        }
+      }
+      return <div className={css.unknown}>
+        <p>此内容类型尚未接入阅读页，原始内容已保留。</p>
+        <JsonBlock label="查看原始内容" payload={block.block} truncatedLabel={truncatedJsonLabel} />
+      </div>;
+    }
+  }
+}
+
+export const Blocks = memo(function Blocks({ blocks, streaming = false, source = 'assistant', holdFormatting = false, startedAt, interrupted, liveText, renderSlotChain, loadImage, fillComposer, fileMentions }: BlockRenderProps & TextPresentation & {
+  blocks: readonly AssistantBlock[]; streaming?: boolean; source?: ReaderBlockOwner['source']; holdFormatting?: boolean;
+}) {
+  return <ComposerFillContext.Provider value={fillComposer}>
+    <div className={css.blocks} data-streaming={streaming || undefined}>
+      {blocks.map((block, index) => <BlockBoundary key={block.kind === 'image' ? `image:${block.attachment.attachmentId}:${index}` : `${index}:${block.kind}`}>
+        <Fragment>{renderSlotChain('dsh-better-display.block', { block, streaming, source }, { fallback: fallback(block, streaming, source, loadImage, fillComposer, holdFormatting, { startedAt, interrupted, liveText }, fileMentions) })}</Fragment>
+      </BlockBoundary>)}
+    </div>
+  </ComposerFillContext.Provider>;
+});
+
+import { TurnMetrics } from './TurnMetrics.js';
+
+function CopyGlyph() {
+  return <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><rect x="5" y="5" width="8" height="8" rx="1.5" /><path d="M3 10H2.8A.8.8 0 0 1 2 9.2V2.8a.8.8 0 0 1 .8-.8h6.4a.8.8 0 0 1 .8.8V3" /></svg>;
+}
+
+function useCopyReceipt() {
+  const [receipt, setReceipt] = useState('');
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+  const copy = async (text: string) => {
+    const accepted = await writeClipboard(text);
+    setReceipt(accepted ? '已复制' : '未能复制，请手动选择文字');
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setReceipt(''), 2000);
+  };
+  return { receipt, copy };
+}
+
+function MessageClock({ time }: { time: number }) {
+  return <time className={css.messageClock} dateTime={new Date(time).toISOString()}>{formatMessageClock(time)}</time>;
+}
+
+export function CopyAnswer({ blocks, onFork, metrics }: { blocks: readonly AssistantBlock[]; onFork?: () => void; metrics?: BlockRenderProps['metrics'] }) {
+  const { receipt, copy } = useCopyReceipt();
+  const text = blocks.filter((block): block is Extract<AssistantBlock, { kind: 'text' }> => block.kind === 'text').map(block => block.text).join('\n\n');
+  const endedAt = metrics?.endedAt;
+  const hasMetrics = metrics !== undefined && (metrics.usage !== undefined || metrics.runMs !== undefined || endedAt !== undefined);
+  if (!text.trim() && !onFork && !hasMetrics) return null;
+  return <div className={css.answerActions}>
+    {text.trim() !== '' && (
+      <button type="button" className={css.iconButton} aria-label="复制回答" title="复制回答" onClick={() => { void copy(text); }}>
+        <CopyGlyph />
+      </button>
+    )}
+    {onFork && (
+      <button
+        type="button"
+        className={css.iconButton}
+        aria-label="以此处为基础创建分叉会话"
+        title="以此处为基础创建分叉会话 (Fork)"
+        onClick={onFork}
+      >
+        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2">
+          <circle cx="4.5" cy="3.5" r="1.8" />
+          <circle cx="4.5" cy="12.5" r="1.8" />
+          <circle cx="11.5" cy="5.5" r="1.8" />
+          <path d="M4.5 5.5v5M4.5 8c2.5 0 4.5-1 7-2.5" strokeLinecap="round" />
+        </svg>
+      </button>
+    )}
+    {metrics && <TurnMetrics usage={metrics.usage} runMs={metrics.runMs} tokensPerSecond={metrics.tokensPerSecond} ttftMs={metrics.ttftMs} />}
+    {endedAt !== undefined && <MessageClock time={endedAt} />}
+    <span role="status" className={css.meta}>{receipt}</span>
+  </div>;
+}
+
+export function UserMessageActions({ text, time }: { text: string; time?: number }) {
+  const { receipt, copy } = useCopyReceipt();
+  const hasText = text.trim() !== '';
+  if (!hasText && time === undefined) return null;
+  return <div className={css.userActions}>
+    {time !== undefined && <MessageClock time={time} />}
+    {hasText && (
+      <button type="button" className={css.iconButton} aria-label="复制消息" title="复制消息" onClick={() => { void copy(text); }}>
+        <CopyGlyph />
+      </button>
+    )}
+    <span role="status" className={css.meta}>{receipt}</span>
+  </div>;
+}