@akiojin/gwt 4.10.0 → 4.11.6

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

@@ -0,0 +1,74 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import { createSignal } from "solid-js";
+
+export interface ConfirmScreenProps {
+  message: string;
+  onConfirm: (confirmed: boolean) => void;
+  yesLabel?: string;
+  noLabel?: string;
+  defaultNo?: boolean;
+  helpVisible?: boolean;
+}
+
+export function ConfirmScreen({
+  message,
+  onConfirm,
+  yesLabel = "Yes",
+  noLabel = "No",
+  defaultNo = false,
+  helpVisible = false,
+}: ConfirmScreenProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(defaultNo ? 1 : 0);
+
+  const confirm = (confirmed: boolean) => {
+    onConfirm(confirmed);
+  };
+
+  const toggleSelection = () => {
+    setSelectedIndex((current) => (current === 0 ? 1 : 0));
+  };
+
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+    if (key.name === "up" || key.name === "down" || key.name === "tab") {
+      toggleSelection();
+      return;
+    }
+
+    if (key.name === "y") {
+      confirm(true);
+      return;
+    }
+
+    if (key.name === "n" || key.name === "escape") {
+      confirm(false);
+      return;
+    }
+
+    if (key.name === "return" || key.name === "linefeed") {
+      confirm(selectedIndex() === 0);
+    }
+  });
+
+  const renderOption = (label: string, isSelected: boolean) => (
+    <text
+      {...(isSelected ? { fg: "cyan", attributes: TextAttributes.BOLD } : {})}
+    >
+      {label}
+    </text>
+  );
+
+  return (
+    <box flexDirection="column">
+      <text>{message}</text>
+      <box flexDirection="column">
+        {renderOption(yesLabel, selectedIndex() === 0)}
+        {renderOption(noLabel, selectedIndex() === 1)}
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,159 @@
+/** @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 EnvironmentVariable {
+  key: string;
+  value: string;
+}
+
+export interface EnvironmentScreenProps {
+  variables: EnvironmentVariable[];
+  onSelect?: (variable: EnvironmentVariable) => void;
+  onBack?: () => void;
+  version?: string | null;
+  highlightKeys?: string[];
+  helpVisible?: boolean;
+}
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+export function EnvironmentScreen({
+  variables,
+  onSelect,
+  onBack,
+  version,
+  highlightKeys,
+  helpVisible = false,
+}: EnvironmentScreenProps) {
+  const terminal = useTerminalSize();
+  const listHeight = createMemo(() => {
+    const headerRows = 2;
+    const footerRows = 1;
+    const reserved = headerRows + footerRows;
+    return Math.max(1, terminal().rows - reserved);
+  });
+
+  const highlightSet = createMemo(() => new Set(highlightKeys ?? []));
+
+  const list = useScrollableList({
+    items: () => variables,
+    visibleCount: listHeight,
+    initialIndex: 0,
+  });
+
+  const updateSelectedIndex = (value: number | ((prev: number) => number)) => {
+    list.setSelectedIndex(value);
+  };
+
+  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 === "return" || key.name === "linefeed") {
+      const item =
+        variables[clamp(list.selectedIndex(), 0, variables.length - 1)];
+      if (item) {
+        onSelect?.(item);
+      }
+    }
+  });
+
+  const footerActions = createMemo(() => {
+    const actions = [] as { key: string; description: string }[];
+    if (onSelect) {
+      actions.push({ key: "enter", description: "Select" });
+    }
+    if (onBack) {
+      actions.push({ key: "esc", description: "Back" });
+    }
+    return actions;
+  });
+
+  return (
+    <box flexDirection="column" height={terminal().rows}>
+      <Header title="gwt - Environment" titleColor="cyan" version={version} />
+
+      <box flexDirection="column" flexGrow={1}>
+        {variables.length === 0 ? (
+          <text fg="gray">No environment variables.</text>
+        ) : (
+          <box flexDirection="column">
+            {list.visibleItems().map((variable, index) => {
+              const absoluteIndex = list.scrollOffset() + index;
+              const isSelected = absoluteIndex === list.selectedIndex();
+              const isHighlighted = highlightSet().has(variable.key);
+              const attributes = isSelected ? TextAttributes.BOLD : undefined;
+              const keyColor = isSelected
+                ? "cyan"
+                : isHighlighted
+                  ? "yellow"
+                  : undefined;
+              const valueColor = isSelected ? "cyan" : undefined;
+              return (
+                <box flexDirection="row">
+                  <text
+                    {...(keyColor ? { fg: keyColor } : {})}
+                    {...(attributes !== undefined ? { attributes } : {})}
+                  >
+                    {variable.key}
+                  </text>
+                  <text
+                    {...(valueColor ? { fg: valueColor } : {})}
+                    {...(attributes !== undefined ? { attributes } : {})}
+                  >
+                    ={variable.value}
+                  </text>
+                </box>
+              );
+            })}
+          </box>
+        )}
+      </box>
+
+      <Footer actions={footerActions()} />
+    </box>
+  );
+}

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

@@ -0,0 +1,42 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+
+export interface ErrorScreenProps {
+  error: Error | string;
+  hint?: string;
+  onBack?: () => void;
+  helpVisible?: boolean;
+}
+
+const resolveMessage = (error: Error | string): string =>
+  typeof error === "string" ? error : error.message;
+
+export function ErrorScreen({
+  error,
+  hint,
+  onBack,
+  helpVisible = false,
+}: ErrorScreenProps) {
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+    if (key.name === "escape" || key.name === "return") {
+      onBack?.();
+    }
+  });
+
+  const message = resolveMessage(error);
+
+  return (
+    <box flexDirection="column">
+      <text
+        fg="red"
+        attributes={TextAttributes.BOLD}
+      >{`Error: ${message}`}</text>
+      {hint && <text>{hint}</text>}
+      {onBack && <text fg="gray">Press Enter or Esc to go back</text>}
+    </box>
+  );
+}

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

@@ -0,0 +1,55 @@
+/** @jsxImportSource @opentui/solid */
+import { useKeyboard } from "@opentui/solid";
+import { TextInput } from "../../components/solid/TextInput.js";
+
+export interface InputScreenProps {
+  message: string;
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  onCancel?: () => void;
+  placeholder?: string;
+  label?: string;
+  width?: number;
+  helpVisible?: boolean;
+}
+
+export function InputScreen({
+  message,
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder,
+  label,
+  width,
+  helpVisible = false,
+}: InputScreenProps) {
+  const inputHeight = label ? 2 : 1;
+
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+    if (key.name === "escape") {
+      onCancel?.();
+    }
+  });
+
+  return (
+    <box flexDirection="column">
+      <text>{message}</text>
+      <box height={inputHeight}>
+        <TextInput
+          value={value}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          {...(placeholder !== undefined ? { placeholder } : {})}
+          {...(label !== undefined ? { label } : {})}
+          {...(width !== undefined ? { width } : {})}
+          focused
+        />
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,77 @@
+/** @jsxImportSource @opentui/solid */
+import { createEffect, createMemo, createSignal } from "solid-js";
+
+export interface LoadingIndicatorScreenProps {
+  isLoading?: boolean;
+  message?: string;
+  delay?: number;
+  interval?: number;
+  frames?: string[];
+}
+
+const DEFAULT_FRAMES = ["|", "/", "-", "\\"];
+
+export function LoadingIndicatorScreen({
+  isLoading = true,
+  message = "Loading... please wait",
+  delay = 300,
+  interval = 80,
+  frames = DEFAULT_FRAMES,
+}: LoadingIndicatorScreenProps) {
+  const [visible, setVisible] = createSignal(isLoading && delay <= 0);
+  const [frameIndex, setFrameIndex] = createSignal(0);
+
+  const safeFrames = createMemo(() =>
+    frames.length > 0 ? frames : DEFAULT_FRAMES,
+  );
+
+  createEffect(() => {
+    if (!isLoading) {
+      setVisible(false);
+      setFrameIndex(0);
+      return;
+    }
+
+    if (delay <= 0) {
+      setVisible(true);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setVisible(true);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+
+  createEffect(() => {
+    if (!visible() || !isLoading) {
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setFrameIndex((current) => (current + 1) % safeFrames().length);
+    }, interval);
+
+    return () => {
+      clearInterval(timer);
+    };
+  });
+
+  const frame = createMemo(
+    () => safeFrames()[frameIndex()] ?? safeFrames()[0] ?? DEFAULT_FRAMES[0],
+  );
+
+  if (!isLoading || !visible()) {
+    return null;
+  }
+
+  return (
+    <box flexDirection="row">
+      <text fg="yellow">{frame()}</text>
+      <text fg="yellow">{` ${message}`}</text>
+    </box>
+  );
+}

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

@@ -0,0 +1,75 @@
+/** @jsxImportSource @opentui/solid */
+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 type { FormattedLogEntry } from "../../../../logging/formatter.js";
+
+export interface LogDetailScreenProps {
+  entry: FormattedLogEntry | null;
+  onBack: () => void;
+  onCopy: (entry: FormattedLogEntry) => void;
+  notification?: { message: string; tone: "success" | "error" } | null;
+  version?: string | null;
+  helpVisible?: boolean;
+}
+
+export function LogDetailScreen({
+  entry,
+  onBack,
+  onCopy,
+  notification,
+  version,
+  helpVisible = false,
+}: LogDetailScreenProps) {
+  const terminal = useTerminalSize();
+
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+    if (key.name === "escape" || key.name === "q") {
+      onBack();
+      return;
+    }
+
+    if (key.name === "c" && entry) {
+      onCopy(entry);
+    }
+  });
+
+  const jsonLines = createMemo(() => {
+    if (!entry) {
+      return ["No logs available."];
+    }
+    return entry.json.split("\n");
+  });
+
+  const footerActions = [
+    { key: "c", description: "Copy" },
+    { key: "esc", description: "Back" },
+  ];
+
+  return (
+    <box flexDirection="column" height={terminal().rows}>
+      <Header title="gwt - Log Detail" titleColor="cyan" version={version} />
+
+      {notification ? (
+        <box marginTop={1}>
+          <text fg={notification.tone === "error" ? "red" : "green"}>
+            {notification.message}
+          </text>
+        </box>
+      ) : null}
+
+      <box flexDirection="column" flexGrow={1} marginTop={1}>
+        {jsonLines().map((line) => (
+          <text>{line}</text>
+        ))}
+      </box>
+
+      <Footer actions={footerActions} />
+    </box>
+  );
+}

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

@@ -0,0 +1,175 @@
+/** @jsxImportSource @opentui/solid */
+import { useKeyboard } from "@opentui/solid";
+import { 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 type { FormattedLogEntry } from "../../../../logging/formatter.js";
+import { useScrollableList } from "../../hooks/solid/useScrollableList.js";
+
+export interface LogScreenProps {
+  entries: FormattedLogEntry[];
+  loading?: boolean;
+  error?: string | null;
+  onBack: () => void;
+  onSelect: (entry: FormattedLogEntry) => void;
+  onCopy: (entry: FormattedLogEntry) => void;
+  onPickDate?: () => void;
+  notification?: { message: string; tone: "success" | "error" } | null;
+  version?: string | null;
+  selectedDate?: string | null;
+  helpVisible?: boolean;
+}
+
+export function LogScreen({
+  entries,
+  loading = false,
+  error = null,
+  onBack,
+  onSelect,
+  onCopy,
+  onPickDate,
+  notification,
+  version,
+  selectedDate,
+  helpVisible = false,
+}: LogScreenProps) {
+  const terminal = useTerminalSize();
+  const listHeight = createMemo(() => {
+    const headerRows = 2;
+    const infoRows = 1;
+    const footerRows = 1;
+    const notificationRows = notification ? 1 : 0;
+    const reserved = headerRows + infoRows + footerRows + notificationRows;
+    return Math.max(1, terminal().rows - reserved);
+  });
+
+  const list = useScrollableList({
+    items: () => entries,
+    visibleCount: listHeight,
+  });
+
+  const currentEntry = createMemo(() => entries[list.selectedIndex()]);
+
+  const updateSelectedIndex = (value: number | ((prev: number) => number)) => {
+    list.setSelectedIndex(value);
+  };
+
+  useKeyboard((key) => {
+    if (helpVisible) {
+      return;
+    }
+    if (key.name === "escape" || key.name === "q") {
+      onBack();
+      return;
+    }
+
+    if (key.name === "c") {
+      const entry = currentEntry();
+      if (entry) {
+        onCopy(entry);
+      }
+      return;
+    }
+
+    if (key.name === "d") {
+      onPickDate?.();
+      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(entries.length - 1);
+      return;
+    }
+
+    if (key.name === "return" || key.name === "linefeed") {
+      const entry = currentEntry();
+      if (entry) {
+        onSelect(entry);
+      }
+    }
+  });
+
+  const footerActions = createMemo(() => {
+    const actions = [
+      { key: "enter", description: "Detail" },
+      { key: "c", description: "Copy" },
+      { key: "d", description: "Date" },
+      { key: "esc", description: "Back" },
+    ];
+    return actions;
+  });
+
+  return (
+    <box flexDirection="column" height={terminal().rows}>
+      <Header title="gwt - Log Viewer" titleColor="cyan" version={version} />
+
+      {notification ? (
+        <text fg={notification.tone === "error" ? "red" : "green"}>
+          {notification.message}
+        </text>
+      ) : null}
+
+      <box flexDirection="row">
+        <text attributes={TextAttributes.DIM}>Date: </text>
+        <text attributes={TextAttributes.BOLD}>{selectedDate ?? "---"}</text>
+        <text attributes={TextAttributes.DIM}> Total: </text>
+        <text attributes={TextAttributes.BOLD}>{entries.length}</text>
+      </box>
+
+      <box flexDirection="column" flexGrow={1}>
+        {loading ? (
+          <text fg="gray">Loading logs...</text>
+        ) : entries.length === 0 ? (
+          <text fg="gray">No logs available.</text>
+        ) : (
+          <box flexDirection="column">
+            {list.visibleItems().map((entry, index) => {
+              const absoluteIndex = list.scrollOffset() + index;
+              const isSelected = absoluteIndex === list.selectedIndex();
+              return (
+                <text
+                  {...(isSelected
+                    ? { fg: "cyan", attributes: TextAttributes.BOLD }
+                    : {})}
+                >
+                  {entry.summary}
+                </text>
+              );
+            })}
+          </box>
+        )}
+
+        {error ? <text fg="red">{error}</text> : null}
+      </box>
+
+      <Footer actions={footerActions()} />
+    </box>
+  );
+}