@akiojin/gwt 4.11.6 → 4.12.0

package/src/cli/ui/__tests__/utils/branchFormatter.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { describe, it, expect } from "bun:test";
 import {
   formatBranchItem,
@@ -5,6 +6,31 @@ import {
 } from "../../utils/branchFormatter.js";
 import type { BranchInfo } from "../../types.js";
 
+const LOCAL_DATE_TIME_FORMATTER = new Intl.DateTimeFormat(undefined, {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: false,
+});
+
+const formatLocalDateTime = (timestampMs: number): string => {
+  const date = new Date(timestampMs);
+  const parts = LOCAL_DATE_TIME_FORMATTER.formatToParts(date);
+  const get = (type: Intl.DateTimeFormatPartTypes) =>
+    parts.find((part) => part.type === type)?.value;
+  const year = get("year");
+  const month = get("month");
+  const day = get("day");
+  const hour = get("hour");
+  const minute = get("minute");
+  if (!year || !month || !day || !hour || !minute) {
+    return LOCAL_DATE_TIME_FORMATTER.format(date);
+  }
+  return `${year}-${month}-${day} ${hour}:${minute}`;
+};
+
 describe("branchFormatter", () => {
   describe("formatBranchItem", () => {
     it("should format a branch without icons", () => {
@@ -46,8 +72,9 @@ describe("branchFormatter", () => {
 
       const result = formatBranchItem(branchInfo);
 
-      expect(result.lastToolUsageLabel).toContain("Codex");
-      expect(result.lastToolUsageLabel).toContain("2025-11-26");
+      expect(result.lastToolUsageLabel).toBe(
+        `Codex@latest | ${formatLocalDateTime(branchInfo.lastToolUsage.timestamp)}`,
+      );
     });
 
     it("should set lastToolUsageLabel to null when no usage exists", () => {
@@ -156,13 +183,13 @@ describe("branchFormatter", () => {
 
       expect(results).toHaveLength(3);
       // Current branch (main) should be first
-      expect(results[0].name).toBe("main");
-      expect(results[0].isCurrent).toBe(true);
+      expect(results[0]!.name).toBe("main");
+      expect(results[0]!.isCurrent).toBe(true);
       // origin/main is also main branch, so it comes second
-      expect(results[1].name).toBe("origin/main");
-      expect(results[1].type).toBe("remote");
+      expect(results[1]!.name).toBe("origin/main");
+      expect(results[1]!.type).toBe("remote");
       // feature/test comes last
-      expect(results[2].name).toBe("feature/test");
+      expect(results[2]!.name).toBe("feature/test");
     });
 
     it("should handle empty array", () => {
@@ -189,8 +216,8 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches);
 
-      expect(results[0].name).toBe("a-branch");
-      expect(results[1].name).toBe("z-branch");
+      expect(results[0]!.name).toBe("a-branch");
+      expect(results[1]!.name).toBe("z-branch");
     });
   });
 
@@ -219,8 +246,8 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches);
 
-      expect(results[0].name).toBe("feature/current");
-      expect(results[0].isCurrent).toBe(true);
+      expect(results[0]!.name).toBe("feature/current");
+      expect(results[0]!.isCurrent).toBe(true);
     });
 
     it("should prioritize main branch as second (after current)", () => {
@@ -247,8 +274,8 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches);
 
-      expect(results[0].name).toBe("main");
-      expect(results[1].name).toBe("develop");
+      expect(results[0]!.name).toBe("main");
+      expect(results[1]!.name).toBe("develop");
     });
 
     it("should prioritize develop branch after main (when main exists)", () => {
@@ -275,9 +302,9 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches);
 
-      expect(results[0].name).toBe("main");
-      expect(results[1].name).toBe("develop");
-      expect(results[2].name).toBe("feature/test");
+      expect(results[0]!.name).toBe("main");
+      expect(results[1]!.name).toBe("develop");
+      expect(results[2]!.name).toBe("feature/test");
     });
 
     it("should NOT prioritize develop branch when main does not exist", () => {
@@ -305,9 +332,9 @@ describe("branchFormatter", () => {
       const results = formatBranchItems(branches);
 
       // develop should be sorted alphabetically, not prioritized
-      expect(results[0].name).toBe("develop");
-      expect(results[1].name).toBe("feature/a");
-      expect(results[2].name).toBe("feature/z");
+      expect(results[0]!.name).toBe("develop");
+      expect(results[1]!.name).toBe("feature/a");
+      expect(results[2]!.name).toBe("feature/z");
     });
 
     it("should prioritize branches with worktree", () => {
@@ -346,8 +373,8 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches, worktreeMap);
 
-      expect(results[0].name).toBe("feature/with-worktree");
-      expect(results[1].name).toBe("feature/no-worktree");
+      expect(results[0]!.name).toBe("feature/with-worktree");
+      expect(results[1]!.name).toBe("feature/no-worktree");
     });
 
     it("should sort branches with worktree by latest commit timestamp", () => {
@@ -403,8 +430,8 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches, worktreeMap);
 
-      expect(results[0].name).toBe("feature/recent");
-      expect(results[1].name).toBe("feature/older");
+      expect(results[0]!.name).toBe("feature/recent");
+      expect(results[1]!.name).toBe("feature/older");
     });
 
     it("should prioritize local branches over remote branches", () => {
@@ -425,10 +452,10 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches);
 
-      expect(results[0].name).toBe("feature/local");
-      expect(results[0].type).toBe("local");
-      expect(results[1].name).toBe("origin/feature/remote");
-      expect(results[1].type).toBe("remote");
+      expect(results[0]!.name).toBe("feature/local");
+      expect(results[0]!.type).toBe("local");
+      expect(results[1]!.name).toBe("origin/feature/remote");
+      expect(results[1]!.type).toBe("remote");
     });
 
     it("should sort by latest commit timestamp when worktree status matches", () => {
@@ -451,8 +478,8 @@ describe("branchFormatter", () => {
 
       const results = formatBranchItems(branches);
 
-      expect(results[0].name).toBe("origin/feature/newer");
-      expect(results[1].name).toBe("feature/local-older");
+      expect(results[0]!.name).toBe("origin/feature/newer");
+      expect(results[1]!.name).toBe("feature/local-older");
     });
 
     it("should apply all sorting rules in correct priority order", () => {
@@ -528,13 +555,13 @@ describe("branchFormatter", () => {
       // 4. Branches with worktree
       // 5. Local branches (alphabetically)
       // 6. Remote branches
-      expect(results[0].name).toBe("feature/current");
-      expect(results[1].name).toBe("main");
-      expect(results[2].name).toBe("develop");
-      expect(results[3].name).toBe("feature/with-worktree");
-      expect(results[4].name).toBe("feature/a-local-no-worktree");
-      expect(results[5].name).toBe("feature/z-local-no-worktree");
-      expect(results[6].name).toBe("origin/feature/z-remote");
+      expect(results[0]!.name).toBe("feature/current");
+      expect(results[1]!.name).toBe("main");
+      expect(results[2]!.name).toBe("develop");
+      expect(results[3]!.name).toBe("feature/with-worktree");
+      expect(results[4]!.name).toBe("feature/a-local-no-worktree");
+      expect(results[5]!.name).toBe("feature/z-local-no-worktree");
+      expect(results[6]!.name).toBe("origin/feature/z-remote");
     });
 
     it("should handle release and hotfix branches without special priority", () => {
@@ -562,9 +589,9 @@ describe("branchFormatter", () => {
       const results = formatBranchItems(branches);
 
       // Should be sorted alphabetically (no special priority)
-      expect(results[0].name).toBe("feature/test");
-      expect(results[1].name).toBe("hotfix/urgent");
-      expect(results[2].name).toBe("release/v1.0");
+      expect(results[0]!.name).toBe("feature/test");
+      expect(results[1]!.name).toBe("hotfix/urgent");
+      expect(results[2]!.name).toBe("release/v1.0");
     });
 
     it("should sort by latest activity time (max of git commit and tool usage)", () => {
@@ -604,8 +631,8 @@ describe("branchFormatter", () => {
       // Both have same latest activity time (1_800_000_000), so alphabetical
       // feature/git-newer: max(1_800_000_000, 1_700_000_000) = 1_800_000_000
       // feature/tool-newer: max(1_700_000_000, 1_800_000_000) = 1_800_000_000
-      expect(results[0].name).toBe("feature/git-newer");
-      expect(results[1].name).toBe("feature/tool-newer");
+      expect(results[0]!.name).toBe("feature/git-newer");
+      expect(results[1]!.name).toBe("feature/tool-newer");
     });
 
     it("should prioritize branch with tool usage over branch with only git commit when tool is newer", () => {
@@ -636,8 +663,8 @@ describe("branchFormatter", () => {
       const results = formatBranchItems(branches);
 
       // feature/with-tool has newer activity (tool usage at 1_800_000_000)
-      expect(results[0].name).toBe("feature/with-tool");
-      expect(results[1].name).toBe("feature/git-only");
+      expect(results[0]!.name).toBe("feature/with-tool");
+      expect(results[1]!.name).toBe("feature/git-only");
     });
 
     it("should prioritize branch with newer git commit over branch with older tool usage", () => {
@@ -668,8 +695,8 @@ describe("branchFormatter", () => {
       const results = formatBranchItems(branches);
 
       // feature/new-git has newer activity (git commit at 1_800_000_000)
-      expect(results[0].name).toBe("feature/new-git");
-      expect(results[1].name).toBe("feature/old-tool");
+      expect(results[0]!.name).toBe("feature/new-git");
+      expect(results[1]!.name).toBe("feature/old-tool");
     });
   });
 });

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

@@ -42,40 +42,52 @@ export function QuickStartStep(props: QuickStartStepProps) {
     }
   });
 
-  // Build selection items from history
-  // 最新の履歴エントリのみを使用（重複排除済み）
-  const latestEntry = createMemo(() => props.history[0] ?? null);
+  const buildSettingsDescription = (entry: ToolSessionEntry): string => {
+    const parts: string[] = [];
+    if (entry.toolLabel) {
+      parts.push(entry.toolLabel);
+    } else if (entry.toolId) {
+      parts.push(entry.toolId);
+    }
+    if (entry.model) {
+      parts.push(entry.model);
+    }
+    if (entry.toolId === "codex-cli" && entry.reasoningLevel) {
+      parts.push(entry.reasoningLevel);
+    }
+    return parts.join(", ");
+  };
 
   const items = createMemo<QuickStartItem[]>(() => {
     const result: QuickStartItem[] = [];
-    const entry = latestEntry();
-
-    if (entry) {
-      const reasoningInfo = entry.reasoningLevel
-        ? `, ${entry.reasoningLevel}`
-        : "";
-      const versionInfo = entry.toolVersion ? `@${entry.toolVersion}` : "";
-      const settingsDesc = `${entry.toolLabel}${versionInfo}, ${entry.model}${reasoningInfo}`;
-      const resumeDesc = entry.sessionId
-        ? `${settingsDesc}, session ${entry.sessionId}`
-        : settingsDesc;
 
-      result.push({
-        label: "Resume session (previous settings)",
-        value: `resume-${entry.toolId}`,
-        description: resumeDesc,
-        action: "resume",
-        entry,
-      });
+    props.history.forEach((entry, index) => {
+      if (!entry) return;
+      const settingsDesc = buildSettingsDescription(entry);
+      const sessionId =
+        entry.sessionId && entry.sessionId.trim().length > 0
+          ? entry.sessionId.trim()
+          : null;
+      const suffix = `${entry.toolId ?? "tool"}-${index}`;
+
+      if (sessionId) {
+        result.push({
+          label: "Resume session (previous settings)",
+          value: `resume-${suffix}`,
+          description: `${settingsDesc} | Session: ${sessionId}`,
+          action: "resume",
+          entry,
+        });
+      }
 
       result.push({
         label: "Start new (previous settings)",
-        value: `start-new-${entry.toolId}`,
+        value: `start-new-${suffix}`,
         description: settingsDesc,
         action: "start-new",
         entry,
       });
-    }
+    });
 
     // Add "Choose different settings..." at the end
     result.push({

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

@@ -27,7 +27,7 @@ export function SearchInput({
       <input
         value={value}
         onChange={onChange}
-        onSubmit={onSubmit}
+        {...(onSubmit ? { onSubmit } : {})}
         placeholder={placeholder}
         width={inputWidth}
         focused={isFocused}

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

@@ -1,6 +1,7 @@
 /** @jsxImportSource @opentui/solid */
 import type { SelectOption, SelectRenderable } from "@opentui/core";
 import type { Ref } from "solid-js";
+import { selectionStyle } from "../../core/theme.js";
 
 export interface SelectInputItem {
   label: string;
@@ -69,6 +70,9 @@ export function SelectInput(props: SelectInputProps) {
       <select
         options={options()}
         height={computedHeight()}
+        selectedBackgroundColor={selectionStyle.bg}
+        selectedTextColor={selectionStyle.fg}
+        selectedDescriptionColor={selectionStyle.fg}
         {...(props.selectedIndex !== undefined && {
           selectedIndex: props.selectedIndex,
         })}

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

@@ -88,8 +88,8 @@ export function WizardController(props: WizardControllerProps) {
   const [executionMode, setExecutionMode] =
     createSignal<ExecutionMode>("normal");
 
-  // キー伝播防止: 最初のフレームでは focused を無効にする
-  const [isInitialFrame, setIsInitialFrame] = createSignal(true);
+  // キー伝播防止: ステップ遷移直後は focused を無効にする
+  const [isTransitioning, setIsTransitioning] = createSignal(true);
 
   // Reset state when wizard becomes visible
   function getInitialStep(): WizardStep {
@@ -115,6 +115,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 +130,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 +151,8 @@ export function WizardController(props: WizardControllerProps) {
   const goToStep = (nextStep: WizardStep) => {
     setStepHistory((prev) => [...prev, step()]);
     setStep(nextStep);
+    // ステップ遷移時にキー伝搬防止を有効化
+    startTransition();
   };
 
   const goBack = () => {
@@ -157,6 +164,8 @@ export function WizardController(props: WizardControllerProps) {
     const previousStep = history[history.length - 1] ?? "agent-select";
     setStepHistory(history.slice(0, -1));
     setStep(previousStep);
+    // ステップ遷移時にキー伝搬防止を有効化
+    startTransition();
   };
 
   // Determine if reasoning level step is needed
@@ -204,8 +213,8 @@ export function WizardController(props: WizardControllerProps) {
   };
 
   const handleVersionSelect = (version: string) => {
-    // "installed" は null として保存（bunx のデフォルト動作）
-    setSelectedVersion(version === "installed" ? null : version);
+    // "installed" を明示的に保存し、未指定時は後方互換で "latest" にフォールバックできるようにする
+    setSelectedVersion(version);
     goToStep("model-select");
   };
 
@@ -258,7 +267,7 @@ export function WizardController(props: WizardControllerProps) {
 
   const renderStep = () => {
     const currentStep = step();
-    const focused = !isInitialFrame();
+    const focused = !isTransitioning();
 
     if (currentStep === "action-select") {
       return (

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

@@ -9,12 +9,13 @@ 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";
+  fetchInstalledVersionForAgent,
+  versionInfoToSelectItem,
+  createInstalledOption,
+} from "../../utils/versionFetcher.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>
@@ -626,89 +627,31 @@ 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);
+  };
 
-  // インストール済み情報を取得
+  // インストール済み情報を取得 (still needs async fetch for local command check)
   const [installedOption] = createResource(
     () => props.agentId,
-    fetchInstalledOption,
+    async (agentId: string) => {
+      const installed = await fetchInstalledVersionForAgent(agentId);
+      return installed ? createInstalledOption(installed) : null;
+    },
   );
 
-  // 全オプション（installed + latest + 動的）
+  // 全オプション（installed + latest + cached versions）
   const allOptions = (): SelectInputItem[] => {
     const options: SelectInputItem[] = [];
 
@@ -721,9 +664,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 +704,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);