@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/QueuedMessagesCard.scss

@@ -0,0 +1,195 @@
+.queued-messages-card {
+  &__summary {
+    align-items: center;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__headline {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__headline-icon {
+    flex: 0 0 auto;
+    font-size: 15px;
+    color: var(--primary-color, #2563eb);
+  }
+
+  &__headline-copy {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  &__headline-title {
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--text-color);
+  }
+
+  &__headline-meta {
+    font-size: 10px;
+    line-height: 1.2;
+    color: var(--sub-text-color, #6b7280);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 5px 8px;
+    border: 1px solid rgba(148, 163, 184, .16);
+    border-radius: 10px;
+    background: transparent;
+    transition: background-color .18s ease, border-color .18s ease;
+
+    &:hover {
+      background: var(--tag-hover-bg, rgba(148, 163, 184, .08));
+      border-color: rgba(148, 163, 184, .26);
+    }
+  }
+
+  &__item-main {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+  }
+
+  &__drag {
+    flex: 0 0 auto;
+    color: var(--sub-text-color, #94a3b8);
+    font-size: 14px;
+    cursor: grab;
+  }
+
+  &__item-copy {
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__item-summary {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__flags {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex: 0 0 auto;
+  }
+
+  &__flag {
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: var(--tag-bg, rgba(15, 23, 42, .06));
+    color: var(--sub-text-color, #6b7280);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    .material-symbols-rounded {
+      font-size: 12px;
+      line-height: 1;
+    }
+  }
+
+  &__item-text {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--text-color);
+    font-size: 12px;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  &__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    flex: 0 0 auto;
+  }
+
+  &__action {
+    width: 24px;
+    height: 24px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--sub-text-color, #6b7280);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color .18s ease, color .18s ease;
+
+    &:hover {
+      background: var(--tag-hover-bg, rgba(148, 163, 184, .12));
+    }
+
+    .material-symbols-rounded {
+      font-size: 14px;
+      line-height: 1;
+    }
+  }
+
+  &__action--edit {
+    color: var(--sub-text-color, #6b7280);
+
+    &:hover {
+      background: var(--tag-hover-bg, rgba(148, 163, 184, .12));
+      color: var(--text-color);
+    }
+  }
+
+  &__action--move {
+    color: var(--primary-color, #2563eb);
+
+    &:hover {
+      background: color-mix(
+        in srgb,
+        var(--primary-color, #2563eb) 12%,
+        transparent
+      );
+      color: color-mix(
+        in srgb,
+        var(--primary-color, #2563eb) 82%,
+        var(--text-color) 18%
+      );
+    }
+  }
+
+  &__action--delete {
+    color: #dc2626;
+
+    &:hover {
+      background: rgba(220, 38, 38, .12);
+      color: #b91c1c;
+    }
+  }
+}

package/src/components/chat/QueuedMessagesCard.tsx

@@ -0,0 +1,170 @@
+import './QueuedMessagesCard.scss'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ChatMessageContent, SessionQueuedMessage, SessionQueuedMessageMode } from '@vibe-forge/core'
+
+import { ChatComposerCard } from './ChatComposerCard'
+
+const getSummaryText = (content: ChatMessageContent[]) => {
+  const text = content
+    .filter((item): item is Extract<ChatMessageContent, { type: 'text' }> => item.type === 'text')
+    .map(item => item.text.trim())
+    .filter(Boolean)
+    .join('\n')
+
+  return text
+}
+
+const getContentFlags = (content: ChatMessageContent[]) => ({
+  hasImages: content.some(item => item.type === 'image'),
+  hasReferences: content.some(item => item.type === 'file')
+})
+
+const reorderIds = (ids: string[], draggedId: string, targetId: string) => {
+  if (draggedId === targetId) {
+    return ids
+  }
+
+  const current = [...ids]
+  const fromIndex = current.indexOf(draggedId)
+  const toIndex = current.indexOf(targetId)
+  if (fromIndex === -1 || toIndex === -1) {
+    return ids
+  }
+
+  current.splice(fromIndex, 1)
+  current.splice(toIndex, 0, draggedId)
+  return current
+}
+
+export function QueuedMessagesCard({
+  mode,
+  items,
+  onMove,
+  onDelete,
+  onEdit,
+  onReorder
+}: {
+  mode: SessionQueuedMessageMode
+  items: SessionQueuedMessage[]
+  onMove: (item: SessionQueuedMessage, targetMode: SessionQueuedMessageMode) => void | Promise<unknown>
+  onDelete: (item: SessionQueuedMessage) => void | Promise<unknown>
+  onEdit: (item: SessionQueuedMessage) => void | Promise<unknown>
+  onReorder: (ids: string[]) => void | Promise<unknown>
+}) {
+  const { t } = useTranslation()
+  const [draggedId, setDraggedId] = useState<string | null>(null)
+
+  const summaryLabel = mode === 'next'
+    ? t('chat.queue.nextTitle')
+    : t('chat.queue.steerTitle')
+  const summaryCount = t('chat.queue.count', { count: items.length })
+
+  if (items.length === 0) {
+    return null
+  }
+
+  const targetMode = mode === 'next' ? 'steer' : 'next'
+
+  return (
+    <ChatComposerCard
+      className='queued-messages-card'
+      summaryClassName='queued-messages-card__summary'
+      bodyClassName='queued-messages-card__body'
+      narrow
+      summary={
+        <div className='queued-messages-card__headline'>
+          <span className='material-symbols-rounded queued-messages-card__headline-icon'>
+            {mode === 'next' ? 'pending' : 'schedule'}
+          </span>
+          <div className='queued-messages-card__headline-copy'>
+            <div className='queued-messages-card__headline-title'>{summaryLabel}</div>
+            <div className='queued-messages-card__headline-meta'>{summaryCount}</div>
+          </div>
+        </div>
+      }
+    >
+      <div className='queued-messages-card__list'>
+        {items.map((item) => {
+          const summaryText = getSummaryText(item.content)
+          const { hasImages, hasReferences } = getContentFlags(item.content)
+          return (
+            <div
+              key={item.id}
+              className='queued-messages-card__item'
+              draggable
+              onDragStart={() => setDraggedId(item.id)}
+              onDragEnd={() => setDraggedId(null)}
+              onDragOver={(event) => {
+                event.preventDefault()
+              }}
+              onDrop={(event) => {
+                event.preventDefault()
+                if (draggedId == null) {
+                  return
+                }
+                const nextIds = reorderIds(items.map(queueItem => queueItem.id), draggedId, item.id)
+                setDraggedId(null)
+                void onReorder(nextIds)
+              }}
+            >
+              <div className='queued-messages-card__item-main'>
+                <span className='queued-messages-card__drag material-symbols-rounded' aria-hidden='true'>
+                  drag_indicator
+                </span>
+                <div className='queued-messages-card__item-copy'>
+                  <div className='queued-messages-card__item-summary'>
+                    {(hasImages || hasReferences) && (
+                      <div className='queued-messages-card__flags'>
+                        {hasImages && (
+                          <span className='queued-messages-card__flag' title={t('chat.queue.hasImage')}>
+                            <span className='material-symbols-rounded'>image</span>
+                          </span>
+                        )}
+                        {hasReferences && (
+                          <span className='queued-messages-card__flag' title={t('chat.queue.hasReference')}>
+                            <span className='material-symbols-rounded'>attach_file</span>
+                          </span>
+                        )}
+                      </div>
+                    )}
+                    <div className='queued-messages-card__item-text'>
+                      {summaryText !== '' ? summaryText : t('chat.queue.attachmentsOnly')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='queued-messages-card__actions'>
+                <button
+                  type='button'
+                  className='queued-messages-card__action queued-messages-card__action--move'
+                  onClick={() => void onMove(item, targetMode)}
+                  title={t(targetMode === 'next' ? 'chat.queue.moveToNext' : 'chat.queue.moveToSteer')}
+                  aria-label={t(targetMode === 'next' ? 'chat.queue.moveToNext' : 'chat.queue.moveToSteer')}
+                >
+                  <span className='material-symbols-rounded'>swap_horiz</span>
+                </button>
+                <button
+                  type='button'
+                  className='queued-messages-card__action queued-messages-card__action--edit'
+                  onClick={() => void onEdit(item)}
+                >
+                  <span className='material-symbols-rounded'>edit</span>
+                </button>
+                <button
+                  type='button'
+                  className='queued-messages-card__action queued-messages-card__action--delete'
+                  onClick={() => void onDelete(item)}
+                >
+                  <span className='material-symbols-rounded'>delete</span>
+                </button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </ChatComposerCard>
+  )
+}

package/src/components/chat/git-controls/BranchSwitcherDropdown.tsx

@@ -1,11 +1,15 @@
 import { Button, Dropdown, Empty, Input, Spin } from 'antd'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { GitBranchSummary, GitRepositoryState } from '@vibe-forge/types'
 
+import { BranchSwitcherResults } from './BranchSwitcherResults'
+
 export function BranchSwitcherDropdown({
   availableLocalBranches,
   currentBranchLabel,
+  compact = false,
   isBusy,
   isLoading,
   open,
@@ -13,6 +17,7 @@ export function BranchSwitcherDropdown({
   branchQuery,
   canCreateBranch,
   hasBranchResults,
+  placement = 'bottomLeft',
   remoteBranches,
   onCreateBranch,
   onOpenChange,
@@ -20,6 +25,7 @@ export function BranchSwitcherDropdown({
   onSwitchBranch
 }: {
   availableLocalBranches: GitBranchSummary[]
+  compact?: boolean
   currentBranchLabel: string
   isBusy: boolean
   isLoading: boolean
@@ -28,6 +34,7 @@ export function BranchSwitcherDropdown({
   branchQuery: string
   canCreateBranch: boolean
   hasBranchResults: boolean
+  placement?: 'bottomLeft' | 'topLeft'
   remoteBranches: GitBranchSummary[]
   onCreateBranch: (name: string) => void
   onOpenChange: (open: boolean) => void
@@ -35,67 +42,57 @@ export function BranchSwitcherDropdown({
   onSwitchBranch: (branch: GitBranchSummary) => void
 }) {
   const { t } = useTranslation()
-
-  const renderBranchSection = (title: string, branches: GitBranchSummary[]) => {
-    if (branches.length === 0) {
-      return null
-    }
-
-    return (
-      <div className='chat-header-git__section'>
-        <span className='chat-header-git__section-label'>{title}</span>
-        {branches.map(branch => {
-          return (
-            <button
-              key={`${branch.kind}:${branch.name}`}
-              type='button'
-              className='chat-header-git__branch-row'
-              disabled={isBusy}
-              title={branch.name}
-              onClick={() => onSwitchBranch(branch)}
-            >
-              <div className='chat-header-git__branch-row-main'>
-                <span className='chat-header-git__row-icon material-symbols-rounded'>
-                  {branch.kind === 'local' ? 'call_split' : 'cloud_sync'}
-                </span>
-                <span className='chat-header-git__row-copy'>
-                  <span className='chat-header-git__row-title'>{branch.name}</span>
-                </span>
-              </div>
-              {branch.isCurrent
-                ? (
-                  <span className='chat-header-git__row-state material-symbols-rounded'>check</span>
-                )
-                : null}
-            </button>
-          )
-        })}
-      </div>
-    )
-  }
+  const [displayMode, setDisplayMode] = useState<'flat' | 'tree'>('tree')
 
   return (
     <Dropdown
       open={open}
-      placement='bottomLeft'
+      placement={placement}
       trigger={['click']}
       onOpenChange={onOpenChange}
       dropdownRender={() => (
         <div className='chat-header-git__overlay chat-header-git__overlay--branches'>
-          <Input
-            allowClear
-            autoFocus
-            className='chat-header-git__search'
-            placeholder={t('chat.gitSearchBranches')}
-            prefix={<span className='material-symbols-rounded'>search</span>}
-            value={branchQuery}
-            onChange={(event) => onQueryChange(event.target.value)}
-            onPressEnter={() => {
-              if (canCreateBranch) {
-                onCreateBranch(branchQuery)
-              }
-            }}
-          />
+          <div className='chat-header-git__search-row'>
+            <Input
+              allowClear
+              autoFocus
+              className='chat-header-git__search'
+              placeholder={t('chat.gitSearchBranches')}
+              prefix={<span className='material-symbols-rounded'>search</span>}
+              value={branchQuery}
+              onChange={(event) => onQueryChange(event.target.value)}
+              onPressEnter={() => {
+                if (canCreateBranch) {
+                  onCreateBranch(branchQuery)
+                }
+              }}
+            />
+
+            <div
+              className='chat-header-git__view-switch'
+              role='tablist'
+              aria-label={t('chat.gitBranchViewMode')}
+            >
+              <button
+                type='button'
+                className={`chat-header-git__view-button ${displayMode === 'tree' ? 'is-active' : ''}`}
+                title={t('chat.gitBranchViewTree')}
+                aria-label={t('chat.gitBranchViewTree')}
+                onClick={() => setDisplayMode('tree')}
+              >
+                <span className='material-symbols-rounded'>account_tree</span>
+              </button>
+              <button
+                type='button'
+                className={`chat-header-git__view-button ${displayMode === 'flat' ? 'is-active' : ''}`}
+                title={t('chat.gitBranchViewFlat')}
+                aria-label={t('chat.gitBranchViewFlat')}
+                onClick={() => setDisplayMode('flat')}
+              >
+                <span className='material-symbols-rounded'>reorder</span>
+              </button>
+            </div>
+          </div>
 
           {canCreateBranch && (
             <button
@@ -124,8 +121,14 @@ export function BranchSwitcherDropdown({
             : hasBranchResults
             ? (
               <div className='chat-header-git__sections'>
-                {renderBranchSection(t('chat.gitBranchesLocal'), availableLocalBranches)}
-                {renderBranchSection(t('chat.gitBranchesRemote'), remoteBranches)}
+                <BranchSwitcherResults
+                  availableLocalBranches={availableLocalBranches}
+                  branchQuery={branchQuery}
+                  isBusy={isBusy}
+                  mode={displayMode}
+                  remoteBranches={remoteBranches}
+                  onSwitchBranch={onSwitchBranch}
+                />
               </div>
             )
             : (
@@ -141,7 +144,9 @@ export function BranchSwitcherDropdown({
     >
       <Button
         type='text'
-        className={`chat-header-git__trigger ${open ? 'is-open' : ''} ${isBusy ? 'is-disabled' : ''}`}
+        className={`chat-header-git__trigger chat-header-git__trigger--branch ${open ? 'is-open' : ''} ${
+          isBusy ? 'is-disabled' : ''
+        } ${compact ? 'is-compact' : ''}`.trim()}
         title={t('chat.gitBranchSwitcher')}
         aria-label={t('chat.gitBranchSwitcher')}
       >

package/src/components/chat/git-controls/BranchSwitcherResults.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { GitBranchSummary } from '@vibe-forge/types'
+
+import { BranchTreeEntries } from './BranchTreeEntries'
+import type { GitBranchDisplayMode } from './git-branch-tree'
+import {
+  buildGitBranchTree,
+  collectGitBranchTreeFolderKeys,
+  getGitBranchTreeFolderKeysForBranch
+} from './git-branch-tree'
+
+export function BranchSwitcherResults({
+  availableLocalBranches,
+  branchQuery,
+  isBusy,
+  mode,
+  remoteBranches,
+  onSwitchBranch
+}: {
+  availableLocalBranches: GitBranchSummary[]
+  branchQuery: string
+  isBusy: boolean
+  mode: GitBranchDisplayMode
+  remoteBranches: GitBranchSummary[]
+  onSwitchBranch: (branch: GitBranchSummary) => void
+}) {
+  const { t } = useTranslation()
+  const localBranchTree = useMemo(
+    () => buildGitBranchTree(availableLocalBranches, 'local'),
+    [availableLocalBranches]
+  )
+  const remoteBranchTree = useMemo(
+    () => buildGitBranchTree(remoteBranches, 'remote'),
+    [remoteBranches]
+  )
+  const [collapsedFolderKeys, setCollapsedFolderKeys] = useState<string[]>([])
+  const hasSearchQuery = branchQuery.trim() !== ''
+  const currentLocalBranch = useMemo(
+    () => availableLocalBranches.find(branch => branch.isCurrent),
+    [availableLocalBranches]
+  )
+  const currentRemoteBranch = useMemo(
+    () => remoteBranches.find(branch => branch.isCurrent),
+    [remoteBranches]
+  )
+
+  const unifiedTreeEntries = useMemo(() => {
+    const entries = []
+    if (localBranchTree.length > 0) {
+      entries.push({
+        type: 'folder' as const,
+        folder: {
+          entries: localBranchTree,
+          hasCurrentBranch: currentLocalBranch != null,
+          key: 'local',
+          label: t('chat.gitBranchesLocal')
+        }
+      })
+    }
+    if (remoteBranchTree.length > 0) {
+      entries.push({
+        type: 'folder' as const,
+        folder: {
+          entries: remoteBranchTree,
+          hasCurrentBranch: currentRemoteBranch != null,
+          key: 'remote',
+          label: t('chat.gitBranchesRemote')
+        }
+      })
+    }
+
+    return entries.sort((left, right) => {
+      if (left.folder.hasCurrentBranch !== right.folder.hasCurrentBranch) {
+        return left.folder.hasCurrentBranch ? -1 : 1
+      }
+
+      return left.folder.label.localeCompare(right.folder.label)
+    })
+  }, [currentLocalBranch, currentRemoteBranch, localBranchTree, remoteBranchTree, t])
+
+  const allFolderKeys = useMemo(
+    () => new Set(collectGitBranchTreeFolderKeys(unifiedTreeEntries)),
+    [unifiedTreeEntries]
+  )
+  const defaultExpandedFolderKeys = useMemo(
+    () =>
+      new Set([
+        ...(currentLocalBranch != null ? getGitBranchTreeFolderKeysForBranch(currentLocalBranch, 'local') : []),
+        ...(currentRemoteBranch != null ? getGitBranchTreeFolderKeysForBranch(currentRemoteBranch, 'remote') : [])
+      ]),
+    [currentLocalBranch, currentRemoteBranch]
+  )
+
+  useEffect(() => {
+    setCollapsedFolderKeys(
+      Array.from(allFolderKeys).filter(key => !defaultExpandedFolderKeys.has(key))
+    )
+  }, [allFolderKeys, defaultExpandedFolderKeys])
+
+  const toggleFolder = (folderKey: string) => {
+    setCollapsedFolderKeys(currentKeys => (
+      currentKeys.includes(folderKey)
+        ? currentKeys.filter(key => key !== folderKey)
+        : [...currentKeys, folderKey]
+    ))
+  }
+
+  const renderBranchSection = (title: string, branches: GitBranchSummary[]) => {
+    if (branches.length === 0) {
+      return null
+    }
+
+    return (
+      <div className='chat-header-git__section'>
+        <span className='chat-header-git__section-label'>{title}</span>
+        {branches.map(branch => {
+          return (
+            <button
+              key={`${branch.kind}:${branch.name}`}
+              type='button'
+              className='chat-header-git__branch-row'
+              disabled={isBusy}
+              title={branch.name}
+              onClick={() => onSwitchBranch(branch)}
+            >
+              <div className='chat-header-git__branch-row-main'>
+                <span className='chat-header-git__row-icon material-symbols-rounded'>
+                  {branch.kind === 'local' ? 'call_split' : 'cloud_sync'}
+                </span>
+                <span className='chat-header-git__row-copy'>
+                  <span className='chat-header-git__row-title'>{branch.name}</span>
+                </span>
+              </div>
+              {branch.isCurrent
+                ? (
+                  <span className='chat-header-git__row-state material-symbols-rounded'>check</span>
+                )
+                : null}
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return mode === 'tree'
+    ? (
+      <div className='chat-header-git__branch-tree'>
+        <BranchTreeEntries
+          collapsedFolderKeys={collapsedFolderKeys}
+          hasSearchQuery={hasSearchQuery}
+          isBusy={isBusy}
+          treeEntries={unifiedTreeEntries}
+          onSwitchBranch={onSwitchBranch}
+          onToggleFolder={toggleFolder}
+        />
+      </div>
+    )
+    : (
+      <>
+        {renderBranchSection(t('chat.gitBranchesLocal'), availableLocalBranches)}
+        {renderBranchSection(t('chat.gitBranchesRemote'), remoteBranches)}
+      </>
+    )
+}