zesdex/src/interfaces/tui/ui.tsx

/**
 * OpenTUI React bindings for the Zesdex TUI.
 *
 * Renders `AppStateRest` as an OpenTUI layout and routes keyboard input
 * through the existing `handleKey` → `applyAction` pipeline. This replaces
 * the earlier raw-ANSI line renderer with a proper declarative OpenTUI tree.
 *
 * The logic layer (`state.ts`, `action.ts`, `command.ts`, `controller.ts`)
 * is untouched and remains unit-tested.
 */
import { useEffect, useState } from "react";
import { createCliRenderer } from "@opentui/core";
import {
  createRoot,
  useKeyboard,
  useTerminalDimensions as useTerminalDimensionsHook,
} from "@opentui/react";
import type { KeyEvent as OpenTuiKey, CliRenderer } from "@opentui/core";
import type { ReactNode } from "react";

import type { AppStateRest } from "./state.ts";
import { pushTranscript, makeChatMessage, appendToLastTranscript } from "./state.ts";
import { Roles } from "@zesdex/domain";
import { handleKey, KeyCode } from "./controller.ts";
import type { KeyEvent as ZelKeyEvent } from "./controller.ts";
import { applyAction } from "./action.ts";
import type { Action } from "./action.ts";

/** Minimal key-shape accepted by toControllerKey (avoids depending on OpenTUI internals). */
export interface MinimalKey {
  name?: string;
  ctrl?: boolean;
  meta?: boolean;
  option?: boolean;
  shift?: boolean;
  eventType?: string;
}

/** Map an OpenTUI KeyEvent to the controller's KeyEvent shape. */
export function toControllerKey(key: MinimalKey): ZelKeyEvent {
  const name = (key.name ?? "").toLowerCase();
  const ctrl = key.ctrl ?? false;
  const alt = key.meta ?? key.option ?? false;
  const shift = key.shift ?? false;

  switch (name) {
    case "return":
    case "enter":
      return { code: KeyCode.Enter, ctrl, alt };
    case "backspace":
      return { code: KeyCode.Backspace, ctrl, alt };
    case "delete":
    case "del":
      return { code: KeyCode.Delete, ctrl, alt };
    case "up":
      return { code: KeyCode.Up, ctrl, alt };
    case "down":
      return { code: KeyCode.Down, ctrl, alt };
    case "left":
      return { code: KeyCode.Left, ctrl, alt };
    case "right":
      return { code: KeyCode.Right, ctrl, alt };
    case "pageup":
    case "pgup":
      return { code: KeyCode.PageUp, ctrl, alt };
    case "pagedown":
    case "pgdn":
      return { code: KeyCode.PageDown, ctrl, alt };
    case "escape":
    case "esc":
      return { code: KeyCode.Esc, ctrl, alt };
    case "tab":
      return { code: KeyCode.Tab, ctrl, alt };
    case "space":
      return { code: KeyCode.Char, value: " ", ctrl, alt, shift };
    default:
      // Printable character (name is the char itself).
      return { code: KeyCode.Char, value: name, ctrl, alt, shift };
  }
}

/** Role label mapped to a colour for the transcript pane. */
const roleColor: Record<string, string> = {
  [Roles.User]: "cyan",
  [Roles.Assistant]: "green",
  [Roles.System]: "yellow",
  [Roles.Tool]: "magenta",
};

const oneLine = (s: string): string => s.replace(/\n/g, " ").replace(/\s+/g, " ").trim();

/**
 * Root OpenTUI component for the Zesdex TUI.
 * @param state       The mutable AppStateRest (mutated by applyAction).
 * @param onQuit      Called when the app should exit (Ctrl+C confirmed).
 */
export function ZesdexApp(props: { state: AppStateRest; onQuit: () => void }): ReactNode {
  const { state, onQuit } = props;
  const [, setTick] = useState(0);

  useKeyboard((key: OpenTuiKey) => {
    if (key.eventType === "release") return;
    const zk = toControllerKey(key);
    try {
      const actions: Action[] = handleKey(zk, state);
      for (const act of actions) {
        if (act.tag === "QuitConfirm") {
          state.quit = true;
          onQuit();
          continue;
        }
        applyAction(state, act);
      }
    } finally {
      // Force React to re-read the mutated `state` on the next frame.
      setTick((t: number) => t + 1);
    }
  });

  const dimensions = useTerminalDimensionsHook();

  // Turn driver: when a turn is submitted, run it against the real agent and
  // stream every event into the transcript as it happens.
  useEffect(() => {
    let turnRunning = false;
    const poll = async () => {
      if (turnRunning) return;
      const text = state.pendingSubmit;
      if (text == null) return;
      if (state.turnRunner == null) {
        appendToLastTranscript(
          state,
          "\n(no agent runtime — run via `zesdex` on the CLI / ensure settings)",
          false,
        );
        state.pendingSubmit = null;
        return;
      }
      turnRunning = true;
      const captured = state.pendingSubmit;
      state.pendingSubmit = null;
      state.turnInFlightFlag.value = true;
      const abort = new AbortController();
      state.turnAbort = abort;

      // Open an assistant message we stream into.
      pushTranscript(state, makeChatMessage(Roles.Assistant, ""));

      try {
        await state.turnRunner(captured ?? text, (ev) => {
          switch (ev.kind) {
            case "stream_token":
              appendToLastTranscript(state, ev.content, false);
              break;
            case "stream_reasoning":
              appendToLastTranscript(state, ev.content, true);
              break;
            case "system_note":
              pushTranscript(
                state,
                makeChatMessage(Roles.System, `[${ev.systemKind}] ${ev.message}`),
              );
              break;
            case "error":
              pushTranscript(state, makeChatMessage(Roles.System, `error: ${ev.message}`));
              break;
            case "tool_result":
              pushTranscript(
                state,
                makeChatMessage(Roles.Tool, `⇄ ${ev.tool_name} · ${ev.is_error ? "err" : "ok"}`),
              );
              break;
            default:
              break;
          }
        });
      } finally {
        state.turnInFlightFlag.value = false;
        state.turnAbort = null;
        state.abortFlag.value = false;
        // Re-prime the next poll so queued turns run.
        setTimeout(() => {
          turnRunning = false;
          setTick((x: number) => x + 1);
        }, 0);
      }
    };
    const timer = setInterval(() => poll(), 120);
    return () => clearInterval(timer);
  }, [state, setTick]);

  const model = String(state.settings.provider ?? "?");
  const header = ` zesdex  ·  ${model} `;
  const messages = state.transcriptCache.messages;
  const scrollFromEnd = messages.length - state.scroll.offset;
  const visible = messages.slice(Math.max(0, scrollFromEnd - 40), scrollFromEnd);

  return (
    <box flexDirection="column" width={dimensions.width} height={dimensions.height}>
      {/* Header */}
      <box width={dimensions.width} backgroundColor="blue">
        <text fg="white">{header}</text>
      </box>

      {/* Transcript pane */}
      <scrollbox flexGrow={1} width={dimensions.width} style={{ backgroundColor: "#0b0f14" }}>
        {visible.map((m, i) => (
          <text key={`${m.timestamp}-${i}`} fg={roleColor[m.role] ?? "white"}>
            {`${(m.role ?? "?").padEnd(9)}  `}
            {oneLine(m.content)}
          </text>
        ))}
        {/* Reasoning block for the last assistant message (dimmed). */}
        {messages.length > 0 &&
          (() => {
            const last = messages[messages.length - 1];
            if (last && last.role === Roles.Assistant && last.reasoning.length > 0) {
              return (
                <text fg="gray">
                  {`reasoning   ${oneLine(last.reasoning)}`}
                </text>
              );
            }
            return null;
          })()}
      </scrollbox>

      {/* Overlay or input area */}
      {state.misc.overlay !== "none" ? <OverlayView state={state} /> : <InputView state={state} />}

      {/* Status footer */}
      <text fg={state.turnInFlightFlag.value ? "green" : "gray"}>
        {state.turnInFlightFlag.value ? "● running" : "● idle"}
      </text>
    </box>
  );
}

function InputView(props: { state: AppStateRest }): ReactNode {
  const { state } = props;
  const shown = state.input.buffer.slice(
    Math.max(0, state.input.cursor - 40),
    state.input.cursor + 20,
  );
  const hint =
    state.input.autocompleteVisible &&
    state.input.autocompleteCandidates[state.input.autocompleteIdx] != null
      ? `  [tab: ${state.input.autocompleteCandidates[state.input.autocompleteIdx]}]`
      : "";
  const toast =
    state.misc.toasts.length > 0
      ? `  (${state.misc.toasts[state.misc.toasts.length - 1]?.message})`
      : "";
  return (
    <box flexDirection="column" width="100%">
      <text fg="cyan">{"> "}</text>
      <text>{shown}</text>
      <text fg="gray">{hint}{toast}</text>
    </box>
  );
}

function OverlayView(props: { state: AppStateRest }): ReactNode {
  const { state } = props;
  const name = state.misc.overlay;
  let body = "";
  if (name === "quit_confirm") body = "Quit? (y=yes, n=no)  Ctrl+C again / /quit to confirm";
  else if (name === "help") body = state.helpText;
  else if (name === "diff")
    body = state.misc.diffContent
      .split("\n")
      .slice(state.misc.diffScroll, state.misc.diffScroll + 20)
      .join("\n");
  else body = `Overlay: ${name}  (Esc to close)`;
  return (
    <box flexDirection="column" width="100%" style={{ border: true, padding: 1 }}>
      <text fg="yellow">{body.split("\n").map((l, i) => (<text key={i}>{l}</text>))}</text>
      <text fg="gray">{name === "quit_confirm" ? "y=yes  n=no  Esc=cancel" : "Esc to close"}</text>
    </box>
  );
}

/** Boot the OpenTUI renderer and mount the Zesdex app. */
export async function bootTui(state: AppStateRest): Promise<void> {
  pushTranscript(state, makeChatMessage(Roles.System, "Zesdex ready. Type a message or /help."));

  const renderer: CliRenderer = await createCliRenderer();
  const root = createRoot(renderer);

  root.render(<ZesdexApp state={state} onQuit={() => renderer.destroy()} />);

  return new Promise<void>((resolve) => {
    const check = setInterval(() => {
      if (state.quit) {
        clearInterval(check);
        try {
          root.unmount();
        } catch {
          /* already unmounted */
        }
        renderer.destroy();
        resolve();
      }
    }, 60);
  });
}