Layouts

session.layouts.showTextWall('Hello from MentraOS!');

session.layouts.showTextWall(
  'Line 1\n' +
  'Line 2\n' +
  'Line 3'
);

session.layouts.showDoubleTextWall({
  topText: 'Title or Header',
  bottomText: 'Details or body text here'
});

session.events.onTranscription((data) => {
  if (data.isFinal) {
    session.layouts.showDoubleTextWall({
      topText: `You asked: ${data.text}`,
      bottomText: 'Processing your request...'
    });
  }
});

session.layouts.showReferenceCard(
  'Weather Update',
  'Sunny, 72°F\nLow: 58°F\nHumidity: 45%'
);

session.layouts.showReferenceCard(
  'Meeting Info',
  'Time: 2:00 PM\nRoom: Conf A\nAttendees: 5'
);

// Show initial message
session.layouts.showTextWall('Loading...');

// After processing (replaces "Loading...")
session.layouts.showTextWall('Data loaded!');

session.events.onTranscription((data) => {
  if (data.isFinal) {
    // Show final transcription
    session.layouts.showTextWall(data.text);
  } else {
    // Show interim results
    session.layouts.showTextWall(`${data.text}...`);
  }
});

// Clear the display
session.layouts.clear();

// ✅ Good
session.layouts.showTextWall('Message sent!');

// ❌ Avoid - too verbose
session.layouts.showTextWall(
  'Your message has been successfully sent to the recipient.'
);

const caps = session.capabilities;

if (caps?.display?.maxTextLines && caps.display.maxTextLines < 5) {
  // Small display - use short message
  session.layouts.showTextWall('Updated!');
} else {
  // Larger display - show details
  session.layouts.showTextWall(
    'Update complete\nTime: 10:30\nStatus: Success'
  );
}

// Question/answer - use DoubleTextWall
session.layouts.showDoubleTextWall({
  topText: 'What is 2 + 2?',
  bottomText: 'Answer: 4'
});

// Structured data - use ReferenceCard
session.layouts.showReferenceCard('Contact', 'Name: John\nPhone: 555-0100');

// Simple message - use TextWall
session.layouts.showTextWall('Processing...');

protected async onSession(session: AppSession, sessionId: string, userId: string) {
  session.layouts.showTextWall('Loading your data...');
  
  const data = await this.fetchUserData(userId);
  
  session.layouts.showReferenceCard(
    'Welcome Back',
    `Last login: ${data.lastLogin}`
  );
}

class OnboardingApp extends AppServer {
  protected async onSession(session: AppSession, sessionId: string, userId: string) {
    await this.showStep1(session);
  }

  private async showStep1(session: AppSession) {
    session.layouts.showDoubleTextWall({
      topText: 'Step 1: Welcome',
      bottomText: 'Say "next" to continue'
    });
    
    session.events.onTranscription((data) => {
      if (data.isFinal && data.text.toLowerCase().includes('next')) {
        this.showStep2(session);
      }
    });
  }

  private async showStep2(session: AppSession) {
    session.layouts.showDoubleTextWall({
      topText: 'Step 2: Setup',
      bottomText: 'Configuring your preferences...'
    });
  }
}

protected async onSession(session: AppSession, sessionId: string, userId: string) {
  const caps = session.capabilities;
  
  if (!caps?.hasDisplay) {
    // Audio-only device
    await session.audio.speak('Welcome to the app!');
    return;
  }
  
  const maxLines = caps.display?.maxTextLines || 3;
  
  if (maxLines < 5) {
    // Small display - minimal content
    session.layouts.showTextWall('Welcome!');
  } else {
    // Larger display - more detail
    session.layouts.showReferenceCard(
      'Welcome',
      'Your app is ready\nSay "help" for commands'
    );
  }
}