tmux-ide 2.6.0 → 2.6.1

package/packages/daemon/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/packages/daemon/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/packages/daemon/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>
+  );
+}

package/packages/daemon/src/ui/web/hooks.ts

@@ -0,0 +1,106 @@
+import { createSignal, onMount, onCleanup } from "solid-js";
+
+/** Synthetic key event passed to handlers (mirrors OpenTUI naming). */
+export interface UiKeyEvent {
+  name: string;
+  ctrl: boolean;
+  shift: boolean;
+  alt: boolean;
+  meta: boolean;
+  preventDefault: () => void;
+  stopPropagation: () => void;
+}
+
+export function useKeyboard(handler: (evt: UiKeyEvent) => void): void {
+  onMount(() => {
+    const listener = (e: KeyboardEvent) => {
+      const evt = {
+        name: mapKeyName(e),
+        ctrl: e.ctrlKey,
+        shift: e.shiftKey,
+        alt: e.altKey,
+        meta: e.metaKey,
+        preventDefault: () => e.preventDefault(),
+        stopPropagation: () => e.stopPropagation(),
+      };
+      handler(evt);
+    };
+    document.addEventListener("keydown", listener);
+    onCleanup(() => document.removeEventListener("keydown", listener));
+  });
+}
+
+function mapKeyName(e: KeyboardEvent): string {
+  switch (e.key) {
+    case "ArrowUp":
+      return "up";
+    case "ArrowDown":
+      return "down";
+    case "ArrowLeft":
+      return "left";
+    case "ArrowRight":
+      return "right";
+    case "Enter":
+      return "return";
+    case "Escape":
+      return "escape";
+    case "Backspace":
+      return "backspace";
+    case "Tab":
+      return "tab";
+    case "Delete":
+      return "delete";
+    case " ":
+      return "space";
+    case "Home":
+      return "home";
+    case "End":
+      return "end";
+    case "PageUp":
+      return "pageup";
+    case "PageDown":
+      return "pagedown";
+    case "Insert":
+      return "insert";
+    default:
+      // @opentui convention: single-char keys are always lowercase, with shift as a modifier.
+      // Browser gives uppercase e.key for Shift+letter (e.g. "G"), so normalize to lowercase.
+      if (e.key.length === 1) return e.key.toLowerCase();
+      return e.key;
+  }
+}
+
+export function useTerminalDimensions() {
+  const [dims, setDims] = createSignal({ width: 80, height: 24 });
+
+  onMount(() => {
+    const update = () => {
+      // Measure a ch unit by using a temporary element
+      const measure = document.createElement("span");
+      measure.style.position = "absolute";
+      measure.style.visibility = "hidden";
+      measure.style.fontFamily = "var(--font-family, 'IBM Plex Mono', ui-monospace, monospace)";
+      measure.style.fontSize = "var(--font-size, 13px)";
+      measure.textContent = "0";
+      document.body.appendChild(measure);
+      const chWidth = measure.getBoundingClientRect().width;
+      document.body.removeChild(measure);
+
+      const lh = parseFloat(getComputedStyle(document.documentElement).lineHeight);
+
+      const effectiveCh = chWidth > 0 ? chWidth : 7.8; // fallback
+      const effectiveLh = lh > 0 ? lh : 18.2; // fallback
+
+      setDims({
+        width: Math.floor(window.innerWidth / effectiveCh),
+        height: Math.floor(window.innerHeight / effectiveLh),
+      });
+    };
+
+    update();
+    window.addEventListener("resize", update);
+    onCleanup(() => window.removeEventListener("resize", update));
+  });
+
+  return dims;
+}

package/packages/daemon/src/ui/web/index.ts

@@ -0,0 +1,27 @@
+// Web mirror components — lowercase exports match @opentui JSX element names
+export { Box as box } from "./components/Box.tsx";
+export { Text as text } from "./components/Text.tsx";
+export { ScrollBox as scrollbox } from "./components/ScrollBox.tsx";
+export { Input as input } from "./components/Input.tsx";
+
+// Render and hooks
+export { render } from "./render.ts";
+export { useKeyboard, useTerminalDimensions } from "./hooks.ts";
+
+// Re-export Solid.js primitives
+export {
+  Show,
+  For,
+  Switch,
+  Match,
+  createSignal,
+  createMemo,
+  createEffect,
+  onMount,
+  onCleanup,
+  batch,
+} from "solid-js";
+
+// Re-export shared types
+export { RGBA, TextAttributes } from "../types.ts";
+export type { BoxProps, TextProps, ScrollBoxProps, InputProps } from "../types.ts";

package/packages/daemon/src/ui/web/render.ts

@@ -0,0 +1,77 @@
+import type { JSX } from "solid-js";
+import { render as solidRender } from "solid-js/web";
+
+const BASE_CSS = `
+:root {
+  --line-height: 1.4em;
+  --font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  --font-size: 13px;
+}
+
+body, #root {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  background: rgb(19, 16, 16);
+  color: rgb(232, 228, 228);
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+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;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(25, 25, 35);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgb(60, 60, 80);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(80, 80, 100);
+}
+`;
+
+let stylesInjected = false;
+
+function injectBaseStyles(): void {
+  if (stylesInjected) return;
+  const style = document.createElement("style");
+  style.textContent = BASE_CSS;
+  document.head.appendChild(style);
+  stylesInjected = true;
+}
+
+export function render(component: () => JSX.Element, _options?: unknown): void {
+  injectBaseStyles();
+  const root = document.getElementById("root") ?? document.body;
+  solidRender(component, root);
+}

package/packages/daemon/src/ui/web/utils/color.ts

@@ -0,0 +1,27 @@
+import type { RGBA } from "../../types.ts";
+
+export function rgbaToCSS(color: RGBA): string {
+  if (color.a === 0) return "transparent";
+  if (color.a === 255 || color.a === undefined) {
+    return `rgb(${color.r},${color.g},${color.b})`;
+  }
+  return `rgba(${color.r},${color.g},${color.b},${(color.a / 255).toFixed(2)})`;
+}
+
+export function attributesToStyle(attrs: number): Record<string, string> {
+  const style: Record<string, string> = {};
+  if (attrs & 1) style["font-weight"] = "bold"; // BOLD
+  if (attrs & 2) style.opacity = "0.6"; // DIM
+  if (attrs & 4) style["font-style"] = "italic"; // ITALIC
+
+  // Compose text-decoration: underline and line-through can coexist
+  const decorations: string[] = [];
+  if (attrs & 8) decorations.push("underline"); // UNDERLINE
+  if (attrs & 128) decorations.push("line-through"); // STRIKETHROUGH
+  if (decorations.length > 0) style["text-decoration"] = decorations.join(" ");
+
+  if (attrs & 16) style.animation = "blink 1s step-end infinite"; // BLINK
+  if (attrs & 32) style.filter = "invert(1)"; // INVERSE
+  if (attrs & 64) style.visibility = "hidden"; // HIDDEN
+  return style;
+}

package/packages/daemon/src/validate.ts

@@ -0,0 +1,217 @@
+import { resolve } from "node:path";
+import { readConfig } from "./lib/yaml-io.ts";
+import { outputError } from "./lib/output.ts";
+import { IdeConfigSchema } from "./schemas/ide-config.ts";
+
+/** Minimal shape of Zod parse issues (v3/v4 compatible for our mappers). */
+interface ZodLikeIssue {
+  path?: (string | number)[];
+  code?: string;
+  message?: string;
+  expected?: string;
+  received?: string;
+}
+
+export function validateConfig(config: unknown): string[] {
+  if (config == null || typeof config !== "object" || Array.isArray(config)) {
+    return ["config must be an object"];
+  }
+
+  const result = IdeConfigSchema.safeParse(config);
+
+  if (!result.success) {
+    return result.error.issues.map((issue) => mapZodIssue(issue as ZodLikeIssue, config));
+  }
+
+  // Phase 2: semantic checks (only when schema parse succeeds)
+  const errors: string[] = [];
+  const cfg = result.data;
+
+  // 1. Row sizes sum ≤ 100%
+  const rowSizes = cfg.rows.filter((r) => r.size !== undefined).map((r) => parseInt(r.size!, 10));
+  const rowSum = rowSizes.reduce((a, b) => a + b, 0);
+  if (rowSum > 100) {
+    errors.push(`Row sizes sum to ${rowSum}%, which exceeds 100%`);
+  }
+
+  for (let i = 0; i < cfg.rows.length; i++) {
+    const row = cfg.rows[i]!;
+
+    // 2. Per-row pane sizes sum ≤ 100%
+    const paneSizes = row.panes
+      .filter((p) => p.size !== undefined)
+      .map((p) => parseInt(p.size!, 10));
+    const paneSum = paneSizes.reduce((a, b) => a + b, 0);
+    if (paneSum > 100) {
+      errors.push(`Row ${i} pane sizes sum to ${paneSum}%, which exceeds 100%`);
+    }
+
+    // 3. Max 1 focus:true per row
+    const focusCount = row.panes.filter((p) => p.focus === true).length;
+    if (focusCount > 1) {
+      errors.push(`Row ${i} has ${focusCount} panes with focus: true (max 1)`);
+    }
+
+    // 4. type and command cannot coexist
+    for (let j = 0; j < row.panes.length; j++) {
+      const pane = row.panes[j]!;
+      if (pane.type !== undefined && pane.command !== undefined) {
+        errors.push(`rows[${i}].panes[${j}] cannot have both 'type' and 'command'`);
+      }
+    }
+  }
+
+  return errors;
+}
+
+// ---------------------------------------------------------------------------
+// Zod issue → legacy error string mapping
+// ---------------------------------------------------------------------------
+
+function formatPath(path: (string | number)[]): string {
+  let result = "";
+  for (let i = 0; i < path.length; i++) {
+    const seg = path[i]!;
+    if (typeof seg === "number") {
+      result += `[${seg}]`;
+    } else if (i === 0) {
+      result += seg;
+    } else {
+      result += `.${seg}`;
+    }
+  }
+  return result;
+}
+
+function shouldQuote(path: (string | number)[]): boolean {
+  if (path.length === 1 && typeof path[0] === "string") return true;
+  if (path[0] === "team") return true;
+  return false;
+}
+
+function isSizePath(path: (string | number)[]): boolean {
+  return path[path.length - 1] === "size";
+}
+
+function isEnvValuePath(path: (string | number)[]): boolean {
+  const envIdx = path.indexOf("env");
+  return envIdx >= 0 && envIdx < path.length - 1;
+}
+
+function getValueAtPath(obj: unknown, path: (string | number)[]): unknown {
+  let current: unknown = obj;
+  for (const seg of path) {
+    if (current == null || typeof current !== "object") return undefined;
+    current = (current as Record<string, unknown>)[String(seg)];
+  }
+  return current;
+}
+
+const MS_FIELDS = new Set(["stall_timeout", "poll_interval"]);
+
+function typeDesc(path: (string | number)[], expected: string): string {
+  const base = expected.replace(/\s*\|\s*undefined/g, "").trim();
+  let desc: string;
+  if (base === "string") desc = "a string";
+  else if (base === "boolean") desc = "a boolean";
+  else if (base === "number") desc = "a number";
+  else if (base === "array") desc = "an array";
+  else if (base === "object" || base === "record") desc = "an object";
+  else desc = base;
+
+  const field = path[path.length - 1];
+  if (path[0] === "orchestrator" && typeof field === "string" && MS_FIELDS.has(field)) {
+    return `${desc} (ms)`;
+  }
+  return desc;
+}
+
+function mapZodIssue(issue: ZodLikeIssue, config: unknown): string {
+  const path: (string | number)[] = issue.path ?? [];
+  const code: string = issue.code ?? "";
+  const rawPath = formatPath(path);
+  const display = shouldQuote(path) ? `'${rawPath}'` : rawPath;
+  const lastSeg = path[path.length - 1];
+
+  // Env value: rows[i].panes[j].env.KEY
+  if (isEnvValuePath(path)) {
+    return `${formatPath(path)} must be a string or number`;
+  }
+
+  // Size field: regex or refine failure (but not a type error like size: 42)
+  if (isSizePath(path) && code !== "invalid_type") {
+    if (code === "custom") {
+      return `${rawPath} must not exceed 100%`;
+    }
+    const val = getValueAtPath(config, path);
+    return `${rawPath} "${val}" must be a percentage (e.g. "50%")`;
+  }
+
+  // Empty array (too_small from .min(1))
+  if (code === "too_small") {
+    return `${display} must not be empty`;
+  }
+
+  // Enum: pane type
+  if (code === "invalid_value" && lastSeg === "type" && path.includes("panes")) {
+    return `${rawPath} must be one of: explorer, changes, preview, tasks, costs, config, mission-control`;
+  }
+
+  // Enum: pane role
+  if (code === "invalid_value" && lastSeg === "role") {
+    return `${rawPath} must be "lead", "teammate", or "planner"`;
+  }
+
+  // Enum: dispatch_mode
+  if (code === "invalid_value" && lastSeg === "dispatch_mode") {
+    return `${rawPath} must be "tasks" or "goals"`;
+  }
+
+  // Team.name missing vs wrong type
+  if (path.length === 2 && path[0] === "team" && path[1] === "name") {
+    if (issue.received === "undefined") {
+      return "'team.name' is required when team is specified";
+    }
+  }
+
+  // Type mismatch
+  if (code === "invalid_type") {
+    return `${display} must be ${typeDesc(path, issue.expected ?? "")}`;
+  }
+
+  // Fallback
+  return `${display}: ${issue.message ?? "invalid value"}`;
+}
+
+export async function validate(
+  targetDir: string | undefined,
+  { json }: { json?: boolean } = {},
+): Promise<void> {
+  const dir = resolve(targetDir ?? ".");
+  let config;
+
+  try {
+    ({ config } = readConfig(dir));
+  } catch (e) {
+    outputError(`Cannot read ide.yml: ${(e as Error).message}`, "READ_ERROR");
+    return;
+  }
+
+  const errors = validateConfig(config);
+  const valid = errors.length === 0;
+
+  if (json) {
+    console.log(JSON.stringify({ valid, errors }, null, 2));
+    return;
+  }
+
+  if (valid) {
+    console.log("✓ ide.yml is valid");
+  } else {
+    console.log("✗ ide.yml has errors:");
+    for (const e of errors) {
+      console.log(`  - ${e}`);
+    }
+    process.exitCode = 1;
+  }
+}

package/packages/daemon/src/widgets/changes/README.md

@@ -0,0 +1,3 @@
+# `changes` — daemon TUI widget
+
+Git diff viewer for the working tree. See [ARCHITECTURE.md §3](../../../../../ARCHITECTURE.md#§3--package-map) and the [`changes` row in docs/widget-index.md](../../../../../docs/widget-index.md#daemon-tui-widgets-8).