@akiojin/gwt 4.10.0 → 4.12.0

package/src/cli/ui/components/solid/WizardSteps.tsx

@@ -0,0 +1,736 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+import type { SelectRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import { createEffect, createResource, createSignal } from "solid-js";
+import { SelectInput, type SelectInputItem } from "./SelectInput.js";
+import { TextInput } from "./TextInput.js";
+import { getModelOptions } from "../../utils/modelOptions.js";
+import type { CodingAgentId } from "../../types.js";
+import { useWizardScroll } from "./WizardPopup.js";
+import { getAgentTerminalColor } from "../../../../utils/coding-agent-colors.js";
+import { getVersionCache } from "../../utils/versionCache.js";
+import { selectionStyle } from "../../core/theme.js";
+import {
+  fetchInstalledVersionForAgent,
+  versionInfoToSelectItem,
+  createInstalledOption,
+} from "../../utils/versionFetcher.js";
+
+/**
+ * WizardSteps - ウィザードの各ステップコンポーネント
+ *
+ * OpenTUI の SelectInput/TextInput を活用した実装
+ */
+
+export interface StepProps {
+  onBack: () => void;
+  focused?: boolean;
+}
+
+const useEnsureSelectionVisible = (options: {
+  getSelectedIndex: () => number;
+  getItemCount: () => number;
+  getSelectRef: () => SelectRenderable | undefined;
+  linesPerItem?: number;
+  getFocused?: () => boolean | undefined;
+}) => {
+  const scroll = useWizardScroll();
+  const ensureIndexVisible = (index: number) => {
+    if (!scroll) {
+      return;
+    }
+    const selectRef = options.getSelectRef();
+    if (!selectRef) {
+      return;
+    }
+    const linesPerItem = Math.max(1, options.linesPerItem ?? 1);
+    const startLine = selectRef.y + Math.max(0, index) * linesPerItem;
+    const endLine = startLine + Math.max(0, linesPerItem - 1);
+    scroll.ensureLineVisible(startLine);
+    if (endLine !== startLine) {
+      scroll.ensureLineVisible(endLine);
+    }
+  };
+
+  createEffect(() => {
+    if (options.getFocused && options.getFocused() === false) {
+      return;
+    }
+    const itemCount = options.getItemCount();
+    if (itemCount <= 0) {
+      return;
+    }
+    const safeIndex = Math.min(
+      Math.max(options.getSelectedIndex(), 0),
+      itemCount - 1,
+    );
+    ensureIndexVisible(safeIndex);
+  });
+
+  useKeyboard((key) => {
+    if (options.getFocused && options.getFocused() === false) {
+      return;
+    }
+    if (!scroll) {
+      return;
+    }
+    if (key.name !== "up" && key.name !== "down") {
+      return;
+    }
+    const itemCount = options.getItemCount();
+    if (itemCount <= 0) {
+      return;
+    }
+    const currentIndex = Math.min(
+      Math.max(options.getSelectedIndex(), 0),
+      itemCount - 1,
+    );
+    const nextIndex =
+      key.name === "up"
+        ? Math.max(0, currentIndex - 1)
+        : Math.min(itemCount - 1, currentIndex + 1);
+    if (nextIndex === currentIndex) {
+      return;
+    }
+    ensureIndexVisible(nextIndex);
+  });
+};
+
+// アクション選択ステップ（既存を開く / 新規作成）
+export type BranchAction = "open-existing" | "create-new";
+
+export interface ActionSelectStepProps extends StepProps {
+  branchName: string;
+  onSelect: (action: BranchAction) => void;
+}
+
+const ACTION_OPTIONS: SelectInputItem[] = [
+  {
+    label: "Open existing worktree",
+    value: "open-existing",
+    description: "Open the worktree for this branch",
+  },
+  {
+    label: "Create new branch",
+    value: "create-new",
+    description: "Create a new branch based on this one",
+  },
+];
+
+export function ActionSelectStep(props: ActionSelectStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+  useEnsureSelectionVisible({
+    getSelectedIndex: selectedIndex,
+    getItemCount: () => ACTION_OPTIONS.length,
+    getFocused: () => props.focused,
+    getSelectRef: selectRef,
+  });
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = ACTION_OPTIONS.findIndex(
+      (candidate) => candidate.value === item.value,
+    );
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Branch: {props.branchName}
+      </text>
+      <text> </text>
+      <text>What would you like to do?</text>
+      <text> </text>
+      <SelectInput
+        items={ACTION_OPTIONS}
+        onSelect={(item) => props.onSelect(item.value as BranchAction)}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Cancel</text>
+    </box>
+  );
+}
+
+// T405: ブランチタイプ選択ステップ
+export interface BranchTypeStepProps extends StepProps {
+  onSelect: (type: string) => void;
+}
+
+const BRANCH_TYPES: SelectInputItem[] = [
+  { label: "feature/", value: "feature/", description: "New feature branch" },
+  { label: "bugfix/", value: "bugfix/", description: "Bug fix branch" },
+  { label: "hotfix/", value: "hotfix/", description: "Hotfix branch" },
+  { label: "release/", value: "release/", description: "Release branch" },
+];
+
+export function BranchTypeStep(props: BranchTypeStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+  useEnsureSelectionVisible({
+    getSelectedIndex: selectedIndex,
+    getItemCount: () => BRANCH_TYPES.length,
+    getFocused: () => props.focused,
+    getSelectRef: selectRef,
+  });
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = BRANCH_TYPES.findIndex(
+      (candidate) => candidate.value === item.value,
+    );
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Select branch type:
+      </text>
+      <text> </text>
+      <SelectInput
+        items={BRANCH_TYPES}
+        onSelect={(item) => props.onSelect(item.value)}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Back</text>
+    </box>
+  );
+}
+
+// T406: ブランチ名入力ステップ
+export interface BranchNameStepProps extends StepProps {
+  branchType: string;
+  onSubmit: (name: string) => void;
+}
+
+export function BranchNameStep(props: BranchNameStepProps) {
+  const [name, setName] = createSignal("");
+  const scroll = useWizardScroll();
+
+  createEffect(() => {
+    if (props.focused === false) {
+      return;
+    }
+    if (!scroll) {
+      return;
+    }
+    scroll.ensureLineVisible(2);
+  });
+
+  useKeyboard((key) => {
+    if (props.focused === false) {
+      return;
+    }
+    if (!scroll) {
+      return;
+    }
+    if (key.name === "up") {
+      if (scroll.scrollByLines(-1)) {
+        key.preventDefault();
+      }
+      return;
+    }
+    if (key.name === "down") {
+      if (scroll.scrollByLines(1)) {
+        key.preventDefault();
+      }
+    }
+  });
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Branch name: {props.branchType}
+      </text>
+      <text> </text>
+      <TextInput
+        value={name()}
+        onChange={setName}
+        onSubmit={(value) => props.onSubmit(value)}
+        placeholder="Enter branch name..."
+        focused={props.focused ?? true}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Confirm [Esc] Back</text>
+    </box>
+  );
+}
+
+// T407: コーディングエージェント選択ステップ
+export interface AgentSelectStepProps extends StepProps {
+  onSelect: (agentId: string) => void;
+}
+
+interface AgentItem {
+  label: string;
+  value: string;
+  description: string;
+}
+
+const AGENTS: AgentItem[] = [
+  {
+    label: "Claude Code",
+    value: "claude-code",
+    description: "Anthropic Claude Code",
+  },
+  { label: "Codex CLI", value: "codex-cli", description: "OpenAI Codex CLI" },
+  {
+    label: "Gemini CLI",
+    value: "gemini-cli",
+    description: "Google Gemini CLI",
+  },
+  {
+    label: "OpenCode",
+    value: "opencode",
+    description: "OpenCode AI",
+  },
+];
+
+export function AgentSelectStep(props: AgentSelectStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const scroll = useWizardScroll();
+
+  // Keyboard navigation
+  useKeyboard((key) => {
+    if (props.focused === false) return;
+
+    if (key.name === "up") {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    } else if (key.name === "down") {
+      setSelectedIndex((i) => Math.min(AGENTS.length - 1, i + 1));
+    } else if (key.name === "return") {
+      const agent = AGENTS[selectedIndex()];
+      if (agent) {
+        props.onSelect(agent.value);
+      }
+    }
+  });
+
+  // Ensure selected item is visible in scroll container
+  createEffect(() => {
+    if (!scroll || props.focused === false) return;
+    // Header line (title) + empty line + selected index
+    const lineOffset = 2 + selectedIndex();
+    scroll.ensureLineVisible(lineOffset);
+  });
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Select coding agent:
+      </text>
+      <text> </text>
+      {AGENTS.map((agent, index) => {
+        const isSelected = () => selectedIndex() === index;
+        const agentColor = getAgentTerminalColor(agent.value);
+        return isSelected() ? (
+          <text bg={selectionStyle.bg} fg={selectionStyle.fg}>
+            {"> "}
+            {agent.label}
+          </text>
+        ) : (
+          <text fg={agentColor}>
+            {"  "}
+            {agent.label}
+          </text>
+        );
+      })}
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Back</text>
+    </box>
+  );
+}
+
+// T408: モデル選択ステップ
+export interface ModelSelectStepProps extends StepProps {
+  agentId: CodingAgentId;
+  onSelect: (model: string) => void;
+}
+
+function getModelItems(agentId: CodingAgentId): SelectInputItem[] {
+  const options = getModelOptions(agentId);
+  return options.map((opt) => {
+    const item: SelectInputItem = {
+      label: opt.label,
+      value: opt.id,
+    };
+    if (opt.description !== undefined) {
+      item.description = opt.description;
+    }
+    return item;
+  });
+}
+
+export function ModelSelectStep(props: ModelSelectStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+  const models = () => getModelItems(props.agentId);
+  useEnsureSelectionVisible({
+    getSelectedIndex: selectedIndex,
+    getItemCount: () => models().length,
+    getFocused: () => props.focused,
+    getSelectRef: selectRef,
+  });
+
+  createEffect(() => {
+    const count = models().length;
+    if (count <= 0) {
+      setSelectedIndex(0);
+      return;
+    }
+    const maxIndex = count - 1;
+    if (selectedIndex() > maxIndex) {
+      setSelectedIndex(maxIndex);
+    }
+  });
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = models().findIndex(
+      (candidate) => candidate.value === item.value,
+    );
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Select Model:
+      </text>
+      <text> </text>
+      <SelectInput
+        items={models()}
+        onSelect={(item) => props.onSelect(item.value)}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Back</text>
+    </box>
+  );
+}
+
+// T409: 推論レベル選択ステップ（Codexのみ）
+export interface ReasoningLevelStepProps extends StepProps {
+  onSelect: (level: string) => void;
+}
+
+const REASONING_LEVELS: SelectInputItem[] = [
+  { label: "low", value: "low", description: "Faster, less thorough" },
+  { label: "medium", value: "medium", description: "Balanced" },
+  { label: "high", value: "high", description: "Slower, more thorough" },
+  { label: "xhigh", value: "xhigh", description: "Extended high reasoning" },
+];
+
+export function ReasoningLevelStep(props: ReasoningLevelStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+  useEnsureSelectionVisible({
+    getSelectedIndex: selectedIndex,
+    getItemCount: () => REASONING_LEVELS.length,
+    getFocused: () => props.focused,
+    getSelectRef: selectRef,
+  });
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = REASONING_LEVELS.findIndex(
+      (candidate) => candidate.value === item.value,
+    );
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Select reasoning level:
+      </text>
+      <text> </text>
+      <SelectInput
+        items={REASONING_LEVELS}
+        onSelect={(item) => props.onSelect(item.value)}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Back</text>
+    </box>
+  );
+}
+
+// T410: 実行モード選択ステップ
+export interface ExecutionModeStepProps extends StepProps {
+  onSelect: (mode: string) => void;
+}
+
+const EXECUTION_MODES: SelectInputItem[] = [
+  { label: "Normal", value: "normal", description: "Start a new session" },
+  {
+    label: "Continue",
+    value: "continue",
+    description: "Continue from last session",
+  },
+  {
+    label: "Resume",
+    value: "resume",
+    description: "Resume a specific session",
+  },
+];
+
+export function ExecutionModeStep(props: ExecutionModeStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+  useEnsureSelectionVisible({
+    getSelectedIndex: selectedIndex,
+    getItemCount: () => EXECUTION_MODES.length,
+    getFocused: () => props.focused,
+    getSelectRef: selectRef,
+  });
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = EXECUTION_MODES.findIndex(
+      (candidate) => candidate.value === item.value,
+    );
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Select execution mode:
+      </text>
+      <text> </text>
+      <SelectInput
+        items={EXECUTION_MODES}
+        onSelect={(item) => props.onSelect(item.value)}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Back</text>
+    </box>
+  );
+}
+
+// T411: 権限スキップ確認ステップ
+export interface SkipPermissionsStepProps extends StepProps {
+  onSelect: (skip: boolean) => void;
+}
+
+const SKIP_OPTIONS: SelectInputItem[] = [
+  { label: "Yes", value: "true", description: "Skip permission prompts" },
+  { label: "No", value: "false", description: "Show permission prompts" },
+];
+
+export function SkipPermissionsStep(props: SkipPermissionsStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+  useEnsureSelectionVisible({
+    getSelectedIndex: selectedIndex,
+    getItemCount: () => SKIP_OPTIONS.length,
+    getFocused: () => props.focused,
+    getSelectRef: selectRef,
+  });
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = SKIP_OPTIONS.findIndex(
+      (candidate) => candidate.value === item.value,
+    );
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Skip permission prompts?
+      </text>
+      <text> </text>
+      <SelectInput
+        items={SKIP_OPTIONS}
+        onSelect={(item) => props.onSelect(item.value === "true")}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Back</text>
+    </box>
+  );
+}
+
+// バージョン選択ステップ
+export interface VersionSelectStepProps extends StepProps {
+  agentId: CodingAgentId;
+  onSelect: (version: string) => void;
+}
+
+// latest オプション（常に表示）
+const LATEST_OPTION: SelectInputItem = {
+  label: "latest",
+  value: "latest",
+  description: "Always fetch latest version",
+};
+
+export function VersionSelectStep(props: VersionSelectStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+
+  // FR-029: Use cached versions from startup prefetch (no npm registry re-access)
+  const cachedVersions = () => {
+    const cached = getVersionCache(props.agentId);
+    if (!cached) {
+      return []; // FR-031: Fallback to empty, UI will show "latest" only
+    }
+    return cached.map(versionInfoToSelectItem);
+  };
+
+  // インストール済み情報を取得 (still needs async fetch for local command check)
+  const [installedOption] = createResource(
+    () => props.agentId,
+    async (agentId: string) => {
+      const installed = await fetchInstalledVersionForAgent(agentId);
+      return installed ? createInstalledOption(installed) : null;
+    },
+  );
+
+  // 全オプション（installed + latest + cached versions）
+  const allOptions = (): SelectInputItem[] => {
+    const options: SelectInputItem[] = [];
+
+    // installedオプション（インストール済みの場合のみ）
+    const installed = installedOption();
+    if (installed) {
+      options.push(installed);
+    }
+
+    // latestオプション（常に表示）
+    options.push(LATEST_OPTION);
+
+    // FR-029: Use cached versions (no npm registry re-access)
+    const cached = cachedVersions();
+    options.push(...cached);
+
+    return options;
+  };
+
+  useEnsureSelectionVisible({
+    getSelectedIndex: selectedIndex,
+    getItemCount: () => allOptions().length,
+    getFocused: () => props.focused,
+    getSelectRef: selectRef,
+  });
+
+  createEffect(() => {
+    const count = allOptions().length;
+    if (count <= 0) {
+      setSelectedIndex(0);
+      return;
+    }
+    const maxIndex = count - 1;
+    if (selectedIndex() > maxIndex) {
+      setSelectedIndex(maxIndex);
+    }
+  });
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = allOptions().findIndex(
+      (candidate) => candidate.value === item.value,
+    );
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  const statusText = () => {
+    // FR-029: No loading state since we use cached versions from startup
+    // FR-031: Show message if cache is empty (failed to fetch at startup)
+    const cached = cachedVersions();
+    if (cached.length === 0) {
+      return "Version list unavailable (using latest)";
+    }
+    return null;
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Select version:
+      </text>
+      {statusText() && (
+        <text attributes={TextAttributes.DIM}>{statusText()}</text>
+      )}
+      <text> </text>
+      <SelectInput
+        items={allOptions()}
+        onSelect={(item) => props.onSelect(item.value)}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Select [Esc] Back</text>
+    </box>
+  );
+}