@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

package/src/components/chat/CurrentTodoList.tsx

@@ -1,171 +0,0 @@
-import './CurrentTodoList.scss'
-import type { ChatMessage, ChatMessageContent, ToolInputs } from '@vibe-forge/core'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ChatComposerCard } from './ChatComposerCard'
-
-type TodoItem = ToolInputs['adapter:claude-code:TodoWrite']['todos'][number]
-
-const getTodoStatusIcon = (status: TodoItem['status']) => {
-  if (status === 'completed') {
-    return 'check_circle'
-  }
-
-  if (status === 'in_progress') {
-    return 'progress_activity'
-  }
-
-  return 'radio_button_unchecked'
-}
-
-const getPriorityIcon = (priority?: TodoItem['priority']) => {
-  if (priority === 'high') {
-    return 'keyboard_double_arrow_up'
-  }
-
-  if (priority === 'medium') {
-    return 'remove'
-  }
-
-  return 'keyboard_double_arrow_down'
-}
-
-export function CurrentTodoList({ messages }: { messages: ChatMessage[] }) {
-  const { t } = useTranslation()
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  // Find the latest TodoWrite tool use
-  let latestTodos: TodoItem[] = []
-
-  for (let i = messages.length - 1; i >= 0; i--) {
-    const msg = messages[i]
-    if (msg.role === 'assistant' && Array.isArray(msg.content)) {
-      const todoUse = msg.content.find((c: ChatMessageContent) =>
-        c != null && c.type === 'tool_use' && (
-          c.name === 'TodoWrite' ||
-          c.name === 'todo_write' ||
-          c.name === 'adapter:claude-code:TodoWrite' ||
-          c.name === 'adapter:claude-code:todo_write'
-        )
-      )
-      if (
-        todoUse != null && todoUse.type === 'tool_use' && todoUse.input != null && typeof todoUse.input === 'object'
-      ) {
-        const input = todoUse.input as Partial<ToolInputs['adapter:claude-code:TodoWrite']>
-        if (Array.isArray(input.todos)) {
-          latestTodos = input.todos
-          break
-        }
-      }
-    }
-  }
-
-  if (latestTodos.length === 0) return null
-
-  const completedCount = latestTodos.filter(t => t.status === 'completed').length
-  const inProgressCount = latestTodos.filter(t => t.status === 'in_progress').length
-  const totalCount = latestTodos.length
-  const pendingCount = totalCount - completedCount - inProgressCount
-  const progressPercent = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
-
-  if (totalCount === 0) {
-    return (
-      <div className='current-todo-container empty'>
-        <ChatComposerCard
-          className='current-todo-panel'
-          summaryClassName='current-todo-summary current-todo-summary--empty'
-          summary={
-            <>
-              <span className='material-symbols-rounded'>assignment_late</span>
-              <span className='current-todo-summary__text'>{t('chat.todo.noTasks')}</span>
-            </>
-          }
-          narrow
-        />
-      </div>
-    )
-  }
-
-  const summaryStats = [
-    pendingCount > 0
-      ? { icon: 'radio_button_unchecked', count: pendingCount, className: 'current-todo-summary__stat' }
-      : null,
-    inProgressCount > 0
-      ? {
-        icon: 'progress_activity',
-        count: inProgressCount,
-        className: 'current-todo-summary__stat current-todo-summary__stat--active'
-      }
-      : null,
-    completedCount > 0
-      ? {
-        icon: 'check_circle',
-        count: completedCount,
-        className: 'current-todo-summary__stat current-todo-summary__stat--done'
-      }
-      : null
-  ].filter((item): item is { icon: string; count: number; className: string } => item != null)
-
-  return (
-    <div className={`current-todo-container ${isExpanded ? 'expanded' : ''}`}>
-      <ChatComposerCard
-        className='current-todo-panel'
-        summaryClassName='current-todo-summary'
-        expanded={isExpanded}
-        onToggle={() => setIsExpanded(!isExpanded)}
-        progress={
-          <div className='current-todo-progress'>
-            <div
-              className='current-todo-progress__fill'
-              style={{ width: `${progressPercent}%` }}
-            />
-          </div>
-        }
-        narrow
-        summary={
-          <>
-            <div className='current-todo-summary__headline'>
-              <span className='material-symbols-rounded current-todo-summary__icon'>checklist</span>
-              <span className='current-todo-summary__text'>
-                {t('chat.todo.progress', { completed: completedCount, total: totalCount })}
-              </span>
-            </div>
-            <div className='current-todo-summary__meta'>
-              {summaryStats.map(({ icon, count, className }) => (
-                <span key={`${icon}-${count}`} className={className}>
-                  <span className='material-symbols-rounded'>{icon}</span>
-                  <span>{count}</span>
-                </span>
-              ))}
-              <span className='material-symbols-rounded current-todo-summary__chevron'>
-                {isExpanded ? 'expand_less' : 'expand_more'}
-              </span>
-            </div>
-          </>
-        }
-      >
-        <ol className='current-todo-list'>
-          {latestTodos.map((todo, idx) => (
-            <li key={todo.id || idx} className={`current-todo-item current-todo-item--${todo.status}`}>
-              <span className='material-symbols-rounded current-todo-item__status'>
-                {getTodoStatusIcon(todo.status)}
-              </span>
-              <span className='current-todo-item__index'>{idx + 1}.</span>
-              <div className='current-todo-item__body'>
-                <span className='current-todo-item__text'>{todo.content}</span>
-                {todo.priority != null && todo.priority !== '' && (
-                  <span
-                    className={`material-symbols-rounded current-todo-item__priority current-todo-item__priority--${todo.priority}`}
-                    title={todo.priority}
-                  >
-                    {getPriorityIcon(todo.priority)}
-                  </span>
-                )}
-              </div>
-            </li>
-          ))}
-        </ol>
-      </ChatComposerCard>
-    </div>
-  )
-}

package/src/components/chat/NewSessionGuide.scss

@@ -1,416 +0,0 @@
-.new-session-guide {
-  width: 100%;
-  max-width: 1240px;
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.chat-history-view__new-session-content {
-  align-items: stretch !important;
-  justify-content: flex-start !important;
-  padding: 0 12px 8px !important;
-}
-
-.new-session-guide__main {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  overflow: hidden;
-
-  &::before,
-  &::after {
-    content: '';
-    display: block;
-    flex: 0 0 20%;
-    min-height: 0;
-  }
-}
-
-.new-session-guide__announcements {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-  padding: 2px 4px 8px 2px;
-}
-
-.new-session-guide__announcements-close {
-  border: none;
-  background: transparent;
-  padding: 2px;
-  color: var(--sub-text-color);
-  cursor: pointer;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-.new-session-guide__announcements-close:hover {
-  color: var(--text-color);
-  background: color-mix(in srgb, var(--text-color) 6%, transparent);
-}
-
-.new-session-guide__announcements-close .material-symbols-rounded {
-  font-size: 18px;
-}
-
-.new-session-guide__announcements-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-}
-
-.new-session-guide__announcements-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  min-width: 0;
-}
-
-.new-session-guide__announcements-icon {
-  font-size: 16px;
-  color: var(--sub-text-color);
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-.new-session-guide__announcements-copy {
-  min-width: 0;
-  color: var(--sub-text-color);
-
-  .markdown-body {
-    width: auto;
-    min-width: 0;
-    font-size: 13px;
-    line-height: 1.45;
-    color: inherit;
-  }
-
-  .markdown-body p {
-    margin: 0;
-  }
-
-  .markdown-body a {
-    color: var(--primary-color, #3b82f6);
-  }
-
-  .markdown-body strong {
-    color: var(--text-color);
-    font-weight: 600;
-  }
-}
-
-.new-session-guide__sections {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  max-height: min(100%, 68vh);
-  overflow: hidden;
-}
-
-.new-session-guide__sections.is-expanded {
-  max-height: min(100%, 62vh);
-}
-
-.new-session-guide__sections-header {
-  flex: 0 0 auto;
-  background: var(--bg-color);
-  padding: 18px 1px 0;
-}
-
-.new-session-guide__sections-body {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 0;
-  min-height: 0;
-  padding: 0 1px 0;
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  scrollbar-gutter: stable;
-}
-
-.new-session-guide__sections-body.is-expanded {
-  gap: 12px;
-  padding-bottom: 18px;
-}
-
-.new-session-guide__sections-footer {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  padding: 8px 1px 0;
-  background: var(--bg-color);
-}
-
-.new-session-guide__section {
-  min-width: 0;
-}
-
-.new-session-guide__search {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  padding: 0 0 4px;
-}
-
-.new-session-guide__search-icon {
-  color: var(--sub-text-color);
-  font-size: 14px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.new-session-guide__search-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  background: transparent;
-  color: var(--text-color);
-  font-size: 11px;
-  line-height: 1.3;
-  padding: 0;
-  outline: none;
-
-  &::placeholder {
-    color: color-mix(in srgb, var(--sub-text-color) 94%, transparent);
-  }
-
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-results-button,
-  &::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-}
-
-.new-session-guide__section-title {
-  margin-bottom: 2px;
-  color: var(--sub-text-color);
-  font-size: 10px;
-  line-height: 1.3;
-  font-weight: 600;
-  letter-spacing: .04em;
-}
-
-.new-session-guide__list {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  border-top: 1px solid
-    color-mix(in srgb, var(--border-color) 72%, transparent);
-}
-
-.new-session-guide__list-row {
-  display: flex;
-  align-items: stretch;
-  gap: 4px;
-  border-bottom: 1px solid
-    color-mix(in srgb, var(--border-color) 68%, transparent);
-}
-
-.new-session-guide__list-item {
-  flex: 1;
-  min-width: 0;
-  padding: 5px 0;
-  border: none;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: color .18s ease;
-
-  &:hover,
-  &:focus-visible {
-    color: var(--text-color);
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.new-session-guide__list-item:hover .new-session-guide__list-item-title,
-.new-session-guide__list-item:focus-visible
-  .new-session-guide__list-item-title {
-  color: var(--text-color);
-}
-
-.new-session-guide__list-item-icon {
-  color: var(--sub-text-color);
-  font-size: 15px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.new-session-guide__list-item-copy {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.new-session-guide__list-item-title-row {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.new-session-guide__list-item-title {
-  min-width: 0;
-  color: color-mix(in srgb, var(--sub-text-color) 88%, var(--text-color) 12%);
-  font-size: 11px;
-  line-height: 1.25;
-  font-weight: 400;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: color .18s ease;
-}
-
-.new-session-guide__favorite-button {
-  width: 24px;
-  flex-shrink: 0;
-  border: none;
-  padding: 0;
-  background: transparent;
-  color: color-mix(in srgb, var(--sub-text-color) 88%, transparent);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: color .18s ease;
-
-  .material-symbols-rounded {
-    font-size: 15px;
-    line-height: 1;
-  }
-
-  &:hover,
-  &:focus-visible,
-  &.is-active {
-    color: color-mix(in srgb, #f5c542 84%, var(--text-color) 16%);
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.new-session-guide__empty-search {
-  padding: 4px 0 1px;
-  color: var(--sub-text-color);
-  font-size: 10px;
-  line-height: 1.35;
-}
-
-.new-session-guide__more-button {
-  align-self: flex-start;
-  border: none;
-  background: transparent;
-  padding: 1px 0 0;
-  color: var(--sub-text-color);
-  font-size: 10px;
-  line-height: 1.3;
-  cursor: pointer;
-  transition: color .18s ease;
-
-  &:hover,
-  &:focus-visible {
-    color: var(--text-color);
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.new-session-guide__more-button.is-secondary {
-  color: color-mix(in srgb, var(--sub-text-color) 82%, transparent);
-}
-
-.new-session-guide__status-badge {
-  flex-shrink: 0;
-  padding: 1px 4px;
-  border-radius: 999px;
-  color: color-mix(in srgb, var(--sub-text-color) 90%, var(--text-color) 10%);
-  background: color-mix(in srgb, var(--sub-text-color) 10%, transparent);
-  font-size: 9px;
-  line-height: 1.2;
-  white-space: nowrap;
-}
-
-@media (max-width: 960px) {
-  .chat-history-view__new-session-content {
-    padding: max(0px, env(safe-area-inset-top))
-      max(12px, env(safe-area-inset-right)) 8px
-      max(12px, env(safe-area-inset-left)) !important;
-  }
-
-  .new-session-guide__announcements {
-    gap: 8px;
-    padding: 4px 2px 6px 0;
-  }
-
-  .new-session-guide__announcements-copy .markdown-body {
-    font-size: 12px;
-  }
-
-  .new-session-guide__sections {
-    min-height: 0;
-    max-height: min(100%, 64vh);
-  }
-
-  .new-session-guide__sections.is-expanded {
-    max-height: min(100%, 58vh);
-  }
-
-  .new-session-guide__sections-header {
-    padding-top: 18px;
-  }
-
-  .new-session-guide__sections-body {
-    gap: 7px;
-  }
-
-  .new-session-guide__sections-body.is-expanded {
-    gap: 10px;
-    padding-bottom: 12px;
-  }
-
-  .new-session-guide__sections-footer {
-    padding-top: 6px;
-  }
-
-  .new-session-guide__search-input {
-    font-size: 10px;
-  }
-
-  .new-session-guide__list-item-title {
-    font-size: 10px;
-  }
-}

package/src/components/chat/NewSessionGuide.tsx

@@ -1,69 +0,0 @@
-import './NewSessionGuide.scss'
-
-import { useAtom, useAtomValue } from 'jotai'
-
-import type { ConversationStarterConfig } from '@vibe-forge/types'
-
-import { MarkdownContent } from '#~/components/MarkdownContent'
-import { showAnnouncementsAtom, showNewSessionStarterListAtom } from '#~/store/index.js'
-
-import { NewSessionGuideStarterList } from './NewSessionGuideStarterList'
-
-export function NewSessionGuide({
-  announcements,
-  startupPresets,
-  builtinActions,
-  onApplyStarter
-}: {
-  announcements: string[]
-  startupPresets: ConversationStarterConfig[]
-  builtinActions: ConversationStarterConfig[]
-  onApplyStarter: (starter: ConversationStarterConfig) => void
-}) {
-  const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
-  const showNewSessionStarterList = useAtomValue(showNewSessionStarterListAtom)
-  const visibleAnnouncements = showAnnouncements ? announcements : []
-  const visibleStartupPresets = showNewSessionStarterList ? startupPresets : []
-  const visibleBuiltinActions = showNewSessionStarterList ? builtinActions : []
-  const hasStarterList = visibleStartupPresets.length > 0 || visibleBuiltinActions.length > 0
-  const hasGuideContent = visibleAnnouncements.length > 0 || hasStarterList
-
-  if (!hasGuideContent) {
-    return null
-  }
-
-  return (
-    <div className='new-session-guide'>
-      {visibleAnnouncements.length > 0 && (
-        <div className='new-session-guide__announcements'>
-          <div className='new-session-guide__announcements-list'>
-            {visibleAnnouncements.map((item, index) => (
-              <div key={`${item}-${index}`} className='new-session-guide__announcements-item'>
-                <span className='material-symbols-rounded new-session-guide__announcements-icon'>campaign</span>
-                <div className='new-session-guide__announcements-copy'>
-                  <MarkdownContent content={item} />
-                </div>
-              </div>
-            ))}
-          </div>
-          <button
-            type='button'
-            className='new-session-guide__announcements-close'
-            onClick={() => setShowAnnouncements(false)}
-          >
-            <span className='material-symbols-rounded'>close</span>
-          </button>
-        </div>
-      )}
-      {hasStarterList && (
-        <div className='new-session-guide__main'>
-          <NewSessionGuideStarterList
-            startupPresets={visibleStartupPresets}
-            builtinActions={visibleBuiltinActions}
-            onApplyStarter={onApplyStarter}
-          />
-        </div>
-      )}
-    </div>
-  )
-}