@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/benchmark-view/BenchmarkSidebar.scss

@@ -1,27 +1,13 @@
 .benchmark-view {
   // Sidebar container
   &__sidebar {
-    width: 408px;
+    width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    gap: 16px;
-    overflow: hidden;
-    padding: 24px;
-  }
-
-  &__sidebar-header {
-    display: flex;
-    align-items: center;
     gap: 8px;
-    flex-shrink: 0;
-
-    height: 32px;
-  }
-
-  &__sidebar-title.ant-typography {
-    font-size: 18px;
-    margin: 0;
+    overflow: hidden;
+    padding: 10px 12px 12px;
   }
 
   &__sep.ant-divider {
@@ -40,6 +26,24 @@
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
+
+    .ant-btn {
+      width: 28px;
+      min-width: 28px;
+      height: 28px;
+      padding: 0;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--sub-text-color);
+      transition: background-color .2s ease, color .2s ease;
+    }
+
+    .ant-btn:hover,
+    .ant-btn:focus-visible {
+      background: var(--nav-hover-bg, #f3f4f6);
+      color: var(--text-color);
+    }
   }
 
   &__search-icon {
@@ -47,11 +51,20 @@
     color: var(--sub-text-color);
   }
 
+  &__search .ant-input-affix-wrapper {
+    height: 30px;
+    border-radius: 6px;
+    background: var(--bg-color);
+    padding: 0 8px;
+    font-size: 12px;
+  }
+
   // Tree
   &__tree-shell {
     flex: 1;
     min-height: 0;
     overflow: auto;
+    padding-right: 2px;
   }
 
   &__tree-shell .ant-tree {
@@ -107,21 +120,30 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 5px 4px;
-    border-radius: 6px;
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
     min-width: 0;
-    transition: background-color .15s;
+    background: var(--bg-color);
+    transition: background-color .15s, border-color .15s;
   }
 
   &__tree-category {
-    padding: 7px 4px;
+    padding: 8px;
   }
 
   &__tree-shell .ant-tree-node-content-wrapper:hover &__tree-category,
   &__tree-shell .ant-tree-node-content-wrapper:hover &__tree-case,
   &__tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected
     &__tree-case {
-    background: var(--sub-bg-color);
+    background: var(--sidebar-hover-bg, #e5e5e5);
+    border-color: var(--sidebar-hover-bg, #e5e5e5);
+  }
+
+  &__tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected
+    &__tree-case {
+    border-color: var(--primary-color);
+    background: var(--primary-soft-bg);
   }
 
   &__tree-icon {

package/src/components/benchmark-view/BenchmarkSidebar.tsx

@@ -200,12 +200,6 @@ export function BenchmarkSidebar({
 
   return (
     <div className='benchmark-view__sidebar'>
-      <div className='benchmark-view__sidebar-header'>
-        <Typography.Title level={4} className='benchmark-view__sidebar-title'>
-          {t('benchmark.title')}
-        </Typography.Title>
-      </div>
-
       <div className='benchmark-view__search-row'>
         <Input
           value={query}

package/src/components/benchmark-view/BenchmarkView.scss

@@ -1,4 +1,14 @@
 .benchmark-view {
+  &__body {
+    flex-direction: row;
+    gap: 0;
+    padding: 0;
+  }
+
+  &__mobile-switcher-shell {
+    display: none;
+  }
+
   display: flex;
   height: 100%;
   overflow: hidden;
@@ -7,18 +17,21 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-  }
-
-  &__divider {
-    width: 1px;
-    background: var(--border-color);
+    width: var(--subpage-secondary-panel-width);
+    min-width: var(--subpage-secondary-panel-width);
+    max-width: var(--subpage-secondary-panel-width);
+    background: var(--sub-bg-color);
   }
 
   &__right {
     flex: 1;
     min-width: 0;
     overflow: hidden;
-    padding: 24px 24px 24px 16px;
+    margin: var(--subpage-content-card-gap);
+    margin-left: 0;
+    padding: 10px 12px 12px;
+    border-radius: var(--subpage-content-card-radius);
+    background: var(--subpage-content-card-bg);
   }
 
   &__canvas {
@@ -43,24 +56,19 @@
 
 @media (max-width: 1100px) {
   .benchmark-view {
-    flex-direction: column;
+    &__body {
+      flex-direction: column;
+    }
 
     &__left {
       width: 100%;
       min-width: 0;
-      max-height: 300px;
-      padding-right: 0;
-      padding: 16px 16px 0;
-    }
-
-    &__divider {
-      width: 100%;
-      height: 1px;
+      max-height: 320px;
     }
 
     &__right {
-      flex: 1;
-      padding: 0 16px 16px;
+      margin-top: 0;
+      margin-left: var(--subpage-content-card-gap);
     }
   }
 }
@@ -68,11 +76,46 @@
 @media (max-width: 720px) {
   .benchmark-view {
     &__right {
-      padding: 0 12px 12px;
+      padding: 10px 12px;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .benchmark-view--compact {
+    .benchmark-view__mobile-switcher-shell {
+      display: block;
+      padding: 12px;
+      padding-bottom: 0;
     }
 
-    &__left {
-      padding: 12px 12px 0;
+    .benchmark-view__mobile-switcher {
+      width: 100%;
+
+      .ant-segmented-group {
+        gap: 4px;
+      }
+
+      .ant-segmented-item {
+        min-height: 32px;
+      }
+    }
+
+    .benchmark-view__left,
+    .benchmark-view__right {
+      width: auto;
+      min-width: 0;
+      max-width: none;
+      max-height: none;
+      margin: 12px;
+      margin-top: 12px;
+      border-radius: var(--subpage-content-card-radius);
+      background: var(--subpage-content-card-bg);
+      overflow: hidden;
+    }
+
+    .benchmark-view__right {
+      padding: 12px;
     }
   }
 }

package/src/components/benchmark-view/index.tsx

@@ -1,6 +1,6 @@
 import './BenchmarkView.scss'
 
-import { App } from 'antd'
+import { App, Segmented } from 'antd'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
@@ -13,6 +13,8 @@ import {
   listBenchmarkCategories,
   startBenchmarkRun
 } from '#~/api.js'
+import { PageShell } from '#~/components/layout/PageShell'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useQueryParams } from '#~/hooks/useQueryParams.js'
 import type { BenchmarkCase } from '@vibe-forge/types'
 
@@ -24,12 +26,15 @@ import { isTerminalRun } from './utils.js'
 export function BenchmarkView() {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
 
   // State
   const [activeRunId, setActiveRunId] = useState('')
   const [treeQuery, setTreeQuery] = useState('')
   const [expandedKeys, setExpandedKeys] = useState<string[]>([])
   const [checkedKeys, setCheckedKeys] = useState<string[]>([])
+  const [mobilePanel, setMobilePanel] = useState<'cases' | 'details'>('cases')
+  const isCompactView = isCompactLayout || isTouchInteraction
 
   const { values, update } = useQueryParams<BenchmarkQueryParams>({
     keys: ['category', 'title'],
@@ -147,6 +152,13 @@ export function BenchmarkView() {
     }
   }, [selectedCase, update, values.category, values.title])
 
+  useEffect(() => {
+    if (!isCompactView) return
+    if (selectedCase == null) {
+      setMobilePanel('cases')
+    }
+  }, [isCompactView, selectedCase])
+
   useEffect(() => {
     if (!isTerminalRun(activeRun)) return
     void mutateCases()
@@ -161,40 +173,65 @@ export function BenchmarkView() {
   }, [activeRun, activeRunId, message, mutateCases, mutateCategories, mutateResult, mutateRun, t])
 
   const checkedCaseCount = checkedKeys.filter(k => k.startsWith('case:')).length
+  const showCases = !isCompactView || mobilePanel === 'cases'
+  const showDetails = !isCompactView || mobilePanel === 'details'
 
   return (
-    <div className='benchmark-view'>
-      <div className='benchmark-view__left'>
-        <BenchmarkSidebar
-          cases={cases}
-          categories={categories}
-          selectedCase={selectedCase}
-          query={treeQuery}
-          expandedKeys={expandedKeys}
-          checkedKeys={checkedKeys}
-          checkedCaseCount={checkedCaseCount}
-          onQueryChange={setTreeQuery}
-          onExpandedKeysChange={setExpandedKeys}
-          onCheckedKeysChange={setCheckedKeys}
-          onSelectCase={(category, title) => update({ category, title })}
-          onRunCase={(item) => void handleRunSpecificCase(item)}
-          onRunCategory={(category) => void handleRunCategory(category)}
-          onBatchRun={() => void handleBatchRun()}
-        />
-      </div>
-
-      <div className='benchmark-view__divider' />
-
-      <div className='benchmark-view__right'>
-        <BenchmarkCasePanel
-          selectedCase={selectedCase}
-          latestResult={latestResult}
-          activeRun={activeRun}
-          activeRunId={activeRunId}
-          progressPercent={progressPercent}
-          onRunCase={() => void (selectedCase && handleRunSpecificCase(selectedCase))}
-        />
-      </div>
-    </div>
+    <PageShell
+      className={`benchmark-view ${isCompactView ? 'benchmark-view--compact' : ''}`}
+      bodyClassName='benchmark-view__body'
+    >
+      {isCompactView && (
+        <div className='benchmark-view__mobile-switcher-shell'>
+          <Segmented
+            block
+            className='benchmark-view__mobile-switcher'
+            value={mobilePanel}
+            onChange={(value) => setMobilePanel(value as 'cases' | 'details')}
+            options={[
+              { label: t('benchmark.mobileCases'), value: 'cases' },
+              { label: t('benchmark.mobileDetails'), value: 'details', disabled: selectedCase == null }
+            ]}
+          />
+        </div>
+      )}
+      {showCases && (
+        <div className='benchmark-view__left'>
+          <BenchmarkSidebar
+            cases={cases}
+            categories={categories}
+            selectedCase={selectedCase}
+            query={treeQuery}
+            expandedKeys={expandedKeys}
+            checkedKeys={checkedKeys}
+            checkedCaseCount={checkedCaseCount}
+            onQueryChange={setTreeQuery}
+            onExpandedKeysChange={setExpandedKeys}
+            onCheckedKeysChange={setCheckedKeys}
+            onSelectCase={(category, title) => {
+              update({ category, title })
+              if (isCompactView) {
+                setMobilePanel('details')
+              }
+            }}
+            onRunCase={(item) => void handleRunSpecificCase(item)}
+            onRunCategory={(category) => void handleRunCategory(category)}
+            onBatchRun={() => void handleBatchRun()}
+          />
+        </div>
+      )}
+      {showDetails && (
+        <div className='benchmark-view__right'>
+          <BenchmarkCasePanel
+            selectedCase={selectedCase}
+            latestResult={latestResult}
+            activeRun={activeRun}
+            activeRunId={activeRunId}
+            progressPercent={progressPercent}
+            onRunCase={() => void (selectedCase && handleRunSpecificCase(selectedCase))}
+          />
+        </div>
+      )}
+    </PageShell>
   )
 }

package/src/components/chat/AGENTS.md

@@ -32,8 +32,6 @@
   - sender 私有类型定义。
 - `sender/@utils/`
   - sender 私有常量与轻量工具函数。
-- `ThinkingStatus.tsx`
-  - 聊天域可复用的状态提示组件，不再算 sender 私有视图。
 - `../../dock-panel/DockPanel.tsx`
   - 聊天页底部可复用 dock 面板壳层。
   - 统一承载标题、meta、关闭动作和拖拽调高能力。
@@ -67,6 +65,20 @@
 - sender 相关单文件应尽量收敛在 200 行以内；超过后优先拆视图子组件、hooks、utils、样式文件，而不是继续在原文件加条件分支。
 - 子模块如果已经独立成形，例如 `model-select`、`reference-actions`、`sender-toolbar`，应建子目录，并在子目录内继续按职责拆分，而不是把新的辅助文件继续堆回 sender 根目录。
 
+## Sender 上方 Composer Card 设计约束
+
+- sender 上方的信息卡片统一视为 `composer card stack`，不要为 TODO、thinking、ask-user-question 各自维护一套独立容器样式。
+- 这类卡片优先复用 `ChatComposerCard`；新信息块先接入统一 card，再谈局部样式差异。
+- `composer card stack` 与 sender 之间默认不留额外空隙；宽度、边框和背景基调保持一致，视觉上应是一组连续的信息层。
+- 堆叠时只有最上方卡片保留上圆角，只有最下方的 sender 保留自己的完整圆角；中间卡片不应出现额外圆角或断开的分组感。
+- sender 上方卡片的展示优先级固定为：`todos`、`steer messages`、`next messages`、`ask user questions`；当前未接入的项也按这个顺序预留。
+- TODO 卡片默认折叠；折叠/展开时只让 body 参与动画，不要让 header 高度跳变。
+- TODO、thinking、ask-user-question 在信息密度上保持一致，优先通过布局收紧层级，不要只靠压缩 `padding` / `margin`。
+- 标题区的图标、字号、字重、行高应复用同一套节奏；ask-user-question 不应出现比 TODO 更重或更大的标题视觉。
+- 卡片表面保持简洁：不加阴影，背景色与 sender 基本一致；需要状态区分时优先用图标、文案和轻量色差，不单独造一套强强调背景。
+- 选项型列表默认纵向一行一个；说明信息放进 tooltip 或其他延迟展示入口，不直接铺在主列表里。
+- 选项 hover 优先做背景色和边框色过渡，避免通过新增/移除 border 造成闪烁或布局抖动。
+
 ## Sender import 约定
 
 - `Sender` 及其子组件按固定顺序组织 import：

package/src/components/chat/ChatComposerCard.scss

@@ -0,0 +1,77 @@
+.chat-composer-card {
+  --chat-composer-card-bg: var(--input-bg, #f9fafb);
+  --chat-composer-card-border: var(--border-color);
+
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--chat-composer-card-border);
+  border-radius: 14px;
+  background: var(--chat-composer-card-bg);
+  box-shadow: none;
+
+  &--narrow {
+    width: calc(100% - 24px);
+    align-self: center;
+  }
+
+  &.is-collapsed {
+    .chat-composer-card__content {
+      grid-template-rows: 0fr;
+      opacity: 0;
+    }
+  }
+
+  &.is-expanded .chat-composer-card__content {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  &__summary {
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    border: none;
+    min-height: 36px;
+    padding: 6px 8px;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    text-align: left;
+    color: inherit;
+    transition: padding .22s ease;
+  }
+
+  button.chat-composer-card__summary {
+    cursor: pointer;
+  }
+
+  &__content {
+    display: grid;
+    min-width: 0;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows .24s ease, opacity .18s ease;
+  }
+
+  &__body {
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 4px 4px;
+  }
+}
+
+html.dark .chat-composer-card {
+  --chat-composer-card-bg: var(--input-bg, #1f1f1f);
+}
+
+@media (max-width: 768px) {
+  .chat-composer-card--narrow {
+    width: calc(100% - 16px);
+  }
+}

package/src/components/chat/ChatComposerCard.tsx

@@ -0,0 +1,59 @@
+import './ChatComposerCard.scss'
+
+import type { ReactNode } from 'react'
+
+export function ChatComposerCard({
+  className,
+  summary,
+  summaryClassName,
+  bodyClassName,
+  progress,
+  children,
+  expanded = true,
+  onToggle,
+  narrow = false
+}: {
+  className?: string
+  summary: ReactNode
+  summaryClassName?: string
+  bodyClassName?: string
+  progress?: ReactNode
+  children?: ReactNode
+  expanded?: boolean
+  onToggle?: () => void
+  narrow?: boolean
+}) {
+  const classes = [
+    'chat-composer-card',
+    narrow ? 'chat-composer-card--narrow' : '',
+    expanded ? 'is-expanded' : 'is-collapsed',
+    className ?? ''
+  ].filter(Boolean).join(' ')
+  const summaryClasses = ['chat-composer-card__summary', summaryClassName ?? ''].filter(Boolean).join(' ')
+  const bodyClasses = ['chat-composer-card__body', bodyClassName ?? ''].filter(Boolean).join(' ')
+  const hasBody = children != null
+
+  return (
+    <section className={classes}>
+      {onToggle != null
+        ? (
+          <button type='button' className={summaryClasses} onClick={onToggle}>
+            {summary}
+          </button>
+        )
+        : (
+          <div className={summaryClasses}>
+            {summary}
+          </div>
+        )}
+      {progress}
+      {hasBody && (
+        <div className='chat-composer-card__content' aria-hidden={!expanded}>
+          <div className={bodyClasses}>
+            {children}
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}