Merge pull request #7709 from Kilo-Org/session/agent_7ed3da65-4fc5-427d-b6f6-9ceced162e48

fix(vscode): open webfetch URL in browser via openExternal

packages/kilo-ui/src/components/message-part.tsx

@@ -1306,6 +1306,15 @@ function useToolReveal(pending: () => boolean, animate?: () => boolean) {
 function WebfetchMeta(props: { url: string; animate?: boolean }) {
   let ref: HTMLSpanElement | undefined
   useToolFade(() => ref, { wipe: true, animate: props.animate })
+  const data = useData()
+
+  const open = (event: MouseEvent) => {
+    event.stopPropagation()
+    event.preventDefault()
+    const handler = data.openUrl
+    if (handler) return handler(props.url)
+    window.open(props.url, "_blank", "noopener,noreferrer")
+  }
 
   return (
     <span ref={ref} data-slot="webfetch-meta">
@@ -1316,11 +1325,11 @@ function WebfetchMeta(props: { url: string; animate?: boolean }) {
         href={props.url}
         target="_blank"
         rel="noopener noreferrer"
-        onClick={(event) => event.stopPropagation()}
+        onClick={open}
       >
         {props.url}
       </a>
-      <div data-component="tool-action">
+      <div data-component="tool-action" onClick={open} style={{ cursor: "pointer" }}>
         <Icon name="square-arrow-top-right" size="small" />
       </div>
     </span>

packages/kilo-vscode/webview-ui/src/App.tsx

@@ -109,6 +109,10 @@ export const DataBridge: Component<{ children: any }> = (props) => {
     vscode.postMessage({ type: "openFile", filePath, line, column })
   }
 
+  const openUrl = (url: string) => {
+    vscode.postMessage({ type: "openExternal", url })
+  }
+
   const directory = () => {
     const dir = server.workspaceDirectory()
     if (!dir) return ""
@@ -124,6 +128,7 @@ export const DataBridge: Component<{ children: any }> = (props) => {
       onQuestionReply={reply}
       onQuestionReject={reject}
       onOpenFile={open}
+      onOpenUrl={openUrl}
     >
       {props.children}
     </DataProvider>

packages/ui/src/context/data.tsx

@@ -28,6 +28,8 @@ export type SessionHrefFn = (sessionID: string) => string
 
 export type OpenFileFn = (filePath: string, line?: number, column?: number) => void // kilocode_change
 
+export type OpenUrlFn = (url: string) => void // kilocode_change
+
 export const { use: useData, provider: DataProvider } = createSimpleContext({
   name: "Data",
   init: (props: {
@@ -36,6 +38,7 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
     onNavigateToSession?: NavigateToSessionFn
     onSessionHref?: SessionHrefFn
     onOpenFile?: OpenFileFn // kilocode_change
+    onOpenUrl?: OpenUrlFn // kilocode_change
   }) => {
     return {
       get store() {
@@ -47,6 +50,7 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
       navigateToSession: props.onNavigateToSession,
       sessionHref: props.onSessionHref,
       openFile: props.onOpenFile, // kilocode_change
+      openUrl: props.onOpenUrl, // kilocode_change
     }
   },
 })