Merge remote-tracking branch 'origin/feat/search-presenter' into feat/web-search-card

# Conflicts: # packages/client/connection/src/client/fixture.ts # packages/client/ui-conversation/README.i18n.yaml # packages/client/ui-conversation/src/client/apply.ts # packages/client/ui-conversation/src/client/chat/GenericToolCard.tsx # packages/client/ui-conversation/src/client/skeleton/DetailsPanel.module.css # packages/client/ui-conversation/src/client/skeleton/DetailsPanel.tsx # packages/client/ui-conversation/tests/chat-apply.spec.tsx # packages/client/ui-primitives/README.i18n.yaml # packages/client/ui-primitives/README.md # packages/client/ui-primitives/README.zh.md # packages/client/ui-primitives/src/index.ts
2026-07-31 13:32:49 +08:00
parent eebcbbbe4e 59abbb5964
commit c77932b267
138 changed files with 3709 additions and 439 deletions
@@ -21,6 +21,7 @@ import { ChatView } from './chat/ChatView.tsx'
 import { StatsLine } from './chat/StatsLine.tsx'
 import { bashToolviewSample } from './toolviews/bash-sample.tsx'
 import { searchToolview } from './toolviews/search-row.tsx'
+import { webToolview } from './toolviews/web-row.tsx'
 import { ApprovalPanel } from './skeleton/ApprovalPanel.tsx'
 import { todoToolview } from './toolviews/todo-row.tsx'
 import { askQuestionToolview } from './toolviews/ask-question-row.tsx'
@@ -323,6 +324,11 @@ export function apply(ctx: Context): void {
  // under both tool names, since both declare the same search render intent.
  ctx.plugin(searchToolview)

+  // The web rows ride the same seam: one WebRow registered under both
+  // web_search and web_fetch, rendering the completed retrieval's web card
+  // resident under the summary (a product registration, not a sample).
+  ctx.plugin(webToolview)
+
  // The todo_write row rides the same seam (a product registration, not a sample).
  ctx.plugin(todoToolview)

@@ -55,6 +55,17 @@ type RenderToolRow = ChatViewSlotProps['renderSlot']
 *  chat view narrows once to the runtime snapshot the binding actually feeds. */
 type UseConversation = SnapshotSelectorHook<ConversationSnapshot>

+function activeRetrySeq(nodes: readonly ConversationNode[], running: boolean): number | null {
+  if (!running) return null
+  for (let index = nodes.length - 1; index >= 0; index -= 1) {
+    const node = nodes[index]
+    if (node === undefined) continue
+    if (node.kind === 'model-retry') return node.retryState === 'cancelled' ? null : node.seq
+    if (node.kind === 'assistant' || node.kind === 'user') return null
+  }
+  return null
+}
+
 /** One `run_code` sub-dispatch row: the identical keyed-slot dispatch as a
 *  top-level call (same registrations, same fallback), nested by the parent.
 *  A started-but-unsettled sub-call arrives as the RunningToolCall shape and
@@ -262,6 +273,7 @@ export function ChatView({
  const selectedCallId = useStore(s => s.selection?.callId)

  const items = useMemo(() => deriveChatFlow(nodes), [nodes])
+  const activeRetry = useMemo(() => activeRetrySeq(nodes, running), [nodes, running])
  // Only the last content assistant of each turn owns IconActions; mid-turn
  // text (before tools) omits `time` so AssistantMarkdown stays chrome-free.
  const actionSeqs = useMemo(() => assistantActionsSeqs(nodes), [nodes])
@@ -424,7 +436,15 @@ export function ChatView({
    }
    /* v8 ignore next -- tool-result never reaches here: deriveChatFlow folds them into groups. */
    if (node.kind === 'tool-result') return null
-    return <MessageItem key={item.key} node={node} onFork={forkAt} t={t} />
+    return (
+      <MessageItem
+        key={item.key}
+        node={node}
+        retryActive={node.kind === 'model-retry' && node.seq === activeRetry}
+        onFork={forkAt}
+        t={t}
+      />
+    )
  }

  return (
@@ -0,0 +1,15 @@
+/* The generic card grows a resident web card under its summary row when the
+   tool declares the `web` render intent but has no keyed row of its own (the
+   web_search/web_fetch rows register their own WebRow). A column around the
+   ToolRow keeps the row's own 24px height. */
+
+.card {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap),
+   and replaces the primitive's standalone vertical margin with the flow's. */
+.web {
+  margin: 4px 0 4px 22px;
+}
@@ -7,13 +7,15 @@
 import type { ReactNode } from 'react'
 import {
  IconApiOutline14, IconBrowseOutline16, IconCodeOutline16, IconEditOutline16, IconSearchOutline16, IconSparkle16,
-  IconThinkOutline14,
+  IconThinkOutline14, WebBlock,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps, ToolRowOwnerProps } from '../contract/slots.ts'
 import { searchCardModel } from '../contract/search-card-model.ts'
 import { terminalCardModel, terminalFailed } from '../contract/terminal-card-model.ts'
+import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../contract/web-card-model.ts'
 import { toolRowModel, type ToolRowVariant } from '../contract/tool-call-model.ts'
 import { ToolRow } from './ToolRow.tsx'
+import css from './GenericToolCard.module.css'

 /** Variant leading icons (figma table); all glyphs render at 14 inside the 16px leading box. */
 const VARIANT_ICONS: Record<ToolRowVariant, ReactNode> = {
@@ -36,13 +38,14 @@ export function GenericToolCard({ toolName, block, cwd, openFile, inspect, t }:
  const model = toolRowModel(toolName, block, cwd)
  const terminal = terminalCardModel(block, cwd)
  const search = searchCardModel(block)
+  const web = webCardModel(block)
  // A failing exit status is the terminal card's own error signal (the call
  // itself settles isError:false), surfaced as the row's red state dot.
  const state = model.state === 'ok' && terminal !== null && terminalFailed(terminal)
    ? 'error'
    : model.state
  const singleFile = model.filePath !== undefined
-  return (
+  const row = (
    <ToolRow
      t={t}
      variant={model.variant}
@@ -64,4 +67,13 @@ export function GenericToolCard({ toolName, block, cwd, openFile, inspect, t }:
      inspect={inspect}
    />
  )
+  // A web-declaring tool without its own keyed row lands here; its card is
+  // resident under the summary, mirroring WebRow (and BashRow's terminal card).
+  if (web === null) return row
+  return (
+    <div className={css.card}>
+      {row}
+      <WebBlock {...web} maxSources={CHAT_WEB_MAX_SOURCES} className={css.web} />
+    </div>
+  )
 }
@@ -34,6 +34,106 @@
  padding: 2px 0;
 }

+.retryRow {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.retrySummary {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 2px 0;
+  gap: 7px;
+  border-radius: 3px;
+  color: inherit;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.retrySummary::-webkit-details-marker {
+  display: none;
+}
+
+.retrySummary::after {
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
+  content: '';
+  opacity: 0.8;
+  transform: rotate(-45deg);
+  transition: transform 120ms ease;
+}
+
+.retrySummary:hover {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.retrySummary:focus-visible {
+  outline: 1.5px solid var(--dsw-alias-button-info-fill);
+  outline-offset: 2px;
+}
+
+.retryText {
+  color: inherit;
+}
+
+.retryRow[data-active] .retryText {
+  background:
+    linear-gradient(
+      90deg,
+      var(--dsw-alias-label-tertiary) 0%,
+      var(--dsw-alias-label-tertiary) 40%,
+      var(--dsw-alias-label-secondary) 50%,
+      var(--dsw-alias-label-tertiary) 60%,
+      var(--dsw-alias-label-tertiary) 100%
+    );
+  background-position: 100% 50%;
+  background-size: 200% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: retry-shimmer 1.6s ease-in-out infinite;
+}
+
+.retryRow[open] .retrySummary::after {
+  transform: rotate(45deg);
+}
+
+.retryDetails {
+  display: grid;
+  gap: 2px;
+  margin-top: 3px;
+  padding-left: 14px;
+  overflow-wrap: anywhere;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.retryDetailLabel {
+  color: var(--dsw-alias-label-secondary);
+}
+
+@keyframes retry-shimmer {
+  from {
+    background-position: 100% 50%;
+  }
+
+  to {
+    background-position: 0 50%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .retryRow[data-active] .retryText {
+    background: none;
+    color: inherit;
+    animation: none;
+  }
+}
+
 /* Reference chip projection inside a user bubble (`<skill>name</skill>` model
   spans render as chips; free geometry — no textarea pairing here). */
 .refChip {
@@ -1,13 +1,11 @@
-// MessageItem: the four simple node kinds — user bubble (right-aligned, with
+// MessageItem: simple chat nodes — user bubble (right-aligned, with
 // clock + copy / branch / edit IconActions), steering (badged bubble), context
-// injection and unknown-surface JSON rows. Props are frozen node slices off
-// the snapshot cache; memo holds across streaming because unchanged nodes
-// keep their references.
+// injection, retry disclosure, and unknown-surface JSON rows.

-import { memo } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import type {
-  ContextMessageNode, SteeringMessageNode, UnknownSurfaceNode, UserMessageNode,
+  ContextMessageNode, ModelRetryNode, SteeringMessageNode, UnknownSurfaceNode, UserMessageNode,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import { JsonBlock, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
@@ -16,7 +14,8 @@ import { MessageIconActions } from './MessageIconActions.tsx'
 import css from './MessageItem.module.css'

 export interface MessageItemProps {
-  node: UserMessageNode | SteeringMessageNode | ContextMessageNode | UnknownSurfaceNode
+  node: UserMessageNode | SteeringMessageNode | ContextMessageNode | ModelRetryNode | UnknownSurfaceNode
+  retryActive?: boolean
  /** Fork the session through the turn containing this message (user-bubble branch action). */
  onFork?: (seq: number) => void
  /** The owning view's locale seat, passed down as a plain prop. */
@@ -34,6 +33,80 @@ function contentText(content: readonly unknown[]): { text: string; rest: unknown
  return { text: texts.join(''), rest }
 }

+function retrySeconds(milliseconds: number): number {
+  return Math.max(1, Math.ceil(milliseconds / 1_000))
+}
+
+interface RetryCountdown {
+  deadline: number
+  seconds: number
+}
+
+function ModelRetryItem({ node, active, t }: {
+  node: ModelRetryNode
+  active: boolean
+  t: ChatViewSlotProps['t']
+}) {
+  // Anchor the host-scheduled delay to this browser's first render of the
+  // retry node. Host event time and Date.now() may belong to different clocks.
+  const deadline = useMemo(() => Date.now() + node.delayMs, [node.delayMs, node.seq])
+  const scheduledSeconds = retrySeconds(node.delayMs)
+  const maximum = node.mode === 'normal' ? node.maxRetries : '∞'
+  const [countdown, setCountdown] = useState<RetryCountdown>(() => ({
+    deadline,
+    seconds: retrySeconds(deadline - Date.now()),
+  }))
+  const remainingSeconds = countdown.deadline === deadline
+    ? countdown.seconds
+    : retrySeconds(deadline - Date.now())
+
+  useEffect(() => {
+    if (!active) return
+    const updateCountdown = (): number => {
+      const next = retrySeconds(deadline - Date.now())
+      setCountdown(current => (
+        current.deadline === deadline && current.seconds === next
+          ? current
+          : { deadline, seconds: next }
+      ))
+      return next
+    }
+    if (updateCountdown() === 1) return
+    const timer = window.setInterval(() => {
+      if (updateCountdown() === 1) window.clearInterval(timer)
+    }, 250)
+    return () => { window.clearInterval(timer) }
+  }, [active, deadline])
+
+  const label = active
+    ? t('message.retry.active')
+    : node.retryState === 'cancelled'
+      ? t('message.retry.cancelled')
+      : node.retryState === 'started'
+        ? t('message.retry.started')
+        : t('message.retry.scheduled')
+  const seconds = active ? remainingSeconds : scheduledSeconds
+
+  return (
+    <details className={css.retryRow} data-active={active || undefined}>
+      <summary className={css.retrySummary}>
+        <span className={css.retryText} role="status">
+          {t('message.retry.status', { label, retry: node.retry, maximum, seconds })}
+        </span>
+      </summary>
+      <div className={css.retryDetails}>
+        <div>
+          <span className={css.retryDetailLabel}>{t('message.retry.delay')}</span>
+          {Math.round(node.delayMs)}ms
+        </div>
+        <div>
+          <span className={css.retryDetailLabel}>{t('message.retry.failure')}</span>
+          {node.failure.message}
+        </div>
+      </div>
+    </details>
+  )
+}
 /**
 * Display projection of reference forms in a user bubble (free geometry — no
 * textarea alignment constraint here); everything else stays plain text. The
@@ -66,7 +139,9 @@ function projectUserText(text: string): ReactNode {
  return <>{parts}</>
 }

-export const MessageItem = memo(function MessageItem({ node, onFork, t }: MessageItemProps) {
+export const MessageItem = memo(function MessageItem({
+  node, retryActive = false, onFork, t,
+}: MessageItemProps) {
  const truncated = (total: number): string => t('json.truncated', { total })
  switch (node.kind) {
    case 'user': {
@@ -105,6 +180,8 @@ export const MessageItem = memo(function MessageItem({ node, onFork, t }: Messag
      return (
        <ContextInjectionRow content={node.content} source={node.source} t={t} />
      )
+    case 'model-retry':
+      return <ModelRetryItem node={node} active={retryActive} t={t} />
    default:
      return (
        <div className={css.contextRow}>
@@ -1,7 +1,8 @@
 /**
 * Chat flow derivation: ConversationSnapshot nodes -> render items. Tool
 * results group into consecutive-run tool groups (figma step-summary flow,
- * VERTICAL gap10) alternating with narration; everything else passes through.
+ * VERTICAL gap10) alternating with narration. Consecutive retry notices
+ * reuse the first notice's row while projecting the latest retry turn.
 * Item identity keys are stable across snapshots so the list parent can
 * subscribe to keys only while rows subscribe to content. IconActions ownership
 * (last content assistant per turn) is derived here too so ChatView and the
@@ -49,7 +50,7 @@ export function assistantActionsSeqs(nodes: readonly ConversationNode[]): Readon
 /**
 * Group finalized nodes into the step-summary flow.
 * @param nodes - snapshot nodes (surface order).
- * @returns flow items; consecutive tool-results merged into one group keyed by the first seq.
+ * @returns flow items; consecutive tool results and retry notices reuse their first key.
 */
 export function deriveChatFlow(nodes: readonly ConversationNode[]): ChatFlowItem[] {
  const items: ChatFlowItem[] = []
@@ -63,6 +64,17 @@ export function deriveChatFlow(nodes: readonly ConversationNode[]): ChatFlowItem
      } else {
        group.push(node)
      }
+    } else if (node.kind === 'model-retry') {
+      group = null
+      const previous = items[items.length - 1]
+      if (
+        previous?.kind === 'node'
+        && previous.node.kind === 'model-retry'
+      ) {
+        items[items.length - 1] = { ...previous, node }
+      } else {
+        items.push({ kind: 'node', key: `n${node.seq}`, node })
+      }
    } else {
      group = null
      items.push({ kind: 'node', key: `n${node.seq}`, node })
@@ -0,0 +1,84 @@
+/**
+ * Pure derivation of the web-card props from a frozen call slice: the
+ * `card:'web'` render intent the `web_search`/`web_fetch` tools declare at
+ * result time arrives on the snapshot as `resultView`, and this is the one
+ * place that turns it into what {@link WebBlock} draws. Both conversation
+ * render sites (the chat tool row's resident/expanded body and the details
+ * panel's Output section) call this, so the sources and fetch summary they
+ * show are derived once.
+ *
+ * The web card is result-only by contract: those tools keep a generic pending
+ * call view, so there is nothing to derive while the call is still running and
+ * a running call always takes the generic path.
+ * @module
+ */
+import type { WebBlockProps } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolCallBlock } from './tool-call-model.ts'
+
+/**
+ * Sources the chat row's web body shows before collapsing the middle — half
+ * the primitive's own default, which the details panel keeps. A chat row is a
+ * summary surface inside the message flow: the flow must stay scannable across
+ * many calls, while the details panel is the single-call reading surface. A
+ * design constant of this UI's row geometry, not a deployment choice, so it is
+ * fixed here rather than a plugin Config field.
+ */
+export const CHAT_WEB_MAX_SOURCES = 8
+
+/**
+ * Derive the web-card props for a tool call, or null when this call is not a
+ * web card and belongs on the generic path.
+ *
+ * The result side supplies the whole card: the sources and answer for a
+ * `search`, the URL and status for a `fetch`. Cases producing null, all of
+ * them the documented generic-card default:
+ *
+ * - A running call (no `resultView` yet): the web tools keep a generic pending
+ *   card, so nothing web-shaped exists until the call settles.
+ * - A settled call whose result view is not a web card — including a `card`
+ *   value this UI version does not know, which arrives over the wire and so
+ *   cannot be trusted to be one of the compiled variants, and a generic result
+ *   view (a web tool's error path returns the generic card, whose text the
+ *   generic path preserves).
+ * - A web card whose `kind` this UI version does not know (a newer host's
+ *   value): the wire cannot be trusted to be `search` or `fetch`, so it takes
+ *   the generic path rather than rendering as a malformed fetch.
+ * @param block - RunningToolCall or ToolResultNode off the snapshot caches.
+ * @returns the web-card props, or null for the generic path.
+ */
+export function webCardModel(block: ToolCallBlock): WebBlockProps | null {
+  // Running calls have no result view; the web card is result-only.
+  if (!('kind' in block)) return null
+  const result = block.resultView
+  if (result?.card !== 'web') return null
+  if (result.kind === 'search') {
+    return {
+      kind: 'search',
+      answer: result.answer,
+      sources: result.sources.map(source => ({
+        url: source.url,
+        title: source.title,
+        snippet: source.snippet,
+        publishedAt: source.publishedAt,
+      })),
+      truncated: result.truncated,
+    }
+  }
+  // Discriminate `fetch` explicitly rather than treating it as the else of
+  // `search`: a `kind` this UI version does not know arrives over the wire from
+  // a newer host, and reading it as a fetch would draw an empty URL and
+  // `HTTP undefined`. It takes the generic path, the same wire-boundary default
+  // an unknown `card` tag takes above. The static union narrows `kind` to
+  // `'fetch'` here, but the runtime value is off the wire, so the guard and its
+  // null fallthrough are load-bearing despite the type.
+  // oxlint-disable-next-line typescript/no-unnecessary-condition
+  if (result.kind === 'fetch') {
+    return {
+      kind: 'fetch',
+      url: result.url,
+      statusCode: result.statusCode,
+      truncated: result.truncated,
+    }
+  }
+  return null
+}
@@ -23,6 +23,11 @@ export const zh = {
  'input.stop': '停止生成',
  'input.send': '发送消息',
  'input.accessMode': '访问模式，当前：{name}',
+  'access.confirm.title': '确认启用 Full access？',
+  'access.confirm.description': '启用 Full access 后，agent 将减少确认步骤，并且可以直接执行更多操作，包括敏感操作、文件修改或外部命令。仅建议在你信任当前任务时使用。',
+  'access.confirm.acknowledge': '我已了解风险，并愿意继续',
+  'access.confirm.cancel': '取消',
+  'access.confirm.enable': '启用 Full access',
  'hero.headline': '开始构建吧',
  'hero.chooseWorkspace': '选择工作区',
  'session.hierarchy': '会话层级',
@@ -48,6 +53,13 @@ export const zh = {
  'message.unknownBlock': '未知内容块',
  'message.stopped': '已停止',
  'message.branch': '在新对话中分支',
+  'message.retry.active': '正在重试模型请求',
+  'message.retry.cancelled': '模型请求重试已取消',
+  'message.retry.started': '已重试模型请求',
+  'message.retry.scheduled': '等待重试模型请求',
+  'message.retry.status': '{label}（{retry}/{maximum}） · {seconds}s',
+  'message.retry.delay': '重试延迟：',
+  'message.retry.failure': '失败原因：',
  'command.running': '执行中…',
  'command.failed': '命令失败',
  'command.done': '已完成',
@@ -105,6 +117,11 @@ export const en = {
  'input.stop': 'Stop generating',
  'input.send': 'Send message',
  'input.accessMode': 'Access mode, current: {name}',
+  'access.confirm.title': 'Enable Full access?',
+  'access.confirm.description': 'Full access reduces confirmation steps and lets the agent perform more actions directly, including sensitive operations, file changes, or external commands. Only use it when you trust the current task.',
+  'access.confirm.acknowledge': 'I understand the risks and want to continue',
+  'access.confirm.cancel': 'Cancel',
+  'access.confirm.enable': 'Enable Full access',
  'hero.headline': 'Let\'s start building',
  'hero.chooseWorkspace': 'Choose workspace',
  'session.hierarchy': 'Session hierarchy',
@@ -130,6 +147,13 @@ export const en = {
  'message.unknownBlock': 'Unknown content block',
  'message.stopped': 'Stopped',
  'message.branch': 'Branch into a new conversation',
+  'message.retry.active': 'Retrying model request',
+  'message.retry.cancelled': 'Model request retry cancelled',
+  'message.retry.started': 'Retried model request',
+  'message.retry.scheduled': 'Waiting to retry model request',
+  'message.retry.status': '{label} ({retry}/{maximum}) · {seconds}s',
+  'message.retry.delay': 'Retry delay: ',
+  'message.retry.failure': 'Failure reason: ',
  'command.running': 'Running…',
  'command.failed': 'Command failed',
  'command.done': 'Completed',
@@ -1,10 +1,21 @@
-/* Figma .FileContainerText 1:791: 776px wrapper around the inset 752px panel. */
+/* Figma .FileContainerText 1:791: the wrapper uses the shared dock inset
+   inside the composer card around the inset panel. */

 .dock {
  box-sizing: border-box;
  flex: none;
-  width: 100%;
-  max-width: 776px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
  /* Flex gap still applies after this item; subtract it together with the
     design's overlap so the later composer paints over the queue edge. */
  margin: 0 auto calc(
@@ -73,7 +73,7 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
  }

  return (
-    <div className={css.dock}>
+    <div className={css.dock} data-queue-dock="">
      <div className={css.panel}>
        {queue.length > 1 && (
          <button
@@ -133,6 +133,12 @@
  --dsh-composer-stack-gap: 6px;
  --dsh-queue-composer-overlap: 5px;

+  /* InputBar and dock registrants derive their horizontal geometry from the
+     same card width, outer clearance, and dock inset. */
+  --dsh-composer-card-max-width: 800px;
+  --dsh-composer-side-clearance: 32px;
+  --dsh-composer-dock-inset: 12px;
+
  display: flex;
  flex-direction: column;
  gap: var(--dsh-composer-stack-gap);
@@ -118,3 +118,9 @@
  color: var(--dsw-alias-label-tertiary);
  font: var(--dsw-font-xs-13);
 }
+
+/* Same rule for the web card: it sits under the section label, so the section
+   owns the spacing rather than the primitive's own vertical margin. */
+.web {
+  margin: 0;
+}
@@ -7,12 +7,13 @@
 // share the store seat exists for) and derives the call material from the
 // session snapshot — no data of its own.

-import { CodeBlock, SearchBlock, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CodeBlock, SearchBlock, TerminalBlock, WebBlock } from '@deepseek-ai/dsh-client-ui-primitives'
 import { shallowEqual } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSnapshot, RunningToolCall, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
 import type { DetailsSlotProps } from '../contract/slots.ts'
 import { searchCardModel } from '../contract/search-card-model.ts'
 import { terminalBlockLabels, terminalCardModel } from '../contract/terminal-card-model.ts'
+import { webCardModel } from '../contract/web-card-model.ts'
 import { resultText, type ToolCallBlock } from '../contract/tool-call-model.ts'
 import css from './DetailsPanel.module.css'

@@ -131,8 +132,9 @@ export function DetailsPanel({ useSession, useSessions, sessionId, useStore, clo
 * its alignment and scrolls sideways instead of folding. A search-card call —
 * a `grep`/`glob` result view — renders through the shared SearchBlock at the
 * same full height allowance, with a capped search's recovery footer below it.
- * Every other call, and a running call with no card yet, keeps the flattened
- * text form.
+ * A web-card call — a `web_search`/`web_fetch` result — renders through WebBlock
+ * at its own full source-list allowance. Every other call, and a running call
+ * with no card yet, keeps the flattened text form.
 * @param props.material - the selected call's material from {@link materialFor}.
 * @param props.cwd - the session workspace root, resolving the terminal view's cwd.
 * @param props.t - the panel's locale seat, passed down as a plain prop.
@@ -165,6 +167,24 @@ function OutputBody({ material, cwd, t }: { material: CallMaterial; cwd: string
      </>
    )
  }
+  const web = webCardModel(material.block)
+  // Full source-list allowance here (the panel is the single-call reading
+  // surface); the chat rows cap it at CHAT_WEB_MAX_SOURCES. Below the card the
+  // panel also renders the flattened result content — the model-visible text
+  // the card does not carry verbatim (a web_fetch card shows only the URL and
+  // status, so its fetched body lives only here; a search card's answer and
+  // sources are structured, so the flattened form repeats them as the raw text
+  // the model saw).
+  if (web !== null) {
+    const settled = 'kind' in material.block ? material.block : null
+    const body = settled === null ? '' : resultText(settled)
+    return (
+      <>
+        <WebBlock {...web} className={css.web} />
+        {body !== '' && <pre className={css.code}>{body}</pre>}
+      </>
+    )
+  }
  // A settled call always carries the result node the flattened form needs;
  // the running shape has no result to flatten.
  if (!('kind' in material.block)) return <div className={css.empty}>{t('details.running')}</div>
@@ -11,7 +11,7 @@
  padding: 0 24px;
 }

-/* Cap matches InputBar card width (800). Glow may paint past the sides. */
+/* Cap matches the InputBar card. Glow may paint past the sides. */
 .stack {
  display: flex;
  flex-direction: column;
@@ -19,7 +19,7 @@
  /* figma 75:8208: 12 between title block / workspace / card. */
  gap: 12px;
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  overflow: visible;
 }

@@ -23,7 +23,7 @@
  /* figma Input_Bottom: pad L32/R32/B8; the bottom gradient mask is owned by
     the chat scroller. No top pad: the composer stack's gap owns the space
     above; error/status strips still carry their own margin. */
-  padding: 0 32px 8px;
+  padding: 0 var(--dsh-composer-side-clearance) 8px;
 }

 .hero {
@@ -33,7 +33,7 @@
 .error,
 .status {
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 8px;
@@ -48,7 +48,7 @@

 .notice {
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 8px;
@@ -69,6 +69,7 @@
 }

 .card {
+  box-sizing: border-box;
  position: relative; /* overlay anchor positioning context */
  display: flex;
  flex-direction: column;
@@ -76,7 +77,7 @@
     top pad on the card before .InputText. */
  gap: 12px;
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  padding-top: 10px;
  /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
     the input border is one notch weaker than buttons) — exactly the
@@ -279,7 +279,7 @@ export function InputBar({
  // or while the command face is absent with the session).
  const accessSelect: ReactNode = command === undefined
    ? null
-    : <PermissionSelect value={permissions} locked={locked} command={command} t={t} />
+    : <PermissionSelect key={sessionId} value={permissions} locked={locked} command={command} t={t} />

  // Mirror-layer decorations: a visible backdrop with transparent text. The
  // claim token highlights through behind the textarea glyphs; each U+FFFC
@@ -1,21 +1,28 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
-import { Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import { Menu, RiskConfirmation } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ComposerBarProps } from '../contract/slots.ts'
 import css from './PermissionSelect.module.css'

+const FULL_ACCESS = 'danger-full-access'
+
 /**
 * Display transform: kebab-case machine names render as title-case labels
 * (`workspace-write` → `Workspace Write`); non-kebab host-configured names
- * pass through. Twin of the /permission popup's (client ui-permission) — the
- * two permission surfaces must show the same text.
+ * pass through. Full access intentionally overrides the machine-name
+ * transform so both permission surfaces use the product label `Full access`;
+ * the warning body remains locale-aware.
 */
 function displayName(name: string): string {
  if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
  return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
 }

+function optionLabel(option: PermissionSelectValue['options'][number]): string {
+  return option.value === FULL_ACCESS ? 'Full access' : displayName(option.name)
+}
+
 export interface PermissionSelectProps {
  value: PermissionSelectValue | undefined
  locked: boolean
@@ -27,49 +34,94 @@ export interface PermissionSelectProps {
 export function PermissionSelect({ value, locked, command, t }: PermissionSelectProps) {
  const [pick, setPick] = useState<string | null>(null)
  const [open, setOpen] = useState(false)
+  const [confirmation, setConfirmation] = useState<string | null>(null)
+  const [acknowledged, setAcknowledged] = useState(false)
+
+  useEffect(() => {
+    if (!locked && value !== undefined) return
+    setOpen(false)
+    setAcknowledged(false)
+    setConfirmation(null)
+  }, [locked, value])

  if (value === undefined) return null

  const currentValue = pick ?? value.currentValue
  const current = value.options.find(option => option.value === currentValue)
-  const busy = pick !== null
+  const busy = pick !== null || confirmation !== null

  const items: MenuEntry[] = value.options
    .filter(o => o.value !== 'custom')
-    .map(option => ({ id: option.value, label: displayName(option.name) }))
+    .map(option => ({ id: option.value, label: optionLabel(option) }))

-  const choose = (id: string): void => {
-    setOpen(false)
-    if (id === value.currentValue) return
+  const submit = (id: string): void => {
    setPick(id)
    void command(`/permission ${id}`)
      .catch(() => false)
      .then(() => { setPick(null) })
  }

+  const choose = (id: string): void => {
+    setOpen(false)
+    if (id === value.currentValue) return
+    if (id === FULL_ACCESS) {
+      setAcknowledged(false)
+      setConfirmation(id)
+      return
+    }
+    submit(id)
+  }
+
+  const closeConfirmation = (): void => {
+    setAcknowledged(false)
+    setConfirmation(null)
+  }
+
+  const confirmFullAccess = (): void => {
+    if (locked || !acknowledged || confirmation === null) return
+    const id = confirmation
+    closeConfirmation()
+    submit(id)
+  }
+
  return (
-    <Menu
-      open={open}
-      items={items}
-      selectedId={currentValue}
-      onSelect={choose}
-      onClose={() => { setOpen(false) }}
-      side="top"
-      anchor={
-        <button
-          type="button"
-          className={css.trigger}
-          aria-label={t('input.accessMode', { name: displayName(current?.name ?? currentValue) })}
-          title={current?.description}
-          disabled={locked || busy}
-          onClick={() => { setOpen(!open) }}
-        >
-          <span className={css.triggerLabel}>{displayName(current?.name ?? currentValue)}</span>
-          <svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
-            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
-          </svg>
-        </button>
-      }
-    />
+    <>
+      <Menu
+        open={open}
+        items={items}
+        selectedId={currentValue}
+        onSelect={choose}
+        onClose={() => { setOpen(false) }}
+        side="top"
+        anchor={
+          <button
+            type="button"
+            className={css.trigger}
+            aria-label={t('input.accessMode', { name: current === undefined ? displayName(currentValue) : optionLabel(current) })}
+            title={current?.description}
+            disabled={locked || busy}
+            onClick={() => { setOpen(!open) }}
+          >
+            <span className={css.triggerLabel}>{current === undefined ? displayName(currentValue) : optionLabel(current)}</span>
+            <svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
+              <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+            </svg>
+          </button>
+        }
+      />
+      <RiskConfirmation
+        open={confirmation !== null}
+        title={t('access.confirm.title')}
+        description={t('access.confirm.description')}
+        acknowledgeLabel={t('access.confirm.acknowledge')}
+        cancelLabel={t('access.confirm.cancel')}
+        confirmLabel={t('access.confirm.enable')}
+        acknowledged={acknowledged}
+        disabled={locked}
+        onAcknowledgedChange={setAcknowledged}
+        onCancel={closeConfirmation}
+        onConfirm={confirmFullAccess}
+      />
+    </>
  )
 }
@@ -1,13 +1,24 @@
 /* Todo strip in the composer context stack (Figma 9:959): tip surface,
-   14px radius, status icons + secondary item labels. */
+   14px radius, status icons + secondary item labels. It shares the composer
+   card geometry and adds the dock inset on both sides. */

 .root {
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
  margin: 0 auto;
-  width: calc(100% - 88px);
-  max-width: 752px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
  border: 1px solid var(--dsw-alias-border-l1);
  border-radius: 14px;
  background: var(--dsw-specific-tip);
@@ -0,0 +1,95 @@
+/* Web toolview: same geometry/tokens as ToolRow (figma icon · summary), plus
+   the web card the row stacks under its summary line, mirroring the bash row's
+   resident terminal card. */
+
+/* Summary line over the web card; the summary row keeps its own 24px height,
+   so the card is a column around it rather than a change to it. */
+.card {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap),
+   and replaces the primitive's standalone vertical margin with the flow's. */
+.web {
+  margin: 4px 0 4px 22px;
+}
+
+.root {
+  position: relative; /* sweep-glare overlay anchor */
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  min-width: 0;
+}
+
+/* Running sweep glare — same deepsuite ShimmerText pattern as ToolRow. */
+.root[data-state='running']::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 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-web-row-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dsh-web-row-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
+}
+
+.leading {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.title {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.sep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  border-radius: 1px;
+  margin: 0 8px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
@@ -0,0 +1,92 @@
+// Web toolview registrant: third-party posture over the keyed toolview hole
+// (ctx.slots.register + ToolRowProps only — never imports the chat domain).
+// Registered under BOTH web_search and web_fetch, since both declare the one
+// `web` render intent and render through the one WebBlock family; the row
+// discriminates on the toolName only to pick its icon and title.
+//
+// A web tool declares the `web` render intent at result time, so this row
+// renders the completed retrieval through WebBlock resident below its summary,
+// the same posture BashRow uses for the terminal card: no expand control on the
+// row itself, not a details-panel target, and the block's own expander keeps a
+// long source list from taking over the message flow (CHAT_WEB_MAX_SOURCES is
+// passed as maxSources — the chat flow's tighter cap over the block's default
+// of 16). Until the call settles there is no web card (the tools keep a generic
+// pending view), so a running row is the summary line alone.
+
+import type { Context } from 'cordis'
+import { IconBrowseOutline16, IconSearchOutline16, StateDot, WebBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../contract/web-card-model.ts'
+import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts'
+import css from './web-row.module.css'
+
+/** web_fetch reads one URL; web_search queries. Titles are figma literals. */
+const WEB_TITLES: Record<string, string> = {
+  web_search: 'Search',
+  web_fetch: 'Fetch',
+}
+
+/** Leading icon per tool, yielding to the state semantic while failed/stopped. */
+function leadingFor(toolName: string, state: ToolRowState) {
+  switch (state) {
+    case 'error': return <StateDot state="error" />
+    case 'stopped': return <StateDot state="warning" />
+    // Running keeps the icon — the row sweep carries the in-flight signal.
+    default: return toolName === 'web_fetch' ? <IconBrowseOutline16 size={14} /> : <IconSearchOutline16 size={14} />
+  }
+}
+
+/** Visually hidden status — StateDot is aria-hidden; AT needs a text label. */
+function stateStatus(state: ToolRowState): string | null {
+  switch (state) {
+    case 'running': return '运行中'
+    case 'error': return '失败'
+    case 'stopped': return '已停止'
+    default: return null
+  }
+}
+
+/**
+ * Web row: icon + Search/Fetch · {summary} in the shared ToolRow chrome, with
+ * the completed retrieval's web card resident below it. The summary row is not
+ * a details-panel control (tool rows stopped being one), so the card's own
+ * links and expander are the row's only interactions.
+ */
+export function WebRow({ toolName, block }: ToolRowProps) {
+  const model = toolRowModel(toolName, block)
+  const web = webCardModel(block)
+  const status = stateStatus(model.state)
+  return (
+    <div className={css.card}>
+      <div className={css.root} data-variant="web" data-tool={toolName} data-state={model.state}>
+        <span className={css.leading}>{leadingFor(toolName, model.state)}</span>
+        {status !== null && <span className={css.visuallyHidden}>{status}</span>}
+        <span className={css.title}>{WEB_TITLES[toolName] ?? model.title}</span>
+        <span className={css.sep} aria-hidden />
+        <span className={css.summary}>{model.summary}</span>
+      </div>
+      {web !== null && (
+        <WebBlock {...web} maxSources={CHAT_WEB_MAX_SOURCES} className={css.web} />
+      )}
+    </div>
+  )
+}
+
+/**
+ * The web rows as a plain registrant plugin, riding the same load-order seam as
+ * the bash sample: `inject: ['conversation']` guarantees the chat entry (and
+ * with it the 'conversation.chat.toolview' declaration) is on the ledger. One
+ * WebRow component registers under both web tool names.
+ */
+export const webToolview = {
+  name: 'web-toolview',
+  inject: ['slots', 'conversation'],
+  /**
+   * Register the web row under both web tool names' keyed toolview holes.
+   * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
+   */
+  apply(ctx: Context): void {
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_search' }, WebRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_fetch' }, WebRow)
+  },
+}