@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/CurrentTodoList.scss

@@ -1,245 +1,255 @@
 .current-todo-container {
-  --todo-panel-bg: var(--bg-color);
-  --todo-panel-muted-bg: var(--tag-bg);
-  --todo-panel-border: var(--border-color);
-  --todo-panel-hover-border: var(--primary-color);
-  --todo-panel-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06);
-  --todo-overlay-shadow: 0 4px 12px rgba(0, 0, 0, .15);
-  --todo-track-bg: var(--tag-hover-bg);
+  --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: var(--placeholder-color);
-  --todo-hover-bg: var(--tag-bg);
-  --todo-priority-high-bg: #fee2e2;
-  --todo-priority-high-text: #ef4444;
-  --todo-priority-medium-bg: #fef3c7;
-  --todo-priority-medium-text: #d97706;
-  --todo-priority-low-bg: #d1fae5;
-  --todo-priority-low-text: #10b981;
+  --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;
-  margin: 12px 24px 0 24px;
+  width: 100%;
+  margin: 0;
   z-index: 10;
   display: flex;
   flex-direction: column;
 
   &.empty {
     opacity: .6;
-    .todo-progress-bar {
-      cursor: default;
-      background: var(--todo-panel-muted-bg);
-      box-shadow: none;
-      &:hover {
-        border-color: var(--todo-panel-border);
-      }
-      .progress-info .material-symbols-rounded {
-        color: var(--todo-pending-icon);
-      }
-    }
+  }
+}
+
+.current-todo-panel {
+  position: relative;
+}
+
+.current-todo-summary {
+  &--empty {
+    cursor: default;
   }
 
-  .todo-progress-bar {
-    background: var(--todo-panel-bg);
-    border: 1px solid var(--todo-panel-border);
-    border-radius: 8px;
-    padding: 8px 16px;
+  &__headline,
+  &__meta {
     display: flex;
     align-items: center;
-    gap: 12px;
-    box-shadow: var(--todo-panel-shadow);
-    cursor: pointer;
-    transition: all .2s ease;
+    gap: 4px;
+    min-width: 0;
+  }
 
-    &:hover {
-      border-color: var(--todo-panel-hover-border);
-    }
+  &__headline {
+    flex: 1;
+    gap: 6px;
+  }
 
-    .progress-info {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-
-      .material-symbols-rounded {
-        font-size: 20px;
-        color: var(--primary-color);
-      }
-
-      .text {
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--todo-text);
-      }
+  &__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;
     }
 
-    .progress-track {
-      flex: 1;
-      height: 6px;
-      background: var(--todo-track-bg);
-      border-radius: 3px;
-      overflow: hidden;
-
-      .progress-fill {
-        height: 100%;
-        background: var(--primary-color);
-        transition: width .3s ease;
-      }
+    &--active {
+      color: var(--todo-active-icon);
     }
 
-    .expand-btn {
-      background: none;
-      border: none;
-      padding: 0;
-      cursor: pointer;
-      color: var(--todo-pending-icon);
-      display: flex;
-      align-items: center;
-
-      &:hover {
-        color: var(--todo-text);
-      }
+    &--done {
+      color: var(--todo-done-icon);
     }
   }
 
-  .todo-items-overlay {
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 0;
-    right: 0;
-    background: var(--todo-panel-bg);
-    border: 1px solid var(--todo-panel-border);
-    border-radius: 8px;
-    box-shadow: var(--todo-overlay-shadow);
-    animation: slideUp .3s cubic-bezier(.4, 0, .2, 1);
-    overflow: hidden;
-    z-index: 100;
-
-    .todo-items-scroll-container {
-      max-height: calc(36px * 8);
-      overflow-y: auto;
-      padding: 8px 0;
-
-      .todo-item-vertical {
-        display: flex;
-        align-items: flex-start;
-        gap: 10px;
-        padding: 8px 16px;
-        transition: background-color .2s;
-
-        &:hover {
-          background-color: var(--todo-hover-bg);
-        }
-
-        .icon {
-          font-size: 18px;
-          margin-top: 1px;
-          flex-shrink: 0;
-        }
-
-        &.status-completed {
-          opacity: .6;
-          .icon {
-            color: #10b981;
-          }
-          .text {
-            text-decoration: line-through;
-          }
-        }
-
-        &.status-in_progress {
-          .icon {
-            color: var(--primary-color);
-            animation: spin 2s linear infinite;
-          }
-          .text {
-            color: var(--todo-text);
-            font-weight: 500;
-          }
-        }
-
-        &.status-pending {
-          .icon {
-            color: var(--todo-pending-icon);
-          }
-          .text {
-            color: var(--todo-sub-text);
-          }
-        }
-
-        .todo-content-wrapper {
-          flex: 1;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-
-          .text {
-            font-size: 13px;
-            line-height: 1.5;
-          }
-
-          .priority-tag {
-            font-size: 10px;
-            padding: 1px 4px;
-            border-radius: 4px;
-            text-transform: uppercase;
-            font-weight: 600;
-
-            &.high {
-              background: var(--todo-priority-high-bg);
-              color: var(--todo-priority-high-text);
-            }
-            &.medium {
-              background: var(--todo-priority-medium-bg);
-              color: var(--todo-priority-medium-text);
-            }
-            &.low {
-              background: var(--todo-priority-low-bg);
-              color: var(--todo-priority-low-text);
-            }
-          }
-        }
-      }
-    }
+  &__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-panel-shadow: 0 8px 24px rgba(0, 0, 0, .24);
-  --todo-overlay-shadow: 0 16px 36px rgba(0, 0, 0, .32);
-  --todo-priority-high-bg: rgba(248, 113, 113, .16);
-  --todo-priority-high-text: #fca5a5;
-  --todo-priority-medium-bg: rgba(245, 158, 11, .16);
-  --todo-priority-medium-text: #fcd34d;
-  --todo-priority-low-bg: rgba(45, 212, 191, .16);
-  --todo-priority-low-text: #5eead4;
+  --todo-track-bg: rgba(71, 85, 105, .48);
+  --todo-hover-bg: rgba(51, 65, 85, .48);
+  --todo-divider: rgba(71, 85, 105, .45);
 }
 
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
+.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);
   }
-  to {
-    opacity: 1;
+
+  .current-todo-item {
     transform: translateY(0);
+    opacity: 1;
   }
 }
 
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
+.current-todo-container:not(.expanded) {
+  .current-todo-summary__chevron {
+    transform: rotate(0deg);
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+
+  .current-todo-item {
+    transform: translateY(-4px);
+    opacity: .6;
   }
 }
 
-@keyframes spin {
+@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);
   }

package/src/components/chat/CurrentTodoList.tsx

@@ -1,10 +1,35 @@
 import './CurrentTodoList.scss'
 import type { ChatMessage, ChatMessageContent, ToolInputs } from '@vibe-forge/core'
-import React, { useState } from 'react'
+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)
@@ -38,66 +63,109 @@ export function CurrentTodoList({ messages }: { messages: ChatMessage[] }) {
   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'>
-        <div className='todo-progress-bar empty'>
-          <div className='progress-info'>
-            <span className='material-symbols-rounded'>assignment_late</span>
-            <span className='text'>{t('chat.todo.noTasks')}</span>
-          </div>
-        </div>
+        <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' : ''}`}>
-      <div className='todo-progress-bar' onClick={() => setIsExpanded(!isExpanded)}>
-        <div className='progress-info'>
-          <span className='material-symbols-rounded'>assignment</span>
-          <span className='text'>{t('chat.todo.progress', { completed: completedCount, total: totalCount })}</span>
-        </div>
-        <div className='progress-track'>
-          <div
-            className='progress-fill'
-            style={{ width: `${(completedCount / totalCount) * 100}%` }}
-          />
-        </div>
-        <button className='expand-btn'>
-          <span className='material-symbols-rounded'>
-            {isExpanded ? 'expand_more' : 'expand_less'}
-          </span>
-        </button>
-      </div>
-
-      {isExpanded && (
-        <div className='todo-items-overlay'>
-          <div className='todo-items-scroll-container'>
-            {latestTodos.map((todo, idx) => (
-              <div
-                key={todo.id || idx}
-                className={`todo-item-vertical status-${todo.status}`}
-              >
-                <span className='material-symbols-rounded icon'>
-                  {todo.status === 'completed'
-                    ? 'check_circle'
-                    : todo.status === 'in_progress'
-                    ? 'clock_loader_40'
-                    : 'radio_button_unchecked'}
+      <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>
-                <div className='todo-content-wrapper'>
-                  <span className='text'>{todo.content}</span>
-                  {todo.priority != null && todo.priority !== '' &&
-                    <span className={`priority-tag ${todo.priority}`}>{todo.priority}</span>}
-                </div>
+              ))}
+              <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>
-            ))}
-          </div>
-        </div>
-      )}
+            </li>
+          ))}
+        </ol>
+      </ChatComposerCard>
     </div>
   )
 }