@meiyukichan/dsh-sandore 0.1.0-rc.6

package/packages/client/chat/ReasoningRow.module.css

@@ -0,0 +1,82 @@
+/* ReasoningRow.module.css：抄自 DSH ui-conversation chat/ReasoningRow.module.css。 */
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  position: relative;
+  overflow: hidden;
+}
+
+.root[data-state='running'] .row::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 300px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
+    transparent 100%
+  );
+  animation: dsh-reasoning-row-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dsh-reasoning-row-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
+}
+
+.leading {
+  flex-shrink: 0;
+}
+
+.chevron {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.title {
+  font-weight: 400;
+}
+
+.separator {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.summary {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summary[data-follow-end] {
+  text-overflow: clip;
+}
+
+.thinkBody {
+  padding: 4px 0 4px 22px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root[data-state='running'] .row::after {
+    animation: none;
+  }
+}

package/packages/client/chat/ReasoningRow.tsx

@@ -0,0 +1,70 @@
+/**
+ * ReasoningRow：抄自 DSH `packages/client/ui-conversation/src/client/chat/ReasoningRow.tsx`。
+ * assistant reasoning 披露行（Think 摘要行，展开=缩进灰字），独立于工具卡片呈现。
+ * locale 面收窄为 sandore 命名空间，其余逐字保留。
+ * @module @deepseek-ai/dsh-client-ui-sandore/src/client/chat/ReasoningRow
+ */
+import { useEffect, useRef, useState } from 'react'
+import { DisclosureRow, IconThinkOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import { useThrottledVisualUpdate } from './use-throttled-visual-update.ts'
+import a11yCss from './accessibility.module.css'
+import css from './ReasoningRow.module.css'
+
+function firstLine(text: string): string {
+  const newline = text.indexOf('\n')
+  return newline === -1 ? text : text.slice(0, newline)
+}
+
+function latestLine(text: string): string {
+  const visible = text.trimEnd()
+  const newline = visible.lastIndexOf('\n')
+  return newline === -1 ? visible : visible.slice(newline + 1)
+}
+
+/**
+ * Render one assistant reasoning block as the Think disclosure row.
+ * @param props.text - complete or streaming reasoning text.
+ * @param props.running - whether this block is the streaming tail.
+ * @param props.t - sandore locale seat for the running status.
+ * @returns the reasoning disclosure.
+ */
+export function ReasoningRow({ text, running, t }: { text: string; running: boolean; t: TranslateNS<'sandore'> }) {
+  const [expanded, setExpanded] = useState(false)
+  const summaryRef = useRef<HTMLSpanElement>(null)
+  const summary = running ? latestLine(text) : firstLine(text)
+  const scheduleSummaryScroll = useThrottledVisualUpdate(() => {
+    const element = summaryRef.current
+    if (element === null) return
+    element.scrollLeft = running ? element.scrollWidth - element.clientWidth : 0
+  })
+  useEffect(() => {
+    scheduleSummaryScroll()
+  }, [running, scheduleSummaryScroll, summary])
+
+  return (
+    <div className={css.root} data-variant="think" data-state={running ? 'running' : 'ok'}>
+      {running && <span className={a11yCss.visuallyHidden}>{t('row.running')}</span>}
+      <DisclosureRow
+        rowClassName={css.row}
+        leadingClassName={css.leading}
+        titleClassName={css.title}
+        chevronClassName={css.chevron}
+        icon={<IconThinkOutline14 size={14} />}
+        title="Think"
+        open={expanded}
+        expandable
+        expandOnRowClick
+        onToggle={() => { setExpanded(value => !value) }}
+        collapsedContent={(
+          <>
+            <span className={css.separator} aria-hidden />
+            <span ref={summaryRef} className={css.summary} data-follow-end={running || undefined}>{summary}</span>
+          </>
+        )}
+      >
+        <div className={css.thinkBody}>{text}</div>
+      </DisclosureRow>
+    </div>
+  )
+}

package/packages/client/chat/TurnTailNodeView.module.css

@@ -0,0 +1,10 @@
+/* TurnTailNodeView.module.css：抄自 DSH ui-conversation chat/TurnTailNodeView.module.css（逐字）。 */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.actions {
+  margin-left: -6px;
+}

package/packages/client/chat/TurnTailNodeView.tsx

@@ -0,0 +1,63 @@
+/**
+ * TurnTailNodeView：抄自 DSH `packages/client/ui-conversation/src/client/chat/TurnTailNodeView.tsx`。
+ * 已完结 turn 的本地动作与特性尾部：时间 + 运行时长/TTFT/吞吐 + 复制 + 分支（fork）。
+ * 裁剪：`conversation.chat.turnTail` chain 与 `conversation.chat.assistant-actions` list
+ * 两个 slot（sandore 面板不注册任何会话级 slot，等价于 DSH 无条目注入时的空链）；
+ * `hasLaterChatNode` 判断由 chat-flow 派生为 `branchUnavailable` 传入。locale 面收窄为
+ * sandore 命名空间。其余逐字保留。
+ * @module @deepseek-ai/dsh-client-ui-sandore/src/client/chat/TurnTailNodeView
+ */
+import { memo } from 'react'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import { MessageIconActions } from './MessageIconActions.tsx'
+import css from './TurnTailNodeView.module.css'
+
+/** turn-tail 展示数据（chat-flow 派生；字段对齐 DSH TurnTailChatData 的展示面）。 */
+export interface StepChatTailData {
+  /** 已完结 turn 号。 */
+  turn: number
+  /** 结算 assistant 节点 seq（分支锚点）。 */
+  seq: number
+  /** 结算时间（Unix epoch ms；时钟用）。 */
+  time: number
+  /** 结算 assistant 的拼接文本（复制按钮取文本）。 */
+  text: string
+  /** Turn 壁钟时长 ms；turn/start|end 均在窗口内时可用。 */
+  runMs?: number | undefined
+  /** Turn 首步 TTFT ms；未记录时省略。 */
+  ttftMs?: number | undefined
+  /** Turn 解码吞吐；未记录时省略。 */
+  tokensPerSecond?: number | undefined
+  /** 分支不可用（结算 assistant 非 turn 尾部等；chat-flow 派生）。 */
+  branchUnavailable: boolean
+}
+
+/** Turn-local actions and feature tail over the closing Assistant, independent of Assistant placement. */
+export const TurnTailNodeView = memo(function TurnTailNodeView({
+  data, onBranch, t,
+}: {
+  /** 由 chat-flow 派生的 turn-tail 展示数据。 */
+  data: StepChatTailData
+  /** 分支回调：以结算 seq 为锚 fork 会话（`sessions.fork`，与 DSH forkAt 同语义）。 */
+  onBranch: (seq: number) => void
+  /** sandore locale seat。 */
+  t: TranslateNS<'sandore'>
+}) {
+  const runMs = data.runMs
+  return (
+    <div className={css.root} data-turn-tail={data.turn} data-time-hover-root>
+      <MessageIconActions
+        text={data.text}
+        time={data.time}
+        runMs={runMs}
+        ttftMs={data.ttftMs}
+        tokensPerSecond={data.tokensPerSecond}
+        clock="end"
+        onBranch={() => { onBranch(data.seq) }}
+        branchUnavailable={data.branchUnavailable}
+        className={css.actions}
+        t={t}
+      />
+    </div>
+  )
+})

package/packages/client/chat/UserMessageRow.module.css

@@ -0,0 +1,75 @@
+/* UserMessageRow.module.css：sandore 面板的用户消息行式样式（非 DSH 抄入——DSH 用户消息是
+   右侧气泡；面板按「左侧行式」需求实现，视觉对齐 ToolRow / ContextInjectionRow 的
+   DisclosureRow 体系：24px 单行、16px leading 槽、2x2 分隔点、单行省略摘要、展开体）。 */
+
+/* 展开时行底留 4px，与上下文注入行的展开节奏一致。 */
+.root[data-open] {
+  padding-bottom: 4px;
+}
+
+/* 展开/悬停预览的 chevron 颜色（与 ToolRow / ContextInjectionRow 一致）。 */
+.chevron {
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* 标题与摘要之间的分隔点（ToolRow / ContextInjectionRow 同款 2x2 圆点）。 */
+.sep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--dsw-alias-label-caption);
+}
+
+/* 单行用户消息摘要：FILL 截断 + 省略号；多行文本（换行）被 `white-space: nowrap`
+   折叠为单行，超宽时 `text-overflow: ellipsis` 截断。 */
+.summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 尾部时钟（同用户气泡的时钟 chrome）：flex:none 不参与省略——窄行先截摘要再截时钟，
+   ToolRow summarySuffix 同款语义；tabular-nums 让时钟宽度稳定。 */
+.clock {
+  flex: none;
+  margin-left: 8px;
+  color: var(--dsw-alias-label-caption);
+  font-size: 12px;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* 展开体：完整用户消息文本框。几何对齐 ContextInjectionRow 的展开体（22px 缩进、圆角 8、
+   code-block 底），但用正文字号（14/24）而非代码字号；pre-wrap 保留用户消息的换行分段。 */
+.body {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: calc(100% - 22px);
+  max-height: 240px;
+  margin: 4px 0 0 22px;
+  overflow: auto;
+  padding: 10px 16px 12px 12px;
+  border: none;
+  border-radius: 8px;
+  background: var(--dsw-alias-markdown-code-block);
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* 完整消息文本：保留换行 + 任意位置断行（长 URL/长词不撑破文本框）。 */
+.bodyText {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-secondary);
+}

package/packages/client/chat/UserMessageRow.tsx

@@ -0,0 +1,92 @@
+/**
+ * UserMessageRow：sandore 面板的用户消息行式渲染（非 DSH 抄入——DSH 的用户消息是右侧气泡，
+ * 面板按「左侧行式」需求实现，视觉对齐 ToolRow / ContextInjectionRow 的 DisclosureRow
+ * chrome：16px leading 槽（用户图标，hover/展开变 chevron）+ "User Message" 标签 + 分隔点 +
+ * 单行省略摘要 + 尾部时钟；整行点击（Enter/Space）展开完整用户消息文本框）。
+ *
+ * 数据面：`UserMessageNode` / `SteeringMessageNode`（公开 `ConversationNode`，二者同走
+ * 用户行渲染）——`content: ContentBlock[]` 提取纯文本（text 块以换行拼接）作单行摘要
+ * （CSS 单行省略，换行被折叠）；展开体显示完整文本（pre-wrap 保留换行）+ 图片画廊
+ * （align start，与左对齐行式一致）+ 其余块经 JsonBlock 披露（与右气泡的 extra block 同款）。
+ * 展开态为组件本地 view state。
+ * @module @deepseek-ai/dsh-client-ui-sandore/src/client/chat/UserMessageRow
+ */
+import { memo, useState } from 'react'
+import type { ConversationNode } from '@deepseek-ai/dsh-client-runtime/client'
+import { DisclosureRow, IconUserOutline16, JsonBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SandoreRenderMessageImages } from './attachment/MessageImage.tsx'
+import { formatMessageClock } from './message-chrome.ts'
+import css from './UserMessageRow.module.css'
+
+type UserNode = Extract<ConversationNode, { kind: 'user' | 'steering' }>
+type UserImage = Extract<UserNode['content'][number], { type: 'image' }>
+
+/** 内容块拆分：text 纯文本拼接 / image 附件（供画廊）/ 其余块（JsonBlock 披露）。 */
+function contentParts(content: readonly unknown[]): {
+  text: string
+  images: { attachment: UserImage['attachment'] }[]
+  rest: unknown[]
+} {
+  const texts: string[] = []
+  const images: { attachment: UserImage['attachment'] }[] = []
+  const rest: unknown[] = []
+  for (const block of content) {
+    const b = block as { type?: string; text?: string; attachment?: unknown }
+    if (b.type === 'text' && typeof b.text === 'string') texts.push(b.text)
+    else if (b.type === 'image' && b.attachment !== undefined) {
+      images.push({ attachment: (b as UserImage).attachment })
+    }
+    else rest.push(block)
+  }
+  // 多 text 块以换行拼接：单行摘要由 CSS `white-space: nowrap` 折叠换行，展开体 pre-wrap 保留分段。
+  return { text: texts.join('\n'), images, rest }
+}
+
+/**
+ * 用户消息行：DisclosureRow 行式（左对齐）——用户图标 + "User Message" 标签 + 分隔点 +
+ * 单行省略的用户消息文本 + 尾部时钟；点击整行展开完整用户消息文本框。
+ * @param props - 用户/steering 节点、图片画廊渲染器与 locale。
+ * @returns 折叠为单行的用户消息披露行。
+ */
+export const UserMessageRow = memo(function UserMessageRow({ node, renderMessageImages, t }: {
+  node: UserNode
+  renderMessageImages: SandoreRenderMessageImages
+  t: TranslateNS<'sandore'>
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const { text, images, rest } = contentParts(node.content)
+  const truncated = (total: number): string => t('json.truncated', { total })
+  // 空消息（无文本/图片/其他块）只有标题，不可展开。
+  const expandable = text !== '' || images.length > 0 || rest.length > 0
+  return (
+    <DisclosureRow
+      className={css.root}
+      chevronClassName={css.chevron}
+      icon={<IconUserOutline16 size={16} />}
+      title={t('message.userMessage')}
+      open={expanded}
+      expandable={expandable}
+      expandOnRowClick
+      onToggle={() => { setExpanded(value => !value) }}
+      collapsedContent={text !== '' && (
+        /* ToolRow / ContextInjectionRow 的摘要形态：分隔点 + 单行省略文本；时钟 flex:none
+           排在摘要之后，窄行先截摘要再截时钟（summarySuffix 同款语义）。 */
+        <>
+          <span className={css.sep} aria-hidden />
+          <span className={css.summary} data-user-summary>{text}</span>
+          <span className={css.clock} data-user-clock>{formatMessageClock(node.time, t)}</span>
+        </>
+      )}
+    >
+      {/* 展开体（DisclosureRow children）：完整用户消息内容——图片画廊 + 完整文本 + 其余块。 */}
+      <div className={css.body} data-user-message-body>
+        {images.length > 0 && renderMessageImages({ images, align: 'start' })}
+        {text !== '' && <div className={css.bodyText} data-user-body-text>{text}</div>}
+        {rest.map((block, i) => (
+          <JsonBlock key={i} label={t('message.extraBlock')} payload={block} truncatedLabel={truncated} />
+        ))}
+      </div>
+    </DisclosureRow>
+  )
+})

package/packages/client/chat/accessibility.module.css

@@ -0,0 +1,9 @@
+/* accessibility.module.css：抄自 DSH ui-conversation chat/accessibility.module.css（视觉隐藏）。 */
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}

package/packages/client/chat/attachment/ImageLightbox.module.css

@@ -0,0 +1,45 @@
+/* ImageLightbox.module.css：抄自 DSH ui-attachment ImageLightbox.module.css（逐字）。 */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 40px;
+}
+
+/* Same mask recipe as the Modal primitive and the settings dialog. A separate
+   layer, not a background on .backdrop: backdrop-filter there would blur the
+   previewed image and the close control along with the page. */
+.mask {
+  position: absolute;
+  inset: 0;
+  background: var(--dsw-alias-bg-mask-1);
+  backdrop-filter: var(--dsw-mask-blur);
+}
+
+.image {
+  position: relative;
+  max-width: min(100%, 1600px);
+  max-height: calc(100vh - 80px);
+  object-fit: contain;
+  border-radius: 12px;
+  background: var(--dsw-specific-input-major);
+  box-shadow: var(--dsw-shadow-lv3);
+}
+
+.close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 999px;
+  background: var(--dsw-specific-input-major);
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+}

package/packages/client/chat/attachment/ImageLightbox.tsx

@@ -0,0 +1,70 @@
+/**
+ * ImageLightbox：抄自 DSH `packages/client/ui-attachment/src/ImageLightbox.tsx`（逐字）。
+ * 点击缩略图打开的文档级原图预览：Esc / 背景按下 / 关闭按钮关闭，卸载时恢复焦点到
+ * 打开者；经 body portal 渲染（避免被 transform/filter 祖先困住）。
+ * @module @deepseek-ai/dsh-client-ui-sandore/src/client/chat/attachment/ImageLightbox
+ */
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { IconCloseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './ImageLightbox.module.css'
+
+/** Lightbox strings the owner resolves from its own locale namespace. */
+export interface ImageLightboxLabels {
+  /** Accessible name of the preview dialog. */
+  dialog: string
+  /** Accessible label of the close control. */
+  close: string
+}
+
+/**
+ * Document-level original-image preview opened by clicking a thumbnail.
+ * Closes on Escape, backdrop press, or the close control, and restores focus
+ * to the opener on unmount. Rendered through a body portal: an opener inside
+ * a transformed or filtered ancestor would otherwise trap the fixed backdrop
+ * in that ancestor's box instead of covering the viewport.
+ *
+ * @param props.src - the original image URL.
+ * @param props.alt - the image's alt text.
+ * @param props.labels - dialog and close-control strings.
+ * @param props.onClose - dismiss callback owned by the opener.
+ * @returns the modal preview dialog.
+ */
+export function ImageLightbox({ src, alt, labels, onClose }: {
+  src: string
+  alt: string
+  labels: ImageLightboxLabels
+  onClose: () => void
+}) {
+  const closeRef = useRef<HTMLButtonElement | null>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    closeRef.current?.focus()
+    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      restoreRef.current?.focus()
+    }
+  }, [onClose])
+
+  return createPortal(
+    <div
+      className={css.backdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-label={labels.dialog}
+    >
+      <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
+      <img className={css.image} src={src} alt={alt} />
+      <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
+        <IconCloseOutline16 size={16} />
+      </button>
+    </div>,
+    document.body,
+  )
+}

package/packages/client/chat/attachment/MessageImage.module.css

@@ -0,0 +1,70 @@
+/* MessageImage.module.css：抄自 DSH ui-attachment MessageImage.module.css（逐字）。 */
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  max-width: 100%;
+}
+
+.gallery[data-align='end'] {
+  justify-content: flex-end;
+  align-self: flex-end;
+}
+
+.gallery[data-align='start'] {
+  justify-content: flex-start;
+  align-self: flex-start;
+}
+
+.frame {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 16px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  cursor: zoom-in;
+}
+
+.frame[data-variant='tile'] {
+  width: 64px;
+  height: 64px;
+  min-width: 64px;
+  min-height: 64px;
+}
+
+.frame img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.loading,
+.error {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.error {
+  max-width: 240px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 10px;
+  background: var(--dsw-alias-interactive-bg-hover-danger);
+  cursor: pointer;
+}
+
+/* A failed tile keeps the 64px grid cell instead of growing to its copy. */
+.error[data-variant='tile'] {
+  width: 64px;
+  height: 64px;
+  padding: 4px;
+  overflow: hidden;
+  border-radius: 16px;
+}