@akiojin/gwt 4.10.0 → 4.11.6

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

@@ -0,0 +1,192 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import { createMemo } from "solid-js";
+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";
+
+export interface ProfileEnvVariable {
+  key: string;
+  value: string;
+}
+
+export interface ProfileEnvScreenProps {
+  profileName: string;
+  variables: ProfileEnvVariable[];
+  onAdd?: () => void;
+  onEdit?: (variable: ProfileEnvVariable) => void;
+  onDelete?: (variable: ProfileEnvVariable) => void;
+  onViewOsEnv?: () => void;
+  onBack?: () => void;
+  version?: string | null;
+  helpVisible?: boolean;
+}
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+export function ProfileEnvScreen({
+  profileName,
+  variables,
+  onAdd,
+  onEdit,
+  onDelete,
+  onViewOsEnv,
+  onBack,
+  version,
+  helpVisible = false,
+}: ProfileEnvScreenProps) {
+  const terminal = useTerminalSize();
+  const listHeight = createMemo(() => {
+    const headerRows = 2;
+    const footerRows = 1;
+    const reserved = headerRows + footerRows;
+    return Math.max(1, terminal().rows - reserved);
+  });
+
+  const list = useScrollableList({
+    items: () => variables,
+    visibleCount: listHeight,
+    initialIndex: 0,
+  });
+
+  const updateSelectedIndex = (value: number | ((prev: number) => number)) => {
+    list.setSelectedIndex(value);
+  };
+
+  const getSelectedVariable = () => {
+    const index = clamp(list.selectedIndex(), 0, variables.length - 1);
+    return variables[index];
+  };
+
+  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(variables.length - 1);
+      return;
+    }
+
+    if (key.name === "a") {
+      onAdd?.();
+      return;
+    }
+
+    if (key.name === "e" || key.name === "return" || key.name === "linefeed") {
+      const variable = getSelectedVariable();
+      if (variable) {
+        onEdit?.(variable);
+      }
+      return;
+    }
+
+    if (key.name === "d") {
+      const variable = getSelectedVariable();
+      if (variable) {
+        onDelete?.(variable);
+      }
+      return;
+    }
+
+    if (key.name === "o") {
+      onViewOsEnv?.();
+    }
+  });
+
+  const footerActions = createMemo(() => {
+    const actions = [] as { key: string; description: string }[];
+    if (onAdd) {
+      actions.push({ key: "a", description: "Add" });
+    }
+    if (onEdit) {
+      actions.push({ key: "enter", description: "Edit" });
+    }
+    if (onDelete) {
+      actions.push({ key: "d", description: "Delete" });
+    }
+    if (onViewOsEnv) {
+      actions.push({ key: "o", description: "OS Env" });
+    }
+    if (onBack) {
+      actions.push({ key: "esc", description: "Back" });
+    }
+    return actions;
+  });
+
+  return (
+    <box flexDirection="column" height={terminal().rows}>
+      <Header
+        title={`gwt - Profile: ${profileName}`}
+        titleColor="cyan"
+        version={version}
+      />
+
+      <box flexDirection="column" flexGrow={1}>
+        {variables.length === 0 ? (
+          <text fg="gray">No variables in profile.</text>
+        ) : (
+          <box flexDirection="column">
+            {list.visibleItems().map((variable, index) => {
+              const absoluteIndex = list.scrollOffset() + index;
+              const isSelected = absoluteIndex === list.selectedIndex();
+              const attributes = isSelected ? TextAttributes.BOLD : undefined;
+              const color = isSelected ? "cyan" : undefined;
+              return (
+                <box flexDirection="row">
+                  <text
+                    {...(color ? { fg: color } : {})}
+                    {...(attributes !== undefined ? { attributes } : {})}
+                  >
+                    {variable.key}
+                  </text>
+                  <text
+                    {...(color ? { fg: color } : {})}
+                    {...(attributes !== undefined ? { attributes } : {})}
+                  >
+                    ={variable.value}
+                  </text>
+                </box>
+              );
+            })}
+          </box>
+        )}
+      </box>
+
+      <Footer actions={footerActions()} />
+    </box>
+  );
+}

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,170 @@
+/** @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";
+
+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);
+
+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();
+              return (
+                <box flexDirection="row">
+                  <text
+                    {...(isSelected
+                      ? { fg: "cyan", attributes: TextAttributes.BOLD }
+                      : {})}
+                  >
+                    {item.label}
+                  </text>
+                  {showDescription && item.description ? (
+                    <text
+                      attributes={TextAttributes.DIM}
+                      {...(isSelected ? { fg: "cyan" } : {})}
+                    >
+                      {` - ${item.description}`}
+                    </text>
+                  ) : null}
+                </box>
+              );
+            })}
+          </box>
+        )}
+      </box>
+
+      <Footer actions={footerActions()} />
+    </box>
+  );
+}

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

@@ -0,0 +1,50 @@
+/** @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,
+    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={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>
+  );
+}