lcluster 1.0.0 → 1.0.2

package/README.md

@@ -4,7 +4,7 @@
   <p>A powerful Lavalink cluster manager for your terminal.</p>
 
   <p>
-    <img src="https://img.shields.io/badge/version-1.0.0-blue" />
+    <img src="https://img.shields.io/badge/version-1.0.2-blue" />
     <img src="https://img.shields.io/badge/node-%3E%3D18.0.0-green" />
     <img src="https://img.shields.io/badge/license-GPLv3-purple" />
     <img src="https://img.shields.io/badge/built%20with-Claude%20AI-orange" />
@@ -111,7 +111,7 @@ Lavalink v4 compatible client.
 
 ```
 ╔═════════════════════════════════════════════════════════════════════╗
-║  ⬡ lcluster v1.0.0    ● 2 online  ⚠ 1 warn    gateway :2333  ●   ║
+║  ⬡ lcluster v1.0.2         ● 2 online  ⚠ 1 warn    gateway :2333  ●  ║
 ╚═════════════════════════════════════════════════════════════════════╝
 
   ┌─ nodes (3/5) ──────────────────────────────────── [↑↓ scroll] ─┐
@@ -154,13 +154,6 @@ Full architectural guides, TUI maps, setup instructions, and deployment strategi
 
 ---
 
-## Roadmap
-
-- [x] v1.0.0 — Core cluster manager, TUI dashboard, gateway, alerts
-- [ ] v1.0.1 — Custom Discord bot integration with token support
-
----
-
 ## Credits
 
 lcluster was designed and built by **Ram Krishna** with architecture,

package/bots/template.js

@@ -0,0 +1,79 @@
+import { Client, GatewayIntentBits } from 'discord.js';
+import { LavalinkManager } from 'lavalink-client';
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import yaml from 'js-yaml';
+
+// 1. Token passed from lcluster bot manager securely
+const DISCORD_TOKEN = process.env.DISCORD_TOKEN || 'YOUR_DISCORD_BOT_TOKEN';
+
+// 2. Read lcluster internal port/password config directly to avoid desync
+const configPath = path.join(os.homedir(), '.lcluster', 'config.yml');
+let lclusterPassword = 'youshallnotpass';
+let lclusterPort = 2333;
+if (fs.existsSync(configPath)) {
+    try {
+        const config = yaml.load(fs.readFileSync(configPath, 'utf8')) || {};
+        lclusterPassword = config.gateway?.password || 'youshallnotpass';
+        lclusterPort = config.gateway?.port || 2333;
+    } catch { }
+}
+
+const LCLUSTER_NODE = {
+    id: "lcluster-gateway",
+    host: "localhost",     // or your VPS IP
+    port: lclusterPort,    // Dynamically synced from config
+    password: lclusterPassword, // Dynamically synced from config
+    secure: false          // Set to true if behind HTTPS/WSS
+};
+
+const client = new Client({
+    intents: [
+        GatewayIntentBits.Guilds,
+        GatewayIntentBits.GuildMessages,
+        GatewayIntentBits.GuildVoiceStates,
+        GatewayIntentBits.MessageContent
+    ]
+});
+
+// Initialize lavalink-client manager pointing exactly to lcluster
+const lavalink = new LavalinkManager({
+    nodes: [LCLUSTER_NODE],
+    sendToShard: (guildId, payload) => {
+        client.guilds.cache.get(guildId)?.shard?.send(payload);
+    },
+    client: {
+        id: "CLIENT_ID_PLACEHOLDER", // Replaced on login
+        username: "Lcluster Bot"
+    }
+});
+
+lavalink.nodeManager.on("connect", (node) => {
+    console.log(`[Lcluster] Successfully connected to gateway node: ${node.id}`);
+});
+
+lavalink.nodeManager.on("error", (node, error) => {
+    console.error(`[Lcluster] Error on node ${node.id}:`, error.message);
+});
+
+client.on('ready', () => {
+    console.log(`[Discord] Logged in as ${client.user.tag}`);
+    lavalink.client.id = client.user.id;
+    lavalink.init({ ...client.user });
+});
+
+client.on('messageCreate', async (message) => {
+    if (message.author.bot || !message.guild) return;
+
+    // Simple ping command
+    if (message.content === '!ping') {
+        message.reply('Pong! Cluster is active.');
+    }
+});
+
+// Forward raw discord voice events to lavalink
+client.on("raw", (d) => lavalink.sendRawData(d));
+
+console.log("Starting Lcluster Discord Bot...");
+client.login(DISCORD_TOKEN);

package/built-in-templates/all-filters.yml

@@ -0,0 +1,42 @@
+server:
+  port: 2333
+  address: 0.0.0.0
+
+lavalink:
+  server:
+    password: "youshallnotpass"
+    sources:
+      youtube: true
+      bandcamp: true
+      soundcloud: true
+      twitch: true
+      vimeo: true
+      mixer: true
+      http: true
+      local: false
+    filters:
+      volume: true
+      equalizer: true
+      karaoke: true
+      timescale: true
+      tremolo: true
+      vibrato: true
+      distortion: true
+      rotation: true
+      channelMix: true
+      lowPass: true
+    bufferDurationMs: 400
+    youtubePlaylistLoadLimit: 6
+    playerUpdateInterval: 5
+    youtubeSearchEnabled: true
+    soundcloudSearchEnabled: true
+    gc-warnings: true
+
+metrics:
+  prometheus:
+    enabled: false
+    endpoint: /metrics
+
+sentry:
+  dsn: ""
+  environment: ""

package/built-in-templates/robust.yml

@@ -0,0 +1,31 @@
+server:
+  port: 2333
+  address: 0.0.0.0
+
+lavalink:
+  server:
+    password: "youshallnotpass"
+    sources:
+      youtube: true
+      bandcamp: true
+      soundcloud: true
+      twitch: true
+      vimeo: true
+      mixer: true
+      http: true
+      local: false
+    bufferDurationMs: 400
+    youtubePlaylistLoadLimit: 6
+    playerUpdateInterval: 5
+    youtubeSearchEnabled: true
+    soundcloudSearchEnabled: true
+    gc-warnings: true
+
+metrics:
+  prometheus:
+    enabled: false
+    endpoint: /metrics
+
+sentry:
+  dsn: ""
+  environment: ""

package/built-in-templates/youtube-only.yml

@@ -0,0 +1,31 @@
+server:
+  port: 2333
+  address: 0.0.0.0
+
+lavalink:
+  server:
+    password: "youshallnotpass"
+    sources:
+      youtube: true
+      bandcamp: false
+      soundcloud: false
+      twitch: false
+      vimeo: false
+      mixer: false
+      http: false
+      local: false
+    bufferDurationMs: 400
+    youtubePlaylistLoadLimit: 6
+    playerUpdateInterval: 5
+    youtubeSearchEnabled: true
+    soundcloudSearchEnabled: true
+    gc-warnings: true
+
+metrics:
+  prometheus:
+    enabled: false
+    endpoint: /metrics
+
+sentry:
+  dsn: ""
+  environment: ""

package/eslint.config.js

@@ -0,0 +1,24 @@
+import js from "@eslint/js";
+
+export default [
+    js.configs.recommended,
+    {
+        languageOptions: {
+            ecmaVersion: 2024,
+            sourceType: "module",
+            globals: {
+                process: "readonly",
+                console: "readonly",
+                __dirname: "readonly",
+                setTimeout: "readonly",
+                setInterval: "readonly",
+                clearInterval: "readonly"
+            }
+        },
+        rules: {
+            "no-unused-vars": "warn",
+            "no-undef": "warn",
+            "no-empty": "warn"
+        }
+    }
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lcluster",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A powerful Lavalink cluster manager for your terminal",
   "main": "src/cli.js",
   "type": "module",
@@ -47,6 +47,7 @@
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
-    "@babel/register": "^7.23.7"
+    "@babel/register": "^7.23.7",
+    "@eslint/js": "^10.0.1"
   }
-}
+}

package/src/bot/manager.js

@@ -0,0 +1,46 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { fork } from 'node:child_process';
+import { events } from '../core/events.js';
+
+let botProcess = null;
+
+export async function startBot() {
+    const configPath = path.join(os.homedir(), '.lcluster', 'config.yml');
+
+    let config = {};
+    if (fs.existsSync(configPath)) {
+        try {
+            const yaml = await import('js-yaml');
+            config = yaml.default.load(fs.readFileSync(configPath, 'utf8')) || {};
+        } catch { }
+    }
+
+    if (config?.bot?.enabled && config?.bot?.token) {
+        // Resolve absolute path to bots/template.js from local installation or global 
+        const __dirname = path.dirname(new URL(import.meta.url).pathname);
+        const templatePath = path.join(__dirname, '..', '..', 'bots', 'template.js');
+
+        if (fs.existsSync(templatePath)) {
+            botProcess = fork(templatePath, [], {
+                env: { ...process.env, DISCORD_TOKEN: config.bot.token },
+                stdio: 'ignore' // We don't want the bot destroying our TUI with console.log
+            });
+
+            botProcess.on('error', (err) => {
+                events.emit('system:log', `Failed to start Custom Discord Bot: ${err.message}`);
+            });
+
+            botProcess.on('exit', (code) => {
+                events.emit('system:log', `Custom Discord Bot naturally exited with code ${code}`);
+                botProcess = null;
+            });
+
+            // Assume started successfully if we made it here
+            events.emit('system:log', 'Custom Discord Bot successfully mounted and detached to background.');
+        } else {
+            events.emit('system:log', 'Custom Discord Bot enabled but bots/template.js is missing.');
+        }
+    }
+}

package/src/cli.js

@@ -10,7 +10,7 @@ if (!process.env.LCLUSTER_TSX_BOOTSTRAPPED) {
   const result = spawnSync(process.execPath, [
     '--no-warnings',
     '--import',
-    'tsx',
+    import.meta.resolve('tsx'),
     __filename,
     ...process.argv.slice(2)
   ], {
@@ -21,5 +21,22 @@ if (!process.env.LCLUSTER_TSX_BOOTSTRAPPED) {
 }
 
 // Now we can safely import everything else because tsx loader is active
+import fs from 'node:fs';
+import path from 'node:path';
+const pkgPath = path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json');
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+// Beta Version Lockdown (Phase 10)
+if (pkg.version.includes('-beta')) {
+  // Determine if running from global node_modules by checking the path structure
+  if (pkgPath.includes('node_modules') || process.execPath === process.argv[1]) {
+    console.error('\n[Lcluster Error] Beta versions (v1.0.2-beta) cannot be run globally.\n');
+    console.error('Please clone the repository and run locally via:');
+    console.error('  git clone https://github.com/ramkrishna-js/lcluster.git');
+    console.error('  cd lcluster && npm install && npm link\n');
+    process.exit(1);
+  }
+}
+
 const { runCLI } = await import('./main.js');
 await runCLI();

package/src/gateway/v4/rest.js

@@ -12,6 +12,8 @@ export function handleRest(req, res) {
     }
 
     // Handle specific session
+    // eslint-disable-next-line no-useless-escape
+    const isSessionUpdate = req.method === 'PATCH' && /^\/v4\/sessions\/[a-zA-Z0-9]+$/.test(req.url);
     const sessionMatch = path.match(/^\/v4\/sessions\/([^\/]+)(.*)$/);
     if (sessionMatch) {
         const sessionId = sessionMatch[1];

package/src/main.js

@@ -16,7 +16,7 @@ export async function runCLI() {
         .name('lcluster')
         .description('⬡ lcluster — Lavalink Cluster Manager')
         .version(`
-  ⬡ lcluster v1.0.0
+  ⬡ lcluster v1.0.2
 
   Built by Ram Krishna & Claude (Anthropic AI)
   Lavalink Cluster Manager for Node.js
@@ -129,5 +129,44 @@ export async function runCLI() {
             console.log(`Tailing logs for ${name}...`);
         });
 
+    program
+        .command('theme')
+        .description('generates a custom.json theme baseline')
+        .action(async () => {
+            const fs = await import('node:fs');
+            const path = await import('node:path');
+            const os = await import('node:os');
+            const customPath = path.join(os.homedir(), '.lcluster', 'custom.json');
+
+            const boilerplate = {
+                "border": "#00ff9f",
+                "borderDim": "#00ff9f33",
+                "text": "#00ff9f",
+                "textDim": "#00ff9f66",
+                "background": "#080b14",
+                "selected": "#00ff9f11",
+                "selectedBorder": "#00ff9f55",
+                "online": "#00ff9f",
+                "degraded": "#ffcc00",
+                "offline": "#ff3366",
+                "docker": "#4facfe",
+                "process": "#a8edea",
+                "accent": "#00ff9f",
+                "keyHint": "#00ff9f33"
+            };
+
+            if (fs.existsSync(customPath)) {
+                console.log(chalk.yellow(`\n⚠ A custom theme already exists at: ${customPath}`));
+                console.log('Modify the file directly to continue customizing your TUI!');
+            } else {
+                fs.mkdirSync(path.join(os.homedir(), '.lcluster'), { recursive: true });
+                fs.writeFileSync(customPath, JSON.stringify(boilerplate, null, 4), 'utf8');
+                console.log(chalk.green(`\n✔ Custom Theme built successfully at: ${customPath}`));
+                console.log(chalk.cyan('\n1. Edit the hex colors inside custom.json'));
+                console.log(chalk.cyan('2. Open the TUI Dashboard (`lcluster`)'));
+                console.log(chalk.cyan('3. Press [q] then Settings and select the "< custom >" theme limit!\n'));
+            }
+        });
+
     program.parse();
 }

package/src/system/detect.js

@@ -1,4 +1,5 @@
 import os from 'node:os';
+import fs from 'node:fs';
 import { spawnSync } from 'node:child_process';
 import net from 'node:net';
 

package/src/tui/components/NodeCard.jsx

@@ -49,7 +49,9 @@ export default function NodeCard({ node, isSelected }) {
                         <Text color={modeColor}>{node.mode} {modeIcon}</Text>
                     </Box>
                     <Box>
-                        <StatusDot status={statusText} /> <Text color={statusColor}>{statusText}</Text>
+                        <Text color={statusColor}>
+                            <StatusDot status={statusText} /> {statusText}
+                        </Text>
                     </Box>
                 </Box>
 

package/src/tui/init/ThemePicker.jsx

@@ -9,7 +9,8 @@ const themes = [
     { id: 'amber', name: '3. Retro Amber', desc: 'old school CRT terminal feel' },
     { id: 'cyberpunk', name: '4. Cyberpunk', desc: 'neon pink and cyan highlights' },
     { id: 'hacker', name: '5. Hacker', desc: 'matrix style green on black' },
-    { id: 'ocean', name: '6. Deep Ocean', desc: 'calming deep blues and seafoam' }
+    { id: 'ocean', name: '6. Deep Ocean', desc: 'calming deep blues and seafoam' },
+    { id: 'custom', name: '7. Custom JSON', desc: 'loads ~/.lcluster/custom.json' }
 ];
 
 export default function ThemePicker({ onNext, updateConfig }) {

package/src/tui/screens/Dashboard.jsx

@@ -17,7 +17,7 @@ export default function Dashboard({ nodes, gatewayPort, uptimeStart, onAction })
         <Box flexDirection="column" paddingX={2} paddingY={1} width="100%" height="100%" backgroundColor={theme.background}>
             <Border borderColor={theme.border}>
                 <Box flexDirection="row" justifyContent="space-between" width="100%">
-                    <Text color={theme.accent}>  ⬡ lcluster v1.0.0</Text>
+                    <Text color={theme.accent}>  ⬡ lcluster v1.0.2</Text>
                     <Box flexDirection="row" gap={2}>
                         <Text color={theme.online}>● {nodes.filter(n => n.status === 'online').length} online</Text>
                         <Text color={theme.degraded}>⚠ {nodes.filter(n => n.status === 'degraded' || n.status === 'reconnecting').length} warn</Text>

package/src/tui/screens/Settings.jsx

@@ -8,7 +8,7 @@ import { getTheme, updateTheme } from '../theme/index.js';
 import Border from '../components/Border.jsx';
 import TextInput from 'ink-text-input';
 
-const themes = ['neon', 'minimal', 'amber', 'cyberpunk', 'hacker', 'ocean'];
+const themes = ['neon', 'minimal', 'amber', 'cyberpunk', 'hacker', 'ocean', 'custom'];
 
 export default function Settings({ onBack }) {
     const configPath = path.join(os.homedir(), '.lcluster', 'config.yml');
@@ -32,7 +32,10 @@ export default function Settings({ onBack }) {
     const [soundEnabled, setSoundEnabled] = useState(config.alerts?.sound?.enabled || false);
     const [cpuWarn, setCpuWarn] = useState(String(config.alerts?.thresholds?.cpu_warn || 90));
 
-    const [field, setField] = useState(0); // 0..7 
+    const [botEnabled, setBotEnabled] = useState(config.bot?.enabled || false);
+    const [botToken, setBotToken] = useState(config.bot?.token || '');
+
+    const [field, setField] = useState(0); // 0..9 
 
     const theme = getTheme();
 
@@ -41,7 +44,7 @@ export default function Settings({ onBack }) {
             onBack();
         }
         if (key.upArrow) setField(Math.max(0, field - 1));
-        if (key.downArrow) setField(Math.min(7, field + 1));
+        if (key.downArrow) setField(Math.min(9, field + 1));
 
         if (field === 0) {
             if (key.leftArrow) {
@@ -60,6 +63,7 @@ export default function Settings({ onBack }) {
             if (field === 3) setDiscordEnabled(!discordEnabled);
             else if (field === 5) setDesktopEnabled(!desktopEnabled);
             else if (field === 6) setSoundEnabled(!soundEnabled);
+            else if (field === 8) setBotEnabled(!botEnabled);
             else {
                 // Save config
                 const newConfig = {
@@ -74,6 +78,10 @@ export default function Settings({ onBack }) {
                         desktop: { enabled: desktopEnabled },
                         sound: { enabled: soundEnabled },
                         thresholds: { cpu_warn: parseInt(cpuWarn) || 90, idle_warn: false }
+                    },
+                    bot: {
+                        enabled: botEnabled,
+                        token: botToken
                     }
                 };
                 fs.writeFileSync(configPath, yaml.dump(newConfig), 'utf8');
@@ -86,8 +94,7 @@ export default function Settings({ onBack }) {
         <Box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
             <Border title="settings" borderColor={theme.border} flexGrow={1}>
                 <Box flexDirection="column" paddingX={1} marginY={1}>
-                        <Text color={theme.textDim}>APPEARANCE</Text>
-                    </Box>
+                    <Text color={theme.textDim}>APPEARANCE</Text>
                     <Box marginBottom={1}>
                         <Text color={theme.textDim}>Theme          </Text>
                         <Text color={field === 0 ? theme.text : theme.textDim}>
@@ -136,19 +143,33 @@ export default function Settings({ onBack }) {
                         <TextInput value={cpuWarn} onChange={setCpuWarn} focus={field === 7} />
                         <Text color={theme.textDim}>%</Text>
                     </Box>
+
+                    <Box marginTop={1}>
+                        <Text color={theme.textDim}>CUSTOM BOT (v1.0.2)</Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>Active         </Text>
+                        {field === 8 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <Text color={botEnabled ? theme.online : theme.textDim}>{botEnabled ? '● enabled' : '○ disabled'}</Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>Discord Token  </Text>
+                        {field === 9 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <TextInput value={botToken} onChange={setBotToken} focus={field === 9} mask="•" />
+                    </Box>
                 </Box>
                 <Box flexDirection="column" paddingX={1} marginTop={1}>
                     <Text color={theme.borderDim}>{'─'.repeat(45)}</Text>
                     <Box marginTop={1} flexDirection="column">
-                        <Text color={theme.text} bold>lcluster v1.0.0</Text>
+                        <Text color={theme.text} bold>lcluster v1.0.2</Text>
                         <Text color={theme.textDim}>Built by <Text color={theme.text}>Ram Krishna</Text> & <Text color={theme.text}>Claude (Anthropic AI)</Text></Text>
                         <Text color={theme.textDim}>This project was designed and built with the help of AI.</Text>
                     </Box>
                 </Box>
             </Border >
-        <Box marginTop={1}>
-            <Text color={theme.textDim}>[↑↓] fields   [←→] change theme   [enter] save   [q/esc] cancel</Text>
-        </Box>
+            <Box marginTop={1}>
+                <Text color={theme.textDim}>[↑↓] fields   [←→] change theme   [enter] save   [q/esc] cancel</Text>
+            </Box>
         </Box >
     );
 }

package/src/tui/screens/Templates.jsx

@@ -2,18 +2,70 @@ import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { getTheme } from '../theme/index.js';
 import Border from '../components/Border.jsx';
-import { listTemplates } from '../../templates/manager.js';
+import { listTemplates, deleteTemplate, saveTemplate } from '../../templates/manager.js';
+import TextInput from 'ink-text-input';
 
 export default function Templates({ onBack }) {
     const theme = getTheme();
-    const [templates] = useState(() => listTemplates());
+    const [templates, setTemplates] = useState(() => listTemplates());
     const [selectedIndex, setSelectedIndex] = useState(0);
+    const [showCreate, setShowCreate] = useState(false);
+    const [newName, setNewName] = useState('');
+    const [error, setError] = useState('');
+
+    const refresh = () => setTemplates(listTemplates());
 
     useInput((input, key) => {
+        if (showCreate) {
+            if (key.escape) {
+                setShowCreate(false);
+                setNewName('');
+                setError('');
+            }
+            if (key.return) {
+                if (!newName || newName.length < 2) {
+                    setError('Name too short');
+                    return;
+                }
+                const finalName = newName.endsWith('.yml') ? newName : newName + '.yml';
+                if (templates.find(t => t.name === finalName)) {
+                    setError('Template already exists');
+                    return;
+                }
+
+                // Create default baseline
+                const baseContent = `server:\n  port: 2333\n  address: 0.0.0.0\n\nlavalink:\n  server:\n    password: "youshallnotpass"\n    sources:\n      youtube: true\n`;
+                saveTemplate(finalName, baseContent);
+                setShowCreate(false);
+                setNewName('');
+                setError('');
+                refresh();
+                setSelectedIndex(templates.length); // point back to add new button usually
+            }
+            return;
+        }
+
         if (key.upArrow) setSelectedIndex(Math.max(0, selectedIndex - 1));
         if (key.downArrow) setSelectedIndex(Math.min(templates.length, selectedIndex + 1));
         if (input === 'q' || key.escape) onBack();
-        // In full impl [enter] would open editor or delete
+
+        // Delete template
+        if (input === 'd' && selectedIndex < templates.length) {
+            const t = templates[selectedIndex];
+            if (t.builtin) {
+                setError('Cannot delete built-in template');
+                setTimeout(() => setError(''), 2000);
+            } else {
+                deleteTemplate(t.name);
+                setSelectedIndex(Math.max(0, selectedIndex - 1));
+                refresh();
+            }
+        }
+
+        // Add new
+        if (key.return && selectedIndex === templates.length) {
+            setShowCreate(true);
+        }
     });
 
     return (
@@ -21,21 +73,45 @@ export default function Templates({ onBack }) {
             <Border title="templates" borderColor={theme.border} flexGrow={1}>
                 <Box flexDirection="column" paddingX={1} flexGrow={1}>
                     {templates.map((t, i) => (
-                        <Text key={t.name} color={selectedIndex === i ? theme.text : theme.textDim} bold={selectedIndex === i}>
-                            {selectedIndex === i ? <Text color={theme.accent}>▶ </Text> : '  '}
+                        <Text key={t.name} color={selectedIndex === i && !showCreate ? theme.text : theme.textDim} bold={selectedIndex === i && !showCreate}>
+                            {selectedIndex === i && !showCreate ? <Text color={theme.accent}>▶ </Text> : '  '}
                             {t.name.padEnd(20)} {t.builtin && <Text color={theme.textDim}>(built-in)</Text>}
                         </Text>
                     ))}
-                    <Box marginTop={1}>
-                        <Text color={selectedIndex === templates.length ? theme.text : theme.textDim} bold={selectedIndex === templates.length}>
-                            {selectedIndex === templates.length ? <Text color={theme.accent}>▶ </Text> : '  '}
-                            + Add new template
-                        </Text>
-                    </Box>
+
+                    {!showCreate && (
+                        <Box marginTop={1}>
+                            <Text color={selectedIndex === templates.length ? theme.text : theme.textDim} bold={selectedIndex === templates.length}>
+                                {selectedIndex === templates.length ? <Text color={theme.accent}>▶ </Text> : '  '}
+                                + Add new template
+                            </Text>
+                        </Box>
+                    )}
+
+                    {showCreate && (
+                        <Box marginTop={1} flexDirection="column">
+                            <Box>
+                                <Text color={theme.accent}>▶ </Text>
+                                <Text color={theme.text}>Name: </Text>
+                                <TextInput value={newName} onChange={setNewName} focus={showCreate} />
+                            </Box>
+                            <Text color={theme.textDim}>Press [Enter] to create, [Esc] to cancel. Edit manually in ~/.lcluster/templates</Text>
+                        </Box>
+                    )}
+
+                    {error && (
+                        <Box marginTop={1}>
+                            <Text color={theme.error}>⚠ {error}</Text>
+                        </Box>
+                    )}
                 </Box>
             </Border>
             <Box marginTop={1}>
-                <Text color={theme.textDim}>[↑↓] navigate   [enter] select / edit   [d] delete (user only)   [q] back</Text>
+                {showCreate ? (
+                    <Text color={theme.textDim}>[enter] create   [esc] cancel</Text>
+                ) : (
+                    <Text color={theme.textDim}>[↑↓] navigate   [enter] create new   [d] delete (user only)   [q] back</Text>
+                )}
             </Box>
         </Box>
     );

package/src/tui/theme/index.js

@@ -10,6 +10,7 @@ import hacker from './hacker.js';
 import ocean from './ocean.js';
 
 let currentThemeConfig = 'neon';
+let customThemeCache = null;
 
 export function loadTheme() {
     const configPath = path.join(os.homedir(), '.lcluster', 'config.yml');
@@ -28,6 +29,22 @@ export function updateTheme(name) {
 }
 
 export function getTheme() {
+    if (currentThemeConfig === 'custom') {
+        if (!customThemeCache) {
+            const customPath = path.join(os.homedir(), '.lcluster', 'custom.json');
+            if (fs.existsSync(customPath)) {
+                try {
+                    customThemeCache = JSON.parse(fs.readFileSync(customPath, 'utf8'));
+                } catch {
+                    customThemeCache = neon; // Fallback bad json
+                }
+            } else {
+                customThemeCache = neon;
+            }
+        }
+        return customThemeCache;
+    }
+
     switch (currentThemeConfig) {
         case 'minimal': return minimal;
         case 'amber': return amber;