@vibe-forge/client 0.9.0 → 0.10.1

package/src/components/chat/session-metadata.ts

@@ -0,0 +1,55 @@
+import type { SessionInfo } from '@vibe-forge/types'
+
+export type SessionAssetDiagnostic = NonNullable<Extract<SessionInfo, { type: 'init' }>['assetDiagnostics']>[number]
+export type SessionSelectionWarning = NonNullable<Extract<SessionInfo, { type: 'init' }>['selectionWarnings']>[number]
+
+export interface SessionToolGroup {
+  key: 'chrome-devtools' | 'system'
+  labelKey: 'chat.toolGroupChromeDevtools' | 'chat.toolGroupSystem'
+  icon: string
+  tools: string[]
+}
+
+export const formatToolLabel = (tool: string) => {
+  const parts = tool.split('__')
+  return parts[parts.length - 1] || tool
+}
+
+export const getSessionToolGroups = (sessionInfo: SessionInfo | null): SessionToolGroup[] => {
+  if (sessionInfo == null || sessionInfo.type !== 'init') {
+    return []
+  }
+
+  return [
+    {
+      key: 'chrome-devtools',
+      labelKey: 'chat.toolGroupChromeDevtools',
+      icon: 'web_traffic',
+      tools: sessionInfo.tools.filter((tool: string) => tool.startsWith('mcp__ChromeDevtools__'))
+    },
+    {
+      key: 'system',
+      labelKey: 'chat.toolGroupSystem',
+      icon: 'memory',
+      tools: sessionInfo.tools.filter((tool: string) => !tool.startsWith('mcp__ChromeDevtools__'))
+    }
+  ].filter((group): group is SessionToolGroup => group.tools.length > 0)
+}
+
+export const getSessionAssetWarnings = (sessionInfo: SessionInfo | null): SessionAssetDiagnostic[] => {
+  if (sessionInfo == null || sessionInfo.type !== 'init') {
+    return []
+  }
+
+  return (sessionInfo.assetDiagnostics ?? []).filter((diagnostic: SessionAssetDiagnostic) =>
+    diagnostic.status === 'skipped'
+  )
+}
+
+export const getSessionSelectionWarnings = (sessionInfo: SessionInfo | null): SessionSelectionWarning[] => {
+  if (sessionInfo == null || sessionInfo.type !== 'init') {
+    return []
+  }
+
+  return sessionInfo.selectionWarnings ?? []
+}

package/src/components/chat/terminal/@hooks/use-terminal-instance.ts

@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { FitAddon } from '@xterm/addon-fit'
+import { Terminal } from '@xterm/xterm'
+
+const DEFAULT_COLS = 120
+const DEFAULT_ROWS = 32
+
+const readCssVar = (styles: CSSStyleDeclaration, name: string, fallback: string) => {
+  const value = styles.getPropertyValue(name).trim()
+  return value === '' ? fallback : value
+}
+
+const buildTerminalTheme = () => {
+  const styles = window.getComputedStyle(document.documentElement)
+  const isDark = document.documentElement.classList.contains('dark')
+  const background = readCssVar(styles, '--bg-color', isDark ? '#141414' : '#ffffff')
+  const foreground = readCssVar(styles, '--text-color', isDark ? '#ffffff' : '#000000')
+  const subForeground = readCssVar(styles, '--sub-text-color', isDark ? '#8c8c8c' : '#1b1b1b')
+  const primaryColor = readCssVar(styles, '--primary-color', isDark ? '#3b82f6' : '#2563eb')
+  const primarySoftBg = readCssVar(styles, '--primary-soft-bg', isDark ? '#111b26' : '#eff6ff')
+
+  return {
+    background,
+    foreground,
+    cursor: primaryColor,
+    cursorAccent: background,
+    selectionBackground: primarySoftBg,
+    black: isDark ? '#0f172a' : '#111827',
+    red: isDark ? '#ef4444' : '#dc2626',
+    green: isDark ? '#10b981' : '#047857',
+    yellow: isDark ? '#f59e0b' : '#b45309',
+    blue: isDark ? '#60a5fa' : '#2563eb',
+    magenta: isDark ? '#f472b6' : '#c026d3',
+    cyan: isDark ? '#22d3ee' : '#0f766e',
+    white: isDark ? '#e2e8f0' : subForeground,
+    brightBlack: isDark ? '#475569' : '#4b5563',
+    brightRed: isDark ? '#f87171' : '#ef4444',
+    brightGreen: isDark ? '#34d399' : '#10b981',
+    brightYellow: isDark ? '#fbbf24' : '#f59e0b',
+    brightBlue: isDark ? '#93c5fd' : '#3b82f6',
+    brightMagenta: isDark ? '#f9a8d4' : '#d946ef',
+    brightCyan: isDark ? '#67e8f9' : '#14b8a6',
+    brightWhite: foreground
+  }
+}
+
+export function useTerminalInstance({
+  onInput,
+  onResize
+}: {
+  onInput: (data: string) => void
+  onResize: (cols: number, rows: number) => void
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const terminalRef = useRef<Terminal | null>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
+  const onInputRef = useRef(onInput)
+  const onResizeRef = useRef(onResize)
+  const [terminalMounted, setTerminalMounted] = useState(false)
+  const [lastMeasuredSize, setLastMeasuredSize] = useState({
+    cols: DEFAULT_COLS,
+    rows: DEFAULT_ROWS
+  })
+
+  onInputRef.current = onInput
+  onResizeRef.current = onResize
+
+  const fitTerminal = useCallback(() => {
+    const terminal = terminalRef.current
+    const fitAddon = fitAddonRef.current
+    if (terminal == null || fitAddon == null) {
+      return
+    }
+
+    fitAddon.fit()
+    if (terminal.cols <= 0 || terminal.rows <= 0) {
+      return
+    }
+
+    setLastMeasuredSize({
+      cols: terminal.cols,
+      rows: terminal.rows
+    })
+    onResizeRef.current(terminal.cols, terminal.rows)
+  }, [])
+
+  const focusTerminal = useCallback(() => {
+    terminalRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (container == null) {
+      return
+    }
+
+    const terminal = new Terminal({
+      cursorBlink: true,
+      fontSize: 13,
+      fontFamily: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace',
+      scrollback: 5000,
+      theme: buildTerminalTheme()
+    })
+    const fitAddon = new FitAddon()
+
+    terminal.loadAddon(fitAddon)
+    terminal.open(container)
+    terminal.focus()
+
+    terminalRef.current = terminal
+    fitAddonRef.current = fitAddon
+    setTerminalMounted(true)
+    fitTerminal()
+
+    const dataDisposable = terminal.onData((data) => {
+      onInputRef.current(data)
+    })
+
+    const resizeObserver = new ResizeObserver(() => {
+      fitTerminal()
+    })
+    resizeObserver.observe(container)
+
+    const themeObserver = new MutationObserver(() => {
+      terminal.options.theme = buildTerminalTheme()
+    })
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style']
+    })
+
+    return () => {
+      themeObserver.disconnect()
+      resizeObserver.disconnect()
+      dataDisposable.dispose()
+      fitAddon.dispose()
+      terminal.dispose()
+      fitAddonRef.current = null
+      terminalRef.current = null
+    }
+  }, [fitTerminal])
+
+  return {
+    containerRef,
+    fitTerminal,
+    focusTerminal,
+    lastMeasuredSize,
+    terminalMounted,
+    terminalRef
+  }
+}

package/src/components/chat/terminal/@hooks/use-terminal-session.ts

@@ -0,0 +1,196 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { TerminalSessionCommand, TerminalSessionEvent } from '@vibe-forge/types'
+
+import { createSocket } from '#~/ws.js'
+
+const isSocketOpen = (socket: WebSocket | null): socket is WebSocket => {
+  return socket != null && socket.readyState === WebSocket.OPEN
+}
+
+export function useTerminalSession({
+  sessionId,
+  active,
+  initialCols,
+  initialRows,
+  onReady,
+  onOutput,
+  onExit
+}: {
+  sessionId: string
+  active: boolean
+  initialCols: number
+  initialRows: number
+  onReady: (event: Extract<TerminalSessionEvent, { type: 'terminal_ready' }>) => void
+  onOutput: (data: string) => void
+  onExit?: (event: Extract<TerminalSessionEvent, { type: 'terminal_exit' }>) => void
+}) {
+  const { t } = useTranslation()
+  const socketRef = useRef<WebSocket | null>(null)
+  const expectedCloseRef = useRef(false)
+  const fatalErrorRef = useRef(false)
+  const reconnectTimerRef = useRef<number | null>(null)
+  const restartRequestedRef = useRef(false)
+  const latestSizeRef = useRef({ cols: initialCols, rows: initialRows })
+  const pendingResizeRef = useRef<{ cols: number; rows: number } | null>(null)
+  const onReadyRef = useRef(onReady)
+  const onOutputRef = useRef(onOutput)
+  const onExitRef = useRef(onExit)
+  const [connectVersion, setConnectVersion] = useState(0)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [lastExit, setLastExit] = useState<{ exitCode: number | null; signal: number | null } | null>(null)
+
+  onReadyRef.current = onReady
+  onOutputRef.current = onOutput
+  onExitRef.current = onExit
+  latestSizeRef.current = { cols: initialCols, rows: initialRows }
+
+  const sendCommand = useCallback((command: TerminalSessionCommand) => {
+    const socket = socketRef.current
+    if (!isSocketOpen(socket)) {
+      return false
+    }
+
+    socket.send(JSON.stringify(command))
+    return true
+  }, [])
+
+  const scheduleReconnect = useCallback(() => {
+    if (reconnectTimerRef.current != null) {
+      window.clearTimeout(reconnectTimerRef.current)
+    }
+
+    reconnectTimerRef.current = window.setTimeout(() => {
+      reconnectTimerRef.current = null
+      setConnectVersion(current => current + 1)
+    }, 800)
+  }, [])
+
+  const sendInput = useCallback((data: string) => {
+    return sendCommand({
+      type: 'terminal_input',
+      data
+    })
+  }, [sendCommand])
+
+  const sendResizeCommand = useCallback((cols: number, rows: number) => {
+    return sendCommand({
+      type: 'terminal_resize',
+      cols,
+      rows
+    })
+  }, [sendCommand])
+
+  const flushPendingResize = useCallback(() => {
+    const pendingResize = pendingResizeRef.current
+    if (pendingResize == null) {
+      return false
+    }
+
+    const sent = sendResizeCommand(pendingResize.cols, pendingResize.rows)
+    if (sent) {
+      pendingResizeRef.current = null
+    }
+    return sent
+  }, [sendResizeCommand])
+
+  const resizeTerminal = useCallback((cols: number, rows: number) => {
+    latestSizeRef.current = { cols, rows }
+    pendingResizeRef.current = { cols, rows }
+    return flushPendingResize()
+  }, [flushPendingResize])
+
+  useEffect(() => {
+    if (!active) {
+      return
+    }
+
+    expectedCloseRef.current = false
+    fatalErrorRef.current = false
+    restartRequestedRef.current = false
+    setErrorMessage(null)
+    pendingResizeRef.current = latestSizeRef.current
+
+    const connectSize = latestSizeRef.current
+
+    const socket = createSocket<TerminalSessionEvent>({
+      onOpen: () => {
+        flushPendingResize()
+      },
+      onMessage: (event) => {
+        switch (event.type) {
+          case 'terminal_ready':
+            setErrorMessage(null)
+            if (event.info.status === 'exited') {
+              if (!restartRequestedRef.current) {
+                restartRequestedRef.current = true
+                const restartSize = latestSizeRef.current
+                socket.send(JSON.stringify(
+                  {
+                    type: 'terminal_restart',
+                    cols: restartSize.cols,
+                    rows: restartSize.rows
+                  } satisfies TerminalSessionCommand
+                ))
+              }
+              return
+            }
+
+            restartRequestedRef.current = false
+            setLastExit(null)
+            onReadyRef.current(event)
+            return
+          case 'terminal_output':
+            onOutputRef.current(event.data)
+            return
+          case 'terminal_exit':
+            setLastExit({
+              exitCode: event.exitCode,
+              signal: event.signal
+            })
+            onExitRef.current?.(event)
+            return
+          case 'terminal_error':
+            fatalErrorRef.current = event.fatal === true
+            setErrorMessage(event.message)
+        }
+      },
+      onError: () => {
+        setErrorMessage(t('chat.terminal.connectionError'))
+      },
+      onClose: () => {
+        socketRef.current = null
+        if (expectedCloseRef.current || fatalErrorRef.current) {
+          return
+        }
+
+        scheduleReconnect()
+      }
+    }, {
+      channel: 'terminal',
+      sessionId,
+      cols: String(connectSize.cols),
+      rows: String(connectSize.rows)
+    })
+
+    socketRef.current = socket
+
+    return () => {
+      expectedCloseRef.current = true
+      if (reconnectTimerRef.current != null) {
+        window.clearTimeout(reconnectTimerRef.current)
+        reconnectTimerRef.current = null
+      }
+      socket.close()
+      socketRef.current = null
+    }
+  }, [active, connectVersion, flushPendingResize, scheduleReconnect, sessionId, t])
+
+  return {
+    errorMessage,
+    lastExit,
+    resizeTerminal,
+    sendInput
+  }
+}

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

@@ -0,0 +1,62 @@
+.chat-terminal-view {
+  position: relative;
+
+  &__error {
+    position: absolute;
+    top: 36px;
+    right: 16px;
+    z-index: 3;
+    padding: 8px 10px;
+    border-radius: 10px;
+    border: 1px solid
+      color-mix(in srgb, var(--danger-color) 24%, var(--border-color));
+    background-color: color-mix(
+      in srgb,
+      var(--bg-color) 86%,
+      var(--danger-color) 14%
+    );
+    color: var(--danger-color);
+    font-size: 12px;
+  }
+
+  &__surface {
+    display: flex;
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background:
+      radial-gradient(
+        circle at top,
+        color-mix(in srgb, var(--primary-color) 12%, transparent),
+        transparent 52%
+      ),
+      linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--sub-bg-color) 78%, var(--bg-color)),
+      var(--bg-color)
+    );
+  }
+
+  &__terminal {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    cursor: text;
+
+    .xterm {
+      height: 100%;
+    }
+
+    .xterm-viewport {
+      background-color: var(--bg-color);
+    }
+  }
+
+  &__footer {
+    padding: 0;
+    font-size: 12px;
+    color: var(--sub-text-color);
+  }
+}

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

@@ -0,0 +1,114 @@
+import '@xterm/xterm/css/xterm.css'
+import './ChatTerminalView.scss'
+
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { DockPanel } from '#~/components/dock-panel/DockPanel'
+import { useTerminalInstance } from './@hooks/use-terminal-instance'
+import { useTerminalSession } from './@hooks/use-terminal-session'
+
+const TERMINAL_HEIGHT_STORAGE_KEY = 'chatTerminalHeight'
+const formatShellLabel = (shell: string | undefined) => shell?.split('/').filter(Boolean).at(-1) ?? 'shell'
+
+export function ChatTerminalView({
+  isOpen,
+  onClose,
+  sessionId
+}: {
+  isOpen: boolean
+  onClose: () => void
+  sessionId: string
+}) {
+  const { t } = useTranslation()
+  const inputHandlerRef = React.useRef<(data: string) => void>(() => undefined)
+  const resizeHandlerRef = React.useRef<(cols: number, rows: number) => void>(() => undefined)
+  const [shellLabel, setShellLabel] = useState('zsh')
+  const {
+    containerRef,
+    fitTerminal,
+    focusTerminal,
+    lastMeasuredSize,
+    terminalMounted,
+    terminalRef
+  } = useTerminalInstance({
+    onInput: (data: string) => inputHandlerRef.current(data),
+    onResize: (cols: number, rows: number) => resizeHandlerRef.current(cols, rows)
+  })
+
+  const {
+    errorMessage,
+    lastExit,
+    resizeTerminal,
+    sendInput
+  } = useTerminalSession({
+    sessionId,
+    active: terminalMounted,
+    initialCols: lastMeasuredSize.cols,
+    initialRows: lastMeasuredSize.rows,
+    onReady: useCallback((event) => {
+      const terminal = terminalRef.current
+      if (terminal == null) {
+        return
+      }
+
+      terminal.reset()
+      setShellLabel(formatShellLabel(event.info.shell))
+      if (event.scrollback != null && event.scrollback !== '') {
+        terminal.write(event.scrollback)
+      }
+      fitTerminal()
+    }, [fitTerminal, terminalRef]),
+    onOutput: useCallback((data) => {
+      terminalRef.current?.write(data)
+    }, [terminalRef])
+  })
+
+  inputHandlerRef.current = (data: string) => {
+    void sendInput(data)
+  }
+  resizeHandlerRef.current = (cols: number, rows: number) => {
+    void resizeTerminal(cols, rows)
+  }
+
+  const exitSummary = lastExit == null
+    ? null
+    : t('chat.terminal.exitSummary', {
+      code: lastExit.exitCode ?? 'null',
+      signal: lastExit.signal ?? 'null'
+    })
+
+  return (
+    <DockPanel
+      className='chat-terminal-view'
+      isOpen={isOpen}
+      title={t('chat.viewTerminal')}
+      meta={shellLabel}
+      closeLabel={t('common.close')}
+      resizeLabel={t('chat.terminal.resizePanel')}
+      storageKey={TERMINAL_HEIGHT_STORAGE_KEY}
+      onClose={onClose}
+      footer={exitSummary != null
+        ? (
+          <div className='chat-terminal-view__footer'>
+            {exitSummary}
+          </div>
+        )
+        : undefined}
+    >
+      {errorMessage != null && errorMessage !== '' && (
+        <div className='chat-terminal-view__error'>
+          {errorMessage}
+        </div>
+      )}
+
+      <div className='chat-terminal-view__surface'>
+        <div
+          ref={containerRef}
+          className='chat-terminal-view__terminal'
+          onClick={focusTerminal}
+        />
+      </div>
+    </DockPanel>
+  )
+}

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

@@ -1,5 +1,12 @@
 .tool-group-container {
   max-width: 100%;
+  scroll-margin-top: 72px;
+  transition: background-color .2s ease;
+
+  &.is-anchor-target {
+    background-color: rgba(59, 130, 246, .08);
+    border-radius: 12px;
+  }
 
   .tool-group-wrapper {
     margin: 0;