4 files changed, 36 insertions, 1 deletions
diff --git a/packages/ui/src/components/basic-tool.css b/packages/ui/src/components/basic-tool.css
index a5f1ca557..2c6bfeb67 100644
--- a/packages/ui/src/components/basic-tool.css
+++ b/packages/ui/src/components/basic-tool.css
@@ -68,6 +68,16 @@
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
     color: var(--text-weak);
+
+    &.clickable {
+      cursor: pointer;
+      text-decoration: underline;
+      transition: color 0.15s ease;
+
+      &:hover {
+        color: var(--text-base);
+      }
+    }
   }
 
   [data-slot="basic-tool-tool-arg"] {
diff --git a/packages/ui/src/components/basic-tool.tsx b/packages/ui/src/components/basic-tool.tsx
index 67720955d..15b5d4867 100644
--- a/packages/ui/src/components/basic-tool.tsx
+++ b/packages/ui/src/components/basic-tool.tsx
@@ -25,6 +25,7 @@ export interface BasicToolProps {
   hideDetails?: boolean
   defaultOpen?: boolean
   forceOpen?: boolean
+  onSubtitleClick?: () => void
 }
 
 export function BasicTool(props: BasicToolProps) {
@@ -59,6 +60,13 @@ export function BasicTool(props: BasicToolProps) {
                             data-slot="basic-tool-tool-subtitle"
                             classList={{
                               [trigger().subtitleClass ?? ""]: !!trigger().subtitleClass,
+                              clickable: !!props.onSubtitleClick,
+                            }}
+                            onClick={(e) => {
+                              if (props.onSubtitleClick) {
+                                e.stopPropagation()
+                                props.onSubtitleClick()
+                              }
                             }}
                           >
                             {trigger().subtitle}
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index cb50cf245..8102c2ce7 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -759,6 +759,13 @@ ToolRegistry.register({
       })
     }
 
+    const handleSubtitleClick = () => {
+      const sessionId = childSessionId()
+      if (sessionId && data.navigateToSession) {
+        data.navigateToSession(sessionId)
+      }
+    }
+
     const renderChildToolPart = () => {
       const toolData = childToolPart()
       if (!toolData) return null
@@ -797,6 +804,7 @@ ToolRegistry.register({
                       titleClass: "capitalize",
                       subtitle: props.input.description,
                     }}
+                    onSubtitleClick={handleSubtitleClick}
                   />
                 }
               >
@@ -826,6 +834,7 @@ ToolRegistry.register({
                 titleClass: "capitalize",
                 subtitle: props.input.description,
               }}
+              onSubtitleClick={handleSubtitleClick}
             >
               <div
                 ref={autoScroll.scrollRef}
diff --git a/packages/ui/src/context/data.tsx b/packages/ui/src/context/data.tsx
index 9f7ec813f..acab99fe8 100644
--- a/packages/ui/src/context/data.tsx
+++ b/packages/ui/src/context/data.tsx
@@ -30,9 +30,16 @@ export type PermissionRespondFn = (input: {
   response: "once" | "always" | "reject"
 }) => void
 
+export type NavigateToSessionFn = (sessionID: string) => void
+
 export const { use: useData, provider: DataProvider } = createSimpleContext({
   name: "Data",
-  init: (props: { data: Data; directory: string; onPermissionRespond?: PermissionRespondFn }) => {
+  init: (props: {
+    data: Data
+    directory: string
+    onPermissionRespond?: PermissionRespondFn
+    onNavigateToSession?: NavigateToSessionFn
+  }) => {
     return {
       get store() {
         return props.data
@@ -41,6 +48,7 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
         return props.directory
       },
       respondToPermission: props.onPermissionRespond,
+      navigateToSession: props.onNavigateToSession,
     }
   },
 })