magus-cli 0.0.0-placeholder → 7.0.0

package/src/ui/screens/index.ts

@@ -0,0 +1,11 @@
+export { PluginsScreen } from "./PluginsScreen.js";
+export { McpScreen } from "./McpScreen.js";
+export { McpRegistryScreen } from "./McpRegistryScreen.js";
+export { SettingsScreen } from "./EnvVarsScreen.js";
+export { CliToolsScreen } from "./CliToolsScreen.js";
+export { ProfilesScreen } from "./ProfilesScreen.js";
+export { SkillsScreen } from "./SkillsScreen.js";
+export { StylesScreen } from "./StylesScreen.js";
+export { GitignoreScreen } from "./GitignoreScreen.js";
+export { AliasScreen } from "./AliasScreen.js";
+export { ModelsScreen } from "./ModelsScreen.js";

package/src/ui/state/AppContext.tsx

@@ -0,0 +1,233 @@
+import type React from "react";
+import { type ReactNode, createContext, useContext, useReducer } from "react";
+import { appReducer, initialState } from "./reducer.js";
+import type {
+	AppAction,
+	AppState,
+	ModalState,
+	ProgressState,
+	Route,
+} from "./types.js";
+
+// ============================================================================
+// Context Type
+// ============================================================================
+
+interface AppContextValue {
+	state: AppState;
+	dispatch: React.Dispatch<AppAction>;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const AppContext = createContext<AppContextValue | null>(null);
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+interface AppProviderProps {
+	children: ReactNode;
+	initialProjectPath?: string;
+}
+
+export function AppProvider({
+	children,
+	initialProjectPath,
+}: AppProviderProps) {
+	const [state, dispatch] = useReducer(appReducer, {
+		...initialState,
+		projectPath: initialProjectPath || process.cwd(),
+	});
+
+	return (
+		<AppContext.Provider value={{ state, dispatch }}>
+			{children}
+		</AppContext.Provider>
+	);
+}
+
+// ============================================================================
+// Hook: useApp
+// ============================================================================
+
+export function useApp(): AppContextValue {
+	const context = useContext(AppContext);
+	if (!context) {
+		throw new Error("useApp must be used within an AppProvider");
+	}
+	return context;
+}
+
+// ============================================================================
+// Hook: useNavigation
+// ============================================================================
+
+export function useNavigation() {
+	const { state, dispatch } = useApp();
+
+	return {
+		currentRoute: state.currentRoute,
+		currentScreen: state.currentRoute.screen,
+
+		navigateTo: (route: Route) => {
+			dispatch({ type: "NAVIGATE", route });
+		},
+
+		navigateToScreen: (screen: Route["screen"]) => {
+			dispatch({ type: "NAVIGATE", route: { screen } as Route });
+		},
+	};
+}
+
+// ============================================================================
+// Hook: useModal
+// ============================================================================
+
+export function useModal() {
+	const { dispatch } = useApp();
+
+	return {
+		showModal: (modal: ModalState) => {
+			dispatch({ type: "SHOW_MODAL", modal });
+		},
+
+		hideModal: () => {
+			dispatch({ type: "HIDE_MODAL" });
+		},
+
+		confirm: (title: string, message: string): Promise<boolean> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "confirm",
+						title,
+						message,
+						onConfirm: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(true);
+						},
+						onCancel: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(false);
+						},
+					},
+				});
+			});
+		},
+
+		input: (
+			title: string,
+			label: string,
+			defaultValue?: string,
+		): Promise<string | null> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "input",
+						title,
+						label,
+						defaultValue,
+						onSubmit: (value: string) => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(value);
+						},
+						onCancel: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(null);
+						},
+					},
+				});
+			});
+		},
+
+		select: (
+			title: string,
+			message: string,
+			options: { label: string; value: string; description?: string }[],
+			defaultIndex?: number,
+		): Promise<string | null> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "select",
+						title,
+						message,
+						options,
+						defaultIndex,
+						onSelect: (value: string) => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(value);
+						},
+						onCancel: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(null);
+						},
+					},
+				});
+			});
+		},
+
+		message: (
+			title: string,
+			message: string,
+			variant: "info" | "success" | "error" = "info",
+		): Promise<void> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "message",
+						title,
+						message,
+						variant,
+						onDismiss: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve();
+						},
+					},
+				});
+			});
+		},
+
+		loading: (message: string) => {
+			dispatch({
+				type: "SHOW_MODAL",
+				modal: {
+					type: "loading",
+					message,
+				},
+			});
+		},
+	};
+}
+
+// ============================================================================
+// Hook: useProgress
+// ============================================================================
+
+export function useProgress() {
+	const { state, dispatch } = useApp();
+
+	return {
+		progress: state.progress,
+		isVisible: state.progress !== null,
+
+		show: (message: string, current?: number, total?: number) => {
+			dispatch({ type: "SHOW_PROGRESS", state: { message, current, total } });
+		},
+
+		update: (state: ProgressState) => {
+			dispatch({ type: "UPDATE_PROGRESS", state });
+		},
+
+		hide: () => {
+			dispatch({ type: "HIDE_PROGRESS" });
+		},
+	};
+}

package/src/ui/state/DimensionsContext.tsx

@@ -0,0 +1,154 @@
+import { useOnResize, useRenderer } from "@opentui/react";
+import type React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+interface Dimensions {
+	/** Terminal width */
+	terminalWidth: number;
+	/** Terminal height */
+	terminalHeight: number;
+	/** Available height for main content (excluding header, footer, margins) */
+	contentHeight: number;
+	/** Available width for content (excluding borders, padding) */
+	contentWidth: number;
+	/** Available lines for scrollbox in list panels */
+	listPanelHeight: number;
+}
+
+const DimensionsContext = createContext<Dimensions | null>(null);
+
+// Fixed heights for layout elements
+const SCREEN_HEADER_HEIGHT = 4; // ScreenLayout: border + title row + status/search row + border
+const SCREEN_FOOTER_HEIGHT = 2; // ScreenLayout: border-top + footer content
+const APP_MARGINS = 1; // buffer for margins/padding
+const PROGRESS_HEIGHT = 1; // when visible
+
+interface DimensionsProviderProps {
+	children: React.ReactNode;
+	/** Whether progress bar is visible */
+	showProgress?: boolean;
+	/** Whether debug bar is visible */
+	showDebug?: boolean;
+	/** Whether update banner is visible */
+	showUpdateBanner?: boolean;
+	/** Number of transient banners (recovery, mismatch) currently visible */
+	transientBannerCount?: number;
+}
+
+function calculateDimensions(
+	columns: number,
+	rows: number,
+	showProgress: boolean,
+	showDebug: boolean,
+	showUpdateBanner: boolean,
+	transientBannerCount: number,
+): Dimensions {
+	const terminalWidth = columns;
+	const terminalHeight = rows;
+
+	// Calculate total available height for ScreenLayout (includes its header, panels, footer)
+	let contentHeight = terminalHeight - APP_MARGINS;
+	if (showProgress) contentHeight -= PROGRESS_HEIGHT;
+	if (showDebug) contentHeight -= 1;
+	if (showUpdateBanner) contentHeight -= 1;
+	contentHeight -= transientBannerCount;
+	contentHeight = Math.max(10, contentHeight); // Minimum 10 lines for full layout
+
+	// Calculate available content width (accounting for padding)
+	const contentWidth = Math.max(40, terminalWidth - 4);
+
+	// Calculate list panel height for scrollbox
+	// ScreenLayout uses: panelHeight = contentHeight - 4 (header) - 1 (footer)
+	// The scrollbox sits inside the panel
+	const listPanelHeight = Math.max(
+		3,
+		contentHeight - SCREEN_HEADER_HEIGHT - SCREEN_FOOTER_HEIGHT,
+	);
+
+	return {
+		terminalWidth,
+		terminalHeight,
+		contentHeight,
+		contentWidth,
+		listPanelHeight,
+	};
+}
+
+export function DimensionsProvider({
+	children,
+	showProgress = false,
+	showDebug = false,
+	showUpdateBanner = false,
+	transientBannerCount = 0,
+}: DimensionsProviderProps) {
+	const renderer = useRenderer();
+
+	const [dimensions, setDimensions] = useState<Dimensions>(() =>
+		calculateDimensions(
+			renderer.width,
+			renderer.height,
+			showProgress,
+			showDebug,
+			showUpdateBanner,
+			transientBannerCount,
+		),
+	);
+
+	// Handle terminal resize
+	useOnResize((width, height) => {
+		setDimensions(
+			calculateDimensions(
+				width,
+				height,
+				showProgress,
+				showDebug,
+				showUpdateBanner,
+				transientBannerCount,
+			),
+		);
+	});
+
+	// Update when showProgress/showDebug/showUpdateBanner/transientBannerCount changes
+	useEffect(() => {
+		setDimensions(
+			calculateDimensions(
+				renderer.width,
+				renderer.height,
+				showProgress,
+				showDebug,
+				showUpdateBanner,
+				transientBannerCount,
+			),
+		);
+	}, [
+		renderer.width,
+		renderer.height,
+		showProgress,
+		showDebug,
+		showUpdateBanner,
+		transientBannerCount,
+	]);
+
+	return (
+		<DimensionsContext.Provider value={dimensions}>
+			{children}
+		</DimensionsContext.Provider>
+	);
+}
+
+export function useDimensions(): Dimensions {
+	const context = useContext(DimensionsContext);
+	if (!context) {
+		// Return sensible defaults if used outside provider
+		return {
+			terminalWidth: 80,
+			terminalHeight: 24,
+			contentHeight: 23, // 24 - 1 margin
+			contentWidth: 76,
+			listPanelHeight: 17, // 23 - 4 header - 2 footer
+		};
+	}
+	return context;
+}
+
+export default DimensionsContext;