@vibe-forge/client 0.10.0 → 0.10.1

package/src/components/chat/tools/core/ToolGroup.tsx

@@ -16,6 +16,7 @@ interface ToolGroupProps {
   }[]
   originalMessage: ChatMessage
   sessionId?: string
+  targetToolUseId?: string
   footer?: {
     model?: string
     usage?: ChatMessage['usage']
@@ -29,6 +30,7 @@ function ToolGroupComponent({
   items,
   originalMessage,
   sessionId,
+  targetToolUseId,
   footer
 }: ToolGroupProps) {
   const { t } = useTranslation()
@@ -36,6 +38,13 @@ function ToolGroupComponent({
   const isDebugMode = searchParams.get('debug') === 'true'
   const [expanded, setExpanded] = useState(false)
 
+  const lastItem = items[items.length - 1]
+  const otherItems = items.slice(0, -1)
+  const shouldForceExpand = targetToolUseId != null &&
+    targetToolUseId !== '' &&
+    otherItems.some(item => item.item.id === targetToolUseId)
+  const isExpanded = expanded || shouldForceExpand
+
   if (items.length === 0) return null
 
   // If only one item, just render it directly (wrapped in container for footer)
@@ -55,7 +64,7 @@ function ToolGroupComponent({
         onStartEditing={() => {}}
       >
         <div id={anchorId} className='tool-group-container'>
-          <div className='tool-group-wrapper single-item'>
+          <div className='tool-group-wrapper single-item' data-tool-use-id={items[0].item.id}>
             <ToolRenderer
               item={items[0].item}
               resultItem={items[0].resultItem}
@@ -71,9 +80,6 @@ function ToolGroupComponent({
     )
   }
 
-  const lastItem = items[items.length - 1]
-  const otherItems = items.slice(0, -1)
-
   return (
     <MessageContextMenu
       anchorId={anchorId}
@@ -90,30 +96,31 @@ function ToolGroupComponent({
     >
       <div id={anchorId} 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
+          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'>
+            {isExpanded ? 'expand_less' : 'expand_more'}
+          </span>
+        </div>
 
-          {expanded && (
-            <div className='tool-group-list'>
-              {otherItems.map((it, idx) => (
+        {isExpanded && (
+          <div className='tool-group-list'>
+            {otherItems.map((it, idx) => (
+              <div key={it.item.id || idx} data-tool-use-id={it.item.id}>
                 <ToolRenderer
-                  key={it.item.id || idx}
                   item={it.item}
                   resultItem={it.resultItem}
                 />
-              ))}
-            </div>
-          )}
+              </div>
+            ))}
+          </div>
+        )}
 
           {
             /* Always show the last item, but if expanded, it's just part of the list visually.
@@ -124,12 +131,13 @@ function ToolGroupComponent({
               When expanded: Header + Other Items + Last Item
           */
           }
-          <div className='tool-group-last-item'>
+          <div className='tool-group-last-item' data-tool-use-id={lastItem.item.id}>
             <ToolRenderer
               item={lastItem.item}
               resultItem={lastItem.resultItem}
             />
           </div>
+
         </div>
 
         {footer && isDebugMode && (
@@ -145,6 +153,7 @@ function ToolGroupComponent({
 const areToolGroupPropsEqual = (prev: ToolGroupProps, next: ToolGroupProps) => {
   if (prev.anchorId !== next.anchorId) return false
   if (prev.items.length !== next.items.length) return false
+  if (prev.targetToolUseId !== next.targetToolUseId) return false
   for (let i = 0; i < prev.items.length; i++) {
     if (prev.items[i].item !== next.items[i].item) return false
     if (prev.items[i].resultItem !== next.items[i].resultItem) return false

package/src/routes/ChatRoute.tsx

@@ -1,8 +1,9 @@
 import './ChatRoute.scss'
 
 import { Button, Empty } from 'antd'
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import useSWR from 'swr'
 
 import type { Session } from '@vibe-forge/core'
@@ -47,6 +48,7 @@ function ChatRouteView({
 }: {
   session?: Session
 }) {
+  const [searchParams] = useSearchParams()
   const {
     messages,
     sessionInfo,
@@ -82,10 +84,34 @@ function ChatRouteView({
     hasAvailableModels,
     modelUnavailable
   } = useChatSession({ session })
+  const targetMessageId = searchParams.get('messageId') ?? undefined
+  const targetToolUseId = searchParams.get('toolUseId') ?? undefined
+  const deepLinkTargetKey = targetToolUseId?.trim()
+    ? `tool:${targetToolUseId.trim()}`
+    : targetMessageId?.trim()
+      ? `message:${targetMessageId.trim()}`
+      : ''
   const isEmptyNewSession = !session?.id && messages.length === 0
   const resolvedActiveView = session?.id != null ? activeView : 'history'
   const shouldShowTerminal = session?.id != null && isTerminalOpen
   const { isRendered: isTerminalRendered, isVisible: isTerminalVisible } = useTerminalDockVisibility(shouldShowTerminal)
+  const handledDeepLinkTargetRef = useRef('')
+
+  useEffect(() => {
+    if (deepLinkTargetKey === '') {
+      handledDeepLinkTargetRef.current = ''
+      return
+    }
+
+    if (handledDeepLinkTargetRef.current === deepLinkTargetKey) {
+      return
+    }
+
+    handledDeepLinkTargetRef.current = deepLinkTargetKey
+    if (activeView !== 'history') {
+      setActiveView('history')
+    }
+  }, [activeView, deepLinkTargetKey, setActiveView])
 
   return (
     <div
@@ -117,6 +143,8 @@ function ChatRouteView({
           isReady={isReady}
           messages={messages}
           session={session}
+          targetMessageId={targetMessageId}
+          targetToolUseId={targetToolUseId}
           sessionInfo={sessionInfo}
           errorBanner={errorBanner}
           onRetryConnection={retryConnection}

package/dist/assets/channel-gq_WMRvv.js

@@ -1 +0,0 @@
-import{al as o,am as n}from"./mermaid.core-Cq2bBFF1.js";const l=(a,r)=>o.lang.round(n.parse(a)[r]);export{l as c};

package/dist/assets/clone-XxGY7A5N.js

@@ -1 +0,0 @@
-import{a as r}from"./graph-Ig3nvzvL.js";var a=4;function n(o){return r(o,a)}export{n as c};

package/dist/assets/flowDiagram-v2-4f6560a1-DIBOANLV.js

@@ -1 +0,0 @@
-import{f as o,p as e}from"./flowDb-c6c81e3f-CQJkOpAs.js";import{f as a,g as t}from"./styles-d45a18b0-CG-C1aM8.js";import{ar as i}from"./mermaid.core-Cq2bBFF1.js";import"./graph-Ig3nvzvL.js";import"./layout-DYNFLnIl.js";import"./index-Dbx0JG0p.js";import"./index-5325376f-C4zed9sb.js";import"./clone-XxGY7A5N.js";import"./edges-96097737-C07f4iWA.js";import"./createText-1719965b-BS2hLG8t.js";import"./line-1gvOYQYZ.js";import"./array-BKyUJesY.js";import"./path-CbwjOpE9.js";import"./channel-gq_WMRvv.js";const n={parser:e,db:o,renderer:t,styles:a,init:r=>{r.flowchart||(r.flowchart={}),r.flowchart.arrowMarkerAbsolute=r.arrowMarkerAbsolute,i({flowchart:{arrowMarkerAbsolute:r.arrowMarkerAbsolute}}),t.setConf(r.flowchart),o.clear(),o.setGen("gen-2")}};export{n as diagram};