Re-introduce kilo changes

packages/app/src/components/prompt-input.tsx

@@ -1095,7 +1095,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             editorRef?.focus()
           }}
         >
-          <div class="relative max-h-[240px] overflow-y-auto no-scrollbar" ref={(el) => (scrollRef = el)}>
+          <div
+            data-slot="prompt-input-scroll" // kilocode_change
+            class="relative max-h-[240px] overflow-y-auto no-scrollbar"
+            ref={(el) => (scrollRef = el)}
+          >
             <div
               data-component="prompt-input"
               ref={(el) => {
@@ -1246,7 +1250,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       </DockShellForm>
       <Show when={store.mode === "normal" || store.mode === "shell"}>
         <DockTray attach="top">
-          <div class="px-1.75 pt-5.5 pb-2 flex items-center gap-2 min-w-0">
+          <div
+            class="px-1.75 pt-5.5 pb-2 flex items-center gap-2 min-w-0"
+            data-slot="prompt-input-toolbar" // kilocode_change
+          >
             <div class="flex items-center gap-1.5 min-w-0 flex-1">
               <Show when={store.mode === "shell"}>
                 <div class="h-7 flex items-center gap-1.5 max-w-[160px] min-w-0" style={{ padding: "0 4px 0 8px" }}>

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -17,6 +17,7 @@ export function SessionComposerRegion(props: {
   onNewSessionWorktreeReset: () => void
   onSubmit: () => void
   setPromptDockRef: (el: HTMLDivElement) => void
+  onModeAction?: (input: { mode: string; text: string; description?: string }) => void // kilocode_change
 }) {
   const params = useParams()
   const prompt = usePrompt()
@@ -57,7 +58,8 @@ export function SessionComposerRegion(props: {
         <Show when={props.state.questionRequest()} keyed>
           {(request) => (
             <div>
-              <SessionQuestionDock request={request} />
+              {/* kilocode_change: add onModeAction */}
+              <SessionQuestionDock request={request} onModeAction={props.onModeAction} />
             </div>
           )}
         </Show>

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -8,7 +8,12 @@ import type { QuestionAnswer, QuestionRequest } from "@kilocode/sdk/v2"
 import { useLanguage } from "@/context/language"
 import { useSDK } from "@/context/sdk"
 
-export const SessionQuestionDock: Component<{ request: QuestionRequest }> = (props) => {
+// kilocode_change start - add onModeAction prop for mode-switching support
+export const SessionQuestionDock: Component<{
+  request: QuestionRequest
+  onModeAction?: (input: { mode: string; text: string; description?: string }) => void
+}> = (props) => {
+  // kilocode_change end
   const sdk = useSDK()
   const language = useLanguage()
 
@@ -141,10 +146,31 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest }> = (pro
   const submit = () => void reply(questions().map((_, i) => store.answers[i] ?? []))
 
   const pick = (answer: string, custom: boolean = false) => {
+    // kilocode_change start - find option to check for mode
+    // Custom answers won't match a predefined option, so mode switching is intentionally skipped
+    const option = options().find((o) => o.label === answer)
+    // kilocode_change end
+
+    setStore("editing", false)
+
     setStore("answers", store.tab, [answer])
     if (custom) setStore("custom", store.tab, answer)
     if (!custom) setStore("customOn", store.tab, false)
-    setStore("editing", false)
+
+    // kilocode_change start - trigger mode switch after question reply completes
+    if (!multi()) {
+      const pending = reply([[answer]])
+      if (option?.mode && props.onModeAction) {
+        const action = props.onModeAction
+        const mode = option.mode
+        const description = option.description
+        pending?.then(() => action({ mode, text: answer, description }), fail).catch(fail)
+      } else {
+        pending?.catch(fail)
+      }
+      return
+    }
+    // kilocode_change end
   }
 
   const toggle = (answer: string) => {

packages/ui/package.json

@@ -52,6 +52,8 @@
     "./basic-tool": "./src/components/basic-tool.tsx",
     "./diff-changes": "./src/components/diff-changes.tsx",
     "./diff-ssr": "./src/components/diff-ssr.tsx",
+    "./dock-prompt": "./src/components/dock-prompt.tsx",
+    "./dock-surface": "./src/components/dock-surface.tsx",
     "./context": "./src/context/index.ts",
     "./context/code": "./src/context/code.tsx",
     "./context/data": "./src/context/data.tsx",

packages/ui/src/components/dock-surface.tsx

@@ -25,6 +25,7 @@ export function DockShellForm(props: ComponentProps<"form">) {
   return (
     <form
       {...rest}
+      data-component="prompt-input-form" // kilocode_change
       data-dock-surface="shell"
       classList={{
         ...(split.classList ?? {}),