tmux-ide 1.2.1 → 2.0.0

package/src/widgets/lib/theme.ts

@@ -0,0 +1,151 @@
+export type RGBA = { r: number; g: number; b: number; a: number };
+
+export interface WidgetTheme {
+  bg: RGBA;
+  fg: RGBA;
+  fgMuted: RGBA;
+  accent: RGBA;
+  border: RGBA;
+  selected: RGBA;
+  selectedText: RGBA;
+  dirName: RGBA;
+  rowAlt: RGBA;
+  indentGuide: RGBA;
+  ignored: RGBA;
+  gitModified: RGBA;
+  gitAdded: RGBA;
+  gitDeleted: RGBA;
+  gitUntracked: RGBA;
+  diffAdded: RGBA;
+  diffAddedBg: RGBA;
+  diffRemoved: RGBA;
+  diffRemovedBg: RGBA;
+  diffContext: RGBA;
+  diffContextBg: RGBA;
+  diffHunk: RGBA;
+  diffLineNumber: RGBA;
+}
+
+function rgba(r: number, g: number, b: number, a = 255) {
+  return { r, g, b, a };
+}
+
+const DEFAULTS: WidgetTheme = {
+  bg: rgba(30, 30, 40),
+  fg: rgba(200, 200, 210),
+  fgMuted: rgba(120, 120, 140),
+  accent: rgba(130, 170, 255),
+  border: rgba(60, 60, 80),
+  selected: rgba(50, 50, 70),
+  selectedText: rgba(255, 255, 255),
+  dirName: rgba(100, 160, 255),
+  rowAlt: rgba(255, 255, 255, 5),
+  indentGuide: rgba(60, 60, 80),
+  ignored: rgba(80, 80, 100),
+  gitModified: rgba(230, 180, 80),
+  gitAdded: rgba(80, 200, 120),
+  gitDeleted: rgba(230, 80, 80),
+  gitUntracked: rgba(120, 120, 140),
+  diffAdded: rgba(80, 200, 120),
+  diffAddedBg: rgba(20, 60, 30),
+  diffRemoved: rgba(230, 80, 80),
+  diffRemovedBg: rgba(60, 20, 20),
+  diffContext: rgba(160, 160, 170),
+  diffContextBg: rgba(30, 30, 40),
+  diffHunk: rgba(100, 180, 220),
+  diffLineNumber: rgba(80, 80, 100),
+};
+
+/**
+ * Parse a tmux/CSS color string into RGBA.
+ * Supports: colourN / colorN (0-255), #rgb, #rrggbb.
+ */
+function parseColor(color: string): RGBA | null {
+  // tmux colour0–colour255
+  const tmuxMatch = color.match(/^colou?r(\d+)$/);
+  if (tmuxMatch) {
+    const rawIndex = tmuxMatch[1];
+    if (!rawIndex) return null;
+    const n = parseInt(rawIndex, 10);
+    if (n < 0 || n > 255) return null;
+
+    // Standard colors 0–15 (approximate to common terminal defaults)
+    const STANDARD: [number, number, number][] = [
+      [0, 0, 0],
+      [128, 0, 0],
+      [0, 128, 0],
+      [128, 128, 0],
+      [0, 0, 128],
+      [128, 0, 128],
+      [0, 128, 128],
+      [192, 192, 192],
+      [128, 128, 128],
+      [255, 0, 0],
+      [0, 255, 0],
+      [255, 255, 0],
+      [0, 0, 255],
+      [255, 0, 255],
+      [0, 255, 255],
+      [255, 255, 255],
+    ];
+    if (n < 16) {
+      const standard = STANDARD[n];
+      if (!standard) return null;
+      return rgba(standard[0], standard[1], standard[2]);
+    }
+
+    // 6×6×6 color cube (16–231)
+    if (n < 232) {
+      const idx = n - 16;
+      const LEVELS: number[] = [0, 95, 135, 175, 215, 255];
+      const r = LEVELS[Math.floor(idx / 36)];
+      const g = LEVELS[Math.floor((idx % 36) / 6)];
+      const b = LEVELS[idx % 6];
+      if (r == null || g == null || b == null) return null;
+      return rgba(r, g, b);
+    }
+
+    // Grayscale ramp (232–255)
+    const level = 8 + 10 * (n - 232);
+    return rgba(level, level, level);
+  }
+
+  // Hex: #rgb or #rrggbb
+  const hexMatch = color.match(/^#([0-9a-fA-F]{3,6})$/);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (!hex) return null;
+    if (hex.length === 3) {
+      const [r, g, b] = hex.split("");
+      if (!r || !g || !b) return null;
+      hex = r + r + g + g + b + b;
+    }
+    if (hex.length !== 6) return null;
+    return rgba(
+      parseInt(hex.slice(0, 2), 16),
+      parseInt(hex.slice(2, 4), 16),
+      parseInt(hex.slice(4, 6), 16),
+    );
+  }
+
+  return null;
+}
+
+export function createTheme(config?: Record<string, string>): WidgetTheme {
+  if (!config) return DEFAULTS;
+  const theme = { ...DEFAULTS };
+  const MAP: Record<string, keyof WidgetTheme> = {
+    accent: "accent",
+    border: "border",
+    bg: "bg",
+    fg: "fg",
+  };
+  for (const [key, prop] of Object.entries(MAP)) {
+    const val = config[key];
+    if (val) {
+      const parsed = parseColor(val);
+      if (parsed) theme[prop] = parsed;
+    }
+  }
+  return theme;
+}

package/src/widgets/lib/watcher.ts

@@ -0,0 +1,50 @@
+import * as watcher from "@parcel/watcher";
+import { join } from "node:path";
+
+export interface WatchEvent {
+  type: "create" | "update" | "delete";
+  path: string;
+}
+
+export async function watchDirectory(
+  dir: string,
+  onChange: (events: WatchEvent[]) => void,
+  options?: { debounceMs?: number; ignore?: string[] },
+): Promise<() => Promise<void>> {
+  const debounceMs = options?.debounceMs ?? 300;
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  const subscription = await watcher.subscribe(
+    dir,
+    (err, events) => {
+      if (err) return;
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => onChange(events as unknown as WatchEvent[]), debounceMs);
+    },
+    { ignore: options?.ignore ?? ["node_modules", ".git", "dist", "build", ".next"] },
+  );
+
+  return () => subscription.unsubscribe();
+}
+
+export async function watchGitHead(
+  dir: string,
+  onBranchChange: () => void,
+): Promise<(() => Promise<void>) | null> {
+  const gitDir = join(dir, ".git");
+  try {
+    const subscription = await watcher.subscribe(
+      gitDir,
+      (err, events) => {
+        if (err) return;
+        if (events.some((e) => e.path.endsWith("HEAD"))) {
+          onBranchChange();
+        }
+      },
+      { ignore: ["objects", "pack", "refs", "logs"] },
+    );
+    return () => subscription.unsubscribe();
+  } catch {
+    return null;
+  }
+}

package/src/widgets/mission-control/activity-feed.tsx

@@ -0,0 +1,59 @@
+import { RGBA, TextAttributes } from "@opentui/core";
+import type { OrchestratorEvent } from "../../lib/event-log.ts";
+import type { WidgetTheme, RGBA as RGBAType } from "../lib/theme.ts";
+
+function toRGBA(c: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+function formatRelative(iso: string): string {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
+  if (ms < 3600000) return `${Math.round(ms / 60000)}m`;
+  return `${(ms / 3600000).toFixed(1)}h`;
+}
+
+function eventColor(type: string, theme: WidgetTheme): RGBAType {
+  switch (type) {
+    case "dispatch":
+      return theme.accent;
+    case "completion":
+      return theme.gitAdded;
+    case "error":
+    case "reconcile":
+      return theme.gitDeleted;
+    case "stall":
+      return theme.gitModified;
+    default:
+      return theme.fgMuted;
+  }
+}
+
+interface ActivityFeedProps {
+  events: OrchestratorEvent[];
+  theme: WidgetTheme;
+}
+
+export function ActivityFeed(props: ActivityFeedProps) {
+  return (
+    <box flexGrow={1}>
+      {props.events.length === 0 ? (
+        <text fg={toRGBA(props.theme.fgMuted)}>No recent activity</text>
+      ) : (
+        props.events.map((evt) => (
+          <box flexShrink={0} flexDirection="row" gap={1}>
+            <text fg={toRGBA(props.theme.fgMuted)} wrapMode="none">
+              {formatRelative(evt.timestamp).padStart(4)}
+            </text>
+            <text fg={toRGBA(eventColor(evt.type, props.theme))} wrapMode="none">
+              {evt.type.padEnd(11)}
+            </text>
+            <text fg={toRGBA(props.theme.fg)} wrapMode="none">
+              {evt.message.slice(0, 40)}
+            </text>
+          </box>
+        ))
+      )}
+    </box>
+  );
+}

package/src/widgets/mission-control/agent-panel.tsx

@@ -0,0 +1,132 @@
+import { createSignal, For, Show } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import type { WidgetTheme, RGBA as RGBAType } from "../lib/theme.ts";
+
+function toRGBA(c: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+export interface AgentInfo {
+  name: string;
+  paneId: string;
+  state: "busy" | "idle" | "error";
+  role?: string;
+  currentTask: { id: string; title: string; elapsed: string } | null;
+}
+
+interface AgentPanelProps {
+  agents: AgentInfo[];
+  isActive: boolean;
+  theme: WidgetTheme;
+  onAddAgent: () => void;
+  onSelectAgent: (agent: AgentInfo) => void;
+}
+
+function dotChar(state: AgentInfo["state"]): string {
+  return state === "error" ? "!" : state === "busy" ? "*" : "o";
+}
+
+function dotColor(state: AgentInfo["state"], theme: WidgetTheme): RGBAType {
+  switch (state) {
+    case "idle":
+      return theme.gitAdded;
+    case "busy":
+      return theme.gitModified;
+    case "error":
+      return theme.gitDeleted;
+  }
+}
+
+export function AgentPanel(props: AgentPanelProps) {
+  const [selected, setSelected] = createSignal(0);
+
+  // Total rows = agents + 1 for the [+add] row
+  const rowCount = () => props.agents.length + 1;
+
+  useKeyboard((evt) => {
+    if (!props.isActive) return;
+
+    if (evt.name === "up" || evt.name === "k") {
+      setSelected((i) => Math.max(0, i - 1));
+      evt.preventDefault();
+    } else if (evt.name === "down" || evt.name === "j") {
+      setSelected((i) => Math.min(rowCount() - 1, i + 1));
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      if (selected() === props.agents.length) {
+        props.onAddAgent();
+      } else {
+        const agent = props.agents[selected()];
+        if (agent) props.onSelectAgent(agent);
+      }
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box flexGrow={1}>
+      <For each={props.agents}>
+        {(agent, i) => {
+          const isSel = () => props.isActive && selected() === i();
+          return (
+            <box
+              flexShrink={0}
+              flexDirection="row"
+              gap={1}
+              backgroundColor={isSel() ? toRGBA(props.theme.selected) : undefined}
+              onMouseDown={() => {
+                setSelected(i());
+                props.onSelectAgent(agent);
+              }}
+            >
+              <text fg={toRGBA(dotColor(agent.state, props.theme))}>{dotChar(agent.state)}</text>
+              <text
+                fg={toRGBA(isSel() ? props.theme.selectedText : props.theme.fg)}
+                attributes={isSel() ? TextAttributes.BOLD : 0}
+                wrapMode="none"
+              >
+                {agent.name}
+              </text>
+              <Show when={agent.currentTask}>
+                {(task) => (
+                  <text fg={toRGBA(props.theme.fgMuted)} wrapMode="none">
+                    {task().title} {task().elapsed}
+                  </text>
+                )}
+              </Show>
+              <Show when={!agent.currentTask}>
+                <text fg={toRGBA(props.theme.fgMuted)}>idle</text>
+              </Show>
+            </box>
+          );
+        }}
+      </For>
+
+      {/* Add agent row */}
+      <box
+        flexShrink={0}
+        flexDirection="row"
+        backgroundColor={
+          props.isActive && selected() === props.agents.length
+            ? toRGBA(props.theme.selected)
+            : undefined
+        }
+        onMouseDown={() => {
+          setSelected(props.agents.length);
+          props.onAddAgent();
+        }}
+      >
+        <text
+          fg={toRGBA(
+            props.isActive && selected() === props.agents.length
+              ? props.theme.accent
+              : props.theme.fgMuted,
+          )}
+        >
+          [+add]
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/widgets/mission-control/command-bar.tsx

@@ -0,0 +1,63 @@
+import { createSignal, onMount } from "solid-js";
+import { RGBA, TextAttributes, type InputRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import type { WidgetTheme, RGBA as RGBAType } from "../lib/theme.ts";
+
+function toRGBA(c: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+interface CommandBarProps {
+  value: string;
+  isActive: boolean;
+  theme: WidgetTheme;
+  onSubmit: (value: string) => void;
+  onChange: (value: string) => void;
+  onEscape: () => void;
+}
+
+export function CommandBar(props: CommandBarProps) {
+  let inputRef: InputRenderable | undefined;
+
+  onMount(() => {
+    if (props.isActive) {
+      setTimeout(() => inputRef?.focus(), 50);
+    }
+  });
+
+  useKeyboard((evt) => {
+    if (!props.isActive) return;
+
+    if (evt.name === "escape") {
+      props.onEscape();
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      if (props.value.trim()) {
+        props.onSubmit(props.value);
+      }
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box flexDirection="row" gap={1}>
+      <text
+        fg={toRGBA(props.isActive ? props.theme.accent : props.theme.fgMuted)}
+        attributes={props.isActive ? TextAttributes.BOLD : 0}
+      >
+        {">"}
+      </text>
+      <input
+        value={props.value}
+        placeholder={props.isActive ? "task create, send, goal, add..." : "press / to type"}
+        onInput={(v: string) => props.onChange(v)}
+        focusedBackgroundColor={toRGBA(props.theme.selected)}
+        cursorColor={toRGBA(props.theme.accent)}
+        focusedTextColor={toRGBA(props.theme.fg)}
+        ref={(r: InputRenderable) => {
+          inputRef = r;
+        }}
+      />
+    </box>
+  );
+}