jbs-client 0.0.1

package/scripts/npm/bin/jbs-client

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+const childProcess = require("child_process")
+const fs = require("fs")
+const path = require("path")
+const os = require("os")
+
+function run(target) {
+  const result = childProcess.spawnSync(target, process.argv.slice(2), {
+    stdio: "inherit",
+  })
+  if (result.error) {
+    console.error(result.error.message)
+    process.exit(1)
+  }
+  process.exit(typeof result.status === "number" ? result.status : 0)
+}
+
+const envPath = process.env.JBS_CLIENT_BIN_PATH
+if (envPath) {
+  run(envPath)
+}
+
+const scriptPath = fs.realpathSync(__filename)
+const scriptDir = path.dirname(scriptPath)
+const cached = path.join(scriptDir, ".jbs-client")
+if (fs.existsSync(cached)) {
+  run(cached)
+}
+
+const platformMap = {
+  darwin: "darwin",
+  linux: "linux",
+  win32: "windows",
+}
+const archMap = {
+  x64: "x64",
+  arm64: "arm64",
+}
+
+const platform = platformMap[os.platform()] || os.platform()
+const arch = archMap[os.arch()] || os.arch()
+const packageName = `jbs-client-${platform}-${arch}`
+const binaryName = platform === "windows" ? "jbs-client.exe" : "jbs-client"
+
+function findBinary(startDir) {
+  let current = startDir
+  for (;;) {
+    const modules = path.join(current, "node_modules")
+    if (fs.existsSync(modules)) {
+      const candidate = path.join(modules, packageName, "bin", binaryName)
+      if (fs.existsSync(candidate)) {
+        return candidate
+      }
+    }
+    const parent = path.dirname(current)
+    if (parent === current) {
+      return undefined
+    }
+    current = parent
+  }
+}
+
+const resolved = findBinary(scriptDir)
+if (!resolved) {
+  console.error(`Unable to find installed binary package "${packageName}".`)
+  process.exit(1)
+}
+
+run(resolved)

package/scripts/npm/postinstall.mjs

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+import fs from "node:fs"
+import os from "node:os"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+function detectPackageName() {
+  const platformMap = {
+    darwin: "darwin",
+    linux: "linux",
+    win32: "windows",
+  }
+  const archMap = {
+    x64: "x64",
+    arm64: "arm64",
+  }
+
+  const platform = platformMap[os.platform()] || os.platform()
+  const arch = archMap[os.arch()] || os.arch()
+  return {
+    packageName: `jbs-client-${platform}-${arch}`,
+    binaryName: platform === "windows" ? "jbs-client.exe" : "jbs-client",
+  }
+}
+
+function findBinary() {
+  const { packageName, binaryName } = detectPackageName()
+  const candidate = path.join(__dirname, "node_modules", packageName, "bin", binaryName)
+  if (!fs.existsSync(candidate)) {
+    throw new Error(`Missing binary package ${packageName}`)
+  }
+  return candidate
+}
+
+function main() {
+  if (os.platform() === "win32") {
+    return
+  }
+
+  const binaryPath = findBinary()
+  const cached = path.join(__dirname, "bin", ".jbs-client")
+  if (fs.existsSync(cached)) {
+    fs.unlinkSync(cached)
+  }
+
+  try {
+    fs.linkSync(binaryPath, cached)
+  } catch {
+    fs.copyFileSync(binaryPath, cached)
+  }
+  fs.chmodSync(cached, 0o755)
+}
+
+try {
+  main()
+} catch (error) {
+  console.error(error instanceof Error ? error.message : String(error))
+  process.exit(0)
+}

package/src/app.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useState } from "react"
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
+import { ActionMenu } from "./components/action-menu.js"
+import { LogPanel } from "./components/log-panel.js"
+import { ParamForm } from "./components/param-form.js"
+import { buildPayload, menu, validateAction } from "./protocol.js"
+import { appendLog, backToMenu, createInitialState, nextFocus, openAction, previousFocus, setConnectionStatus, updateFormValue, updateSelectedAction } from "./state.js"
+import { connectWebSocket } from "./ws.js"
+import type { AppState } from "./types.js"
+import type { Selection } from "@opentui/core"
+
+type AppProps = {
+  host: string
+  wsPort: number
+  connectBackend: boolean
+}
+
+type MenuFocusTarget = "content" | "ws-input" | "reconnect"
+
+export function App({ host, wsPort, connectBackend }: AppProps) {
+  const renderer = useRenderer()
+  const { width, height } = useTerminalDimensions()
+  const [state, setState] = useState(createInitialState)
+  const [validationError, setValidationError] = useState<string | null>(null)
+  const [wsUrl, setWsUrl] = useState(`ws://${host}:${wsPort}`)
+  const [reconnectVersion, setReconnectVersion] = useState(0)
+  const [menuFocusTarget, setMenuFocusTarget] = useState<MenuFocusTarget>("content")
+  const [toastMessage, setToastMessage] = useState<string | null>(null)
+
+  const connection = useMemo(() => {
+    return connectWebSocket({
+      url: wsUrl,
+      enabled: connectBackend,
+      onLog: (message: string) => setState((current: AppState) => appendLog(current, message)),
+      onStatusChange: (status) => setState((current: AppState) => setConnectionStatus(current, status))
+    })
+  }, [connectBackend, reconnectVersion, wsUrl])
+
+  useEffect(() => {
+    if (!connectBackend) {
+      setState((current: AppState) => appendLog(setConnectionStatus(current, "idle"), "[local] backend integration disabled"))
+    }
+    return () => connection.dispose()
+  }, [connectBackend, connection])
+
+  useEffect(() => {
+    const handleSelection = (selection: Selection) => {
+      const text = selection.getSelectedText()
+      if (!text) {
+        return
+      }
+      renderer.copyToClipboardOSC52(text)
+      setToastMessage(`Copied ${text.length} chars to clipboard`)
+    }
+
+    renderer.on("selection", handleSelection)
+    return () => {
+      renderer.off("selection", handleSelection)
+    }
+  }, [renderer])
+
+  useEffect(() => {
+    if (!toastMessage) {
+      return
+    }
+    const timer = setTimeout(() => {
+      setToastMessage(null)
+    }, 3000)
+    return () => clearTimeout(timer)
+  }, [toastMessage])
+
+  const reconnect = () => {
+    setValidationError(null)
+    setState((current: AppState) => appendLog(current, `[system] reconnect requested: ${wsUrl}`))
+    setReconnectVersion((value) => value + 1)
+  }
+
+  const cycleMenuFocus = (backward: boolean) => {
+    const order: MenuFocusTarget[] = ["ws-input", "reconnect", "content"]
+    const currentIndex = order.indexOf(menuFocusTarget)
+    const nextIndex = backward
+      ? (currentIndex - 1 + order.length) % order.length
+      : (currentIndex + 1) % order.length
+    setMenuFocusTarget(order[nextIndex])
+  }
+
+  useKeyboard((key) => {
+    if (key.ctrl && key.name === "c") {
+      renderer.destroy()
+      return
+    }
+
+    if (state.screen === "menu") {
+      if (menuFocusTarget === "ws-input") {
+        if (key.name === "tab") {
+          cycleMenuFocus(Boolean(key.shift))
+          return
+        }
+        if (key.name === "escape") {
+          setMenuFocusTarget("content")
+        }
+        return
+      }
+
+      if (menuFocusTarget === "reconnect") {
+        if (key.name === "tab") {
+          cycleMenuFocus(Boolean(key.shift))
+          return
+        }
+        if (key.name === "enter" || key.name === "return") {
+          reconnect()
+          return
+        }
+        if (key.name === "escape") {
+          setMenuFocusTarget("content")
+        }
+        return
+      }
+
+      if (key.name === "up") {
+        setState((current: AppState) => updateSelectedAction(current, (current.selectedActionIndex - 1 + menu.length) % menu.length))
+        return
+      }
+      if (key.name === "down") {
+        setState((current: AppState) => updateSelectedAction(current, (current.selectedActionIndex + 1) % menu.length))
+        return
+      }
+      if (key.name === "tab") {
+        cycleMenuFocus(Boolean(key.shift))
+        return
+      }
+      if (key.name === "enter" || key.name === "return") {
+        setValidationError(null)
+        setState((current: AppState) => openAction(current))
+        return
+      }
+      return
+    }
+
+    const inputCount = menu[state.selectedActionIndex].params.length
+
+    if (key.name === "escape") {
+      setValidationError(null)
+      setState((current: AppState) => backToMenu(current))
+      return
+    }
+    if (key.name === "tab") {
+      setState((current: AppState) => nextFocus(current, inputCount))
+      return
+    }
+    if (key.shift && key.name === "tab") {
+      setState((current: AppState) => previousFocus(current, inputCount))
+      return
+    }
+    if ((key.name === "enter" || key.name === "return") && state.focusIndex === inputCount) {
+      if (!validateAction(state.selectedActionIndex, state.formValues)) {
+        setValidationError("Param Invalid")
+        setState((current: AppState) => appendLog(current, "Param Invalid"))
+        return
+      }
+      setValidationError(null)
+      const payload = buildPayload(state.selectedActionIndex, state.formValues)
+      setState((current: AppState) => appendLog(current, `[request] ${payload}`))
+      connection.send(payload)
+    }
+  })
+
+  if (width < 100 || height < 30) {
+    return <text>Window need to larger than 100x30, current={width}x{height}</text>
+  }
+
+  return (
+    <box width="100%" height="100%" flexDirection="column" padding={1} gap={1} position="relative">
+      <box border borderColor="#7c3aed" paddingX={1} paddingY={0} flexDirection="row" alignItems="center" gap={1}>
+        <text>JBS Client OpenTUI</text>
+      </box>
+      {toastMessage ? (
+        <box position="absolute" top={1} right={2} zIndex={20} border borderColor="#3b82f6" backgroundColor="#172554" paddingX={1} paddingY={0}>
+          <text fg="#bfdbfe">{toastMessage}</text>
+        </box>
+      ) : null}
+      <box border borderColor="#2563eb" height={3} minHeight={3} maxHeight={3} paddingX={1} paddingY={0} flexDirection="row" alignItems="center" justifyContent="flex-start" gap={1}>
+        <text fg="#93c5fd">WS</text>
+        <box flexGrow={1}>
+          <input value={wsUrl} onChange={setWsUrl} width="100%" focused={state.screen === "menu" && menuFocusTarget === "ws-input"} />
+        </box>
+        <box
+          border
+          borderColor={state.screen === "menu" && menuFocusTarget === "reconnect" ? "#3b82f6" : "#22c55e"}
+          paddingX={1}
+          paddingY={0}
+          flexGrow={0}
+          flexShrink={0}
+          alignSelf="center"
+          width={13}
+          focusable
+          onMouseDown={() => {
+            setMenuFocusTarget("reconnect")
+            reconnect()
+          }}
+        >
+          <text fg={state.screen === "menu" && menuFocusTarget === "reconnect" ? "#93c5fd" : "#22c55e"}>Reconnect</text>
+        </box>
+        <box flexGrow={0} flexShrink={0} width={12}>
+          <text fg={state.connectionStatus === "connected" ? "#22c55e" : state.connectionStatus === "error" ? "#f87171" : "#facc15"}>
+            {state.connectionStatus}
+          </text>
+        </box>
+      </box>
+      <box flexDirection="row" flexGrow={1} gap={1}>
+        <box width="50%" flexGrow={1}>
+          {state.screen === "menu" ? (
+            <ActionMenu
+              focused={menuFocusTarget === "content"}
+              selectedIndex={state.selectedActionIndex}
+              onChange={(index: number) => setState((current: AppState) => updateSelectedAction(current, index))}
+              onSelect={(index: number) => {
+                setValidationError(null)
+                setState((current: AppState) => openAction(current, index))
+              }}
+            />
+          ) : (
+            <ParamForm
+              actionIndex={state.selectedActionIndex}
+              values={state.formValues}
+              focusIndex={state.focusIndex}
+              focused
+              validationError={validationError}
+              onChange={(index: number, value: string) => setState((current: AppState) => updateFormValue(current, index, value))}
+            />
+          )}
+        </box>
+        <box width="50%" flexGrow={1}>
+          <LogPanel logs={state.logs} focused={false} />
+        </box>
+      </box>
+    </box>
+  )
+}

package/src/components/action-menu.tsx

@@ -0,0 +1,28 @@
+import { menu } from "../protocol.js"
+
+type ActionMenuProps = {
+  focused: boolean
+  selectedIndex: number
+  onChange: (index: number) => void
+  onSelect: (index: number) => void
+}
+
+export function ActionMenu({ focused, selectedIndex, onChange, onSelect }: ActionMenuProps) {
+  return (
+    <box border borderStyle="rounded" borderColor="#d946ef" padding={1} flexGrow={1} title="Input the action?">
+      <select
+        focused={focused}
+        height={19}
+        selectedIndex={selectedIndex}
+        options={menu.map((item) => ({
+          name: item.name,
+          value: item.name,
+          description: `${item.params.length} param${item.params.length === 1 ? "" : "s"}`
+        }))}
+        onChange={(index) => onChange(index)}
+        onSelect={(index) => onSelect(index)}
+      />
+      <text fg="#9ca3af">Enter opens the form. Up and Down move the selection.</text>
+    </box>
+  )
+}

package/src/components/log-panel.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react"
+import type { ScrollBoxRenderable } from "@opentui/core"
+
+type LogPanelProps = {
+  logs: string[]
+  focused?: boolean
+}
+
+export function LogPanel({ logs, focused = false }: LogPanelProps) {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      return
+    }
+    scrollRef.current.scrollTo({ x: 0, y: scrollRef.current.scrollHeight })
+  }, [logs])
+
+  return (
+    <box border borderStyle="rounded" borderColor="#26f7ce" padding={1} flexDirection="column" flexGrow={1} title="Logs">
+      <scrollbox ref={scrollRef} flexGrow={1} focused={focused} stickyScroll stickyStart="bottom">
+        <box flexDirection="column">
+          {logs.length === 0 ? <text fg="#6b7280" selectable>Waiting for logs...</text> : null}
+          {logs.map((log, index) => (
+            <text key={`${index}-${log}`} selectable>{log}</text>
+          ))}
+        </box>
+      </scrollbox>
+    </box>
+  )
+}

package/src/components/param-form.tsx

@@ -0,0 +1,73 @@
+import { useRef } from "react"
+import { menu } from "../protocol.js"
+
+type ParamFormProps = {
+  actionIndex: number
+  values: string[]
+  focusIndex: number
+  focused: boolean
+  validationError: string | null
+  onChange: (index: number, value: string) => void
+}
+
+export function ParamForm({ actionIndex, values, focusIndex, focused, validationError, onChange }: ParamFormProps) {
+  const action = menu[actionIndex]
+  const submitFocused = focused && focusIndex === action.params.length
+  const textareaRefs = useRef<Record<number, { plainText?: string; initialValue?: string } | null>>({})
+
+  return (
+    <box border borderStyle="rounded" borderColor="#d946ef" padding={1} flexDirection="column" gap={1} flexGrow={1} title={action.name}>
+      {action.params.length === 0 ? <text fg="#d1d5db">This action does not need parameters.</text> : null}
+      {action.params.map((param, index) => (
+        <box key={`${action.name}-${param.name}`} flexDirection="column" gap={1}>
+          <text fg="#a7f3d0">{param.name}</text>
+          {param.inputType === "textarea" ? (
+            <line-number minWidth={4} paddingRight={1} fg="#f472b6">
+              <textarea
+                ref={(instance) => {
+                  textareaRefs.current[index] = instance
+                }}
+                initialValue={values[index] ?? ""}
+                height={12}
+                width="100%"
+                focused={focused && focusIndex === index}
+                wrapMode="word"
+                onContentChange={() => onChange(index, textareaRefs.current[index]?.plainText ?? values[index] ?? "")}
+              />
+            </line-number>
+          ) : param.inputType === "select" ? (
+            <select
+              options={(param.options ?? []).map((option) => ({
+                name: option.name,
+                description: option.description,
+                value: option.value
+              }))}
+              selectedIndex={Math.max(0, (param.options ?? []).findIndex((option) => option.value === (values[index] ?? param.value)))}
+              focused={focused && focusIndex === index}
+              height={4}
+              onChange={(selectedIndex, option) => onChange(index, String(option?.value ?? (param.options ?? [])[selectedIndex]?.value ?? param.value))}
+            />
+          ) : (
+            <input
+              value={values[index] ?? ""}
+              onChange={(value) => onChange(index, value)}
+              width="100%"
+              focused={focused && focusIndex === index}
+            />
+          )}
+        </box>
+      ))}
+      <box
+        border
+        borderStyle={submitFocused ? "double" : "single"}
+        borderColor={submitFocused ? "#22c55e" : "#6b7280"}
+        paddingX={2}
+        paddingY={1}
+      >
+        <text fg={submitFocused ? "#22c55e" : "#9ca3af"}>[ Submit ]</text>
+      </box>
+      {validationError ? <text fg="#f87171">{validationError}</text> : null}
+      <text fg="#9ca3af">Tab or Shift+Tab changes form focus. Esc returns to the action menu.</text>
+    </box>
+  )
+}

package/src/components.test.tsx

@@ -0,0 +1,36 @@
+import { afterEach, describe, expect, test } from "bun:test"
+import { testRender } from "@opentui/react/test-utils"
+import { ActionMenu } from "./components/action-menu.js"
+import { LogPanel } from "./components/log-panel.js"
+
+let setup: Awaited<ReturnType<typeof testRender>> | undefined
+
+afterEach(() => {
+  setup?.renderer.destroy()
+  setup = undefined
+})
+
+describe("components", () => {
+  test("ActionMenu renders menu title and options", async () => {
+    setup = await testRender(<ActionMenu focused selectedIndex={0} onChange={() => {}} onSelect={() => {}} />, {
+      width: 70,
+      height: 20
+    })
+    await setup.renderOnce()
+    const frame = setup.captureCharFrame()
+    expect(frame).toContain("Input the action?")
+    expect(frame).toContain("Watch")
+    expect(frame).toContain("Eval")
+  })
+
+  test("LogPanel renders logs and status", async () => {
+    setup = await testRender(<LogPanel logs={["hello", "world"]} />, {
+      width: 60,
+      height: 16
+    })
+    await setup.renderOnce()
+    const frame = setup.captureCharFrame()
+    expect(frame).toContain("Logs")
+    expect(frame).toContain("world")
+  })
+})

package/src/index.tsx

@@ -0,0 +1,19 @@
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+import { App } from "./app.js"
+
+function readArg(name: string, fallback: string): string {
+  const args = Bun.argv.slice(2)
+  const index = args.indexOf(name)
+  return index >= 0 && index + 1 < args.length ? args[index + 1] : fallback
+}
+
+const host = readArg("--host", "localhost")
+const wsPort = Number.parseInt(readArg("--ws_port", "18000"), 10)
+const connectBackend = readArg("--connect", "true") !== "false"
+
+const renderer = await createCliRenderer({
+  exitOnCtrlC: false
+})
+
+createRoot(renderer).render(<App host={host} wsPort={wsPort} connectBackend={connectBackend} />)

package/src/protocol.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from "bun:test"
+import { buildInitialFormValues, buildPayload, menu, validateAction } from "./protocol.js"
+
+describe("protocol", () => {
+  test("buildInitialFormValues copies defaults", () => {
+    expect(buildInitialFormValues(0)).toEqual(["", "0"])
+    expect(buildInitialFormValues(7)[0]).toContain("ApplicationContext")
+    expect(buildInitialFormValues(3)[2]).toBe("asm")
+  })
+
+  test("validateAction enforces signature checks", () => {
+    expect(validateAction(0, ["com.demo.Service#run", "1"])).toBe(true)
+    expect(validateAction(0, ["com.demo.Service.run", "1"])).toBe(false)
+  })
+
+  test("buildPayload serializes change body request", () => {
+    const payload = JSON.parse(buildPayload(3, ["a.B#c", "java.lang.String, int", "javassist", "return 1;"])) as Record<string, unknown>
+    expect(payload.type).toBe("CHANGE_BODY")
+    expect(payload.className).toBe("a.B")
+    expect(payload.method).toBe("c")
+    expect(payload.paramTypes).toEqual(["java.lang.String", "int"])
+    expect(payload.body).toBe("return 1;")
+    expect(payload.mode).toBe(0)
+    expect(typeof payload.id).toBe("string")
+  })
+
+  test("buildPayload serializes eval and decompile requests", () => {
+    const decompilePayload = JSON.parse(buildPayload(5, ["demo.Service"])) as Record<string, unknown>
+    expect(decompilePayload.type).toBe("DECOMPILE")
+    expect(decompilePayload.className).toBe("demo.Service")
+
+    const evalPayload = JSON.parse(buildPayload(6, ["1 + 1"])) as Record<string, unknown>
+    expect(evalPayload.type).toBe("EVAL")
+    expect(evalPayload.body).toBe("1 + 1")
+  })
+
+  test("menu preserves expected action count", () => {
+    expect(menu.map((item) => item.name)).toEqual(["Watch", "OuterWatch", "Trace", "ChangeBody", "ChangeResult", "Decompile", "Eval", "Exec", "Reset"])
+  })
+})