tmux-ide 2.8.0 → 2.9.0-beta.6

package/packages/daemon/src/tui/mirror/ui/agent-badge.tsx

@@ -0,0 +1,41 @@
+/* @jsxImportSource @opentui/solid */
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { Badge } from "./badge.tsx";
+import type { ComponentInteractionState } from "./state.ts";
+
+export type AgentBadgeStatus = "blocked" | "working" | "done" | "idle" | "unknown";
+
+export interface AgentBadgeProps extends ComponentInteractionState {
+  theme: SemanticThemeSnapshot;
+  label: string;
+  status: AgentBadgeStatus;
+  width?: number;
+}
+
+/** Agent-specific semantic badge. Agent lifecycle remains outside this presentation primitive. */
+export function AgentBadge(props: AgentBadgeProps) {
+  const marker = () => {
+    if (props.attention || props.status === "blocked") return "!";
+    if (props.status === "working") return props.theme.glyphs.active;
+    if (props.status === "done") return props.theme.glyphs.check;
+    return props.theme.glyphs.inactive;
+  };
+  return (
+    <Badge
+      theme={props.theme}
+      label={props.label}
+      tone={props.status}
+      marker={marker()}
+      width={props.width}
+      selected={props.selected}
+      focused={props.focused}
+      hovered={props.hovered}
+      pressed={props.pressed}
+      disabled={props.disabled}
+      attention={props.attention || props.status === "blocked"}
+      loading={props.loading}
+      empty={props.empty}
+      status={props.status}
+    />
+  );
+}

package/packages/daemon/src/tui/mirror/ui/badge.tsx

@@ -0,0 +1,42 @@
+/* @jsxImportSource @opentui/solid */
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { clipTerminal, terminalDisplayWidth } from "../terminal-text.ts";
+import { componentPalette, type ComponentInteractionState, type ComponentTone } from "./state.ts";
+
+export interface BadgeProps extends ComponentInteractionState {
+  theme: SemanticThemeSnapshot;
+  label: string;
+  tone?: ComponentTone;
+  width?: number;
+  marker?: string;
+  /** Exact cell projection for compound chrome that already owns spacing. */
+  presentation?: string;
+  surface?: "panel" | "header";
+}
+
+export function Badge(props: BadgeProps) {
+  const palette = () => componentPalette(props.theme, props, props.tone);
+  const background = () =>
+    props.surface === "header" && palette().state === "base"
+      ? props.theme.roles.surfaces.header
+      : palette().background;
+  const width = () => Math.max(1, Math.floor(props.width ?? terminalDisplayWidth(props.label) + 2));
+  const content = () =>
+    clipTerminal(
+      props.presentation ?? ` ${props.marker ? `${props.marker} ` : ""}${props.label} `,
+      width(),
+    );
+  return (
+    <box
+      id={`ui-badge:${props.label}`}
+      height={1}
+      width={width()}
+      backgroundColor={background()}
+      overflow="hidden"
+    >
+      <text fg={palette().accent} bg={background()}>
+        {props.attention ? <strong>{content()}</strong> : content()}
+      </text>
+    </box>
+  );
+}

package/packages/daemon/src/tui/mirror/ui/button.tsx

@@ -0,0 +1,127 @@
+/* @jsxImportSource @opentui/solid */
+import type { RGBA } from "@opentui/core";
+
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { clipTerminal, terminalDisplayWidth } from "../terminal-text.ts";
+import { componentPalette, type ComponentInteractionState } from "./state.ts";
+import { useKeyboardRoute } from "./keyboard-router.tsx";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "compact" | "default";
+
+export interface TuiButtonProps extends ComponentInteractionState {
+  theme: SemanticThemeSnapshot;
+  label: string;
+  shortcut?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  width?: number;
+  /** Opaque surface used by neutral/ghost controls embedded in custom chrome. */
+  background?: RGBA;
+  onPress?: () => void;
+}
+
+/** Compatibility name retained while production callers migrate to `TuiButton`. */
+export type ButtonProps = TuiButtonProps;
+
+function naturalButtonWidth(label: string, shortcut: string | undefined, size: ButtonSize): number {
+  const inset = size === "compact" ? 2 : 4;
+  return terminalDisplayWidth(label) + (shortcut ? terminalDisplayWidth(shortcut) + 1 : 0) + inset;
+}
+
+export function TuiButton(props: TuiButtonProps) {
+  const variant = () => props.variant ?? "secondary";
+  const size = () => props.size ?? "default";
+  const palette = () =>
+    componentPalette(
+      props.theme,
+      {
+        selected: props.selected || variant() === "primary",
+        focused: props.focused,
+        hovered: props.hovered,
+        pressed: props.pressed,
+        disabled: props.disabled,
+        attention: props.attention,
+        loading: props.loading,
+      },
+      variant() === "danger" ? "destructive" : variant() === "primary" ? "accent" : "neutral",
+    );
+  const width = () =>
+    Math.max(1, Math.floor(props.width ?? naturalButtonWidth(props.label, props.shortcut, size())));
+  const content = () => {
+    const marker = props.loading ? "…" : size() === "compact" ? "" : `${palette().marker} `;
+    const shortcut = props.shortcut ? ` ${props.shortcut}` : "";
+    const inset = size() === "compact" ? 1 : 1;
+    return clipTerminal(`${" ".repeat(inset)}${marker}${props.label}${shortcut} `, width());
+  };
+  const background = () =>
+    variant() === "ghost" && palette().state === "base"
+      ? (props.background ?? props.theme.roles.surfaces.panel)
+      : palette().background;
+  const activate = () => {
+    if (props.disabled || props.loading || !props.onPress) return;
+    props.onPress();
+  };
+
+  useKeyboardRoute((event) => {
+    if (!props.focused || props.disabled || props.loading || !props.onPress) return false;
+    const key = event.name.toLowerCase();
+    if (event.eventType !== "press" || (key !== "enter" && key !== "return" && key !== "space"))
+      return false;
+    event.preventDefault();
+    event.stopPropagation();
+    activate();
+    return true;
+  });
+
+  return (
+    <box
+      id={`ui-button:${props.label}`}
+      width={width()}
+      height={1}
+      flexDirection="row"
+      backgroundColor={background()}
+      overflow="hidden"
+      focusable={Boolean(props.onPress) && !props.disabled}
+      focused={Boolean(props.focused)}
+      onMouseDown={(event) => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (props.disabled || props.loading || !props.onPress) return;
+        activate();
+      }}
+    >
+      <text
+        bg={background()}
+        fg={
+          variant() === "ghost" && palette().state === "base"
+            ? props.theme.roles.text.muted
+            : palette().foreground
+        }
+      >
+        {variant() === "primary" || props.focused ? <strong>{content()}</strong> : content()}
+      </text>
+    </box>
+  );
+}
+
+/** @deprecated Prefer the repository-scoped `TuiButton` name for new component work. */
+export const Button = TuiButton;
+
+export interface IconButtonProps extends Omit<TuiButtonProps, "label" | "size"> {
+  icon: string;
+  label: string;
+}
+
+export function IconButton(props: IconButtonProps) {
+  return (
+    <TuiButton
+      {...props}
+      label={props.icon}
+      size="compact"
+      width={props.width ?? 3}
+      shortcut={undefined}
+    />
+  );
+}

package/packages/daemon/src/tui/mirror/ui/dialog.tsx

@@ -0,0 +1,45 @@
+/* @jsxImportSource @opentui/solid */
+import type { JSX } from "@opentui/solid";
+
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { OverlayFrame } from "./overlay-frame.tsx";
+import type { OverlayPlacement } from "./overlay-model.ts";
+
+export interface DialogProps {
+  theme: SemanticThemeSnapshot;
+  viewportWidth: number;
+  viewportHeight: number;
+  width: number;
+  height: number;
+  title?: string;
+  footer?: string;
+  placement?: OverlayPlacement;
+  active?: boolean;
+  zIndex?: number;
+  dismissOnOutsidePress?: boolean;
+  onDismiss: () => void;
+  children?: JSX.Element;
+}
+
+export function Dialog(props: DialogProps) {
+  return (
+    <OverlayFrame
+      theme={props.theme}
+      viewportWidth={props.viewportWidth}
+      viewportHeight={props.viewportHeight}
+      width={props.width}
+      height={props.height}
+      {...(props.title ? { title: props.title } : {})}
+      {...(props.footer ? { footer: props.footer } : {})}
+      {...(props.placement ? { placement: props.placement } : {})}
+      {...(props.active !== undefined ? { active: props.active } : {})}
+      {...(props.zIndex !== undefined ? { zIndex: props.zIndex } : {})}
+      {...(props.dismissOnOutsidePress !== undefined
+        ? { dismissOnOutsidePress: props.dismissOnOutsidePress }
+        : {})}
+      onDismiss={props.onDismiss}
+    >
+      {props.children}
+    </OverlayFrame>
+  );
+}

package/packages/daemon/src/tui/mirror/ui/index.ts

@@ -0,0 +1,59 @@
+export { AgentBadge, type AgentBadgeProps, type AgentBadgeStatus } from "./agent-badge.tsx";
+export { Badge, type BadgeProps } from "./badge.tsx";
+export {
+  Button,
+  IconButton,
+  TuiButton,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type IconButtonProps,
+  type TuiButtonProps,
+} from "./button.tsx";
+export { Dialog, type DialogProps } from "./dialog.tsx";
+export { KeyHint, type KeyHintProps } from "./key-hint.tsx";
+export {
+  createKeyboardRouteOwner,
+  KeyboardRouteProvider,
+  useKeyboardRoute,
+  type KeyboardRoute,
+  type KeyboardRouteOwner,
+  type RoutedKeyboardEvent,
+} from "./keyboard-router.tsx";
+export { Menu, type MenuItem, type MenuProps } from "./menu.tsx";
+export {
+  NavigationRow,
+  type NavigationRowInputSource,
+  type NavigationRowProps,
+} from "./navigation-row.tsx";
+export { OverlayFrame, type OverlayFrameProps } from "./overlay-frame.tsx";
+export { OverlayHost, type OverlayHostProps, type OverlayLayer } from "./overlay-host.tsx";
+export {
+  createOverlayFocusCoordinator,
+  overlayEscapeTarget,
+  overlayFrameSize,
+  overlayTopmost,
+  overlayZIndex,
+} from "./overlay-model.ts";
+export { OverlayListRow, type OverlayListRowProps } from "./overlay-list-row.tsx";
+export {
+  componentPalette,
+  type ComponentInteractionState,
+  type ComponentPalette,
+  type ComponentResolvedState,
+  type ComponentTone,
+} from "./state.ts";
+export { Tabs, type TabItem, type TabsProps } from "./tabs.tsx";
+export { Surface, type SurfaceProps, type SurfaceVariant } from "./surface.tsx";
+export {
+  StatusBar,
+  StatusBarAction,
+  StatusBarGroup,
+  StatusBarSegment,
+  StatusSegment,
+  type StatusBarActionProps,
+  type StatusBarGroupProps,
+  type StatusBarProps,
+  type StatusBarSegmentProps,
+  type StatusSegmentProps,
+} from "./status-bar.tsx";

package/packages/daemon/src/tui/mirror/ui/key-hint.tsx

@@ -0,0 +1,63 @@
+/* @jsxImportSource @opentui/solid */
+
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { clipTerminal, terminalDisplayWidth } from "../terminal-text.ts";
+import { componentPalette, type ComponentInteractionState } from "./state.ts";
+import { useKeyboardRoute } from "./keyboard-router.tsx";
+
+export interface KeyHintProps extends ComponentInteractionState {
+  theme: SemanticThemeSnapshot;
+  keys: string;
+  label?: string;
+  width?: number;
+  /** Exact cell projection for compact chrome that already owns spacing. */
+  presentation?: string;
+  onPress?: () => void;
+}
+
+/** A one-row, cell-aligned keyboard affordance with optional pointer/keyboard activation. */
+export function KeyHint(props: KeyHintProps) {
+  const palette = () => componentPalette(props.theme, props, "neutral");
+  const text = () => props.presentation ?? `${props.keys}${props.label ? ` ${props.label}` : ""}`;
+  const width = () => Math.max(1, Math.floor(props.width ?? terminalDisplayWidth(text()) + 2));
+  const content = () => clipTerminal(props.presentation ?? ` ${text()} `, width());
+  const activate = () => {
+    if (!props.disabled) props.onPress?.();
+  };
+  useKeyboardRoute((event) => {
+    const key = event.name.toLowerCase();
+    if (
+      !props.focused ||
+      props.disabled ||
+      !props.onPress ||
+      event.eventType !== "press" ||
+      (key !== "enter" && key !== "return" && key !== "space")
+    )
+      return false;
+    event.preventDefault();
+    event.stopPropagation();
+    activate();
+    return true;
+  });
+  return (
+    <box
+      id={`ui-key-hint:${props.keys}`}
+      width={width()}
+      height={1}
+      overflow="hidden"
+      backgroundColor={palette().background}
+      focusable={Boolean(props.onPress) && !props.disabled}
+      focused={Boolean(props.focused)}
+      onMouseDown={(event) => {
+        if (event.button !== 0 || !props.onPress) return;
+        event.preventDefault();
+        event.stopPropagation();
+        activate();
+      }}
+    >
+      <text fg={palette().foreground} bg={palette().background}>
+        {props.focused || props.selected ? <strong>{content()}</strong> : content()}
+      </text>
+    </box>
+  );
+}

package/packages/daemon/src/tui/mirror/ui/keyboard-router.tsx

@@ -0,0 +1,72 @@
+/* @jsxImportSource @opentui/solid */
+import type { JSX } from "@opentui/solid";
+import { createContext, onCleanup, useContext } from "solid-js";
+
+export interface RoutedKeyboardEvent {
+  readonly name: string;
+  readonly eventType: string;
+  readonly ctrl: boolean;
+  readonly meta: boolean;
+  readonly shift: boolean;
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+
+export type KeyboardRoute = (event: RoutedKeyboardEvent) => boolean;
+
+export interface KeyboardRouteOwner {
+  register(route: KeyboardRoute): () => void;
+  route(event: RoutedKeyboardEvent): boolean;
+  dispose(): void;
+  readonly size: number;
+}
+
+/** One application keyboard ingress with component-local semantic routes. */
+export function createKeyboardRouteOwner(): KeyboardRouteOwner {
+  const routes: KeyboardRoute[] = [];
+  return {
+    register(route) {
+      routes.push(route);
+      let active = true;
+      return () => {
+        if (!active) return;
+        active = false;
+        const index = routes.lastIndexOf(route);
+        if (index >= 0) routes.splice(index, 1);
+      };
+    },
+    route(event) {
+      for (let index = routes.length - 1; index >= 0; index -= 1) {
+        if (routes[index]!(event)) return true;
+      }
+      return false;
+    },
+    dispose() {
+      routes.length = 0;
+    },
+    get size() {
+      return routes.length;
+    },
+  };
+}
+
+const KeyboardRouteContext = createContext<KeyboardRouteOwner | null>(null);
+
+export function KeyboardRouteProvider(props: {
+  readonly owner: KeyboardRouteOwner;
+  readonly children: JSX.Element;
+}) {
+  return (
+    <KeyboardRouteContext.Provider value={props.owner}>
+      {props.children}
+    </KeyboardRouteContext.Provider>
+  );
+}
+
+/** Register with the root owner; a standalone primitive remains pointer-only. */
+export function useKeyboardRoute(route: KeyboardRoute): void {
+  const owner = useContext(KeyboardRouteContext);
+  if (!owner) return;
+  const unregister = owner.register(route);
+  onCleanup(unregister);
+}

package/packages/daemon/src/tui/mirror/ui/menu.tsx

@@ -0,0 +1,68 @@
+/* @jsxImportSource @opentui/solid */
+import { For } from "solid-js";
+
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { OverlayFrame } from "./overlay-frame.tsx";
+import { OverlayListRow } from "./overlay-list-row.tsx";
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+}
+
+export interface MenuProps {
+  theme: SemanticThemeSnapshot;
+  title?: string;
+  items: readonly MenuItem[];
+  selectedId: string | null;
+  left: number;
+  top: number;
+  width: number;
+  viewportWidth?: number;
+  viewportHeight?: number;
+  zIndex?: number;
+  active?: boolean;
+  onDismiss?: () => void;
+  onSelect: (id: string) => void;
+}
+
+export function Menu(props: MenuProps) {
+  const innerWidth = () => Math.max(1, props.width - 2);
+  return (
+    <OverlayFrame
+      theme={props.theme}
+      viewportWidth={props.viewportWidth ?? Math.max(props.width, props.left + props.width)}
+      viewportHeight={props.viewportHeight ?? Math.max(3, props.top + props.items.length + 3)}
+      width={props.width}
+      height={props.items.length + (props.title ? 3 : 2)}
+      placement="anchor"
+      anchor={{ x: props.left, y: props.top }}
+      zIndex={props.zIndex ?? 20}
+      active={props.active}
+      title={props.title}
+      onDismiss={props.onDismiss}
+    >
+      <For each={props.items}>
+        {(item) => {
+          const selected = () => props.selectedId === item.id;
+          return (
+            <OverlayListRow
+              theme={props.theme}
+              id={item.id}
+              label={item.label}
+              width={innerWidth()}
+              {...(item.shortcut ? { shortcut: item.shortcut } : {})}
+              selected={selected()}
+              {...(item.disabled !== undefined ? { disabled: item.disabled } : {})}
+              {...(item.danger !== undefined ? { danger: item.danger } : {})}
+              onPress={() => props.onSelect(item.id)}
+            />
+          );
+        }}
+      </For>
+    </OverlayFrame>
+  );
+}

package/packages/daemon/src/tui/mirror/ui/navigation-row.tsx

@@ -0,0 +1,114 @@
+/* @jsxImportSource @opentui/solid */
+
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { clipTerminal, terminalDisplayWidth } from "../terminal-text.ts";
+import { componentPalette, type ComponentInteractionState, type ComponentTone } from "./state.ts";
+import { Surface } from "./surface.tsx";
+import { useKeyboardRoute } from "./keyboard-router.tsx";
+
+export type NavigationRowInputSource = "keyboard" | "mouse";
+
+export interface NavigationRowProps extends ComponentInteractionState {
+  readonly theme: SemanticThemeSnapshot;
+  readonly id: string;
+  readonly label: string;
+  readonly width: number;
+  readonly marker?: string;
+  readonly detail?: string;
+  readonly detailMarker?: string;
+  readonly detailAlign?: "adjacent" | "end";
+  readonly tone?: ComponentTone;
+  readonly onActivate?: (source: NavigationRowInputSource) => void;
+}
+
+/**
+ * Shared one-row navigation control for catalog, session, and agent lists.
+ * State precedence, colors, pointer capture, and Enter/Space activation live
+ * here so sidebars only project semantic labels and typed intents.
+ */
+export function NavigationRow(props: NavigationRowProps) {
+  const palette = () => componentPalette(props.theme, props, props.tone);
+  const width = () => Math.max(1, Math.floor(props.width));
+  const marker = () => props.marker ?? palette().marker;
+  const markerWidth = () => Math.min(width(), Math.max(1, terminalDisplayWidth(marker()) + 1));
+  const detail = () => props.detail ?? "";
+  const detailPresentation = () =>
+    `${props.detailMarker ? `${props.detailMarker} ` : ""}${detail()}`;
+  const detailWidth = () =>
+    detail().length > 0
+      ? Math.min(
+          Math.max(0, width() - markerWidth()),
+          terminalDisplayWidth(detailPresentation()) + 1,
+        )
+      : 0;
+  const labelWidth = () => {
+    const available = Math.max(0, width() - markerWidth() - detailWidth());
+    return props.detailAlign === "adjacent"
+      ? Math.min(available, terminalDisplayWidth(props.label))
+      : available;
+  };
+  const activate = (source: NavigationRowInputSource) => {
+    if (props.disabled || !props.onActivate) return;
+    props.onActivate(source);
+  };
+
+  useKeyboardRoute((event) => {
+    const key = event.name.toLowerCase();
+    if (
+      !props.focused ||
+      props.disabled ||
+      !props.onActivate ||
+      event.eventType !== "press" ||
+      (key !== "enter" && key !== "return" && key !== "space")
+    )
+      return false;
+    event.preventDefault();
+    event.stopPropagation();
+    activate("keyboard");
+    return true;
+  });
+
+  return (
+    <Surface
+      id={`ui-navigation-row:${props.id}`}
+      theme={props.theme}
+      width={width()}
+      height={1}
+      flexDirection="row"
+      overflow="hidden"
+      selected={props.selected}
+      focused={props.focused}
+      hovered={props.hovered}
+      pressed={props.pressed}
+      disabled={props.disabled}
+      attention={props.attention}
+      loading={props.loading}
+      empty={props.empty}
+      status={props.status}
+      tone={props.tone}
+      focusable={Boolean(props.onActivate) && !props.disabled}
+      onMouseDown={(event) => {
+        if (event.button !== 0 || !props.onActivate) return;
+        event.preventDefault();
+        event.stopPropagation();
+        activate("mouse");
+      }}
+    >
+      <text width={markerWidth()} fg={palette().accent} bg={palette().background}>
+        {clipTerminal(`${marker()} `, markerWidth())}
+      </text>
+      <text width={labelWidth()} fg={palette().foreground} bg={palette().background}>
+        {props.selected || props.focused ? (
+          <strong>{clipTerminal(props.label, labelWidth())}</strong>
+        ) : (
+          clipTerminal(props.label, labelWidth())
+        )}
+      </text>
+      {detailWidth() > 0 ? (
+        <text width={detailWidth()} fg={palette().accent} bg={palette().background}>
+          {clipTerminal(` ${detailPresentation()}`, detailWidth())}
+        </text>
+      ) : null}
+    </Surface>
+  );
+}