@akiojin/gwt 4.10.0 → 4.12.0

package/src/cli/ui/screens/solid/ProfileScreen.tsx

@@ -0,0 +1,98 @@
+/** @jsxImportSource @opentui/solid */
+import { useKeyboard } from "@opentui/solid";
+import { createEffect, createSignal } from "solid-js";
+import { SelectorScreen } from "./SelectorScreen.js";
+
+export interface ProfileItem {
+  name: string;
+  displayName?: string;
+  isActive?: boolean;
+}
+
+export interface ProfileScreenProps {
+  profiles: ProfileItem[];
+  onSelect?: (profile: ProfileItem) => void;
+  onCreate?: () => void;
+  onDelete?: (profile: ProfileItem) => void;
+  onEdit?: (profile: ProfileItem) => void;
+  onBack?: () => void;
+  version?: string | null;
+  helpVisible?: boolean;
+}
+
+export function ProfileScreen({
+  profiles,
+  onSelect,
+  onCreate,
+  onDelete,
+  onEdit,
+  onBack,
+  version,
+  helpVisible = false,
+}: ProfileScreenProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const items = profiles.map((profile) => ({
+    label: `${profile.displayName ?? profile.name}${profile.isActive ? " (active)" : ""}`,
+    value: profile.name,
+  }));
+
+  createEffect(() => {
+    if (profiles.length === 0) {
+      setSelectedIndex(0);
+      return;
+    }
+    setSelectedIndex((prev) =>
+      Math.min(Math.max(prev, 0), profiles.length - 1),
+    );
+  });
+
+  const getSelectedProfile = () => profiles[selectedIndex()] ?? null;
+
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+
+    if (key.name === "n") {
+      onCreate?.();
+      return;
+    }
+
+    if (key.name === "e") {
+      const profile = getSelectedProfile();
+      if (profile) {
+        onEdit?.(profile);
+      }
+      return;
+    }
+
+    if (key.name === "d") {
+      const profile = getSelectedProfile();
+      if (profile) {
+        onDelete?.(profile);
+      }
+    }
+  });
+
+  const handleSelect = (item: { label: string; value: string }) => {
+    const profile = profiles.find((entry) => entry.name === item.value);
+    if (profile) {
+      onSelect?.(profile);
+    }
+  };
+
+  return (
+    <SelectorScreen
+      title="gwt - Profiles"
+      description="Enter: Activate | e: Edit | n: New | d: Delete"
+      items={items}
+      onSelect={handleSelect}
+      selectedIndex={selectedIndex()}
+      onSelectedIndexChange={setSelectedIndex}
+      {...(onBack ? { onBack } : {})}
+      {...(version !== undefined ? { version } : {})}
+      emptyMessage="No profiles available."
+      helpVisible={helpVisible}
+    />
+  );
+}

package/src/cli/ui/screens/solid/SelectorScreen.tsx

@@ -0,0 +1,181 @@
+/** @jsxImportSource @opentui/solid */
+import { useKeyboard } from "@opentui/solid";
+import { createEffect, createMemo } from "solid-js";
+import { TextAttributes } from "@opentui/core";
+import { Header } from "../../components/solid/Header.js";
+import { Footer } from "../../components/solid/Footer.js";
+import { useTerminalSize } from "../../hooks/solid/useTerminalSize.js";
+import { useScrollableList } from "../../hooks/solid/useScrollableList.js";
+import stringWidth from "string-width";
+import { selectionStyle } from "../../core/theme.js";
+
+export interface SelectorItem {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export interface SelectorScreenProps {
+  title: string;
+  description?: string;
+  items: SelectorItem[];
+  onSelect: (item: SelectorItem) => void;
+  onBack?: () => void;
+  version?: string | null;
+  emptyMessage?: string;
+  selectedIndex?: number;
+  onSelectedIndexChange?: (index: number) => void;
+  showDescription?: boolean;
+  helpVisible?: boolean;
+}
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const padLine = (value: string, width: number): string => {
+  const padding = Math.max(0, width - stringWidth(value));
+  return padding > 0 ? `${value}${" ".repeat(padding)}` : value;
+};
+
+export function SelectorScreen({
+  title,
+  description,
+  items,
+  onSelect,
+  onBack,
+  version,
+  emptyMessage = "No options available.",
+  selectedIndex: controlledIndex,
+  onSelectedIndexChange,
+  showDescription = false,
+  helpVisible = false,
+}: SelectorScreenProps) {
+  const terminal = useTerminalSize();
+  const listHeight = createMemo(() => {
+    const headerRows = 2;
+    const descriptionRows = description ? 1 : 0;
+    const footerRows = 1;
+    const reserved = headerRows + descriptionRows + footerRows;
+    return Math.max(1, terminal().rows - reserved);
+  });
+
+  const list = useScrollableList({
+    items: () => items,
+    visibleCount: listHeight,
+    initialIndex: controlledIndex ?? 0,
+  });
+
+  createEffect(() => {
+    if (controlledIndex === undefined) {
+      return;
+    }
+    list.setSelectedIndex(clamp(controlledIndex, 0, items.length - 1));
+  });
+
+  const selectedIndex = list.selectedIndex;
+
+  const updateSelectedIndex = (value: number | ((prev: number) => number)) => {
+    list.setSelectedIndex(value);
+    onSelectedIndexChange?.(selectedIndex());
+  };
+
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+    if (key.name === "escape" || key.name === "q") {
+      onBack?.();
+      return;
+    }
+
+    if (key.name === "down") {
+      updateSelectedIndex((prev) => prev + 1);
+      return;
+    }
+
+    if (key.name === "up") {
+      updateSelectedIndex((prev) => prev - 1);
+      return;
+    }
+
+    if (key.name === "pageup") {
+      updateSelectedIndex((prev) => prev - listHeight());
+      return;
+    }
+
+    if (key.name === "pagedown") {
+      updateSelectedIndex((prev) => prev + listHeight());
+      return;
+    }
+
+    if (key.name === "home") {
+      updateSelectedIndex(0);
+      return;
+    }
+
+    if (key.name === "end") {
+      updateSelectedIndex(items.length - 1);
+      return;
+    }
+
+    if (key.name === "return" || key.name === "linefeed") {
+      const item = items[selectedIndex()];
+      if (item) {
+        onSelect(item);
+      }
+    }
+  });
+
+  const footerActions = createMemo(() => {
+    const actions = [{ key: "enter", description: "Select" }];
+    if (onBack) {
+      actions.push({ key: "esc", description: "Back" });
+    }
+    return actions;
+  });
+
+  return (
+    <box flexDirection="column" height={terminal().rows}>
+      <Header title={title} titleColor="cyan" version={version} />
+      {description && <text>{description}</text>}
+
+      <box flexDirection="column" flexGrow={1}>
+        {items.length === 0 ? (
+          <text fg="gray">{emptyMessage}</text>
+        ) : (
+          <box flexDirection="column">
+            {list.visibleItems().map((item, index) => {
+              const absoluteIndex = list.scrollOffset() + index;
+              const isSelected = absoluteIndex === selectedIndex();
+              const descriptionText =
+                showDescription && item.description
+                  ? ` - ${item.description}`
+                  : "";
+              const fullLine = `${item.label}${descriptionText}`;
+              return (
+                <box flexDirection="row">
+                  {isSelected ? (
+                    <text fg={selectionStyle.fg} bg={selectionStyle.bg}>
+                      {padLine(fullLine, terminal().columns)}
+                    </text>
+                  ) : (
+                    <>
+                      <text>{item.label}</text>
+                      {showDescription && item.description ? (
+                        <text attributes={TextAttributes.DIM}>
+                          {` - ${item.description}`}
+                        </text>
+                      ) : null}
+                    </>
+                  )}
+                </box>
+              );
+            })}
+          </box>
+        )}
+      </box>
+
+      <Footer actions={footerActions()} />
+    </box>
+  );
+}

package/src/cli/ui/screens/solid/SettingsScreen.tsx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @opentui/solid */
+import { SelectorScreen } from "./SelectorScreen.js";
+
+export interface SettingsItem {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export interface SettingsScreenProps {
+  settings: SettingsItem[];
+  onSelect?: (setting: SettingsItem) => void;
+  onBack?: () => void;
+  version?: string | null;
+  helpVisible?: boolean;
+}
+
+export function SettingsScreen({
+  settings,
+  onSelect,
+  onBack,
+  version,
+  helpVisible = false,
+}: SettingsScreenProps) {
+  const items = settings.map((setting) => ({
+    label: setting.label,
+    value: setting.value,
+    ...(setting.description !== undefined
+      ? { description: setting.description }
+      : {}),
+  }));
+
+  const handleSelect = (item: { label: string; value: string }) => {
+    const setting = settings.find((entry) => entry.value === item.value);
+    if (setting) {
+      onSelect?.(setting);
+    }
+  };
+
+  return (
+    <SelectorScreen
+      title="gwt - Settings"
+      items={items}
+      onSelect={handleSelect}
+      {...(onBack ? { onBack } : {})}
+      {...(version !== undefined ? { version } : {})}
+      emptyMessage="No settings available."
+      showDescription
+      helpVisible={helpVisible}
+    />
+  );
+}

package/src/cli/ui/screens/solid/WorktreeCreateScreen.tsx

@@ -0,0 +1,136 @@
+/** @jsxImportSource @opentui/solid */
+import { createSignal } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { Header } from "../../components/solid/Header.js";
+import { Footer } from "../../components/solid/Footer.js";
+import { TextInput } from "../../components/solid/TextInput.js";
+import {
+  SelectInput,
+  type SelectInputItem,
+} from "../../components/solid/SelectInput.js";
+import { useTerminalSize } from "../../hooks/solid/useTerminalSize.js";
+
+export type BranchTypeOption = "feature" | "bugfix" | "hotfix" | "release";
+
+export interface WorktreeCreateScreenProps {
+  branchName: string;
+  onChange: (value: string) => void;
+  onInput?: (value: string) => void;
+  onSubmit: (value: string, branchType: BranchTypeOption) => void;
+  onCancel?: () => void;
+  baseBranch?: string;
+  version?: string | null;
+  helpVisible?: boolean;
+}
+
+const BRANCH_TYPE_OPTIONS: SelectInputItem[] = [
+  { label: "feature", value: "feature", description: "New feature" },
+  { label: "bugfix", value: "bugfix", description: "Bug fix" },
+  { label: "hotfix", value: "hotfix", description: "Critical bug fix" },
+  { label: "release", value: "release", description: "Release preparation" },
+];
+
+export function WorktreeCreateScreen({
+  branchName,
+  onChange,
+  onInput,
+  onSubmit,
+  onCancel,
+  baseBranch,
+  version,
+  helpVisible = false,
+}: WorktreeCreateScreenProps) {
+  const terminal = useTerminalSize();
+  const inputHeight = 2;
+
+  const [step, setStep] = createSignal<"type-selection" | "name-input">(
+    "type-selection",
+  );
+  const [selectedType, setSelectedType] =
+    createSignal<BranchTypeOption>("feature");
+
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+    if (key.name === "escape") {
+      if (step() === "name-input") {
+        // Go back to type selection
+        setStep("type-selection");
+        onChange("");
+      } else {
+        // Cancel from type selection
+        onCancel?.();
+      }
+    }
+  });
+
+  const handleTypeSelect = (item: SelectInputItem) => {
+    setSelectedType(item.value as BranchTypeOption);
+    setStep("name-input");
+  };
+
+  const handleNameSubmit = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return;
+    }
+    onSubmit(trimmed, selectedType());
+  };
+
+  const footerActionsTypeSelection = [
+    { key: "enter", description: "Select" },
+    { key: "up/down", description: "Navigate" },
+    ...(onCancel ? [{ key: "esc", description: "Cancel" }] : []),
+  ];
+
+  const footerActionsNameInput = [
+    { key: "enter", description: "Create" },
+    { key: "esc", description: "Back" },
+  ];
+
+  return (
+    <box flexDirection="column" height={terminal().rows}>
+      <Header
+        title="gwt - Worktree Create"
+        titleColor="cyan"
+        version={version}
+      />
+      {baseBranch && <text fg="gray">{`Base: ${baseBranch}`}</text>}
+
+      {step() === "type-selection" ? (
+        <>
+          <text fg="white">Select branch type:</text>
+          <box height={4}>
+            <SelectInput
+              items={BRANCH_TYPE_OPTIONS}
+              selectedIndex={BRANCH_TYPE_OPTIONS.findIndex(
+                (item) => item.value === selectedType(),
+              )}
+              onSelect={handleTypeSelect}
+              focused
+              showDescription
+            />
+          </box>
+          <Footer actions={footerActionsTypeSelection} />
+        </>
+      ) : (
+        <>
+          <text fg="gray">{`Type: ${selectedType()}/`}</text>
+          <box height={inputHeight}>
+            <TextInput
+              label="Branch name"
+              value={branchName}
+              onChange={onChange}
+              onInput={onInput ?? onChange}
+              onSubmit={handleNameSubmit}
+              focused
+              width={32}
+            />
+          </box>
+          <Footer actions={footerActionsNameInput} />
+        </>
+      )}
+    </box>
+  );
+}

package/src/cli/ui/screens/solid/WorktreeDeleteScreen.tsx

@@ -0,0 +1,40 @@
+/** @jsxImportSource @opentui/solid */
+import { Header } from "../../components/solid/Header.js";
+import { ConfirmScreen } from "./ConfirmScreen.js";
+import { useTerminalSize } from "../../hooks/solid/useTerminalSize.js";
+
+export interface WorktreeDeleteScreenProps {
+  branchName: string;
+  worktreePath?: string | null;
+  onConfirm: (confirmed: boolean) => void;
+  version?: string | null;
+  helpVisible?: boolean;
+}
+
+export function WorktreeDeleteScreen({
+  branchName,
+  worktreePath,
+  onConfirm,
+  version,
+  helpVisible = false,
+}: WorktreeDeleteScreenProps) {
+  const terminal = useTerminalSize();
+  const message = `Delete worktree for ${branchName}?`;
+
+  return (
+    <box flexDirection="column" height={terminal().rows}>
+      <Header
+        title="gwt - Worktree Delete"
+        titleColor="cyan"
+        version={version}
+      />
+      {worktreePath && <text fg="gray">{worktreePath}</text>}
+      <ConfirmScreen
+        message={message}
+        onConfirm={onConfirm}
+        defaultNo
+        helpVisible={helpVisible}
+      />
+    </box>
+  );
+}

package/src/cli/ui/stores/appStore.ts

@@ -0,0 +1,208 @@
+/**
+ * App Store - Application-wide state management for SolidJS
+ *
+ * This store manages navigation, screen state, and application-level concerns.
+ * Uses SolidJS's fine-grained reactivity with signals and stores.
+ *
+ * @see specs/SPEC-d27be71b/spec.md - OpenTUI migration spec
+ */
+
+import { createSignal, createRoot } from "solid-js";
+import { createStore } from "solid-js/store";
+import type { ScreenType, Screen } from "../core/types.js";
+
+// ========================================
+// Types
+// ========================================
+
+export interface AppState {
+  /** Current active screen */
+  currentScreen: ScreenType;
+  /** Screen stack for navigation history */
+  screenStack: Screen[];
+  /** Is help overlay visible */
+  helpVisible: boolean;
+  /** Application version */
+  version: string | null;
+  /** Current working directory */
+  workingDirectory: string;
+  /** Active profile name */
+  activeProfile: string | null;
+}
+
+// ========================================
+// Initial State
+// ========================================
+
+const initialState: AppState = {
+  currentScreen: "branch-list",
+  screenStack: [],
+  helpVisible: false,
+  version: null,
+  workingDirectory: process.cwd(),
+  activeProfile: null,
+};
+
+// ========================================
+// Store Creation
+// ========================================
+
+/**
+ * Create the app store with actions
+ *
+ * Usage in SolidJS components:
+ * ```tsx
+ * import { appStore, appActions } from './stores/appStore';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div>
+ *       <p>Current screen: {appStore.currentScreen}</p>
+ *       <button onClick={() => appActions.navigateTo('log-list')}>
+ *         Go to Logs
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function createAppStore() {
+  const [state, setState] = createStore<AppState>(initialState);
+
+  // Derived signals
+  const [isLoading, setIsLoading] = createSignal(false);
+
+  const actions = {
+    /**
+     * Navigate to a new screen
+     */
+    navigateTo(screen: ScreenType, data?: unknown): void {
+      setState("screenStack", (stack) => [
+        ...stack,
+        { type: state.currentScreen, state: "hidden", data },
+      ]);
+      setState("currentScreen", screen);
+    },
+
+    /**
+     * Go back to previous screen
+     */
+    goBack(): boolean {
+      const stack = state.screenStack;
+      if (stack.length === 0) return false;
+
+      const previousScreen = stack[stack.length - 1];
+      if (previousScreen) {
+        setState("screenStack", (s) => s.slice(0, -1));
+        setState("currentScreen", previousScreen.type);
+        return true;
+      }
+      return false;
+    },
+
+    /**
+     * Reset navigation to initial screen
+     */
+    resetNavigation(): void {
+      setState("screenStack", []);
+      setState("currentScreen", "branch-list");
+    },
+
+    /**
+     * Toggle help overlay visibility
+     */
+    toggleHelp(): void {
+      setState("helpVisible", (v) => !v);
+    },
+
+    /**
+     * Show help overlay
+     */
+    showHelp(): void {
+      setState("helpVisible", true);
+    },
+
+    /**
+     * Hide help overlay
+     */
+    hideHelp(): void {
+      setState("helpVisible", false);
+    },
+
+    /**
+     * Set application version
+     */
+    setVersion(version: string | null): void {
+      setState("version", version);
+    },
+
+    /**
+     * Set working directory
+     */
+    setWorkingDirectory(dir: string): void {
+      setState("workingDirectory", dir);
+    },
+
+    /**
+     * Set active profile
+     */
+    setActiveProfile(profile: string | null): void {
+      setState("activeProfile", profile);
+    },
+
+    /**
+     * Initialize app state
+     */
+    initialize(config: {
+      version?: string | null;
+      workingDirectory?: string;
+      activeProfile?: string | null;
+    }): void {
+      if (config.version !== undefined) setState("version", config.version);
+      if (config.workingDirectory)
+        setState("workingDirectory", config.workingDirectory);
+      if (config.activeProfile !== undefined)
+        setState("activeProfile", config.activeProfile);
+    },
+  };
+
+  return {
+    state,
+    actions,
+    // Derived state
+    isLoading,
+    setIsLoading,
+  };
+}
+
+// ========================================
+// Singleton Export
+// ========================================
+
+// Create store in a reactive root for proper cleanup
+let _store: ReturnType<typeof createAppStore> | null = null;
+
+export function getAppStore() {
+  if (!_store) {
+    createRoot(() => {
+      _store = createAppStore();
+    });
+  }
+  // Store is guaranteed to be initialized by createRoot
+  return _store as ReturnType<typeof createAppStore>;
+}
+
+// Convenience exports for direct access
+export const appStore = new Proxy({} as AppState, {
+  get: (_, prop) => getAppStore().state[prop as keyof AppState],
+});
+
+export const appActions = new Proxy(
+  {} as ReturnType<typeof createAppStore>["actions"],
+  {
+    get: (_, prop) =>
+      getAppStore().actions[
+        prop as keyof ReturnType<typeof createAppStore>["actions"]
+      ],
+  },
+);