feat: split main area — toggleable code/file pane

[andrewchumchal]

Summary

Allow the main chat area to optionally split into two side-by-side panes: the conversation on the left and a code/file viewer on the right. The second pane is not always visible — it opens on demand and can be dismissed at any time.

Motivation

Claude's artifacts model (chat left, rendered output right) is compelling but forces the layout even when there's nothing to render. OpenConduit's approach should be: single-pane by default (just the chat), second pane appears when the user wants to view or compare a file/artifact, and disappears when not needed — keeping the interface clean.

Proposed behaviour

Default state

• Main area shows only the chat pane (full width)
• No second pane visible

Opening the second pane

The second pane can be opened via:

• A split button in the top bar (icon: side-by-side panels)
• Keyboard shortcut ⌘\
• Clicking "Open in pane" on any code block or file reference in a message
• API/IPC trigger (e.g. when an AI response includes a renderable artifact — future)

Second pane content

When open, the right pane can display:

• Code viewer — syntax-highlighted code from a message or attached file
• File viewer — text/Markdown/image files from the files panel
• Preview — rendered HTML, SVG, or Markdown output
• Diff view — two code blocks compared side by side (future)

The user can switch what the pane shows using a header selector or by "sending" a different artifact to the pane.

Closing the second pane

• × button in the pane header
• Re-pressing ⌘\
• Pressing Escape while the pane is focused

Layout

• Pane split is horizontal (left chat | right code/file)
• The divider is draggable; proportions persisted in uiStore
• When the second pane is closed, the chat pane smoothly expands back to full width
• Minimum width enforced on both panes so neither becomes unusable

uiStore changes

• splitPaneOpen: boolean
• splitPaneWidth: number (right pane width in px, persisted to localStorage)
• splitPaneContent: { type: 'code' | 'file' | 'preview'; payload: string } | null

Acceptance criteria

• Main area is single-pane (chat only) by default
• ⌘\ and split button open/close the second pane
• Second pane shows code/file content sent to it
• Divider is draggable; proportions persist
• Closing the pane restores chat to full width (smooth transition)
• Minimum pane width prevents either panel becoming unusable
• "Open in pane" action available on code blocks in messages

Prerequisites

• feat: app shell — activity bar + primary sidebar panel switching #14 App shell

Related

• feat: secondary sidebar (configurable right panel) #28 Secondary sidebar (right panel)
• feat: tabbed conversations #15 Tabbed conversations (tabs sit above this split area)