fix(client-web): scroll the web_search source card instead of collapsing

Replace the WebBlock search card's head/tail collapse and expand button
with a fixed-height scroll container that lists every source the tool
returned. The model-facing side is unchanged: the seam still caps sources
at searchMaxResults and the truncated indicator stays, so model-visible
and frontend-visible sources remain identical.

Remove CHAT_WEB_MAX_SOURCES and DEFAULT_WEB_MAX_SOURCES: with scroll, the
chat row and details panel show the same full list.

packages/client/ui-primitives/src/WebBlock.module.css

@@ -1,7 +1,8 @@
 /* Geometry mirrors CodeBlock/TerminalBlock (12px radius, code-block surface,
    16px vertical margin) so a web card, a terminal card, and a fenced code block
-   read as one family. A source list is prose, not aligned output, so it wraps
-   normally rather than scrolling horizontally like a terminal card's output. */
+   read as one family. A source list is prose, not aligned output, so each row
+   wraps horizontally rather than scrolling sideways like a terminal card; the
+   list as a whole scrolls vertically within a capped height (see .sources). */
 
 .block {
   --dsl-web-radius: 12px;
@@ -27,13 +28,20 @@
   margin-bottom: 0;
 }
 
-/* The citation list: ordered so each source reads as a numbered reference. */
+/* The citation list: ordered so each source reads as a numbered reference. The
+   whole list — the sources the tool returned, matching what the model saw —
+   renders here; a max-height caps the card so a long list scrolls in place
+   rather than growing the card unbounded. The height is a design constant of the
+   card's geometry, not a deployment choice, so it lives here rather than a plugin
+   config field. */
 .sources {
   margin: 0;
   padding-left: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
+  max-height: 320px;
+  overflow-y: auto;
 }
 
 .source {
@@ -65,26 +73,6 @@
   font: var(--dsw-font-xs-13);
 }
 
-.expandItem {
-  list-style: none;
-}
-
-.expand {
-  display: block;
-  width: 100%;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  color: var(--dsw-alias-label-tertiary);
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-}
-
-.expand:hover {
-  color: var(--dsw-alias-label-secondary);
-}
-
 .truncated {
   margin-top: 8px;
   color: var(--dsw-alias-label-tertiary);

packages/client/ui-primitives/src/WebBlock.tsx

@@ -9,22 +9,15 @@
 // allowlist MarkdownText applies to untrusted assistant-authored links (it also
 // permits mailto, excluded here); an unparseable or non-http URL renders as
 // plain text. Geometry, radius, and fonts mirror CodeBlock/TerminalBlock so a
-// web card reads as one family with them; a long source list caps at maxSources
-// with a head/tail collapse using the same arithmetic as TerminalBlock's output
-// cap.
+// web card reads as one family with them; the whole source list renders inside a
+// fixed-height scroll container (its `.sources` max-height), so a long list
+// scrolls in place rather than growing the card. The list matches what the model
+// saw: the tool already cut it to the source cap, and `truncated` reports that.
 
-import { useCallback, useState } from 'react'
 import clsx from 'clsx'
 import { MarkdownText } from './markdown/MarkdownText.tsx'
 import css from './WebBlock.module.css'
 
-/**
- * Sources shown before the height cap collapses the middle of a citation list.
- * Matches TerminalBlock's default output budget so both cards cut a long body
- * at the same place; the chat row narrows it through the maxSources prop.
- */
-export const DEFAULT_WEB_MAX_SOURCES = 16
-
 /**
  * One citeable source drawn in a search card: the projection of the contract's
  * `WebSource`, with the optional fields kept optional so a provider that
@@ -50,8 +43,6 @@ export interface WebSearchBlockProps {
   sources: WebSourceView[]
   /** True when the tool cut the source list to its result cap. */
   truncated: boolean
-  /** Sources shown before the middle collapses (default {@link DEFAULT_WEB_MAX_SOURCES}). */
-  maxSources?: number | undefined
   /** Extra class merged onto the wrapper (callers position; this component draws). */
   className?: string | undefined
 }
@@ -65,13 +56,6 @@ export interface WebFetchBlockProps {
   statusCode: number
   /** True when the provider or the output cap cut the fetched content. */
   truncated: boolean
-  /**
-   * Accepted and ignored, so both card kinds take one uniform prop set (a fetch
-   * card has no source list to cap) — the same way TerminalBlock accepts one
-   * `maxLines` across its arms. Lets a render site spread `maxSources` onto
-   * either kind without a per-kind conditional.
-   */
-  maxSources?: number | undefined
   /** Extra class merged onto the wrapper (callers position; this component draws). */
   className?: string | undefined
 }
@@ -137,9 +121,9 @@ function SafeLink({ url, label, className }: { url: string; label: string; class
 
 /**
  * One source row in a search card: the safe link plus its snippet and date. The
- * `<li value>` pins the source's original 1-based position, so a collapsed list
- * whose tail is drawn after the head still numbers each source by its real
- * citation index rather than by its position in the visible subset.
+ * `<li value>` pins the source's 1-based citation index explicitly rather than
+ * relying on the `<ol>`'s implicit numbering, so a row reads by its real index
+ * even inside the scroll container.
  * @param props.source - the source to render.
  * @param props.ordinal - the source's 1-based position in the full list.
  * @returns the source list item.
@@ -159,21 +143,12 @@ function SourceItem({ source, ordinal }: { source: WebSourceView; ordinal: numbe
 }
 
 /**
- * The search card body: the answer over the capped source list.
+ * The search card body: the answer over the full source list, which scrolls in
+ * place once it exceeds the `.sources` container height.
  * @param props - see {@link WebSearchBlockProps}.
  * @returns the search card element.
  */
-function WebSearchBlock({ answer, sources, truncated, maxSources = DEFAULT_WEB_MAX_SOURCES, className }: WebSearchBlockProps) {
-  const [expanded, setExpanded] = useState(false)
-  const onToggle = useCallback(() => { setExpanded(value => !value) }, [])
-  const hidden = sources.length - maxSources
-  const capped = hidden > 0 && !expanded
-  // Same split arithmetic as TerminalBlock's output cap, so a long body's head
-  // and tail slices agree between the two cards.
-  const headCount = Math.ceil(maxSources / 2)
-  const tailCount = maxSources - headCount
-  const head = capped ? sources.slice(0, headCount) : sources
-  const tail = capped ? sources.slice(sources.length - tailCount) : []
+function WebSearchBlock({ answer, sources, truncated, className }: WebSearchBlockProps) {
   // A provider may legitimately return no answer and no sources; the chat WebRow
   // does not show the raw result content, so without this the user would see an
   // empty card. Mirror the backend's `No results found.` render text.
@@ -187,27 +162,7 @@ function WebSearchBlock({ answer, sources, truncated, maxSources = DEFAULT_WEB_M
         <div className={css.empty}>未找到结果</div>
       ) : (
         <ol className={css.sources}>
-          {head.map((source, index) => <SourceItem key={index} source={source} ordinal={index + 1} />)}
-          {hidden > 0 && (
-            <li className={css.expandItem}>
-              <button
-                type="button"
-                className={css.expand}
-                aria-expanded={expanded}
-                aria-label={expanded ? '收起来源' : `展开其余 ${hidden} 条来源`}
-                onClick={onToggle}
-              >
-                {expanded ? '收起' : `… 其余 ${hidden} 条来源`}
-              </button>
-            </li>
-          )}
-          {tail.map((source, index) => (
-            <SourceItem
-              key={sources.length - tailCount + index}
-              source={source}
-              ordinal={sources.length - tailCount + index + 1}
-            />
-          ))}
+          {sources.map((source, index) => <SourceItem key={index} source={source} ordinal={index + 1} />)}
         </ol>
       )}
       {truncated && <div className={css.truncated}>来源列表已截断</div>}

packages/client/ui-primitives/src/index.ts

@@ -32,7 +32,7 @@ export { SearchBlock, DEFAULT_SEARCH_MAX_LINES } from './SearchBlock.tsx'
 export type {
   SearchBlockProps, SearchMatchesBlockProps, SearchPathsBlockProps, SearchFileGroup, SearchBlockLineMatch,
 } from './SearchBlock.tsx'
-export { WebBlock, DEFAULT_WEB_MAX_SOURCES } from './WebBlock.tsx'
+export { WebBlock } from './WebBlock.tsx'
 export type { WebBlockProps, WebSearchBlockProps, WebFetchBlockProps, WebSourceView } from './WebBlock.tsx'
 export { CodeBlock } from './markdown/CodeBlock.tsx'
 export type { CodeBlockProps } from './markdown/CodeBlock.tsx'

packages/client/ui-primitives/tests/web-block.spec.tsx

@@ -1,19 +1,19 @@
 // @vitest-environment jsdom
 // WebBlock: both kinds of the web card. The search card's answer, its citation
 // list with the title-or-hostname label fallback and optional snippet/date, the
-// source-list height cap and its expand control, and the truncated indicator;
-// the fetch card's linked URL, status, and truncation. Safe-link attributes on
-// both kinds: an http(s) URL becomes an external anchor (target/rel), any other
-// URL renders as plain text with no href.
+// full source list rendered inside a scroll container, and the truncated
+// indicator; the fetch card's linked URL, status, and truncation. Safe-link
+// attributes on both kinds: an http(s) URL becomes an external anchor
+// (target/rel), any other URL renders as plain text with no href.
 
 import { afterEach, describe, expect, it } from 'vitest'
-import { cleanup, fireEvent, render } from '@testing-library/react'
-import { DEFAULT_WEB_MAX_SOURCES, WebBlock } from '../src/index.ts'
+import { cleanup, render } from '@testing-library/react'
+import { WebBlock } from '../src/index.ts'
 import type { WebSourceView } from '../src/index.ts'
 
 afterEach(cleanup)
 
-/** `count` sources with sequential hostnames, so the cap slices read distinctly. */
+/** `count` sources with sequential hostnames, so each row reads distinctly. */
 function sources(count: number): WebSourceView[] {
   return Array.from({ length: count }, (_value, index) => ({
     url: `https://site-${index}.example.com/page`,
@@ -123,58 +123,23 @@ describe('WebBlock search card', () => {
     expect(off.queryByText('来源列表已截断')).toBeNull()
   })
 
-  it('renders every source and no expand control under the cap', () => {
-    const view = render(<WebBlock kind="search" sources={sources(4)} truncated={false} maxSources={4} />)
-    expect(view.container.querySelectorAll('[class^="_source_"]')).toHaveLength(4)
+  it('renders every source with no expand control, in one scroll container', () => {
+    // The card shows the whole list the tool returned — the same sources the
+    // model saw — with no head/tail collapse and no expand button; a long list
+    // scrolls within the .sources container instead.
+    const view = render(<WebBlock kind="search" sources={sources(30)} truncated={false} />)
+    expect(view.container.querySelectorAll('li[class^="_source_"]')).toHaveLength(30)
     expect(view.container.querySelector('[aria-expanded]')).toBeNull()
-  })
-
-  it('slices head and tail over the cap and expands on click', () => {
-    const view = render(<WebBlock kind="search" sources={sources(10)} truncated={false} maxSources={4} />)
-    // maxSources 4: head = ceil(4/2) = 2, tail = 4 - 2 = 2, 6 hidden.
-    expect([...view.container.querySelectorAll('[class^="_sourceLink_"]')].map(n => n.textContent))
-      .toEqual(['Source 0', 'Source 1', 'Source 8', 'Source 9'])
-    const toggle = view.getByRole('button', { name: '展开其余 6 条来源' })
-    expect(toggle.getAttribute('aria-expanded')).toBe('false')
-    expect(toggle.textContent).toBe('… 其余 6 条来源')
-
-    fireEvent.click(toggle)
-    expect(view.container.querySelectorAll('[class^="_source_"]')).toHaveLength(10)
-    const collapse = view.getByRole('button', { name: '收起来源' })
-    expect(collapse.getAttribute('aria-expanded')).toBe('true')
-    expect(collapse.textContent).toBe('收起')
-
-    fireEvent.click(collapse)
-    expect(view.container.querySelectorAll('[class^="_source_"]')).toHaveLength(4)
-  })
-
-  it('numbers a collapsed tail by each source original position, not its visible slot', () => {
-    // maxSources 4 over 10 sources: the tail is sources 8 and 9, which must read
-    // as citations 9 and 10 (via <li value>), not renumbered 3 and 4.
-    const view = render(<WebBlock kind="search" sources={sources(10)} truncated={false} maxSources={4} />)
-    const items = [...view.container.querySelectorAll('li[class^="_source_"]')]
-    expect(items.map(li => li.getAttribute('value'))).toEqual(['1', '2', '9', '10'])
-  })
-
-  it('keeps the expander out of the ordered-list numbering', () => {
-    // The expander is a marker-less <li>, so it is valid inside <ol> and does not
-    // consume a citation number between the head and tail sources.
-    const view = render(<WebBlock kind="search" sources={sources(10)} truncated={false} maxSources={4} />)
+    expect(view.container.querySelector('button')).toBeNull()
+    // Every direct child of the <ol> is a source <li> (no marker-less expander).
     const ol = view.container.querySelector('ol')!
-    // Every direct child is an <li> (no bare <button> child — invalid HTML).
     expect([...ol.children].every(child => child.tagName === 'LI')).toBe(true)
   })
 
-  it('renders the head slice alone when the cap leaves no tail', () => {
-    const view = render(<WebBlock kind="search" sources={sources(5)} truncated={false} maxSources={1} />)
-    expect([...view.container.querySelectorAll('[class^="_sourceLink_"]')].map(n => n.textContent)).toEqual(['Source 0'])
-    expect(view.getByRole('button', { name: '展开其余 4 条来源' })).toBeTruthy()
-  })
-
-  it('caps at the documented default when maxSources is absent', () => {
-    const view = render(<WebBlock kind="search" sources={sources(DEFAULT_WEB_MAX_SOURCES + 1)} truncated={false} />)
-    expect(view.container.querySelectorAll('[class^="_source_"]')).toHaveLength(DEFAULT_WEB_MAX_SOURCES)
-    expect(view.getByRole('button', { name: '展开其余 1 条来源' })).toBeTruthy()
+  it('numbers every source by its 1-based citation index via <li value>', () => {
+    const view = render(<WebBlock kind="search" sources={sources(4)} truncated={false} />)
+    const items = [...view.container.querySelectorAll('li[class^="_source_"]')]
+    expect(items.map(li => li.getAttribute('value'))).toEqual(['1', '2', '3', '4'])
   })
 })