Skip to Content
Platform FeaturesCanvas & Interface

Canvas & Interface Guide

Master Lona’s interface to work efficiently and make the most of the platform’s features.

Interface Overview

Lona’s interface consists of three main areas:

┌─────────┬──────────────────┬──────────────┐
│ Left    │   Center         │   Right      │
│ Sidebar │   Chat Area      │   Canvas     │
│         │                  │   Panel      │
└─────────┴──────────────────┴──────────────┘

Let’s explore each area in detail.

The sidebar is your navigation hub and control center.

Collapse/Expand Controls

At the top:

  • → (Chevron Right): Expands the sidebar when collapsed
  • ← (Chevron Left): Collapses the sidebar when expanded

Why collapse?

  • More screen space for chat and canvas
  • Cleaner, more focused view
  • Better for smaller screens

Why expand?

  • See full navigation labels
  • Access chat history
  • More context for buttons

Four main navigation items:

1. New Chat Icon 💬

Purpose: Start creating a new strategy Action: Redirects to new chat page Use When: Beginning a new strategy from scratch

2. Strategies Icon 📊

Purpose: View all saved strategies Action: Opens strategies list page Use When:

  • Reviewing existing strategies
  • Re-running a strategy
  • Managing your strategy library

3. Reports Icon 📈

Purpose: Access execution reports Action: Opens reports list page Use When:

  • Analyzing backtest results
  • Comparing performance
  • Reviewing past executions

4. Data Icon 📁

Purpose: Manage data sources Action: Opens data management page Use When:

  • Uploading new data
  • Viewing available data
  • Managing your data library

Chat History (Expanded View Only)

When sidebar is expanded, you’ll see:

“Chat History” Section:

  • Recent conversations listed
  • Most recent at top
  • Click any chat to reopen it
  • Shows first user message as title

Benefits:

  • Quickly return to previous strategies
  • Continue where you left off
  • Access strategy development history

Canvas Controls (In Chat Only)

When you’re in an active chat, additional controls appear:

Canvas Mode Button

Icon: Shows current mode (Code/Report) Action: Toggles between views States:

  • Code Mode: View generated strategy code
  • Report Mode: View requirements and results

When to use:

  • Switch to Code mode after generation
  • Switch to Report mode after execution
  • Toggle to compare code and results

Canvas Size Button

Icon: Shows current size Action: Cycles through sizes States:

  1. Hidden: Canvas completely hidden
  2. Half: Canvas takes 40% of screen width
  3. Full: Canvas takes 100% of screen width (chat hidden)

Color Indicators:

  • No color: Hidden
  • Light blue: Half width
  • Bright blue: Full width

When to use:

  • Start with Hidden to focus on interview
  • Switch to Half when reviewing requirements/code
  • Use Full to analyze detailed results
  • Return to Hidden for more chat space

User Profile

At the bottom of sidebar:

  • User avatar/icon
  • Account settings access
  • Sign out option

Center Chat Area

The main conversation area where you interact with Lona.

Chat Header (Top)

Components:

  • Page title (usually empty for clean look)
  • Status indicators (when processing)

Message Flow

Your Messages (Right Side):

  • Light background color
  • Your text and any attachments
  • Send timestamp

Lona’s Messages (Left Side):

  • Distinct background color
  • AI responses
  • Formatted with markdown
  • May include action buttons

Message Types

Text Messages

Standard conversational responses from Lona.

Structured Data

Special formatted content:

  • Requirements lists (after extraction)
  • Code blocks (when showing examples)
  • Status updates (during processing)

Action Buttons

Interactive buttons that appear below messages:

Extract Requirements (Blue button)

  • Appears during interview phase
  • Click to process conversation into requirements
  • Framework name shown in development mode

Generate Fast / Generate Advanced (Amber & Green buttons)

  • Appear after requirements extraction
  • Choose model for code generation
  • Advanced has guard icon for premium users

Execute (Button)

  • Appears after code generation
  • Opens execution configuration dialog
  • Starts backtest process

Chat Input (Bottom)

Text Area:

  • Expandable input field
  • Grows as you type multi-line messages
  • Shrinks when empty

Send Button:

  • Arrow icon (➤)
  • Disabled when input is empty
  • Shows spinner when processing

Keyboard Shortcuts:

  • Enter: Send message (single line)
  • Shift+Enter: New line (multi-line message)

Status Indicators

While Lona is processing:

  • Loading spinner appears
  • Status text shows current stage
  • “Running interview agent…”
  • “Generating code…”
  • “Executing strategy…”

Right Canvas Panel

Dynamic panel that displays different content based on stage.

Canvas Visibility States

Hidden (0% Width)

  • Canvas not visible
  • Full width for chat
  • Clean, focused view
  • Default when starting new chat

Half Width (40% Width)

  • Balanced view
  • Chat and canvas both visible
  • Most common working state
  • Good for reviewing code/results while chatting

Full Width (100% Width)

  • Canvas takes entire screen
  • Chat area hidden
  • Maximum space for viewing content
  • Best for analyzing detailed results

Canvas Modes

Report Mode

Shows:

  • Requirements list (after extraction)
  • Execution reports (after backtest)
  • Performance metrics
  • Charts and visualizations

When Active:

  • After requirements extraction
  • After backtest completion
  • When reviewing results

Content Types:

Requirements Display:

  • Structured list of requirements
  • Category badges (Strategy, Risk, Execution)
  • Importance indicators
  • Descriptions

Execution Results:

  • Summary card
  • Metrics grid
  • Trading visualizations
  • Performance charts

Code Mode

Shows:

  • Generated strategy code
  • Syntax highlighted
  • Line numbers
  • Code explanation below

When Active:

  • After code generation
  • When reviewing/editing strategy
  • When examining implementation

Features:

  • Syntax Highlighting: Color-coded Python
  • Line Numbers: Easy reference
  • Scrollable: Review entire strategy
  • Editable: Click to modify
  • Copy Button: Copy code to clipboard

Below Code:

  • Markdown-formatted explanation
  • Strategy overview
  • Indicators used
  • Entry/exit logic
  • Parameter descriptions

Canvas Content States

Empty State

When no content available:

  • Placeholder message
  • Helpful hints
  • Instructions for next step

Messages:

  • “No code available yet…”
  • “No requirements available…”
  • “No report available…”

Loading State

When content is being generated:

  • Animated spinner
  • Status messages
  • Progress indicators

Examples:

  • “Processing…”
  • “Generating code…”
  • “Loading report…”

Content State

When content is ready:

  • Full display of information
  • Interactive elements
  • Scrollable content

Canvas Resize Handle

Between Chat and Canvas:

  • Vertical divider line
  • Appears when both panels visible
  • Currently non-interactive (use size buttons)

Responsive Behavior

Lona’s interface adapts to different screen sizes:

Large Screens (Desktop)

  • All three areas visible comfortably
  • Sidebar can stay expanded
  • Half-width canvas works well
  • Optimal user experience

Medium Screens (Laptop)

  • Consider collapsing sidebar
  • Use half-width canvas
  • Toggle as needed
  • Good working space

Small Screens (Tablet/Mobile)

  • Collapse sidebar for sure
  • Use full-width canvas or hidden
  • Toggle between chat and canvas
  • One panel at a time

Keyboard Shortcuts

Chat Navigation

  • Enter: Send message
  • Shift+Enter: New line in message
  • Cmd/Ctrl+K: Focus chat input (future)

Canvas Controls

  • No keyboard shortcuts currently
  • Use sidebar buttons

General Navigation

  • Browser back/forward work as expected
  • Cmd/Ctrl+Click opens links in new tab

Working Efficiently

During Interview (Stage 1):

Sidebar: Collapsed
Canvas: Hidden
Focus: 100% on conversation

Reviewing Requirements (Stage 2):

Sidebar: Collapsed
Canvas: Half width, Report mode
Focus: Split between chat and requirements

Reviewing Code (Stage 3):

Sidebar: Collapsed
Canvas: Half width, Code mode
Focus: Reading code and explanation

Analyzing Results (Stage 4):

Sidebar: Collapsed
Canvas: Full width, Report mode
Focus: Deep analysis of charts and metrics

Multi-Strategy Development

When working on multiple strategies:

Use Chat History:

  1. Expand sidebar
  2. See all recent chats
  3. Click to switch between strategies
  4. Each maintains its own state

Organize with New Chats:

  • Start fresh chat for each major strategy idea
  • Keep related iterations in same chat
  • Name strategies clearly for easy identification

Tips and Tricks

Speed Up Your Workflow

✅ Learn the Toggle:

  • Practice switching canvas modes
  • Get comfortable with size changes
  • Use keyboard for chat navigation

✅ Optimize Layout:

  • Start collapsed/hidden
  • Expand only when needed
  • Toggle based on current task

✅ Use Chat History:

  • Quick access to previous work
  • No need to search strategies page
  • Maintains context

Visual Organization

✅ Minimize Distractions:

  • Collapse sidebar when interviewing
  • Hide canvas during conversation
  • Expand when reviewing content

✅ Maximize Analysis Space:

  • Full-width canvas for results
  • Code mode for implementation review
  • Report mode for metrics

Browser Tips

✅ Use Tabs:

  • Open strategies page in new tab
  • Keep multiple chats in different tabs
  • Compare results side-by-side

✅ Zoom Level:

  • Adjust browser zoom for readability
  • 90-110% usually optimal
  • Affects all interface elements

Accessibility Features

Current Support

  • Keyboard Navigation: Basic navigation works
  • Screen Reader: Text content accessible
  • Color Contrast: Meets basic standards
  • Text Sizing: Responds to browser zoom

Future Enhancements

  • Enhanced keyboard shortcuts
  • Better screen reader support
  • High contrast mode
  • Customizable text sizes

Interface States

Normal Operation

  • All elements responsive
  • Smooth transitions
  • No lag

Processing

  • Status indicators active
  • Some controls disabled
  • Progress feedback shown

Error State

  • Error messages displayed
  • Clear indication of problem
  • Suggested remediation

Loading

  • Skeleton screens (future)
  • Spinners and progress bars
  • Status text updates

Common Interface Questions

Q: Canvas disappeared, how do I get it back?
A: Click the Canvas Size button in left sidebar and select Half or Full.

Q: How do I see my chat history?
A: Expand the left sidebar by clicking the → button.

Q: Can I resize the canvas by dragging?
A: Not currently. Use the Canvas Size button to cycle through sizes.

Q: The interface looks different on mobile?
A: Yes, it’s responsive. Use canvas size toggles to optimize for small screens.

Q: How do I switch between code and results?
A: Use the Canvas Mode button in the left sidebar when in a chat.

Q: Can I customize colors or themes?
A: Not currently. The interface uses system-level light/dark mode detection (if implemented).

What’s Next?

Now that you understand the interface:

Next: Explore Best Practices for optimal workflow.

Last updated on
Data ManagementAI Model Selection