@akiojin/gwt 4.10.0 → 4.12.0

package/src/cli/ui/components/{parts → solid}/Header.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Box, Text } from "ink";
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
 
 export interface HeaderProps {
   title: string;
@@ -32,47 +32,36 @@ export interface HeaderProps {
   activeProfile?: string | null | undefined;
 }
 
-/**
- * Header component - displays title and optional divider
- * Optimized with React.memo to prevent unnecessary re-renders
- */
-export const Header = React.memo(function Header({
+export function Header({
   title,
   titleColor = "cyan",
-  dividerChar = "─",
+  dividerChar = "-",
   showDivider = true,
   width = 80,
   version,
   workingDirectory,
   activeProfile,
 }: HeaderProps) {
-  const divider = dividerChar.repeat(width);
+  const divider = dividerChar.repeat(Math.max(0, width));
 
-  // タイトル構築: "gwt v2.14 | Profile: development" または "gwt v2.14 | Profile: (none)"
   let displayTitle = version ? `${title} v${version}` : title;
   if (activeProfile !== undefined) {
     const profileLabel = activeProfile ?? "(none)";
-    displayTitle = `${displayTitle} | Profile: ${profileLabel}`;
+    displayTitle = `${displayTitle} | Profile(p): ${profileLabel}`;
   }
 
   return (
-    <Box flexDirection="column">
-      <Box>
-        <Text bold color={titleColor}>
-          {displayTitle}
-        </Text>
-      </Box>
-      {showDivider && (
-        <Box>
-          <Text dimColor>{divider}</Text>
-        </Box>
-      )}
+    <box flexDirection="column">
+      <text fg={titleColor} attributes={TextAttributes.BOLD}>
+        {displayTitle}
+      </text>
+      {showDivider && <text attributes={TextAttributes.DIM}>{divider}</text>}
       {workingDirectory && (
-        <Box>
-          <Text dimColor>Working Directory: </Text>
-          <Text>{workingDirectory}</Text>
-        </Box>
+        <box flexDirection="row">
+          <text attributes={TextAttributes.DIM}>Working Directory: </text>
+          <text>{workingDirectory}</text>
+        </box>
       )}
-    </Box>
+    </box>
   );
-});
+}

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

@@ -0,0 +1,194 @@
+/** @jsxImportSource @opentui/solid */
+import { useTerminalDimensions } from "@opentui/solid";
+import { createMemo } from "solid-js";
+import stringWidth from "string-width";
+import {
+  formatKeyCombination,
+  getKeybindingsForAction,
+  getKeybindingsForContext,
+  type KeybindingDef,
+} from "../../core/keybindings.js";
+
+export interface HelpOverlayProps {
+  visible: boolean;
+  context?: string;
+  title?: string;
+  maxWidth?: number;
+}
+
+interface HelpItem {
+  key: string;
+  description: string;
+}
+
+const DEFAULT_TITLE = "Help";
+const DEFAULT_MAX_WIDTH = 76;
+const COLUMN_GAP = 2;
+const MIN_COLUMN_WIDTH = 18;
+const MIN_CONTENT_WIDTH = 10;
+const ELLIPSIS = "...";
+
+const measureWidth = (value: string): number => stringWidth(value);
+
+const truncateToWidth = (value: string, width: number): string => {
+  if (width <= 0) {
+    return "";
+  }
+  if (measureWidth(value) <= width) {
+    return value;
+  }
+  if (width <= ELLIPSIS.length) {
+    return value.slice(0, width);
+  }
+
+  let currentWidth = 0;
+  let result = "";
+  for (const char of Array.from(value)) {
+    const charWidth = measureWidth(char);
+    if (currentWidth + charWidth > width - ELLIPSIS.length) {
+      break;
+    }
+    result += char;
+    currentWidth += charWidth;
+  }
+  return `${result}${ELLIPSIS}`;
+};
+
+const fitText = (value: string, width: number): string => {
+  if (width <= 0) {
+    return "";
+  }
+  const truncated = truncateToWidth(value, width);
+  const padding = Math.max(0, width - measureWidth(truncated));
+  return truncated + " ".repeat(padding);
+};
+
+const normalizeKeyLabel = (combo: KeybindingDef["key"]): string => {
+  return formatKeyCombination(combo);
+};
+
+const buildHelpItems = (context?: string): HelpItem[] => {
+  const items: HelpItem[] = [];
+  const seen = new Set<string>();
+  const targetContext = context ?? "branch-list";
+
+  const appendBinding = (binding: KeybindingDef) => {
+    const key = normalizeKeyLabel(binding.key);
+    const description = binding.description;
+    const id = `${key}|${description}`;
+    if (seen.has(id)) {
+      return;
+    }
+    seen.add(id);
+    items.push({ key, description });
+  };
+
+  for (const binding of getKeybindingsForContext(targetContext)) {
+    if (binding.action === "show-help") {
+      continue;
+    }
+    appendBinding(binding);
+  }
+
+  for (const binding of getKeybindingsForAction("hide-help")) {
+    appendBinding(binding);
+  }
+
+  return items;
+};
+
+export function HelpOverlay({
+  visible,
+  context,
+  title = DEFAULT_TITLE,
+  maxWidth = DEFAULT_MAX_WIDTH,
+}: HelpOverlayProps) {
+  const terminal = useTerminalDimensions();
+
+  const layout = createMemo(() => {
+    const width = terminal().width ?? 80;
+    const height = terminal().height ?? 24;
+    const safeWidth = Math.max(10, width - 2);
+    const overlayWidth = Math.min(maxWidth, safeWidth, width);
+    const contentWidth = Math.max(MIN_CONTENT_WIDTH, overlayWidth - 4);
+    const maxRows = Math.max(4, height - 6);
+
+    const items = buildHelpItems(context);
+    if (items.length === 0) {
+      return {
+        overlayWidth,
+        rows: [fitText("No keybindings available.", contentWidth)],
+      };
+    }
+
+    const keyWidth = Math.min(
+      16,
+      Math.max(4, ...items.map((item) => measureWidth(item.key))),
+    );
+
+    const lines = items.map(
+      (item) => `${fitText(item.key, keyWidth)} ${item.description}`,
+    );
+
+    const shouldUseTwoColumns =
+      lines.length > maxRows &&
+      contentWidth >= MIN_COLUMN_WIDTH * 2 + COLUMN_GAP;
+    const columnCount = shouldUseTwoColumns ? 2 : 1;
+    const columnGap = columnCount === 2 ? COLUMN_GAP : 0;
+    const columnWidth = Math.floor((contentWidth - columnGap) / columnCount);
+    const rowsPerColumn = Math.ceil(lines.length / columnCount);
+
+    const rows: string[] = [];
+    for (let row = 0; row < rowsPerColumn; row += 1) {
+      const left = lines[row] ?? "";
+      const right = columnCount === 2 ? (lines[row + rowsPerColumn] ?? "") : "";
+      const leftCell = fitText(left, columnWidth);
+      const rightCell = columnCount === 2 ? fitText(right, columnWidth) : "";
+      const rowText =
+        columnCount === 2
+          ? `${leftCell}${" ".repeat(columnGap)}${rightCell}`
+          : leftCell;
+      rows.push(rowText);
+    }
+
+    if (rows.length > maxRows) {
+      rows.splice(maxRows);
+      rows[maxRows - 1] = fitText("... more", columnWidth);
+    }
+
+    return { overlayWidth, rows };
+  });
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      zIndex={100}
+    >
+      <box
+        border
+        borderStyle="single"
+        borderColor="cyan"
+        padding={1}
+        width={layout().overlayWidth}
+        title={title}
+        titleAlignment="center"
+      >
+        <box flexDirection="column">
+          {layout().rows.map((row) => (
+            <text>{row}</text>
+          ))}
+        </box>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,209 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+import type { SelectRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import { createEffect, createMemo, createSignal } from "solid-js";
+import type { ToolSessionEntry } from "../../../../config/index.js";
+import { SelectInput, type SelectInputItem } from "./SelectInput.js";
+import { useWizardScroll } from "./WizardPopup.js";
+
+/**
+ * QuickStartStep - 前回履歴からのクイック選択ステップ
+ *
+ * FR-050: 前回履歴がある場合に表示
+ * FR-051: 「Choose different settings...」で設定選択フローへ
+ */
+
+export interface QuickStartStepProps {
+  history: ToolSessionEntry[];
+  onResume: (entry: ToolSessionEntry) => void;
+  onStartNew: (entry: ToolSessionEntry) => void;
+  onChooseDifferent: () => void;
+  onBack: () => void;
+  focused?: boolean;
+}
+
+interface QuickStartItem extends SelectInputItem {
+  action: "resume" | "start-new" | "choose-different";
+  entry?: ToolSessionEntry;
+}
+
+export function QuickStartStep(props: QuickStartStepProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectRef, setSelectRef] = createSignal<SelectRenderable | undefined>(
+    undefined,
+  );
+  const scroll = useWizardScroll();
+
+  // T506: 履歴がない場合は自動的に onChooseDifferent を呼ぶ
+  createEffect(() => {
+    if (props.history.length === 0) {
+      props.onChooseDifferent();
+    }
+  });
+
+  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[] = [];
+
+    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-${suffix}`,
+        description: settingsDesc,
+        action: "start-new",
+        entry,
+      });
+    });
+
+    // Add "Choose different settings..." at the end
+    result.push({
+      label: "Choose different settings...",
+      value: "choose-different",
+      description: "Configure manually",
+      action: "choose-different",
+    });
+
+    return result;
+  });
+
+  const ensureIndexVisible = (index: number) => {
+    if (!scroll) {
+      return;
+    }
+    const select = selectRef();
+    if (!select) {
+      return;
+    }
+    const linesPerItem = 2;
+    const startLine = select.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 (props.focused === false) {
+      return;
+    }
+    const count = items().length;
+    if (count <= 0) {
+      return;
+    }
+    const safeIndex = Math.min(Math.max(selectedIndex(), 0), count - 1);
+    ensureIndexVisible(safeIndex);
+  });
+
+  useKeyboard((key) => {
+    if (props.focused === false) {
+      return;
+    }
+    if (!scroll) {
+      return;
+    }
+    if (key.name !== "up" && key.name !== "down") {
+      return;
+    }
+    const count = items().length;
+    if (count <= 0) {
+      return;
+    }
+    const currentIndex = Math.min(Math.max(selectedIndex(), 0), count - 1);
+    const nextIndex =
+      key.name === "up"
+        ? Math.max(0, currentIndex - 1)
+        : Math.min(count - 1, currentIndex + 1);
+    if (nextIndex === currentIndex) {
+      return;
+    }
+    ensureIndexVisible(nextIndex);
+  });
+
+  const handleSelect = (item: SelectInputItem) => {
+    const quickItem = item as QuickStartItem;
+    switch (quickItem.action) {
+      case "resume":
+        if (quickItem.entry) {
+          props.onResume(quickItem.entry);
+        }
+        break;
+      case "start-new":
+        if (quickItem.entry) {
+          props.onStartNew(quickItem.entry);
+        }
+        break;
+      case "choose-different":
+        props.onChooseDifferent();
+        break;
+    }
+  };
+
+  const handleChange = (item: SelectInputItem | null) => {
+    if (!item) {
+      setSelectedIndex(0);
+      return;
+    }
+    const nextIndex = items().findIndex((candidate) => {
+      return candidate.value === item.value;
+    });
+    if (nextIndex >= 0) {
+      setSelectedIndex(nextIndex);
+    }
+  };
+
+  return (
+    <box flexDirection="column" padding={1}>
+      <text fg="cyan" attributes={TextAttributes.BOLD}>
+        Quick Start
+      </text>
+      <text> </text>
+      <SelectInput
+        items={items()}
+        onSelect={handleSelect}
+        onChange={handleChange}
+        focused={props.focused ?? true}
+        showDescription={true}
+        selectRef={setSelectRef}
+      />
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>
+        [Esc] Cancel [Enter] Select [Up/Down] Navigate
+      </text>
+    </box>
+  );
+}

package/src/cli/ui/components/{parts → solid}/ScrollableList.tsx

@@ -1,24 +1,23 @@
-import React, { type ReactNode } from "react";
-import { Box } from "ink";
+/** @jsxImportSource @opentui/solid */
+import type { JSX } from "solid-js";
 
 export interface ScrollableListProps {
-  children: ReactNode;
+  children: JSX.Element;
   maxHeight?: number;
 }
 
 /**
  * ScrollableList component - container for scrollable content
- * Note: Actual scrolling is handled by ink-select-input's limit prop
- * This component provides a consistent container for list content
+ * Note: actual scrolling is handled by list components using their own limits
  */
 export function ScrollableList({ children, maxHeight }: ScrollableListProps) {
   return (
-    <Box
+    <box
       flexDirection="column"
-      {...(maxHeight !== undefined && { height: maxHeight })}
       overflow="hidden"
+      {...(maxHeight !== undefined && { height: maxHeight })}
     >
       {children}
-    </Box>
+    </box>
   );
 }

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

@@ -0,0 +1,42 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+
+export interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  placeholder?: string;
+  count?: { filtered: number; total: number };
+  focused?: boolean;
+}
+
+export function SearchInput({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Search...",
+  count,
+  focused,
+}: SearchInputProps) {
+  const inputWidth = Math.max(10, value.length, placeholder.length);
+  const isFocused = focused ?? true;
+
+  return (
+    <box flexDirection="row">
+      <text attributes={TextAttributes.DIM}>Search: </text>
+      <input
+        value={value}
+        onChange={onChange}
+        {...(onSubmit ? { onSubmit } : {})}
+        placeholder={placeholder}
+        width={inputWidth}
+        focused={isFocused}
+      />
+      {count && (
+        <text attributes={TextAttributes.DIM}>
+          {` ${count.filtered} / ${count.total}`}
+        </text>
+      )}
+    </box>
+  );
+}

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

@@ -0,0 +1,88 @@
+/** @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;
+  value: string;
+  description?: string;
+}
+
+export interface SelectInputProps {
+  items: SelectInputItem[];
+  selectedIndex?: number;
+  onSelect?: (item: SelectInputItem) => void;
+  onChange?: (item: SelectInputItem | null) => void;
+  focused?: boolean;
+  showDescription?: boolean;
+  wrapSelection?: boolean;
+  /** 明示的に高さを指定。undefined の場合はアイテム数から計算 */
+  height?: number;
+  selectRef?: Ref<SelectRenderable>;
+}
+
+export function SelectInput(props: SelectInputProps) {
+  // Solid.js ではpropsを分割代入するとreactivityが失われるため、propsを直接参照
+  const options = () =>
+    props.items.map((item) => ({
+      name: item.label,
+      description: item.description ?? "",
+      value: item.value,
+    })) as SelectOption[];
+
+  // 高さを計算: 明示的指定がなければアイテム数から計算
+  // showDescription が有効の場合は各アイテムに2行使用
+  const computedHeight = () => {
+    if (props.height !== undefined) {
+      return props.height;
+    }
+    const itemCount = props.items.length;
+    const linesPerItem = props.showDescription ? 2 : 1;
+    return itemCount * linesPerItem;
+  };
+
+  const handleSelect = (index: number, option: SelectOption | null) => {
+    // T412: focused が false の間は選択を無視（キー伝播防止）
+    if (props.focused === false) {
+      return;
+    }
+    if (index < 0) {
+      return;
+    }
+    const item = props.items[index];
+    if (!item || !option) {
+      return;
+    }
+    props.onSelect?.(item);
+  };
+
+  const handleChange = (index: number, option: SelectOption | null) => {
+    if (index < 0 || !option) {
+      props.onChange?.(null);
+      return;
+    }
+    props.onChange?.(props.items[index] ?? null);
+  };
+
+  return (
+    <box flexDirection="column">
+      <select
+        options={options()}
+        height={computedHeight()}
+        selectedBackgroundColor={selectionStyle.bg}
+        selectedTextColor={selectionStyle.fg}
+        selectedDescriptionColor={selectionStyle.fg}
+        {...(props.selectedIndex !== undefined && {
+          selectedIndex: props.selectedIndex,
+        })}
+        {...(props.focused !== undefined && { focused: props.focused })}
+        showDescription={props.showDescription ?? false}
+        wrapSelection={props.wrapSelection ?? false}
+        onSelect={handleSelect}
+        onChange={handleChange}
+        {...(props.selectRef ? { ref: props.selectRef } : {})}
+      />
+    </box>
+  );
+}