@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/components/chat/ChatSettingsView.tsx

@@ -1,24 +0,0 @@
-import type { Session } from '@vibe-forge/core'
-import type { SessionInfo } from '@vibe-forge/types'
-
-import { SessionSettingsPanel } from './ChatHeader'
-
-export function ChatSettingsView({
-  session,
-  sessionInfo,
-  onClose
-}: {
-  session: Session
-  sessionInfo: SessionInfo | null
-  onClose: () => void
-}) {
-  return (
-    <div className='chat-settings-panel'>
-      <SessionSettingsPanel
-        session={session}
-        sessionInfo={sessionInfo}
-        onClose={onClose}
-      />
-    </div>
-  )
-}

package/src/components/chat/ChatTimelineView.scss

@@ -1,147 +0,0 @@
-.chat-timeline-view {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  padding: 6px 12px 12px;
-  overflow: auto;
-  min-width: 0;
-  overscroll-behavior: contain;
-}
-
-.chat-timeline-view__tabs {
-  display: none;
-}
-
-.chat-timeline-view__panel {
-  min-width: 0;
-  min-height: 0;
-}
-
-.session-timeline-section {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-.session-timeline-section--fixed {
-  flex: 0 0 25%;
-}
-
-.session-timeline-section--flex {
-  flex: 1 1 auto;
-}
-
-.session-timeline-section--row {
-  flex-direction: row;
-  gap: 16px;
-}
-
-.session-timeline-column {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.session-timeline-column--graph {
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-.session-timeline-column--events {
-  flex: 1 1 150%;
-}
-
-.session-timeline-section:not(:last-child) {
-  border-bottom: 1px solid var(--sub-border-color);
-}
-
-.session-timeline-section > .session-timeline-panel,
-.session-timeline-section > .session-timeline-event-table,
-.session-timeline-column > .session-timeline-panel,
-.session-timeline-column > .session-timeline-event-table {
-  flex: 1 1 auto;
-}
-
-@media (max-width: 960px) {
-  .chat-timeline-view {
-    padding: 6px 8px 8px;
-    gap: 12px;
-  }
-
-  .chat-timeline-view--compact {
-    gap: 8px;
-  }
-
-  .chat-timeline-view__tabs {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    width: 100%;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    overflow: hidden;
-    background: var(--bg-color);
-  }
-
-  .chat-timeline-view__tab {
-    min-width: 0;
-    min-height: 34px;
-    padding: 7px 6px;
-    border: 0;
-    border-right: 1px solid var(--border-color);
-    background: transparent;
-    color: var(--sub-text-color);
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 1.2;
-    text-align: center;
-
-    &:last-child {
-      border-right: 0;
-    }
-
-    &.is-active {
-      background: var(--nav-active-bg, #eff6ff);
-      color: var(--nav-active-text, #2563eb);
-    }
-  }
-
-  .chat-timeline-view__panel {
-    display: flex;
-    flex: 1 1 auto;
-  }
-
-  .chat-timeline-view__panel--diagram {
-    min-height: 320px;
-  }
-
-  .chat-timeline-view__panel > .session-timeline-panel,
-  .chat-timeline-view__panel > .session-timeline-event-table {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .session-timeline-section {
-    overflow: visible;
-  }
-
-  .session-timeline-section--fixed {
-    flex-basis: auto;
-  }
-
-  .session-timeline-section--row {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .session-timeline-column--graph,
-  .session-timeline-column--events {
-    flex: 1 1 auto;
-  }
-}

package/src/components/chat/ChatTimelineView.tsx

@@ -1,200 +0,0 @@
-import './ChatTimelineView.scss'
-
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { ChatMessage } from '@vibe-forge/core'
-
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { SessionTimelinePanel } from './session-timeline-panel'
-import { SessionTimelineEventList } from './session-timeline-panel/EventList'
-import type { Task } from './session-timeline-panel/types'
-
-const mockTimelineTask: Task = {
-  startTime: '09:40:00',
-  endTime: '11:30:48',
-  events: [
-    {
-      type: 'tool__StartTasks',
-      startTime: '09:41:02',
-      endTime: '10:10:25',
-      tasks: {
-        taskA: {
-          startTime: '09:41:10',
-          endTime: '09:55:02',
-          description: 'Task A'
-        },
-        taskB: {
-          startTime: '09:41:10',
-          endTime: '09:50:40',
-          description: 'Task B'
-        },
-        taskC: {
-          startTime: '09:41:10',
-          endTime: '10:10:20',
-          description: 'Task C',
-          events: [
-            {
-              type: 'tool__StartTasks',
-              startTime: '09:48:00',
-              endTime: '10:05:30',
-              tasks: {
-                taskC0: {
-                  startTime: '09:49:10',
-                  endTime: '10:05:25',
-                  events: [
-                    {
-                      type: 'tool__AskUserQuestion',
-                      startTime: '09:57:00',
-                      endTime: '09:59:23'
-                    },
-                    {
-                      type: 'user__Prompt',
-                      startTime: '09:58:10',
-                      endTime: '09:58:20'
-                    }
-                  ]
-                }
-              }
-            },
-            {
-              type: 'tool__Edit',
-              startTime: '09:57:10',
-              endTime: '09:59:20'
-            },
-            {
-              type: 'tool__ResumeTask',
-              startTime: '09:59:22',
-              endTime: '10:05:30'
-            }
-          ]
-        }
-      }
-    },
-    {
-      type: 'tool__StartTasks',
-      startTime: '10:41:02',
-      endTime: '11:10:25',
-      tasks: {
-        taskA1: {
-          startTime: '10:41:10',
-          endTime: '10:55:02',
-          description: 'Task A1'
-        },
-        taskB1: {
-          startTime: '10:41:10',
-          endTime: '10:50:40',
-          description: 'Task B1'
-        },
-        taskC1: {
-          startTime: '10:41:10',
-          endTime: '11:10:20',
-          description: 'Task C1',
-          events: [
-            {
-              type: 'tool__StartTasks',
-              startTime: '10:48:00',
-              endTime: '11:05:30',
-              tasks: {
-                taskC10: {
-                  startTime: '10:49:10',
-                  endTime: '11:05:25',
-                  events: [
-                    {
-                      type: 'tool__AskUserQuestion',
-                      startTime: '10:57:00',
-                      endTime: '10:59:23'
-                    },
-                    {
-                      type: 'user__Prompt',
-                      startTime: '10:58:10',
-                      endTime: '10:58:20'
-                    }
-                  ]
-                }
-              }
-            },
-            {
-              type: 'tool__Edit',
-              startTime: '10:57:10',
-              endTime: '10:59:20'
-            },
-            {
-              type: 'tool__ResumeTask',
-              startTime: '10:59:22',
-              endTime: '11:05:30'
-            }
-          ]
-        }
-      }
-    }
-  ]
-}
-
-export function ChatTimelineView({
-  messages
-}: {
-  messages: ChatMessage[]
-}) {
-  const { t } = useTranslation()
-  const { isCompactLayout } = useResponsiveLayout()
-  const [compactView, setCompactView] = React.useState<'events' | 'gantt' | 'git'>('events')
-
-  if (isCompactLayout) {
-    const compactViews = [
-      { key: 'events' as const, label: t('chat.timeline.eventListTitle') },
-      { key: 'gantt' as const, label: t('chat.timeline.viewGantt') },
-      { key: 'git' as const, label: t('chat.timeline.viewGit') }
-    ]
-    return (
-      <div className='chat-timeline-view chat-timeline-view--compact'>
-        <div className='chat-timeline-view__tabs' role='tablist' aria-label={t('chat.timelineTiming')}>
-          {compactViews.map((item) => (
-            <button
-              key={item.key}
-              type='button'
-              role='tab'
-              aria-selected={compactView === item.key}
-              className={`chat-timeline-view__tab ${compactView === item.key ? 'is-active' : ''}`}
-              onClick={() => setCompactView(item.key)}
-            >
-              {item.label}
-            </button>
-          ))}
-        </div>
-
-        <section
-          className={`chat-timeline-view__panel ${
-            compactView === 'events' ? 'chat-timeline-view__panel--events' : 'chat-timeline-view__panel--diagram'
-          }`}
-        >
-          {compactView === 'events' && <SessionTimelineEventList task={mockTimelineTask} />}
-          {compactView === 'gantt' && <SessionTimelinePanel task={mockTimelineTask} viewMode='gantt' />}
-          {compactView === 'git' && <SessionTimelinePanel task={mockTimelineTask} viewMode='git' />}
-        </section>
-      </div>
-    )
-  }
-
-  return (
-    <div className='chat-timeline-view'>
-      <section className='session-timeline-section session-timeline-section--fixed'>
-        <SessionTimelinePanel
-          task={mockTimelineTask}
-          viewMode='gantt'
-        />
-      </section>
-      <section className='session-timeline-section session-timeline-section--flex session-timeline-section--row'>
-        <div className='session-timeline-column session-timeline-column--graph'>
-          <SessionTimelinePanel
-            task={mockTimelineTask}
-            viewMode='git'
-          />
-        </div>
-        <div className='session-timeline-column session-timeline-column--events'>
-          <SessionTimelineEventList task={mockTimelineTask} />
-        </div>
-      </section>
-    </div>
-  )
-}

package/src/components/chat/CurrentTodoList.scss

@@ -1,256 +0,0 @@
-.current-todo-container {
-  --todo-track-bg: rgba(148, 163, 184, .12);
-  --todo-track-fill: linear-gradient(90deg, #22c55e, #16a34a);
-  --todo-text: var(--text-color);
-  --todo-sub-text: var(--sub-text-color);
-  --todo-pending-icon: #94a3b8;
-  --todo-active-icon: var(--primary-color, #2563eb);
-  --todo-done-icon: #16a34a;
-  --todo-hover-bg: rgba(148, 163, 184, .05);
-  --todo-divider: rgba(148, 163, 184, .18);
-
-  position: relative;
-  width: 100%;
-  margin: 0;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-
-  &.empty {
-    opacity: .6;
-  }
-}
-
-.current-todo-panel {
-  position: relative;
-}
-
-.current-todo-summary {
-  &--empty {
-    cursor: default;
-  }
-
-  &__headline,
-  &__meta {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    min-width: 0;
-  }
-
-  &__headline {
-    flex: 1;
-    gap: 6px;
-  }
-
-  &__icon {
-    font-size: 15px;
-    color: var(--todo-active-icon);
-  }
-
-  &__text {
-    min-width: 0;
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--todo-text);
-    line-height: 1.25;
-  }
-
-  &__meta {
-    gap: 0;
-  }
-
-  &__stat {
-    display: inline-flex;
-    align-items: center;
-    gap: 3px;
-    padding-left: 5px;
-    margin-left: 5px;
-    border-left: 1px solid var(--todo-divider);
-    color: var(--todo-sub-text);
-    font-size: 10px;
-    font-weight: 600;
-    line-height: 1;
-
-    .material-symbols-rounded {
-      font-size: 12px;
-      line-height: 1;
-    }
-
-    &--active {
-      color: var(--todo-active-icon);
-    }
-
-    &--done {
-      color: var(--todo-done-icon);
-    }
-  }
-
-  &__chevron {
-    margin-left: 5px;
-    padding-left: 5px;
-    border-left: 1px solid var(--todo-divider);
-    font-size: 14px;
-    color: var(--todo-pending-icon);
-    transition: transform .22s ease;
-  }
-}
-
-.current-todo-progress {
-  height: 4px;
-  margin: 0 6px;
-  overflow: hidden;
-  background: var(--todo-track-bg);
-  border-radius: 999px;
-
-  &__fill {
-    height: 100%;
-    background: var(--todo-track-fill);
-    border-radius: inherit;
-    transition: width .3s ease;
-  }
-}
-
-.current-todo-list {
-  max-height: min(240px, 36vh);
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-  list-style: none;
-}
-
-.current-todo-item {
-  display: grid;
-  grid-template-columns: auto auto minmax(0, 1fr);
-  align-items: center;
-  gap: 6px;
-  padding: 6px 5px;
-  border-radius: 8px;
-  transition: transform .22s ease, opacity .18s ease;
-
-  & + & {
-    margin-top: 1px;
-  }
-
-  &--completed {
-    opacity: .72;
-  }
-}
-
-.current-todo-item__status {
-  font-size: 14px;
-  line-height: 1;
-  color: var(--todo-pending-icon);
-}
-
-.current-todo-item__index {
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--todo-sub-text);
-  line-height: 1.2;
-}
-
-.current-todo-item__body {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-}
-
-.current-todo-item__text {
-  flex: 1;
-  min-width: 0;
-  font-size: 11px;
-  line-height: 1.25;
-  color: var(--todo-text);
-}
-
-.current-todo-item__priority {
-  margin-left: auto;
-  flex-shrink: 0;
-  font-size: 12px;
-  line-height: 1;
-
-  &--high {
-    color: #ef4444;
-  }
-
-  &--medium {
-    color: #d97706;
-  }
-
-  &--low {
-    color: #10b981;
-  }
-}
-
-html.dark .current-todo-container {
-  --todo-track-bg: rgba(71, 85, 105, .48);
-  --todo-hover-bg: rgba(51, 65, 85, .48);
-  --todo-divider: rgba(71, 85, 105, .45);
-}
-
-.current-todo-item--completed .current-todo-item__status {
-  color: var(--todo-done-icon);
-}
-
-.current-todo-item--completed .current-todo-item__text {
-  text-decoration: line-through;
-}
-
-.current-todo-item--in_progress .current-todo-item__status {
-  color: var(--todo-active-icon);
-  animation: currentTodoSpin 1s linear infinite;
-}
-
-.current-todo-item--in_progress .current-todo-item__text {
-  font-weight: 600;
-}
-
-.current-todo-container.expanded {
-  .current-todo-summary__chevron {
-    transform: rotate(0deg);
-  }
-
-  .current-todo-item {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.current-todo-container:not(.expanded) {
-  .current-todo-summary__chevron {
-    transform: rotate(0deg);
-  }
-
-  .current-todo-item {
-    transform: translateY(-4px);
-    opacity: .6;
-  }
-}
-
-@media (max-width: 900px) {
-  .current-todo-summary {
-    align-items: flex-start;
-
-    &,
-    &__meta {
-      flex-wrap: wrap;
-    }
-
-    &__chevron {
-      margin-left: 0;
-    }
-  }
-}
-
-@keyframes currentTodoSpin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}