feat(ocm-cli): add remote indicator to TUI when attached to Manager (#313)

* feat(ocm-cli): add remote indicator to TUI when attached to Manager

* chore(ocm-cli): bump version to 0.2.3

* feat(ocm-cli): show remote indicator on home screen and session prompt

* feat(ocm-cli): remove arrow icon from remote indicator

* docs: remove arrow icon from remote indicator description

Author: chriswritescode-dev

docs/ocm-cli.md

@@ -111,14 +111,18 @@ ocm --help                Show this help
 Under the hood, `ocm` execs:
 
 ```bash
-opencode attach https://manager.example.com/api/opencode-proxy \
+OCM_REMOTE_MANAGER_URL=https://manager.example.com \
+OCM_REMOTE_REPO_NAME=my-repo \
+  opencode attach https://manager.example.com/api/opencode-proxy \
   --dir /path/to/repo/on/manager \
   --password <manager-token> \
   --username opencode
 ```
 
 The child takes over the terminal (`stdio: inherit`); closing the TUI exits `ocm` but leaves the Manager-side session intact.
 
+When the TUI plugin is installed, these internal child-process variables add a `REMOTE <host> · <repo>` indicator to the bottom of Manager-attached TUI windows. Local launches show no indicator.
+
 ### Mirror commands
 
 `ocm push` uses a fast git bundle + working-tree patch by default to sync `$PWD` to the matching Manager repo. Pass `--full` to use the legacy tarball mirror (skipping `node_modules`, `dist`, `.next`, `.venv`, `__pycache__`, `.turbo`, and anything matched by `.gitignore`). If the fast path fails, `ocm` prompts before reverting to the tarball mirror (and proceeds automatically when there is no TTY to prompt).
@@ -142,6 +146,8 @@ Both can be used in place of `ocm login`:
 | Variable | Description |
 |---|---|
 | `OPENCODE_MANAGER_URL` | Manager base URL (e.g., `https://manager.example.com`). Not currently consumed by the CLI — use `ocm login`. |
+| `OCM_REMOTE_MANAGER_URL` | Internal child-process context set by `ocm attach`; controls the remote TUI indicator. Not a login setting. |
+| `OCM_REMOTE_REPO_NAME` | Internal child-process context set by `ocm attach`; labels the remote TUI indicator. Not a login setting. |
 | Keychain entry under `https://manager.example.com` | Token used for Bearer auth on Manager API calls and Basic auth on the OpenCode proxy. |
 
 ---

ocm-cli/README.md

@@ -65,7 +65,9 @@ refuses to overwrite uncommitted local changes unless `--force` is passed.
 
 The package exposes an OpenCode TUI plugin through its `./tui` package export.
 Configure the package name and OpenCode resolves that TUI entrypoint
-automatically. It registers `/ocm-move`, which keeps the local session and
+automatically. When attached to a Manager via `ocm`, the plugin shows a
+`REMOTE <host> · <repo>` indicator at the bottom of the TUI; local launches
+show nothing. It registers `/ocm-move`, which keeps the local session and
 copies the active session to the Manager after pushing the current repo state.
 Use it from inside an OpenCode session after `ocm login` and after the repo
 already exists on the Manager (`ocm push --create` if needed).

ocm-cli/bin/ocm.ts

@@ -9,6 +9,7 @@ import { createProgressReporter } from '../src/progress.js'
 import { getBranchName, getOriginUrl } from '../src/local-repo.js'
 import { resolveOpenCodeProjectId } from '@opencode-manager/shared/project-id'
 import { resolveTarget } from '../src/resolve-target.js'
+import { buildRemoteAttachEnv } from '../src/remote-context.js'
 import { type ManagerRepo, fetchRepos, toRemoteRepoSummaries } from '../src/manager-repos.js'
 import packageJson from '../package.json' with { type: 'json' }
 
@@ -141,7 +142,10 @@ async function attach(managerUrl: string, token: string, repo: ManagerRepo): Pro
     '--password', token,
     '--username', 'opencode',
   ]
-  const child = spawn('opencode', args, { stdio: 'inherit' })
+  const child = spawn('opencode', args, {
+    stdio: 'inherit',
+    env: { ...process.env, ...buildRemoteAttachEnv(managerUrl, repo.name) },
+  })
   child.on('close', (code) => process.exit(code ?? 0))
   child.on('error', (err) => die(`failed to spawn opencode: ${err.message}`))
   // hand control to child

ocm-cli/eslint.config.js

@@ -5,7 +5,7 @@ import { defineConfig, globalIgnores } from 'eslint/config'
 export default defineConfig([
   globalIgnores(['dist', '.env*', 'coverage']),
   {
-    files: ['**/*.ts'],
+    files: ['**/*.ts', '**/*.tsx'],
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,

ocm-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-manager/ocm-cli",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "OpenCode Manager CLI: attach a local OpenCode TUI to a Manager-hosted repo.",
   "license": "MIT",
   "repository": {
@@ -14,7 +14,7 @@
   ],
   "exports": {
     "./tui": {
-      "import": "./dist/tui.js"
+      "import": "./dist/tui.tsx"
     }
   },
   "bin": {
@@ -29,18 +29,21 @@
     "build": "bun scripts/build.ts",
     "postinstall": "node scripts/postinstall.mjs || true",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint . --ext .ts",
-    "lint:fix": "eslint . --ext .ts --fix",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "test": "bun scripts/build.ts && vitest run",
     "test:watch": "vitest",
     "prepublishOnly": "bun scripts/build.ts"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
     "@opencode-manager/shared": "workspace:*",
+    "@opentui/core": "^0.1.97",
+    "@opentui/solid": "^0.1.97",
     "@types/bun": "^1.3.14",
     "@types/node": "^22.0.0",
     "eslint": "^9.39.1",
+    "solid-js": "^1.9.11",
     "typescript": "^5.5.0",
     "typescript-eslint": "^8.45.0",
     "vitest": "^3.1.0"

ocm-cli/scripts/build.ts

@@ -1,4 +1,4 @@
-import { chmodSync, writeFileSync, rmSync, readFileSync } from 'fs'
+import { chmodSync, copyFileSync, writeFileSync, rmSync, readFileSync } from 'fs'
 import { join } from 'path'
 
 const root = join(import.meta.dir, '..')
@@ -26,7 +26,9 @@ async function bundleEntry(label: string, entrypoint: string, outputName: string
 }
 
 await bundleEntry('ocm CLI', join('bin', 'ocm.ts'), 'ocm.js')
-await bundleEntry('TUI plugin entry', join('src', 'tui-plugin.ts'), 'tui.js')
+await bundleEntry('TUI plugin impl', join('src', 'tui-plugin.ts'), 'tui-plugin.js')
+
+copyFileSync(join(root, 'src', 'tui.tsx'), join(dist, 'tui.tsx'))
 
 const ocmJsPath = join(dist, 'ocm.js')
 const ocmJsContent = readFileSync(ocmJsPath, 'utf-8')

ocm-cli/src/remote-context.ts

@@ -0,0 +1,30 @@
+export const REMOTE_MANAGER_URL_ENV = 'OCM_REMOTE_MANAGER_URL'
+export const REMOTE_REPO_NAME_ENV = 'OCM_REMOTE_REPO_NAME'
+
+export type RemoteContext = {
+  managerHost: string
+  repoName?: string
+}
+
+export function buildRemoteAttachEnv(managerUrl: string, repoName: string): Record<string, string> {
+  return {
+    [REMOTE_MANAGER_URL_ENV]: managerUrl,
+    [REMOTE_REPO_NAME_ENV]: repoName,
+  }
+}
+
+export function readRemoteContext(env: NodeJS.ProcessEnv): RemoteContext | undefined {
+  const urlValue = env[REMOTE_MANAGER_URL_ENV]
+  if (!urlValue) return undefined
+
+  let managerHost: string
+  try {
+    managerHost = new URL(urlValue).host
+  } catch {
+    managerHost = urlValue.trim()
+  }
+
+  const repoName = env[REMOTE_REPO_NAME_ENV] || undefined
+
+  return { managerHost, repoName }
+}

ocm-cli/src/tui-plugin.ts

@@ -1,4 +1,4 @@
-import type { TuiPluginApi, TuiPluginModule } from './tui-types.js'
+import type { TuiPluginApi } from './tui-types.js'
 import { readInstallNotice, readState } from './state.js'
 import { getToken } from './keychain.js'
 import { fetchRepos, toRemoteRepoSummaries } from './manager-repos.js'
@@ -8,7 +8,7 @@ import { transferSession } from './session-move.js'
 import { createManagerReplay } from './remote-replay.js'
 import { readSessionEvents } from './local-history.js'
 
-const tui = async (api: TuiPluginApi): Promise<void> => {
+export async function setupOcm(api: TuiPluginApi): Promise<void> {
   showInstallNotice(api)
   api.keymap.registerLayer({
     commands: [
@@ -124,4 +124,4 @@ async function runSessionMove(api: TuiPluginApi): Promise<void> {
   }
 }
 
-export default { id: 'ocm', tui } satisfies TuiPluginModule
+export { readRemoteContext } from './remote-context.js'

ocm-cli/src/tui-types.ts

@@ -1,3 +1,19 @@
+import type { RGBA } from '@opentui/core'
+
+export type TuiThemeColors = {
+  accent: RGBA
+  text: RGBA
+  textMuted: RGBA
+  backgroundElement: RGBA
+}
+
+export type TuiSlotContext = { theme: { readonly current: TuiThemeColors } }
+
+export type TuiSlotRegistration = {
+  order?: number
+  slots: Record<string, (ctx: TuiSlotContext, props: Record<string, unknown>) => unknown>
+}
+
 export type TuiRouteCurrent = { name: 'session'; params: { sessionID: string } } | { name: string; params?: Record<string, unknown> }
 export type TuiSessionInfo = { id: string; directory: string; title?: string }
 export type TuiToast = { title?: string; message: string; variant?: 'info' | 'success' | 'error' | 'warning'; duration?: number }
@@ -7,5 +23,6 @@ export type TuiPluginApi = {
   state: { session: { get: (sessionID: string) => TuiSessionInfo | undefined } }
   ui: { toast: (input: TuiToast) => void }
   keymap: { registerLayer: (layer: { commands: TuiCommandDef[]; bindings?: Record<string, unknown> }) => unknown }
+  slots: { register: (registration: TuiSlotRegistration) => string }
 }
 export type TuiPluginModule = { id?: string; tui: (api: TuiPluginApi, options?: Record<string, unknown>) => Promise<void> }

ocm-cli/src/tui.tsx

@@ -0,0 +1,33 @@
+/** @jsxImportSource @opentui/solid */
+import { setupOcm, readRemoteContext } from './tui-plugin.js'
+import type { TuiPluginApi, TuiPluginModule, TuiSlotContext } from './tui-types.js'
+
+const tui = async (api: TuiPluginApi): Promise<void> => {
+  await setupOcm(api)
+
+  const remote = readRemoteContext(process.env)
+  if (!remote) return
+
+  const label = remote.repoName ? `${remote.managerHost} · ${remote.repoName}` : remote.managerHost
+  const indicator = (ctx: TuiSlotContext) => {
+    const theme = ctx.theme.current
+    return (
+      <box flexDirection="row" flexShrink={0} gap={1}>
+        <text fg={theme.accent}>
+          <b>REMOTE</b>
+        </text>
+        <text fg={theme.textMuted}>{label}</text>
+      </box>
+    )
+  }
+
+  api.slots.register({
+    order: 300,
+    slots: {
+      session_prompt_right: indicator,
+      home_prompt_right: indicator,
+    },
+  })
+}
+
+export default { id: 'ocm', tui } satisfies TuiPluginModule