opencode-multiplexer 0.1.0

package/src/views/spawn.tsx

@@ -0,0 +1,198 @@
+import React from "react"
+import { Box, Text } from "ink"
+import TextInput from "ink-text-input"
+import { execSync, spawn } from "child_process"
+import { existsSync } from "fs"
+import { createOpencodeClient } from "@opencode-ai/sdk"
+import { useStore } from "../store.js"
+import { useSpawnKeys } from "../hooks/use-keybindings.js"
+import { refreshNow } from "../poller.js"
+import { yieldToOpencode } from "../hooks/use-attach.js"
+import {
+  findNextPort,
+  waitForServer,
+  loadSpawnedInstances,
+  saveSpawnedInstances,
+} from "../registry/instances.js"
+
+function expandHome(p: string): string {
+  if (p.startsWith("~")) {
+    return p.replace(/^~/, process.env.HOME ?? process.env.USERPROFILE ?? "")
+  }
+  return p
+}
+
+function isFzfAvailable(): boolean {
+  try {
+    execSync("which fzf", { stdio: "pipe" })
+    return true
+  } catch {
+    return false
+  }
+}
+
+function runFzf(): string | undefined {
+  try {
+    const searchPaths = [
+      expandHome("~/Programming"),
+      expandHome("~/repos"),
+      expandHome("~/projects"),
+      expandHome("~/code"),
+      expandHome("~"),
+    ]
+      .filter((p) => p && existsSync(p))
+      .join(" ")
+
+    const cmd = `find ${searchPaths} -maxdepth 3 -type d 2>/dev/null | fzf --prompt="Select project folder: " --height=40%`
+    const result = execSync(cmd, {
+      stdio: ["inherit", "pipe", "inherit"],
+      encoding: "utf-8",
+    })
+    return result.trim() || undefined
+  } catch {
+    return undefined
+  }
+}
+
+export function Spawn() {
+  const navigate = useStore((s) => s.navigate)
+  const [manualPath, setManualPath] = React.useState("")
+  const [status, setStatus] = React.useState<"idle" | "spawning" | "error">("idle")
+  const [errorMsg, setErrorMsg] = React.useState("")
+  const [hasFzf] = React.useState(() => isFzfAvailable())
+
+  useSpawnKeys({
+    onCancel: () => navigate("dashboard"),
+  })
+
+  const doSpawn = React.useCallback(
+    async (cwd: string) => {
+      const expanded = expandHome(cwd.trim())
+      if (!expanded) return
+      if (!existsSync(expanded)) {
+        setErrorMsg(`Path does not exist: ${expanded}`)
+        setStatus("error")
+        return
+      }
+
+      setStatus("spawning")
+      setErrorMsg("")
+
+      try {
+        // 1. Find next available port
+        const port = await findNextPort()
+
+        // 2. Spawn opencode serve --port {port} as a detached background process
+        const proc = spawn("opencode", ["serve", "--port", String(port)], {
+          cwd: expanded,
+          detached: true,
+          stdio: "ignore",
+        })
+        proc.unref() // don't block OCMux's event loop on this child
+
+        // 3. Wait for the server to be ready
+        await waitForServer(port)
+
+        // 4. Create an initial session via SDK
+        const client = createOpencodeClient({ baseUrl: `http://localhost:${port}` })
+        const sessionResult = await client.session.create()
+        const sessionId = (sessionResult as any).data?.id ?? null
+
+        // 5. Persist the spawned instance info
+        const instances = loadSpawnedInstances()
+        instances.push({
+          port,
+          pid: proc.pid!,
+          cwd: expanded,
+          sessionId,
+        })
+        saveSpawnedInstances(instances)
+
+        // 6. Refresh so the dashboard knows about the new instance
+        refreshNow()
+
+        // 7. Immediately attach to the new session
+        if (sessionId) {
+          yieldToOpencode(sessionId, expanded)
+        }
+
+        navigate("dashboard")
+      } catch (e) {
+        setErrorMsg(String(e))
+        setStatus("error")
+      }
+    },
+    [navigate],
+  )
+
+  const openFzf = React.useCallback(() => {
+    const selected = runFzf()
+    if (selected) {
+      void doSpawn(selected)
+    }
+  }, [doSpawn])
+
+  React.useEffect(() => {
+    if (hasFzf) {
+      setTimeout(() => openFzf(), 50)
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (status === "spawning") {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text bold>ocmux — spawning opencode server...</Text>
+        <Text dimColor>Starting background server, please wait...</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold>ocmux — open in opencode</Text>
+      <Text dimColor>{"─".repeat(60)}</Text>
+
+      {hasFzf ? (
+        <Box flexDirection="column" marginTop={1}>
+          <Text>Press Enter to open folder picker (fzf)</Text>
+          <Text dimColor>or type a path manually below:</Text>
+        </Box>
+      ) : (
+        <Box marginTop={1}>
+          <Text dimColor>fzf not found. Enter path manually:</Text>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text dimColor>{">"} </Text>
+        <TextInput
+          value={manualPath}
+          onChange={setManualPath}
+          onSubmit={() => {
+            if (manualPath.trim()) {
+              void doSpawn(manualPath)
+            } else if (hasFzf) {
+              openFzf()
+            }
+          }}
+          placeholder={
+            hasFzf
+              ? "Enter to open picker, or type path..."
+              : "Enter path to project..."
+          }
+        />
+      </Box>
+
+      {status === "error" && (
+        <Box marginTop={1}>
+          <Text color="red">{errorMsg}</Text>
+          <Text dimColor> (press Esc to go back)</Text>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text dimColor>Esc: back to dashboard</Text>
+      </Box>
+    </Box>
+  )
+}

package/test/spike-attach.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { render, Text, Box, useInput } from "ink"
+import { execSync } from "child_process"
+
+function App() {
+  const [status, setStatus] = React.useState(
+    "Ready. Press 'a' to attach to 'spike-test' tmux session, 'q' to quit."
+  )
+
+  useInput((input) => {
+    if (input === "a") {
+      setStatus("Attaching to tmux...")
+      setTimeout(() => {
+        try {
+          execSync("tmux attach-session -t spike-test", { stdio: "inherit" })
+          setStatus("Returned from tmux successfully. Ink recovered! Press 'q' to quit.")
+        } catch (e: any) {
+          setStatus(`Error or detached: ${e?.message ?? e}. Press 'q' to quit.`)
+        }
+      }, 100)
+    }
+    if (input === "q") process.exit(0)
+  })
+
+  return (
+    <Box flexDirection="column">
+      <Text>{status}</Text>
+    </Box>
+  )
+}
+
+render(<App />)

package/test/spike-chat.ts

@@ -0,0 +1,67 @@
+import { createOpencodeClient, type Session, type TextPart } from "@opencode-ai/sdk"
+
+const port = process.argv[2] || "4096"
+const client = createOpencodeClient({ baseUrl: `http://localhost:${port}` })
+
+console.log(`Connecting to opencode on port ${port}...`)
+
+// List sessions
+const sessionsResult = await client.session.list()
+if (sessionsResult.error || !sessionsResult.data) {
+  console.error("Failed to list sessions. Is opencode running on this port?", sessionsResult.error)
+  process.exit(1)
+}
+
+const sessions = sessionsResult.data
+if (sessions.length === 0) {
+  console.log("No sessions found. Create one in the opencode TUI first.")
+  process.exit(1)
+}
+
+console.log(`Found ${sessions.length} sessions:`)
+sessions.forEach((s: Session, i: number) => console.log(`  [${i}] ${s.id}: "${s.title}"`))
+
+const session = sessions[0]!
+console.log(`\nUsing session: "${session.title}" (${session.id})`)
+
+// Get available providers
+console.log("\nFetching available providers...")
+try {
+  const providersResult = await client.provider.list()
+  console.log("Providers:", JSON.stringify(providersResult.data, null, 2))
+} catch (e) {
+  console.log("Could not fetch providers:", e)
+}
+
+// Get messages to see conversation state
+console.log("\nFetching messages...")
+const messagesResult = await client.session.messages({ path: { id: session.id } })
+if (messagesResult.error || !messagesResult.data) {
+  console.log("Could not fetch messages:", messagesResult.error)
+} else {
+  const messages = messagesResult.data
+  console.log(`Found ${messages.length} messages`)
+
+  if (messages.length > 0) {
+    const last = messages[messages.length - 1]!
+    console.log(`Last message role: ${last.info.role}`)
+    const textParts = last.parts.filter((p): p is TextPart => p.type === "text")
+    if (textParts.length > 0) {
+      console.log(`Last message preview: "${textParts[0]!.text.substring(0, 100)}..."`)
+    }
+  }
+}
+
+console.log("\n--- Spike complete ---")
+console.log("To test sending a message, uncomment the chat section below and fill in providerID/modelID")
+console.log("based on the providers output above.")
+
+// Uncomment to test sending a message:
+// const result = await client.session.prompt({
+//   path: { id: session.id },
+//   body: {
+//     model: { providerID: "anthropic", modelID: "claude-sonnet-4-20250514" },
+//     parts: [{ type: "text", text: "What files are in the current directory?" }],
+//   },
+// })
+// console.log("Response:", JSON.stringify(result.data, null, 2))

package/test/spike-status.ts

@@ -0,0 +1,33 @@
+import { createOpencodeClient } from "@opencode-ai/sdk"
+
+const port = process.argv[2] || "4096"
+const client = createOpencodeClient({ baseUrl: `http://localhost:${port}` })
+
+console.log(`Connecting to opencode on port ${port}...`)
+
+const sessionsResult = await client.session.list()
+if (sessionsResult.error || !sessionsResult.data) {
+  console.error("Failed to list sessions. Is opencode running on this port?", sessionsResult.error)
+  process.exit(1)
+}
+
+const sessions = sessionsResult.data
+console.log(`Found ${sessions.length} sessions:`)
+for (const s of sessions) {
+  console.log(`  - ${s.id}: "${s.title}" (created: ${new Date(s.time.created).toLocaleString()})`)
+}
+
+console.log("\nListening for events (Ctrl+C to stop)...")
+console.log("Interact with the opencode instance to see events flow.\n")
+
+try {
+  const { stream } = await client.event.subscribe()
+  for await (const event of stream) {
+    const timestamp = new Date().toLocaleTimeString()
+    console.log(`[${timestamp}] ${event.type}`)
+    console.log(`  ${JSON.stringify(event.properties, null, 2).split("\n").join("\n  ")}`)
+    console.log()
+  }
+} catch (e) {
+  console.error("Event stream error:", e)
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*", "test/**/*"]
+}