feat(ide): IDE integration with Cursor/VSCode and improved UX

- Add IDE connection via WebSocket with JSON-RPC
- Live text selection from editor displayed in footer
- Selection sent as synthetic part (invisible but included in context)
- IDE status visible in home screen footer
- Fix reactivity with reconcile for IDE status updates

Based on initial work from anomalyco#5447, with additional UX improvements.

Author: Numerilab

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -20,6 +20,7 @@ import { useExit } from "../../context/exit"
 import { Clipboard } from "../../util/clipboard"
 import type { FilePart } from "@opencode-ai/sdk/v2"
 import { TuiEvent } from "../../event"
+import { Ide } from "@/ide"
 import { iife } from "@/util/iife"
 import { Locale } from "@/util/locale"
 import { createColors, createFrames } from "../../ui/spinner.ts"
@@ -44,7 +45,6 @@ export type PromptRef = {
   reset(): void
   blur(): void
   focus(): void
-  submit(): void
 }
 
 const PLACEHOLDERS = ["Fix a TODO in the codebase", "What is the tech stack of this project?", "Fix broken tests"]
@@ -116,7 +116,7 @@ export function Prompt(props: PromptProps) {
   const sync = useSync()
   const dialog = useDialog()
   const toast = useToast()
-  const status = createMemo(() => sync.data.session_status?.[props.sessionID ?? ""] ?? { type: "idle" })
+  const status = createMemo(() => sync.data.session_status[props.sessionID ?? ""] ?? { type: "idle" })
   const history = usePromptHistory()
   const command = useCommandDialog()
   const renderer = useRenderer()
@@ -312,6 +312,10 @@ export function Prompt(props: PromptProps) {
     input.insertText(evt.properties.text)
   })
 
+  sdk.event.on(Ide.Event.SelectionChanged.type, (evt) => {
+    updateIdeSelection(evt.properties.selection)
+  })
+
   createEffect(() => {
     if (props.disabled) input.cursorColor = theme.backgroundElement
     if (!props.disabled) input.cursorColor = theme.text
@@ -342,6 +346,49 @@ export function Prompt(props: PromptProps) {
     promptPartTypeId = input.extmarks.registerType("prompt-part")
   })
 
+  // Track IDE selection extmark so we can update/remove it
+  let ideSelectionExtmarkId: number | null = null
+
+  function removeExtmark(extmarkId: number) {
+    const allExtmarks = input.extmarks.getAllForTypeId(promptPartTypeId)
+    const extmark = allExtmarks.find((e) => e.id === extmarkId)
+    const partIndex = store.extmarkToPartIndex.get(extmarkId)
+
+    if (partIndex !== undefined) {
+      setStore(
+        produce((draft) => {
+          draft.prompt.parts.splice(partIndex, 1)
+          draft.extmarkToPartIndex.delete(extmarkId)
+          const newMap = new Map<number, number>()
+          for (const [id, idx] of draft.extmarkToPartIndex) {
+            newMap.set(id, idx > partIndex ? idx - 1 : idx)
+          }
+          draft.extmarkToPartIndex = newMap
+        }),
+      )
+    }
+
+    if (extmark) {
+      const savedOffset = input.cursorOffset
+      input.cursorOffset = extmark.start
+      const start = { ...input.logicalCursor }
+      input.cursorOffset = extmark.end + 1
+      input.deleteRange(start.row, start.col, input.logicalCursor.row, input.logicalCursor.col)
+      input.cursorOffset =
+        savedOffset > extmark.start
+          ? Math.max(extmark.start, savedOffset - (extmark.end + 1 - extmark.start))
+          : savedOffset
+    }
+
+    input.extmarks.delete(extmarkId)
+  }
+
+  function updateIdeSelection(selection: Ide.Selection | null) {
+    // Selection is now displayed in footer via local.selection
+    // No visual insertion in the input needed
+    // Content will be included at submit time from local.selection
+  }
+
   function restoreExtmarksFromParts(parts: PromptInfo["parts"]) {
     input.extmarks.clear()
     setStore("extmarkToPartIndex", new Map())
@@ -448,14 +495,11 @@ export function Prompt(props: PromptProps) {
       })
       setStore("extmarkToPartIndex", new Map())
     },
-    submit() {
-      submit()
-    },
   })
 
   async function submit() {
     if (props.disabled) return
-    if (autocomplete?.visible) return
+    if (autocomplete.visible) return
     if (!store.prompt.input) return
     const trimmed = store.prompt.input.trim()
     if (trimmed === "exit" || trimmed === "quit" || trimmed === ":q") {
@@ -476,6 +520,8 @@ export function Prompt(props: PromptProps) {
     const messageID = Identifier.ascending("message")
     let inputText = store.prompt.input
 
+    // IDE selection is displayed in footer only - not injected into message
+
     // Expand pasted text inline before submitting
     const allExtmarks = input.extmarks.getAllForTypeId(promptPartTypeId)
     const sortedExtmarks = allExtmarks.sort((a: { start: number }, b: { start: number }) => b.start - a.start)
@@ -495,9 +541,6 @@ export function Prompt(props: PromptProps) {
     // Filter out text parts (pasted content) since they're now expanded inline
     const nonTextParts = store.prompt.parts.filter((part) => part.type !== "text")
 
-    // Capture mode before it gets reset
-    const currentMode = store.mode
-
     if (store.mode === "shell") {
       sdk.client.session.shell({
         sessionID,
@@ -539,23 +582,27 @@ export function Prompt(props: PromptProps) {
             type: "text",
             text: inputText,
           },
+          ...(local.selection.current()?.text ? [{
+            id: Identifier.ascending("part"),
+            type: "text" as const,
+            text: `\n\n[IDE Selection: ${local.selection.current()!.filePath.split("/").pop() || local.selection.current()!.filePath}:${local.selection.current()!.selection.start.line + 1}-${local.selection.current()!.selection.end.line + 1}]\n\`\`\`\n${local.selection.current()!.text}\n\`\`\``,
+            synthetic: true,
+          }] : []),
           ...nonTextParts.map((x) => ({
             id: Identifier.ascending("part"),
             ...x,
           })),
         ],
       })
     }
-    history.append({
-      ...store.prompt,
-      mode: currentMode,
-    })
+    history.append(store.prompt)
     input.extmarks.clear()
     setStore("prompt", {
       input: "",
       parts: [],
     })
     setStore("extmarkToPartIndex", new Map())
+    ideSelectionExtmarkId = null
     props.onSubmit?.()
 
     // temporary hack to make sure the message is sent
@@ -715,8 +762,8 @@ export function Prompt(props: PromptProps) {
           >
             <textarea
               placeholder={props.sessionID ? undefined : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
-              textColor={keybind.leader ? theme.textMuted : theme.text}
-              focusedTextColor={keybind.leader ? theme.textMuted : theme.text}
+              textColor={theme.text}
+              focusedTextColor={theme.text}
               minHeight={1}
               maxHeight={6}
               onContentChange={() => {
@@ -742,12 +789,8 @@ export function Prompt(props: PromptProps) {
                   return
                 }
                 if (keybind.match("app_exit", e)) {
-                  if (store.prompt.input === "") {
-                    await exit()
-                    // Don't preventDefault - let textarea potentially handle the event
-                    e.preventDefault()
-                    return
-                  }
+                  await exit()
+                  return
                 }
                 if (e.name === "!" && input.visualCursor.offset === 0) {
                   setStore("mode", "shell")
@@ -773,7 +816,6 @@ export function Prompt(props: PromptProps) {
                     if (item) {
                       input.setText(item.input)
                       setStore("prompt", item)
-                      setStore("mode", item.mode ?? "normal")
                       restoreExtmarksFromParts(item.parts)
                       e.preventDefault()
                       if (direction === -1) input.cursorOffset = 0
@@ -865,7 +907,7 @@ export function Prompt(props: PromptProps) {
               </text>
               <Show when={store.mode === "normal"}>
                 <box flexDirection="row" gap={1}>
-                  <text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
+                  <text flexShrink={0} fg={theme.text}>
                     {local.model.parsed().model}
                   </text>
                   <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
@@ -880,15 +922,16 @@ export function Prompt(props: PromptProps) {
           borderColor={highlight()}
           customBorderChars={{
             ...EmptyBorder,
-            vertical: theme.backgroundElement.a !== 0 ? "╹" : " ",
+            // when the background is transparent, don't draw the vertical line
+            vertical: theme.background.a != 0 ? "╹" : " ",
           }}
         >
           <box
             height={1}
             border={["bottom"]}
             borderColor={theme.backgroundElement}
             customBorderChars={
-              theme.backgroundElement.a !== 0
+              theme.background.a != 0
                 ? {
                     ...EmptyBorder,
                     horizontal: "▀",

packages/opencode/src/cli/cmd/tui/context/local.tsx

@@ -1,4 +1,4 @@
-import { createStore } from "solid-js/store"
+import { createStore, reconcile } from "solid-js/store"
 import { batch, createEffect, createMemo } from "solid-js"
 import { useSync } from "@tui/context/sync"
 import { useTheme } from "@tui/context/theme"
@@ -12,6 +12,7 @@ import { Provider } from "@/provider/provider"
 import { useArgs } from "./args"
 import { useSDK } from "./sdk"
 import { RGBA } from "@opentui/core"
+import { Ide } from "@/ide"
 
 export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
   name: "Local",
@@ -52,11 +53,11 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     })
 
     const agent = iife(() => {
-      const agents = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent" && !x.hidden))
+      const agents = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent"))
       const [agentStore, setAgentStore] = createStore<{
         current: string
       }>({
-        current: agents().find((x) => x.default)?.name ?? agents()[0].name,
+        current: agents()[0].name,
       })
       const { theme } = useTheme()
       const colors = createMemo(() => [
@@ -329,10 +330,61 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       },
     }
 
+    const ide = {
+      isConnected(name: string) {
+        const status = sync.data.ide[name]
+        return status?.status === "connected"
+      },
+      getWorkspaceFolders(name: string) {
+        const status = sync.data.ide[name]
+        if (status && "workspaceFolders" in status && status.workspaceFolders) {
+          return status.workspaceFolders
+        }
+        return []
+      },
+      async toggle(name: string) {
+        const current = sync.data.ide[name]
+        if (current?.status === "connected") {
+          await sdk.client.ide.disconnect({ name })
+        } else {
+          await sdk.client.ide.connect({ name })
+        }
+        const status = await sdk.client.ide.status()
+        if (status.data) sync.set("ide", reconcile(status.data))
+      },
+    }
+
+
+    const selection = iife(() => {
+      const [selStore, setSelStore] = createStore<{
+        current: Ide.Selection | null
+      }>({ current: null })
+
+      sdk.event.on(Ide.Event.SelectionChanged.type, async (evt) => {
+        setSelStore("current", evt.properties.selection)
+        // Refresh IDE status when we receive a selection
+        const status = await sdk.client.ide.status()
+        if (status.data) sync.set("ide", reconcile(status.data))
+      })
+
+      return {
+        current: () => selStore.current,
+        clear: () => setSelStore("current", null),
+        formatted: () => {
+          const sel = selStore.current
+          if (!sel || !sel.text) return null
+          const lines = sel.text.split("\n").length
+          return `${lines} lines`
+        },
+      }
+    })
+
     const result = {
       model,
       agent,
       mcp,
+      ide,
+      selection,
     }
     return result
   },

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -7,6 +7,7 @@ import { useSync } from "../context/sync"
 import { Toast } from "../ui/toast"
 import { useArgs } from "../context/args"
 import { useDirectory } from "../context/directory"
+import { useLocal } from "../context/local"
 import { useRoute, useRouteData } from "@tui/context/route"
 import { usePromptRef } from "../context/prompt"
 import { Installation } from "@/installation"
@@ -57,10 +58,11 @@ export function Home() {
     } else if (args.prompt) {
       prompt.set({ input: args.prompt, parts: [] })
       once = true
-      prompt.submit()
     }
   })
   const directory = useDirectory()
+  const local = useLocal()
+  const ide = createMemo(() => Object.values(sync.data.ide).find((x) => x.status === "connected"))
 
   return (
     <>
@@ -92,8 +94,20 @@ export function Home() {
               </Switch>
               {connectedMcpCount()} MCP
             </text>
-            <text fg={theme.textMuted}>/status</text>
           </Show>
+          <Show when={ide()}>
+            <text fg={theme.text}>
+              <span style={{ fg: theme.success }}>◆ </span>
+              {ide()!.name}
+            </text>
+          </Show>
+          <Show when={local.selection.formatted()}>
+            <text fg={theme.text}>
+              <span style={{ fg: theme.accent }}>[] </span>
+              {local.selection.formatted()}
+            </text>
+          </Show>
+          <text fg={theme.textMuted}>/status</text>
         </box>
         <box flexGrow={1} />
         <box flexShrink={0}>

packages/opencode/src/cli/cmd/tui/routes/session/footer.tsx

@@ -5,6 +5,7 @@ import { useDirectory } from "../../context/directory"
 import { useConnected } from "../../component/dialog-model"
 import { createStore } from "solid-js/store"
 import { useRoute } from "../../context/route"
+import { useLocal } from "../../context/local"
 
 export function Footer() {
   const { theme } = useTheme()
@@ -13,12 +14,14 @@ export function Footer() {
   const mcp = createMemo(() => Object.values(sync.data.mcp).filter((x) => x.status === "connected").length)
   const mcpError = createMemo(() => Object.values(sync.data.mcp).some((x) => x.status === "failed"))
   const lsp = createMemo(() => Object.keys(sync.data.lsp))
+  const ide = createMemo(() => Object.values(sync.data.ide).find((x) => x.status === "connected"))
   const permissions = createMemo(() => {
     if (route.data.type !== "session") return []
     return sync.data.permission[route.data.sessionID] ?? []
   })
   const directory = useDirectory()
   const connected = useConnected()
+  const local = useLocal()
 
   const [store, setStore] = createStore({
     welcome: false,
@@ -79,6 +82,18 @@ export function Footer() {
                 {mcp()} MCP
               </text>
             </Show>
+            <Show when={ide()}>
+              <text fg={theme.text}>
+                <span style={{ fg: theme.success }}>◆ </span>
+                {ide()!.name}
+              </text>
+            </Show>
+            <Show when={local.selection.formatted()}>
+              <text fg={theme.text}>
+                <span style={{ fg: theme.accent }}>[] </span>
+                {local.selection.formatted()}
+              </text>
+            </Show>
             <text fg={theme.textMuted}>/status</text>
           </Match>
         </Switch>