387 lines
12 KiB
TypeScript
387 lines
12 KiB
TypeScript
/**
|
|
* Template List Screen - Lists available templates and starting actions.
|
|
*
|
|
* Allows users to:
|
|
* - View imported templates
|
|
* - Select a template and action to start a new transaction
|
|
*/
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { Box, Text, useInput } from 'ink';
|
|
import { ScrollableList, type ListItemData } from '../components/List.js';
|
|
import { useNavigation } from '../hooks/useNavigation.js';
|
|
import { useAppContext, useStatus } from '../hooks/useAppContext.js';
|
|
import { colors, logoSmall } from '../theme.js';
|
|
|
|
// XO Imports
|
|
import { generateTemplateIdentifier } from '@xo-cash/engine';
|
|
import type { XOTemplate } from '@xo-cash/types';
|
|
|
|
// Import utility functions
|
|
import {
|
|
formatTemplateListItem,
|
|
formatActionListItem,
|
|
deduplicateStartingActions,
|
|
getTemplateRoles,
|
|
getRolesForAction,
|
|
type UniqueStartingAction,
|
|
} from '../../utils/template-utils.js';
|
|
|
|
/**
|
|
* Template item with metadata.
|
|
*/
|
|
interface TemplateItem {
|
|
template: XOTemplate;
|
|
templateIdentifier: string;
|
|
startingActions: UniqueStartingAction[];
|
|
}
|
|
|
|
/**
|
|
* Template list item with TemplateItem value.
|
|
*/
|
|
type TemplateListItem = ListItemData<TemplateItem>;
|
|
|
|
/**
|
|
* Action list item with UniqueStartingAction value.
|
|
*/
|
|
type ActionListItem = ListItemData<UniqueStartingAction>;
|
|
|
|
/**
|
|
* Template List Screen Component.
|
|
* Displays templates and their starting actions.
|
|
*/
|
|
export function TemplateListScreen(): React.ReactElement {
|
|
const { navigate } = useNavigation();
|
|
const { appService, showError } = useAppContext();
|
|
const { setStatus } = useStatus();
|
|
|
|
// State
|
|
const [templates, setTemplates] = useState<TemplateItem[]>([]);
|
|
const [selectedTemplateIndex, setSelectedTemplateIndex] = useState(0);
|
|
const [selectedActionIndex, setSelectedActionIndex] = useState(0);
|
|
const [focusedPanel, setFocusedPanel] = useState<'templates' | 'actions'>('templates');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
/**
|
|
* Loads templates from the engine.
|
|
*/
|
|
const loadTemplates = useCallback(async () => {
|
|
if (!appService) {
|
|
showError('AppService not initialized');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
setStatus('Loading templates...');
|
|
|
|
const templateList = await appService.engine.listImportedTemplates();
|
|
|
|
const loadedTemplates = await Promise.all(
|
|
templateList.map(async (template) => {
|
|
const templateIdentifier = generateTemplateIdentifier(template);
|
|
const rawStartingActions = await appService.engine.listStartingActions(templateIdentifier);
|
|
|
|
// Use utility function to deduplicate actions
|
|
const startingActions = deduplicateStartingActions(template, rawStartingActions);
|
|
|
|
return {
|
|
template,
|
|
templateIdentifier,
|
|
startingActions,
|
|
};
|
|
})
|
|
);
|
|
|
|
setTemplates(loadedTemplates);
|
|
setSelectedTemplateIndex(0);
|
|
setSelectedActionIndex(0);
|
|
setStatus('Ready');
|
|
setIsLoading(false);
|
|
} catch (error) {
|
|
showError(`Failed to load templates: ${error instanceof Error ? error.message : String(error)}`);
|
|
setIsLoading(false);
|
|
}
|
|
}, [appService, setStatus, showError]);
|
|
|
|
// Load templates on mount
|
|
useEffect(() => {
|
|
loadTemplates();
|
|
}, [loadTemplates]);
|
|
|
|
// Get current template and its actions
|
|
const currentTemplate = templates[selectedTemplateIndex];
|
|
const currentActions = currentTemplate?.startingActions ?? [];
|
|
|
|
/**
|
|
* Build template list items for ScrollableList.
|
|
*/
|
|
const templateListItems = useMemo((): TemplateListItem[] => {
|
|
return templates.map((item, index) => {
|
|
const formatted = formatTemplateListItem(item.template, index);
|
|
return {
|
|
key: item.templateIdentifier,
|
|
label: formatted.label,
|
|
description: formatted.description,
|
|
value: item,
|
|
hidden: !formatted.isValid,
|
|
};
|
|
});
|
|
}, [templates]);
|
|
|
|
/**
|
|
* Build action list items for ScrollableList.
|
|
*/
|
|
const actionListItems = useMemo((): ActionListItem[] => {
|
|
return currentActions.map((action, index) => {
|
|
const formatted = formatActionListItem(
|
|
action.actionIdentifier,
|
|
currentTemplate?.template?.actions?.[action.actionIdentifier],
|
|
action.roleCount,
|
|
index
|
|
);
|
|
return {
|
|
key: action.actionIdentifier,
|
|
label: formatted.label,
|
|
description: formatted.description,
|
|
value: action,
|
|
hidden: !formatted.isValid,
|
|
};
|
|
});
|
|
}, [currentActions, currentTemplate]);
|
|
|
|
/**
|
|
* Handle template selection change.
|
|
*/
|
|
const handleTemplateSelect = useCallback((index: number) => {
|
|
setSelectedTemplateIndex(index);
|
|
setSelectedActionIndex(0); // Reset action selection when template changes
|
|
}, []);
|
|
|
|
/**
|
|
* Handles action selection.
|
|
* Navigates to the Action Wizard where the user will choose their role.
|
|
*/
|
|
const handleActionActivate = useCallback((item: ActionListItem, index: number) => {
|
|
if (!currentTemplate || !item.value) return;
|
|
|
|
const action = item.value;
|
|
|
|
// Navigate to the Action Wizard — role selection happens there
|
|
navigate('wizard', {
|
|
templateIdentifier: currentTemplate.templateIdentifier,
|
|
actionIdentifier: action.actionIdentifier,
|
|
template: currentTemplate.template,
|
|
});
|
|
}, [currentTemplate, navigate]);
|
|
|
|
// Handle keyboard navigation
|
|
useInput((input, key) => {
|
|
// Tab to switch panels
|
|
if (key.tab) {
|
|
setFocusedPanel(prev => prev === 'templates' ? 'actions' : 'templates');
|
|
return;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Render custom template list item.
|
|
*/
|
|
const renderTemplateItem = useCallback((
|
|
item: TemplateListItem,
|
|
isSelected: boolean,
|
|
isFocused: boolean
|
|
): React.ReactNode => {
|
|
return (
|
|
<Text
|
|
color={isFocused ? colors.focus : colors.text}
|
|
bold={isSelected}
|
|
>
|
|
{isFocused ? '▸ ' : ' '}
|
|
{item.label}
|
|
</Text>
|
|
);
|
|
}, []);
|
|
|
|
/**
|
|
* Render custom action list item.
|
|
*/
|
|
const renderActionItem = useCallback((
|
|
item: ActionListItem,
|
|
isSelected: boolean,
|
|
isFocused: boolean
|
|
): React.ReactNode => {
|
|
return (
|
|
<Text
|
|
color={isFocused ? colors.focus : colors.text}
|
|
bold={isSelected}
|
|
>
|
|
{isFocused ? '▸ ' : ' '}
|
|
{item.label}
|
|
</Text>
|
|
);
|
|
}, []);
|
|
|
|
return (
|
|
<Box flexDirection="column" flexGrow={1}>
|
|
{/* Header */}
|
|
<Box borderStyle="single" borderColor={colors.secondary} paddingX={1}>
|
|
<Text color={colors.primary} bold>{logoSmall} - Select Template & Action</Text>
|
|
</Box>
|
|
|
|
{/* Main content - two columns */}
|
|
<Box flexDirection="row" marginTop={1} flexGrow={1}>
|
|
{/* Left column: Template list */}
|
|
<Box flexDirection="column" width="40%" paddingRight={1}>
|
|
<Box
|
|
borderStyle="single"
|
|
borderColor={focusedPanel === 'templates' ? colors.focus : colors.primary}
|
|
flexDirection="column"
|
|
paddingX={1}
|
|
flexGrow={1}
|
|
>
|
|
<Text color={colors.primary} bold> Templates </Text>
|
|
{isLoading ? (
|
|
<Box marginTop={1}>
|
|
<Text color={colors.textMuted}>Loading...</Text>
|
|
</Box>
|
|
) : (
|
|
<ScrollableList
|
|
items={templateListItems}
|
|
selectedIndex={selectedTemplateIndex}
|
|
onSelect={handleTemplateSelect}
|
|
focus={focusedPanel === 'templates'}
|
|
emptyMessage="No templates imported"
|
|
renderItem={renderTemplateItem}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Right column: Actions list */}
|
|
<Box flexDirection="column" width="60%" paddingLeft={1}>
|
|
<Box
|
|
borderStyle="single"
|
|
borderColor={focusedPanel === 'actions' ? colors.focus : colors.border}
|
|
flexDirection="column"
|
|
paddingX={1}
|
|
flexGrow={1}
|
|
>
|
|
<Text color={colors.primary} bold> Starting Actions </Text>
|
|
{isLoading ? (
|
|
<Box marginTop={1}>
|
|
<Text color={colors.textMuted}>Loading...</Text>
|
|
</Box>
|
|
) : !currentTemplate ? (
|
|
<Box marginTop={1}>
|
|
<Text color={colors.textMuted}>Select a template...</Text>
|
|
</Box>
|
|
) : (
|
|
<ScrollableList
|
|
items={actionListItems}
|
|
selectedIndex={selectedActionIndex}
|
|
onSelect={setSelectedActionIndex}
|
|
onActivate={handleActionActivate}
|
|
focus={focusedPanel === 'actions'}
|
|
emptyMessage="No starting actions available"
|
|
renderItem={renderActionItem}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Description box */}
|
|
<Box marginTop={1}>
|
|
<Box
|
|
borderStyle="single"
|
|
borderColor={colors.border}
|
|
flexDirection="column"
|
|
paddingX={1}
|
|
paddingY={1}
|
|
width="100%"
|
|
>
|
|
<Text color={colors.primary} bold> Description </Text>
|
|
|
|
{/* Show template description when templates panel is focused */}
|
|
{focusedPanel === 'templates' && currentTemplate ? (
|
|
<Box marginTop={1} flexDirection="column">
|
|
<Text color={colors.text} bold>
|
|
{currentTemplate.template.name || 'Unnamed Template'}
|
|
</Text>
|
|
<Text color={colors.textMuted}>
|
|
{currentTemplate.template.description || 'No description available'}
|
|
</Text>
|
|
{currentTemplate.template.version !== undefined && (
|
|
<Text color={colors.text}>
|
|
Version: {currentTemplate.template.version}
|
|
</Text>
|
|
)}
|
|
{currentTemplate.template.roles && (
|
|
<Box marginTop={1} flexDirection="column">
|
|
<Text color={colors.text}>Roles:</Text>
|
|
{getTemplateRoles(currentTemplate.template).map((role) => (
|
|
<Text key={role.roleId} color={colors.textMuted}>
|
|
{' '}- {role.name}: {role.description || 'No description'}
|
|
</Text>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
) : focusedPanel === 'templates' && !currentTemplate ? (
|
|
<Text color={colors.textMuted}>Select a template to see details</Text>
|
|
) : null}
|
|
|
|
{/* Show action description when actions panel is focused */}
|
|
{focusedPanel === 'actions' && currentTemplate && currentActions.length > 0 ? (
|
|
<Box marginTop={1} flexDirection="column">
|
|
{(() => {
|
|
const action = currentActions[selectedActionIndex];
|
|
if (!action) return null;
|
|
|
|
// Get roles that can start this action using utility function
|
|
const availableRoles = getRolesForAction(currentTemplate.template, action.actionIdentifier);
|
|
|
|
return (
|
|
<>
|
|
<Text color={colors.text} bold>
|
|
{action.name}
|
|
</Text>
|
|
<Text color={colors.textMuted}>
|
|
{action.description || 'No description available'}
|
|
</Text>
|
|
|
|
{/* List available roles for this action */}
|
|
{availableRoles.length > 0 && (
|
|
<Box marginTop={1} flexDirection="column">
|
|
<Text color={colors.text}>Available Roles:</Text>
|
|
{availableRoles.map((role) => (
|
|
<Text key={role.roleId} color={colors.textMuted}>
|
|
{' '}- {role.name}
|
|
{role.description ? `: ${role.description}` : ''}
|
|
</Text>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
</Box>
|
|
) : focusedPanel === 'actions' && !currentTemplate ? (
|
|
<Text color={colors.textMuted}>Select a template first</Text>
|
|
) : focusedPanel === 'actions' && currentActions.length === 0 ? (
|
|
<Text color={colors.textMuted}>No starting actions available</Text>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Help text */}
|
|
<Box marginTop={1}>
|
|
<Text color={colors.textMuted} dimColor>
|
|
Tab: Switch list • Enter: Select action • ↑↓: Navigate • Esc: Back
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|