tlnt
Version:
TLNT - HMS-Powered Multi-Agent Platform with Government Agency Analysis, Deep Research, and Enterprise-Ready Deployment. Self-optimizing multi-domain AI agent with continuous learning and enterprise-grade performance monitoring.
100 lines • 8.43 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Enhanced Tmux-Style UI Components
*
* Beautiful terminal UI components inspired by tmux configurations
* with customizable themes, borders, and layouts
*/
import React from 'react';
import { Box, Text } from 'ink';
// Border characters for different styles
const BORDER_CHARS = {
single: {
topLeft: '┌', topRight: '┐', bottomLeft: '└', bottomRight: '┘',
horizontal: '─', vertical: '│', cross: '┼',
topTee: '┬', bottomTee: '┴', leftTee: '├', rightTee: '┤'
},
double: {
topLeft: '╔', topRight: '╗', bottomLeft: '╚', bottomRight: '╝',
horizontal: '═', vertical: '║', cross: '╬',
topTee: '╦', bottomTee: '╩', leftTee: '╠', rightTee: '╣'
},
rounded: {
topLeft: '╭', topRight: '╮', bottomLeft: '╰', bottomRight: '╯',
horizontal: '─', vertical: '│', cross: '┼',
topTee: '┬', bottomTee: '┴', leftTee: '├', rightTee: '┤'
},
thick: {
topLeft: '┏', topRight: '┓', bottomLeft: '┗', bottomRight: '┛',
horizontal: '━', vertical: '┃', cross: '╋',
topTee: '┳', bottomTee: '┻', leftTee: '┣', rightTee: '┫'
},
ascii: {
topLeft: '+', topRight: '+', bottomLeft: '+', bottomRight: '+',
horizontal: '-', vertical: '|', cross: '+',
topTee: '+', bottomTee: '+', leftTee: '+', rightTee: '+'
}
};
export const TmuxPanel = ({ title, children, theme, width, height, isActive = false, showBorder = true, showTitle = true, }) => {
const borderChars = BORDER_CHARS[theme.borders.style];
const borderColor = isActive ? theme.borders.active : theme.borders.inactive;
const titleColor = isActive ? theme.colors.primary : theme.colors.muted;
if (!showBorder) {
return (_jsxs(Box, { width: width, height: height, flexDirection: "column", children: [showTitle && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: titleColor, bold: theme.panes.titleStyle === 'bold', children: title }) })), _jsx(Box, { flexGrow: 1, paddingX: theme.panes.contentPadding, children: children })] }));
}
return (_jsxs(Box, { width: width, height: height, flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { color: borderColor, children: [borderChars.topLeft, showTitle ? (_jsxs(_Fragment, { children: [borderChars.horizontal.repeat(Math.max(0, Math.floor((width - title.length - 4) / 2))), _jsx(Text, { color: titleColor, bold: theme.panes.titleStyle === 'bold', children: ` ${title} ` }), borderChars.horizontal.repeat(Math.max(0, Math.ceil((width - title.length - 4) / 2)))] })) : (borderChars.horizontal.repeat(width - 2)), borderChars.topRight] }) }), _jsxs(Box, { flexGrow: 1, width: width, children: [_jsx(Text, { color: borderColor, children: borderChars.vertical }), _jsx(Box, { flexGrow: 1, paddingX: theme.panes.contentPadding, children: children }), _jsx(Text, { color: borderColor, children: borderChars.vertical })] }), _jsx(Box, { children: _jsxs(Text, { color: borderColor, children: [borderChars.bottomLeft, borderChars.horizontal.repeat(width - 2), borderChars.bottomRight] }) })] }));
};
export const TmuxStatusBar = ({ theme, width, leftContent, centerContent, rightContent, showTime = true, }) => {
const currentTime = new Date().toLocaleTimeString('en-US', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
const timeText = showTime ? currentTime : '';
const separator = theme.statusBar.separator;
return (_jsxs(Box, { width: width, children: [_jsx(Box, { flexGrow: 1, children: leftContent && (_jsxs(Text, { color: theme.colors.primary, children: [leftContent, separator] })) }), theme.statusBar.justify === 'center' && centerContent && (_jsx(Box, { flexGrow: 1, justifyContent: "center", children: _jsx(Text, { color: theme.colors.foreground, children: centerContent }) })), _jsxs(Box, { children: [rightContent && (_jsxs(Text, { color: theme.colors.secondary, children: [separator, rightContent] })), showTime && theme.statusBar.showTime && (_jsxs(Text, { color: theme.colors.accent, children: [rightContent ? ` ${separator} ` : '', timeText] }))] })] }));
};
export const TmuxWindowTabs = ({ theme, width, activeWindow, windows, onWindowSelect, }) => {
const separator = theme.windows.separator;
return (_jsx(Box, { width: width, children: windows.map((window, index) => {
const isActive = window.id === activeWindow;
const style = isActive ? theme.windows.currentStyle : theme.windows.inactiveStyle;
const color = isActive ? theme.colors.primary : theme.colors.muted;
return (_jsxs(React.Fragment, { children: [_jsxs(Text, { color: color, bold: style.includes('bold'), inverse: style.includes('inverse'), dimColor: style.includes('dim'), children: [window.name, window.hasActivity && !isActive && '*'] }), index < windows.length - 1 && (_jsx(Text, { color: theme.colors.muted, children: separator }))] }, window.id));
}) }));
};
export const TmuxNotification = ({ theme, message, type, width, }) => {
const colorMap = {
info: theme.colors.primary,
warning: theme.colors.warning,
error: theme.colors.error,
success: theme.colors.success,
};
const iconMap = {
info: 'ℹ',
warning: '⚠',
error: '✗',
success: '✓',
};
return (_jsx(Box, { width: width, paddingX: 1, children: _jsxs(Text, { color: theme.colors.background, bold: true, children: [iconMap[type], " ", message] }) }));
};
export const TmuxProgressBar = ({ theme, width, progress, label, showPercentage = true, }) => {
const clampedProgress = Math.max(0, Math.min(100, progress));
const fillWidth = Math.floor((width - 2) * (clampedProgress / 100));
const emptyWidth = (width - 2) - fillWidth;
return (_jsxs(Box, { width: width, children: [label && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.foreground, children: label }) })), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.muted, children: "[" }), _jsx(Text, { color: theme.colors.success, children: '█'.repeat(fillWidth) }), _jsx(Text, { color: theme.colors.muted, children: '░'.repeat(emptyWidth) }), _jsx(Text, { color: theme.colors.muted, children: "]" }), showPercentage && (_jsxs(Text, { color: theme.colors.accent, children: [" ", clampedProgress.toFixed(1), "%"] }))] })] }));
};
export const TmuxHelpModal = ({ theme, width, height, keybindings, onClose, }) => {
const borderChars = BORDER_CHARS[theme.borders.style];
return (_jsx(Box, { width: width, height: height, borderStyle: theme.borders.style === 'ascii' ? 'single' : theme.borders.style, borderColor: theme.colors.primary, children: _jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.primary, bold: true, children: "HMS-Powered Tmux Interface - Help" }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { color: theme.colors.accent, bold: true, children: "Keybindings:" }), Object.entries(keybindings).map(([action, key]) => (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: theme.colors.success, children: key.padEnd(10) }), _jsx(Text, { color: theme.colors.foreground, children: action })] }, action))), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.accent, bold: true, children: "Commands:" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", children: [_jsx(Text, { color: theme.colors.foreground, children: "/help - Show this help" }), _jsx(Text, { color: theme.colors.foreground, children: "/status - System status" }), _jsx(Text, { color: theme.colors.foreground, children: "/agents - List agents" }), _jsx(Text, { color: theme.colors.foreground, children: "/theme [name] - Change theme" }), _jsx(Text, { color: theme.colors.foreground, children: "/clear - Clear screen" })] })] })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.colors.muted, children: ["Press ", keybindings.exit, " to close help"] }) })] }) }));
};
export default {
TmuxPanel,
TmuxStatusBar,
TmuxWindowTabs,
TmuxNotification,
TmuxProgressBar,
TmuxHelpModal,
};
//# sourceMappingURL=tmuxComponents.js.map