Architecture

src/
├── index.tsx              # Entry point and CLI initialization
├── App.tsx                # Root component with routing and state
├── theme.ts               # Color scheme and styling
├── components/            # TUI view components
│   ├── Home.tsx           # Command palette home screen
│   ├── NewDeployment.tsx  # Deployment creation wizard
│   ├── DeployView.tsx     # Deployment confirmation
│   ├── DeployingView.tsx  # Live deployment progress
│   ├── StatusView.tsx     # Deployment status dashboard
│   ├── ListView.tsx       # List all deployments
│   ├── SSHView.tsx        # SSH connection interface
│   ├── LogsView.tsx       # Log streaming view
│   ├── DashboardView.tsx  # Open dashboard in browser
│   ├── DestroyView.tsx    # Destroy deployment flow
│   ├── TemplatesView.tsx  # Template management
│   ├── ChannelsView.tsx   # Channel configuration
│   └── HelpView.tsx       # Help and documentation
├── services/              # Business logic and utilities
│   ├── config.ts          # Deployment config management
│   ├── deployment.ts      # Deployment orchestration
│   ├── secrets.ts         # Secure API key storage
│   ├── ssh.ts             # SSH client and operations
│   ├── templates.ts       # Template CRUD operations
│   ├── tunnel.ts          # Tailscale tunnel management
│   └── setup/             # Server provisioning steps
├── providers/             # Cloud provider integrations
│   ├── index.ts           # Provider registry and constants
│   ├── hetzner/
│   │   ├── index.ts       # Hetzner provider implementation
│   │   └── api.ts         # Hetzner Cloud API client
│   └── digitalocean/
│       ├── index.ts       # DigitalOcean provider implementation
│       └── api.ts         # DigitalOcean API client
├── types/
│   └── index.ts           # TypeScript types and Zod schemas
└── utils/
    └── ...                # Shared utilities

<box flexDirection="column" width="100%">
  <text fg="#00ff00">Hello, Terminal!</text>
  <input
    value={inputValue}
    onChange={setInputValue}
    placeholder="Type here..."
  />
</box>

import { createCliRenderer } from "@opentui/core";
import { createRoot } from "@opentui/react";
import { App } from "./App.js";

const renderer = await createCliRenderer({
  useMouse: true,  // Enable mouse support
});
const root = createRoot(renderer);
root.render(<App />);

import { useKeyboard } from "@opentui/react";

useKeyboard((key) => {
  if (key.name === "down") {
    setSelectedIndex((prev) => prev + 1);
  } else if (key.name === "up") {
    setSelectedIndex((prev) => prev - 1);
  } else if (key.name === "tab") {
    handleCommand(filteredCommands[selectedIndex].name);
  }
});

const [currentView, setCurrentView] = useState<ViewName>("home");
const [selectedDeployment, setSelectedDeployment] = useState<string | null>(null);
const [deployments, setDeployments] = useState<Deployment[]>(() => {
  return getAllDeployments();
});

const navigateTo = useCallback((view: ViewName, deployment?: string) => {
  if (deployment !== undefined) {
    setSelectedDeployment(deployment);
  }
  setCurrentView(view);
  refreshDeployments();
}, [refreshDeployments]);

export interface AppContext {
  navigateTo: (view: ViewName, deployment?: string) => void;
  selectedDeployment: string | null;
  deployments: Deployment[];
  refreshDeployments: () => void;
  selectedTemplate: Template | null;
  setSelectedTemplate: (template: Template | null) => void;
  editingDeployment: EditingDeployment | null;
  setEditingDeployment: (ed: EditingDeployment | null) => void;
}

export type ViewName =
  | "home"        // Command palette
  | "new"         // Create deployment
  | "list"        // List deployments
  | "deploy"      // Confirm deployment
  | "deploying"   // Deployment in progress
  | "status"      // Status dashboard
  | "ssh"         // SSH connection
  | "logs"        // Log streaming
  | "dashboard"   // Open dashboard
  | "destroy"     // Destroy deployment
  | "help"        // Help screen
  | "templates"   // Manage templates
  | "channels";   // Channel config

const renderView = () => {
  switch (currentView) {
    case "home":
      return <Home context={context} />;
    case "new":
      return <NewDeployment context={context} />;
    case "deploy":
      return <DeployView context={context} />;
    // ... other views
    default:
      return <Home context={context} />;
  }
};

export interface ProviderClient {
  validateAPIKey(): Promise<boolean>;
  createServer(config: ServerConfig): Promise<Server>;
  getServer(id: string): Promise<Server>;
  deleteServer(id: string): Promise<void>;
  createSSHKey(name: string, publicKey: string): Promise<SSHKey>;
  deleteSSHKey(id: string): Promise<void>;
}

export type Provider = "hetzner" | "digitalocean" | "vultr";

export type DeploymentStatus =
  | "initialized"   // Config created, not yet deployed
  | "provisioning"  // Server being created
  | "configuring"   // Installing dependencies
  | "deployed"      // Fully deployed and running
  | "failed"        // Deployment failed
  | "updating";     // Being updated

export interface Deployment {
  config: DeploymentConfig;  // User configuration
  state: DeploymentState;    // Runtime state
  sshKeyPath: string;        // Path to SSH key
}

export const DeploymentConfigSchema = z.object({
  name: z.string().min(1, "Deployment name is required"),
  provider: ProviderSchema,
  createdAt: z.string(),
  hetzner: HetznerConfigSchema.optional(),
  digitalocean: DigitalOceanConfigSchema.optional(),
  openclawConfig: OpenClawConfigSchema,
  openclawAgent: OpenClawAgentConfigSchema.optional(),
  skipTailscale: z.boolean().optional(),
});

execFileSync("bun", [script, ...args], {
  stdio: "inherit",
});