@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/ConfigView.scss

@@ -1,9 +1,48 @@
 .config-view {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
   color: var(--text-color);
-  background: var(--bg-color);
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  &__compact-shell {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  &__compact-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px;
+    padding-bottom: 0;
+  }
+
+  &__compact-select {
+    width: 100%;
+
+    .ant-select-selector {
+      min-height: 36px !important;
+      border-radius: 8px !important;
+      padding-inline: 10px !important;
+      background: var(--subpage-content-card-bg) !important;
+    }
+  }
+
+  &__compact-panel {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    margin: var(--subpage-content-card-gap);
+    margin-top: 12px;
+    border-radius: var(--subpage-content-card-radius);
+    background: var(--subpage-content-card-bg);
+    overflow: hidden;
+  }
 
   &__state {
     display: grid;
@@ -14,13 +53,19 @@
   &__tabs-wrap {
     display: flex;
     min-height: 0;
+    min-width: 0;
     flex: 1;
+
     .ant-tabs-content-holder > .ant-tabs-content {
       height: 100%;
+      min-height: 0;
+
       & > .ant-tabs-tabpane {
-        padding: 16px 128px;
-        padding-bottom: 0;
+        display: flex;
+        min-height: 0;
+        padding: 12px;
         height: 100%;
+        box-sizing: border-box;
       }
     }
   }
@@ -28,6 +73,7 @@
   &__tabs {
     width: 100%;
     height: 100%;
+    min-width: 0;
   }
 }
 
@@ -37,6 +83,7 @@
   flex: 1;
   gap: 12px;
   height: 100%;
+  min-height: 0;
 }
 
 .config-view__editor-wrap {
@@ -57,12 +104,18 @@
   }
 }
 
+.config-view__section-header--actions-only {
+  justify-content: flex-end;
+}
+
 .config-view__card {
   flex-grow: 1;
-  margin: 0 -20px;
-  padding: 0 20px;
-  padding-bottom: 20px;
-  overflow: scroll;
+  min-height: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  overflow: auto;
 }
 
 .config-view__card + .config-view__card {
@@ -73,7 +126,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-size: 18px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--text-color);
 }
@@ -101,43 +154,54 @@
 .config-view__tab-label {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   width: 100%;
   line-height: 1;
 }
 
+.config-view__compact-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .config-view__tab-icon {
-  font-size: 18px;
+  font-size: 16px;
   color: var(--sub-text-color);
-  width: 18px;
-  height: 18px;
-  line-height: 18px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 .config-view__tab-text {
-  font-size: 13px;
+  font-size: 12px;
   color: var(--text-color);
-  line-height: 18px;
+  line-height: 16px;
 }
 
 .config-view__tabs > .ant-tabs-nav {
-  min-width: 320px;
-  padding: 12px 16px;
+  width: var(--subpage-secondary-panel-width);
+  min-width: var(--subpage-secondary-panel-width);
+  max-width: var(--subpage-secondary-panel-width);
+  padding: 10px 12px;
   background-color: var(--sub-bg-color);
-  border-right: 1px solid var(--sub-border-color);
 
   .ant-tabs-tab {
     display: flex;
     align-items: center;
-    min-height: 28px;
-
+    min-height: 30px;
+    margin: 0 0 6px !important;
+    padding: 6px 10px !important;
+    border: 1px solid transparent;
     border-radius: 8px;
-    transition: .3s;
+    background: var(--bg-color);
+    transition: .2s ease;
     &:not(.ant-tabs-tab-disabled):hover {
-      background-color: var(--sub-sub-bg-color);
+      border-color: rgba(37, 99, 235, .18);
+      background-color: var(--tag-hover-bg);
     }
   }
 
@@ -150,20 +214,31 @@
 
   .ant-tabs-tab-disabled {
     cursor: default;
+    min-height: auto;
+    margin: 0 0 4px !important;
+    padding: 4px 2px !important;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .ant-tabs-tab-disabled:hover {
+    border-color: transparent;
+    background: transparent;
   }
 
   .ant-tabs-tab-disabled .ant-tabs-tab-btn {
     cursor: default;
     color: var(--sub-text-color);
     font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: .06em;
+    font-weight: 600;
   }
 
   .ant-tabs-tab-active {
     font-weight: 600;
-    color: var(--sub-sub-text-color);
-    background: var(--sub-sub-bg-color);
+    color: var(--sidebar-active-text, var(--primary-color));
+    border-color: var(--primary-color);
+    background: var(--primary-soft-bg);
     .material-symbols-rounded {
       font-variation-settings: 'FILL' 1;
     }
@@ -175,11 +250,47 @@
 }
 
 .config-view__tabs > .ant-tabs-content-holder {
-  height: 100%;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: auto;
+  margin: var(--subpage-content-card-gap);
+  margin-left: 0;
+  border-left: none;
+  border-radius: var(--subpage-content-card-radius);
+  background: var(--subpage-content-card-bg);
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
 .config-view__group-label {
   display: flex;
   width: 100%;
-  margin-left: -24px;
+  margin-left: 0;
+  padding: 0;
+}
+
+@media (max-width: 1100px) {
+  .config-view__tabs > .ant-tabs-content-holder {
+    margin-top: 0;
+    margin-left: var(--subpage-content-card-gap);
+  }
+}
+
+@media (max-width: 960px) {
+  .config-view--compact {
+    .config-view__body {
+      padding: 0;
+    }
+
+    .config-view__content {
+      padding: 12px;
+      gap: 10px;
+      overflow: auto;
+    }
+
+    .config-view__card {
+      overflow: visible;
+    }
+  }
 }

package/src/components/ConfigView.tsx

@@ -1,6 +1,6 @@
 import './ConfigView.scss'
 
-import { App, Empty, Space, Spin, Tabs } from 'antd'
+import { App, Empty, Select, Space, Spin, Tabs } from 'antd'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
@@ -8,6 +8,9 @@ import useSWR from 'swr'
 import type { ConfigSource } from '@vibe-forge/core'
 import type { AboutInfo, ConfigResponse } from '@vibe-forge/types'
 
+import { PageShell } from '#~/components/layout/PageShell'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+
 import { getApiErrorMessage, getConfig, updateConfig } from '../api'
 import { useQueryParams } from '../hooks/useQueryParams'
 import { AboutSection, ConfigSectionPanel, ConfigSourceSwitch, DisplayValue } from './config'
@@ -17,6 +20,7 @@ import { cloneValue, getValueByPath, isEmptyValue } from './config/configUtils'
 export function ConfigView() {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const { data, isLoading, error, mutate } = useSWR<ConfigResponse>('/api/config', getConfig)
   const { values: queryValues, update: updateQuery, searchParams } = useQueryParams<{ tab: string; source: string }>({
     keys: ['tab', 'source'],
@@ -105,8 +109,33 @@ export function ConfigView() {
 
   const activeTabKey = tabKeys.has(queryValues.tab) ? queryValues.tab : 'general'
   const setActiveTabKey = (key: string) => updateQuery({ tab: key })
+  const isCompactView = isCompactLayout || isTouchInteraction
 
   const activeTab = useMemo(() => tabs.find(tab => tab.key === activeTabKey), [tabs, activeTabKey])
+  const compactTabOptions = useMemo(() => {
+    const groups: Array<{ label: string; options: Array<{ label: string; value: string }> }> = []
+    let currentGroup: { label: string; options: Array<{ label: string; value: string }> } | null = null
+
+    tabs.forEach((tab) => {
+      if (tab.type === 'group') {
+        currentGroup = { label: String(tab.label), options: [] }
+        groups.push(currentGroup)
+        return
+      }
+
+      if (currentGroup == null) {
+        currentGroup = { label: t('config.groups.config'), options: [] }
+        groups.push(currentGroup)
+      }
+
+      currentGroup.options.push({
+        value: tab.key,
+        label: String(tab.label)
+      })
+    })
+
+    return groups
+  }, [tabs, t])
 
   useEffect(() => {
     if (activeTab == null) return
@@ -180,8 +209,62 @@ export function ConfigView() {
     scheduleSave(sectionKey, sourceKey, nextValue)
   }
 
+  const renderTabContent = (tab: typeof tabs[number]) => (
+    <div className='config-view__content'>
+      {tab.key === 'about' && (
+        <AboutSection value={tab.value as AboutInfo | undefined} />
+      )}
+      {tab.key === 'appearance' && (
+        <AppSettingsPanel t={t} />
+      )}
+      {tab.key !== 'about' && tab.key !== 'appearance' && !configTabKeys.has(tab.key) && (
+        <DisplayValue value={tab.value} sectionKey={tab.key} t={t} />
+      )}
+      {configTabKeys.has(tab.key) && (
+        <ConfigSectionPanel
+          sectionKey={tab.key}
+          value={drafts[getDraftKey(tab.key)] ?? cloneValue(tab.value ?? {}) ?? {}}
+          onChange={(next) => handleDraftChange(tab.key, next)}
+          mergedModelServices={mergedModelServices as Record<string, unknown>}
+          mergedAdapters={mergedAdapters as Record<string, unknown>}
+          selectedModelService={selectedModelService}
+          t={t}
+          headerExtra={isCompactView
+            ? undefined
+            : (
+              <Space size={12}>
+                <ConfigSourceSwitch
+                  value={sourceKey}
+                  onChange={setSourceKey}
+                  options={[
+                    {
+                      value: 'project',
+                      icon: 'folder',
+                      label: configPresent?.project === true
+                        ? t('config.sources.project')
+                        : t('config.sources.projectMissing')
+                    },
+                    {
+                      value: 'user',
+                      icon: 'person',
+                      label: configPresent?.user === true
+                        ? t('config.sources.user')
+                        : t('config.sources.userMissing')
+                    }
+                  ]}
+                />
+              </Space>
+            )}
+        />
+      )}
+    </div>
+  )
+
   return (
-    <div className='config-view'>
+    <PageShell
+      className={`config-view ${isCompactView ? 'config-view--compact' : ''}`}
+      bodyClassName='config-view__body'
+    >
       {isLoading && (
         <div className='config-view__state'>
           <Spin />
@@ -193,90 +276,82 @@ export function ConfigView() {
         </div>
       )}
       {!isLoading && error == null && (
-        <div className='config-view__tabs-wrap'>
-          <Tabs
-            tabPosition='left'
-            tabBarGutter={4}
-            indicator={{ size: 0 }}
-            className='config-view__tabs'
-            activeKey={activeTabKey}
-            onChange={(key) => {
-              if (key !== 'group-config' && key !== 'group-app') {
-                setActiveTabKey(key)
-              }
-            }}
-            items={tabs.map((tab) => {
-              if (tab.type === 'group') {
-                return {
-                  key: tab.key,
-                  label: <span className='config-view__group-label'>{tab.label}</span>,
-                  disabled: true,
-                  children: <div />
-                }
-              }
-              return {
-                key: tab.key,
-                label: (
-                  <span className='config-view__tab-label'>
-                    <span className='material-symbols-rounded config-view__tab-icon'>{tab.icon}</span>
-                    <span className='config-view__tab-text'>{tab.label}</span>
-                  </span>
-                ),
-                children: (
-                  <div className='config-view__content'>
-                    {tab.key === 'about' && (
-                      <AboutSection value={tab.value as AboutInfo | undefined} />
-                    )}
-                    {tab.key === 'appearance' && (
-                      <AppSettingsPanel t={t} />
-                    )}
-                    {tab.key !== 'about' && tab.key !== 'appearance' && !configTabKeys.has(tab.key) && (
-                      <DisplayValue value={tab.value} sectionKey={tab.key} t={t} />
-                    )}
-                    {configTabKeys.has(tab.key) && (
-                      <ConfigSectionPanel
-                        sectionKey={tab.key}
-                        title={tab.label}
-                        icon={tab.icon}
-                        value={drafts[getDraftKey(tab.key)] ?? cloneValue(tab.value ?? {}) ?? {}}
-                        onChange={(next) => handleDraftChange(tab.key, next)}
-                        mergedModelServices={mergedModelServices as Record<string, unknown>}
-                        mergedAdapters={mergedAdapters as Record<string, unknown>}
-                        selectedModelService={selectedModelService}
-                        t={t}
-                        headerExtra={
-                          <Space size={12}>
-                            <ConfigSourceSwitch
-                              value={sourceKey}
-                              onChange={setSourceKey}
-                              options={[
-                                {
-                                  value: 'project',
-                                  icon: 'folder',
-                                  label: configPresent?.project === true
-                                    ? t('config.sources.project')
-                                    : t('config.sources.projectMissing')
-                                },
-                                {
-                                  value: 'user',
-                                  icon: 'person',
-                                  label: configPresent?.user === true
-                                    ? t('config.sources.user')
-                                    : t('config.sources.userMissing')
-                                }
-                              ]}
-                            />
-                          </Space>
-                        }
-                      />
-                    )}
-                  </div>
-                )
-              }
-            })}
-          />
-        </div>
+        isCompactView
+          ? (
+            <div className='config-view__compact-shell'>
+              <div className='config-view__compact-controls'>
+                <Select
+                  value={activeTabKey}
+                  onChange={setActiveTabKey}
+                  options={compactTabOptions}
+                  className='config-view__compact-select'
+                  popupMatchSelectWidth={false}
+                />
+                {activeTab != null && configTabKeys.has(activeTab.key) && (
+                  <ConfigSourceSwitch
+                    value={sourceKey}
+                    onChange={setSourceKey}
+                    options={[
+                      {
+                        value: 'project',
+                        icon: 'folder',
+                        label: configPresent?.project === true
+                          ? t('config.sources.project')
+                          : t('config.sources.projectMissing')
+                      },
+                      {
+                        value: 'user',
+                        icon: 'person',
+                        label: configPresent?.user === true
+                          ? t('config.sources.user')
+                          : t('config.sources.userMissing')
+                      }
+                    ]}
+                  />
+                )}
+              </div>
+              <div className='config-view__compact-panel'>
+                {activeTab != null ? renderTabContent(activeTab) : null}
+              </div>
+            </div>
+          )
+          : (
+            <div className='config-view__tabs-wrap'>
+              <Tabs
+                tabPosition='left'
+                tabBarGutter={4}
+                indicator={{ size: 0 }}
+                className='config-view__tabs'
+                activeKey={activeTabKey}
+                onChange={(key) => {
+                  if (key !== 'group-config' && key !== 'group-app') {
+                    setActiveTabKey(key)
+                  }
+                }}
+                items={tabs.map((tab) => {
+                  if (tab.type === 'group') {
+                    return {
+                      key: tab.key,
+                      label: <span className='config-view__group-label'>{tab.label}</span>,
+                      disabled: true,
+                      children: <div />
+                    }
+                  }
+                  return {
+                    key: tab.key,
+                    label: (
+                      <span className='config-view__tab-label'>
+                        <span className='material-symbols-rounded config-view__tab-icon'>{tab.icon}</span>
+                        <span className='config-view__tab-text'>{tab.label}</span>
+                      </span>
+                    ),
+                    children: renderTabContent(tab)
+                  }
+                })}
+              />
+            </div>
+          )
       )}
-    </div>
+    </PageShell>
   )
 }

package/src/components/MarkdownContent.tsx

@@ -16,6 +16,13 @@ export function MarkdownContent({
           pre({ children }) {
             return <>{children}</>
           },
+          table({ children, ...props }: any) {
+            return (
+              <div className='markdown-table-wrapper'>
+                <table {...props}>{children}</table>
+              </div>
+            )
+          },
           code({ inline, className, children, ...props }: any) {
             const langClass = typeof className === 'string' ? className : ''
             const match = /language-(\w+)/.exec(langClass)