@vibe-forge/client 2.0.0 → 2.0.1

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

@@ -1,10 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 
-import type {
-  MenuFocusTarget,
-  ReferenceMenuKey,
-  SenderInitialContent
-} from '#~/components/chat/sender/@types/sender-types'
+import type { ReferenceMenuKey, SenderInitialContent } from '#~/components/chat/sender/@types/sender-types'
 import { isActivationKey } from '#~/components/chat/sender/@utils/sender-utils'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import { useRovingFocusList } from '#~/hooks/use-roving-focus-list'
@@ -28,18 +24,14 @@ export const useSenderReferenceActions = ({
 }) => {
   const [showReferenceActions, setShowReferenceActions] = useState(false)
   const [showPermissionActions, setShowPermissionActions] = useState(false)
-  const [menuFocusTarget, setMenuFocusTarget] = useState<MenuFocusTarget>(null)
   const [shouldRestoreFocus, setShouldRestoreFocus] = useState(false)
   const referenceMenuKeys = useMemo<ReferenceMenuKey[]>(() => {
     const keys: ReferenceMenuKey[] = ['image']
     if (!isInlineEdit) {
       keys.push('file')
     }
-    if (!isInlineEdit && permissionModeValues.length > 0) {
-      keys.push('permission')
-    }
     return keys
-  }, [isInlineEdit, permissionModeValues.length])
+  }, [isInlineEdit])
   const referenceMenuNavigation = useRovingFocusList(referenceMenuKeys, 'image')
   const permissionMenuNavigation = useRovingFocusList(permissionModeValues, permissionMode)
 
@@ -53,28 +45,6 @@ export const useSenderReferenceActions = ({
     }
   }, [permissionMenuNavigation, permissionMode, permissionModeValues])
 
-  useEffect(() => {
-    if (menuFocusTarget !== 'reference' || !showReferenceActions || showPermissionActions) {
-      return
-    }
-    const frame = window.requestAnimationFrame(() => {
-      referenceMenuNavigation.focusKey(referenceMenuNavigation.activeKey ?? referenceMenuKeys[0] ?? null)
-      setMenuFocusTarget(null)
-    })
-    return () => window.cancelAnimationFrame(frame)
-  }, [menuFocusTarget, referenceMenuKeys, referenceMenuNavigation, showPermissionActions, showReferenceActions])
-
-  useEffect(() => {
-    if (menuFocusTarget !== 'permission' || !showReferenceActions || !showPermissionActions) {
-      return
-    }
-    const frame = window.requestAnimationFrame(() => {
-      permissionMenuNavigation.focusKey(permissionMenuNavigation.activeKey ?? permissionMode)
-      setMenuFocusTarget(null)
-    })
-    return () => window.cancelAnimationFrame(frame)
-  }, [menuFocusTarget, permissionMenuNavigation, permissionMode, showPermissionActions, showReferenceActions])
-
   const closeReferenceActions = ({ restoreFocus = false }: { restoreFocus?: boolean } = {}) => {
     resetReferenceActions()
     setShouldRestoreFocus(restoreFocus)
@@ -83,7 +53,6 @@ export const useSenderReferenceActions = ({
   const resetReferenceActions = () => {
     setShowReferenceActions(false)
     setShowPermissionActions(false)
-    setMenuFocusTarget(null)
     setShouldRestoreFocus(false)
   }
 
@@ -99,36 +68,26 @@ export const useSenderReferenceActions = ({
     resetReferenceActions,
     closeReferenceActions,
     openPermissionShortcutMenu: () => {
-      setShowReferenceActions(true)
+      setShowReferenceActions(false)
       setShowPermissionActions(true)
-      referenceMenuNavigation.setActiveKey('permission')
       permissionMenuNavigation.setActiveKey(permissionMode)
-      setMenuFocusTarget('permission')
+      window.requestAnimationFrame(() => {
+        permissionMenuNavigation.focusKey(permissionMenuNavigation.activeKey ?? permissionMode)
+      })
     },
     handleReferenceMenuKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>, key: ReferenceMenuKey) => {
       if (event.key === 'ArrowDown') {
         event.preventDefault()
-        if (key !== 'permission') {
-          setShowPermissionActions(false)
-        }
+        setShowPermissionActions(false)
         referenceMenuNavigation.moveFocus(1, key)
         return
       }
       if (event.key === 'ArrowUp') {
         event.preventDefault()
-        if (key !== 'permission') {
-          setShowPermissionActions(false)
-        }
+        setShowPermissionActions(false)
         referenceMenuNavigation.moveFocus(-1, key)
         return
       }
-      if (event.key === 'ArrowRight' && key === 'permission' && permissionModeValues.length > 0) {
-        event.preventDefault()
-        setShowPermissionActions(true)
-        permissionMenuNavigation.setActiveKey(permissionMode)
-        setMenuFocusTarget('permission')
-        return
-      }
       if (event.key === 'Escape') {
         event.preventDefault()
         closeReferenceActions({ restoreFocus: true })
@@ -146,16 +105,7 @@ export const useSenderReferenceActions = ({
       if (key === 'file') {
         closeReferenceActions()
         onOpenContextPicker()
-        return
       }
-      setShowPermissionActions(prev => {
-        const nextOpen = !prev
-        if (nextOpen) {
-          permissionMenuNavigation.setActiveKey(permissionMode)
-          setMenuFocusTarget('permission')
-        }
-        return nextOpen
-      })
     },
     handlePermissionMenuKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>, key: PermissionMode) => {
       if (event.key === 'ArrowDown') {
@@ -168,14 +118,7 @@ export const useSenderReferenceActions = ({
         permissionMenuNavigation.moveFocus(-1, key)
         return
       }
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-        setShowPermissionActions(false)
-        referenceMenuNavigation.setActiveKey('permission')
-        setMenuFocusTarget('reference')
-        return
-      }
-      if (event.key === 'Escape') {
+      if (event.key === 'ArrowLeft' || event.key === 'Escape') {
         event.preventDefault()
         closeReferenceActions({ restoreFocus: true })
         return

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

@@ -8,6 +8,9 @@ import type {
 } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
+import type { ContextReferenceRequest } from '#~/components/workspace/context-file-types'
+import type { ChatSessionTargetDraft } from '#~/hooks/chat/chat-session-target'
+import type { ChatAdapterAccountOption } from '#~/hooks/chat/use-chat-adapter-account-selection'
 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'
@@ -37,9 +40,13 @@ export interface SenderProps {
   }
   placeholder?: string
   initialContent?: SenderInitialContent
+  onInputChange?: (value: string) => void
   onCancel?: () => void
   submitLabel?: string
   submitLoading?: boolean
+  forceEffortControl?: boolean
+  hideReferenceActions?: boolean
+  hideSubmitAction?: boolean
   autoFocus?: boolean
   modelMenuGroups?: ModelSelectMenuGroup[]
   modelSearchOptions?: ModelSelectOption[]
@@ -58,7 +65,18 @@ export interface SenderProps {
   selectedAdapter?: string
   adapterOptions?: Array<{ value: string; label: ReactNode }>
   onAdapterChange?: (adapter: string) => void
+  selectedAccount?: string
+  accountOptions?: ChatAdapterAccountOption[]
+  showAccountSelector?: boolean
+  onAccountChange?: (account: string) => void
   modelUnavailable?: boolean
+  sessionTarget?: {
+    draft: ChatSessionTargetDraft
+    locked: boolean
+    disabled?: boolean
+    onChange: (target: ChatSessionTargetDraft) => void
+  }
   queueMode?: SessionQueuedMessageMode
   onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
+  contextReferenceRequest?: ContextReferenceRequest | null
 }

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

@@ -3,6 +3,7 @@ import type { ChangeEvent, KeyboardEvent, ReactNode, RefObject } from 'react'
 import type { SessionQueuedMessageMode } from '@vibe-forge/core'
 import type { RefSelectProps } from 'antd'
 
+import type { ChatAdapterAccountOption } from '#~/hooks/chat/use-chat-adapter-account-selection'
 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'
@@ -31,11 +32,15 @@ export interface SenderToolbarState {
   showEffortSelect: boolean
   showReferenceActions: boolean
   showPermissionActions: boolean
+  hideReferenceActions: boolean
+  hideSubmitAction: boolean
   modelSearchValue: string
   selectedModel?: string
   effort: ChatEffort
   permissionMode: PermissionMode
   selectedAdapter?: string
+  selectedAccount?: string
+  showAccountSelector: boolean
   isMac: boolean
   resolvedSendShortcut: string
   hasComposerContent: boolean
@@ -53,6 +58,7 @@ export interface SenderToolbarData {
   effortOptions: Array<{ value: ChatEffort; label: ReactNode }>
   permissionModeOptions: Array<{ value: PermissionMode; label: ReactNode }>
   adapterOptions?: Array<{ value: string; label: ReactNode }>
+  accountOptions?: ChatAdapterAccountOption[]
   composerControlShortcuts: SenderToolbarShortcuts
   submitLabel?: string
   confirmInteractionLabel?: string
@@ -71,7 +77,7 @@ export interface SenderToolbarHandlers {
   onReferenceOpenChange: (nextOpen: boolean) => void
   onShowModelSelectChange: (nextOpen: boolean) => void
   onShowEffortSelectChange: (nextOpen: boolean) => void
-  onShowPermissionActionsChange: (nextOpen: boolean) => void
+  onPermissionOpenChange: (nextOpen: boolean) => void
   onModelSearchValueChange: (value: string) => void
   onOpenContextPicker: () => void
   onReferenceImageSelect: () => void
@@ -86,6 +92,7 @@ export interface SenderToolbarHandlers {
   onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
   onEffortChange?: (effort: ChatEffort) => void
   onAdapterChange?: (adapter: string) => void
+  onAccountChange?: (account: string) => void
   onSend: (mode?: SessionQueuedMessageMode) => void
   onInterrupt: () => void
   onCancel?: () => void

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

@@ -6,9 +6,7 @@ export type SenderInitialContent = string | ChatMessageContent[] | undefined
 
 export type SenderSubmitResult = boolean | void
 
-export type ReferenceMenuKey = 'image' | 'file' | 'permission'
-
-export type MenuFocusTarget = 'reference' | 'permission' | null
+export type ReferenceMenuKey = 'image' | 'file'
 
 export interface RovingFocusNavigation<T extends string> {
   activeKey: T | null

package/src/components/chat/sender/@utils/sender-constants.ts

@@ -14,5 +14,5 @@ export const permissionModeIconMap: Record<PermissionMode, string> = {
   acceptEdits: 'edit_note',
   plan: 'checklist',
   dontAsk: 'verified_user',
-  bypassPermissions: 'shield_lock'
+  bypassPermissions: 'gpp_bad'
 }

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

@@ -12,17 +12,24 @@
 }
 
 .chat-input-container {
+  --chat-input-container-padding: 12px;
+  --chat-input-header-toggle-size: 24px;
+  --chat-input-header-tab-height: 22px;
+  --chat-input-header-transition: .24s cubic-bezier(.4, 0, .2, 1);
+  --chat-input-header-toggle-offset-top: 6px;
+  --chat-input-session-header-max-height: 52px;
+  --chat-input-top-actions-max-height: 30px;
+
   position: relative;
   display: flex;
   flex-direction: column;
   background-color: var(--input-bg, #f9fafb);
   border: 1px solid var(--border-color);
   border-radius: 12px;
-  padding: 12px;
+  padding: var(--chat-input-container-padding);
   transition: all .2s;
 
   &:focus-within {
-    border-color: #3b82f6;
     background-color: var(--input-focus-bg, #f9fafb);
     box-shadow: none;
   }
@@ -36,9 +43,245 @@
   width: 100%;
 }
 
+.chat-input-top-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-bottom: 6px;
+  min-width: 0;
+}
+
+.chat-input-header-block {
+  visibility: visible;
+  transform-origin: top right;
+  transition:
+    max-height var(--chat-input-header-transition),
+    opacity .18s ease,
+    transform var(--chat-input-header-transition),
+    margin var(--chat-input-header-transition),
+    padding-top var(--chat-input-header-transition),
+    padding-bottom var(--chat-input-header-transition),
+    visibility 0s linear 0s;
+}
+
+.sender-session-target.chat-input-header-block,
+.chat-input-top-actions.chat-input-header-block {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sender-session-target.chat-input-header-block {
+  max-height: var(--chat-input-session-header-max-height);
+  overflow: hidden;
+
+  &.is-collapsed {
+    max-height: 0;
+    margin: 0 -12px 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+    visibility: hidden;
+    transition:
+      max-height var(--chat-input-header-transition),
+      opacity .18s ease,
+      transform var(--chat-input-header-transition),
+      margin var(--chat-input-header-transition),
+      padding-top var(--chat-input-header-transition),
+      padding-bottom var(--chat-input-header-transition),
+      visibility 0s linear .24s;
+  }
+}
+
+.chat-input-top-actions.chat-input-header-block {
+  max-height: var(--chat-input-top-actions-max-height);
+  overflow: clip;
+
+  &.is-collapsed {
+    max-height: 0;
+    margin-bottom: 0;
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+    visibility: hidden;
+    transition:
+      max-height var(--chat-input-header-transition),
+      opacity .18s ease,
+      transform var(--chat-input-header-transition),
+      margin var(--chat-input-header-transition),
+      padding-top var(--chat-input-header-transition),
+      padding-bottom var(--chat-input-header-transition),
+      visibility 0s linear .24s;
+  }
+}
+
+.chat-input-header-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--chat-input-header-toggle-size);
+  padding-inline-end: calc(var(--chat-input-header-toggle-size) + 6px);
+}
+
+.chat-input-header-toggle-shell {
+  --sender-permission-default-color: var(--primary-color);
+  --sender-permission-accept-edits-color: var(--success-color);
+  --sender-permission-plan-color: var(--warning-color);
+  --sender-permission-dont-ask-color: #ca8a04;
+  --sender-permission-bypass-color: var(--danger-color);
+
+  position: absolute;
+  top: 0;
+  right: 9px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+  pointer-events: none;
+}
+
+.chat-input-header-toggle-tab {
+  width: var(--chat-input-header-toggle-size);
+  min-width: var(--chat-input-header-toggle-size);
+  height: var(--chat-input-header-toggle-size);
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--sub-text-color);
+  cursor: pointer;
+  pointer-events: auto;
+  transform: translateY(var(--chat-input-header-toggle-offset-top));
+  transition:
+    background-color .2s ease,
+    border-color .2s ease,
+    color .2s ease,
+    border-radius var(--chat-input-header-transition),
+    height var(--chat-input-header-transition),
+    transform var(--chat-input-header-transition);
+
+  .material-symbols-rounded {
+    font-size: 16px;
+    line-height: 1;
+    transition: transform var(--chat-input-header-transition);
+  }
+
+  &:hover,
+  &:focus-visible {
+    color: var(--text-color);
+    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+    border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.chat-input-header-toggle-mode-indicator {
+  min-width: var(--chat-input-header-tab-height);
+  height: var(--chat-input-header-tab-height);
+  padding: 0 5px;
+  border: 1px solid transparent;
+  border-bottom-color: transparent;
+  border-radius: 10px 10px 0 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  background: color-mix(
+    in srgb,
+    var(--sub-bg-color, #f3f4f6) 88%,
+    var(--input-bg, #f9fafb) 12%
+  );
+  color: var(--sub-text-color);
+  opacity: 0;
+  transform: translateY(calc(-100% + 1px)) translateX(6px);
+  transition:
+    opacity .18s ease,
+    transform var(--chat-input-header-transition),
+    border-color .2s ease,
+    background-color .2s ease;
+
+  .chat-input-header-toggle-mode-icon {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+.chat-input-header-toggle-shell.is-collapsed {
+  .chat-input-header-toggle-mode-indicator {
+    border-color: var(--border-color);
+    opacity: 1;
+    transform: translateY(calc(-100% + 1px)) translateX(0);
+  }
+
+  .chat-input-header-toggle-tab {
+    height: var(--chat-input-header-tab-height);
+    border-color: var(--border-color);
+    border-bottom-color: transparent;
+    border-radius: 10px 10px 0 0;
+    transform: translateY(calc(-100% + 1px));
+    background: color-mix(
+      in srgb,
+      var(--sub-bg-color, #f3f4f6) 88%,
+      var(--input-bg, #f9fafb) 12%
+    );
+  }
+
+  .chat-input-header-toggle-tab:hover,
+  .chat-input-header-toggle-tab:focus-visible {
+    background: color-mix(
+      in srgb,
+      var(--primary-color) 10%,
+      var(--input-bg, #f9fafb) 90%
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--primary-color) 24%,
+      var(--border-color) 76%
+    );
+    border-bottom-color: transparent;
+  }
+
+  .chat-input-header-toggle-tab:active {
+    transform: translateY(calc(-100%));
+  }
+}
+
 html.dark {
   .chat-input-container {
     --input-bg: #1f1f1f;
     --input-focus-bg: #141414;
   }
+
+  .chat-input-header-toggle-shell {
+    --sender-permission-dont-ask-color: #facc15;
+  }
+}
+
+@media (max-width: 720px) {
+  .chat-input-container {
+    --chat-input-header-toggle-offset-top: 4px;
+  }
+
+  .chat-input-header-actions {
+    gap: 4px;
+    padding-inline-end: calc(var(--chat-input-header-toggle-size) + 4px);
+  }
+
+  .chat-input-header-toggle-shell {
+    right: 7px;
+  }
+
+  .chat-input-header-toggle-mode-indicator {
+    padding: 0 4px;
+  }
 }

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

@@ -44,6 +44,7 @@ export function Sender(props: SenderProps) {
           toolbarData={controller.toolbar.toolbarData}
           toolbarRefs={controller.toolbar.toolbarRefs}
           toolbarHandlers={controller.toolbar.toolbarHandlers}
+          sessionTarget={props.sessionTarget}
           showContextPicker={controller.attachments.showContextPicker}
           onCancelContextPicker={controller.onCancelContextPicker}
           onConfirmContextPicker={controller.onConfirmContextPicker}

package/src/components/chat/status-bar/ChatStatusBar.scss

@@ -3,6 +3,8 @@
   width: 100%;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   padding: 0;
   background-color: transparent;
 }
@@ -22,6 +24,89 @@
   }
 }
 
+.chat-status-bar__actions {
+  --sender-control-height: 24px;
+  --sender-control-radius: 6px;
+  --sender-control-hover-bg: var(--nav-hover-bg, #f3f4f6);
+  --sender-control-active-bg: var(--nav-active-bg, #eff6ff);
+  --sender-control-hover-color: var(--text-color, #111827);
+
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.chat-status-bar__actions .sender-select-shell,
+.chat-status-bar__actions .adapter-select-tooltip-target {
+  height: var(--sender-control-height);
+}
+
+.chat-status-bar__actions .account-select,
+.chat-status-bar__actions .adapter-select {
+  color: var(--sub-text-color, #6b7280);
+}
+
+.chat-status-bar__actions .sender-select-shell:hover .account-select,
+.chat-status-bar__actions .account-select:not(.ant-select-disabled):hover,
+.chat-status-bar__actions .adapter-select:not(.ant-select-disabled):hover,
+.chat-status-bar__actions
+  .account-select:not(.ant-select-disabled).ant-select-focused,
+.chat-status-bar__actions
+  .adapter-select:not(.ant-select-disabled).ant-select-focused {
+  box-shadow: inset 0 0 0 1px var(--nav-hover-border, rgba(37, 99, 235, .14));
+}
+
+.chat-status-bar__actions
+  .account-select:not(.ant-select-disabled).ant-select-open,
+.chat-status-bar__actions
+  .adapter-select:not(.ant-select-disabled).ant-select-open {
+  background-color: var(--nav-active-bg, #eff6ff);
+  color: var(--nav-active-text, #2563eb);
+  box-shadow: inset 0 0 0 1px var(--nav-active-border, rgba(37, 99, 235, .22));
+}
+
+.chat-status-bar__actions
+  .account-select:not(.ant-select-disabled).ant-select-open
+  .ant-select-selection-item,
+.chat-status-bar__actions
+  .account-select:not(.ant-select-disabled).ant-select-open
+  .sender-select-arrow,
+.chat-status-bar__actions
+  .adapter-select:not(.ant-select-disabled).ant-select-open
+  .adapter-option__icon,
+.chat-status-bar__actions
+  .adapter-select:not(.ant-select-disabled).ant-select-open
+  .adapter-option__icon--fallback {
+  color: inherit;
+  opacity: 1;
+}
+
 .chat-status-bar--compact .chat-status-bar__content {
   scroll-padding-inline: 8px;
 }
+
+.chat-status-bar--compact {
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+
+  .chat-status-bar__content,
+  .chat-status-bar__actions {
+    width: auto;
+  }
+
+  .chat-status-bar__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .chat-status-bar__actions {
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    margin-left: auto;
+    max-width: none;
+  }
+}