@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/terminal/ChatTerminalView.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DockPanel } from '#~/components/dock-panel/DockPanel'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useTerminalInstance } from './@hooks/use-terminal-instance'
 import { useTerminalSession } from './@hooks/use-terminal-session'
 
@@ -21,6 +22,7 @@ export function ChatTerminalView({
   sessionId: string
 }) {
   const { t } = useTranslation()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const inputHandlerRef = React.useRef<(data: string) => void>(() => undefined)
   const resizeHandlerRef = React.useRef<(cols: number, rows: number) => void>(() => undefined)
   const [shellLabel, setShellLabel] = useState('zsh')
@@ -77,11 +79,15 @@ export function ChatTerminalView({
       code: lastExit.exitCode ?? 'null',
       signal: lastExit.signal ?? 'null'
     })
+  const isCompactView = isCompactLayout || isTouchInteraction
 
   return (
     <DockPanel
+      allowResize={!isCompactView}
       className='chat-terminal-view'
+      defaultHeight={isCompactView ? 208 : undefined}
       isOpen={isOpen}
+      maxHeight={isCompactView ? 320 : 520}
       title={t('chat.viewTerminal')}
       meta={shellLabel}
       closeLabel={t('common.close')}

package/src/components/chat/tools/core/ToolCallBox.scss

@@ -210,6 +210,7 @@
     padding: 0;
     overflow: hidden;
     background-color: var(--bg-color);
+    min-width: 0;
 
     .tool-call-box.result & {
       background-color: var(--bg-color);
@@ -218,6 +219,7 @@
 
     .tool-content {
       padding: 0;
+      min-width: 0;
     }
 
     .code-block-wrapper {
@@ -230,22 +232,26 @@
       flex-direction: column;
       gap: 8px;
       padding: 2px 0;
+      min-width: 0;
     }
 
     .tool-result-text {
       font-size: 13px;
       color: var(--text-color);
+      min-width: 0;
     }
 
     .tool-result-text-content {
       white-space: pre-wrap;
       line-height: 1.6;
+      overflow-wrap: anywhere;
     }
 
     .tool-result-image-wrapper {
       display: flex;
       flex-direction: column;
       gap: 6px;
+      min-width: 0;
     }
 
     .tool-result-image {
@@ -679,3 +685,16 @@
     }
   }
 }
+
+@media (max-width: 960px) {
+  .tool-group {
+    .tool-call-header,
+    .tool-result-header {
+      min-width: 0;
+    }
+
+    .tool-call-box--inline .tool-call-body-shell.expanded {
+      padding-left: 12px;
+    }
+  }
+}

package/src/components/chat/tools/core/ToolGroup.scss

@@ -114,13 +114,20 @@
     .msg-footer {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
       gap: 8px;
+      min-width: 0;
       font-size: 11px;
       color: var(--sub-text-color, #9ca3af);
 
+      > * {
+        min-width: 0;
+      }
+
       .timestamp {
         user-select: none;
         cursor: pointer;
+        overflow-wrap: anywhere;
       }
     }
   }
@@ -130,6 +137,31 @@
   }
 }
 
+@media (max-width: 960px) {
+  .tool-group-container {
+    scroll-margin-top: 64px;
+
+    .tool-group-footer-wrapper {
+      margin-top: 2px;
+
+      .msg-footer {
+        gap: 6px;
+        font-size: 10px;
+      }
+    }
+
+    &.is-anchor-target {
+      border-radius: 8px;
+    }
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .tool-group-container .tool-group-footer-wrapper {
+    opacity: 1;
+  }
+}
+
 html.dark .tool-group-container .tool-group-wrapper.card-style {
   .tool-group-header {
     &:hover {

package/src/components/chat/tools/task/components/TaskToolCard.scss

@@ -59,6 +59,8 @@
   }
 
   &__main {
+    min-width: 0;
+
     > .code-block-wrapper {
       border-radius: 8px;
       overflow: hidden;
@@ -70,6 +72,8 @@
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 4px;
+    gap: 8px;
+    min-width: 0;
   }
 
   &__title {
@@ -77,7 +81,8 @@
     font-weight: 600;
     color: var(--text-color);
     flex: 1;
-    margin-right: 8px;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   &__session-id {
@@ -86,6 +91,10 @@
     opacity: .6;
     font-family: monospace;
     user-select: none;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 
@@ -95,6 +104,7 @@
     cursor: pointer;
     padding: 0;
     text-align: right;
+    min-width: 0;
 
     &:hover {
       color: var(--text-color);
@@ -125,3 +135,51 @@
     background: var(--bg-color);
   }
 }
+
+@media (max-width: 960px) {
+  .task-tool-card {
+    grid-template-columns: 18px minmax(0, 1fr);
+    gap: 8px;
+    padding: 8px;
+
+    &__left {
+      gap: 4px;
+    }
+
+    &__status-icon,
+    &__execution-icon {
+      font-size: 16px;
+    }
+
+    &__header {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 4px;
+    }
+
+    &__title {
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    &__session-link {
+      align-self: flex-start;
+      text-align: left;
+    }
+
+    &__session-id {
+      width: 100%;
+      font-size: 10px;
+    }
+
+    &__content {
+      font-size: 11px;
+      margin-bottom: 4px;
+    }
+
+    &__meta {
+      gap: 3px;
+      margin: 2px 0 4px;
+    }
+  }
+}

package/src/components/config/ConfigEditors.scss

@@ -8,12 +8,16 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: var(--subpage-tertiary-padding);
+  border: var(--subpage-tertiary-border);
+  border-radius: var(--subpage-tertiary-radius);
+  background: var(--subpage-tertiary-bg);
 }
 
 .config-view__complex-editor {
-  border-radius: 10px;
-  border: 1px solid var(--code-border);
-  background: var(--code-bg);
+  border-radius: var(--subpage-tertiary-radius);
+  border: var(--subpage-tertiary-border);
+  background: var(--subpage-tertiary-bg);
   color: var(--text-color);
   font-family:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
@@ -26,13 +30,14 @@
 }
 
 .config-view__icon-button {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: 6px;
 }
 
 .config-view__icon-button--compact {
@@ -44,6 +49,7 @@
 .config-view__icon-button--full {
   width: 100%;
   min-width: 100%;
+  height: 30px;
 }
 
 .config-view__array-add {
@@ -63,3 +69,11 @@
 .config-view__array-add-inputs .ant-input-affix-wrapper {
   flex: 1;
 }
+
+.config-view__array-item .ant-input,
+.config-view__array-item .ant-input-affix-wrapper,
+.config-view__array-add-inputs .ant-input,
+.config-view__array-add-inputs .ant-input-affix-wrapper {
+  border-radius: 6px !important;
+  min-height: 30px;
+}

package/src/components/config/ConfigFieldRow.scss

@@ -3,31 +3,28 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 12px 14px;
-  border-radius: 0;
-  border: 1px solid var(--border-color);
-  border-bottom: none;
-  background-color: var(--sub-bg-color);
+  padding: var(--subpage-tertiary-padding);
+  border-radius: var(--subpage-tertiary-radius);
+  border: var(--subpage-tertiary-border);
+  background-color: var(--subpage-tertiary-bg);
+  transition: border-color .2s ease, background-color .2s ease;
   &.config-view__collapse-group {
     padding: 0;
     gap: 0;
+    overflow: hidden;
     > .ant-collapse-item {
       width: 100%;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: none;
       .ant-collapse-header-text {
         flex-grow: 1;
       }
     }
   }
 }
-.config-view__field-row:first-child {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-.config-view__field-row:last-child {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  border-bottom: 1px solid var(--border-color);
+
+.config-view__field-row:hover {
+  border-color: var(--subpage-tertiary-hover-border);
+  background-color: var(--subpage-tertiary-hover-bg);
 }
 
 .config-view__field-row--stacked {
@@ -60,8 +57,9 @@
 }
 
 .config-view__field-title {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 500;
   color: var(--text-color);
   white-space: nowrap;
   overflow: hidden;
@@ -69,7 +67,7 @@
 }
 
 .config-view__field-desc {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--sub-text-color);
   white-space: nowrap;
   overflow: hidden;
@@ -87,6 +85,20 @@
   width: 100%;
 }
 
+.config-view__field-control .ant-btn,
+.config-view__field-control .ant-input,
+.config-view__field-control .ant-input-affix-wrapper,
+.config-view__field-control .ant-input-number,
+.config-view__field-control .ant-select-selector {
+  border-radius: 6px !important;
+}
+
+.config-view__field-control .ant-input,
+.config-view__field-control .ant-input-affix-wrapper,
+.config-view__field-control .ant-select-selector {
+  min-height: 30px;
+}
+
 .config-view__field-control .ant-input-textarea {
   width: 100%;
 }
@@ -95,3 +107,31 @@
   font-size: 16px;
   color: var(--sub-text-color);
 }
+
+@media (max-width: 960px) {
+  .config-view__field-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .config-view__field-meta {
+    align-items: flex-start;
+  }
+
+  .config-view__field-title,
+  .config-view__field-desc {
+    white-space: normal;
+  }
+
+  .config-view__field-control {
+    min-width: 0;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .config-view__field-control > * {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+}

package/src/components/config/ConfigSectionForm.scss

@@ -1,12 +1,13 @@
 .config-view__field-stack {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16px;
 }
 
 .config-view__field-list {
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
 .config-view__subsection {
@@ -26,6 +27,7 @@
 .config-view__subsection-body {
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
 .config-view__slider {
@@ -35,11 +37,15 @@
 .config-view__collapse-group {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0;
 }
 
 .config-view__collapse-group .ant-collapse-header {
-  padding: 0;
+  padding: 12px 14px !important;
+}
+
+.config-view__collapse-group .ant-collapse-content-box {
+  padding: 0 12px 12px !important;
 }
 
 .config-view__collapse-header {
@@ -74,7 +80,7 @@
 
 .config-view__multiline-input {
   width: 100%;
-  border-radius: 10px;
+  border-radius: 6px;
 }
 
 .config-view__option {

package/src/components/config/ConfigSectionPanel.tsx

@@ -21,7 +21,7 @@ export function ConfigSectionPanel({
   className
 }: {
   sectionKey: string
-  title: ReactNode
+  title?: ReactNode
   icon?: ReactNode
   fields?: FieldSpec[]
   value: unknown
@@ -34,19 +34,26 @@ export function ConfigSectionPanel({
   className?: string
 }) {
   const wrapClassName = ['config-view__editor-wrap', className].filter(Boolean).join(' ')
-  const hasHeader = title != null || icon != null || headerExtra != null
+  const hasHeading = title != null || icon != null
+  const hasHeader = hasHeading || headerExtra != null
+  const headerClassName = [
+    'config-view__section-header',
+    !hasHeading ? 'config-view__section-header--actions-only' : ''
+  ].filter(Boolean).join(' ')
   return (
     <div className={wrapClassName}>
       {hasHeader && (
-        <div className='config-view__section-header'>
-          <div className='config-view__section-title'>
-            {icon != null && (
-              <span className='material-symbols-rounded config-view__section-icon'>
-                {icon}
-              </span>
-            )}
-            <span>{title}</span>
-          </div>
+        <div className={headerClassName}>
+          {hasHeading && (
+            <div className='config-view__section-title'>
+              {icon != null && (
+                <span className='material-symbols-rounded config-view__section-icon'>
+                  {icon}
+                </span>
+              )}
+              <span>{title}</span>
+            </div>
+          )}
           {headerExtra}
         </div>
       )}

package/src/components/config/configSchema.ts

@@ -269,6 +269,7 @@ export const configSchema: Record<string, FieldSpec[]> = {
         { value: 'programmatic', label: 'config.options.conversation.programmatic' }
       ]
     },
+    { path: ['createSessionWorktree'], type: 'boolean', defaultValue: true, icon: 'account_tree' },
     { path: ['customInstructions'], type: 'multiline', defaultValue: '', icon: 'description' }
   ],
   models: [

package/src/components/config/record-editors/RecordEditors.scss

@@ -1,14 +1,23 @@
 .config-view__record-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .config-view__record-card {
-  border-radius: 12px;
+  padding: var(--subpage-tertiary-padding);
+  border: var(--subpage-tertiary-border);
+  border-radius: var(--subpage-tertiary-radius);
+  background: var(--subpage-tertiary-bg);
   display: flex;
   flex-direction: column;
   gap: 10px;
+  transition: border-color .2s ease, background-color .2s ease;
+}
+
+.config-view__record-card:hover {
+  border-color: var(--subpage-tertiary-hover-border);
+  background: var(--subpage-tertiary-hover-bg);
 }
 
 .config-view__record-title {
@@ -62,19 +71,27 @@
 .config-view__record-fields {
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
+  gap: 10px;
 }
 
 .config-view__record-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
 }
 
 .config-view__record-key {
   font-size: 12px;
   color: var(--sub-text-color);
-  min-width: 140px;
+  min-width: 132px;
+  padding-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .config-view__record-add {
@@ -88,21 +105,37 @@
   align-items: center;
   gap: 8px;
   flex: 1;
+  padding: 10px 12px;
+  border: 1px dashed var(--border-color);
+  border-radius: 8px;
+  background: var(--sub-bg-color);
 }
 
 .config-view__record-add-inputs .ant-input,
-.config-view__record-add-inputs .ant-input-affix-wrapper {
+.config-view__record-add-inputs .ant-input-affix-wrapper,
+.config-view__record-add-inputs .ant-select {
   flex: 1;
 }
 
+.config-view__record-add-inputs .ant-input,
+.config-view__record-add-inputs .ant-input-affix-wrapper,
+.config-view__record-add-inputs .ant-select-selector,
+.config-view__record-row .ant-input,
+.config-view__record-row .ant-input-affix-wrapper,
+.config-view__record-row .ant-select-selector {
+  border-radius: 6px !important;
+  min-height: 30px;
+}
+
 .config-view__icon-button {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: 6px;
 }
 
 .config-view__icon-button--compact {

package/src/components/dock-panel/DockPanel.scss

@@ -47,11 +47,15 @@
   min-height: 24px;
   margin: -12px -12px 0;
   padding: 12px 12px 0;
-  cursor: row-resize;
+  cursor: default;
   flex-shrink: 0;
   transition: opacity .18s ease;
 
-  &:hover {
+  &.is-resizable {
+    cursor: row-resize;
+  }
+
+  &.is-resizable:hover {
     opacity: .92;
   }
 }