@vibe-forge/client 0.10.0 → 0.11.0

package/src/components/chat/messages/MessageItem.scss

@@ -76,6 +76,16 @@
       max-width: 100%;
     }
   }
+
+  &.is-targeted {
+    scroll-margin-top: 96px;
+
+    .bubble {
+      outline: 2px solid rgba(59, 130, 246, .35);
+      outline-offset: 6px;
+      border-radius: 12px;
+    }
+  }
 }
 
 .message-side-actions {

package/src/components/chat/messages/MessageItem.tsx

@@ -25,6 +25,7 @@ interface MessageItemProps {
   msg: ChatMessage
   isFirstInGroup: boolean
   originalMessage: ChatMessage
+  isTargeted: boolean
   sessionId?: string
   sessionInfo?: SessionInfo | null
   isSessionBusy: boolean
@@ -47,6 +48,7 @@ function MessageItemComponent({
   msg,
   isFirstInGroup,
   originalMessage,
+  isTargeted,
   sessionId,
   sessionInfo,
   isSessionBusy,
@@ -402,7 +404,8 @@ function MessageItemComponent({
         id={anchorId}
         className={`${isUser ? 'chat-message-user' : 'chat-message-assistant'} ${isEditing ? 'is-editing' : ''} ${
           !isFirstInGroup ? 'consecutive' : ''
-        } ${isActionsVisible ? 'is-actions-visible' : ''}`}
+        } ${isActionsVisible ? 'is-actions-visible' : ''} ${isTargeted ? 'is-targeted' : ''}`}
+        data-message-id={originalMessage.id}
         onPointerEnter={handleActionsPointerEnter}
         onPointerLeave={handleActionsPointerLeave}
       >
@@ -448,6 +451,7 @@ function MessageItemComponent({
 const areMessageItemPropsEqual = (prev: MessageItemProps, next: MessageItemProps) => {
   return prev.anchorId === next.anchorId &&
     prev.isFirstInGroup === next.isFirstInGroup &&
+    prev.isTargeted === next.isTargeted &&
     prev.isSessionBusy === next.isSessionBusy &&
     prev.isEditing === next.isEditing &&
     prev.sessionId === next.sessionId &&

package/src/components/chat/messages/MessageStatusNotice.scss

@@ -0,0 +1,163 @@
+.message-status-notice {
+  width: 100%;
+
+  &__card {
+    width: 100%;
+    padding: 7px 12px;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  &__icon {
+    font-size: 14px;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__title-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    min-width: 0;
+    flex-wrap: wrap;
+  }
+
+  &__title {
+    font-size: 12px;
+    line-height: 1.3;
+    font-weight: 500;
+  }
+
+  &__badge,
+  &__meta {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border-radius: 0;
+    font-size: 10px;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    opacity: .72;
+  }
+
+  &__meta {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
+      Courier New, monospace;
+    opacity: .8;
+  }
+
+  &__message {
+    color: var(--text-color);
+    font-size: 12px;
+    line-height: 1.45;
+    word-break: break-word;
+  }
+
+  &__detail {
+    color: var(--sub-text-color, #6b7280);
+    font-size: 11px;
+    line-height: 1.35;
+    word-break: break-word;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding-top: 1px;
+  }
+
+  &--error {
+    .message-status-notice__icon,
+    .message-status-notice__title {
+      color: #a16262;
+    }
+
+    .message-status-notice__badge,
+    .message-status-notice__meta {
+      color: #b07a7a;
+    }
+  }
+
+  &--warning {
+    .message-status-notice__icon,
+    .message-status-notice__title {
+      color: #9a7b4f;
+    }
+
+    .message-status-notice__badge,
+    .message-status-notice__meta {
+      color: #aa8b62;
+    }
+  }
+}
+
+html.dark {
+  .message-status-notice {
+    &--error {
+      .message-status-notice__icon,
+      .message-status-notice__title,
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        color: #d9b5b5;
+      }
+
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        background: transparent;
+      }
+
+      .message-status-notice__message {
+        color: #f3f4f6;
+      }
+
+      .message-status-notice__detail {
+        color: #cba0a0;
+      }
+    }
+
+    &--warning {
+      .message-status-notice__icon,
+      .message-status-notice__title,
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        color: #d7c399;
+      }
+
+      .message-status-notice__badge,
+      .message-status-notice__meta {
+        background: transparent;
+      }
+
+      .message-status-notice__message {
+        color: #f3f4f6;
+      }
+
+      .message-status-notice__detail {
+        color: #c8b27c;
+      }
+    }
+  }
+}

package/src/components/chat/messages/MessageStatusNotice.tsx

@@ -0,0 +1,48 @@
+import './MessageStatusNotice.scss'
+
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { ChatHistoryStatusNotice } from './build-chat-history-status-notices'
+
+export function MessageStatusNotice({
+  notice,
+  onRetryConnection
+}: {
+  notice: ChatHistoryStatusNotice
+  onRetryConnection: () => void
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className={`message-status-notice message-status-notice--${notice.tone} ${notice.isMock ? 'is-mock' : ''}`}>
+      <div className='message-status-notice__card' role='status' aria-live='polite'>
+        <div className='message-status-notice__content'>
+          <div className='message-status-notice__header'>
+            <div className='message-status-notice__title-row'>
+              <span className='material-symbols-rounded message-status-notice__icon'>{notice.icon}</span>
+              <div className='message-status-notice__title'>{notice.title}</div>
+              {notice.isMock && (
+                <span className='message-status-notice__badge'>{t('chat.debugMockLabel')}</span>
+              )}
+            </div>
+            {notice.meta != null && notice.meta !== '' && (
+              <span className='message-status-notice__meta'>{notice.meta}</span>
+            )}
+          </div>
+          <div className='message-status-notice__message'>{notice.message}</div>
+          {notice.detail != null && notice.detail !== '' && (
+            <div className='message-status-notice__detail'>{notice.detail}</div>
+          )}
+          {notice.action === 'retry-connection' && (
+            <div className='message-status-notice__actions'>
+              <Button size='small' onClick={onRetryConnection}>
+                {t('chat.retryConnection')}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/messages/build-chat-history-status-notices.ts

@@ -0,0 +1,138 @@
+import type { ChatErrorState } from '#~/hooks/chat/interaction-state'
+
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+export interface ChatHistoryStatusNotice {
+  action?: 'retry-connection'
+  detail?: string
+  icon: string
+  id: string
+  isMock?: boolean
+  message: string
+  meta?: string
+  tone: 'error' | 'warning'
+  title: string
+}
+
+const createModelUnavailableNotice = (t: Translate, isMock = false): ChatHistoryStatusNotice => ({
+  icon: 'settings_suggest',
+  id: isMock ? 'mock-model-unavailable' : 'model-unavailable',
+  isMock,
+  message: t('chat.modelConfigRequired'),
+  detail: t('chat.modelConfigRequiredHelp'),
+  tone: 'warning',
+  title: t('chat.modelConfigRequiredTitle')
+})
+
+const createConnectionNotice = (
+  t: Translate,
+  state: ChatErrorState,
+  isMock = false
+): ChatHistoryStatusNotice => {
+  const isClosed = state.reason === 'closed'
+
+  return {
+    action: isMock ? undefined : 'retry-connection',
+    detail: isClosed ? t('chat.connectionClosedHelp') : t('chat.connectionErrorHelp'),
+    icon: isClosed ? 'wifi_off' : 'cloud_off',
+    id: isMock
+      ? isClosed ? 'mock-connection-closed' : 'mock-connection-error'
+      : isClosed
+      ? 'connection-closed'
+      : 'connection-error',
+    isMock,
+    message: state.message,
+    tone: 'error',
+    title: isClosed ? t('chat.connectionClosedTitle') : t('chat.connectionErrorTitle')
+  }
+}
+
+const createSessionNotice = (
+  t: Translate,
+  state: ChatErrorState,
+  isMock = false
+): ChatHistoryStatusNotice => ({
+  detail: t('chat.sessionErrorHelp'),
+  icon: 'error',
+  id: isMock ? 'mock-session-error' : 'session-error',
+  isMock,
+  message: state.message,
+  meta: state.code != null && state.code !== ''
+    ? t('chat.sessionErrorCode', { code: state.code })
+    : undefined,
+  tone: 'error',
+  title: t('chat.sessionErrorTitle')
+})
+
+export const buildChatHistoryStatusNotices = ({
+  errorState,
+  isDebugMode,
+  modelUnavailable,
+  t
+}: {
+  errorState?: ChatErrorState | null
+  isDebugMode: boolean
+  modelUnavailable: boolean
+  t: Translate
+}) => {
+  const notices: ChatHistoryStatusNotice[] = []
+  const activeScenarios = new Set<string>()
+
+  if (modelUnavailable) {
+    notices.push(createModelUnavailableNotice(t))
+    activeScenarios.add('model-unavailable')
+  }
+
+  if (errorState != null && errorState.message.trim() !== '') {
+    if (errorState.kind === 'session') {
+      notices.push(createSessionNotice(t, errorState))
+      activeScenarios.add('session-error')
+    } else {
+      notices.push(createConnectionNotice(t, errorState))
+      activeScenarios.add(errorState.reason === 'closed' ? 'connection-closed' : 'connection-error')
+    }
+  }
+
+  if (!isDebugMode) {
+    return notices
+  }
+
+  const mockNotices: Array<{ notice: ChatHistoryStatusNotice; scenario: string }> = [
+    {
+      scenario: 'connection-error',
+      notice: createConnectionNotice(t, {
+        kind: 'connection',
+        message: t('chat.debugMockConnectionErrorMessage'),
+        reason: 'error'
+      }, true)
+    },
+    {
+      scenario: 'connection-closed',
+      notice: createConnectionNotice(t, {
+        kind: 'connection',
+        message: t('chat.debugMockConnectionClosedMessage'),
+        reason: 'closed'
+      }, true)
+    },
+    {
+      scenario: 'session-error',
+      notice: createSessionNotice(t, {
+        kind: 'session',
+        message: t('chat.debugMockSessionErrorMessage'),
+        code: 'session_timeout'
+      }, true)
+    },
+    {
+      scenario: 'model-unavailable',
+      notice: createModelUnavailableNotice(t, true)
+    }
+  ]
+
+  for (const mock of mockNotices) {
+    if (!activeScenarios.has(mock.scenario)) {
+      notices.push(mock.notice)
+    }
+  }
+
+  return notices
+}

package/src/components/chat/sender/@components/sender-body/SenderBody.tsx

@@ -1,11 +1,9 @@
-import { Button } from 'antd'
 import type { MutableRefObject } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { SessionInfo } from '@vibe-forge/types'
 
 import { ContextFilePicker } from '#~/components/workspace/ContextFilePicker'
-import type { ChatErrorBannerState } from '#~/hooks/chat/interaction-state'
 
 import type {
   SenderToolbarData,
@@ -25,8 +23,6 @@ export function SenderBody({
   isInlineEdit,
   isBusy,
   modelUnavailable,
-  errorBanner,
-  onRetryConnection,
   pendingImages,
   pendingFiles,
   onRemovePendingImage,
@@ -52,8 +48,6 @@ export function SenderBody({
   isInlineEdit: boolean
   isBusy: boolean
   modelUnavailable?: boolean
-  errorBanner?: ChatErrorBannerState | null
-  onRetryConnection?: () => void
   pendingImages: Parameters<typeof SenderAttachments>[0]['pendingImages']
   pendingFiles: Parameters<typeof SenderAttachments>[0]['pendingFiles']
   onRemovePendingImage: (id: string) => void
@@ -81,27 +75,9 @@ export function SenderBody({
   onConfirmContextPicker: (files: PendingContextFile[]) => void
 }) {
   const { t } = useTranslation()
-  const errorTitle = errorBanner?.kind === 'session'
-    ? t('chat.sessionErrorTitle')
-    : t('chat.connectionErrorTitle')
 
   return (
     <div className={`chat-input-container ${isInlineEdit ? 'chat-input-container--inline-edit' : ''}`.trim()}>
-      {!isInlineEdit && errorBanner != null && errorBanner.message.trim() !== '' && (
-        <div className='connection-error-banner'>
-          <div className='connection-error-content'>
-            <span className='material-symbols-rounded'>error</span>
-            <div className='connection-error-copy'>
-              <div className='connection-error-title'>{errorTitle}</div>
-              <div className='connection-error-message'>{errorBanner.message}</div>
-            </div>
-          </div>
-          {errorBanner.kind === 'connection' && onRetryConnection != null && (
-            <Button size='small' onClick={onRetryConnection}>{t('chat.retryConnection')}</Button>
-          )}
-        </div>
-      )}
-      {!isInlineEdit && modelUnavailable && <div className='model-unavailable'>{t('chat.modelConfigRequired')}</div>}
       <SenderAttachments
         pendingImages={pendingImages}
         pendingFiles={pendingFiles}

package/src/components/chat/sender/@core/build-sender-controller-result.ts

@@ -49,7 +49,6 @@ export const buildSenderControllerResult = ({
   attachments,
   completion,
   composer,
-  errorBanner,
   focusRestore,
   handleKeyDown,
   hideSender,
@@ -59,7 +58,6 @@ export const buildSenderControllerResult = ({
   isInlineEdit,
   isThinking,
   modelUnavailable,
-  onRetryConnection,
   permissionContext,
   placeholder,
   editorRef,
@@ -68,7 +66,6 @@ export const buildSenderControllerResult = ({
   attachments: SenderControllerAttachments
   completion: SenderControllerCompletion
   composer: SenderControllerComposer
-  errorBanner?: SenderProps['errorBanner']
   focusRestore: { queueEditorFocusRestore: () => void }
   handleKeyDown: (event: KeyboardEvent) => void
   hideSender: boolean
@@ -78,7 +75,6 @@ export const buildSenderControllerResult = ({
   isInlineEdit: boolean
   isThinking: boolean
   modelUnavailable?: boolean
-  onRetryConnection?: (() => void) | undefined
   permissionContext?: {
     deniedTools?: string[]
     reasons?: string[]
@@ -102,8 +98,6 @@ export const buildSenderControllerResult = ({
   handleKeyDown,
   interactionRequest,
   interactionResponse,
-  errorBanner,
-  onRetryConnection,
   modelUnavailable,
   placeholder,
   onInputChange: completion.handleInputChange,

package/src/components/chat/sender/@hooks/use-sender-controller.ts

@@ -174,7 +174,6 @@ export const useSenderController = (props: SenderProps) => {
     attachments,
     completion,
     composer,
-    errorBanner: props.errorBanner,
     focusRestore,
     handleKeyDown,
     hideSender,
@@ -184,7 +183,6 @@ export const useSenderController = (props: SenderProps) => {
     isInlineEdit,
     isThinking,
     modelUnavailable: props.modelUnavailable,
-    onRetryConnection: props.onRetryConnection,
     permissionContext,
     editorRef,
     placeholder: props.placeholder ?? props.interactionRequest?.payload.question ?? t('chat.inputPlaceholder'),

package/src/components/chat/sender/@types/sender-props.ts

@@ -3,7 +3,6 @@ import type { ReactNode } from 'react'
 import type { AskUserQuestionParams, ChatMessageContent, SessionStatus } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
-import type { ChatErrorBannerState } from '#~/hooks/chat/interaction-state'
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
@@ -19,8 +18,6 @@ export interface SenderProps {
   onInterrupt: () => void
   onClear?: () => void
   sessionInfo?: SessionInfo | null
-  errorBanner?: ChatErrorBannerState | null
-  onRetryConnection?: () => void
   interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void
   placeholder?: string

package/src/components/chat/sender/Sender.scss

@@ -27,64 +27,6 @@
   .chat-input-monaco {
     color: var(--text-color);
   }
-
-  .model-unavailable {
-    margin-bottom: 6px;
-    padding: 6px 8px;
-    border-radius: 8px;
-    border: 1px dashed var(--border-color);
-    background-color: var(--tag-bg, #f9fafb);
-    color: var(--placeholder-color);
-    font-size: 12px;
-  }
-
-  .connection-error-banner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-bottom: 8px;
-    padding: 10px 12px;
-    border-radius: 10px;
-    border: 1px solid rgba(220, 38, 38, .2);
-    background: linear-gradient(
-      135deg,
-      rgba(254, 242, 242, .95),
-      rgba(255, 255, 255, .92)
-    );
-  }
-
-  .connection-error-content {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    min-width: 0;
-
-    .material-symbols-rounded {
-      color: #dc2626;
-      font-size: 18px;
-      line-height: 1;
-      margin-top: 1px;
-    }
-  }
-
-  .connection-error-copy {
-    min-width: 0;
-  }
-
-  .connection-error-title {
-    color: #991b1b;
-    font-size: 12px;
-    font-weight: 600;
-  }
-
-  .connection-error-message {
-    margin-top: 2px;
-    color: #7f1d1d;
-    font-size: 12px;
-    line-height: 1.4;
-    word-break: break-word;
-  }
 }
 
 .chat-input-container--inline-edit {

package/src/components/chat/sender/Sender.tsx

@@ -33,8 +33,6 @@ export function Sender(props: SenderProps) {
           isInlineEdit={controller.isInlineEdit}
           isBusy={controller.isBusy}
           modelUnavailable={controller.modelUnavailable}
-          errorBanner={controller.errorBanner}
-          onRetryConnection={controller.onRetryConnection}
           pendingImages={controller.composer.pendingImages}
           pendingFiles={controller.composer.pendingFiles}
           onRemovePendingImage={(id) =>