Starting Over with Ink

src/tui/components/StatusBar.jsx

@@ -0,0 +1,56 @@
+const React = require("react");
+const { Box, Text } = require("ink");
+const { useAppState } = require("../providers/AppProvider");
+
+/**
+ * StatusBar Component
+ * Displays global status information at the top of the application
+ * Requirements: 8.1, 8.2, 8.3
+ */
+const StatusBar = () => {
+	const { appState } = useAppState();
+
+	// Get connection status (placeholder for now)
+	const connectionStatus = "Connected"; // Will be dynamic later
+	const connectionColor = "green";
+
+	// Get operation progress
+	const operationProgress = appState.operationState?.progress || 0;
+
+	// Get current screen name for display
+	const screenNames = {
+		"main-menu": "Main Menu",
+		configuration: "Configuration",
+		operation: "Operation",
+		scheduling: "Scheduling",
+		logs: "Logs",
+		"tag-analysis": "Tag Analysis",
+	};
+
+	const currentScreenName = screenNames[appState.currentScreen] || "Unknown";
+
+	return React.createElement(
+		Box,
+		{
+			borderStyle: "single",
+			paddingX: 1,
+			justifyContent: "space-between",
+		},
+		React.createElement(
+			Box,
+			null,
+			React.createElement(Text, { color: connectionColor }, "● "),
+			React.createElement(Text, null, connectionStatus),
+			React.createElement(Text, null, " | "),
+			React.createElement(Text, null, `Screen: ${currentScreenName}`)
+		),
+		React.createElement(
+			Box,
+			null,
+			appState.operationState &&
+				React.createElement(Text, null, `Progress: ${operationProgress}%`)
+		)
+	);
+};
+
+module.exports = StatusBar;