@drscrewdriver/dsh-better-display 0.3.3-fork.1

package/src/client/McpAppFrame.module.css

@@ -0,0 +1,210 @@
+.card {
+  position: relative;
+  margin: 16px 0;
+  border-radius: 14px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
+  background: var(--dsw-alias-bg-module-platform, transparent);
+  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  overflow: hidden;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.16));
+  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.04);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 36px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.06));
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.015));
+  user-select: none;
+}
+
+.titleArea {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.icon {
+  flex-shrink: 0;
+  color: var(--dsw-alias-label-tertiary, #94a3b8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary, #64748b);
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #94a3b8);
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.15s ease;
+}
+
+.iconBtn:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06));
+  color: var(--dsw-alias-label-primary, #0f172a);
+}
+
+.iconBtn:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #2563eb);
+  outline-offset: 1px;
+}
+
+.iframeWrapper {
+  width: 100%;
+  position: relative;
+  background: transparent;
+  transition: height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  background: transparent;
+}
+
+.receipt {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  padding: 8px 14px;
+  background: var(--dsw-alias-interactive-bg-hover, rgba(34, 197, 94, 0.05));
+  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.06));
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-primary, #0f172a);
+  animation: slideUp 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.receiptPrompt {
+  flex: 1 1 100%;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary, #64748b);
+  background: var(--dsw-alias-bg-base, rgba(0, 0, 0, 0.03));
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.06));
+  border-radius: 6px;
+  padding: 6px 10px;
+  user-select: text;
+  cursor: text;
+  overflow-wrap: anywhere;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.receiptSummary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--dsw-alias-state-business-primary, #16a34a);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.receiptHint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sendKbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #94a3b8);
+  background: var(--dsw-alias-bg-base, rgba(0, 0, 0, 0.04));
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
+  padding: 2px 8px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s ease;
+}
+
+.sendKbd:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.08));
+  color: var(--dsw-alias-label-primary, #0f172a);
+}
+
+.sendKbd:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #2563eb);
+  outline-offset: 1px;
+}
+
+.streamingPlaceholder {
+  margin: 16px 0;
+  padding: 16px 18px;
+  border-radius: 14px;
+  border: 1px dashed var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.015));
+  color: var(--dsw-alias-label-secondary, #64748b);
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pulseDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--dsw-alias-state-business-primary, #2563eb);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.35;
+    transform: scale(0.9);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}

package/src/client/McpAppFrame.tsx

@@ -0,0 +1,317 @@
+import { createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import {
+  getHostTheme,
+  getCssTokens,
+  extractHtmlTitle,
+  ensureHtmlDocument,
+  formatReceiptPrompt,
+  fillComposerDom,
+} from './mcp-app.js';
+import css from './McpAppFrame.module.css';
+
+/**
+ * Composer fill channel shared by every McpAppFrame in one Reader tree.
+ * Provided by Blocks from the session-scoped Reader face (sanctioned
+ * conversation input API); absent outside a Reader, where the DOM fallback
+ * applies. React context avoids threading the callback through the whole
+ * markdown pipeline (MarkdownText -> render context -> code fence).
+ */
+export type ComposerFill = (text: string) => boolean;
+export const ComposerFillContext = createContext<ComposerFill | undefined>(undefined);
+export function useComposerFill(): ComposerFill | undefined {
+  return useContext(ComposerFillContext);
+}
+
+export interface McpAppFrameProps {
+  html: string;
+  title?: string;
+  initialHeight?: number;
+  /** Session-scoped composer writer; falls back to context, then DOM. */
+  fillComposer?: ComposerFill;
+}
+
+export const McpAppFrame = memo(function McpAppFrame({
+  html,
+  title: initialTitle,
+  initialHeight = 240,
+  fillComposer: fillComposerProp,
+}: McpAppFrameProps) {
+  const fillComposerFromContext = useComposerFill();
+  const writeComposer = useMemo<ComposerFill>(
+    () => fillComposerProp ?? fillComposerFromContext ?? fillComposerDom,
+    [fillComposerProp, fillComposerFromContext],
+  );
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const lastParamsRef = useRef<Record<string, unknown>>({});
+  const [height, setHeight] = useState(() => Math.max(60, Math.min(2400, initialHeight)));
+  const [ready, setReady] = useState(false);
+  const [receipt, setReceipt] = useState<string | null>(null);
+  const [lastPrompt, setLastPrompt] = useState<string | null>(null);
+  const [reloadNonce, setReloadNonce] = useState(0);
+  const frameId = useId();
+
+  const title = useMemo(() => {
+    return initialTitle || extractHtmlTitle(html) || '交互式 MCP App';
+  }, [initialTitle, html]);
+
+  // Capture the host theme ONCE for the initial srcDoc. Live theme switches
+  // are delivered via postMessage (broadcastTheme), so the srcDoc identity
+  // stays stable and the iframe never reloads (which would wipe user state
+  // such as checked boxes or selected tabs).
+  const [initialTheme] = useState(getHostTheme);
+  const preparedHtml = useMemo(() => ensureHtmlDocument(html, initialTheme), [html, initialTheme]);
+
+  const fillComposer = useCallback((params: Record<string, unknown>) => {
+    const prompt = formatReceiptPrompt(params, title);
+    setLastPrompt(prompt);
+    try {
+      if (writeComposer(prompt)) return true;
+      // Composer refused: leave the prompt visible in the receipt bar and
+      // stash a clipboard copy as a fallback.
+      try {
+        void navigator.clipboard?.writeText(prompt);
+      } catch {
+        // Clipboard unavailable; the visible receipt text remains copyable.
+      }
+    } catch {
+      // Ignore DOM query errors in non-browser environments
+    }
+    return false;
+  }, [title, writeComposer]);
+
+  const handleUserSubmit = useCallback((params: Record<string, unknown>) => {
+    lastParamsRef.current = params;
+    let summary = '';
+    if (typeof params.choice === 'string') {
+      const desc = typeof params.desc === 'string' ? ` (${params.desc})` : '';
+      summary = `选择: ${params.choice}${desc}`;
+    } else if (typeof params.action === 'string') {
+      summary = `操作: ${params.action}${params.payload ? ` (${JSON.stringify(params.payload)})` : ''}`;
+    } else if (typeof params.selectedVariant === 'string') {
+      summary = `方案: ${params.selectedVariant}`;
+    } else {
+      summary = JSON.stringify(params);
+    }
+    setReceipt(summary);
+
+    // Populate DSH composer with natural prompt and trigger React input state
+    fillComposer(params);
+  }, [fillComposer]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const iframe = iframeRef.current;
+      if (!iframe || event.source !== iframe.contentWindow) return;
+
+      const data = event.data;
+      if (!data || typeof data !== 'object') return;
+
+      // Protocol SEP-1865 JSON-RPC 2.0
+      const currentTheme = getHostTheme();
+      const cssTokens = getCssTokens(currentTheme);
+
+      // 1. ui/initialize (View -> Host)
+      if (data.method === 'ui/initialize') {
+        const response = {
+          jsonrpc: '2.0',
+          id: data.id,
+          result: {
+            protocolVersion: '2026-01-26',
+            hostContext: {
+              theme: currentTheme,
+              locale: 'zh-CN',
+              styles: {
+                variables: cssTokens,
+              },
+            },
+          },
+        };
+        iframe.contentWindow?.postMessage(response, '*');
+        setReady(true);
+        return;
+      }
+
+      // 2. ui/ready or initialized notification
+      if (data.method === 'ui/ready' || data.method === 'ui/notifications/initialized') {
+        setReady(true);
+        return;
+      }
+
+      // 3. ui/resize
+      if (data.method === 'ui/resize' && data.params?.height) {
+        const h = Number(data.params.height);
+        if (Number.isFinite(h) && h > 0) {
+          setHeight(Math.max(60, Math.min(2400, Math.round(h))));
+        }
+        return;
+      }
+
+      // 4. ui/submit or ui/update-model-context
+      if (data.method === 'ui/submit' || data.method === 'ui/update-model-context') {
+        const params = (data.params as Record<string, unknown>) || {};
+        handleUserSubmit(params);
+        return;
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    // Broadcast live theme changes to running iframe
+    const broadcastTheme = () => {
+      const newTheme = getHostTheme();
+      const tokens = getCssTokens(newTheme);
+      iframeRef.current?.contentWindow?.postMessage({
+        jsonrpc: '2.0',
+        method: 'ui/notifications/host-context-changed',
+        params: {
+          theme: newTheme,
+          styles: { variables: tokens },
+        },
+      }, '*');
+    };
+
+    let observer: MutationObserver | null = null;
+    if (typeof MutationObserver !== 'undefined' && typeof document !== 'undefined') {
+      observer = new MutationObserver(broadcastTheme);
+      if (document.body) {
+        observer.observe(document.body, { attributes: true, attributeFilter: ['data-ds-dark-theme', 'class', 'style', 'data-theme'] });
+      }
+      if (document.documentElement) {
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'class', 'style'] });
+      }
+    }
+
+    const media = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+    media?.addEventListener?.('change', broadcastTheme);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      observer?.disconnect();
+      media?.removeEventListener?.('change', broadcastTheme);
+    };
+  }, [handleUserSubmit]);
+
+  const handleFrameLoad = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    // Proactive Host -> View initialize notification for boilerplate compatibility
+    const currentTheme = getHostTheme();
+    const cssTokens = getCssTokens(currentTheme);
+    iframe.contentWindow?.postMessage({
+      jsonrpc: '2.0',
+      method: 'ui/initialize',
+      params: {
+        theme: currentTheme,
+        locale: 'zh-CN',
+        styles: {
+          variables: cssTokens,
+        },
+      },
+    }, '*');
+
+    setReady(true);
+  }, []);
+
+  const handleReload = useCallback(() => {
+    setReloadNonce(n => n + 1);
+    setReady(false);
+    setReceipt(null);
+  }, []);
+
+  return (
+    <div className={css.card} data-mcp-app-card data-testid="mcp-app-card">
+      <div className={css.header}>
+        <div className={css.titleArea}>
+          <span className={css.icon} aria-hidden="true">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect width="18" height="18" x="3" y="3" rx="2" />
+              <path d="M3 9h18" />
+              <path d="M9 21V9" />
+            </svg>
+          </span>
+          <span className={css.title} title={title}>{title}</span>
+        </div>
+        <div className={css.actions}>
+          <button
+            type="button"
+            className={css.iconBtn}
+            onClick={handleReload}
+            title="重置组件状态"
+            aria-label="重置组件状态"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+              <path d="M3 3v5h5" />
+              <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+              <path d="M16 16h5v5" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className={css.iframeWrapper} style={{ height: `${height}px` }}>
+        <iframe
+          key={`${frameId}-${reloadNonce}`}
+          ref={iframeRef}
+          className={css.iframe}
+          title={title}
+          srcDoc={preparedHtml}
+          sandbox="allow-scripts allow-forms"
+          referrerPolicy="no-referrer"
+          onLoad={handleFrameLoad}
+        />
+      </div>
+
+      {receipt && (
+        <div className={css.receipt} data-testid="mcp-app-receipt">
+          <span className={css.receiptSummary}>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            <span>已就绪：{receipt}</span>
+          </span>
+          {lastPrompt && (
+            <div className={css.receiptPrompt} title={lastPrompt}>
+              {lastPrompt}
+            </div>
+          )}
+          <div className={css.receiptHint}>
+            <button
+              type="button"
+              className={css.sendKbd}
+              title="把这条结果重新填入输入框，然后回车发送"
+              onClick={() => {
+                fillComposer(lastParamsRef.current);
+              }}
+            >
+              <span>填入输入框</span>
+              <kbd>↵</kbd>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+/**
+ * Markdown code-fence mount point: picks the session composer writer from
+ * React context (provided by Blocks) without changing the markdown
+ * pipeline's signatures.
+ */
+export function McpAppCodeBlock({ html, title, initialHeight }: {
+  html: string; title?: string; initialHeight?: number;
+}) {
+  const fillComposer = useComposerFill();
+  return <McpAppFrame html={html} title={title} initialHeight={initialHeight} fillComposer={fillComposer} />;
+}
+
+export function StreamingMcpAppPlaceholder({ title }: { title?: string }) {
+  return (
+    <div className={css.streamingPlaceholder}>
+      <span className={css.pulseDot} aria-hidden="true" />
+      <span>正在生成交互组件{title ? `（${title}）` : ''}...</span>
+    </div>
+  );
+}

package/src/client/OfficialContent.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useState, useSyncExternalStore, type ReactNode } from 'react';
+import type { ChatConversationViewNode, ChatNodeOwnerProps, TurnTailOwnerProps, UseDisclosure } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-store';
+import type { ToolCallBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { AssistantActionOwnerProps } from '@deepseek-ai/dsh-client-ui-chat/client';
+type MessageId = AssistantActionOwnerProps['messageId'];
+import { OFFICIAL_SEATS } from './official-slots.js';
+import type { BlockRenderProps } from './types.js';
+
+export function OfficialActions({ official, messageId }: Pick<BlockRenderProps, 'official'> & { messageId?: MessageId }) {
+  if (!official || !messageId) return null;
+  return <span data-reader-official-actions style={{ display: 'contents' }}>
+    {official.renderSlot(OFFICIAL_SEATS.actions, { messageId })}
+  </span>;
+}
+
+/** Each atomic Tool view owns its disclosure state through this stable Hook prop. */
+const useToolDisclosure: UseDisclosure = () => {
+  const [expanded, setExpanded] = useState(false);
+  const toggle = useCallback(() => setExpanded(previous => !previous), []);
+  return { expanded, setExpanded, toggle };
+};
+
+export function OfficialTool({ official, block, toolName, cwd, openFile, fallback }: BlockRenderProps & {
+  official: NonNullable<BlockRenderProps['official']>; block: ToolCallBlock; toolName: string; fallback: ReactNode;
+}) {
+  const home = useSyncExternalStore(official.officialHost.subscribe, official.officialHost.getSnapshot).home;
+  return <div data-reader-tool-official>
+    {(official.renderSlot as (key: string, owner: object, options: object) => ReactNode)(OFFICIAL_SEATS.tools, {
+      callId: block.callId, toolName,
+      phase: 'kind' in block ? 'result' : block.phase, block, cwd, home,
+      openFile: openFile ?? (() => {}),
+      loadImage: official.officialImageLoader,
+      useDisclosure: useToolDisclosure,
+      inspect: () => official.openView('trajectory', block.callId),
+    }, { entryKey: toolName, hookContext: { callId: block.callId, assistant: undefined }, fallback })}
+  </div>;
+}
+
+export function OfficialNode({ node, fallback, ...render }: BlockRenderProps & { node: ChatConversationViewNode; fallback: ReactNode }) {
+  const official = render.official;
+  const [disclosureReset] = useState(() => createSnapshotStore(0));
+  if (!official) return fallback;
+  const owner: ChatNodeOwnerProps = {
+    cwd: render.cwd,
+    openFile: render.openFile ?? (() => {}),
+    openSkill: () => {},
+    forkAt: render.forkAt ?? (() => {}),
+    inspectCall: callId => official.openView('trajectory', callId),
+    loadImage: official.officialImageLoader,
+    renderMessageImages: images => official.renderSlot(OFFICIAL_SEATS.images, {
+      ...images, loadImage: official.officialImageLoader,
+    }),
+    fileMentions: official.officialFileMentions,
+  };
+  const turn = node.location.kind === 'turn' || node.location.kind === 'step' ? node.location.turn : undefined;
+  // The runtime node domain is open; the public SlotMap enumerates the known kinds.
+  const renderNode = official.renderSlot as unknown as (key: string, owner: object, options: object) => ReactNode;
+  return <div data-reader-official-node={node.kind} data-chat-anchor-key={node.key} data-chat-flow-kind={node.kind}>
+    {renderNode(OFFICIAL_SEATS.nodes, { ...owner, node }, { entryKey: node.kind, hookContext: { turnData: turn?.data, disclosureReset }, fallback })}
+  </div>;
+}
+
+export function OfficialTail({ official, owner, produced }: Pick<BlockRenderProps, 'official'> & { owner?: TurnTailOwnerProps; produced: readonly string[] }) {
+  const tailOwner = owner && official ? { ...owner, openFile: official.officialPreviewFile, readerProducedPaths: produced } : undefined;
+  return official && tailOwner ? <div data-reader-official-tail style={{ display: 'contents' }}>
+    {official.renderSlot(OFFICIAL_SEATS.tail, tailOwner)}
+  </div> : null;
+}