bin/cli/tui/InterfaceMenu.jsx

import React, { useState } from "react";
import { render, Box, Text, useInput } from "ink";
import { MenuSelect } from "../tui-components/MenuSelect.jsx";

function InterfaceMenuApp({ version, baseUrl, hasUpdate, latestVersion, onChoice }) {
  return (
    <Box flexDirection="column" paddingX={2} paddingY={1}>

      <Box borderStyle="double" borderColor="cyan" paddingX={2} paddingY={1} flexDirection="column">

        <Text bold color="cyan">

          ⚡ OmniRoute {version ? `v${version}` : ""}

        </Text>

        <Text dimColor>{baseUrl}</Text>

      </Box>

      {hasUpdate && (

        <Box marginTop={1}>

          <Text color="yellow">

            ↑ Update available: v{latestVersion} (run `omniroute update --apply`)

          </Text>

        </Box>

      )}

      <Box marginTop={1}>

        <MenuSelect

          items={[

            { label: "🌐 Open Web UI in Browser", hint: "(default)" },

            { label: "💻 Interactive TUI Dashboard" },

            { label: "🔔 Start in Background (daemon)" },

            { label: "📊 Show Live Logs" },

            { label: "🚪 Exit" },

          ]}

          onSelect={(item) => onChoice(item.label)}

        />

      </Box>

      <Box marginTop={1}>

        <Text dimColor>[↑↓] navigate [Enter] select [1-5] shortcut [q] exit</Text>

      </Box>

    </Box>
  );
}

export async function showInterfaceMenu({ version, baseUrl, hasUpdate, latestVersion } = {}) {
  return new Promise((resolve) => {
    const { unmount } = render(
      <InterfaceMenuApp

        version={version}

        baseUrl={baseUrl}

        hasUpdate={hasUpdate}

        latestVersion={latestVersion}

        onChoice={(choice) => {

          unmount();

          resolve(choice);

        }}

      />
    );
  });
}