CLI - Show Remote Badge In TUI Prompt

.changeset/remote-tui-badge.md

@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+Show the Remote badge in the TUI prompt status area when remote session relay is enabled.

packages/opencode/src/cli/cmd/tui/plugin/internal.ts

@@ -14,6 +14,7 @@ import KiloMemoryPalette from "@/kilocode/plugins/memory-palette" // kilocode_ch
 import KiloSidebarPr from "@/kilocode/plugins/sidebar-pr"
 import KiloSidebarUsage from "@/kilocode/plugins/sidebar-usage"
 import KiloSandbox from "@/kilocode/plugins/sandbox"
+import KiloRemote from "@/kilocode/plugins/remote"
 // kilocode_change end
 import SidebarContext from "../feature-plugins/sidebar/context"
 import SidebarMcp from "../feature-plugins/sidebar/mcp"
@@ -52,6 +53,7 @@ export function internalTuiPlugins(flags: Pick<RuntimeFlags.Info, "experimentalE
     KiloSidebarPr, // kilocode_change
     KiloSidebarUsage, // kilocode_change
     KiloSandbox, // kilocode_change
+    KiloRemote, // kilocode_change
     HomeFooter,
     HomeTips,
     SidebarContext,

packages/opencode/src/kilocode/plugins/home-footer.tsx

@@ -7,44 +7,12 @@
  * and version information.
  */
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@kilocode/plugin/tui"
-import { createMemo, createSignal, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { createMemo, Match, Show, Switch } from "solid-js"
 import { Global } from "@opencode-ai/core/global"
+import { RemoteIndicator } from "@/kilocode/remote-tui"
 
 const id = "internal:kilo-home-footer"
 
-type Status = {
-  enabled: boolean
-  connected: boolean
-}
-
-// ---------------------------------------------------------------------------
-// RemoteIndicator – adapted from @/kilocode/remote-tui for plugin API usage
-// ---------------------------------------------------------------------------
-
-function RemoteIndicator(props: { api: TuiPluginApi; kilo: boolean }) {
-  const theme = () => props.api.theme.current
-  const [status, setStatus] = createSignal<Status | null>(null)
-
-  onMount(() => {
-    void props.api.client.remote
-      .status()
-      .then((res: { data?: Status }) => {
-        if (res.data) setStatus(res.data)
-      })
-      .catch(() => undefined)
-    const off = props.api.event.on("kilo-sessions.remote-status-changed", (evt) => setStatus(evt.properties))
-    onCleanup(off)
-  })
-
-  return (
-    <Show when={props.kilo && status()?.enabled}>
-      <text fg={status()?.connected ? theme().success : theme().warning}>
-        ◆ Remote{status()?.connected ? "" : " …"}
-      </text>
-    </Show>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // Sub-components (mirror upstream home/footer with kilo additions)
 // ---------------------------------------------------------------------------
@@ -105,6 +73,7 @@ function Version(props: { api: TuiPluginApi }) {
 
 function View(props: { api: TuiPluginApi }) {
   const kilo = createMemo(() => props.api.state.provider.some((p) => p.id === "kilo"))
+  const sdk = { client: props.api.client }
 
   return (
     <box
@@ -119,7 +88,12 @@ function View(props: { api: TuiPluginApi }) {
     >
       <Directory api={props.api} />
       <box gap={1} flexDirection="row" flexShrink={0}>
-        <RemoteIndicator api={props.api} kilo={kilo()} />
+        <RemoteIndicator
+          sdk={sdk}
+          theme={props.api.theme.current}
+          kilo={kilo()}
+          event={props.api.event}
+        />
         <Mcp api={props.api} />
       </box>
       <box flexGrow={1} />

packages/opencode/src/kilocode/plugins/remote.tsx

@@ -0,0 +1,32 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@kilocode/plugin/tui"
+import { RemoteIndicator } from "@/kilocode/remote-tui"
+
+const id = "internal:remote"
+
+function View(props: { api: TuiPluginApi }) {
+  return (
+    <box flexShrink={0}>
+      <RemoteIndicator
+        sdk={{ client: props.api.client }}
+        theme={props.api.theme.current}
+        kilo={true}
+        event={props.api.event}
+      />
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 51,
+    slots: {
+      session_prompt_right() {
+        return <View api={api} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = { id, tui }
+
+export default plugin