automagik-cli
Version:
Automagik CLI - A powerful command-line interface for interacting with Automagik Hive multi-agent AI systems
40 lines (39 loc) • 4.06 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { shortenPath, tildeifyPath } from '../utils/textUtils.js';
import Gradient from 'ink-gradient';
import { useResponsiveLayout, useResponsiveText } from '../hooks/useResponsiveLayout.js';
export const Footer = ({ model, targetDir, debugMode, debugMessage, sessionId, apiUrl, branchName, nightly = false, selectedTarget, }) => {
const layout = useResponsiveLayout();
const formatSessionId = (id) => {
return id.slice(-8); // Show last 8 characters
};
// Responsive text calculations
const leftSectionWidth = Math.floor(layout.width * 0.3);
const middleSectionWidth = Math.floor(layout.width * 0.4);
const rightSectionWidth = Math.floor(layout.width * 0.3);
// Responsive target directory display
const displayTargetDir = targetDir ?
useResponsiveText(shortenPath(tildeifyPath(targetDir), leftSectionWidth), leftSectionWidth) :
null;
// Responsive session ID
const displaySessionId = useResponsiveText(`Session: ${formatSessionId(sessionId)}`, leftSectionWidth);
// Responsive target name
const targetDisplayText = selectedTarget ?
`🎯 ${selectedTarget.name} (${selectedTarget.type})` :
'🎯 automagik-local-cli';
const displayTargetText = useResponsiveText(targetDisplayText, middleSectionWidth);
// Responsive API/model display
const apiDisplayText = model ? model : `API: ${apiUrl.replace(/^https?:\/\//, '')}`;
const displayApiText = useResponsiveText(apiDisplayText, rightSectionWidth);
// Responsive debug message
const truncatedDebugMessage = useResponsiveText(debugMessage || '--debug', Math.max(leftSectionWidth - 10, 10));
const displayDebugMessage = debugMessage ? truncatedDebugMessage : '--debug';
// Responsive layout: stack vertically on very small screens
if (layout.isSmall && layout.width < 60) {
return (_jsxs(Box, { marginTop: layout.isShort ? 0 : 1, flexDirection: "column", width: "100%", children: [_jsxs(Box, { marginBottom: layout.isShort ? 0 : 1, children: [displayTargetDir ? (nightly ? (_jsx(Gradient, { colors: Colors.GradientColors, children: _jsxs(Text, { children: [displayTargetDir, branchName && _jsxs(Text, { children: [" (", branchName, "*)"] })] }) })) : (_jsxs(Text, { color: Colors.LightBlue, children: [displayTargetDir, branchName && _jsxs(Text, { color: Colors.Gray, children: [" (", branchName, "*)"] })] }))) : (_jsx(Text, { color: Colors.LightBlue, children: displaySessionId })), debugMode && (_jsx(Text, { color: Colors.AccentRed, children: ' ' + displayDebugMessage }))] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: Colors.AccentPurple, children: displayTargetText }), _jsx(Text, { color: Colors.AccentBlue, children: displayApiText })] })] }));
}
// Normal horizontal layout for medium/large screens
return (_jsxs(Box, { marginTop: layout.isShort ? 0 : 1, justifyContent: "space-between", width: "100%", children: [_jsxs(Box, { flexShrink: 1, minWidth: 0, children: [displayTargetDir ? (nightly ? (_jsx(Gradient, { colors: Colors.GradientColors, children: _jsxs(Text, { children: [displayTargetDir, branchName && _jsxs(Text, { children: [" (", branchName, "*)"] })] }) })) : (_jsxs(Text, { color: Colors.LightBlue, children: [displayTargetDir, branchName && _jsxs(Text, { color: Colors.Gray, children: [" (", branchName, "*)"] })] }))) : (_jsx(Text, { color: Colors.LightBlue, children: displaySessionId })), debugMode && (_jsx(Text, { color: Colors.AccentRed, children: ' ' + displayDebugMessage }))] }), !layout.isSmall && (_jsx(Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", display: "flex", flexShrink: 1, minWidth: 0, children: _jsx(Text, { color: Colors.AccentPurple, children: displayTargetText }) })), _jsx(Box, { alignItems: "center", flexShrink: 1, minWidth: 0, children: _jsx(Text, { color: Colors.AccentBlue, children: displayApiText }) })] }));
};