tmux-ide 2.6.0 → 2.7.0

package/packages/daemon/src/widgets/setup/review-panel.tsx

@@ -0,0 +1,140 @@
+import { createSignal, createMemo, Show } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import yaml from "js-yaml";
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+import { validateConfig } from "../../validate.ts";
+import { writeConfig } from "../../lib/yaml-io.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);
+}
+
+export type ReviewAction = "write" | "launch";
+
+interface ReviewPanelProps {
+  config: IdeConfig;
+  dir: string;
+  theme: WidgetTheme;
+  onDone: (action: ReviewAction) => void;
+  onBack: () => void;
+}
+
+export function ReviewPanel(props: ReviewPanelProps) {
+  const [selectedAction, setSelectedAction] = createSignal<0 | 1>(0);
+
+  const theme = props.theme;
+
+  const yamlPreview = createMemo(() =>
+    yaml.dump(props.config, { lineWidth: -1, noRefs: true, quotingType: '"' }),
+  );
+
+  const errors = createMemo(() => validateConfig(props.config));
+  const isValid = createMemo(() => errors().length === 0);
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape") {
+      props.onBack();
+      evt.preventDefault();
+      return;
+    }
+
+    if (evt.name === "j" || evt.name === "down" || evt.name === "tab") {
+      setSelectedAction((prev) => (prev === 0 ? 1 : 0) as 0 | 1);
+      evt.preventDefault();
+    } else if (evt.name === "k" || evt.name === "up") {
+      setSelectedAction((prev) => (prev === 0 ? 1 : 0) as 0 | 1);
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      if (!isValid()) return;
+      writeConfig(props.dir, props.config);
+      props.onDone(selectedAction() === 0 ? "write" : "launch");
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Review Configuration
+        </text>
+      </box>
+
+      {/* YAML preview */}
+      <box flexGrow={1} flexShrink={1}>
+        <text fg={toRGBA(theme.fgMuted)} attributes={TextAttributes.BOLD}>
+          ide.yml preview:
+        </text>
+        <scrollbox>
+          <text fg={toRGBA(theme.fg)}>{yamlPreview()}</text>
+        </scrollbox>
+      </box>
+
+      {/* Validation status */}
+      <box flexShrink={0} paddingTop={1} paddingBottom={1}>
+        <Show
+          when={isValid()}
+          fallback={
+            <box>
+              <text fg={RGBA.fromInts(255, 80, 80, 255)} attributes={TextAttributes.BOLD}>
+                Validation errors:
+              </text>
+              {errors().map((e) => (
+                <text fg={RGBA.fromInts(255, 80, 80, 255)}> - {e}</text>
+              ))}
+            </box>
+          }
+        >
+          <text fg={toRGBA(theme.gitAdded)} attributes={TextAttributes.BOLD}>
+            Config is valid
+          </text>
+        </Show>
+      </box>
+
+      {/* Action buttons */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text
+          fg={toRGBA(selectedAction() === 0 ? theme.accent : theme.fgMuted)}
+          attributes={selectedAction() === 0 ? TextAttributes.BOLD : undefined}
+          onMouseDown={() => setSelectedAction(0)}
+          onMouseUp={() => {
+            if (!isValid()) return;
+            writeConfig(props.dir, props.config);
+            props.onDone("write");
+          }}
+        >
+          {selectedAction() === 0 ? ">" : " "} [ Write ide.yml ]
+        </text>
+        <text
+          fg={toRGBA(selectedAction() === 1 ? theme.accent : theme.fgMuted)}
+          attributes={selectedAction() === 1 ? TextAttributes.BOLD : undefined}
+          onMouseDown={() => setSelectedAction(1)}
+          onMouseUp={() => {
+            if (!isValid()) return;
+            writeConfig(props.dir, props.config);
+            props.onDone("launch");
+          }}
+        >
+          {selectedAction() === 1 ? ">" : " "} [ Write & Launch ]
+        </text>
+      </box>
+
+      {/* Footer */}
+      <box flexShrink={0}>
+        <box flexShrink={0} height={1}>
+          <text fg={toRGBA(theme.border)} wrapMode="none">
+            {"─".repeat(40)}
+          </text>
+        </box>
+        <box flexDirection="row" gap={2}>
+          <text fg={toRGBA(theme.fgMuted)}>j/k:select action</text>
+          <text fg={toRGBA(theme.fgMuted)}>Enter:confirm</text>
+          <text fg={toRGBA(theme.fgMuted)}>Esc:back</text>
+        </box>
+      </box>
+    </box>
+  );
+}

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