dsh-better-display 0.1.1

package/src/client/TurnMetrics.module.css

@@ -0,0 +1,139 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  position: relative;
+  font-size: 13px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.pillButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  cursor: pointer;
+  outline: none;
+  transition: all 140ms ease;
+  font-family: inherit;
+}
+
+.pillButton:hover, .pillButton[data-active=true] {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.timeButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 28px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  line-height: 24px;
+  white-space: nowrap;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.timeButton:hover, .timeButton[data-active=true] {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.pillIcon {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  opacity: .8;
+}
+
+.metricsPop {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: 260px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-base);
+  border: 1px solid var(--dsw-alias-border-l2);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
+  backdrop-filter: blur(10px);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+  animation: popIn 140ms ease-out;
+}
+
+@keyframes popIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.popHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+}
+
+.popSection {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.popSectionTitle {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: var(--dsw-alias-label-tertiary);
+  margin-top: 2px;
+}
+
+.popGrid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 3px 12px;
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.popLabel {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.popValue {
+  color: var(--dsw-alias-label-primary);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  text-align: right;
+}
+
+.popBadge {
+  font-size: 10px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: var(--dsw-alias-border-l1);
+  color: var(--dsw-alias-label-secondary);
+  margin-left: 4px;
+}

package/src/client/TurnMetrics.tsx

@@ -0,0 +1,160 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import type { TurnTailChatData } from '@deepseek-ai/dsh-client-ui-chat/client';
+import { formatRanFor, formatRunDuration } from './message-chrome.js';
+import css from './TurnMetrics.module.css';
+
+type TurnTokenUsage = NonNullable<TurnTailChatData['tokenUsage']>;
+
+export interface TurnMetricsProps {
+  usage?: TurnTokenUsage;
+  runMs?: number;
+  tokensPerSecond?: number;
+  ttftMs?: number;
+}
+
+function formatTokens(count: number): string {
+  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(2)}M tok`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k tok`;
+  return `${count} tok`;
+}
+
+export const TurnMetrics = memo(function TurnMetrics({
+  usage,
+  runMs,
+  tokensPerSecond,
+  ttftMs,
+}: TurnMetricsProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('pointerdown', onClickOutside);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onClickOutside);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  const totalTokens = usage?.totalTokens;
+  const hasTiming = typeof runMs === 'number' && runMs > 0;
+  const hasTokens = typeof totalTokens === 'number' && totalTokens > 0;
+  if (!hasTiming && !hasTokens) return null;
+
+  const cacheHitPercent = usage && usage.cacheReadTokens && usage.totalTokens > usage.outputTokens
+    ? Math.round((usage.cacheReadTokens / (usage.totalTokens - usage.outputTokens)) * 100)
+    : null;
+
+  return (
+    <span ref={containerRef} className={css.container}>
+      {hasTokens && typeof totalTokens === 'number' && (
+        <button
+          type="button"
+          className={css.pillButton}
+          data-active={open}
+          onClick={() => setOpen(v => !v)}
+          aria-expanded={open}
+          title="查看本轮 Token 消耗"
+        >
+          <svg className={css.pillIcon} viewBox="0 0 16 16" fill="none" stroke="currentColor">
+            <ellipse cx="8" cy="4.2" rx="5" ry="2.2" strokeWidth="1.2" />
+            <path d="M3 4.2v7.6c0 1.2 2.2 2.2 5 2.2s5-1 5-2.2V4.2" strokeWidth="1.2" />
+            <path d="M3 8c0 1.2 2.2 2.2 5 2.2s5-1 5-2.2" strokeWidth="1.2" />
+          </svg>
+          <span>用量 {formatTokens(totalTokens)}</span>
+        </button>
+      )}
+      {hasTiming && typeof runMs === 'number' && (
+        <button
+          type="button"
+          className={css.timeButton}
+          data-active={open}
+          onClick={() => setOpen(v => !v)}
+          aria-expanded={open}
+          aria-label={formatRanFor(runMs)}
+          title="查看本轮用时和速度"
+        >
+          <svg className={css.pillIcon} viewBox="0 0 16 16" fill="none" stroke="currentColor">
+            <circle cx="8" cy="8" r="6.5" strokeWidth="1.2" />
+            <path d="M8 4.5v3.8l2.5 1.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <span>{formatRanFor(runMs)}</span>
+        </button>
+      )}
+
+      {open && (
+        <div className={css.metricsPop} role="dialog" aria-label="本轮概况">
+          <div className={css.popHeader}>
+            <span>本轮性能与用量概况</span>
+          </div>
+
+          {hasTiming && typeof runMs === 'number' && (
+            <div className={css.popSection}>
+              <div className={css.popSectionTitle}>耗时与生成速度</div>
+              <div className={css.popGrid}>
+                <span className={css.popLabel}>总用时</span>
+                <span className={css.popValue}>{formatRunDuration(runMs)}</span>
+
+                {typeof tokensPerSecond === 'number' && tokensPerSecond > 0 && (
+                  <>
+                    <span className={css.popLabel}>生成吞吐 (TPS)</span>
+                    <span className={css.popValue}>{tokensPerSecond.toFixed(1)} tok/s</span>
+                  </>
+                )}
+
+                {typeof ttftMs === 'number' && ttftMs > 0 && (
+                  <>
+                    <span className={css.popLabel}>首字延迟 (TTFT)</span>
+                    <span className={css.popValue}>{(ttftMs / 1000).toFixed(2)}s</span>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
+          {hasTokens && usage && (
+            <div className={css.popSection}>
+              <div className={css.popSectionTitle}>Token 消耗分解</div>
+              <div className={css.popGrid}>
+                <span className={css.popLabel}>总消耗</span>
+                <span className={css.popValue}>{usage.totalTokens.toLocaleString()} tok</span>
+
+                <span className={css.popLabel}>
+                  输入
+                  {cacheHitPercent !== null && (
+                    <span className={css.popBadge}>命中 {cacheHitPercent}%</span>
+                  )}
+                </span>
+                <span className={css.popValue}>{(usage.totalTokens - usage.outputTokens).toLocaleString()} tok</span>
+
+                {typeof usage.cacheReadTokens === 'number' && usage.cacheReadTokens > 0 && (
+                  <>
+                    <span className={css.popLabel}>缓存读取</span>
+                    <span className={css.popValue}>{usage.cacheReadTokens.toLocaleString()} tok</span>
+                  </>
+                )}
+
+                <span className={css.popLabel}>
+                  输出
+                  {typeof usage.reasoningTokens === 'number' && usage.reasoningTokens > 0 && (
+                    <span className={css.popBadge}>思考 {usage.reasoningTokens.toLocaleString()}</span>
+                  )}
+                </span>
+                <span className={css.popValue}>{usage.outputTokens?.toLocaleString() ?? 0} tok</span>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </span>
+  );
+});

package/src/client/WaitingStatus.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { formatRunDuration } from './message-chrome.js';
+import type { WaitingAnchor } from './waiting-clock.js';
+import css from './Reader.module.css';
+
+export function WaitingStatus({ anchor, label }: { anchor: WaitingAnchor; label: string }) {
+  // A new input gets its own clock even if the waiting indicator stays mounted.
+  return <InputClock key={anchor.key} startTime={anchor.time} label={label} />;
+}
+function InputClock({ startTime, label }: { startTime: number | null; label: string }) {
+  const [mountedAt] = useState(() => Date.now());
+  const [now, setNow] = useState(() => Date.now());
+  const anchor = startTime ?? mountedAt;
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  return <div className={css.turnStatus} role="status" aria-live="polite" data-reader-turn-status data-reader-wait-start={anchor}>
+    <span className={css.turnStatusLabel}>{label}</span>
+    <span className={css.turnStatusClock} aria-hidden="true">{formatRunDuration(Math.max(0, now - anchor))}</span>
+  </div>;
+}

package/src/client/conversation-scroll.ts

@@ -0,0 +1,28 @@
+/**
+ * Conversation-column scroll helpers. Official ChatView lands Turns by writing
+ * the enclosing `[data-conversation-scroll]` box; `Element.scrollIntoView`
+ * also walks ancestor scrollers and can lift the sticky composer off the
+ * bottom of the viewport (rail jump to top, then to bottom).
+ */
+
+/** Reading-line offset used by ui-chat ChatView.landOnRow. */
+export const READING_LINE_OFFSET_PX = 24;
+
+/** Active column host when present; otherwise the view-local scroller. */
+export function scrollerOf(from: HTMLElement): HTMLElement {
+  return from.closest('[data-conversation-scroll]') ?? from;
+}
+
+/** Row position in scrollport coordinates (viewport-independent). */
+export function flowTop(row: HTMLElement, scrollport: HTMLElement): number {
+  return row.getBoundingClientRect().top - scrollport.getBoundingClientRect().top;
+}
+
+/**
+ * Place `row` on the conversation scroller only. Never calls scrollIntoView.
+ * @param row - a rendered `[data-reader-turn]` row.
+ * @param scrollport - `scrollerOf` of the reader root.
+ */
+export function landTurn(row: HTMLElement, scrollport: HTMLElement, offsetPx = READING_LINE_OFFSET_PX): void {
+  scrollport.scrollTop += flowTop(row, scrollport) - offsetPx;
+}

package/src/client/deliverables.ts

@@ -0,0 +1,122 @@
+import type { TurnLocation } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { MarkdownFileMentions } from '@deepseek-ai/dsh-client-ui-primitives';
+import type { ReaderFlowEntry } from './tool-activity.js';
+import { inputFields, stringValue, toolIdentity } from './tool-activity.js';
+
+interface ProducedEntry {
+  readonly seq?: number;
+  readonly path: string;
+}
+
+interface DeliverablesData {
+  readonly produced: readonly ProducedEntry[];
+}
+
+/** Extract standard filename without directory components. */
+export function basename(path: string): string {
+  const normalized = path.replace(/[/\\]+$/, '');
+  const at = Math.max(normalized.lastIndexOf('/'), normalized.lastIndexOf('\\'));
+  return at === -1 ? normalized : normalized.slice(at + 1);
+}
+
+/** Extract parent directory of a path (or '.' if top-level). */
+export function dirname(path: string): string {
+  const normalized = path.replace(/[/\\]+$/, '');
+  const at = Math.max(normalized.lastIndexOf('/'), normalized.lastIndexOf('\\'));
+  return at === -1 ? '.' : normalized.slice(0, at) || '.';
+}
+
+/**
+ * The produced-files chip row waits for turn close. Live writes still
+ * accumulate, but the row must not interrupt an in-progress process.
+ */
+export function showDeliverablesRow(status: 'open' | 'closed' | 'unknown', paths: readonly string[]): boolean {
+  return status === 'closed' && paths.length > 0
+}
+
+/**
+ * Extract all unique file paths produced/modified in one turn.
+ * Respects official deliverables data when available, and falls back to
+ * inspecting successful write/edit tool invocations in the turn flow.
+ */
+export function getTurnDeliverables(turn: TurnLocation | undefined, flow?: readonly ReaderFlowEntry[]): readonly string[] {
+  const paths: string[] = [];
+  const seen = new Set<string>();
+
+  // 1. Check official deliverables turn data from @deepseek-ai/dsh-client-ui-deliverables
+  const deliverables = (turn?.data as { get(key: string): unknown } | undefined)?.get('deliverables') as DeliverablesData | undefined;
+  if (deliverables?.produced && Array.isArray(deliverables.produced)) {
+    for (const item of deliverables.produced) {
+      if (typeof item?.path === 'string' && item.path.trim().length > 0) {
+        const clean = item.path.trim();
+        if (!seen.has(clean)) {
+          seen.add(clean);
+          paths.push(clean);
+        }
+      }
+    }
+  }
+
+  if (paths.length > 0) return paths;
+
+  // 2. Fallback: inspect successful file modification tool calls in the flow
+  if (flow) {
+    for (const item of flow) {
+      if (item.kind !== 'tool' || !item.block) continue;
+      // Skip failed tool results
+      if ('isError' in item.block && item.block.isError) continue;
+      const { name, raw } = toolIdentity(item);
+      const toolName = name !== '工具调用' ? name : ((item.block as unknown as { name?: string }).name || (item.block as unknown as { call?: { name?: string } }).call?.name);
+      const toolRaw = raw || ((item.block as unknown as { argsRaw?: string }).argsRaw || (item.block as unknown as { call?: { argsRaw?: string } }).call?.argsRaw || '');
+      if (toolName === 'write' || toolName === 'edit' || toolName === 'apply_patch') {
+        const args = inputFields(toolRaw);
+        const target = stringValue(args, 'file_path', 'path', 'filename', 'filePath');
+        if (target && !seen.has(target)) {
+          seen.add(target);
+          paths.push(target);
+        }
+      } else if (toolName === 'str_replace_editor') {
+        const args = inputFields(toolRaw);
+        const cmd = stringValue(args, 'command');
+        if (cmd === 'create' || cmd === 'str_replace' || cmd === 'insert') {
+          const target = stringValue(args, 'path');
+          if (target && !seen.has(target)) {
+            seen.add(target);
+            paths.push(target);
+          }
+        }
+      }
+    }
+  }
+
+  return paths;
+}
+
+/** The single produced path whose basename is exactly value, or undefined. */
+function onlyPathWithBasename(paths: readonly string[], value: string): string | undefined {
+  const matches = paths.filter(path => basename(path) === value);
+  return matches.length === 1 ? matches[0] : undefined;
+}
+
+/**
+ * File-mention resolver: converts inline-code tokens matching produced paths
+ * into clickable file references that open the corresponding file on the host.
+ */
+export function createProducedFileMentions(
+  paths: readonly string[],
+  openFile: (path: string) => void,
+): MarkdownFileMentions {
+  return {
+    resolve(value: string) {
+      if (!value || value.includes('\n')) return undefined;
+      const clean = value.trim();
+      const path = paths.includes(clean) ? clean : onlyPathWithBasename(paths, clean);
+      if (path === undefined) return undefined;
+      return {
+        open: () => { openFile(path); },
+        label: `打开 ${path}`,
+        title: path,
+      };
+    },
+  };
+}

package/src/client/entry-policy.ts

@@ -0,0 +1,20 @@
+/** Select the reading view on entry, without fighting a later explicit tab choice. */
+export class ReaderEntryPolicy {
+  private entered = false;
+
+  constructor(private readonly requested: boolean, private readonly consumeRequest: () => void = () => {}) {}
+
+  select(view: string | null | undefined): 'reader' | null {
+    const requested = !this.entered && this.requested;
+    if (!this.entered) {
+      this.entered = true;
+      if (this.requested) this.consumeRequest();
+    }
+    return (requested || view == null) && view !== 'reader' ? 'reader' : null;
+  }
+}
+
+export function readerEntryRequested(search: string): boolean {
+  const value = new URLSearchParams(search).get('reader');
+  return value === '1' || /^0\.1\.0-trial\.\d+$/.test(value ?? '');
+}

package/src/client/entry.tsx

@@ -0,0 +1,40 @@
+import { useLayoutEffect } from 'react';
+import type { Context } from '@deepseek-ai/cordis';
+import type { ConversationStore } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { PropsRuntime, PropsStore, StoreDecl } from '@deepseek-ai/dsh-client-ui-slots';
+import type {} from '@deepseek-ai/dsh-client-ui-renderer/client';
+import { ReaderEntryPolicy, readerEntryRequested } from './entry-policy.js';
+
+function isConversationStore(store: StoreDecl | undefined): store is ConversationStore {
+  return typeof store === 'object' && store !== null
+    && store.spec.persist === 'dsh.conversation'
+    && typeof store.spec.actions.setView === 'function';
+}
+
+type EntryProps = PropsRuntime<'conversation.input.dock'> & PropsStore<ConversationStore> & { policy: ReaderEntryPolicy };
+
+function ReaderEntry({ useStore, actions, policy }: EntryProps) {
+  const view = useStore(state => state.view);
+  useLayoutEffect(() => {
+    const next = policy.select(view);
+    if (next) actions.setView(next);
+  }, [view, actions, policy]);
+  return null;
+}
+
+/** Reuse the native store handle; its framework-owned instance preserves drafts. */
+export function installReaderEntry(ctx: Context): () => void {
+  const native = ctx.slots.entriesOfSlot('conversation.session')[0]?.store;
+  if (!isConversationStore(native)) throw new Error('DSH Reader cannot bind the native conversation view store.');
+  const policy = new ReaderEntryPolicy(readerEntryRequested(location.search), () => {
+    const url = new URL(location.href);
+    url.searchParams.delete('reader');
+    history.replaceState(history.state, '', `${url.pathname}${url.search}${url.hash}`);
+  });
+  return ctx.slots.register({
+    name: 'conversation.input.dock',
+    id: 'dsh-better-display-entry',
+    store: native,
+    inject: () => ({ policy }),
+  }, ReaderEntry);
+}

package/src/client/fold-choreography.ts

@@ -0,0 +1,38 @@
+import type { LiveStep, LiveTurnItem } from './live-turn.js';
+
+/** Presentation clock, not model/network time. */
+export const FOLD_TIMING = { collapse: 320, count: 160, settle: 80, reveal: 180 } as const;
+export type FoldPhase = 'idle' | 'collapse' | 'count' | 'settle' | 'reveal';
+export type FlowRow =
+  | { kind: 'summary'; key: string; item: Extract<LiveTurnItem, { kind: 'fold' }> }
+  | { kind: 'step'; key: string; step: LiveStep; foldKey?: string };
+
+/** A step always has the same parent and React key, even when its membership changes. */
+export function flowRows(items: readonly LiveTurnItem[]): FlowRow[] {
+  return items.flatMap((item): FlowRow[] => item.kind === 'fold'
+    ? [{ kind: 'summary', key: item.key, item }, ...item.steps.map(step => ({ kind: 'step' as const, key: step.key, step, foldKey: item.key }))]
+    : [{ kind: 'step', key: item.key, step: item.step }]);
+}
+
+export function retiringKeys(before: readonly LiveTurnItem[], after: readonly LiveTurnItem[], open: Readonly<Record<string, boolean>>): string[] {
+  const folded = new Set(flowRows(after).filter(row => row.kind === 'step' && row.foldKey && !open[row.foldKey]).map(row => row.key));
+  return flowRows(before).filter(row => row.kind === 'step' && !row.foldKey && folded.has(row.key)).map(row => row.key);
+}
+
+/** Insert only new summary slots. Never admit incoming content during shrink. */
+export function collapseRows(before: readonly LiveTurnItem[], target: readonly LiveTurnItem[]): FlowRow[] {
+  const rows = flowRows(before);
+  const headers = new Set(rows.filter(row => row.kind === 'summary').map(row => row.key));
+  for (const item of target) {
+    if (item.kind !== 'fold' || headers.has(item.key)) continue;
+    const members = new Set(item.steps.map(step => step.key));
+    const at = rows.findIndex(row => members.has(row.key));
+    if (at >= 0) rows.splice(at, 0, { kind: 'summary', key: item.key, item: { ...item, summary: item.summary.replace(/\d+/g, '0') } });
+  }
+  return rows;
+}
+
+export function containsNewUser(before: readonly LiveTurnItem[], after: readonly LiveTurnItem[]): boolean {
+  const users = new Set(before.filter(item => item.kind === 'user').map(item => item.key));
+  return after.some(item => item.kind === 'user' && !users.has(item.key));
+}