App Workspace Overview

The Helm ADE workspace provides a unified interface for managing agent sessions, viewing runtime output, and monitoring task queues. This article covers the visual layout and interaction patterns for the authenticated app experience.

Workspace Layout

The workspace follows a three-column layout optimized for development workflows:

+------------------------------------------+
Header (logo, org/project switchers)

+----------+-------------------------------+

Session
Session Workspace

Navigator
(tabs, runtime, queue)

+----------+-------------------------------+

Header

The header provides global context and navigation:

• Helm ADE Logo — Returns to the app dashboard
• Organization Switcher — Select active organization
• Project Switcher — Select or create projects

Both switchers use consistent styling with:

• Focus indicators using the primary blue glow
• Hover states with elevated surface backgrounds
• Disabled states with reduced opacity

Session Navigator (Left Rail)

The left sidebar contains the session navigator, organized by agent type:

Section	Purpose
Toolkit	Configuration and customization
Planners	PRD creation and planning
Builders	Feature implementation
Testers	Automated testing and QA

Visual indicators:

• Green badge — Active session count
• Gray badge — Total session count
• Colored status dots — Session state (active, paused, completed, abandoned)

Interaction states:

• Hover on group headers and session items shows subtle background change
• Focus-visible indicators on keyboard navigation
• Active session highlighted with primary blue background

Session Workspace (Main Area)

The main workspace area displays:

Tab Strip — Open sessions as browser-like tabs

Runtime View — OpenCode terminal output

Task Queue Panel — Optional sidebar for task visibility

Visual Design System

The app workspace uses the Helm design token system for consistent styling:

Typography

• Display font (Space Grotesk) — Headings, titles, navigation labels
• Body font (IBM Plex Sans) — UI text, descriptions, buttons
• Mono font (IBM Plex Mono) — Code, session IDs, technical values

Color Palette

Token	Usage
--color-surface	Cards, panels, header
--color-surface-hover	Hover states
--color-primary	Active states, primary actions
--color-success	Connected, completed states
--color-warning	Paused, pending states
--color-danger	Error, abandoned states

Spacing

All spacing uses the 4px base scale:

• --space-2 (8px) — Tight spacing, badge padding
• --space-3 (12px) — Default padding
• --space-4 (16px) — Section spacing
• --space-6 (24px) — Large gaps

Border Radius

• --radius-md (4px) — Badges, small buttons
• --radius-lg (6px) — Inputs, selects, tabs
• --radius-xl (8px) — Cards, panels
• --radius-full — Pills, status dots

Interaction States

Focus Management

All interactive elements support keyboard navigation:

• Focus-visible outline — 2px primary blue with offset
• Tab order — Logical flow through header, navigator, workspace
• Skip links — Available for screen reader users

Hover States

Interactive elements provide visual feedback on hover:

• Background color elevation
• Border color strengthening
• Subtle transform effects on buttons

Disabled States

Disabled controls use:

• 50% opacity
• Not-allowed cursor
• No hover/focus effects

Session Tabs

The tab strip provides workspace management:

Tab Anatomy

[ Status Dot | Tab Title | Dirty Indicator | Close Button ]

• Status dot — Connection state color
• Title — Session name (truncated if long)
• Dirty indicator — Yellow asterisk for unsaved state
• Close button — Appears on hover

Tab States

State	Visual
Inactive	Muted text, transparent background
Hover	Elevated background, normal text
Active	White background, normal text, border
Connecting	Pulsing yellow status dot
Error	Red status dot

Task Queue Panel

The task queue panel provides visibility into background operations:

Summary Badges

Colored badges show task counts by status:

• Running (blue) — Currently executing
• Pending (yellow) — Queued for execution
• Failed (red) — Requires attention
• Completed (green) — Successfully finished

Task Items

Each task card displays:

• Title and description
• Status badge
• Story ID (if applicable)
• Error message (for failed tasks)
• Action buttons (cancel/retry)

Responsive Considerations

The workspace is optimized for desktop use (1024px+):

• Fixed sidebar width (280px)
• Flexible main content area
• Collapsible task queue panel

On smaller screens:

• Consider using the mobile-optimized support hub
• Full workspace features require desktop resolution

Accessibility

The workspace supports:

• Screen reader navigation with semantic HTML
• Keyboard-only operation
• Focus indicators meeting WCAG 2.1 AA
• Sufficient color contrast for all text
• Reduced motion preference support

Related Topics

• Session Navigation — Detailed session management
• Organization and Project Switching — Context switching
• Task Queue Visibility — Queue management
• UI Foundations — Design token reference