Transformer Math

class Bridge {
  // Connects IDE extension to CLI engine via WebSocket
  private ws: WebSocket;
  private engine: QueryEngine | null = null;

  constructor(wsUrl: string) {
    this.ws = new WebSocket(wsUrl);
  }

  onConnect(): void {
    createSession();
    this.engine = new QueryEngine({
      permissionCallback: (tool, input) => this.idePermissionDialog(tool, input),
    });
  }

  onMessage(userMsg: string): void {
    for (const event of this.engine!.submit(userMsg)) {
      this.ws.send(JSON.stringify(event));
    }
  }

  async idePermissionDialog(tool: string, input: unknown): Promise<boolean> {
    this.ws.send(JSON.stringify({ type: "permission_request", tool, input }));
    // ws.receive() is pseudocode — real impl wraps ws.onmessage in a Promise
    const response = await this.ws.receive();
    return response.allowed;
  }
}

type InkNodeType = "Box" | "Text" | "Spinner" | "Static";

// Adapts Ink terminal components to browser HTML equivalents
const componentMap: Record<InkNodeType, (props: InkProps) => string> = {
  Box:     (props) => `<div style="display:flex; ${flexboxCss(props)}">`,
  Text:    (props) => `<span style="${textCss(props)}">`,
  Spinner: (_props) => '<span class="css-spinner">',
  Static:  (_props) => '<div class="static-output">',
};

function* renderInkTree(inkTree: InkNode): Generator<string> {
  // Walk Ink component tree, emit HTML
  for (const node of walk(inkTree)) {
    const adapter = componentMap[node.type as InkNodeType];
    yield adapter(node.props);
    yield* renderInkTree(node.children);
    yield closingTag(node.type);
  }
}

function flexboxCss(props: InkProps): string {
  const direction = props.flexDirection ?? "column";
  const justify = props.justifyContent ?? "flex-start";
  const padding = props.padding ?? 0;
  return `flex-direction:${direction}; justify-content:${justify}; padding:${padding}ch;`;
}

type SessionMode = "terminal" | "ide" | "web" | "viewer";
type PermissionCallback = (tool: string, input: unknown) => Promise<boolean>;

// Factory: same engine, different permission UIs
function createSession(mode: SessionMode): QueryEngine {
  let callback: PermissionCallback;

  if (mode === "terminal") {
    callback = terminalPermission;      // stdin prompt
  } else if (mode === "ide") {
    callback = idePermission;           // WebSocket dialog
  } else if (mode === "web") {
    callback = webPermission;           // Zustand modal
  } else {
    callback = async () => false;       // viewer — read-only
  }

  return new QueryEngine({ permissionCallback: callback });
}

async function terminalPermission(tool: string, _input: unknown): Promise<boolean> {
  const answer = await readLine(`Allow ${tool}? [y/n] `);
  return answer.toLowerCase() === "y";
}

async function idePermission(tool: string, input: unknown): Promise<boolean> {
  ws.send(JSON.stringify({ type: "permission_request", tool, input }));
  // ws.receive() is pseudocode — real impl: wrap ws.onmessage in a Promise
  const response = await ws.receive();
  return response.allowed;
}

async function webPermission(tool: string, _input: unknown): Promise<boolean> {
  // store.dispatch/waitFor is pseudocode — real Zustand impl uses
  // setState + a subscribe-based Promise wrapper (Zustand has no built-in waitFor)
  store.dispatch({ type: "SHOW_PERMISSION_MODAL", tool });
  return store.waitFor("PERMISSION_RESPONSE").then((r) => r.allowed);
}