Agent Columns

Purpose

A Linear.com-inspired orchestration dashboard where an orchestrator sits on top and manager columns beneath it show sub-agents as single-line items with progress indicators. The meta-project is generating a UI framework — each manager owns a piece, each sub-agent is a task.

Prompt

Time for a new experiment. We already attempted an human/agent experiment autonomously, but frankly I feel like it failed.

I'd like to consider something more column like. The orchestrator sits on top and there are columns beneath it for managers who each have sub-agents. Each sub-agent is represented with a single description line (with a hover over to see more) and a progress indicator and/or crossed off when done.

The project could be generating an experimental UI framework (just to keep it meta) you could explain what the orchestrator is doing and its managers and their subagents to run experiements. Each manager would be an experiment and each subagent the individual attempts.

We need be REALLY clean and crisp with the ui like linear.com designed this framework. Not atlassian.

AskUserQuestion

Should the experiment use a light theme (like Linear's default) or dark theme to match the existing experiments' content areas?

Light (Recommended) — White/gray background like Linear.com

Dark — Dark background matching most existing experiments

Answer: Light (Recommended)

AskUserQuestion

How many manager columns should we show?

5 columns — Layout System, Components, Theme Engine, Animation Kit, Icons

3 columns — Fewer but wider columns with more breathing room

Answer: 5 columns

Versions

v4 Obsessive calm — simplified cards v3 Model badges, token/cost tracking v2 Dependencies, phase groups, manager cards v1 Initial — Linear-style column layout

UI Framework v2.0

Executing

12 / 18

Detail

Layout System

3 / 5

Grid primitives

12-column CSS grid with named areas and auto-flow

Flex utilities

Responsive flex-wrap helpers with gap tokens

Stack component

Vertical/horizontal stack with spacing scale

Float patterns

Legacy float clearfix and wrap behaviors

Masonry layout

CSS-only masonry with column-count fallback

Component Library

2 / 4

Button system

Primary, secondary, ghost, danger variants with size tokens

Input fields

Text, select, textarea with validation states

Modal dialog

Overlay with focus trap, size variants, and nested scroll

Data table

Sortable, filterable table with sticky header and pagination

Theme Engine

4 / 4

Design tokens

CSS custom properties for color, space, radius, shadow

Dark mode

Inverted token set with automatic media-query switching

Light mode

Default token set tuned for WCAG AA contrast

High contrast

Accessibility-first palette meeting WCAG AAA

Animation Kit

1 / 3

Easing curves

Cubic-bezier presets for enter, exit, and emphasis

Spring physics

CSS spring() approximation with configurable damping

Gesture responses

Scroll-linked and hover-triggered motion patterns

Icon Set

2 / 2

Core icon set

48 essential UI icons at 20px, stroke-based SVG

Custom glyphs

Brand-specific icons for product features and status