@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/NewSessionGuide.scss

@@ -1,6 +1,7 @@
 .new-session-guide {
   width: 100%;
   max-width: 1100px;
+  min-width: 0;
 }
 
 .new-session-guide__announcements {
@@ -117,7 +118,10 @@
   flex-direction: column;
   gap: 12px;
   height: 160px;
-  overflow: scroll;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .new-session-guide__list {
@@ -201,8 +205,142 @@
   color: var(--sub-text-color);
 }
 
+.new-session-guide__more {
+  font-size: 11px;
+  color: var(--sub-text-color);
+  line-height: 1.4;
+}
+
+.new-session-guide__compact-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--tag-bg);
+  overflow: hidden;
+}
+
+.new-session-guide__compact-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--border-color);
+  }
+}
+
+.new-session-guide__compact-row-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.new-session-guide__compact-row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.new-session-guide__compact-primary-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.new-session-guide__compact-primary-desc {
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--sub-text-color);
+  overflow-wrap: anywhere;
+}
+
+.new-session-guide__compact-help-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--sub-text-color);
+
+  > span:last-child {
+    overflow-wrap: anywhere;
+  }
+}
+
+.new-session-guide__compact-inline-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+
+  .new-session-guide__empty-desc {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 @media (max-width: 1100px) {
   .new-session-guide__grid {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 960px) {
+  .new-session-guide--compact {
+    max-width: none;
+  }
+
+  .new-session-guide--compact .new-session-guide__announcements {
+    margin-bottom: 12px;
+    padding: 10px 12px;
+    border-radius: 8px;
+  }
+
+  .new-session-guide--compact .new-session-guide__grid {
+    gap: 12px;
+  }
+
+  .new-session-guide--compact .new-session-guide__compact-inline-actions {
+    align-items: flex-start;
+  }
+
+  .new-session-guide--compact
+    .new-session-guide__compact-inline-actions
+    .ant-btn {
+    flex-shrink: 0;
+  }
+
+  .new-session-guide--compact .new-session-guide__compact-row {
+    gap: 6px;
+    padding: 10px 12px;
+  }
+
+  .new-session-guide--compact .new-session-guide__compact-primary-desc {
+    display: none;
+  }
+
+  .new-session-guide--compact .new-session-guide__compact-help-item {
+    line-height: 1.35;
+  }
+
+  .new-session-guide--compact .new-session-guide__compact-primary-desc,
+  .new-session-guide--compact
+    .new-session-guide__compact-help-item
+    > span:last-child,
+  .new-session-guide--compact .new-session-guide__announcements-item > span {
+    overflow-wrap: anywhere;
+  }
+}

package/src/components/chat/NewSessionGuide.tsx

@@ -1,16 +1,20 @@
 import './NewSessionGuide.scss'
 
-import { App, Button } from 'antd'
+import { App } from 'antd'
 import { useAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import type { EntitySummary, SpecSummary } from '#~/api.js'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { showAnnouncementsAtom } from '#~/store/index.js'
+import { NewSessionGuideCompactPanel } from './NewSessionGuideCompactPanel'
+import { NewSessionGuideGrid } from './NewSessionGuideGrid'
 
 export function NewSessionGuide() {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const { isCompactLayout } = useResponsiveLayout()
   const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
 
   const { data: specsRes } = useSWR<{ specs: SpecSummary[] }>('/api/ai/specs')
@@ -39,6 +43,19 @@ export function NewSessionGuide() {
     t('chat.newSessionGuide.help.item2'),
     t('chat.newSessionGuide.help.item3')
   ]
+  const visibleAnnouncements = isCompactLayout ? announcements.slice(0, 1) : announcements
+  const visibleSpecs = isCompactLayout ? alwaysSpecs.slice(0, 1) : alwaysSpecs
+  const visibleEntities = isCompactLayout ? entities.slice(0, 1) : entities
+  const visibleHelpItems = isCompactLayout ? helpItems.slice(0, 1) : helpItems
+  const hiddenAnnouncementCount = Math.max(announcements.length - visibleAnnouncements.length, 0)
+  const hiddenSpecCount = Math.max(alwaysSpecs.length - visibleSpecs.length, 0)
+  const hiddenEntityCount = Math.max(entities.length - visibleEntities.length, 0)
+  const hiddenHelpCount = Math.max(helpItems.length - visibleHelpItems.length, 0)
+
+  const renderMoreCount = (count: number) =>
+    count > 0
+      ? <div className='new-session-guide__more'>{t('chat.newSessionGuide.moreCount', { count })}</div>
+      : null
 
   const handleCreateSpec = () => {
     message.info(t('chat.newSessionGuide.specs.createToast'))
@@ -49,7 +66,7 @@ export function NewSessionGuide() {
   }
 
   return (
-    <div className='new-session-guide'>
+    <div className={`new-session-guide ${isCompactLayout ? 'new-session-guide--compact' : ''}`}>
       {showAnnouncements && announcements.length > 0 && (
         <div className='new-session-guide__announcements'>
           <div className='new-session-guide__announcements-header'>
@@ -66,112 +83,52 @@ export function NewSessionGuide() {
             </button>
           </div>
           <div className='new-session-guide__announcements-list'>
-            {announcements.map((item, index) => (
+            {visibleAnnouncements.map((item, index) => (
               <div key={`${item}-${index}`} className='new-session-guide__announcements-item'>
                 <span>{item}</span>
               </div>
             ))}
+            {renderMoreCount(hiddenAnnouncementCount)}
           </div>
         </div>
       )}
-      <div className='new-session-guide__grid'>
-        <div className='new-session-guide__card'>
-          <div className='new-session-guide__header'>
-            <div className='new-session-guide__title'>
-              <span className='material-symbols-rounded new-session-guide__title-icon'>account_tree</span>
-              <span>{t('chat.newSessionGuide.specs.title')}</span>
-            </div>
-            <div className='new-session-guide__count'>{alwaysSpecs.length}</div>
-          </div>
-          <div className='new-session-guide__body'>
-            {!isSpecsReady && (
-              <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
-            )}
-            {isSpecsReady && alwaysSpecs.length > 0 && (
-              <div className='new-session-guide__list'>
-                {alwaysSpecs.map((spec) => (
-                  <div key={spec.id} className='new-session-guide__item'>
-                    <div className='new-session-guide__item-title'>
-                      <span>{spec.name}</span>
-                    </div>
-                    <div className='new-session-guide__item-desc'>{spec.description}</div>
-                    {spec.params.length > 0 && (
-                      <div className='new-session-guide__meta'>
-                        {t('chat.newSessionGuide.specs.params', { count: spec.params.length })}
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-            {isSpecsReady && alwaysSpecs.length === 0 && (
-              <div className='new-session-guide__empty'>
-                <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.specs.empty')}</div>
-                <Button type='primary' size='small' onClick={handleCreateSpec}>
-                  {t('chat.newSessionGuide.specs.create')}
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className='new-session-guide__card'>
-          <div className='new-session-guide__header'>
-            <div className='new-session-guide__title'>
-              <span className='material-symbols-rounded new-session-guide__title-icon'>group_work</span>
-              <span>{t('chat.newSessionGuide.entities.title')}</span>
-            </div>
-            <div className='new-session-guide__count'>{entities.length}</div>
-          </div>
-          <div className='new-session-guide__body'>
-            {!isEntitiesReady && (
-              <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
-            )}
-            {isEntitiesReady && entities.length > 0 && (
-              <div className='new-session-guide__list'>
-                {entities.map((entity) => (
-                  <div key={entity.id} className='new-session-guide__item'>
-                    <div className='new-session-guide__item-title'>
-                      <span>{entity.name}</span>
-                    </div>
-                    <div className='new-session-guide__item-desc'>{entity.description}</div>
-                  </div>
-                ))}
-              </div>
-            )}
-            {isEntitiesReady && entities.length === 0 && (
-              <div className='new-session-guide__empty'>
-                <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.entities.empty')}</div>
-                <Button type='primary' size='small' onClick={handleCreateEntity}>
-                  {t('chat.newSessionGuide.entities.create')}
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
 
-        <div className='new-session-guide__card'>
-          <div className='new-session-guide__header'>
-            <div className='new-session-guide__title'>
-              <span className='material-symbols-rounded new-session-guide__title-icon'>tips_and_updates</span>
-              <span>{t('chat.newSessionGuide.help.title')}</span>
-            </div>
-          </div>
-          <div className='new-session-guide__body'>
-            <div className='new-session-guide__help'>
-              {helpItems.map(item => (
-                <div key={item} className='new-session-guide__help-item'>
-                  <span className='material-symbols-rounded new-session-guide__help-icon'>check_circle</span>
-                  <span>{item}</span>
-                </div>
-              ))}
-            </div>
-            <div className='new-session-guide__help-footer'>
-              {t('chat.newSessionGuide.help.footer')}
-            </div>
-          </div>
-        </div>
-      </div>
+      {isCompactLayout
+        ? (
+          <NewSessionGuideCompactPanel
+            alwaysSpecs={alwaysSpecs}
+            entities={entities}
+            helpItems={helpItems}
+            hiddenEntityCount={hiddenEntityCount}
+            hiddenHelpCount={hiddenHelpCount}
+            hiddenSpecCount={hiddenSpecCount}
+            isEntitiesReady={isEntitiesReady}
+            isSpecsReady={isSpecsReady}
+            onCreateEntity={handleCreateEntity}
+            onCreateSpec={handleCreateSpec}
+            renderMoreCount={renderMoreCount}
+            visibleEntities={visibleEntities}
+            visibleHelpItems={visibleHelpItems}
+            visibleSpecs={visibleSpecs}
+          />
+        )
+        : (
+          <NewSessionGuideGrid
+            alwaysSpecs={alwaysSpecs}
+            entities={entities}
+            hiddenEntityCount={hiddenEntityCount}
+            hiddenHelpCount={hiddenHelpCount}
+            hiddenSpecCount={hiddenSpecCount}
+            isEntitiesReady={isEntitiesReady}
+            isSpecsReady={isSpecsReady}
+            onCreateEntity={handleCreateEntity}
+            onCreateSpec={handleCreateSpec}
+            renderMoreCount={renderMoreCount}
+            visibleEntities={visibleEntities}
+            visibleHelpItems={visibleHelpItems}
+            visibleSpecs={visibleSpecs}
+          />
+        )}
     </div>
   )
 }

package/src/components/chat/NewSessionGuideCompactPanel.tsx

@@ -0,0 +1,130 @@
+import { Button } from 'antd'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { EntitySummary, SpecSummary } from '#~/api.js'
+
+export function NewSessionGuideCompactPanel({
+  alwaysSpecs,
+  entities,
+  helpItems,
+  hiddenEntityCount,
+  hiddenHelpCount,
+  hiddenSpecCount,
+  isEntitiesReady,
+  isSpecsReady,
+  onCreateEntity,
+  onCreateSpec,
+  renderMoreCount,
+  visibleEntities,
+  visibleHelpItems,
+  visibleSpecs
+}: {
+  alwaysSpecs: SpecSummary[]
+  entities: EntitySummary[]
+  helpItems: string[]
+  hiddenEntityCount: number
+  hiddenHelpCount: number
+  hiddenSpecCount: number
+  isEntitiesReady: boolean
+  isSpecsReady: boolean
+  onCreateEntity: () => void
+  onCreateSpec: () => void
+  renderMoreCount: (count: number) => ReactNode
+  visibleEntities: EntitySummary[]
+  visibleHelpItems: string[]
+  visibleSpecs: SpecSummary[]
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className='new-session-guide__compact-panel'>
+      <div className='new-session-guide__compact-row'>
+        <div className='new-session-guide__compact-row-header'>
+          <div className='new-session-guide__title'>
+            <span className='material-symbols-rounded new-session-guide__title-icon'>account_tree</span>
+            <span>{t('chat.newSessionGuide.specs.title')}</span>
+          </div>
+          <div className='new-session-guide__count'>{alwaysSpecs.length}</div>
+        </div>
+
+        {!isSpecsReady && (
+          <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
+        )}
+
+        {isSpecsReady && alwaysSpecs.length > 0 && visibleSpecs[0] != null && (
+          <div className='new-session-guide__compact-row-main'>
+            <div className='new-session-guide__compact-primary-title'>{visibleSpecs[0].name}</div>
+            <div className='new-session-guide__compact-primary-desc'>{visibleSpecs[0].description}</div>
+            {visibleSpecs[0].params.length > 0 && (
+              <div className='new-session-guide__meta'>
+                {t('chat.newSessionGuide.specs.params', { count: visibleSpecs[0].params.length })}
+              </div>
+            )}
+            {renderMoreCount(hiddenSpecCount)}
+          </div>
+        )}
+
+        {isSpecsReady && alwaysSpecs.length === 0 && (
+          <div className='new-session-guide__compact-inline-actions'>
+            <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.specs.empty')}</div>
+            <Button type='primary' size='small' onClick={onCreateSpec}>
+              {t('chat.newSessionGuide.specs.create')}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <div className='new-session-guide__compact-row'>
+        <div className='new-session-guide__compact-row-header'>
+          <div className='new-session-guide__title'>
+            <span className='material-symbols-rounded new-session-guide__title-icon'>group_work</span>
+            <span>{t('chat.newSessionGuide.entities.title')}</span>
+          </div>
+          <div className='new-session-guide__count'>{entities.length}</div>
+        </div>
+
+        {!isEntitiesReady && (
+          <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
+        )}
+
+        {isEntitiesReady && entities.length > 0 && visibleEntities[0] != null && (
+          <div className='new-session-guide__compact-row-main'>
+            <div className='new-session-guide__compact-primary-title'>{visibleEntities[0].name}</div>
+            <div className='new-session-guide__compact-primary-desc'>{visibleEntities[0].description}</div>
+            {renderMoreCount(hiddenEntityCount)}
+          </div>
+        )}
+
+        {isEntitiesReady && entities.length === 0 && (
+          <div className='new-session-guide__compact-inline-actions'>
+            <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.entities.empty')}</div>
+            <Button type='primary' size='small' onClick={onCreateEntity}>
+              {t('chat.newSessionGuide.entities.create')}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <div className='new-session-guide__compact-row'>
+        <div className='new-session-guide__compact-row-header'>
+          <div className='new-session-guide__title'>
+            <span className='material-symbols-rounded new-session-guide__title-icon'>tips_and_updates</span>
+            <span>{t('chat.newSessionGuide.help.title')}</span>
+          </div>
+          <div className='new-session-guide__count'>{helpItems.length}</div>
+        </div>
+
+        <div className='new-session-guide__compact-row-main'>
+          {visibleHelpItems[0] != null && (
+            <div className='new-session-guide__compact-help-item'>
+              <span className='material-symbols-rounded new-session-guide__help-icon'>check_circle</span>
+              <span>{visibleHelpItems[0]}</span>
+            </div>
+          )}
+          {renderMoreCount(hiddenHelpCount)}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/NewSessionGuideGrid.tsx

@@ -0,0 +1,141 @@
+import { Button } from 'antd'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { EntitySummary, SpecSummary } from '#~/api.js'
+
+export function NewSessionGuideGrid({
+  alwaysSpecs,
+  entities,
+  hiddenEntityCount,
+  hiddenHelpCount,
+  hiddenSpecCount,
+  isEntitiesReady,
+  isSpecsReady,
+  onCreateEntity,
+  onCreateSpec,
+  renderMoreCount,
+  visibleEntities,
+  visibleHelpItems,
+  visibleSpecs
+}: {
+  alwaysSpecs: SpecSummary[]
+  entities: EntitySummary[]
+  hiddenEntityCount: number
+  hiddenHelpCount: number
+  hiddenSpecCount: number
+  isEntitiesReady: boolean
+  isSpecsReady: boolean
+  onCreateEntity: () => void
+  onCreateSpec: () => void
+  renderMoreCount: (count: number) => ReactNode
+  visibleEntities: EntitySummary[]
+  visibleHelpItems: string[]
+  visibleSpecs: SpecSummary[]
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className='new-session-guide__grid'>
+      <div className='new-session-guide__card'>
+        <div className='new-session-guide__header'>
+          <div className='new-session-guide__title'>
+            <span className='material-symbols-rounded new-session-guide__title-icon'>account_tree</span>
+            <span>{t('chat.newSessionGuide.specs.title')}</span>
+          </div>
+          <div className='new-session-guide__count'>{alwaysSpecs.length}</div>
+        </div>
+        <div className='new-session-guide__body'>
+          {!isSpecsReady && (
+            <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
+          )}
+          {isSpecsReady && alwaysSpecs.length > 0 && (
+            <div className='new-session-guide__list'>
+              {visibleSpecs.map((spec) => (
+                <div key={spec.id} className='new-session-guide__item'>
+                  <div className='new-session-guide__item-title'>
+                    <span>{spec.name}</span>
+                  </div>
+                  <div className='new-session-guide__item-desc'>{spec.description}</div>
+                  {spec.params.length > 0 && (
+                    <div className='new-session-guide__meta'>
+                      {t('chat.newSessionGuide.specs.params', { count: spec.params.length })}
+                    </div>
+                  )}
+                </div>
+              ))}
+              {renderMoreCount(hiddenSpecCount)}
+            </div>
+          )}
+          {isSpecsReady && alwaysSpecs.length === 0 && (
+            <div className='new-session-guide__empty'>
+              <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.specs.empty')}</div>
+              <Button type='primary' size='small' onClick={onCreateSpec}>
+                {t('chat.newSessionGuide.specs.create')}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className='new-session-guide__card'>
+        <div className='new-session-guide__header'>
+          <div className='new-session-guide__title'>
+            <span className='material-symbols-rounded new-session-guide__title-icon'>group_work</span>
+            <span>{t('chat.newSessionGuide.entities.title')}</span>
+          </div>
+          <div className='new-session-guide__count'>{entities.length}</div>
+        </div>
+        <div className='new-session-guide__body'>
+          {!isEntitiesReady && (
+            <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
+          )}
+          {isEntitiesReady && entities.length > 0 && (
+            <div className='new-session-guide__list'>
+              {visibleEntities.map((entity) => (
+                <div key={entity.id} className='new-session-guide__item'>
+                  <div className='new-session-guide__item-title'>
+                    <span>{entity.name}</span>
+                  </div>
+                  <div className='new-session-guide__item-desc'>{entity.description}</div>
+                </div>
+              ))}
+              {renderMoreCount(hiddenEntityCount)}
+            </div>
+          )}
+          {isEntitiesReady && entities.length === 0 && (
+            <div className='new-session-guide__empty'>
+              <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.entities.empty')}</div>
+              <Button type='primary' size='small' onClick={onCreateEntity}>
+                {t('chat.newSessionGuide.entities.create')}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className='new-session-guide__card'>
+        <div className='new-session-guide__header'>
+          <div className='new-session-guide__title'>
+            <span className='material-symbols-rounded new-session-guide__title-icon'>tips_and_updates</span>
+            <span>{t('chat.newSessionGuide.help.title')}</span>
+          </div>
+        </div>
+        <div className='new-session-guide__body'>
+          <div className='new-session-guide__help'>
+            {visibleHelpItems.map(item => (
+              <div key={item} className='new-session-guide__help-item'>
+                <span className='material-symbols-rounded new-session-guide__help-icon'>check_circle</span>
+                <span>{item}</span>
+              </div>
+            ))}
+          </div>
+          {renderMoreCount(hiddenHelpCount)}
+          <div className='new-session-guide__help-footer'>
+            {t('chat.newSessionGuide.help.footer')}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}