@vibe-forge/client 0.11.3 → 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/ChatComposerCard.scss

@@ -3,6 +3,7 @@
   --chat-composer-card-border: var(--border-color);
 
   width: 100%;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -30,6 +31,7 @@
 
   &__summary {
     width: 100%;
+    min-width: 0;
     margin: 0;
     border: none;
     min-height: 36px;
@@ -50,6 +52,7 @@
 
   &__content {
     display: grid;
+    min-width: 0;
     grid-template-rows: 0fr;
     opacity: 0;
     transition: grid-template-rows .24s ease, opacity .18s ease;
@@ -57,6 +60,7 @@
 
   &__body {
     min-height: 0;
+    min-width: 0;
     overflow: hidden;
     padding: 0 4px 4px;
   }

package/src/components/chat/ChatHeader.scss

@@ -30,6 +30,13 @@
     min-width: 0;
   }
 
+  &-leading-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
   &-title {
     font-weight: 600;
     color: var(--text-color);
@@ -41,6 +48,45 @@
   }
 }
 
+.chat-header.is-compact {
+  padding: 10px 12px 8px;
+  align-items: center;
+  gap: 8px;
+
+  .chat-header-main {
+    align-items: center;
+    gap: 8px;
+  }
+
+  .chat-header-leading-actions {
+    gap: 4px;
+  }
+
+  .chat-header-title {
+    line-height: 1.3;
+    white-space: nowrap;
+    display: block;
+  }
+
+  .chat-header-actions {
+    flex-shrink: 0;
+    margin-left: auto;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+  }
+
+  .chat-header-action-button.ant-btn.ant-btn-text {
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    border-radius: 8px;
+
+    .chat-header-view-option.material-symbols-rounded {
+      font-size: 18px;
+    }
+  }
+}
+
 .chat-header-icon.material-symbols-rounded {
   font-size: 18px;
 }
@@ -49,6 +95,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
 }
 
 .chat-header-action-button.ant-btn.ant-btn-text {
@@ -586,6 +633,146 @@ html.dark .chat-header-action-button.ant-btn.ant-btn-text {
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 }
 
+@media (max-width: 768px) {
+  .session-settings-drawer {
+    gap: 10px;
+
+    .settings-section {
+      gap: 10px;
+
+      .section-header {
+        font-size: 11px;
+        letter-spacing: .08em;
+      }
+    }
+
+    &__form {
+      .config-view__field-row {
+        gap: 10px;
+        padding: 10px 12px;
+      }
+
+      .config-view__field-meta {
+        gap: 8px;
+      }
+
+      .config-view__field-title,
+      .config-view__field-desc {
+        white-space: normal;
+      }
+
+      .config-view__field-control {
+        min-width: 0;
+        width: 100%;
+      }
+
+      .config-view__array-list {
+        gap: 6px;
+      }
+
+      .config-view__array-item {
+        align-items: flex-start;
+      }
+
+      .config-view__icon-button--compact {
+        width: 30px;
+        min-width: 30px;
+        height: 30px;
+      }
+
+      .config-view__icon-button--full {
+        width: 100%;
+        min-width: 100%;
+        height: 36px;
+        justify-content: flex-start;
+        gap: 6px;
+        padding: 0 12px;
+        border-radius: 8px;
+        border: 1px dashed var(--border-color) !important;
+        background: var(--sub-bg-color) !important;
+        color: var(--sub-text-color) !important;
+        align-self: stretch;
+
+        &::after {
+          content: attr(aria-label);
+          font-size: 12px;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .session-tool-groups {
+    gap: 10px;
+  }
+
+  .session-tool-group-card {
+    padding: 12px 12px 0;
+    border-radius: 12px;
+  }
+
+  .session-tool-group-card__header {
+    align-items: flex-start;
+    padding-bottom: 10px;
+  }
+
+  .session-tool-group-card__title {
+    gap: 8px;
+    font-size: 12px;
+
+    .material-symbols-rounded {
+      width: 24px;
+      height: 24px;
+      border-radius: 8px;
+      font-size: 14px;
+    }
+  }
+
+  .session-tool-group-card__meta {
+    gap: 6px;
+  }
+
+  .session-tool-group-card__count {
+    padding: 1px 6px;
+    font-size: 11px;
+  }
+
+  .session-tool-group-card__list {
+    max-height: none;
+    margin: 0 -12px;
+    padding: 0 12px;
+  }
+
+  .session-tool-row {
+    height: 34px;
+  }
+
+  .session-debug-panel {
+    padding: 0 10px;
+  }
+
+  .session-debug-row {
+    grid-template-columns: 72px minmax(0, 1fr);
+    gap: 8px;
+    height: auto;
+    min-height: 34px;
+    padding: 6px 0;
+  }
+
+  .settings-footer {
+    gap: 16px;
+    padding-top: 16px;
+
+    .danger-zone {
+      .delete-session-row {
+        flex-direction: column;
+        align-items: stretch;
+        padding: 12px;
+      }
+    }
+  }
+}
+
 html.dark {
   .session-settings-drawer {
     .settings-footer {