@vibe-forge/client 0.8.4 → 0.10.0

package/src/api/sessions.ts

@@ -54,6 +54,26 @@ export async function forkSession(id: string, title?: string): Promise<{ session
   })
 }
 
+export async function branchSessionFromMessage(
+  sessionId: string,
+  messageId: string,
+  action: 'fork' | 'recall' | 'edit',
+  options?: {
+    content?: string | ChatMessageContent[]
+    title?: string
+  }
+): Promise<{ session: Session }> {
+  return fetchApiJson<{ session: Session }>(`/api/sessions/${sessionId}/messages/${messageId}/branch`, {
+    method: 'POST',
+    headers: jsonHeaders,
+    body: JSON.stringify({
+      action,
+      content: options?.content,
+      title: options?.title
+    })
+  })
+}
+
 export async function getSessionMessages(
   id: string,
   limit?: number
@@ -65,6 +85,22 @@ export async function getSessionMessages(
   return fetchApiJson<SessionMessagesResponse>(url)
 }
 
+export async function respondSessionInteraction(
+  sessionId: string,
+  interactionId: string,
+  data: string | string[]
+): Promise<ApiOkResponse> {
+  return fetchApiJson<ApiOkResponse>(`/api/sessions/${sessionId}/events`, {
+    method: 'POST',
+    headers: jsonHeaders,
+    body: JSON.stringify({
+      type: 'interaction_response',
+      id: interactionId,
+      data
+    })
+  })
+}
+
 export async function deleteSession(id: string): Promise<ApiRemoveResponse> {
   return fetchApiJsonOrThrow<ApiRemoveResponse>(
     `/api/sessions/${id}`,

package/src/api/workspace.ts

@@ -0,0 +1,19 @@
+import { createApiUrl, fetchApiJson } from './base'
+
+export interface WorkspaceTreeEntry {
+  path: string
+  name: string
+  type: 'file' | 'directory'
+}
+
+export async function listWorkspaceTree(path?: string) {
+  const url = createApiUrl('/api/workspace/tree')
+  if (path != null && path.trim() !== '') {
+    url.searchParams.set('path', path)
+  }
+
+  return fetchApiJson<{
+    path: string
+    entries: WorkspaceTreeEntry[]
+  }>(url)
+}

package/src/api.ts

@@ -31,16 +31,20 @@ export { createProject, listProjects } from './api/projects'
 
 // 会话与消息 API
 export {
+  branchSessionFromMessage,
   createSession,
   deleteSession,
   forkSession,
   getSessionMessages,
   listSessions,
+  respondSessionInteraction,
   updateSession,
   updateSessionTitle
 } from './api/sessions'
 
 // 基础响应类型与会话交互类型
 export type { ApiOkResponse, ApiRemoveResponse, SessionInteraction, SessionMessagesResponse } from './api/types'
+export type { WorkspaceTreeEntry } from './api/workspace'
+export { listWorkspaceTree } from './api/workspace'
 
 export type { BenchmarkCase, BenchmarkCategory, BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/types'

package/src/components/NavRail.scss

@@ -1,12 +1,11 @@
 .nav-rail {
-  width: 56px;
+  width: 48px;
   height: 100%;
   background-color: var(--sub-sub-bg-color);
-  border-right: 1px solid var(--sub-sub-border-color);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 12px 0;
+  padding: 8px 0;
   flex-shrink: 0;
   z-index: 20;
 
@@ -15,16 +14,16 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
   }
 
   .nav-item {
-    width: 40px;
-    height: 40px;
+    width: 34px;
+    height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 8px;
+    border-radius: 7px;
     color: var(--sub-sub-text-color, #6b7280);
     transition: all .2s;
 
@@ -43,13 +42,13 @@
     }
 
     .material-symbols-rounded {
-      font-size: 24px;
+      font-size: 20px;
     }
   }
 }
 
 .nav-menu-icon {
-  font-size: 18px;
+  font-size: 16px;
   display: inline-flex;
   align-items: center;
   line-height: 1;
@@ -60,7 +59,7 @@
 }
 
 .nav-menu-icon-placeholder {
-  width: 18px;
+  width: 16px;
 }
 
 html.dark .nav-rail {

package/src/components/ShortcutDisplay.scss

@@ -0,0 +1,38 @@
+.shortcut-display {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  min-height: 20px;
+  padding: 0 6px;
+  border-radius: 8px;
+  background: color-mix(
+    in srgb,
+    var(--text-color, #111827) 7%,
+    var(--bg-color, #ffffff) 93%
+  );
+  border: 1px solid
+    color-mix(
+      in srgb,
+      var(--text-color, #111827) 10%,
+      var(--bg-color, #ffffff) 90%
+    );
+  color: var(--sub-text-color, #6b7280);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
+  white-space: nowrap;
+}
+
+.shortcut-display__token {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 9px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.shortcut-display__token--compact {
+  min-width: 0;
+  font-size: 11px;
+  font-weight: 700;
+}

package/src/components/ShortcutDisplay.tsx

@@ -0,0 +1,37 @@
+import './ShortcutDisplay.scss'
+
+import React, { useMemo } from 'react'
+
+import { getShortcutDisplayTokens } from '#~/utils/shortcutUtils'
+
+export function ShortcutDisplay({
+  shortcut,
+  isMac,
+  className
+}: {
+  shortcut?: string
+  isMac: boolean
+  className?: string
+}) {
+  const tokens = useMemo(() => getShortcutDisplayTokens(shortcut, isMac), [isMac, shortcut])
+
+  if (tokens.length === 0) {
+    return null
+  }
+
+  return (
+    <span className={['shortcut-display', className].filter(Boolean).join(' ')}>
+      {tokens.map(token => (
+        <span
+          key={`${token.value}-${token.compact ? 'compact' : 'full'}`}
+          className={[
+            'shortcut-display__token',
+            token.compact ? 'shortcut-display__token--compact' : ''
+          ].filter(Boolean).join(' ')}
+        >
+          {token.value}
+        </span>
+      ))}
+    </span>
+  )
+}

package/src/components/ShortcutTooltip.scss

@@ -0,0 +1,36 @@
+.shortcut-tooltip-target {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.shortcut-tooltip-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: inherit;
+  line-height: 1.4;
+}
+
+.shortcut-tooltip-content__label {
+  color: inherit;
+  font-size: inherit;
+  font-weight: 400;
+  line-height: inherit;
+  white-space: nowrap;
+}
+
+.shortcut-tooltip-popover {
+  pointer-events: none;
+
+  .ant-tooltip-inner {
+    padding: 6px 8px !important;
+  }
+
+  .shortcut-display {
+    background: rgba(255, 255, 255, .12);
+    border-color: rgba(255, 255, 255, .16);
+    color: rgba(255, 255, 255, .92);
+    box-shadow: none;
+  }
+}

package/src/components/ShortcutTooltip.tsx

@@ -0,0 +1,84 @@
+import './ShortcutTooltip.scss'
+
+import { Tooltip } from 'antd'
+import type { TooltipPlacement } from 'antd/es/tooltip'
+import React, { forwardRef, useMemo } from 'react'
+
+import { formatShortcutLabel } from '#~/utils/shortcutUtils'
+import { ShortcutDisplay } from './ShortcutDisplay'
+
+type ShortcutTooltipTitle = React.ReactNode | ((shortcutLabel: string) => React.ReactNode)
+
+type ShortcutTooltipProps = {
+  shortcut?: string
+  isMac: boolean
+  title: ShortcutTooltipTitle
+  children: React.ReactNode
+  placement?: TooltipPlacement
+  enabled?: boolean
+  targetClassName?: string
+} & React.ComponentPropsWithoutRef<'div'>
+
+const resolveShortcutTooltipTitle = (title: ShortcutTooltipTitle, shortcutLabel: string) => {
+  if (typeof title === 'function') {
+    return title(shortcutLabel)
+  }
+
+  return title
+}
+
+export const ShortcutTooltip = forwardRef<HTMLDivElement, ShortcutTooltipProps>(({
+  shortcut,
+  isMac,
+  title,
+  children,
+  placement = 'top',
+  enabled = true,
+  targetClassName,
+  className,
+  ...divProps
+}, ref) => {
+  const shortcutLabel = useMemo(() => formatShortcutLabel(shortcut, isMac), [isMac, shortcut])
+  const resolvedTitle = useMemo(() => {
+    if (!enabled || shortcutLabel === '') {
+      return null
+    }
+
+    return resolveShortcutTooltipTitle(title, shortcutLabel)
+  }, [enabled, shortcutLabel, title])
+
+  const trigger = (
+    <div
+      {...divProps}
+      ref={ref}
+      className={['shortcut-tooltip-target', targetClassName, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </div>
+  )
+
+  if (resolvedTitle == null) {
+    return trigger
+  }
+
+  return (
+    <Tooltip
+      title={
+        <span className='shortcut-tooltip-content'>
+          <span className='shortcut-tooltip-content__label'>{resolvedTitle}</span>
+          <ShortcutDisplay shortcut={shortcut} isMac={isMac} />
+        </span>
+      }
+      placement={placement}
+      classNames={{ root: 'shortcut-tooltip-popover' }}
+      trigger={['hover']}
+      mouseEnterDelay={.3}
+      mouseLeaveDelay={.08}
+      arrow={false}
+    >
+      {trigger}
+    </Tooltip>
+  )
+})
+
+ShortcutTooltip.displayName = 'ShortcutTooltip'

package/src/components/Sidebar.scss

@@ -1,6 +1,7 @@
 .sidebar-container {
   display: flex;
   flex-direction: column;
+  position: relative;
   --sidebar-hover-bg: #e5e5e5;
   --sidebar-active-bg: #eff6ff;
   --sidebar-active-text: #2563eb;
@@ -8,7 +9,6 @@
   --sidebar-btn-hover-bg: #fff1f0;
 
   background-color: var(--sub-bg-color);
-  border-right: 1px solid var(--sub-border-color);
   z-index: 5;
   box-sizing: border-box;
   height: 100%;
@@ -19,15 +19,16 @@
     flex-direction: column;
 
     .sidebar-new-chat {
-      padding: 0 16px;
+      padding: 0 12px;
       flex-shrink: 0;
 
       .new-chat-btn {
-        height: 36px;
+        height: 32px;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0 12px;
+        padding: 0 10px;
+        font-size: 13px;
         font-weight: 500;
         transition: all .2s cubic-bezier(.4, 0, .2, 1);
 
@@ -38,18 +39,18 @@
         }
 
         .material-symbols-rounded {
-          font-size: 18px;
+          font-size: 16px;
         }
 
         .shortcut-tag {
-          font-size: 12px;
+          font-size: 11px;
           opacity: .8;
           font-family:
             ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation
             Mono, monospace;
           background: rgba(255, 255, 255, .2);
-          padding: 2px 6px;
-          border-radius: 4px;
+          padding: 1px 5px;
+          border-radius: 3px;
           line-height: 1;
         }
 
@@ -85,11 +86,49 @@
 
   &.collapsed {
     border-right-width: 0 !important;
-    .sidebar-collapse-btn {
-      margin-left: 20px;
-    }
-    .sidebar-new-chat-btn {
-      margin-right: -112px;
+  }
+}
+
+.sidebar-collapsed-header {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+}
+
+.sidebar-collapsed-control {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sub-text-color);
+  border: none;
+  background-color: transparent;
+  transition: background-color .2s ease, color .2s ease;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  &:hover {
+    background-color: var(--nav-hover-bg, #f3f4f6);
+    color: var(--text-color, #111827);
+  }
+
+  &.active {
+    background-color: var(--nav-active-bg, #eff6ff);
+    color: var(--nav-active-text, #2563eb);
+
+    .material-symbols-rounded {
+      font-variation-settings: 'FILL' 1;
     }
   }
 }
@@ -109,4 +148,7 @@ html.dark .sidebar-container {
   --sidebar-active-text: #3b82f6;
   --sidebar-btn-color: #595959;
   --sidebar-btn-hover-bg: #2a1215;
+  --nav-hover-bg: #1a1a1a;
+  --nav-active-bg: #111b26;
+  --nav-active-text: #3b82f6;
 }