jonsoc 1.1.50 → 1.1.51

package/src/cli/cmd/tui/routes/ui-settings.tsx

@@ -0,0 +1,449 @@
+import { createSignal, createMemo, For, Show } from "solid-js"
+import { useRoute, useRouteData } from "@tui/context/route"
+import { useLayout, type PanelType } from "@tui/context/layout"
+import { useTheme } from "@tui/context/theme"
+import { useTerminalDimensions } from "@opentui/solid"
+import { TextAttributes, RGBA } from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
+
+const PANEL_COLORS: Record<PanelType, [number, number, number]> = {
+  chat: [100, 200, 100],
+  explorer: [255, 200, 100],
+  viewer: [100, 150, 255],
+}
+
+function getPanelColor(type: PanelType, alpha: number): RGBA {
+  const [r, g, b] = PANEL_COLORS[type]
+  return RGBA.fromInts(r, g, b, Math.floor(alpha * 255))
+}
+
+const PANEL_NAMES: Record<PanelType, string> = {
+  chat: "CHAT",
+  explorer: "EXPLORER",
+  viewer: "VIEWER",
+}
+
+const PANEL_DESC: Record<PanelType, string> = {
+  chat: "Conversation & Prompt",
+  explorer: "File Tree & Git Status",
+  viewer: "File Editor & Preview",
+}
+
+export function UISettings() {
+  const route = useRouteData("ui-settings")
+  const { navigate } = useRoute()
+  const layout = useLayout()
+  const { theme } = useTheme()
+  const dimensions = useTerminalDimensions()
+
+  // Click-to-swap state
+  const [selectedPanel, setSelectedPanel] = createSignal<PanelType | null>(null)
+
+  // Width adjustment step
+  const WIDTH_STEP = 5
+
+  const safeDimensions = createMemo(() => {
+    const dims = dimensions()
+    return {
+      width: dims?.width ?? 80,
+      height: dims?.height ?? 24,
+    }
+  })
+
+  // Preview dimensions: match terminal aspect ratio exactly
+  const previewDimensions = createMemo(() => {
+    const termWidth = safeDimensions().width - 4 // Account for padding
+    const termHeight = safeDimensions().height - 8 // Account for header/footer
+
+    // Use 60% of available space for preview to leave room for controls
+    const maxWidth = Math.floor(termWidth * 0.6)
+    const maxHeight = Math.floor(termHeight * 0.6)
+
+    // Calculate aspect ratio of terminal
+    const aspectRatio = termWidth / termHeight
+
+    // Calculate preview dimensions maintaining exact aspect ratio
+    let previewWidth = maxWidth
+    let previewHeight = Math.floor(previewWidth / aspectRatio)
+
+    // If height exceeds max, scale down proportionally
+    if (previewHeight > maxHeight) {
+      previewHeight = maxHeight
+      previewWidth = Math.floor(previewHeight * aspectRatio)
+    }
+
+    // Ensure minimum dimensions
+    previewWidth = Math.max(30, previewWidth)
+    previewHeight = Math.max(8, previewHeight)
+
+    return { width: previewWidth, height: previewHeight }
+  })
+
+  // Get visible panels sorted by position for layout preview
+  const visiblePanels = createMemo(() => layout.panels.filter((p) => p.visible).sort((a, b) => a.position - b.position))
+
+  // Calculate proportional width for each visible panel in the preview
+  const getPanelPreviewWidth = (panel: { visible: boolean; width: number }) => {
+    if (!panel.visible) return 0
+    const totalVisibleWidth = visiblePanels().reduce((sum, p) => sum + p.width, 0)
+    if (totalVisibleWidth === 0) return 0
+    // Proportional width based on visible panels only
+    return Math.floor((previewDimensions().width * panel.width) / totalVisibleWidth)
+  }
+
+  // Handle click-to-swap panel selection
+  const handlePanelClick = (type: PanelType) => {
+    const currentSelected = selectedPanel()
+
+    if (currentSelected === null) {
+      // First click - select this panel
+      setSelectedPanel(type)
+    } else if (currentSelected === type) {
+      // Clicked same panel - deselect
+      setSelectedPanel(null)
+    } else {
+      // Clicked different panel - swap them
+      const panel1 = layout.getPanelByType(currentSelected)
+      const panel2 = layout.getPanelByType(type)
+      if (panel1 && panel2) {
+        layout.swapPanels(panel1.position, panel2.position)
+      }
+      setSelectedPanel(null)
+    }
+  }
+
+  // Handle width adjustment with +/- buttons - transfers width between adjacent panels
+  const adjustWidth = (type: PanelType, direction: "minus" | "plus") => {
+    const panel = layout.getPanelByType(type)
+    if (!panel || !panel.visible) return
+
+    // Find adjacent visible panels
+    const sortedVisible = layout.panels.filter((p) => p.visible).sort((a, b) => a.position - b.position)
+    const panelIndex = sortedVisible.findIndex((p) => p.type === type)
+
+    if (panelIndex === -1) return
+
+    if (direction === "minus") {
+      // Decreasing: give space to the panel on the right (if exists), otherwise left
+      const recipientIndex = panelIndex < sortedVisible.length - 1 ? panelIndex + 1 : panelIndex - 1
+      if (recipientIndex < 0 || recipientIndex >= sortedVisible.length) return
+
+      const recipient = sortedVisible[recipientIndex]
+      const canDecrease = panel.width - 5 >= WIDTH_STEP
+      const canReceive = recipient.width + WIDTH_STEP <= 90
+
+      if (canDecrease && canReceive) {
+        layout.setPanelWidth(type, panel.width - WIDTH_STEP)
+        layout.setPanelWidth(recipient.type, recipient.width + WIDTH_STEP)
+      }
+    } else {
+      // Increasing: take space from the panel on the right (if exists), otherwise left
+      const donorIndex = panelIndex < sortedVisible.length - 1 ? panelIndex + 1 : panelIndex - 1
+      if (donorIndex < 0 || donorIndex >= sortedVisible.length) return
+
+      const donor = sortedVisible[donorIndex]
+      const canIncrease = panel.width + WIDTH_STEP <= 90
+      const canGive = donor.width - 5 >= WIDTH_STEP
+
+      if (canIncrease && canGive) {
+        layout.setPanelWidth(type, panel.width + WIDTH_STEP)
+        layout.setPanelWidth(donor.type, donor.width - WIDTH_STEP)
+      }
+    }
+  }
+
+  const totalPercent = createMemo(() => layout.panels.reduce((sum, p) => sum + (p.visible ? p.width : 0), 0))
+
+  const isLayoutValid = createMemo(() => totalPercent() === 100)
+
+  const handleReturn = () => {
+    // Only allow exit if layout totals exactly 100%
+    if (!isLayoutValid()) return
+
+    if (route.returnTo) {
+      navigate(route.returnTo)
+    } else {
+      navigate({ type: "home" })
+    }
+  }
+
+  const handleReset = () => {
+    layout.resetToDefault()
+    setSelectedPanel(null)
+  }
+
+  useKeyboard((e) => {
+    if (e.name === "escape") {
+      setSelectedPanel(null)
+      return
+    }
+  })
+
+  return (
+    <box
+      width={safeDimensions().width}
+      height={safeDimensions().height}
+      flexDirection="column"
+      backgroundColor={theme.background}
+    >
+      {/* Header */}
+      <box
+        flexShrink={0}
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        border={["bottom"]}
+        borderColor={theme.border}
+      >
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={theme.text} attributes={TextAttributes.BOLD}>
+            Layout Configuration
+          </text>
+          <Show when={selectedPanel()}>
+            <text fg={theme.warning}>(Selected: {PANEL_NAMES[selectedPanel()!]} - click another to swap)</text>
+          </Show>
+        </box>
+        <box flexDirection="row" gap={3}>
+          <text fg={theme.textMuted} onMouseUp={handleReset}>
+            [Reset]
+          </text>
+          <text
+            fg={isLayoutValid() ? theme.primary : theme.textMuted}
+            attributes={isLayoutValid() ? TextAttributes.BOLD : undefined}
+            onMouseUp={handleReturn}
+          >
+            {isLayoutValid() ? "[Done]" : "[Done] (needs 100%)"}
+          </text>
+        </box>
+      </box>
+
+      {/* Instructions */}
+      <box
+        flexShrink={0}
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+        backgroundColor={theme.backgroundPanel}
+      >
+        <text fg={theme.textMuted}>
+          Click panels to select and swap positions. Use +/- to adjust widths. Toggle visibility below.
+        </text>
+      </box>
+
+      {/* Layout Preview */}
+      <box
+        flexShrink={0}
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+        flexDirection="column"
+        gap={1}
+      >
+        <box
+          width={previewDimensions().width}
+          height={previewDimensions().height}
+          flexDirection="row"
+          border={["left", "right", "top", "bottom"]}
+          borderColor={theme.border}
+          padding={0}
+          gap={0}
+        >
+          <For each={visiblePanels()}>
+            {(panel) => {
+              const isSelected = createMemo(() => selectedPanel() === panel.type)
+              const canSwapHere = createMemo(() => {
+                const selected = selectedPanel()
+                if (!selected) return false
+                const selectedPanelObj = layout.getPanelByType(selected)
+                return selectedPanelObj && selectedPanelObj.position !== panel.position
+              })
+              const width = createMemo(() => getPanelPreviewWidth(panel))
+
+              return (
+                <box
+                  width={width()}
+                  height="100%"
+                  backgroundColor={getPanelColor(panel.type, isSelected() ? 0.7 : 1.0)}
+                  border={
+                    isSelected()
+                      ? ["left", "right", "top", "bottom"]
+                      : canSwapHere()
+                        ? ["left", "right", "top", "bottom"]
+                        : []
+                  }
+                  borderColor={isSelected() ? theme.warning : canSwapHere() ? theme.success : theme.border}
+                  flexDirection="column"
+                  justifyContent="center"
+                  alignItems="center"
+                  gap={1}
+                  onMouseUp={() => handlePanelClick(panel.type)}
+                >
+                  {/* Panel Header */}
+                  <box
+                    paddingLeft={1}
+                    paddingRight={1}
+                    paddingTop={0}
+                    paddingBottom={0}
+                    backgroundColor={theme.background}
+                  >
+                    <text fg={getPanelColor(panel.type, 1.0)} attributes={TextAttributes.BOLD}>
+                      {PANEL_NAMES[panel.type]}
+                    </text>
+                  </box>
+
+                  {/* Description */}
+                  <text fg={theme.text}>{PANEL_DESC[panel.type]}</text>
+
+                  {/* Selected indicator */}
+                  <Show when={isSelected()}>
+                    <box marginTop={1} paddingLeft={1} paddingRight={1} backgroundColor={theme.warning}>
+                      <text fg={theme.background} attributes={TextAttributes.BOLD}>
+                        Selected (click another to swap)
+                      </text>
+                    </box>
+                  </Show>
+
+                  {/* Swap hint */}
+                  <Show when={canSwapHere() && !isSelected()}>
+                    <box marginTop={1} paddingLeft={1} paddingRight={1} backgroundColor={theme.success}>
+                      <text fg={theme.background} attributes={TextAttributes.BOLD}>
+                        Click to swap
+                      </text>
+                    </box>
+                  </Show>
+
+                  {/* Hide button */}
+                  <box
+                    marginTop={2}
+                    paddingLeft={2}
+                    paddingRight={2}
+                    paddingTop={0}
+                    paddingBottom={0}
+                    backgroundColor={theme.backgroundElement}
+                    onMouseUp={(e) => {
+                      e.stopPropagation()
+                      layout.togglePanel(panel.type)
+                    }}
+                  >
+                    <text fg={theme.textMuted}>[Hide]</text>
+                  </box>
+                </box>
+              )
+            }}
+          </For>
+
+          {/* Show hidden panels as thin collapsed strips */}
+          <For each={layout.panels.filter((p) => !p.visible)}>
+            {(panel) => {
+              const isSelected = createMemo(() => selectedPanel() === panel.type)
+
+              return (
+                <box
+                  width={3}
+                  height="100%"
+                  backgroundColor={theme.backgroundElement}
+                  border={isSelected() ? ["left", "right", "top", "bottom"] : ["left"]}
+                  borderColor={isSelected() ? theme.warning : theme.border}
+                  flexDirection="column"
+                  justifyContent="center"
+                  alignItems="center"
+                  onMouseUp={() => {
+                    // Clicking hidden panel while another is selected just deselects
+                    if (selectedPanel()) {
+                      setSelectedPanel(null)
+                    }
+                  }}
+                >
+                  {/* Vertical text for hidden panel */}
+                  <text fg={theme.textMuted} attributes={TextAttributes.BOLD}>
+                    {PANEL_NAMES[panel.type][0]}
+                  </text>
+                  <Show when={isSelected()}>
+                    <box marginTop={1} backgroundColor={theme.warning}>
+                      <text fg={theme.background}>!</text>
+                    </box>
+                  </Show>
+                </box>
+              )
+            }}
+          </For>
+        </box>
+
+        {/* Legend with Visibility Toggles - One panel per line */}
+        <box flexDirection="column" gap={1} paddingTop={1} paddingLeft={1} paddingRight={1}>
+          <For each={layout.panels}>
+            {(panel) => (
+              <box flexDirection="row" gap={2} alignItems="center">
+                {/* Panel header */}
+                <box flexDirection="row" gap={1} alignItems="center" width={16}>
+                  <box width={3} height={1} backgroundColor={getPanelColor(panel.type, 1.0)} />
+                  <text fg={theme.text}>{PANEL_NAMES[panel.type]}</text>
+                </box>
+
+                {/* Visibility toggle */}
+                <box
+                  paddingLeft={1}
+                  paddingRight={1}
+                  backgroundColor={panel.visible ? theme.success : theme.backgroundElement}
+                  onMouseUp={() => layout.togglePanel(panel.type)}
+                >
+                  <text fg={panel.visible ? theme.background : theme.textMuted}>
+                    {panel.visible ? "[show]" : "[hide]"}
+                  </text>
+                </box>
+
+                {/* Width controls with +/- (only for visible panels) */}
+                <Show when={panel.visible}>
+                  <box flexDirection="row" gap={1} alignItems="center">
+                    <text
+                      fg={theme.primary}
+                      onMouseUp={(e) => {
+                        e.stopPropagation()
+                        adjustWidth(panel.type, "minus")
+                      }}
+                    >
+                      [-]
+                    </text>
+                    <text
+                      fg={theme.primary}
+                      onMouseUp={(e) => {
+                        e.stopPropagation()
+                        adjustWidth(panel.type, "plus")
+                      }}
+                    >
+                      [+]
+                    </text>
+                  </box>
+                </Show>
+              </box>
+            )}
+          </For>
+        </box>
+      </box>
+
+      {/* Footer */}
+      <box
+        flexShrink={0}
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+        border={["top"]}
+        borderColor={theme.border}
+        flexDirection="row"
+        justifyContent="space-between"
+      >
+        <text fg={theme.textMuted}>Click panels to swap. [Done] to apply. ESC to cancel.</text>
+        <text fg={theme.textMuted}>
+          Total: {Math.round(layout.panels.reduce((sum, p) => sum + (p.visible ? p.width : 0), 0))}%
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/cli/cmd/tui/thread.ts

@@ -0,0 +1,172 @@
+import { cmd } from "@/cli/cmd/cmd"
+import { tui } from "./app"
+import { Rpc } from "@/util/rpc"
+import { type rpc } from "./worker"
+import path from "path"
+import { UI } from "@/cli/ui"
+import { iife } from "@/util/iife"
+import { Log } from "@/util/log"
+import { withNetworkOptions, resolveNetworkOptions } from "@/cli/network"
+import type { Event } from "@jonsoc/sdk/v2"
+import type { EventSource } from "./context/sdk"
+
+declare global {
+  const OPENCODE_WORKER_PATH: string
+}
+
+type RpcClient = ReturnType<typeof Rpc.client<typeof rpc>>
+
+function createWorkerFetch(client: RpcClient): typeof fetch {
+  const fn = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const request = new Request(input, init)
+    const body = request.body ? await request.text() : undefined
+    const result = await client.call("fetch", {
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+      body,
+    })
+    return new Response(result.body, {
+      status: result.status,
+      headers: result.headers,
+    })
+  }
+  return fn as typeof fetch
+}
+
+function createEventSource(client: RpcClient): EventSource {
+  return {
+    on: (handler) => client.on<Event>("event", handler),
+  }
+}
+
+export const TuiThreadCommand = cmd({
+  command: "$0 [project]",
+  describe: "start jonsoc tui",
+  builder: (yargs) =>
+    withNetworkOptions(yargs)
+      .positional("project", {
+        type: "string",
+        describe: "path to start jonsoc in",
+      })
+      .option("model", {
+        type: "string",
+        alias: ["m"],
+        describe: "model to use in the format of provider/model",
+      })
+      .option("continue", {
+        alias: ["c"],
+        describe: "continue the last session",
+        type: "boolean",
+      })
+      .option("session", {
+        alias: ["s"],
+        type: "string",
+        describe: "session id to continue",
+      })
+      .option("prompt", {
+        type: "string",
+        describe: "prompt to use",
+      })
+      .option("agent", {
+        type: "string",
+        describe: "agent to use",
+      }),
+  handler: async (args) => {
+    // Resolve relative paths against PWD to preserve behavior when using --cwd flag
+    const baseCwd = process.env.PWD ?? process.cwd()
+
+    // If args.project is "tui", it means no project was specified (tui was treated as positional arg)
+    const projectArg = args.project === "tui" ? undefined : args.project
+
+    const cwd = projectArg ? path.resolve(baseCwd, projectArg) : process.cwd()
+    const localWorker = new URL("./worker.ts", import.meta.url)
+    const distWorker = new URL("./cli/cmd/tui/worker.js", import.meta.url)
+    const workerPath = await iife(async () => {
+      if (typeof OPENCODE_WORKER_PATH !== "undefined") return OPENCODE_WORKER_PATH
+      if (await Bun.file(distWorker).exists()) return distWorker
+      return localWorker
+    })
+    try {
+      process.chdir(cwd)
+    } catch (e) {
+      UI.error("Failed to change directory to " + cwd)
+      return
+    }
+
+    const worker = new Worker(workerPath, {
+      env: {
+        ...Object.fromEntries(
+          Object.entries(process.env).filter((entry): entry is [string, string] => entry[1] !== undefined),
+        ),
+        PRINT_LOGS: process.argv.includes("--print-logs") ? "1" : "0",
+      },
+    })
+    worker.onerror = (e) => {
+      Log.Default.error(e)
+    }
+    const client = Rpc.client<typeof rpc>(worker)
+    process.on("uncaughtException", (e) => {
+      Log.Default.error(e)
+    })
+    process.on("unhandledRejection", (e) => {
+      Log.Default.error(e)
+    })
+    process.on("SIGUSR2", async () => {
+      await client.call("reload", undefined)
+    })
+
+    const prompt = await iife(async () => {
+      const piped = !process.stdin.isTTY ? await Bun.stdin.text() : undefined
+      if (!args.prompt) return piped
+      return piped ? piped + "\n" + args.prompt : args.prompt
+    })
+
+    // Check if server should be started (port or hostname explicitly set in CLI or config)
+    const networkOpts = await resolveNetworkOptions(args)
+    const shouldStartServer =
+      process.argv.includes("--port") ||
+      process.argv.includes("--hostname") ||
+      process.argv.includes("--mdns") ||
+      networkOpts.mdns ||
+      networkOpts.port !== 0 ||
+      networkOpts.hostname !== "127.0.0.1"
+
+    let url: string
+    let customFetch: typeof fetch | undefined
+    let events: EventSource | undefined
+
+    if (shouldStartServer) {
+      // Start HTTP server for external access
+      const server = await client.call("server", networkOpts)
+      url = server.url
+    } else {
+      // Use direct RPC communication (no HTTP)
+      url = "http://jonsoc.internal"
+      customFetch = createWorkerFetch(client)
+      events = createEventSource(client)
+    }
+
+    const tuiPromise = tui({
+      url,
+      fetch: customFetch,
+      events,
+      args: {
+        continue: args.continue,
+        sessionID: args.session,
+        agent: args.agent,
+        model: args.model,
+        prompt,
+      },
+      onExit: async () => {
+        await client.call("shutdown", undefined)
+      },
+    })
+
+    setTimeout(() => {
+      client.call("checkUpgrade", { directory: cwd }).catch(() => {})
+    }, 1000)
+
+    await tuiPromise
+  },
+})