lcluster 1.0.0

package/src/tui/screens/Settings.jsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import yaml from 'js-yaml';
+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'];
+
+export default function Settings({ onBack }) {
+    const configPath = path.join(os.homedir(), '.lcluster', 'config.yml');
+    const [config, setConfig] = useState(() => {
+        if (fs.existsSync(configPath)) {
+            try { return yaml.load(fs.readFileSync(configPath, 'utf8')) || {}; } catch { }
+        }
+        return {};
+    });
+
+    const [themeIdx, setThemeIdx] = useState(
+        themes.indexOf(config.theme || 'neon') !== -1 ? themes.indexOf(config.theme || 'neon') : 0
+    );
+
+    const [portStr, setPortStr] = useState(String(config.gateway?.port || 2333));
+    const [passStr, setPassStr] = useState(config.gateway?.password || 'youshallnotpass');
+
+    const [discordUrl, setDiscordUrl] = useState(config.alerts?.discord?.webhook || '');
+    const [discordEnabled, setDiscordEnabled] = useState(config.alerts?.discord?.enabled || false);
+    const [desktopEnabled, setDesktopEnabled] = useState(config.alerts?.desktop?.enabled || false);
+    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 theme = getTheme();
+
+    useInput((input, key) => {
+        if (key.escape || (input === 'q' && field === 0)) {
+            onBack();
+        }
+        if (key.upArrow) setField(Math.max(0, field - 1));
+        if (key.downArrow) setField(Math.min(7, field + 1));
+
+        if (field === 0) {
+            if (key.leftArrow) {
+                const newIdx = Math.max(0, themeIdx - 1);
+                setThemeIdx(newIdx);
+                updateTheme(themes[newIdx]);
+            }
+            if (key.rightArrow) {
+                const newIdx = Math.min(themes.length - 1, themeIdx + 1);
+                setThemeIdx(newIdx);
+                updateTheme(themes[newIdx]);
+            }
+        }
+
+        if (key.return) {
+            if (field === 3) setDiscordEnabled(!discordEnabled);
+            else if (field === 5) setDesktopEnabled(!desktopEnabled);
+            else if (field === 6) setSoundEnabled(!soundEnabled);
+            else {
+                // Save config
+                const newConfig = {
+                    ...config,
+                    theme: themes[themeIdx],
+                    gateway: {
+                        port: parseInt(portStr),
+                        password: passStr
+                    },
+                    alerts: {
+                        discord: { enabled: discordEnabled, webhook: discordUrl },
+                        desktop: { enabled: desktopEnabled },
+                        sound: { enabled: soundEnabled },
+                        thresholds: { cpu_warn: parseInt(cpuWarn) || 90, idle_warn: false }
+                    }
+                };
+                fs.writeFileSync(configPath, yaml.dump(newConfig), 'utf8');
+                onBack();
+            }
+        }
+    });
+
+    return (
+        <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>
+                    <Box marginBottom={1}>
+                        <Text color={theme.textDim}>Theme          </Text>
+                        <Text color={field === 0 ? theme.text : theme.textDim}>
+                            {field === 0 && <Text color={theme.accent}>▶ </Text>}
+                            {'< '} {themes[themeIdx].padEnd(8)} {' >'}
+                        </Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>GATEWAY</Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>Port           </Text>
+                        {field === 1 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <TextInput value={portStr} onChange={setPortStr} focus={field === 1} />
+                    </Box>
+                    <Box marginBottom={1}>
+                        <Text color={theme.textDim}>Password       </Text>
+                        {field === 2 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <TextInput value={passStr} onChange={setPassStr} focus={field === 2} mask="•" />
+                    </Box>
+
+                    <Box>
+                        <Text color={theme.textDim}>ALERTS</Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>Discord        </Text>
+                        {field === 3 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <Text color={discordEnabled ? theme.online : theme.textDim}>{discordEnabled ? '● enabled' : '○ disabled'}</Text>
+                        <Text color={theme.textDim}>    webhook → </Text>
+                        {field === 4 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <TextInput value={discordUrl} onChange={setDiscordUrl} focus={field === 4} />
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>Desktop        </Text>
+                        {field === 5 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <Text color={desktopEnabled ? theme.online : theme.textDim}>{desktopEnabled ? '● enabled' : '○ disabled'}</Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>Sound          </Text>
+                        {field === 6 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <Text color={soundEnabled ? theme.online : theme.textDim}>{soundEnabled ? '● enabled' : '○ disabled'}</Text>
+                    </Box>
+                    <Box>
+                        <Text color={theme.textDim}>CPU threshold  </Text>
+                        {field === 7 ? <Text color={theme.accent}>▶ </Text> : <Text>  </Text>}
+                        <TextInput value={cpuWarn} onChange={setCpuWarn} focus={field === 7} />
+                        <Text color={theme.textDim}>%</Text>
+                    </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.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 >
+    );
+}

package/src/tui/screens/Templates.jsx

@@ -0,0 +1,42 @@
+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';
+
+export default function Templates({ onBack }) {
+    const theme = getTheme();
+    const [templates] = useState(() => listTemplates());
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    useInput((input, key) => {
+        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
+    });
+
+    return (
+        <Box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+            <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> : '  '}
+                            {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>
+                </Box>
+            </Border>
+            <Box marginTop={1}>
+                <Text color={theme.textDim}>[↑↓] navigate   [enter] select / edit   [d] delete (user only)   [q] back</Text>
+            </Box>
+        </Box>
+    );
+}

package/src/tui/theme/amber.js

@@ -0,0 +1,16 @@
+export default {
+    border: '#ffb347',
+    borderDim: '#ffb34733',
+    text: '#ffb347',
+    textDim: '#ff8c0066',
+    background: '#0d0800',
+    selected: '#ffb347',
+    selectedBorder: '#ff8c00',
+    online: '#ffb347',
+    degraded: '#ff8c00',
+    offline: '#8b4513',
+    docker: '#ffd700',
+    process: '#ffb347',
+    accent: '#ff8c00',
+    keyHint: '#ff8c0044',
+};

package/src/tui/theme/cyberpunk.js

@@ -0,0 +1,15 @@
+const cyberpunk = {
+    background: '#0B0B1A',
+    text: '#E0E0E0',
+    textDim: '#6b7280',
+    border: '#FF0055',
+    borderDim: '#4A0033',
+    accent: '#00FFCC',
+    error: '#FF0055',
+    warning: '#FFEA00',
+    online: '#00FFCC',
+    degraded: '#FFEA00',
+    offline: '#FF0055'
+};
+
+export default cyberpunk;

package/src/tui/theme/hacker.js

@@ -0,0 +1,15 @@
+const hacker = {
+    background: '#000000',
+    text: '#00FF00',
+    textDim: '#005500',
+    border: '#00FF00',
+    borderDim: '#003300',
+    accent: '#FFFFFF',
+    error: '#FF0000',
+    warning: '#FFFF00',
+    online: '#00FF00',
+    degraded: '#FFFF00',
+    offline: '#FF0000'
+};
+
+export default hacker;

package/src/tui/theme/index.js

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import yaml from 'js-yaml';
+import neon from './neon.js';
+import minimal from './minimal.js';
+import amber from './amber.js';
+import cyberpunk from './cyberpunk.js';
+import hacker from './hacker.js';
+import ocean from './ocean.js';
+
+let currentThemeConfig = 'neon';
+
+export function loadTheme() {
+    const configPath = path.join(os.homedir(), '.lcluster', 'config.yml');
+    if (fs.existsSync(configPath)) {
+        try {
+            const doc = yaml.load(fs.readFileSync(configPath, 'utf8'));
+            if (doc && doc.theme) {
+                currentThemeConfig = doc.theme;
+            }
+        } catch { }
+    }
+}
+
+export function updateTheme(name) {
+    currentThemeConfig = name;
+}
+
+export function getTheme() {
+    switch (currentThemeConfig) {
+        case 'minimal': return minimal;
+        case 'amber': return amber;
+        case 'cyberpunk': return cyberpunk;
+        case 'hacker': return hacker;
+        case 'ocean': return ocean;
+        case 'neon':
+        default: return neon;
+    }
+}
+
+export { currentThemeConfig };

package/src/tui/theme/minimal.js

@@ -0,0 +1,16 @@
+export default {
+    border: '#45475a',
+    borderDim: '#313244',
+    text: '#cdd6f4',
+    textDim: '#6c7086',
+    background: '#1e1e2e',
+    selected: '#313244',
+    selectedBorder: '#45475a',
+    online: '#a6e3a1',
+    degraded: '#f9e2af',
+    offline: '#f38ba8',
+    docker: '#89b4fa',
+    process: '#a6e3a1',
+    accent: '#cba6f7',
+    keyHint: '#45475a',
+};

package/src/tui/theme/neon.js

@@ -0,0 +1,16 @@
+export default {
+    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',
+};

package/src/tui/theme/ocean.js

@@ -0,0 +1,15 @@
+const ocean = {
+    background: '#0B132B',
+    text: '#E0FBFC',
+    textDim: '#5C6B73',
+    border: '#3A506B',
+    borderDim: '#1C2541',
+    accent: '#5BC0BE',
+    error: '#FF6B6B',
+    warning: '#F4D35E',
+    online: '#5BC0BE',
+    degraded: '#F4D35E',
+    offline: '#FF6B6B'
+};
+
+export default ocean;