# AI Frontend Spec

## Entry Point

The topbar includes an AI assistant button with a gradient accent and pulse indicator. The assistant opens with `Ctrl+K` on Windows/Linux and `Cmd+K` on macOS.

## Drawer

The drawer opens from the right side:

* desktop width: `500px`
* mobile width: full screen
* animated with Framer Motion
* dark mode compatible
* accessible labels and focusable controls

## Conversation UI

The conversation supports:

* user and assistant messages
* typing/progress states
* persisted in-memory history for the current UI session
* clear conversation
* query insight panel with AST, table, duration, and record count
* tabular result previews when rows are available

## Thinking States

The UI displays staged progress:

* Analyzing Database...
* Building Query Plan...
* Validating Query...
* Executing Query...
* Generating Response...

## Responsive Behavior

The drawer occupies the full viewport on mobile and uses constrained controls so text and buttons do not overlap.