@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/CodeBlock.scss

@@ -0,0 +1,87 @@
+.code-block-wrapper {
+  --cb-border: #e5e7eb;
+  --cb-bg: #ffffff;
+  --cb-header-bg: #f6f8fa;
+  --cb-hover-bg: rgba(0, 0, 0, .05);
+  --cb-text: #000000;
+  --cb-sub-text: #6b7280;
+
+  width: 100%;
+  margin: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--cb-border);
+  background-color: var(--cb-bg);
+  display: flex;
+  flex-direction: column;
+
+  .code-block-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: var(--cb-header-bg);
+    border-bottom: 1px solid var(--cb-border);
+    user-select: none;
+
+    .code-lang-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .code-lang {
+        font-size: 11px;
+        color: var(--cb-sub-text);
+        font-family:
+          'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+        text-transform: uppercase;
+        font-weight: 600;
+        letter-spacing: .5px;
+      }
+    }
+
+    .copy-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: var(--cb-sub-text);
+      border-radius: 4px;
+      transition: all .2s ease;
+
+      &:hover {
+        background-color: var(--cb-hover-bg);
+        color: var(--cb-text);
+      }
+
+      .material-symbols-rounded {
+        font-size: 16px;
+      }
+    }
+  }
+
+  pre.shiki {
+    margin: 0;
+    padding: 12px;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.6;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: transparent !important;
+  }
+}
+
+html.dark {
+  .code-block-wrapper {
+    --cb-border: #30363d;
+    --cb-bg: #0d1117;
+    --cb-header-bg: #161b22;
+    --cb-hover-bg: rgba(255, 255, 255, .1);
+    --cb-text: #e5e7eb;
+    --cb-sub-text: #8b949e;
+  }
+}

package/src/components/chat/CodeBlock.tsx

@@ -0,0 +1,179 @@
+import './CodeBlock.scss'
+import { useAtomValue } from 'jotai'
+import React, { useEffect, useState } from 'react'
+import { codeToHtml } from 'shiki'
+import { themeAtom } from '../../store'
+
+export function CodeBlock({
+  code,
+  lang = 'json',
+  showLineNumbers = false,
+  hideHeader = false
+}: {
+  code: string
+  lang?: string
+  showLineNumbers?: boolean
+  hideHeader?: boolean
+}) {
+  const [html, setHtml] = useState<string>('')
+  const [copied, setCopied] = useState(false)
+  const themeMode = useAtomValue(themeAtom)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy code:', err)
+    }
+  }
+
+  const getLangIcon = (language: string) => {
+    const lang = language.toLowerCase()
+    const iconMap: Record<string, string> = {
+      js: 'javascript-plain',
+      javascript: 'javascript-plain',
+      ts: 'typescript-plain',
+      typescript: 'typescript-plain',
+      html: 'html5-plain',
+      css: 'css3-plain',
+      python: 'python-plain',
+      py: 'python-plain',
+      java: 'java-plain',
+      cpp: 'cplusplus-plain',
+      c: 'c-plain',
+      csharp: 'csharp-plain',
+      cs: 'csharp-plain',
+      go: 'go-original-wordmark',
+      rust: 'rust-original',
+      rs: 'rust-original',
+      php: 'php-plain',
+      ruby: 'ruby-plain',
+      rb: 'ruby-plain',
+      swift: 'swift-plain',
+      kotlin: 'kotlin-plain',
+      kt: 'kotlin-plain',
+      scala: 'scala-plain',
+      shell: 'bash-plain',
+      sh: 'bash-plain',
+      bash: 'bash-plain',
+      sql: 'sqlline-plain',
+      json: 'json-plain',
+      yaml: 'yaml-plain',
+      yml: 'yaml-plain',
+      markdown: 'markdown-original',
+      md: 'markdown-original',
+      docker: 'docker-plain',
+      dockerfile: 'docker-plain',
+      react: 'react-original',
+      jsx: 'react-original',
+      tsx: 'react-original',
+      vue: 'vuejs-plain',
+      angular: 'angularjs-plain',
+      sass: 'sass-original',
+      scss: 'sass-original',
+      less: 'less-plain-wordmark',
+      stylus: 'stylus-plain',
+      mongodb: 'mongodb-plain',
+      mysql: 'mysql-plain',
+      postgresql: 'postgresql-plain',
+      redis: 'redis-plain',
+      git: 'git-plain',
+      npm: 'npm-original-wordmark',
+      yarn: 'yarn-plain',
+      nginx: 'nginx-original',
+      bash_profile: 'bash-plain'
+    }
+
+    const iconClass = iconMap[lang] || 'code-plain'
+    return <i className={`devicon-${iconClass} colored`} style={{ fontSize: '14px' }} />
+  }
+
+  useEffect(() => {
+    let isMounted = true
+    const isDark = themeMode === 'dark' ||
+      (themeMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+    void codeToHtml(code, {
+      lang,
+      theme: isDark ? 'github-dark' : 'github-light',
+      transformers: showLineNumbers
+        ? [
+          {
+            name: 'line-numbers',
+            line(node, line) {
+              node.children.unshift({
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                  class: 'line-number',
+                  style:
+                    'display: inline-block; width: 2rem; margin-right: 1rem; text-align: right; color: #9ca3af; user-select: none;'
+                },
+                children: [{ type: 'text', value: String(line) }]
+              })
+            }
+          }
+        ]
+        : []
+    }).then(h => {
+      if (isMounted) setHtml(h)
+    })
+    return () => {
+      isMounted = false
+    }
+  }, [code, lang, showLineNumbers, themeMode])
+
+  if (html === '') {
+    return (
+      <div className='code-block-wrapper'>
+        {!hideHeader && (
+          <div className='code-block-header'>
+            <div className='code-lang-container'>
+              {getLangIcon(lang)}
+              <span className='code-lang'>{lang}</span>
+            </div>
+            <button
+              className='copy-button'
+              onClick={() => {
+                void handleCopy()
+              }}
+            >
+              <span className='material-symbols-rounded'>
+                {copied ? 'check' : 'content_copy'}
+              </span>
+            </button>
+          </div>
+        )}
+        <pre style={{ margin: 0, padding: 12, fontSize: 12, color: '#4b5563', overflowX: 'auto' }}>
+          <code>{code}</code>
+        </pre>
+      </div>
+    )
+  }
+
+  return (
+    <div className='code-block-wrapper'>
+      {!hideHeader && (<div className='code-block-header'>
+        <div className='code-lang-container'>
+          {getLangIcon(lang)}
+          <span className='code-lang'>{lang}</span>
+        </div>
+        <button
+          className='copy-button'
+          onClick={() => {
+            void handleCopy()
+          }}
+        >
+          <span className='material-symbols-rounded'>
+            {copied ? 'check' : 'content_copy'}
+          </span>
+        </button>
+      </div>)}
+      <div
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
+  )
+}

package/src/components/chat/CompletionMenu.scss

@@ -0,0 +1,70 @@
+.completion-menu {
+  z-index: 1000;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, .1),
+    0 4px 6px -2px rgba(0, 0, 0, .05);
+  overflow: hidden;
+
+  &-content {
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 4px;
+  }
+
+  .completion-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color .1s;
+
+    &:hover, &.active {
+      background-color: #eff6ff;
+    }
+
+    &.active {
+      .label {
+        color: #2563eb;
+        font-weight: 500;
+      }
+    }
+
+    .icon {
+      font-size: 18px;
+      color: #6b7280;
+    }
+
+    .item-info {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-width: 0;
+
+      .label {
+        font-size: 13px;
+        color: #111827;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .description {
+        font-size: 11px;
+        color: #6b7280;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

package/src/components/chat/CompletionMenu.tsx

@@ -0,0 +1,58 @@
+import './CompletionMenu.scss'
+import React, { useEffect, useRef } from 'react'
+
+export interface CompletionItem {
+  label: string
+  value: string
+  description?: string
+  icon?: string
+}
+
+interface CompletionMenuProps {
+  items: CompletionItem[]
+  onSelect: (item: CompletionItem) => void
+  onClose: () => void
+  selectedIndex: number
+}
+
+export function CompletionMenu({
+  items,
+  onSelect,
+  selectedIndex
+}: CompletionMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const activeItem = menuRef.current?.querySelector('.active')
+    if (activeItem) {
+      activeItem.scrollIntoView({ block: 'nearest' })
+    }
+  }, [selectedIndex])
+
+  if (items.length === 0) return null
+
+  return (
+    <div
+      ref={menuRef}
+      className='completion-menu'
+    >
+      <div className='completion-menu-content'>
+        {items.map((item, index) => (
+          <div
+            key={item.value}
+            className={`completion-item ${index === selectedIndex ? 'active' : ''}`}
+            onClick={() => onSelect(item)}
+          >
+            {item.icon != null && item.icon !== '' &&
+              <span className='material-symbols-rounded icon'>{item.icon}</span>}
+            <div className='item-info'>
+              <span className='label'>{item.label}</span>
+              {item.description != null && item.description !== '' &&
+                <span className='description'>{item.description}</span>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/chat/CurrentTodoList.scss

@@ -0,0 +1,217 @@
+.current-todo-container {
+  position: relative;
+  margin: 12px 24px 0 24px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+
+  &.empty {
+    opacity: .6;
+    .todo-progress-bar {
+      cursor: default;
+      background: #f9fafb;
+      box-shadow: none;
+      &:hover {
+        border-color: #e5e7eb;
+      }
+      .progress-info .material-symbols-rounded {
+        color: #9ca3af;
+      }
+    }
+  }
+
+  .todo-progress-bar {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06);
+    cursor: pointer;
+    transition: all .2s ease;
+
+    &:hover {
+      border-color: #3b82f6;
+    }
+
+    .progress-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+
+      .material-symbols-rounded {
+        font-size: 20px;
+        color: #3b82f6;
+      }
+
+      .text {
+        font-size: 13px;
+        font-weight: 500;
+        color: #374151;
+      }
+    }
+
+    .progress-track {
+      flex: 1;
+      height: 6px;
+      background: #f3f4f6;
+      border-radius: 3px;
+      overflow: hidden;
+
+      .progress-fill {
+        height: 100%;
+        background: #3b82f6;
+        transition: width .3s ease;
+      }
+    }
+
+    .expand-btn {
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      color: #9ca3af;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        color: #374151;
+      }
+    }
+  }
+
+  .todo-items-overlay {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
+    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: #f9fafb;
+        }
+
+        .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: #3b82f6;
+            animation: spin 2s linear infinite;
+          }
+          .text {
+            color: #111827;
+            font-weight: 500;
+          }
+        }
+
+        &.status-pending {
+          .icon {
+            color: #9ca3af;
+          }
+          .text {
+            color: #4b5563;
+          }
+        }
+
+        .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: #fee2e2;
+              color: #ef4444;
+            }
+            &.medium {
+              background: #fef3c7;
+              color: #d97706;
+            }
+            &.low {
+              background: #d1fae5;
+              color: #10b981;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/chat/CurrentTodoList.tsx

@@ -0,0 +1,103 @@
+import './CurrentTodoList.scss'
+import type { ChatMessage } from '@vibe-forge/core'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface TodoItem {
+  id: string
+  content: string
+  status: 'pending' | 'in_progress' | 'completed'
+  priority: string
+}
+
+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 =>
+        c != null && c.type === 'tool_use' && (c.name === 'TodoWrite' || c.name === 'todo_write')
+      )
+      if (
+        todoUse != null && todoUse.type === 'tool_use' && todoUse.input != null && typeof todoUse.input === 'object'
+      ) {
+        const input = todoUse.input as { todos?: TodoItem[] }
+        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 totalCount = latestTodos.length
+
+  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>
+      </div>
+    )
+  }
+
+  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'}
+                </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>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}