@akiojin/gwt 4.11.6 → 4.12.1

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

@@ -1,5 +1,11 @@
 /** @jsxImportSource @opentui/solid */
-import { createSignal, createEffect, createMemo, Show } from "solid-js";
+import {
+  createSignal,
+  createEffect,
+  createMemo,
+  onCleanup,
+  Show,
+} from "solid-js";
 import { useKeyboard } from "@opentui/solid";
 import type { ToolSessionEntry } from "../../../../config/index.js";
 import type { CodingAgentId, InferenceLevel } from "../../types.js";
@@ -13,6 +19,7 @@ import {
   AgentSelectStep,
   VersionSelectStep,
   ModelSelectStep,
+  ModelInputStep,
   ReasoningLevelStep,
   ExecutionModeStep,
   SkipPermissionsStep,
@@ -53,6 +60,7 @@ type WizardStep =
   | "agent-select"
   | "version-select"
   | "model-select"
+  | "model-input"
   | "reasoning-level"
   | "execution-mode"
   | "skip-permissions";
@@ -87,9 +95,11 @@ export function WizardController(props: WizardControllerProps) {
   >(undefined);
   const [executionMode, setExecutionMode] =
     createSignal<ExecutionMode>("normal");
+  const [versionSelectionReady, setVersionSelectionReady] = createSignal(false);
 
-  // キー伝播防止: 最初のフレームでは focused を無効にする
-  const [isInitialFrame, setIsInitialFrame] = createSignal(true);
+  // キー伝播防止: ステップ遷移直後は focused を無効にする
+  const [isTransitioning, setIsTransitioning] = createSignal(true);
+  let versionSelectionTimer: ReturnType<typeof setTimeout> | null = null;
 
   // Reset state when wizard becomes visible
   function getInitialStep(): WizardStep {
@@ -115,6 +125,13 @@ export function WizardController(props: WizardControllerProps) {
     setExecutionMode("normal");
   };
 
+  // ステップ遷移時にキー伝搬防止を有効化するヘルパー
+  const startTransition = () => {
+    setIsTransitioning(true);
+    // 50ms後にフォーカスを有効化（キー伝搬を防止しつつ、応答性を維持）
+    setTimeout(() => setIsTransitioning(false), 50);
+  };
+
   // Reset wizard when it becomes visible
   let prevVisible = false;
   createEffect(() => {
@@ -123,19 +140,17 @@ export function WizardController(props: WizardControllerProps) {
       resetWizard();
       // キー伝播防止: 最初の数フレームでは focused を無効にする
       // Enter キーが複数フレームにわたって伝播する可能性があるため、長めに設定
-      setIsInitialFrame(true);
-      // 十分な時間を置いて focused を有効化 (150ms)
-      setTimeout(() => setIsInitialFrame(false), 150);
+      startTransition();
     }
     prevVisible = visible;
   });
 
   // Handle keyboard events for step navigation
-  // T412: 最初のフレームでは Enter キーをブロックして伝播を防ぐ
+  // T412: ステップ遷移直後は Enter キーをブロックして伝播を防ぐ
   useKeyboard((key) => {
     if (!props.visible) return;
-    // 最初のフレームでは Enter キーを無視（ブランチ選択からの伝播防止）
-    if (isInitialFrame() && key.name === "return") {
+    // ステップ遷移直後は Enter キーを無視（ステップ間のキー伝播防止）
+    if (isTransitioning() && key.name === "return") {
       return;
     }
     if (key.name === "escape") {
@@ -146,6 +161,8 @@ export function WizardController(props: WizardControllerProps) {
   const goToStep = (nextStep: WizardStep) => {
     setStepHistory((prev) => [...prev, step()]);
     setStep(nextStep);
+    // ステップ遷移時にキー伝搬防止を有効化
+    startTransition();
   };
 
   const goBack = () => {
@@ -157,8 +174,32 @@ export function WizardController(props: WizardControllerProps) {
     const previousStep = history[history.length - 1] ?? "agent-select";
     setStepHistory(history.slice(0, -1));
     setStep(previousStep);
+    // ステップ遷移時にキー伝搬防止を有効化
+    startTransition();
   };
 
+  createEffect(() => {
+    const currentStep = step();
+    if (versionSelectionTimer) {
+      clearTimeout(versionSelectionTimer);
+      versionSelectionTimer = null;
+    }
+    if (currentStep === "version-select") {
+      setVersionSelectionReady(false);
+      versionSelectionTimer = setTimeout(() => {
+        setVersionSelectionReady(true);
+      }, 50);
+      return;
+    }
+    setVersionSelectionReady(false);
+  });
+
+  onCleanup(() => {
+    if (versionSelectionTimer) {
+      clearTimeout(versionSelectionTimer);
+    }
+  });
+
   // Determine if reasoning level step is needed
   const needsReasoningLevel = createMemo(() => {
     return selectedAgent() === "codex-cli";
@@ -204,12 +245,20 @@ export function WizardController(props: WizardControllerProps) {
   };
 
   const handleVersionSelect = (version: string) => {
-    // "installed" は null として保存（bunx のデフォルト動作）
-    setSelectedVersion(version === "installed" ? null : version);
+    if (!versionSelectionReady() || step() !== "version-select") {
+      return;
+    }
+    // "installed" を明示的に保存し、未指定時は後方互換で "latest" にフォールバックできるようにする
+    setSelectedVersion(version);
     goToStep("model-select");
   };
 
   const handleModelSelect = (model: string) => {
+    const agent = selectedAgent();
+    if (agent === "opencode" && model === "__custom__") {
+      goToStep("model-input");
+      return;
+    }
     setSelectedModel(model);
     if (needsReasoningLevel()) {
       goToStep("reasoning-level");
@@ -218,6 +267,19 @@ export function WizardController(props: WizardControllerProps) {
     }
   };
 
+  const handleModelInputSubmit = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return;
+    }
+    setSelectedModel(trimmed);
+    if (needsReasoningLevel()) {
+      goToStep("reasoning-level");
+    } else {
+      goToStep("execution-mode");
+    }
+  };
+
   const handleReasoningLevelSelect = (level: string) => {
     setReasoningLevel(level as InferenceLevel);
     goToStep("execution-mode");
@@ -258,7 +320,7 @@ export function WizardController(props: WizardControllerProps) {
 
   const renderStep = () => {
     const currentStep = step();
-    const focused = !isInitialFrame();
+    const focused = !isTransitioning();
 
     if (currentStep === "action-select") {
       return (
@@ -337,6 +399,17 @@ export function WizardController(props: WizardControllerProps) {
       );
     }
 
+    if (currentStep === "model-input") {
+      return (
+        <ModelInputStep
+          agentId={selectedAgent() ?? "claude-code"}
+          onSubmit={handleModelInputSubmit}
+          onBack={goBack}
+          focused={focused}
+        />
+      );
+    }
+
     if (currentStep === "reasoning-level") {
       return (
         <ReasoningLevelStep

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

@@ -2,19 +2,20 @@
 import { TextAttributes } from "@opentui/core";
 import type { SelectRenderable } from "@opentui/core";
 import { useKeyboard } from "@opentui/solid";
-import { createEffect, createResource, createSignal } from "solid-js";
+import { createEffect, 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 {
-  fetchPackageVersions,
-  parsePackageCommand,
-} from "../../../../utils/npmRegistry.js";
-import { BUILTIN_CODING_AGENTS } from "../../../../config/builtin-coding-agents.js";
-import { findCommand } from "../../../../utils/command.js";
+  versionInfoToSelectItem,
+  createInstalledOption,
+} from "../../utils/versionFetcher.js";
+import { getInstalledVersionCache } from "../../utils/installedVersionCache.js";
 
 /**
  * WizardSteps - ウィザードの各ステップコンポーネント
@@ -346,7 +347,7 @@ export function AgentSelectStep(props: AgentSelectStepProps) {
         const isSelected = () => selectedIndex() === index;
         const agentColor = getAgentTerminalColor(agent.value);
         return isSelected() ? (
-          <text bg="cyan" fg="black">
+          <text bg={selectionStyle.bg} fg={selectionStyle.fg}>
             {"> "}
             {agent.label}
           </text>
@@ -440,6 +441,54 @@ export function ModelSelectStep(props: ModelSelectStepProps) {
   );
 }
 
+// T408b: カスタムモデル入力ステップ
+export interface ModelInputStepProps extends StepProps {
+  agentId: CodingAgentId;
+  onSubmit: (value: string) => void;
+}
+
+export function ModelInputStep(props: ModelInputStepProps) {
+  const [value, setValue] = createSignal("");
+  const scroll = useWizardScroll();
+  const placeholder = props.agentId === "opencode" ? "provider/model" : "model";
+
+  createEffect(() => {
+    if (props.focused === false) {
+      return;
+    }
+    if (!scroll) {
+      return;
+    }
+    scroll.ensureLineVisible(2);
+  });
+
+  const handleSubmit = (next: string) => {
+    const trimmed = next.trim();
+    if (!trimmed) {
+      return;
+    }
+    props.onSubmit(trimmed);
+  };
+
+  return (
+    <box flexDirection="column">
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Enter custom model:
+      </text>
+      <text> </text>
+      <TextInput
+        value={value()}
+        onChange={setValue}
+        onSubmit={handleSubmit}
+        placeholder={placeholder}
+        focused={props.focused ?? true}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>[Enter] Submit [Esc] Back</text>
+    </box>
+  );
+}
+
 // T409: 推論レベル選択ステップ（Codexのみ）
 export interface ReasoningLevelStepProps extends StepProps {
   onSelect: (level: string) => void;
@@ -626,89 +675,28 @@ const LATEST_OPTION: SelectInputItem = {
   description: "Always fetch latest version",
 };
 
-// エージェントIDからパッケージ名を取得
-function getPackageNameForAgent(agentId: string): string | null {
-  const agent = BUILTIN_CODING_AGENTS.find((a) => a.id === agentId);
-  if (!agent || agent.type !== "bunx") {
-    return null;
-  }
-  const { packageName } = parsePackageCommand(agent.command);
-  return packageName;
-}
-
-// バージョン一覧を取得
-async function fetchVersionOptions(
-  agentId: string,
-): Promise<SelectInputItem[]> {
-  const packageName = getPackageNameForAgent(agentId);
-  if (!packageName) {
-    return [];
-  }
-
-  const versions = await fetchPackageVersions(packageName);
-  return versions.map((v) => {
-    const item: SelectInputItem = {
-      label: v.isPrerelease ? `${v.version} (pre)` : v.version,
-      value: v.version,
-    };
-    if (v.publishedAt) {
-      item.description = new Date(v.publishedAt).toLocaleDateString();
-    }
-    return item;
-  });
-}
-
-// エージェントIDからコマンド名へのマッピング
-const AGENT_COMMAND_MAP: Record<string, string> = {
-  "claude-code": "claude",
-  "codex-cli": "codex",
-  "gemini-cli": "gemini",
-  opencode: "opencode",
-};
-
-// インストール済みコマンド情報を取得（findCommandと統一）
-async function fetchInstalledOption(
-  agentId: string,
-): Promise<SelectInputItem | null> {
-  const commandName = AGENT_COMMAND_MAP[agentId];
-  if (!commandName) {
-    return null;
-  }
-
-  const result = await findCommand(commandName);
-  if (result.source !== "installed" || !result.path) {
-    return null;
-  }
-
-  // バージョン表示（v1.0.3 → 1.0.3 形式に）
-  const version = result.version?.replace(/^v/, "") ?? "unknown";
-
-  return {
-    label: `installed@${version}`,
-    value: "installed",
-    description: result.path,
-  };
-}
-
 export function VersionSelectStep(props: VersionSelectStepProps) {
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
     undefined,
   );
 
-  // npmレジストリからバージョン取得
-  const [versionOptions] = createResource(
-    () => props.agentId,
-    fetchVersionOptions,
-  );
+  // 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);
+  };
 
-  // インストール済み情報を取得
-  const [installedOption] = createResource(
-    () => props.agentId,
-    fetchInstalledOption,
-  );
+  // インストール済み情報は起動時にキャッシュ済み（FR-017）
+  const installedOption = () => {
+    const installed = getInstalledVersionCache(props.agentId);
+    return installed ? createInstalledOption(installed) : null;
+  };
 
-  // 全オプション（installed + latest + 動的）
+  // 全オプション（installed + latest + cached versions）
   const allOptions = (): SelectInputItem[] => {
     const options: SelectInputItem[] = [];
 
@@ -721,9 +709,9 @@ export function VersionSelectStep(props: VersionSelectStepProps) {
     // latestオプション（常に表示）
     options.push(LATEST_OPTION);
 
-    // npmレジストリから取得したバージョン
-    const dynamic = versionOptions() ?? [];
-    options.push(...dynamic);
+    // FR-029: Use cached versions (no npm registry re-access)
+    const cached = cachedVersions();
+    options.push(...cached);
 
     return options;
   };
@@ -761,11 +749,11 @@ export function VersionSelectStep(props: VersionSelectStepProps) {
   };
 
   const statusText = () => {
-    if (versionOptions.loading) {
-      return "Fetching versions...";
-    }
-    if (versionOptions.error) {
-      return "Could not fetch versions";
+    // 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;
   };

package/src/cli/ui/core/theme.ts

@@ -33,6 +33,8 @@ export const colors = {
   selected: "cyan",
   highlighted: "cyan",
   disabled: "gray",
+  selectionBackground: "cyan",
+  selectionText: "black",
 
   // Branch type colors
   branchFeature: "green",
@@ -64,6 +66,36 @@ export const colors = {
 export type ColorName = keyof typeof colors;
 export type ColorValue = (typeof colors)[ColorName];
 
+export type LogLevelLabel =
+  | "TRACE"
+  | "DEBUG"
+  | "INFO"
+  | "WARN"
+  | "ERROR"
+  | "FATAL";
+
+export const logLevelColors: Record<LogLevelLabel, ColorValue> = {
+  TRACE: colors.textDim,
+  DEBUG: colors.info,
+  INFO: colors.success,
+  WARN: colors.warning,
+  ERROR: colors.error,
+  FATAL: colors.error,
+};
+
+export const selectionStyle = {
+  fg: colors.selectionText,
+  bg: colors.selectionBackground,
+} as const;
+
+export const getLogLevelColor = (label?: string | null): ColorValue => {
+  if (!label) {
+    return colors.text;
+  }
+  const normalized = label.toUpperCase() as LogLevelLabel;
+  return logLevelColors[normalized] ?? colors.text;
+};
+
 // ========================================
 // Icon Definitions
 // ========================================

package/src/cli/ui/hooks/solid/useAsyncOperation.ts

@@ -32,12 +32,14 @@ export function useAsyncOperation<T, Args extends unknown[]>(
   );
 
   const isLoading = createMemo(() => state().status === "loading");
-  const error = createMemo(() =>
-    state().status === "error" ? state().error : null,
-  );
-  const data = createMemo(() =>
-    state().status === "success" ? state().data : null,
-  );
+  const error = createMemo(() => {
+    const current = state();
+    return current.status === "error" ? current.error : null;
+  });
+  const data = createMemo(() => {
+    const current = state();
+    return current.status === "success" ? current.data : null;
+  });
 
   const setState = (next: AsyncState<T>) => {
     setStateInternal(next);

package/src/cli/ui/hooks/solid/useGitOperations.ts

@@ -5,8 +5,8 @@ import {
   createWorktree,
   generateWorktreePath,
   removeWorktree,
-} from "../../../worktree.js";
-import { deleteBranch, getRepositoryRoot } from "../../../git.js";
+} from "../../../../worktree.js";
+import { deleteBranch, getRepositoryRoot } from "../../../../git.js";
 
 export interface UseGitOperationsResult {
   state: Accessor<AsyncState<unknown>>;
@@ -36,9 +36,10 @@ export function useGitOperations(): UseGitOperationsResult {
   });
 
   const isLoading = createMemo(() => state().status === "loading");
-  const error = createMemo(() =>
-    state().status === "error" ? state().error : null,
-  );
+  const error = createMemo(() => {
+    const current = state();
+    return current.status === "error" ? current.error : null;
+  });
 
   const run = async <T>(operation: () => Promise<T>): Promise<T> => {
     setState({ status: "loading" });