[UX-005] UX Design: Query Editor & Results Panel

[CalvinAllen]

Overview

Design specification for the SQL++ query editor and results panel.

Query Editor

Location

• Opens as a document tab in the main editor area
• Tab title: "Query - [Connection Name]" or filename if saved

Layout

┌─────────────────────────────────────────────────────────────┐
│ [Execute] [Stop]    Connection: [Local Dev Cluster ▼]       │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1 │ SELECT *                                               │
│  2 │ FROM `travel-sample`._default._default                 │
│  3 │ WHERE type = "airline"                                 │
│  4 │ LIMIT 10;                                              │
│    │                                                        │
└─────────────────────────────────────────────────────────────┘

Toolbar

• Execute (F5 or Ctrl+E): Run query
• Stop: Cancel running query
• Connection dropdown: Select active connection context

Editor Features

• SQL++ syntax highlighting
• Line numbers
• Auto-complete (future enhancement)

Results Panel

Location

• Docked below query editor (like SSMS)
• Can be shown/hidden
• Resizable

Layout

┌─────────────────────────────────────────────────────────────┐
│ Results │ Messages │                    [JSON] [Grid] [Raw] │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  {                                                          │
│    "id": "airline_10",                                      │
│    "type": "airline",                                       │
│    "name": "Sample Airline"                                 │
│  },                                                         │
│  {                                                          │
│    "id": "airline_11",                                      │
│    ...                                                      │
│  }                                                          │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│ 10 rows returned in 0.045s                    [Export ▼]    │
└─────────────────────────────────────────────────────────────┘

Tabs

• Results: Query output
• Messages: Errors, warnings, info messages

View Modes

• JSON: Tree view with expand/collapse
• Grid: Tabular view (if results are flat)
• Raw: Plain text JSON

Status Bar

• Row count
• Execution time
• Export dropdown (Copy, Save as JSON, Save as CSV)

Keyboard Shortcuts

Shortcut	Action
F5	Execute query
Ctrl+E	Execute query (alternative)
Ctrl+Shift+E	Execute selected text only
Escape	Stop query

Acceptance Criteria

• Query editor layout approved
• Results panel layout approved
• View modes defined
• Keyboard shortcuts defined
• Export options defined