@akiojin/gwt 4.10.0 → 4.11.6

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

@@ -0,0 +1,197 @@
+/** @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();
+    }
+  });
+
+  // Build selection items from history
+  // 最新の履歴エントリのみを使用（重複排除済み）
+  const latestEntry = createMemo(() => props.history[0] ?? null);
+
+  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,
+      });
+
+      result.push({
+        label: "Start new (previous settings)",
+        value: `start-new-${entry.toolId}`,
+        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,84 @@
+/** @jsxImportSource @opentui/solid */
+import type { SelectOption, SelectRenderable } from "@opentui/core";
+import type { Ref } from "solid-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()}
+        {...(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>
+  );
+}

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>
+  );
+}