lcluster 1.0.0

package/src/templates/manager.js

@@ -0,0 +1,66 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { fileURLToPath } from 'node:url';
+
+const CONFIG_DIR = path.join(os.homedir(), '.lcluster');
+const USER_TEMPLATES_DIR = path.join(CONFIG_DIR, 'templates');
+const BUILT_IN_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../built-in-templates');
+
+export function initTemplatesDir() {
+    if (!fs.existsSync(USER_TEMPLATES_DIR)) {
+        fs.mkdirSync(USER_TEMPLATES_DIR, { recursive: true });
+    }
+}
+
+export function listTemplates() {
+    initTemplatesDir();
+    const templates = [];
+
+    if (fs.existsSync(BUILT_IN_DIR)) {
+        const builtIn = fs.readdirSync(BUILT_IN_DIR).filter(f => f.endsWith('.yml'));
+        builtIn.forEach(f => templates.push({ name: f, builtin: true }));
+    }
+
+    const user = fs.readdirSync(USER_TEMPLATES_DIR).filter(f => f.endsWith('.yml'));
+    user.forEach(f => templates.push({ name: f, builtin: false }));
+
+    return templates;
+}
+
+export function getTemplate(name) {
+    initTemplatesDir();
+    const builtInPath = path.join(BUILT_IN_DIR, name);
+    const userPath = path.join(USER_TEMPLATES_DIR, name);
+
+    if (fs.existsSync(builtInPath)) {
+        return fs.readFileSync(builtInPath, 'utf8');
+    } else if (fs.existsSync(userPath)) {
+        return fs.readFileSync(userPath, 'utf8');
+    }
+    return null;
+}
+
+export function saveTemplate(name, content) {
+    initTemplatesDir();
+    const userPath = path.join(USER_TEMPLATES_DIR, name);
+    fs.writeFileSync(userPath, content, 'utf8');
+}
+
+export function deleteTemplate(name) {
+    initTemplatesDir();
+    const template = listTemplates().find(t => t.name === name);
+    if (!template) throw new Error('Template not found');
+    if (template.builtin) throw new Error('Cannot delete built-in template');
+
+    const userPath = path.join(USER_TEMPLATES_DIR, name);
+    if (fs.existsSync(userPath)) {
+        fs.unlinkSync(userPath);
+    }
+}
+
+export function copyTemplateTo(name, destPath) {
+    const content = getTemplate(name);
+    if (!content) throw new Error('Template not found');
+    fs.writeFileSync(path.join(destPath, 'application.yml'), content, 'utf8');
+}

package/src/templates/validator.js

@@ -0,0 +1,36 @@
+import yaml from 'js-yaml';
+
+export function validateTemplate(ymlString) {
+    try {
+        const doc = yaml.load(ymlString);
+        if (!doc) return 'Template is empty or invalid.';
+
+        if (!doc.server || !doc.server.port) {
+            return 'Missing required field: server.port';
+        }
+
+        if (!doc.lavalink || !doc.lavalink.server || !doc.lavalink.server.password) {
+            return 'Missing required field: lavalink.server.password';
+        }
+
+        if (!doc.lavalink.server.sources) {
+            return 'Missing required field: lavalink.server.sources';
+        }
+
+        return null; // Valid
+    } catch (e) {
+        return `YAML Error: ${e.message}`;
+    }
+}
+
+export function extractConfig(ymlString) {
+    try {
+        const doc = yaml.load(ymlString);
+        return {
+            port: doc?.server?.port,
+            password: doc?.lavalink?.server?.password
+        };
+    } catch {
+        return null;
+    }
+}

package/src/tui/components/Border.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { getTheme } from '../theme/index.js';
+
+export default function Border({ title, children, isSelected, flexDirection = 'column', width, height, flexGrow }) {
+    const theme = getTheme();
+    const color = isSelected ? theme.selectedBorder : theme.border;
+
+    return (
+        <Box
+            borderStyle="round"
+            borderColor={color}
+            flexDirection={flexDirection}
+            width={width}
+            height={height}
+            flexGrow={flexGrow}
+            paddingX={1}
+        >
+            {title && (
+                <Box marginTop={-1} marginLeft={1} marginBottom={1}>
+                    <Text color={color}> {title} </Text>
+                </Box>
+            )}
+            {children}
+        </Box>
+    );
+}

package/src/tui/components/KeyHints.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { getTheme } from '../theme/index.js';
+
+export default function KeyHints({ hints }) {
+    const theme = getTheme();
+    return (
+        <Box marginTop={1}>
+            <Text color={theme.textDim}>
+                {hints.map((h, i) => (
+                    <React.Fragment key={i}>
+                        <Text color={theme.textDim}>[</Text>
+                        <Text color={theme.text} bold>{h.key}</Text>
+                        <Text color={theme.textDim}>] {h.label}  </Text>
+                    </React.Fragment>
+                ))}
+            </Text>
+        </Box>
+    );
+}

package/src/tui/components/MiniBar.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'ink';
+
+import { getTheme } from '../theme/index.js';
+
+export default function MiniBar({ percent }) {
+    const theme = getTheme();
+    const totalBlocks = 8;
+    const filledBlocks = Math.round((percent / 100) * totalBlocks);
+    const emptyBlocks = totalBlocks - filledBlocks;
+
+    let color = theme.online;
+    if (percent > 50 && percent <= 79) color = theme.degraded;
+    else if (percent >= 80) color = theme.offline;
+
+    const filledStr = '▓'.repeat(Math.max(0, filledBlocks));
+    const emptyStr = '░'.repeat(Math.max(0, emptyBlocks));
+
+    return (
+        <Text color={color}>{filledStr}{emptyStr}</Text>
+    );
+}

package/src/tui/components/NodeCard.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { getTheme } from '../theme/index.js';
+import StatusDot from './StatusDot.jsx';
+import MiniBar from './MiniBar.jsx';
+import chalk from 'chalk';
+
+export default function NodeCard({ node, isSelected }) {
+    const theme = getTheme();
+    const bg = isSelected ? theme.selected : undefined;
+
+    const modeIcon = node.mode === 'docker' ? '🐋' : ' ';
+    const modeColor = node.mode === 'docker' ? theme.docker : theme.process;
+
+    let statusColor = theme.offline;
+    let statusText = node.status || 'offline';
+    if (statusText === 'online') statusColor = theme.online;
+    if (statusText === 'degraded' || statusText === 'reconnecting') statusColor = theme.degraded;
+    if (statusText === 'waiting') statusColor = theme.textDim;
+
+    const templateStr = node.mode === 'external' ? '—' : (node.template || 'unknown');
+
+    // Safe memory calc - max memory is theoretically arbitrary but let's assume 1024mb 
+    // for the mini bar percentage or just pass the raw mb. The prompt asks for "%" on memory
+    // "MEM ▓▓░░░░ 29%" -> node.memory from healthcheck is in MB. We'll fake a % or assume 1GB max.
+    const memPercent = Math.min(100, Math.round(((node.memory || 0) / 1024) * 100));
+
+    return (
+        <Box flexDirection="row" paddingX={1} paddingY={1} backgroundColor={bg}>
+            <Box width={3}>
+                {isSelected ? <Text color={theme.accent}>▶</Text> : <Text> </Text>}
+            </Box>
+            <Box flexDirection="column" flexGrow={1}>
+                {/* Row 1: Status Dot, Name, Uptime */}
+                <Box flexDirection="row" justifyContent="space-between">
+                    <Box>
+                        <StatusDot status={statusText} />
+                        <Text color={theme.text} bold>  {node.name.padEnd(25)} </Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}> ↑ 2d 4h 12m </Text>
+                    </Box>
+                </Box>
+
+                {/* Row 2: Template, Mode, Status */}
+                <Box marginLeft={3} flexDirection="row" justifyContent="space-between">
+                    <Box>
+                        <Text color={theme.textDim}>{templateStr}  ·  </Text>
+                        <Text color={modeColor}>{node.mode} {modeIcon}</Text>
+                    </Box>
+                    <Box>
+                        <StatusDot status={statusText} /> <Text color={statusColor}>{statusText}</Text>
+                    </Box>
+                </Box>
+
+                {/* Row 3: Stats */}
+                <Box marginTop={1} marginLeft={3}>
+                    <Text color={theme.textDim}>
+                        ♪ <Text color={theme.text}>{node.players || 0}</Text> players   ⚡ <Text color={theme.text}>{node.ping || 0}</Text>ms   CPU <MiniBar percent={node.cpu || 0} /> <Text color={theme.text}>{node.cpu || 0}</Text>%   MEM <MiniBar percent={memPercent} /> <Text color={theme.text}>{memPercent}</Text>%
+                    </Text>
+                </Box>
+            </Box>
+        </Box>
+    );
+}

package/src/tui/components/NodeList.jsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getTheme } from '../theme/index.js';
+import Border from './Border.jsx';
+import NodeCard from './NodeCard.jsx';
+
+export default function NodeList({ nodes, onSelectNode, selectedIndex, setSelectedIndex }) {
+    const theme = getTheme();
+    const visibleCount = 3;
+    const [scrollOffset, setScrollOffset] = useState(0);
+
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            setScrollOffset(selectedIndex);
+        } else if (selectedIndex >= scrollOffset + visibleCount) {
+            setScrollOffset(selectedIndex - visibleCount + 1);
+        }
+    }, [selectedIndex, scrollOffset, visibleCount]);
+
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex(Math.max(0, selectedIndex - 1));
+        }
+        if (key.downArrow) {
+            setSelectedIndex(Math.min(nodes.length - 1, selectedIndex + 1));
+        }
+        if (key.return) {
+            if (nodes[selectedIndex]) {
+                onSelectNode(nodes[selectedIndex]);
+            }
+        }
+    });
+
+    const visibleNodes = nodes.slice(scrollOffset, scrollOffset + visibleCount);
+    const hiddenAbove = scrollOffset;
+    const hiddenBelow = Math.max(0, nodes.length - (scrollOffset + visibleCount));
+
+    return (
+        <Border title={`nodes (${nodes.length}/10) ─────────────────────────────────────── [↑↓ scroll]`}>
+            <Box flexDirection="column" minHeight={visibleCount * 3 + 2}>
+                {hiddenAbove > 0 && (
+                    <Box justifyContent="center">
+                        <Text color={theme.textDim}>↑ {hiddenAbove} more nodes</Text>
+                    </Box>
+                )}
+
+                {visibleNodes.map((node, i) => {
+                    const actualIndex = scrollOffset + i;
+                    return <NodeCard key={node.name} node={node} isSelected={actualIndex === selectedIndex} />;
+                })}
+
+                {hiddenBelow > 0 && (
+                    <Box justifyContent="center" marginTop={1}>
+                        <Text color={theme.textDim}>↓ {hiddenBelow} more nodes</Text>
+                    </Box>
+                )}
+            </Box>
+        </Border>
+    );
+}

package/src/tui/components/StatPanel.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { getTheme } from '../theme/index.js';
+import Border from './Border.jsx';
+import StatusDot from './StatusDot.jsx';
+
+export default function StatPanel({ nodes, uptime, gatewayPort }) {
+    const theme = getTheme();
+
+    const online = nodes.filter(n => n.status === 'online').length;
+    const degraded = nodes.filter(n => n.status === 'degraded').length;
+    const offline = nodes.filter(n => n.status === 'offline').length;
+    const total = nodes.length;
+
+    const players = nodes.reduce((sum, n) => sum + (n.players || 0), 0);
+    const avgPing = total > 0 ? Math.round(nodes.reduce((sum, n) => sum + (n.ping || 0), 0) / total) : 0;
+
+    // Build Ping Sparkline
+    let globalHist = [];
+    for (let i = 0; i < 10; i++) {
+        let sum = 0, count = 0;
+        nodes.forEach(n => {
+            if (n.pingHistory && n.pingHistory.length > i) {
+                sum += n.pingHistory[i];
+                count++;
+            }
+        });
+        if (count > 0) globalHist.push(Math.round(sum / count));
+    }
+    const sparkChars = [' ', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+    let sparkline = '';
+    if (globalHist.length > 0) {
+        const maxPing = Math.max(...globalHist, 50);
+        sparkline = globalHist.map(p => sparkChars[Math.min(7, Math.floor((p / maxPing) * 8))]).join('');
+    }
+    sparkline = sparkline.padEnd(10, ' ');
+
+    const formatUptime = (ms) => {
+        const d = Math.floor(ms / (1000 * 60 * 60 * 24));
+        const h = Math.floor((ms % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const m = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));
+        return `${d}d ${h}h ${m}m`;
+    };
+
+    return (
+        <Border title="quick stats" width="50%">
+            <Box flexDirection="row" justifyContent="space-between">
+                <Text color={theme.text}> <StatusDot status="online" /> online  <Text bold>{online}</Text></Text>
+                <Text color={theme.text}> <StatusDot status="degraded" /> warn  <Text bold>{degraded}</Text></Text>
+            </Box>
+            <Box flexDirection="row" justifyContent="space-between" marginBottom={1}>
+                <Text color={theme.text}> <StatusDot status="offline" /> offline <Text bold>{offline}</Text></Text>
+                <Text color={theme.textDim}> total  <Text bold>{total}</Text></Text>
+            </Box>
+            <Text color={theme.borderDim}>{'─'.repeat(35)}</Text>
+            <Box flexDirection="column" marginTop={1}>
+                <Text color={theme.text}>players       <Text bold>{players} active</Text></Text>
+                <Text color={theme.text}>avg ping      <Text bold>{avgPing}ms  </Text><Text color={theme.accent}>{sparkline}</Text>  last 10</Text>
+                <Text color={theme.text}>gateway       <StatusDot status="online" /> active :{gatewayPort}</Text>
+                <Text color={theme.text}>cluster up    <Text bold>{formatUptime(uptime)}</Text></Text>
+            </Box>
+        </Border>
+    );
+}

package/src/tui/components/StatusDot.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'ink';
+import { getTheme } from '../theme/index.js';
+
+export default function StatusDot({ status }) {
+    const theme = getTheme();
+    let char = '●';
+    let color = theme.online;
+
+    if (status === 'degraded' || status === 'reconnecting') {
+        char = '⚠';
+        color = theme.degraded;
+    } else if (status === 'offline' || status === 'unreachable') {
+        char = '✕';
+        color = theme.offline;
+    } else if (status === 'waiting') {
+        char = '⟳';
+        color = theme.textDim;
+    }
+
+    return <Text color={color}>{char}</Text>;
+}

package/src/tui/index.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { render, Box, Text, useInput } from 'ink';
+import { getTheme, loadTheme } from './theme/index.js';
+import { loadNodes, getAllNodes } from '../core/registry.js';
+import { startGateway } from '../gateway/server.js';
+import { startHealthCheck } from '../core/healthcheck.js';
+import { initLogBuffer } from '../core/logBuffer.js';
+import Dashboard from './screens/Dashboard.jsx';
+import Logs from './screens/Logs.jsx';
+import Templates from './screens/Templates.jsx';
+// Add Settings as a mock here
+function Settings({ onBack }) {
+    const theme = getTheme();
+    useInput((i, k) => { if (i === 'q' || k.escape) onBack(); });
+    return <Box><Text color={theme.text}>Settings (Press q to back)</Text></Box>;
+}
+
+function App() {
+    const [screen, setScreen] = useState('dashboard');
+    const [targetNode, setTargetNode] = useState(null);
+    const [nodes, setNodes] = useState(() => getAllNodes());
+    const [gatewayInfo, setGatewayInfo] = useState({ port: '...' });
+    const [uptimeStart] = useState(() => new Date());
+
+    // Rerender loop for nodes
+    React.useEffect(() => {
+        const timer = setInterval(() => {
+            setNodes(getAllNodes());
+        }, 1000);
+        return () => clearInterval(timer);
+    }, []);
+
+    useInput((input, key) => {
+        if (screen === 'dashboard') {
+            if (input === 'q') {
+                process.exit(0);
+            }
+            if (input === 'l') {
+                const selected = nodes[0]; // In real impl, get from selectedIndex of NodeList
+                if (selected) {
+                    setTargetNode(selected.name);
+                    setScreen('logs');
+                }
+            }
+            if (input === 't') {
+                setScreen('templates');
+            }
+            if (input === 's') {
+                setScreen('settings');
+            }
+        }
+    });
+
+    if (screen === 'logs') return <Logs nodeName={targetNode} onBack={() => setScreen('dashboard')} />;
+    if (screen === 'templates') return <Templates onBack={() => setScreen('dashboard')} />;
+    if (screen === 'settings') return <Settings onBack={() => setScreen('dashboard')} />;
+
+    return <Dashboard nodes={nodes} gatewayPort={2333} uptimeStart={uptimeStart} />;
+}
+
+export function renderTui() {
+    loadTheme();
+    loadNodes();
+    initLogBuffer();
+    startHealthCheck();
+    startGateway();
+
+    render(<App />, { fullscreen: true });
+}

package/src/tui/init/DiscordAlerts.jsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import fetch from 'node-fetch';
+import { getTheme } from '../theme/index.js';
+import Border from '../components/Border.jsx';
+
+export default function DiscordAlerts({ onNext, updateConfig }) {
+    const theme = getTheme();
+    const [step, setStep] = useState('choice'); // choice, webhook, test
+    const [choice, setChoice] = useState(0); // 0 = Yes, 1 = No
+    const [webhookUrl, setWebhookUrl] = useState('');
+    const [testStatus, setTestStatus] = useState('');
+
+    useInput(async (input, key) => {
+        if (step === 'choice') {
+            if (key.upArrow) setChoice(Math.max(0, choice - 1));
+            if (key.downArrow) setChoice(Math.min(1, choice + 1));
+            if (key.return) {
+                if (choice === 0) {
+                    setStep('webhook');
+                } else {
+                    updateConfig({
+                        alerts: {
+                            discord: { enabled: false, webhook: '' },
+                            desktop: { enabled: true },
+                            sound: { enabled: false },
+                            thresholds: { cpu_warn: 90, idle_warn: false }
+                        }
+                    });
+                    onNext();
+                }
+            }
+        } else if (step === 'webhook') {
+            if (key.return && webhookUrl.length > 10) {
+                setStep('test');
+                setTestStatus('Sending test message...');
+
+                try {
+                    const res = await fetch(webhookUrl, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            embeds: [{
+                                title: 'ℹ️ lcluster Test',
+                                description: 'Webhook configured successfully!',
+                                color: 0x89B4FA
+                            }]
+                        })
+                    });
+                    if (res.ok) {
+                        setTestStatus('Sending test message...  ✔ webhook works!');
+                        setTimeout(() => {
+                            updateConfig({
+                                alerts: {
+                                    discord: { enabled: true, webhook: webhookUrl },
+                                    desktop: { enabled: true },
+                                    sound: { enabled: false },
+                                    thresholds: { cpu_warn: 90, idle_warn: false }
+                                }
+                            });
+                            onNext();
+                        }, 1500);
+                    } else {
+                        setTestStatus('Sending test message...  ✕ could not reach webhook. Check the URL.');
+                        setTimeout(() => setStep('webhook'), 2000);
+                    }
+                } catch (e) {
+                    setTestStatus('Sending test message...  ✕ could not reach webhook. Check the URL.');
+                    setTimeout(() => setStep('webhook'), 2000);
+                }
+            } else if (key.escape) {
+                setStep('choice');
+            }
+        }
+    });
+
+    return (
+        <Box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+            {step === 'choice' && (
+                <Border title="discord alerts (optional)" borderColor={theme.border}>
+                    <Box flexDirection="column" marginX={2} marginY={1}>
+                        <Text color={theme.text}>Want to get notified in Discord when a node goes down?</Text>
+                        <Box flexDirection="column" marginTop={1}>
+                            <Text>{choice === 0 ? <Text color={theme.accent}>▶ </Text> : '  '}Yes — paste a webhook URL</Text>
+                            <Text>{choice === 1 ? <Text color={theme.accent}>▶ </Text> : '  '}No  — skip for now</Text>
+                        </Box>
+                        <Box marginTop={1}>
+                            <Text color={theme.textDim}>You can add this later from the Settings screen.</Text>
+                        </Box>
+                    </Box>
+                </Border>
+            )}
+
+            {(step === 'webhook' || step === 'test') && (
+                <Border title="discord webhook" borderColor={theme.border}>
+                    <Box flexDirection="column" marginX={2} marginY={1}>
+                        <Box>
+                            <Text color={theme.textDim}>Webhook URL  › </Text>
+                            {step === 'webhook' ? (
+                                <TextInput value={webhookUrl} onChange={setWebhookUrl} />
+                            ) : (
+                                <Text>{webhookUrl.substring(0, 30)}...</Text>
+                            )}
+                        </Box>
+
+                        {step === 'test' ? (
+                            <Box marginTop={1}>
+                                <Text color={theme.text}>{testStatus}</Text>
+                            </Box>
+                        ) : (
+                            <Box marginTop={1} flexDirection="column">
+                                <Text color={theme.textDim}>How to get one:</Text>
+                                <Text color={theme.textDim}>Discord Server → Settings → Integrations → Webhooks → New</Text>
+                            </Box>
+                        )}
+                    </Box>
+                </Border>
+            )}
+        </Box>
+    );
+}

package/src/tui/init/Done.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getTheme } from '../theme/index.js';
+import Border from '../components/Border.jsx';
+import { installSystemd } from '../../system/systemd.js';
+import os from 'node:os';
+
+export default function Done({ onDone, config, nodeConfig, systemContext }) {
+    const theme = getTheme();
+    const [askSystemd, setAskSystemd] = useState(
+        systemContext.os === 'ubuntu' || systemContext.os === 'debian'
+    );
+    const [sysChoice, setSysChoice] = useState(0); // 0=yes, 1=no
+    const [systemdInstalled, setSystemdInstalled] = useState(false);
+
+    useInput((input, key) => {
+        if (askSystemd) {
+            if (key.upArrow) setSysChoice(0);
+            if (key.downArrow) setSysChoice(1);
+            if (key.return) {
+                if (sysChoice === 0) {
+                    const ok = installSystemd();
+                    setSystemdInstalled(ok);
+                }
+                setAskSystemd(false);
+            }
+        } else {
+            if (key.return) {
+                onDone();
+            }
+        }
+    });
+
+    if (askSystemd) {
+        return (
+            <Box flexDirection="column" padding={1} backgroundColor={theme.background}>
+                <Border title="auto startup">
+                    <Box flexDirection="column" marginX={2} marginY={1}>
+                        <Text color={theme.text}>We detected you are on Ubuntu/Debian.</Text>
+                        <Text color={theme.text}>Want lcluster to start automatically on boot?</Text>
+                        <Box marginTop={1} flexDirection="column">
+                            <Text>{sysChoice === 0 ? <Text color={theme.accent}>▶ </Text> : '  '}Yes — install as systemd service</Text>
+                            <Text>{sysChoice === 1 ? <Text color={theme.accent}>▶ </Text> : '  '}No  — I will start it manually</Text>
+                        </Box>
+                    </Box>
+                </Border>
+            </Box>
+        );
+    }
+
+    return (
+        <Box flexDirection="column" padding={1} backgroundColor={theme.background}>
+            <Border title="all done!">
+                <Box flexDirection="column" marginX={2} marginY={1}>
+                    <Text color={theme.online}>✔ Theme saved             <Text color={theme.text}>{config.theme}</Text></Text>
+                    <Text color={theme.online}>✔ Gateway configured      <Text color={theme.text}>localhost:{config.gateway?.port || 2333}</Text></Text>
+                    {nodeConfig && (
+                        <Text color={theme.online}>✔ Node created            <Text color={theme.text}>{nodeConfig.name} ({nodeConfig.mode})</Text></Text>
+                    )}
+                    {systemdInstalled && (
+                        <Text color={theme.online}>✔ Systemd service         <Text color={theme.text}>installed</Text></Text>
+                    )}
+
+                    <Box flexDirection="column" marginTop={1}>
+                        <Text color={theme.textDim}>Connect your bot to:</Text>
+                        <Text color={theme.textDim}>host      → <Text color={theme.text}>localhost</Text></Text>
+                        <Text color={theme.textDim}>port      → <Text color={theme.text}>{config.gateway?.port || 2333}</Text></Text>
+                        <Text color={theme.textDim}>password  → <Text color={theme.text}>{config.gateway?.password || 'youshallnotpass'}</Text></Text>
+                    </Box>
+                    <Box marginTop={1}>
+                        <Text color={theme.textDim}>Run <Text color={theme.text} bold>lcluster</Text> to open your dashboard.</Text>
+                    </Box>
+                </Box>
+            </Border>
+        </Box>
+    );
+}