fix(ui): add subtask stop controls

packages/kilo-ui/src/components/basic-tool.css

@@ -10,6 +10,13 @@
     font-size: 12px;
   }
 
+  [data-slot="basic-tool-actions"] {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
   [data-slot="basic-tool-tool-info-structured"] {
     min-width: 0;
     overflow: hidden;

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

@@ -1794,6 +1794,11 @@ ToolRegistry.register({
     })
     const running = createMemo(() => busy(props.status))
     const reveal = useToolReveal(running, () => props.reveal !== false)
+    const stop = () => {
+      const id = childSessionId()
+      if (!id) return
+      data.abortSession?.(id)
+    }
 
     const href = createMemo(() => {
       const sessionId = childSessionId()
@@ -1852,7 +1857,29 @@ ToolRegistry.register({
       </div>
     )
 
-    return <BasicTool hideDetails icon="task" status={props.status} trigger={trigger()} animated />
+    return (
+      <BasicTool
+        hideDetails
+        icon="task"
+        status={props.status}
+        trigger={trigger()}
+        animated
+        actions={
+          <Show when={running() && data.abortSession && childSessionId()}>
+            <Tooltip value={i18n.t("prompt.action.stop")} placement="top" gutter={4}>
+              <IconButton
+                icon="stop"
+                size="small"
+                variant="secondary"
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={stop}
+                aria-label={i18n.t("prompt.action.stop")}
+              />
+            </Tooltip>
+          </Show>
+        }
+      />
+    )
   },
 })
 

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

@@ -98,6 +98,10 @@ export const DataBridge: Component<{ children: any }> = (props) => {
     vscode.postMessage({ type: "openExternal", url })
   }
 
+  const abort = (sessionID: string) => {
+    session.abort(sessionID)
+  }
+
   const directory = () => {
     const dir = server.workspaceDirectory()
     if (!dir) return ""
@@ -114,6 +118,7 @@ export const DataBridge: Component<{ children: any }> = (props) => {
       onQuestionReject={reject}
       onOpenFile={open}
       onOpenUrl={openUrl}
+      onAbortSession={abort}
     >
       {props.children}
     </DataProvider>

packages/kilo-vscode/webview-ui/src/context/session.tsx

@@ -181,7 +181,7 @@ interface SessionContextValue {
     files?: FileAttachment[],
     draftID?: string,
   ) => void
-  abort: () => void
+  abort: (sessionID?: string) => void
   compact: () => void
   respondToPermission: (
     permissionId: string,
@@ -1476,8 +1476,7 @@ export const SessionProvider: ParentComponent = (props) => {
     })
   }
 
-  function abort() {
-    const sessionID = currentSessionID()
+  function abort(sessionID = currentSessionID()) {
     if (!sessionID) {
       console.warn("[Kilo New] Cannot abort: no current session")
       return

packages/ui/src/components/basic-tool.css

@@ -18,6 +18,13 @@
     gap: 8px;
   }
 
+  [data-slot="basic-tool-actions"] {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
   [data-slot="basic-tool-tool-indicator"] {
     width: 16px;
     height: 16px;

packages/ui/src/components/basic-tool.tsx

@@ -34,6 +34,7 @@ export interface BasicToolProps {
   locked?: boolean
   animated?: boolean
   onSubtitleClick?: () => void
+  actions?: JSX.Element // kilocode_change
 }
 
 const SPRING = { type: "spring" as const, visualDuration: 0.35, bounce: 0 }
@@ -190,6 +191,11 @@ export function BasicTool(props: BasicToolProps) {
               </Switch>
             </div>
           </div>
+          <Show when={props.actions}>
+            <span data-slot="basic-tool-actions" onClick={(e) => e.stopPropagation()}>
+              {props.actions}
+            </span>
+          </Show>
           <Show when={props.children && !props.hideDetails && !props.locked && !pending()}>
             <Collapsible.Arrow />
           </Show>

packages/ui/src/context/data.tsx

@@ -30,6 +30,8 @@ export type OpenFileFn = (filePath: string, line?: number, column?: number) => v
 
 export type OpenUrlFn = (url: string) => void // kilocode_change
 
+export type AbortSessionFn = (sessionID: string) => void // kilocode_change
+
 export const { use: useData, provider: DataProvider } = createSimpleContext({
   name: "Data",
   init: (props: {
@@ -39,6 +41,7 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
     onSessionHref?: SessionHrefFn
     onOpenFile?: OpenFileFn // kilocode_change
     onOpenUrl?: OpenUrlFn // kilocode_change
+    onAbortSession?: AbortSessionFn // kilocode_change
   }) => {
     return {
       get store() {
@@ -51,6 +54,7 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
       sessionHref: props.onSessionHref,
       openFile: props.onOpenFile, // kilocode_change
       openUrl: props.onOpenUrl, // kilocode_change
+      abortSession: props.onAbortSession, // kilocode_change
     }
   },
 })