@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/routes/ChatRoute.scss

@@ -1,8 +1,34 @@
-.chat-container {
+.chat-route-layout {
+  --dock-panel-fullscreen-inset-top: 40px;
+
   display: flex;
   flex-direction: column;
   flex: 1;
+  min-width: 0;
+  min-height: 0;
   height: 100%;
+  overflow: hidden;
+  background-color: var(--bg-color);
+  position: relative;
+}
+
+.chat-route-layout:has(.chat-header.is-compact) {
+  --dock-panel-fullscreen-inset-top: 54px;
+}
+
+.chat-route-layout__main {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  transition: padding-bottom .18s ease;
+}
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   min-width: 0;
   min-height: 0;
   background-color: var(--bg-color);
@@ -19,10 +45,12 @@
 
     .new-session-guide-wrapper {
       flex: 1;
+      min-height: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 24px 24px 12px;
+      overflow: auto;
+      padding: 24px 24px 16px;
     }
   }
 }
@@ -42,7 +70,7 @@
   overscroll-behavior-y: contain;
   -webkit-overflow-scrolling: touch;
   scrollbar-gutter: stable both-edges;
-  padding: 6px 12px 0;
+  padding: 0 12px 0;
   position: relative;
   opacity: 0;
   background-color: var(--bg-color);
@@ -251,10 +279,80 @@
     padding-bottom .4s cubic-bezier(.4, 0, .2, 1);
 }
 
+.chat-thinking-indicator {
+  display: flex;
+  justify-content: flex-start;
+  padding: 0;
+  min-width: 0;
+  width: 100%;
+}
+
+.chat-thinking-indicator__text {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  max-width: min(90%, 100%);
+  font-size: 14px;
+  line-height: 1.6;
+  font-weight: 400;
+  white-space: nowrap;
+  text-align: left;
+  color: var(--text-color);
+}
+
+.chat-thinking-indicator__text::after {
+  content: '';
+  position: absolute;
+  inset: -1px -20%;
+  border-radius: 999px;
+  pointer-events: none;
+  background: linear-gradient(
+    100deg,
+    transparent 18%,
+    rgba(255, 255, 255, 0) 34%,
+    rgba(255, 255, 255, .08) 42%,
+    rgba(255, 255, 255, .82) 50%,
+    rgba(255, 255, 255, .08) 58%,
+    rgba(255, 255, 255, 0) 66%,
+    transparent 82%
+  );
+  mix-blend-mode: screen;
+  transform: translate3d(-180%, 0, 0);
+  animation: chat-thinking-indicator-scan 2s ease-in-out infinite;
+}
+
+@keyframes chat-thinking-indicator-scan {
+  from {
+    transform: translate3d(-180%, 0, 0);
+  }
+
+  to {
+    transform: translate3d(180%, 0, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-thinking-indicator__text::after {
+    animation: none;
+    opacity: 0;
+  }
+}
+
 .chat-composer-stack {
   flex: 0;
   min-width: 0;
-  padding: 0 12px max(8px, env(safe-area-inset-bottom));
+  padding: 0 12px
+    calc(
+      max(8px, env(safe-area-inset-bottom)) +
+        var(--vf-keyboard-inset-bottom, 0px)
+    );
+}
+
+.chat-route-layout.has-bottom-dock .chat-composer-stack {
+  padding-bottom: calc(6px + var(--vf-keyboard-inset-bottom, 0px));
 }
 
 .chat-composer-stack__inner {
@@ -291,7 +389,10 @@
 
 .scroll-bottom-btn {
   position: sticky;
-  bottom: max(16px, env(safe-area-inset-bottom));
+  bottom: calc(
+    max(16px, env(safe-area-inset-bottom)) +
+      var(--vf-keyboard-inset-bottom, 0px)
+  );
   left: 100%;
   transform: translateX(-44px);
   width: 36px;
@@ -408,8 +509,10 @@
 
   .chat-composer-stack {
     padding: 0 max(12px, env(safe-area-inset-right))
-      max(8px, env(safe-area-inset-bottom))
-      max(12px, env(safe-area-inset-left));
+      calc(
+        max(8px, env(safe-area-inset-bottom)) +
+          var(--vf-keyboard-inset-bottom, 0px)
+      ) max(12px, env(safe-area-inset-left));
   }
 
   .chat-settings-panel {

package/src/routes/ChatRoute.tsx

@@ -1,36 +1,32 @@
 import './ChatRoute.scss'
 
 import { Button, Empty } from 'antd'
-import { useSetAtom } from 'jotai'
-import { useEffect, useMemo, useRef } from 'react'
+import { useAtomValue } from 'jotai'
 import { useTranslation } from 'react-i18next'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import useSWR from 'swr'
 
 import type { Session } from '@vibe-forge/core'
 
 import { listSessions } from '#~/api'
-import { ChatHeader } from '#~/components/chat/ChatHeader.js'
-import { ChatHistoryView } from '#~/components/chat/ChatHistoryView.js'
-import { ChatSettingsView } from '#~/components/chat/ChatSettingsView.js'
-import { ChatTimelineView } from '#~/components/chat/ChatTimelineView.js'
-import { buildChatHistoryStatusNotices } from '#~/components/chat/messages/build-chat-history-status-notices'
-import { ChatTerminalView } from '#~/components/chat/terminal/ChatTerminalView.js'
-import { useChatSession } from '#~/hooks/chat/use-chat-session'
-import { useTerminalDockVisibility } from '#~/hooks/chat/use-terminal-dock-visibility'
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { isMobileSidebarOpenAtom } from '#~/store/index'
+import { optimisticSessionCreationsAtom } from '#~/hooks/chat/optimistic-session-creation'
+
+import { ChatRouteView } from './ChatRouteView'
 
 export function ChatRoute() {
   const { t } = useTranslation()
   const { sessionId } = useParams()
   const navigate = useNavigate()
+  const optimisticCreations = useAtomValue(optimisticSessionCreationsAtom)
   const { data: sessionsRes, isLoading } = useSWR<{ sessions: Session[] }>(
     sessionId ? '/api/sessions' : null,
     () => listSessions('active')
   )
-  const session = sessionId == null ? undefined : sessionsRes?.sessions.find(item => item.id === sessionId)
-  if (sessionId != null && isLoading) return null
+  const optimisticCreation = sessionId == null ? undefined : optimisticCreations[sessionId]
+  const session = sessionId == null
+    ? undefined
+    : optimisticCreation?.session ?? sessionsRes?.sessions.find(item => item.id === sessionId)
+  if (sessionId != null && isLoading && optimisticCreation == null) return null
   if (sessionId != null && session == null) {
     return (
       <div className='chat-route__empty-state'>
@@ -42,153 +38,3 @@ export function ChatRoute() {
 
   return <ChatRouteView session={session} />
 }
-
-function ChatRouteView({ session }: { session?: Session }) {
-  const { t } = useTranslation()
-  const [searchParams] = useSearchParams()
-  const navigate = useNavigate()
-  const { isCompactLayout } = useResponsiveLayout()
-  const setIsMobileSidebarOpen = useSetAtom(isMobileSidebarOpenAtom)
-  const {
-    messages,
-    sessionInfo,
-    queuedMessages,
-    interactionRequest,
-    isReady,
-    errorState,
-    retryConnection,
-    activeView,
-    isTerminalOpen,
-    setActiveView,
-    setIsTerminalOpen,
-    handleInteractionResponse,
-    setMessages,
-    placeholder,
-    modelMenuGroups,
-    modelSearchOptions,
-    recommendedModelOptions,
-    servicePreviewModelOptions,
-    toggleRecommendedModel,
-    updatingRecommendedModelValue,
-    selectedModel,
-    modelForQuery,
-    setSelectedModel,
-    effort,
-    setEffort,
-    effortOptions,
-    permissionMode,
-    setPermissionMode,
-    permissionModeOptions,
-    selectedAdapter,
-    setSelectedAdapter,
-    adapterOptions,
-    hasAvailableModels,
-    modelUnavailable
-  } = useChatSession({ session })
-  const targetMessageId = searchParams.get('messageId') ?? undefined
-  const targetToolUseId = searchParams.get('toolUseId') ?? undefined
-  const isDebugMode = searchParams.get('debug') === 'true'
-  const deepLinkTargetKey = targetToolUseId?.trim()
-    ? `tool:${targetToolUseId.trim()}`
-    : targetMessageId?.trim()
-    ? `message:${targetMessageId.trim()}`
-    : ''
-  const historyStatusNotices = useMemo(() =>
-    buildChatHistoryStatusNotices({
-      errorState,
-      isDebugMode,
-      modelUnavailable,
-      t
-    }), [errorState, isDebugMode, modelUnavailable, t])
-  const isEmptyNewSession = !session?.id && messages.length === 0 && historyStatusNotices.length === 0
-  const resolvedActiveView = session?.id != null ? activeView : 'history'
-  const shouldShowTerminal = session?.id != null && isTerminalOpen
-  const { isRendered: isTerminalRendered, isVisible: isTerminalVisible } = useTerminalDockVisibility(
-    shouldShowTerminal
-  )
-  const handledDeepLinkTargetRef = useRef('')
-  useEffect(() => {
-    if (deepLinkTargetKey === '') {
-      handledDeepLinkTargetRef.current = ''
-    } else if (handledDeepLinkTargetRef.current !== deepLinkTargetKey) {
-      handledDeepLinkTargetRef.current = deepLinkTargetKey
-      if (activeView !== 'history') {
-        setActiveView('history')
-      }
-    }
-  }, [activeView, deepLinkTargetKey, setActiveView])
-  return (
-    <div
-      className={`chat-container ${isReady ? 'ready' : ''} ${isEmptyNewSession ? 'is-new-session' : ''} ${
-        shouldShowTerminal ? 'has-terminal' : ''
-      }`}
-    >
-      {(session?.id != null || isCompactLayout) && (
-        <ChatHeader
-          sessionInfo={sessionInfo}
-          sessionId={session?.id}
-          sessionTitle={session?.title}
-          sessionStatus={session?.status}
-          isStarred={session?.isStarred}
-          isArchived={session?.isArchived}
-          tags={session?.tags}
-          lastMessage={session?.lastMessage}
-          lastUserMessage={session?.lastUserMessage}
-          activeView={resolvedActiveView}
-          isTerminalOpen={isTerminalOpen}
-          onCreateSession={() => {
-            void navigate('/')
-          }}
-          onOpenSidebar={() => {
-            setIsMobileSidebarOpen(true)
-          }}
-          onViewChange={setActiveView}
-          onToggleTerminal={() => setIsTerminalOpen(!isTerminalOpen)}
-        />
-      )}
-      {resolvedActiveView === 'history' && (
-        <ChatHistoryView
-          isReady={isReady}
-          messages={messages}
-          session={session}
-          targetMessageId={targetMessageId}
-          targetToolUseId={targetToolUseId}
-          sessionInfo={sessionInfo}
-          historyStatusNotices={historyStatusNotices}
-          queuedMessages={queuedMessages}
-          onRetryConnection={retryConnection}
-          interactionRequest={interactionRequest}
-          onInteractionResponse={handleInteractionResponse}
-          setMessages={setMessages}
-          onClearMessages={() => setMessages([])}
-          placeholder={placeholder}
-          modelMenuGroups={modelMenuGroups}
-          modelSearchOptions={modelSearchOptions}
-          recommendedModelOptions={recommendedModelOptions}
-          servicePreviewModelOptions={servicePreviewModelOptions}
-          onToggleRecommendedModel={toggleRecommendedModel}
-          updatingRecommendedModelValue={updatingRecommendedModelValue}
-          selectedModel={selectedModel}
-          modelForQuery={modelForQuery}
-          onModelChange={setSelectedModel}
-          effort={effort}
-          effortOptions={effortOptions}
-          onEffortChange={setEffort}
-          permissionMode={permissionMode}
-          permissionModeOptions={permissionModeOptions}
-          onPermissionModeChange={setPermissionMode}
-          selectedAdapter={selectedAdapter}
-          adapterOptions={adapterOptions}
-          onAdapterChange={setSelectedAdapter}
-          modelUnavailable={modelUnavailable}
-          hasAvailableModels={hasAvailableModels}
-        />
-      )}
-      {resolvedActiveView === 'timeline' && <ChatTimelineView messages={messages} />}
-      {resolvedActiveView === 'settings' && session?.id &&
-        <ChatSettingsView session={session} sessionInfo={sessionInfo} onClose={() => setActiveView('history')} />}
-      {isTerminalRendered && session?.id &&
-        <ChatTerminalView isOpen={isTerminalVisible} sessionId={session.id} onClose={() => setIsTerminalOpen(false)} />}
-    </div>
-  )
-}

package/src/routes/ChatRouteBottomPanel.tsx

@@ -0,0 +1,47 @@
+import { ChatTerminalView } from '#~/components/chat/terminal/ChatTerminalView.js'
+import { WorkspaceFileEditorView } from '#~/components/chat/workspace-file-editor/WorkspaceFileEditorView'
+import type { ChatRouteBottomPanelState } from '#~/hooks/chat/use-chat-route-bottom-panel'
+
+export function ChatRouteBottomPanel({
+  bottomPanel,
+  isRendered,
+  isVisible,
+  sessionId,
+  terminalSessionId
+}: {
+  bottomPanel: ChatRouteBottomPanelState
+  isRendered: boolean
+  isVisible: boolean
+  sessionId?: string
+  terminalSessionId: string
+}) {
+  if (!isRendered) {
+    return null
+  }
+
+  return (
+    <>
+      {bottomPanel.shouldShowTerminal &&
+        <ChatTerminalView
+          key={terminalSessionId}
+          isOpen={isVisible}
+          sessionId={terminalSessionId}
+          onClose={bottomPanel.handleCloseTerminal}
+        />}
+      {bottomPanel.shouldShowFileEditor && bottomPanel.selectedWorkspaceFilePath != null &&
+        <WorkspaceFileEditorView
+          key={bottomPanel.selectedWorkspaceFilePath}
+          isOpen={isVisible}
+          openPaths={bottomPanel.openWorkspaceFilePaths}
+          path={bottomPanel.selectedWorkspaceFilePath}
+          sessionId={sessionId}
+          onClose={bottomPanel.handleCloseWorkspaceFile}
+          onCloseAllPaths={bottomPanel.handleCloseAllWorkspaceFileTabs}
+          onCloseOtherPaths={bottomPanel.handleCloseOtherWorkspaceFileTabs}
+          onClosePath={bottomPanel.handleCloseWorkspaceFileTab}
+          onClosePathsToRight={bottomPanel.handleCloseWorkspaceFileTabsToRight}
+          onSelectPath={bottomPanel.handleSelectWorkspaceFile}
+        />}
+    </>
+  )
+}

package/src/routes/ChatRouteView.tsx

@@ -0,0 +1,199 @@
+import { useSetAtom } from 'jotai'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+
+import type { Session } from '@vibe-forge/core'
+
+import { ChatHeader } from '#~/components/chat/ChatHeader.js'
+import { ChatHistoryView } from '#~/components/chat/ChatHistoryView.js'
+import { ChatSettingsView } from '#~/components/chat/ChatSettingsView.js'
+import { ChatTimelineView } from '#~/components/chat/ChatTimelineView.js'
+import { buildChatHistoryStatusNotices } from '#~/components/chat/messages/build-chat-history-status-notices'
+import { ChatWorkspaceDrawer } from '#~/components/chat/workspace-drawer/ChatWorkspaceDrawer'
+import type { ContextPickerFile, ContextReferenceRequest } from '#~/components/workspace/context-file-types'
+import { useChatRouteBottomPanel } from '#~/hooks/chat/use-chat-route-bottom-panel'
+import { useChatRouteDeepLinkView } from '#~/hooks/chat/use-chat-route-deep-link-view'
+import { useChatSession } from '#~/hooks/chat/use-chat-session'
+import { useTerminalDockVisibility } from '#~/hooks/chat/use-terminal-dock-visibility'
+import { useChatLayoutQueryState } from '#~/hooks/use-chat-layout-query-state'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+import { isMobileSidebarOpenAtom } from '#~/store/index'
+
+import { ChatRouteBottomPanel } from './ChatRouteBottomPanel'
+
+const WORKSPACE_TERMINAL_SESSION_ID = '__workspace__'
+
+export function ChatRouteView({ session }: { session?: Session }) {
+  const { t } = useTranslation()
+  const [searchParams] = useSearchParams()
+  const [contextReferenceRequest, setContextReferenceRequest] = useState<ContextReferenceRequest | null>(null)
+  const navigate = useNavigate()
+  const { isCompactLayout } = useResponsiveLayout()
+  const { isWorkspaceDrawerOpen, setWorkspaceDrawerOpen } = useChatLayoutQueryState()
+  const setIsMobileSidebarOpen = useSetAtom(isMobileSidebarOpenAtom)
+  const {
+    messages,
+    sessionInfo,
+    queuedMessages,
+    interactionRequest,
+    isReady,
+    errorState,
+    retryConnection,
+    activeView,
+    isTerminalOpen,
+    setActiveView,
+    setIsTerminalOpen,
+    handleInteractionResponse,
+    setMessages,
+    placeholder,
+    modelMenuGroups,
+    modelSearchOptions,
+    recommendedModelOptions,
+    servicePreviewModelOptions,
+    toggleRecommendedModel,
+    updatingRecommendedModelValue,
+    selectedModel,
+    modelForQuery,
+    setSelectedModel,
+    effort,
+    setEffort,
+    effortOptions,
+    permissionMode,
+    setPermissionMode,
+    permissionModeOptions,
+    selectedAdapter,
+    setSelectedAdapter,
+    selectedAccount,
+    setSelectedAccount,
+    accountOptions,
+    showAccountSelector,
+    adapterOptions,
+    hasAvailableModels,
+    modelUnavailable
+  } = useChatSession({ session })
+  const targetMessageId = searchParams.get('messageId') ?? undefined
+  const targetToolUseId = searchParams.get('toolUseId') ?? undefined
+  const isDebugMode = searchParams.get('debug') === 'true'
+  const historyStatusNotices = useMemo(() =>
+    buildChatHistoryStatusNotices({
+      errorState,
+      isDebugMode,
+      modelUnavailable,
+      t
+    }), [errorState, isDebugMode, modelUnavailable, t])
+  const isEmptyNewSession = !session?.id && messages.length === 0 && historyStatusNotices.length === 0
+  const handleReferenceWorkspacePaths = (files: ContextPickerFile[]) => {
+    if (files.length === 0) {
+      return
+    }
+
+    setContextReferenceRequest(current => ({
+      id: (current?.id ?? 0) + 1,
+      files
+    }))
+  }
+  const resolvedActiveView = session?.id != null ? activeView : 'history'
+  const terminalSessionId = session?.id ?? WORKSPACE_TERMINAL_SESSION_ID
+  const bottomPanel = useChatRouteBottomPanel({ isTerminalOpen, session, setIsTerminalOpen })
+  const shouldShowWorkspaceDrawer = isWorkspaceDrawerOpen && !isCompactLayout
+  const { isRendered: isBottomPanelRendered, isVisible: isBottomPanelVisible } = useTerminalDockVisibility(
+    bottomPanel.shouldShowBottomPanel
+  )
+  useChatRouteDeepLinkView({ activeView, setActiveView, targetMessageId, targetToolUseId })
+  return (
+    <div
+      className={`chat-route-layout ${shouldShowWorkspaceDrawer ? 'has-workspace-drawer' : ''} ${
+        bottomPanel.shouldShowTerminal ? 'has-terminal' : ''
+      } ${bottomPanel.shouldShowBottomPanel ? 'has-bottom-dock' : ''}`}
+    >
+      <div className='chat-route-layout__main'>
+        <div
+          className={`chat-container ${isReady ? 'ready' : ''} ${isEmptyNewSession ? 'is-new-session' : ''}`}
+        >
+          <ChatHeader
+            sessionInfo={sessionInfo}
+            sessionId={session?.id}
+            sessionTitle={session?.title}
+            sessionStatus={session?.status}
+            isStarred={session?.isStarred}
+            isArchived={session?.isArchived}
+            tags={session?.tags}
+            lastMessage={session?.lastMessage}
+            lastUserMessage={session?.lastUserMessage}
+            activeView={resolvedActiveView}
+            isTerminalOpen={bottomPanel.shouldShowTerminal}
+            isWorkspaceDrawerOpen={shouldShowWorkspaceDrawer}
+            onCreateSession={() => void navigate('/')}
+            onOpenSidebar={() => setIsMobileSidebarOpen(true)}
+            onViewChange={setActiveView}
+            onToggleTerminal={bottomPanel.handleToggleTerminal}
+            onToggleWorkspaceDrawer={() => setWorkspaceDrawerOpen(!isWorkspaceDrawerOpen)}
+          />
+          {resolvedActiveView === 'history' && (
+            <ChatHistoryView
+              isReady={isReady}
+              messages={messages}
+              session={session}
+              targetMessageId={targetMessageId}
+              targetToolUseId={targetToolUseId}
+              sessionInfo={sessionInfo}
+              historyStatusNotices={historyStatusNotices}
+              queuedMessages={queuedMessages}
+              onRetryConnection={retryConnection}
+              interactionRequest={interactionRequest}
+              onInteractionResponse={handleInteractionResponse}
+              setMessages={setMessages}
+              onClearMessages={() => setMessages([])}
+              placeholder={placeholder}
+              modelMenuGroups={modelMenuGroups}
+              modelSearchOptions={modelSearchOptions}
+              recommendedModelOptions={recommendedModelOptions}
+              servicePreviewModelOptions={servicePreviewModelOptions}
+              onToggleRecommendedModel={toggleRecommendedModel}
+              updatingRecommendedModelValue={updatingRecommendedModelValue}
+              selectedModel={selectedModel}
+              modelForQuery={modelForQuery}
+              onModelChange={setSelectedModel}
+              effort={effort}
+              effortOptions={effortOptions}
+              onEffortChange={setEffort}
+              permissionMode={permissionMode}
+              permissionModeOptions={permissionModeOptions}
+              onPermissionModeChange={setPermissionMode}
+              selectedAdapter={selectedAdapter}
+              adapterOptions={adapterOptions}
+              onAdapterChange={setSelectedAdapter}
+              selectedAccount={selectedAccount}
+              accountOptions={accountOptions}
+              showAccountSelector={showAccountSelector}
+              onAccountChange={setSelectedAccount}
+              modelUnavailable={modelUnavailable}
+              hasAvailableModels={hasAvailableModels}
+              contextReferenceRequest={contextReferenceRequest}
+            />
+          )}
+
+          {resolvedActiveView === 'timeline' && <ChatTimelineView messages={messages} />}
+          {resolvedActiveView === 'settings' && session?.id &&
+            <ChatSettingsView session={session} sessionInfo={sessionInfo} onClose={() => setActiveView('history')} />}
+        </div>
+        {shouldShowWorkspaceDrawer && (
+          <ChatWorkspaceDrawer
+            selectedFilePath={bottomPanel.selectedWorkspaceFilePath}
+            sessionId={session?.id}
+            onReferencePaths={handleReferenceWorkspacePaths}
+            onOpenFile={bottomPanel.handleOpenWorkspaceFile}
+          />
+        )}
+      </div>
+      <ChatRouteBottomPanel
+        bottomPanel={bottomPanel}
+        isRendered={isBottomPanelRendered}
+        isVisible={isBottomPanelVisible}
+        sessionId={session?.id}
+        terminalSessionId={terminalSessionId}
+      />
+    </div>
+  )
+}