@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/SessionTimelinePanel/types.ts

@@ -0,0 +1,64 @@
+export type TimelineEventType =
+  | 'tool__StartTasks'
+  | 'tool__AskUserQuestion'
+  | 'tool__Edit'
+  | 'tool__ResumeTask'
+  | 'user__Prompt'
+
+interface TimelineBaseEvent {
+  startTime: string
+  endTime: string
+}
+
+export type TimelineEvent =
+  & TimelineBaseEvent
+  & (
+    | {
+      type: 'tool__StartTasks'
+      tasks?: Record<string, Task>
+    }
+    | {
+      type: 'tool__AskUserQuestion'
+    }
+    | {
+      type: 'tool__Edit'
+    }
+    | {
+      type: 'tool__ResumeTask'
+    }
+    | {
+      type: 'user__Prompt'
+    }
+  )
+
+export interface Task {
+  startTime: string
+  endTime: string
+
+  description?: string
+  model?: string
+
+  events?: TimelineEvent[]
+}
+
+export type TimelineInteractionPayload =
+  | {
+    kind: 'event'
+    event: TimelineEvent
+  }
+  | {
+    kind: 'task'
+    name: string
+    task: Task
+  }
+
+export interface TimelineInteraction {
+  id: string
+  label: string
+  payload: TimelineInteractionPayload
+}
+
+export interface TimelineDiagram {
+  code: string
+  interactions: TimelineInteraction[]
+}

package/src/components/chat/SessionTimelinePanel/utils.ts

@@ -0,0 +1,20 @@
+export function sanitizeId(value: string) {
+  return value.replace(/\W/g, '_')
+}
+
+export function parseTime(value: string) {
+  const [hours, minutes, seconds] = value.split(':').map(Number)
+  return (hours || 0) * 3600 + (minutes || 0) * 60 + (seconds || 0)
+}
+
+export function normalizeTime(value: string) {
+  const [hours, minutes, seconds] = value.split(':')
+  const normalizePart = (part?: string) => {
+    const parsed = Number.parseInt(part ?? '0', 10)
+    if (Number.isFinite(parsed)) {
+      return `${parsed}`.padStart(2, '0')
+    }
+    return '00'
+  }
+  return `${normalizePart(hours)}:${normalizePart(minutes)}:${normalizePart(seconds)}`
+}

package/src/components/chat/ThinkingStatus.scss

@@ -0,0 +1,70 @@
+.chat-thinking-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  color: #9ca3af;
+  font-size: 12px;
+  animation: fadeIn .3s ease-in-out;
+
+  .dot-flashing {
+    position: relative;
+    width: 4px;
+    height: 4px;
+    border-radius: 5px;
+    background-color: #3b82f6;
+    color: #3b82f6;
+    animation: dotFlashing 1s infinite linear alternate;
+    animation-delay: .5s;
+    margin: 0 12px 0 10px;
+
+    &::before, &::after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+    }
+
+    &::before {
+      left: -8px;
+      width: 4px;
+      height: 4px;
+      border-radius: 5px;
+      background-color: #3b82f6;
+      color: #3b82f6;
+      animation: dotFlashing 1s infinite linear alternate;
+      animation-delay: 0s;
+    }
+
+    &::after {
+      left: 8px;
+      width: 4px;
+      height: 4px;
+      border-radius: 5px;
+      background-color: #3b82f6;
+      color: #3b82f6;
+      animation: dotFlashing 1s infinite linear alternate;
+      animation-delay: 1s;
+    }
+  }
+}
+
+@keyframes dotFlashing {
+  0% {
+    background-color: #3b82f6;
+  }
+  50%, 100% {
+    background-color: #e5e7eb;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/chat/ThinkingStatus.tsx

@@ -0,0 +1,13 @@
+import './ThinkingStatus.scss'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export function ThinkingStatus() {
+  const { t } = useTranslation()
+  return (
+    <div className='chat-thinking-status'>
+      <div className='dot-flashing'></div>
+      <span>{t('chat.thinking')}</span>
+    </div>
+  )
+}

package/src/components/chat/ToolCallBox.scss

@@ -0,0 +1,137 @@
+.tool-group {
+  margin: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: var(--bg-color);
+
+  .tool-call-box {
+    border: none;
+    margin: 0;
+    border-radius: 0;
+
+    &.result {
+      background-color: transparent;
+    }
+  }
+
+  .tool-call-header {
+    padding: 8px 12px;
+    height: 36px;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-color);
+    background-color: var(--tag-bg);
+    transition: text-shadow .4s ease;
+
+    &.collapsed {
+      cursor: default;
+    }
+
+    .tool-call-header-main {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    &:hover {
+      text-shadow: 0 0 .5px currentColor;
+    }
+
+    .material-symbols-rounded {
+      font-size: 18px;
+      color: var(--sub-text-color);
+
+      &.expand-icon {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .tool-result-header {
+    padding: 8px 12px;
+    height: 36px;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #059669;
+    background-color: var(--tag-bg);
+
+    &.error {
+      color: #dc2626;
+      .material-symbols-rounded {
+        color: #dc2626;
+      }
+    }
+
+    &:hover {
+      opacity: .8;
+    }
+
+    .material-symbols-rounded {
+      font-size: 18px;
+      color: #059669;
+    }
+  }
+
+  .tool-call-box:first-child {
+    .tool-result-header {
+      border-top: none;
+    }
+  }
+
+  .tool-call-box.expanded {
+    .tool-call-header {
+      border-bottom: 1px solid var(--border-color);
+    }
+    .tool-result-header {
+      border-bottom: none;
+    }
+  }
+
+  .tool-call-box.collapsed {
+    .tool-call-header {
+      border-bottom: none;
+    }
+    .tool-result-header {
+      border-bottom: none;
+    }
+  }
+
+  .tool-call-body {
+    padding: 0;
+    overflow: hidden;
+    transition: all .2s ease-in-out;
+    background-color: var(--bg-color);
+
+    .tool-call-box.result & {
+      background-color: var(--bg-color);
+      border-top: 1px dashed var(--border-color);
+    }
+
+    .tool-content {
+      padding: 0;
+
+      // Override code block wrapper styles
+      .code-block-wrapper {
+        border: none;
+        border-radius: 0;
+      }
+    }
+  }
+}

package/src/components/chat/ToolCallBox.tsx

@@ -0,0 +1,55 @@
+import './ToolCallBox.scss'
+import React, { useState } from 'react'
+
+export function ToolCallBox({
+  header,
+  content,
+  isError = false,
+  type = 'call',
+  defaultExpanded = false,
+  collapsible = true,
+  onDoubleClick
+}: {
+  header: React.ReactNode
+  content: React.ReactNode
+  isError?: boolean
+  type?: 'call' | 'result'
+  defaultExpanded?: boolean
+  collapsible?: boolean
+  onDoubleClick?: (e: React.MouseEvent) => void
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded || !collapsible)
+
+  const isExpanded = !collapsible || expanded
+
+  return (
+    <div
+      className={`tool-call-box ${type === 'result' ? 'result' : ''} ${isExpanded ? 'expanded' : 'collapsed'}`}
+      onDoubleClick={(e) => {
+        if (onDoubleClick) {
+          e.stopPropagation()
+          onDoubleClick(e)
+        }
+      }}
+    >
+      <div
+        className={`tool-call-header ${type === 'result' && isError ? 'error' : ''}`}
+        onClick={() => collapsible && setExpanded(!expanded)}
+      >
+        <div className='tool-call-header-main'>
+          {header}
+        </div>
+        {collapsible && (
+          <span className='material-symbols-rounded expand-icon'>
+            {isExpanded ? 'expand_less' : 'expand_more'}
+          </span>
+        )}
+      </div>
+      {isExpanded && (
+        <div className='tool-call-body'>
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/chat/ToolGroup.scss

@@ -0,0 +1,154 @@
+.tool-group-container {
+  max-width: 100%;
+
+  .tool-group-wrapper {
+    margin: 0;
+
+    &.single-item {
+      // No special style for single item
+    }
+
+    &.card-style {
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      background-color: var(--bg-color);
+      overflow: hidden;
+
+      .tool-group-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background-color: var(--tag-bg, #f9fafb);
+        border-bottom: 1px solid transparent;
+        cursor: pointer;
+        user-select: none;
+        transition: background-color .2s, text-shadow .4s ease;
+
+        .header-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 13px;
+          font-weight: 500;
+          color: var(--text-color);
+
+          .material-symbols-rounded {
+            font-size: 18px;
+            color: var(--sub-text-color);
+          }
+        }
+
+        .expand-icon {
+          font-size: 20px;
+          color: var(--sub-text-color);
+        }
+
+        &:hover {
+          opacity: .8;
+        }
+      }
+
+      .tool-group-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+        border-top: 1px solid var(--border-color);
+        background-color: var(--bg-color);
+      }
+
+      .tool-group-last-item {
+        background-color: var(--bg-color);
+      }
+
+      // Shared style reset for all tool groups inside the card
+      .tool-group-list, .tool-group-last-item {
+        .tool-group {
+          margin: 0;
+          border: none;
+          border-radius: 0;
+          background-color: transparent;
+          overflow: visible; // Allow timeline line to overflow
+
+          .tool-call-box {
+            margin: 0;
+            border: none;
+            border-radius: 0;
+
+            .tool-call-header {
+              padding: 8px 12px;
+              background-color: transparent;
+
+              &:hover {
+                text-shadow: 0 0 .5px currentColor;
+              }
+            }
+
+            .tool-call-body {
+              padding: 0;
+              background-color: transparent;
+            }
+          }
+        }
+      }
+
+      // Timeline gap style
+      .tool-group-list .tool-group {
+        position: relative;
+        margin-bottom: 12px; // Increased gap between items
+        border-bottom: none; // Remove border as we use gap + line
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 19px;
+          bottom: -11px; // Adjusted for larger margin
+          height: 10px; // Increased length for larger gap
+          width: 2px;
+          background-color: var(--sub-text-color);
+          z-index: 99;
+          border-radius: 4px;
+          opacity: .5;
+        }
+      }
+    }
+  }
+
+  .tool-group-footer-wrapper {
+    opacity: 0;
+    transition: opacity .2s ease;
+    margin-top: 4px;
+    padding-left: 2px;
+
+    .msg-footer {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11px;
+      color: var(--sub-text-color, #9ca3af);
+
+      .timestamp {
+        user-select: none;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &:hover .tool-group-footer-wrapper {
+    opacity: 1;
+  }
+}
+
+html.dark .tool-group-container .tool-group-wrapper.card-style {
+  background-color: #1f2937; // Darker bg for card
+  .tool-group-header {
+    background-color: #374151;
+    &:hover {
+      text-shadow: 0 0 .5px currentColor;
+    }
+  }
+  .tool-group-list, .tool-group-last-item {
+    background-color: #1f2937;
+  }
+}

package/src/components/chat/ToolGroup.tsx

@@ -0,0 +1,102 @@
+import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { MessageFooter } from './MessageFooter'
+import './ToolGroup.scss'
+import { ToolRenderer } from './ToolRenderer'
+
+export function ToolGroup({
+  items,
+  footer
+}: {
+  items: {
+    item: Extract<ChatMessageContent, { type: 'tool_use' }>
+    resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
+  }[]
+  footer?: {
+    model?: string
+    usage?: ChatMessage['usage']
+    createdAt: number
+    originalMessage: ChatMessage
+  }
+}) {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = useState(false)
+
+  if (items.length === 0) return null
+
+  // If only one item, just render it directly (wrapped in container for footer)
+  if (items.length === 1) {
+    return (
+      <div className='tool-group-container'>
+        <div className='tool-group-wrapper single-item'>
+          <ToolRenderer
+            item={items[0].item}
+            resultItem={items[0].resultItem}
+          />
+        </div>
+        {footer && (
+          <div className='tool-group-footer-wrapper'>
+            <MessageFooter msg={footer.originalMessage} isUser={false} />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const lastItem = items[items.length - 1]
+  const otherItems = items.slice(0, -1)
+
+  return (
+    <div className='tool-group-container'>
+      <div className='tool-group-wrapper card-style'>
+        <div
+          className='tool-group-header'
+          onClick={() => setExpanded(!expanded)}
+        >
+          <div className='header-left'>
+            <span className='material-symbols-rounded'>dataset</span>
+            <span>{t('chat.usedTools', { count: items.length })}</span>
+          </div>
+          <span className='material-symbols-rounded expand-icon'>
+            {expanded ? 'expand_less' : 'expand_more'}
+          </span>
+        </div>
+
+        {expanded && (
+          <div className='tool-group-list'>
+            {otherItems.map((it, idx) => (
+              <ToolRenderer
+                key={it.item.id || idx}
+                item={it.item}
+                resultItem={it.resultItem}
+              />
+            ))}
+          </div>
+        )}
+
+        {
+          /* Always show the last item, but if expanded, it's just part of the list visually.
+            If collapsed, it appears "below" the header.
+            Actually, to make it look like "part of the list", we should just put it in the flow.
+
+            When collapsed: Header + Last Item
+            When expanded: Header + Other Items + Last Item
+        */
+        }
+        <div className='tool-group-last-item'>
+          <ToolRenderer
+            item={lastItem.item}
+            resultItem={lastItem.resultItem}
+          />
+        </div>
+      </div>
+
+      {footer && (
+        <div className='tool-group-footer-wrapper'>
+          <MessageFooter msg={footer.originalMessage} isUser={false} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/chat/ToolRenderer.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import type { ChatMessageContent } from '@vibe-forge/core'
+
+import { DefaultTool } from './tools/DefaultTool'
+import { BashTool, adapterClaudeToolRenders } from './tools/adapter-claude'
+import { taskToolRenders } from './tools/task'
+
+const TOOL_RENDERERS: Record<
+  string,
+  React.ComponentType<{
+    item: Extract<ChatMessageContent, { type: 'tool_use' }>
+    resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
+  }>
+> = {
+  ...taskToolRenders,
+  ...adapterClaudeToolRenders
+}
+
+export function ToolRenderer({
+  item,
+  resultItem
+}: {
+  item: Extract<ChatMessageContent, { type: 'tool_use' }>
+  resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
+}) {
+  const toolName = item.name
+  const foundRenderer = TOOL_RENDERERS[toolName] ?? ToolRenderer.findRendererByInput(item)
+  const Renderer = foundRenderer ?? DefaultTool
+  return <Renderer item={item} resultItem={resultItem} />
+}
+
+ToolRenderer.findRendererByInput = (item: Extract<ChatMessageContent, { type: 'tool_use' }>) => {
+  // If input has 'command' and 'description', it's likely a bash tool even if name is different
+  const input = item.input as Record<string, unknown> | null
+  if (input != null && typeof input === 'object') {
+    if (
+      'command' in input &&
+      (('description' in input && input.description != null) || ('reason' in input && input.reason != null))
+    ) {
+      return BashTool
+    }
+  }
+  return null
+}