@akiojin/gwt 4.10.0 → 4.12.0

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

@@ -0,0 +1,92 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+import type { JSX } from "solid-js";
+import type { BranchViewMode, Statistics } from "../../types.js";
+
+export interface StatsProps {
+  stats: Statistics;
+  separator?: string;
+  lastUpdated?: Date | null;
+  viewMode?: BranchViewMode;
+}
+
+const formatRelativeTime = (date: Date): string => {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+
+  if (diffSec < 60) {
+    return `${diffSec}s ago`;
+  }
+
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) {
+    return `${diffMin}m ago`;
+  }
+
+  const diffHour = Math.floor(diffMin / 60);
+  return `${diffHour}h ago`;
+};
+
+const formatViewModeLabel = (mode: BranchViewMode): string => {
+  switch (mode) {
+    case "all":
+      return "All";
+    case "local":
+      return "Local";
+    case "remote":
+      return "Remote";
+  }
+};
+
+export function Stats({
+  stats,
+  separator = "  ",
+  lastUpdated = null,
+  viewMode,
+}: StatsProps) {
+  const segments: JSX.Element[] = [];
+  const appendSeparator = () => {
+    segments.push(<text attributes={TextAttributes.DIM}>{separator}</text>);
+  };
+
+  if (viewMode) {
+    segments.push(<text attributes={TextAttributes.DIM}>Mode: </text>);
+    segments.push(
+      <text fg="white" attributes={TextAttributes.BOLD}>
+        {formatViewModeLabel(viewMode)}
+      </text>,
+    );
+    if (stats || lastUpdated) {
+      appendSeparator();
+    }
+  }
+
+  const items = [
+    { label: "Local", value: stats.localCount, color: "cyan" },
+    { label: "Remote", value: stats.remoteCount, color: "green" },
+    { label: "Worktrees", value: stats.worktreeCount, color: "yellow" },
+    { label: "Changes", value: stats.changesCount, color: "magenta" },
+  ];
+
+  items.forEach((item, index) => {
+    segments.push(
+      <text attributes={TextAttributes.DIM}>{`${item.label}: `}</text>,
+    );
+    segments.push(
+      <text fg={item.color} attributes={TextAttributes.BOLD}>
+        {item.value}
+      </text>,
+    );
+    if (index < items.length - 1 || lastUpdated) {
+      appendSeparator();
+    }
+  });
+
+  if (lastUpdated) {
+    segments.push(<text attributes={TextAttributes.DIM}>Updated: </text>);
+    segments.push(<text fg="gray">{formatRelativeTime(lastUpdated)}</text>);
+  }
+
+  return <box flexDirection="row">{segments}</box>;
+}

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

@@ -0,0 +1,49 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+
+export interface TextInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onInput?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  focused?: boolean;
+  width?: number;
+}
+
+export function TextInput({
+  value,
+  onChange,
+  onInput,
+  onSubmit,
+  placeholder = "",
+  label,
+  focused,
+  width,
+}: TextInputProps) {
+  const inputWidth =
+    width ?? Math.max(10, value.length + 1, placeholder.length + 1);
+  const isFocused = focused ?? true;
+
+  return (
+    <box flexDirection="column">
+      {label && (
+        <box height={1}>
+          <text attributes={TextAttributes.DIM}>{label}</text>
+        </box>
+      )}
+      <box height={1}>
+        <input
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          focused={isFocused}
+          width={inputWidth}
+          {...(onInput ? { onInput } : {})}
+          {...(onSubmit ? { onSubmit } : {})}
+        />
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,393 @@
+/** @jsxImportSource @opentui/solid */
+import { createSignal, createEffect, createMemo, Show } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import type { ToolSessionEntry } from "../../../../config/index.js";
+import type { CodingAgentId, InferenceLevel } from "../../types.js";
+import { WizardPopup } from "./WizardPopup.js";
+import { QuickStartStep } from "./QuickStartStep.js";
+import {
+  ActionSelectStep,
+  type BranchAction,
+  BranchTypeStep,
+  BranchNameStep,
+  AgentSelectStep,
+  VersionSelectStep,
+  ModelSelectStep,
+  ReasoningLevelStep,
+  ExecutionModeStep,
+  SkipPermissionsStep,
+} from "./WizardSteps.js";
+
+export type ExecutionMode = "normal" | "continue" | "resume";
+
+export interface WizardResult {
+  tool: CodingAgentId;
+  model: string;
+  reasoningLevel?: InferenceLevel;
+  mode: ExecutionMode;
+  skipPermissions: boolean;
+  // For new branch creation
+  branchType?: string;
+  branchName?: string;
+  // For action selection
+  isNewBranch?: boolean;
+  // For version selection
+  toolVersion?: string | null;
+}
+
+export interface WizardControllerProps {
+  visible: boolean;
+  selectedBranchName: string;
+  history: ToolSessionEntry[];
+  onClose: () => void;
+  onComplete: (result: WizardResult) => void;
+  onResume: (entry: ToolSessionEntry) => void;
+  onStartNew: (entry: ToolSessionEntry) => void;
+}
+
+type WizardStep =
+  | "action-select"
+  | "quick-start"
+  | "branch-type"
+  | "branch-name"
+  | "agent-select"
+  | "version-select"
+  | "model-select"
+  | "reasoning-level"
+  | "execution-mode"
+  | "skip-permissions";
+
+/**
+ * WizardController - ウィザードフロー全体を管理するコントローラー
+ *
+ * FR-047: ステップを同一ポップアップ内で切り替え
+ * FR-050: 履歴がある場合はクイック選択を表示
+ * FR-051: 「Choose different settings...」で設定選択フローへ
+ * FR-056: Codex CLI 選択時のみ推論レベル選択を表示
+ * FR-059: Escape キーによる前ステップへの戻り
+ */
+export function WizardController(props: WizardControllerProps) {
+  const [step, setStep] = createSignal<WizardStep>(getInitialStep());
+  const [stepHistory, setStepHistory] = createSignal<WizardStep[]>([]);
+
+  // Wizard state
+  const [isCreatingNewBranch, setIsCreatingNewBranch] =
+    createSignal<boolean>(false);
+  const [branchType, setBranchType] = createSignal<string>("");
+  const [branchName, setBranchName] = createSignal<string>("");
+  const [selectedAgent, setSelectedAgent] = createSignal<CodingAgentId | null>(
+    null,
+  );
+  const [selectedVersion, setSelectedVersion] = createSignal<string | null>(
+    null,
+  );
+  const [selectedModel, setSelectedModel] = createSignal<string>("");
+  const [reasoningLevel, setReasoningLevel] = createSignal<
+    InferenceLevel | undefined
+  >(undefined);
+  const [executionMode, setExecutionMode] =
+    createSignal<ExecutionMode>("normal");
+
+  // キー伝播防止: ステップ遷移直後は focused を無効にする
+  const [isTransitioning, setIsTransitioning] = createSignal(true);
+
+  // Reset state when wizard becomes visible
+  function getInitialStep(): WizardStep {
+    // 履歴がある場合はクイック選択を表示
+    if (props.history.length > 0) {
+      return "quick-start";
+    }
+    // 履歴がない場合はアクション選択から開始
+    return "action-select";
+  }
+
+  // Watch for visibility changes to reset state
+  const resetWizard = () => {
+    setStep(getInitialStep());
+    setStepHistory([]);
+    setIsCreatingNewBranch(false);
+    setBranchType("");
+    setBranchName("");
+    setSelectedAgent(null);
+    setSelectedVersion(null);
+    setSelectedModel("");
+    setReasoningLevel(undefined);
+    setExecutionMode("normal");
+  };
+
+  // ステップ遷移時にキー伝搬防止を有効化するヘルパー
+  const startTransition = () => {
+    setIsTransitioning(true);
+    // 50ms後にフォーカスを有効化（キー伝搬を防止しつつ、応答性を維持）
+    setTimeout(() => setIsTransitioning(false), 50);
+  };
+
+  // Reset wizard when it becomes visible
+  let prevVisible = false;
+  createEffect(() => {
+    const visible = props.visible;
+    if (visible && !prevVisible) {
+      resetWizard();
+      // キー伝播防止: 最初の数フレームでは focused を無効にする
+      // Enter キーが複数フレームにわたって伝播する可能性があるため、長めに設定
+      startTransition();
+    }
+    prevVisible = visible;
+  });
+
+  // Handle keyboard events for step navigation
+  // T412: ステップ遷移直後は Enter キーをブロックして伝播を防ぐ
+  useKeyboard((key) => {
+    if (!props.visible) return;
+    // ステップ遷移直後は Enter キーを無視（ステップ間のキー伝播防止）
+    if (isTransitioning() && key.name === "return") {
+      return;
+    }
+    if (key.name === "escape") {
+      goBack();
+    }
+  });
+
+  const goToStep = (nextStep: WizardStep) => {
+    setStepHistory((prev) => [...prev, step()]);
+    setStep(nextStep);
+    // ステップ遷移時にキー伝搬防止を有効化
+    startTransition();
+  };
+
+  const goBack = () => {
+    const history = stepHistory();
+    if (history.length === 0) {
+      props.onClose();
+      return;
+    }
+    const previousStep = history[history.length - 1] ?? "agent-select";
+    setStepHistory(history.slice(0, -1));
+    setStep(previousStep);
+    // ステップ遷移時にキー伝搬防止を有効化
+    startTransition();
+  };
+
+  // Determine if reasoning level step is needed
+  const needsReasoningLevel = createMemo(() => {
+    return selectedAgent() === "codex-cli";
+  });
+
+  // Step handlers
+  const handleActionSelect = (action: BranchAction) => {
+    if (action === "create-new") {
+      setIsCreatingNewBranch(true);
+      goToStep("branch-type");
+    } else {
+      setIsCreatingNewBranch(false);
+      goToStep("agent-select");
+    }
+  };
+
+  const handleQuickStartResume = (entry: ToolSessionEntry) => {
+    props.onResume(entry);
+  };
+
+  const handleQuickStartNew = (entry: ToolSessionEntry) => {
+    props.onStartNew(entry);
+  };
+
+  const handleChooseDifferent = () => {
+    // クイック選択から「別の設定を選択」の場合はアクション選択へ戻る
+    goToStep("action-select");
+  };
+
+  const handleBranchTypeSelect = (type: string) => {
+    setBranchType(type);
+    goToStep("branch-name");
+  };
+
+  const handleBranchNameSubmit = (name: string) => {
+    setBranchName(name);
+    goToStep("agent-select");
+  };
+
+  const handleAgentSelect = (agentId: string) => {
+    setSelectedAgent(agentId as CodingAgentId);
+    goToStep("version-select");
+  };
+
+  const handleVersionSelect = (version: string) => {
+    // "installed" を明示的に保存し、未指定時は後方互換で "latest" にフォールバックできるようにする
+    setSelectedVersion(version);
+    goToStep("model-select");
+  };
+
+  const handleModelSelect = (model: string) => {
+    setSelectedModel(model);
+    if (needsReasoningLevel()) {
+      goToStep("reasoning-level");
+    } else {
+      goToStep("execution-mode");
+    }
+  };
+
+  const handleReasoningLevelSelect = (level: string) => {
+    setReasoningLevel(level as InferenceLevel);
+    goToStep("execution-mode");
+  };
+
+  const handleExecutionModeSelect = (mode: string) => {
+    setExecutionMode(mode as ExecutionMode);
+    goToStep("skip-permissions");
+  };
+
+  const handleSkipPermissionsSelect = (skip: boolean) => {
+    const agent = selectedAgent();
+    if (!agent) return;
+
+    const currentReasoningLevel = reasoningLevel();
+    const currentBranchType = branchType();
+    const currentBranchName = branchName();
+    const creatingNew = isCreatingNewBranch();
+    const currentVersion = selectedVersion();
+
+    const result: WizardResult = {
+      tool: agent,
+      model: selectedModel(),
+      mode: executionMode(),
+      skipPermissions: skip,
+      isNewBranch: creatingNew,
+      toolVersion: currentVersion,
+      ...(needsReasoningLevel() && currentReasoningLevel !== undefined
+        ? { reasoningLevel: currentReasoningLevel }
+        : {}),
+      ...(creatingNew
+        ? { branchType: currentBranchType, branchName: currentBranchName }
+        : {}),
+    };
+
+    props.onComplete(result);
+  };
+
+  const renderStep = () => {
+    const currentStep = step();
+    const focused = !isTransitioning();
+
+    if (currentStep === "action-select") {
+      return (
+        <ActionSelectStep
+          branchName={props.selectedBranchName}
+          onSelect={handleActionSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "quick-start") {
+      return (
+        <QuickStartStep
+          history={props.history}
+          onResume={handleQuickStartResume}
+          onStartNew={handleQuickStartNew}
+          onChooseDifferent={handleChooseDifferent}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "branch-type") {
+      return (
+        <BranchTypeStep
+          onSelect={handleBranchTypeSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "branch-name") {
+      return (
+        <BranchNameStep
+          branchType={branchType()}
+          onSubmit={handleBranchNameSubmit}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "agent-select") {
+      return (
+        <AgentSelectStep
+          onSelect={handleAgentSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "version-select") {
+      return (
+        <VersionSelectStep
+          agentId={selectedAgent() ?? "claude-code"}
+          onSelect={handleVersionSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "model-select") {
+      return (
+        <ModelSelectStep
+          agentId={selectedAgent() ?? "claude-code"}
+          onSelect={handleModelSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "reasoning-level") {
+      return (
+        <ReasoningLevelStep
+          onSelect={handleReasoningLevelSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "execution-mode") {
+      return (
+        <ExecutionModeStep
+          onSelect={handleExecutionModeSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    if (currentStep === "skip-permissions") {
+      return (
+        <SkipPermissionsStep
+          onSelect={handleSkipPermissionsSelect}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Show when={props.visible}>
+      <WizardPopup
+        visible={props.visible}
+        onClose={props.onClose}
+        onComplete={() => {}}
+      >
+        {renderStep()}
+      </WizardPopup>
+    </Show>
+  );
+}

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

@@ -0,0 +1,135 @@
+/** @jsxImportSource @opentui/solid */
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { createContext, Show, useContext } from "solid-js";
+import type { JSX } from "solid-js";
+
+export interface WizardPopupProps {
+  visible: boolean;
+  onClose: () => void;
+  onComplete: (result: unknown) => void;
+  children?: JSX.Element;
+}
+
+interface WizardScrollContextValue {
+  scrollByLines: (delta: number) => boolean;
+  ensureLineVisible: (lineIndex: number) => boolean;
+  canScrollUp: () => boolean;
+  canScrollDown: () => boolean;
+}
+
+const WizardScrollContext = createContext<WizardScrollContextValue | null>(
+  null,
+);
+
+export const useWizardScroll = () => useContext(WizardScrollContext);
+
+/**
+ * WizardPopup - ブランチ選択後のウィザードポップアップコンテナ
+ *
+ * FR-044: ブランチ選択時にレイヤー表示
+ * FR-045: 背景を不透明オーバーレイで覆う
+ * FR-046: z-indexで前面表示
+ *
+ * ステップ管理とキーボード処理はWizardControllerで行う
+ */
+export function WizardPopup(props: WizardPopupProps) {
+  let scrollRef: ScrollBoxRenderable | undefined;
+
+  const getScrollState = () => {
+    if (!scrollRef) {
+      return { scrollTop: 0, maxScrollTop: 0 };
+    }
+    const maxScrollTop = Math.max(
+      0,
+      scrollRef.scrollHeight - scrollRef.viewport.height,
+    );
+    return { scrollTop: scrollRef.scrollTop, maxScrollTop };
+  };
+
+  const scrollByLines = (delta: number) => {
+    if (!scrollRef || delta === 0) {
+      return false;
+    }
+    const { scrollTop, maxScrollTop } = getScrollState();
+    if (delta < 0 && scrollTop <= 0) {
+      return false;
+    }
+    if (delta > 0 && scrollTop >= maxScrollTop) {
+      return false;
+    }
+    scrollRef.scrollBy(delta, "absolute");
+    return true;
+  };
+
+  const ensureLineVisible = (lineIndex: number) => {
+    if (!scrollRef) {
+      return false;
+    }
+    const viewportHeight = scrollRef.viewport.height;
+    if (viewportHeight <= 0) {
+      return false;
+    }
+    const safeIndex = Math.max(0, lineIndex);
+    const { scrollTop, maxScrollTop } = getScrollState();
+    if (safeIndex < scrollTop) {
+      scrollRef.scrollTo(Math.max(0, safeIndex));
+      return true;
+    }
+    if (safeIndex >= scrollTop + viewportHeight) {
+      const nextTop = Math.min(
+        maxScrollTop,
+        Math.max(0, safeIndex - viewportHeight + 1),
+      );
+      scrollRef.scrollTo(nextTop);
+      return true;
+    }
+    return false;
+  };
+
+  const scrollContextValue: WizardScrollContextValue = {
+    scrollByLines,
+    ensureLineVisible,
+    canScrollUp: () => getScrollState().scrollTop > 0,
+    canScrollDown: () =>
+      getScrollState().scrollTop < getScrollState().maxScrollTop,
+  };
+
+  return (
+    <Show when={props.visible}>
+      {/* Popup content - centered overlay without full-screen background */}
+      <box
+        position="absolute"
+        top="20%"
+        left="20%"
+        width="60%"
+        height="60%"
+        zIndex={100}
+        border
+        borderStyle="single"
+        borderColor="cyan"
+        backgroundColor="black"
+        flexDirection="column"
+        padding={1}
+        overflow="hidden"
+      >
+        <WizardScrollContext.Provider value={scrollContextValue}>
+          <scrollbox
+            ref={(node) => {
+              scrollRef = node;
+            }}
+            flexGrow={1}
+            flexShrink={1}
+            minHeight={0}
+            scrollX={false}
+            scrollY
+            scrollbarOptions={{ visible: false }}
+            verticalScrollbarOptions={{ visible: false }}
+            horizontalScrollbarOptions={{ visible: false }}
+          >
+            {props.children}
+          </scrollbox>
+        </WizardScrollContext.Provider>
+      </box>
+    </Show>
+  );
+}