Save the role as an input when accepting

src/tui/screens/Invitation.tsx

@@ -205,9 +205,16 @@ export function InvitationScreen(): React.ReactElement {
       // Create invitation instance (will fetch from sync server)
       const invitation = await appService.createInvitation(invitationId);
 
+      console.log(invitation);
+
+      const missingRequirements = await invitation.getMissingRequirements();
+      console.log(missingRequirements);
+
       // Get available roles for this invitation
       const roles = await invitation.getAvailableRoles();
-      
+
+      console.log(roles);
+
       // Get the template for display
       const template = await appService.engine.getTemplate(invitation.data.templateIdentifier);
 
@@ -244,8 +251,14 @@ export function InvitationScreen(): React.ReactElement {
       setIsLoading(true);
       setStatus(`Accepting as ${selectedRole}...`);
 
-      await importingInvitation.accept();
-      
+      // TODO: Engine doesnt support "accepting" without supplying some kind of data along with it.
+      // We also dont have a way to say "this action will require inputs, so i will do that."
+      // If it did, we could add an "input" with the role identifier.
+      // For now, we are just going to hard-code the input with the role identifier.
+      await importingInvitation.addInputs([{
+        roleIdentifier: selectedRole,
+      }]);
+
       showInfo(`Invitation imported and accepted!\n\nRole: ${selectedRole}\nTemplate: ${importTemplate?.name ?? importingInvitation.data.templateIdentifier}\nAction: ${importingInvitation.data.actionIdentifier}`);
       setStatus('Ready');
       
@@ -779,7 +792,7 @@ export function InvitationScreen(): React.ReactElement {
           flexDirection="column"
           borderStyle="double"
           borderColor={colors.primary}
-          backgroundColor="white"
+          backgroundColor="black"
           paddingX={2}
           paddingY={1}
           width={70}

src/tui/screens/action-wizard/useActionWizard.ts

@@ -3,7 +3,7 @@ import { useNavigation } from '../../hooks/useNavigation.js';
 import { useAppContext, useStatus } from '../../hooks/useAppContext.js';
 import { formatSatoshis } from '../../theme.js';
 import { copyToClipboard } from '../../utils/clipboard.js';
-import type { XOTemplate, XOInvitation } from '@xo-cash/types';
+import type { XOTemplate, XOInvitation, XOTemplateTransactionOutput } from '@xo-cash/types';
 import type {
   WizardStep,
   VariableInput,
@@ -360,8 +360,9 @@ export function useActionWizard() {
           setStatus('Adding required outputs...');
 
           const outputsToAdd = transaction.outputs.map(
-            (outputId: string) => ({
-              outputIdentifier: outputId,
+            (output: XOTemplateTransactionOutput) => ({
+              outputIdentifier: output.output,
+              roleIdentifier: roleIdentifier,
             })
           );