tmux-ide 1.3.1 → 2.1.0

package/src/tunnel.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "bun:test";
+import { tunnelConfigSchema } from "./lib/tunnels/types.ts";
+
+describe("tunnel CLI", () => {
+  describe("TunnelConfigSchema from types.ts", () => {
+    it("validates tailscale config", () => {
+      const result = tunnelConfigSchema.safeParse({
+        provider: "tailscale",
+        port: 4000,
+      });
+      expect(result.success).toBe(true);
+    });
+
+    it("validates ngrok config with all options", () => {
+      const result = tunnelConfigSchema.safeParse({
+        provider: "ngrok",
+        port: 4000,
+        authToken: "tok_123",
+        domain: "my.ngrok.io",
+        region: "us",
+      });
+      expect(result.success).toBe(true);
+    });
+
+    it("validates cloudflare config", () => {
+      const result = tunnelConfigSchema.safeParse({
+        provider: "cloudflare",
+        port: 4000,
+      });
+      expect(result.success).toBe(true);
+    });
+
+    it("rejects unknown provider", () => {
+      const result = tunnelConfigSchema.safeParse({
+        provider: "unknown",
+        port: 4000,
+      });
+      expect(result.success).toBe(false);
+    });
+
+    it("rejects missing port", () => {
+      const result = tunnelConfigSchema.safeParse({
+        provider: "ngrok",
+      });
+      expect(result.success).toBe(false);
+    });
+
+    it("rejects negative port", () => {
+      const result = tunnelConfigSchema.safeParse({
+        provider: "ngrok",
+        port: -1,
+      });
+      expect(result.success).toBe(false);
+    });
+  });
+
+  describe("TunnelConfigSchema in ide-config", () => {
+    it("accepts tunnel field in IdeConfig", async () => {
+      const { IdeConfigSchema } = await import("./schemas/ide-config.ts");
+      const result = IdeConfigSchema.safeParse({
+        rows: [{ panes: [{ title: "Shell" }] }],
+        tunnel: {
+          provider: "ngrok",
+          auto_start: true,
+          port: 4000,
+          authtoken: "tok_abc",
+        },
+      });
+      expect(result.success).toBe(true);
+    });
+
+    it("allows omitting tunnel", async () => {
+      const { IdeConfigSchema } = await import("./schemas/ide-config.ts");
+      const result = IdeConfigSchema.safeParse({
+        rows: [{ panes: [{ title: "Shell" }] }],
+      });
+      expect(result.success).toBe(true);
+    });
+  });
+});

package/src/tunnel.ts

@@ -0,0 +1,133 @@
+import { resolve } from "node:path";
+import { IdeError } from "./lib/errors.ts";
+import { TunnelManager } from "./lib/tunnels/manager.ts";
+import { tunnelConfigSchema } from "./lib/tunnels/types.ts";
+import type { TunnelConfig } from "./lib/tunnels/types.ts";
+
+// Singleton per CLI invocation
+let manager: TunnelManager | null = null;
+
+function getManager(dir: string, session?: string): TunnelManager {
+  if (!manager) {
+    manager = new TunnelManager({ session, dir });
+  }
+  return manager;
+}
+
+async function resolveSession(): Promise<string | undefined> {
+  try {
+    const { readConfig } = await import("./lib/yaml-io.ts");
+    const { config } = readConfig(process.cwd());
+    return config.name ?? undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+async function resolveTunnelConfig(
+  dir: string,
+  overrides?: Partial<TunnelConfig>,
+): Promise<TunnelConfig> {
+  try {
+    const { readConfig } = await import("./lib/yaml-io.ts");
+    const { config } = readConfig(dir);
+    if (config.tunnel) {
+      const merged = { ...config.tunnel, ...overrides };
+      return tunnelConfigSchema.parse(merged);
+    }
+  } catch {
+    // no config
+  }
+  if (overrides?.provider) {
+    return tunnelConfigSchema.parse(overrides);
+  }
+  throw new IdeError(
+    'No tunnel configuration found. Add a "tunnel" section to ide.yml or pass --provider.',
+    { code: "CONFIG_MISSING" },
+  );
+}
+
+interface TunnelOptions {
+  json?: boolean;
+  sub?: string;
+  args?: string[];
+  values?: Record<string, string | boolean | undefined>;
+}
+
+export async function tunnelCommand(
+  targetDir: string | null | undefined,
+  opts: TunnelOptions,
+): Promise<void> {
+  const dir = resolve(targetDir ?? ".");
+  const { json, sub } = opts;
+  const session = await resolveSession();
+  const mgr = getManager(dir, session);
+
+  switch (sub) {
+    case "start": {
+      const provider = (opts.values?.provider as string) ?? undefined;
+      const port = opts.values?.port ? parseInt(opts.values.port as string, 10) : undefined;
+      const domain = (opts.values?.domain as string) ?? undefined;
+      const authtoken = (opts.values?.authtoken as string) ?? undefined;
+
+      const config = await resolveTunnelConfig(dir, {
+        provider: provider as TunnelConfig["provider"],
+        port,
+        domain,
+        authToken: authtoken,
+      } as Partial<TunnelConfig>);
+
+      const status = await mgr.start(config);
+      if (json) {
+        console.log(JSON.stringify(status));
+      } else {
+        if (status.publicUrl) {
+          console.log(`Tunnel running: ${status.publicUrl}`);
+        } else {
+          console.log("Tunnel started (no public URL yet)");
+        }
+      }
+      break;
+    }
+
+    case "stop": {
+      await mgr.stop();
+      if (json) {
+        console.log(JSON.stringify({ ok: true }));
+      } else {
+        console.log("Tunnel stopped");
+      }
+      break;
+    }
+
+    case "status": {
+      const status = await mgr.status();
+      if (json) {
+        console.log(JSON.stringify(status));
+      } else {
+        if (status.running) {
+          console.log(`Tunnel: ${status.provider} — ${status.publicUrl ?? "starting..."}`);
+        } else {
+          console.log("Tunnel: not running");
+        }
+      }
+      break;
+    }
+
+    case "url": {
+      const url = await mgr.url();
+      if (json) {
+        console.log(JSON.stringify({ url }));
+      } else {
+        console.log(url ?? "No tunnel running");
+      }
+      break;
+    }
+
+    default:
+      throw new IdeError(
+        `Unknown tunnel subcommand: ${sub ?? "(none)"}\nUsage: tmux-ide tunnel start|stop|status|url`,
+        { code: "USAGE" },
+      );
+  }
+}

package/src/types.ts

@@ -0,0 +1,15 @@
+export type {
+  Pane,
+  Row,
+  ThemeConfig,
+  OrchestratorYamlConfig,
+  CommandCenterConfig,
+  DashboardConfig,
+  IdeConfig,
+  PaneAction,
+  SessionState,
+} from "./schemas/ide-config.ts";
+
+export type { ProofSchema } from "./schemas/index.ts";
+
+export type TmuxCommand = string[];

package/src/ui/index.ts

@@ -0,0 +1,32 @@
+// Environment-detecting UI entry point.
+//
+// Detects whether code is running in a browser (window exists) or terminal
+// (Node/Bun) and re-exports the appropriate backend. Widgets import from
+// this module to work in both environments without code changes.
+//
+// Usage:
+//   import { render, useKeyboard, RGBA, TextAttributes } from "../../ui/index.ts";
+//
+// Terminal backend: re-exports @opentui/solid + @opentui/core
+// Web backend: re-exports DOM-based mirror components
+
+// Use a compile-time constant so bundlers can tree-shake the unused backend.
+// In browser builds, `typeof window !== "undefined"` is true and the terminal
+// branch is eliminated. In Node/Bun, the web branch is eliminated.
+const IS_BROWSER = typeof window !== "undefined";
+
+if (IS_BROWSER) {
+  // Re-export web backend at module level for static analysis
+}
+
+// We use conditional re-export via a barrel pattern.
+// Bundlers (Bun, webpack, turbopack) resolve this statically.
+// For runtime detection, we export from web by default (browser-first)
+// and terminal widgets import from ./terminal/index.ts directly.
+//
+// The web backend is safe to import in Node because it only touches
+// the DOM inside render() and hooks (which are never called in terminal mode).
+export * from "./web/index.ts";
+
+// Also re-export shared types so they're available regardless of backend
+export type { BoxProps, TextProps, ScrollBoxProps, InputProps } from "./types.ts";

package/src/ui/terminal/index.ts

@@ -0,0 +1,9 @@
+// Terminal backend — re-exports @opentui/solid and @opentui/core for terminal rendering.
+// Widgets importing from src/ui/ will get these exports when running in Node/Bun.
+
+// Render and hooks
+export { render, useKeyboard, useTerminalDimensions } from "@opentui/solid";
+
+// Core primitives and types
+export { RGBA, TextAttributes } from "@opentui/core";
+export type { ScrollBoxRenderable, InputRenderable } from "@opentui/core";

package/src/ui/types.ts

@@ -0,0 +1,91 @@
+export interface RGBA {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+export function rgbaFromInts(r: number, g: number, b: number, a?: number): RGBA {
+  return { r, g, b, a: a ?? 255 };
+}
+
+export const TextAttributes = {
+  NONE: 0,
+  BOLD: 1,
+  DIM: 2,
+  ITALIC: 4,
+  UNDERLINE: 8,
+  BLINK: 16,
+  INVERSE: 32,
+  HIDDEN: 64,
+  STRIKETHROUGH: 128,
+} as const;
+
+export interface BoxProps {
+  id?: string;
+  flexDirection?: "row" | "column";
+  flexGrow?: number;
+  flexShrink?: number;
+  gap?: number;
+  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between";
+  alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+  position?: "relative" | "absolute";
+  overflow?: "visible" | "hidden";
+  width?: number | string;
+  height?: number | string;
+  maxWidth?: number | string;
+  maxHeight?: number | string;
+  padding?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  backgroundColor?: RGBA;
+  border?: string[];
+  borderColor?: RGBA;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+  // Mouse events
+  onMouseDown?: (e: unknown) => void;
+  onMouseUp?: (e: unknown) => void;
+  onMouseMove?: (e: unknown) => void;
+  onMouseOver?: (e: unknown) => void;
+  // Children
+  children?: unknown;
+  ref?: (el: unknown) => void;
+}
+
+export interface TextProps {
+  fg?: RGBA;
+  bg?: RGBA;
+  attributes?: number;
+  wrapMode?: "none" | "word" | "char";
+  width?: number | string;
+  height?: number | string;
+  flexGrow?: number;
+  flexShrink?: number;
+  // Mouse events
+  onMouseUp?: (e: unknown) => void;
+  onMouseDown?: (e: unknown) => void;
+  children?: unknown;
+}
+
+export interface ScrollBoxProps extends BoxProps {
+  verticalScrollbarOptions?: unknown;
+  stickyScroll?: boolean;
+  stickyStart?: "bottom" | "top";
+}
+
+export interface InputProps {
+  value?: string;
+  placeholder?: string;
+  onInput?: (value: string) => void;
+  focusedBackgroundColor?: RGBA;
+  cursorColor?: RGBA;
+  focusedTextColor?: RGBA;
+  onMouseDown?: (e: unknown) => void;
+  ref?: (el: unknown) => void;
+  children?: unknown;
+}

package/src/ui/web/base.css

@@ -0,0 +1,80 @@
+/* Base styles for the web terminal backend.
+ * Import this in your HTML or bundler entry point to get terminal-like appearance.
+ * These styles are also injected automatically by render() at runtime.
+ */
+
+:root {
+  --ui-line-height: 1.4em;
+  --ui-font-family:
+    "IBM Plex Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+  --ui-font-size: 13px;
+  --ui-bg: rgb(19, 16, 16);
+  --ui-fg: rgb(232, 228, 228);
+  --ui-scrollbar-track: rgb(25, 25, 35);
+  --ui-scrollbar-thumb: rgb(60, 60, 80);
+  --ui-scrollbar-thumb-hover: rgb(80, 80, 100);
+}
+
+body,
+#root {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  line-height: var(--ui-line-height);
+  background: var(--ui-bg);
+  color: var(--ui-fg);
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Flex-column by default — matches terminal box model */
+div {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+span {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+  color: inherit;
+  border: none;
+  outline: none;
+}
+
+input::placeholder {
+  color: rgba(232, 228, 228, 0.4);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--ui-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ui-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ui-scrollbar-thumb-hover);
+}

package/src/ui/web/components/Box.tsx

@@ -0,0 +1,59 @@
+import type { JSX, ParentProps } from "solid-js";
+import { rgbaToCSS } from "../utils/color.ts";
+import type { BoxProps } from "../../types.ts";
+
+export function Box(props: ParentProps<BoxProps>) {
+  const style = (): JSX.CSSProperties => ({
+    display: "flex",
+    "flex-direction": props.flexDirection ?? "column",
+    "flex-grow": props.flexGrow,
+    "flex-shrink": props.flexShrink,
+    gap: props.gap !== undefined ? `${props.gap}ch` : undefined,
+    "justify-content": props.justifyContent,
+    "align-items": props.alignItems,
+    position: props.position ?? "relative",
+    overflow: props.overflow,
+    width: typeof props.width === "number" ? `${props.width}ch` : props.width,
+    height:
+      typeof props.height === "number"
+        ? `calc(${props.height} * var(--line-height))`
+        : props.height,
+    "max-width": typeof props.maxWidth === "number" ? `${props.maxWidth}ch` : props.maxWidth,
+    "max-height":
+      typeof props.maxHeight === "number"
+        ? `calc(${props.maxHeight} * var(--line-height))`
+        : props.maxHeight,
+    padding:
+      props.padding !== undefined
+        ? `calc(${props.padding} * var(--line-height)) ${props.padding}ch`
+        : undefined,
+    "padding-left": props.paddingLeft !== undefined ? `${props.paddingLeft}ch` : undefined,
+    "padding-right": props.paddingRight !== undefined ? `${props.paddingRight}ch` : undefined,
+    "padding-top":
+      props.paddingTop !== undefined ? `calc(${props.paddingTop} * var(--line-height))` : undefined,
+    "padding-bottom":
+      props.paddingBottom !== undefined
+        ? `calc(${props.paddingBottom} * var(--line-height))`
+        : undefined,
+    background: props.backgroundColor ? rgbaToCSS(props.backgroundColor) : undefined,
+    "border-color": props.borderColor ? rgbaToCSS(props.borderColor) : undefined,
+    top: props.top !== undefined ? `calc(${props.top} * var(--line-height))` : undefined,
+    left: props.left !== undefined ? `${props.left}ch` : undefined,
+    right: props.right !== undefined ? `${props.right}ch` : undefined,
+    bottom: props.bottom !== undefined ? `calc(${props.bottom} * var(--line-height))` : undefined,
+  });
+
+  return (
+    <div
+      id={props.id}
+      style={style()}
+      onMouseDown={props.onMouseDown}
+      onMouseUp={props.onMouseUp}
+      onMouseMove={props.onMouseMove}
+      onMouseOver={props.onMouseOver}
+      ref={props.ref}
+    >
+      {props.children}
+    </div>
+  );
+}

package/src/ui/web/components/Input.tsx

@@ -0,0 +1,32 @@
+import type { JSX } from "solid-js";
+import { rgbaToCSS } from "../utils/color.ts";
+import type { InputProps } from "../../types.ts";
+
+export function Input(props: InputProps) {
+  const style = (): JSX.CSSProperties => ({
+    "font-family": "inherit",
+    "font-size": "inherit",
+    "line-height": "inherit",
+    background: props.focusedBackgroundColor
+      ? rgbaToCSS(props.focusedBackgroundColor)
+      : "rgb(25,25,35)",
+    color: props.focusedTextColor ? rgbaToCSS(props.focusedTextColor) : "inherit",
+    border: "none",
+    outline: "none",
+    padding: "0 1ch",
+    width: "100%",
+    "caret-color": props.cursorColor ? rgbaToCSS(props.cursorColor) : "inherit",
+  });
+
+  return (
+    <input
+      type="text"
+      value={props.value ?? ""}
+      placeholder={props.placeholder}
+      style={style()}
+      onInput={(e) => props.onInput?.(e.currentTarget.value)}
+      onMouseDown={props.onMouseDown}
+      ref={props.ref}
+    />
+  );
+}

package/src/ui/web/components/ScrollBox.tsx

@@ -0,0 +1,60 @@
+import type { ParentProps, JSX } from "solid-js";
+import { rgbaToCSS } from "../utils/color.ts";
+import type { ScrollBoxProps } from "../../types.ts";
+
+export function ScrollBox(props: ParentProps<ScrollBoxProps>) {
+  const style = (): JSX.CSSProperties => ({
+    display: "flex",
+    "flex-direction": props.flexDirection ?? "column",
+    "flex-grow": props.flexGrow,
+    "flex-shrink": props.flexShrink,
+    gap: props.gap !== undefined ? `${props.gap}ch` : undefined,
+    "justify-content": props.justifyContent,
+    "align-items": props.alignItems,
+    position: props.position ?? "relative",
+    overflow: "hidden",
+    "overflow-y": "auto",
+    width: typeof props.width === "number" ? `${props.width}ch` : props.width,
+    height:
+      typeof props.height === "number"
+        ? `calc(${props.height} * var(--line-height))`
+        : props.height,
+    "max-width": typeof props.maxWidth === "number" ? `${props.maxWidth}ch` : props.maxWidth,
+    "max-height":
+      typeof props.maxHeight === "number"
+        ? `calc(${props.maxHeight} * var(--line-height))`
+        : props.maxHeight,
+    padding:
+      props.padding !== undefined
+        ? `calc(${props.padding} * var(--line-height)) ${props.padding}ch`
+        : undefined,
+    "padding-left": props.paddingLeft !== undefined ? `${props.paddingLeft}ch` : undefined,
+    "padding-right": props.paddingRight !== undefined ? `${props.paddingRight}ch` : undefined,
+    "padding-top":
+      props.paddingTop !== undefined ? `calc(${props.paddingTop} * var(--line-height))` : undefined,
+    "padding-bottom":
+      props.paddingBottom !== undefined
+        ? `calc(${props.paddingBottom} * var(--line-height))`
+        : undefined,
+    background: props.backgroundColor ? rgbaToCSS(props.backgroundColor) : undefined,
+    "border-color": props.borderColor ? rgbaToCSS(props.borderColor) : undefined,
+    top: props.top !== undefined ? `calc(${props.top} * var(--line-height))` : undefined,
+    left: props.left !== undefined ? `${props.left}ch` : undefined,
+    right: props.right !== undefined ? `${props.right}ch` : undefined,
+    bottom: props.bottom !== undefined ? `calc(${props.bottom} * var(--line-height))` : undefined,
+  });
+
+  return (
+    <div
+      id={props.id}
+      style={style()}
+      onMouseDown={props.onMouseDown}
+      onMouseUp={props.onMouseUp}
+      onMouseMove={props.onMouseMove}
+      onMouseOver={props.onMouseOver}
+      ref={props.ref}
+    >
+      {props.children}
+    </div>
+  );
+}

package/src/ui/web/components/Text.tsx

@@ -0,0 +1,28 @@
+import type { ParentProps, JSX } from "solid-js";
+import { rgbaToCSS, attributesToStyle } from "../utils/color.ts";
+import type { TextProps } from "../../types.ts";
+
+export function Text(props: ParentProps<TextProps>) {
+  const style = (): JSX.CSSProperties => ({
+    color: props.fg ? rgbaToCSS(props.fg) : undefined,
+    background: props.bg ? rgbaToCSS(props.bg) : undefined,
+    "white-space":
+      props.wrapMode === "none" ? "nowrap" : props.wrapMode === "word" ? "pre-wrap" : undefined,
+    overflow: props.wrapMode === "none" ? "hidden" : undefined,
+    "word-break": props.wrapMode === "word" ? "break-word" : undefined,
+    width: typeof props.width === "number" ? `${props.width}ch` : props.width,
+    height:
+      typeof props.height === "number"
+        ? `calc(${props.height} * var(--line-height))`
+        : props.height,
+    "flex-grow": props.flexGrow,
+    "flex-shrink": props.flexShrink,
+    ...attributesToStyle(props.attributes ?? 0),
+  });
+
+  return (
+    <span style={style()} onMouseUp={props.onMouseUp} onMouseDown={props.onMouseDown}>
+      {props.children}
+    </span>
+  );
+}