tmux-ide 1.3.1 → 2.1.0

package/src/widgets/setup/setup-model.ts

@@ -0,0 +1,188 @@
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+
+// Re-export shared config model utilities
+export {
+  type TreeNode,
+  flattenConfigTree,
+  updateConfigAtPath,
+  addPane,
+  removePane,
+  addRow,
+  removeRow,
+  deepClone,
+  validateSetupConfig,
+} from "../lib/config-model.ts";
+
+// ---------------------------------------------------------------------------
+// Layout Presets (setup-specific)
+// ---------------------------------------------------------------------------
+
+export interface DetectedInfo {
+  devCommand: string | null;
+  packageManager: string | null;
+}
+
+export interface LayoutPreset {
+  id: string;
+  label: string;
+  description: string;
+  diagram: string[];
+  buildConfig: (name: string, detected?: DetectedInfo) => IdeConfig;
+}
+
+function devCmd(detected?: DetectedInfo): string {
+  if (detected?.devCommand) return detected.devCommand;
+  if (detected?.packageManager) return `${detected.packageManager} dev`;
+  return "npm run dev";
+}
+
+function testCmd(detected?: DetectedInfo): string {
+  if (detected?.packageManager) return `${detected.packageManager} test`;
+  return "npm test";
+}
+
+export const PRESETS: LayoutPreset[] = [
+  {
+    id: "dual-claude",
+    label: "Dual Claude",
+    description: "Two Claude panes on top, dev server and shell on the bottom.",
+    diagram: [
+      "┌─────────────────┬─────────────────┐",
+      "│                 │                 │",
+      "│    Claude 1     │    Claude 2     │  70%",
+      "│                 │                 │",
+      "├─────────────────┼─────────────────┤",
+      "│   Dev Server    │     Shell       │  30%",
+      "└─────────────────┴─────────────────┘",
+    ],
+    buildConfig(name: string, detected?: DetectedInfo): IdeConfig {
+      return {
+        name,
+        rows: [
+          {
+            size: "70%",
+            panes: [
+              { title: "Claude 1", command: "claude", size: "50%" },
+              { title: "Claude 2", command: "claude" },
+            ],
+          },
+          {
+            panes: [
+              { title: "Dev Server", command: devCmd(detected), size: "50%" },
+              { title: "Shell" },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  {
+    id: "triple-claude",
+    label: "Triple Claude",
+    description: "Three Claude panes on top for parallel work, dev server and shell below.",
+    diagram: [
+      "┌───────────┬───────────┬───────────┐",
+      "│           │           │           │",
+      "│ Claude 1  │ Claude 2  │ Claude 3  │  70%",
+      "│           │           │           │",
+      "├───────────┴─────┬─────┴───────────┤",
+      "│   Dev Server    │     Shell       │  30%",
+      "└─────────────────┴─────────────────┘",
+    ],
+    buildConfig(name: string, detected?: DetectedInfo): IdeConfig {
+      return {
+        name,
+        rows: [
+          {
+            size: "70%",
+            panes: [
+              { title: "Claude 1", command: "claude", size: "33%" },
+              { title: "Claude 2", command: "claude", size: "34%" },
+              { title: "Claude 3", command: "claude" },
+            ],
+          },
+          {
+            panes: [
+              { title: "Dev Server", command: devCmd(detected), size: "50%" },
+              { title: "Shell" },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  {
+    id: "single-claude",
+    label: "Single Claude",
+    description: "One wide Claude pane on top, dev server, tests, and shell below.",
+    diagram: [
+      "┌─────────────────────────────────────┐",
+      "│             Claude                  │  60%",
+      "├──────────┬──────────┬──────────────┤",
+      "│ Dev Srv  │  Tests   │    Shell     │  40%",
+      "└──────────┴──────────┴──────────────┘",
+    ],
+    buildConfig(name: string, detected?: DetectedInfo): IdeConfig {
+      return {
+        name,
+        rows: [
+          {
+            size: "60%",
+            panes: [{ title: "Claude", command: "claude", focus: true }],
+          },
+          {
+            panes: [
+              { title: "Dev Server", command: devCmd(detected), size: "33%" },
+              { title: "Tests", command: testCmd(detected), size: "34%" },
+              { title: "Shell" },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  {
+    id: "agent-team",
+    label: "Agent Team",
+    description:
+      "Lead + 2 teammates on top, mission control/explorer/preview widgets below with orchestrator.",
+    diagram: [
+      "┌───────────┬───────────┬───────────┐",
+      "│           │           │           │",
+      "│   Lead    │ Teammate1 │ Teammate2 │  70%",
+      "│           │           │           │",
+      "├───────────┼───────────┴───────────┤",
+      "│  Mission  │  Explorer  │ Preview  │  30%",
+      "│  Control  │            │          │",
+      "└───────────┴────────────┴──────────┘",
+    ],
+    buildConfig(name: string, _detected?: DetectedInfo): IdeConfig {
+      return {
+        name,
+        team: { name: name },
+        rows: [
+          {
+            size: "70%",
+            panes: [
+              { title: "Lead", command: "claude", role: "lead", focus: true, size: "33%" },
+              { title: "Teammate 1", command: "claude", role: "teammate", size: "34%" },
+              { title: "Teammate 2", command: "claude", role: "teammate" },
+            ],
+          },
+          {
+            panes: [
+              { title: "Mission Control", type: "mission-control", size: "40%" },
+              { title: "Explorer", type: "explorer", size: "30%" },
+              { title: "Preview", type: "preview" },
+            ],
+          },
+        ],
+        orchestrator: { enabled: true, auto_dispatch: true },
+      };
+    },
+  },
+];
+
+export function getPreset(id: string): LayoutPreset | undefined {
+  return PRESETS.find((p) => p.id === id);
+}

package/src/widgets/tasks/index.tsx

@@ -0,0 +1,129 @@
+import "@opentui/solid/runtime-plugin-support";
+import { parseArgs } from "node:util";
+import { render, useTerminalDimensions } from "@opentui/solid";
+import { RGBA } from "@opentui/core";
+import { createSignal, onMount, onCleanup, Switch, Match } from "solid-js";
+import { createTheme, type RGBA as RGBAType } from "../lib/theme.ts";
+import { watchDirectory } from "../lib/watcher.ts";
+import { loadTasks, ensureTasksDir, getTasksDir, type Task } from "./task-model.ts";
+import { TaskList } from "./task-list.tsx";
+import { TaskDetail } from "./task-detail.tsx";
+import { TaskForm } from "./task-form.tsx";
+
+const { values } = parseArgs({
+  options: {
+    session: { type: "string" },
+    dir: { type: "string" },
+    target: { type: "string" },
+    theme: { type: "string" },
+  },
+});
+
+const session = values.session ?? "";
+const dir = values.dir ?? process.cwd();
+const targetTitle = values.target ?? null;
+const themeConfig = values.theme ? JSON.parse(values.theme) : undefined;
+
+function toRGBA(c: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+type View =
+  | { kind: "list" }
+  | { kind: "detail"; task: Task }
+  | { kind: "form"; mode: "create" | "edit"; task?: Task };
+
+render(
+  () => {
+    const theme = createTheme(themeConfig);
+    const dimensions = useTerminalDimensions();
+    const [tasks, setTasks] = createSignal(loadTasks(dir));
+    const [view, setView] = createSignal<View>({ kind: "list" });
+
+    function reload() {
+      setTasks(loadTasks(dir));
+      // If viewing a task detail, refresh it
+      const v = view();
+      if (v.kind === "detail") {
+        const fresh = loadTasks(dir).find((t) => t.id === v.task.id);
+        if (fresh) setView({ kind: "detail", task: fresh });
+      }
+    }
+
+    // File watcher on .tasks/
+    let stopWatch: (() => Promise<void>) | null = null;
+    onMount(async () => {
+      ensureTasksDir(dir);
+      try {
+        stopWatch = await watchDirectory(getTasksDir(dir), reload, {
+          debounceMs: 300,
+          ignore: [],
+        });
+      } catch {
+        /* watcher unavailable */
+      }
+    });
+    onCleanup(async () => {
+      await stopWatch?.();
+    });
+
+    return (
+      <box
+        width={dimensions().width}
+        height={dimensions().height}
+        backgroundColor={toRGBA(theme.bg)}
+      >
+        <Switch>
+          <Match when={view().kind === "list"}>
+            <TaskList
+              tasks={tasks()}
+              onSelect={(task) => setView({ kind: "detail", task })}
+              onNew={() => setView({ kind: "form", mode: "create" })}
+              onQuit={() => process.exit(0)}
+              theme={theme}
+            />
+          </Match>
+          <Match when={view().kind === "detail"}>
+            <TaskDetail
+              task={(view() as Extract<View, { kind: "detail" }>).task}
+              allTasks={tasks()}
+              session={session}
+              dir={dir}
+              target={targetTitle}
+              onBack={() => setView({ kind: "list" })}
+              onEdit={(task) => setView({ kind: "form", mode: "edit", task })}
+              onTaskUpdate={reload}
+              theme={theme}
+            />
+          </Match>
+          <Match when={view().kind === "form"}>
+            <TaskForm
+              mode={(view() as Extract<View, { kind: "form" }>).mode}
+              task={(view() as Extract<View, { kind: "form" }>).task}
+              dir={dir}
+              onSave={(task) => {
+                reload();
+                setView({ kind: "detail", task });
+              }}
+              onCancel={() => {
+                const v = view();
+                if (v.kind === "form" && v.mode === "edit" && (v as any).task) {
+                  setView({ kind: "detail", task: (v as any).task });
+                } else {
+                  setView({ kind: "list" });
+                }
+              }}
+              theme={theme}
+            />
+          </Match>
+        </Switch>
+      </box>
+    );
+  },
+  {
+    targetFps: 30,
+    exitOnCtrlC: true,
+    useKittyKeyboard: {},
+    autoFocus: false,
+  },
+);

package/src/widgets/tasks/task-detail.tsx

@@ -0,0 +1,309 @@
+import { Show, For } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid";
+import {
+  updateTaskStatus,
+  updateTaskAssignee,
+  isBlocked,
+  type Task,
+  type TaskStatus,
+} from "./task-model.ts";
+import {
+  sendCommand,
+  findPaneByTitle,
+  findPaneByPattern,
+  listSessionPanes,
+} from "../lib/pane-comms.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 statusColor(status: TaskStatus, theme: WidgetTheme): RGBAType {
+  switch (status) {
+    case "in-progress":
+      return theme.gitModified;
+    case "todo":
+      return theme.fgMuted;
+    case "review":
+      return theme.diffHunk;
+    case "done":
+      return theme.gitAdded;
+  }
+}
+
+function statusLabel(status: TaskStatus): string {
+  switch (status) {
+    case "in-progress":
+      return "DOING";
+    case "todo":
+      return "TODO";
+    case "review":
+      return "REVIEW";
+    case "done":
+      return "DONE";
+  }
+}
+
+function priorityDots(priority: number): string {
+  switch (priority) {
+    case 1:
+      return "***";
+    case 2:
+      return "** ";
+    case 3:
+      return "*  ";
+    default:
+      return "   ";
+  }
+}
+
+interface TaskDetailProps {
+  task: Task;
+  allTasks: Task[];
+  session: string;
+  dir: string;
+  target: string | null;
+  onBack: () => void;
+  onEdit: (task: Task) => void;
+  onTaskUpdate: () => void;
+  theme: WidgetTheme;
+}
+
+export function TaskDetail(props: TaskDetailProps) {
+  const dimensions = useTerminalDimensions();
+  const t = () => props.task;
+  const theme = props.theme;
+
+  const canStart = () => t().status === "todo";
+  const canDone = () => t().status === "in-progress" || t().status === "review";
+  const canReview = () => t().status === "in-progress";
+
+  function resolveTargetPane(): string | null {
+    if (!props.session) return null;
+    if (props.target) return findPaneByTitle(props.session, props.target);
+    return findPaneByPattern(props.session, "claude");
+  }
+
+  function findClaudePane(): { id: string; title: string } | null {
+    if (!props.session) return null;
+    const panes = listSessionPanes(props.session);
+    const claude = panes.find(
+      (p) =>
+        p.currentCommand.toLowerCase() === "claude" || p.title.toLowerCase().includes("claude"),
+    );
+    return claude ? { id: claude.id, title: claude.title } : null;
+  }
+
+  useKeyboard((evt) => {
+    if (
+      evt.name === "escape" ||
+      evt.name === "backspace" ||
+      evt.name === "h" ||
+      evt.name === "left"
+    ) {
+      props.onBack();
+      evt.preventDefault();
+    } else if (evt.name === "e") {
+      props.onEdit(t());
+      evt.preventDefault();
+    } else if (evt.name === "s" && canStart()) {
+      updateTaskStatus(props.dir, t().id, "in-progress");
+      props.onTaskUpdate();
+      evt.preventDefault();
+    } else if (evt.name === "d" && canDone()) {
+      updateTaskStatus(props.dir, t().id, "done");
+      props.onTaskUpdate();
+      evt.preventDefault();
+    } else if (evt.name === "v" && canReview()) {
+      updateTaskStatus(props.dir, t().id, "review");
+      props.onTaskUpdate();
+      evt.preventDefault();
+    } else if (evt.name === "a") {
+      const claude = findClaudePane();
+      if (claude) {
+        updateTaskAssignee(props.dir, t().id, claude.title);
+        props.onTaskUpdate();
+      }
+      evt.preventDefault();
+    } else if (evt.name === "c") {
+      const targetId = resolveTargetPane();
+      if (targetId) {
+        const task = t();
+        const prompt = `Work on this task:\n\nTitle: ${task.title}\nDescription: ${task.description}\nPriority: P${task.priority}${task.tags.length > 0 ? `\nTags: ${task.tags.join(", ")}` : ""}`;
+        sendCommand(props.session, targetId, prompt);
+        if (task.status === "todo") {
+          updateTaskStatus(props.dir, task.id, "in-progress");
+          props.onTaskUpdate();
+        }
+      }
+      evt.preventDefault();
+    } else if (evt.name === "q") {
+      props.onBack();
+      evt.preventDefault();
+    }
+  });
+
+  const sColor = () => statusColor(t().status, theme);
+  const blocked = () => isBlocked(t(), props.allTasks);
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Back bar */}
+      <box flexShrink={0} flexDirection="row" justifyContent="space-between">
+        <text fg={toRGBA(theme.fgMuted)} onMouseUp={() => props.onBack()}>
+          {"< Esc:back"}
+        </text>
+        <text fg={toRGBA(theme.fgMuted)}>Task {t().id}</text>
+      </box>
+
+      {/* Title */}
+      <box flexShrink={0} paddingTop={1} flexDirection="row" gap={1}>
+        <text fg={toRGBA(sColor())} flexShrink={0}>
+          {priorityDots(t().priority)}
+        </text>
+        <text fg={toRGBA(theme.fg)} attributes={TextAttributes.BOLD}>
+          {t().title}
+        </text>
+      </box>
+
+      {/* Status + assignee + blocked */}
+      <box flexShrink={0} paddingTop={1} flexDirection="row" gap={2}>
+        <text fg={toRGBA(sColor())}>{statusLabel(t().status)}</text>
+        <Show when={blocked()}>
+          <text fg={toRGBA(theme.gitRemoved)}>BLOCKED</text>
+        </Show>
+        <Show when={t().assignee}>
+          <text fg={toRGBA(theme.fgMuted)}>@{t().assignee}</text>
+        </Show>
+      </box>
+
+      {/* Dependencies */}
+      <Show when={t().depends_on.length > 0}>
+        <box flexShrink={0} flexDirection="row" gap={1}>
+          <text fg={toRGBA(theme.fgMuted)}>depends:</text>
+          <For each={t().depends_on}>
+            {(depId) => {
+              const dep = props.allTasks.find((x) => x.id === depId);
+              const done = dep?.status === "done";
+              return (
+                <text fg={toRGBA(done ? theme.gitAdded : theme.gitRemoved)}>
+                  {depId}
+                  {done ? " ok" : ""}
+                </text>
+              );
+            }}
+          </For>
+        </box>
+      </Show>
+
+      {/* Milestone + specialty + fulfills + tags */}
+      <Show
+        when={t().milestone || t().specialty || t().fulfills?.length > 0 || t().tags.length > 0}
+      >
+        <box flexShrink={0} flexDirection="row" gap={2}>
+          <Show when={t().milestone}>
+            <text fg={toRGBA(theme.diffHunk)}>{t().milestone}</text>
+          </Show>
+          <Show when={t().specialty}>
+            <text fg={toRGBA(theme.accent)}>{t().specialty}</text>
+          </Show>
+          <Show when={t().fulfills?.length > 0}>
+            <text fg={toRGBA(theme.gitModified)}>fulfills: {t().fulfills.join(", ")}</text>
+          </Show>
+          <Show when={t().tags.length > 0}>
+            <text fg={toRGBA(theme.fgMuted)}>{t().tags.join(", ")}</text>
+          </Show>
+        </box>
+      </Show>
+
+      {/* Description */}
+      <box flexShrink={0} paddingTop={1}>
+        <text fg={toRGBA(t().description ? theme.fg : theme.fgMuted)}>
+          {t().description || "(no description)"}
+        </text>
+      </box>
+
+      {/* Proof */}
+      <Show when={t().proof}>
+        <box flexShrink={0} paddingTop={1}>
+          <text fg={toRGBA(theme.fgMuted)}>Proof:</text>
+          <For each={Object.entries(t().proof!)}>
+            {([key, val]) => (
+              <text fg={toRGBA(theme.gitAdded)} paddingLeft={1}>
+                {key}: {typeof val === "object" ? JSON.stringify(val) : String(val)}
+              </text>
+            )}
+          </For>
+        </box>
+      </Show>
+
+      {/* Spacer */}
+      <box flexGrow={1} />
+
+      {/* Separator */}
+      <box flexShrink={0} height={1}>
+        <text fg={toRGBA(theme.border)} wrapMode="none">
+          {"─".repeat(Math.max(0, dimensions().width - 2))}
+        </text>
+      </box>
+
+      {/* Actions footer */}
+      <box flexShrink={0} flexDirection="row" gap={2}>
+        <text fg={toRGBA(theme.fgMuted)} onMouseUp={() => props.onEdit(t())} wrapMode="none">
+          e:edit
+        </text>
+        <Show when={canStart()}>
+          <text
+            fg={toRGBA(theme.fgMuted)}
+            onMouseUp={() => {
+              updateTaskStatus(props.dir, t().id, "in-progress");
+              props.onTaskUpdate();
+            }}
+            wrapMode="none"
+          >
+            s:start
+          </text>
+        </Show>
+        <Show when={canReview()}>
+          <text
+            fg={toRGBA(theme.fgMuted)}
+            onMouseUp={() => {
+              updateTaskStatus(props.dir, t().id, "review");
+              props.onTaskUpdate();
+            }}
+            wrapMode="none"
+          >
+            v:review
+          </text>
+        </Show>
+        <Show when={canDone()}>
+          <text
+            fg={toRGBA(theme.fgMuted)}
+            onMouseUp={() => {
+              updateTaskStatus(props.dir, t().id, "done");
+              props.onTaskUpdate();
+            }}
+            wrapMode="none"
+          >
+            d:done
+          </text>
+        </Show>
+        <text
+          fg={toRGBA(theme.fgMuted)}
+          onMouseUp={() => {
+            const claude = findClaudePane();
+            if (claude) {
+              updateTaskAssignee(props.dir, t().id, claude.title);
+              props.onTaskUpdate();
+            }
+          }}
+          wrapMode="none"
+        >
+          a:assign
+        </text>
+      </box>
+    </box>
+  );
+}